/* 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;
 }
 /* swiper js cus */

 .swiper-wrapper{
  width: auto;
  height: auto;
 }
.swiper-slide{
  margin-right: 0 !important;
}
 .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;
    }
    .header .navbar a.active {
      border-radius: 0;
    }
 }

 /* 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: 15px;
  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%);
 }



 /* about us content */
 .about-us{
   background-color: var(--secound-bg);
   padding: 5rem 8% 6rem;

 }

 .about-us .box-container {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(21rem,1fr));
   gap: 6rem;
   align-items: center;
   justify-items:center ;

 }

 .about-us .box-container .about-content h3{
  background: -webkit-linear-gradient(106deg, rgba(0,212,255,1) 0%, rgb(129 185 110) 35%, rgba(0,212,255,1) 100%);
  padding: 10px;
  color: white;
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--main-bg);
  line-height: 1;

}
/* .about-us .box-container .about-content h3>span{
  color: var(--main-bg);
  
} */
 .about-us .box-container .about-content p{
  font-size: 14px;
  line-height: 1.9;
  color: #515050;
  border-left: 1px solid #999;
  padding-left: 10px;
}
 .about-us .box-container .about-img {
  border-radius: 20px;
  overflow: hidden;
 }
 .about-us .box-container .about-img img{
   width: 100%;

 }
 /* media for this top */
 @media (max-width:710px) {
  .top-home .all-home .content  {
    left: 50px;
  }
  .top-home .all-home .content h1 {
    font-size: 40px;
  }
  .top-home .all-home .content p{
    font-size: 14px;
  }

  /* about us */
  .about-us .box-container {
    gap: 5rem;
  }
  .about-us .box-container .about-content h3{
    font-size: 30px;
  }
  .about-us .box-container .about-content p {
    font-size: 14px;

  }
}
 /* footer */
 .footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  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 */


.content-about {
   text-transform: uppercase;
   position: absolute;
   width: 100%;
   text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -20%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
   color: white;
}

.content-about  h1 {
  font-size: 55px;
  text-transform: capitalize;
}
.content-about  p {
  font-size: 20px;

}

.about-us .about-text{position: relative;}
.about-us .about-text::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  border-left: 1px solid var(--main-bg);
  margin-right: 10px;
}
.about-us .about-text h3{
  font-size: 70px;
  text-transform: capitalize;
  background: -webkit-linear-gradient(106deg, rgb(49 63 134) 0%, rgb(129 185 110) 35%, rgba(0,212,255,1) 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-us .about-text p {
  font-size: 14px;
  color: #909090;
}
.top-home.about {
  width: 100%;
  background-color: rgb(21, 70, 70);
  height: 550px;

}
.top-home .image-about img{
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: 0 0px;
}
@media (max-width:1140px) {
  .about-us .about-text h3 {
    font-size: 50px;
  }

}
@media (max-width:525px) {
  .about-us .about-text h3 {
    font-size: 60px;
  }

}

 /* page brands  */
 .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;
 }
.brands-content{
  position: relative;
  width: 100%;
  height: 250px;
  background: url(images/conex.jpg);
  background-position: 31% 67%;
  margin-top: 70px;
}

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

}
.all-content {
  display: grid;
  grid-template-areas: 
  "left-content  right-content  right-content ";
  gap: 20px;
}
.left-content{
  grid-area: left-content;
}
.right-content{
  grid-area: right-content;
}
.left-content {
  overflow-y: hidden;
  user-select: none;
  box-shadow: 0 0 1px var(--secound-bg);
  border-left: 1px solid var(--secound-bg);
}
.left-content a{
  color: var(--main-bg);
  font-size: 15px;
  padding: 10px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.left-content a.active{
  background-color: var(--main-b);
  color: white;
}
.left-content a span{
  padding-left: 10px;

}

.left-content a:hover span{
  color: white;
}

.left-content a:hover{
  background-color: var(--main-b);
  color: white;
}

.left-content .box{
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  transition: 0.5s linear;
}
.left-content .item.active .box{
  height: auto;
  scroll-behavior: none;
}
.right-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  grid-template-rows: repeat(2,minmax(200px, auto));
  gap: 20px;

}
.right-menu .box .box-img{
  background: url(images/paint_ink_texture.jpg);
  position: relative;
  overflow: hidden;
  
}

.right-menu .box .box-img a{
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 120px;
  height: 30px;
  padding: 5px 10px;
  color: white;
  background-color: var(--main-bg);
}
.right-menu .box .box-img a:hover i{
  margin-left: 5px;
}
.right-menu .box .box-img .over{
  background-color: #308a4046;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
}
.right-menu .box .box-img:hover .over {
  top: 0;
}

.right-menu .box .box-img:hover a {
  top: 50%;
}
.right-menu .box .box-img img {
  width: 100%;
  object-fit: cover;
}
.right-menu .box .box-content {
  color: #909090;
  font-weight: bold;
  border-bottom: 2px solid var(--main-bg);
  padding: 10px 0;
  text-align: center;
}

/*  */

@media (max-width:1230px) {
  .right-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
    grid-template-rows: repeat(2,minmax(170px, auto));
    margin-top: 50px;
  }
}
@media (max-width:730px) {
  .left-content {
    width: 100%;
  }
  .all-content {
    grid-template-areas: 
    "left-content  left-content  left-content ";
    gap: 0;
  }
  .right-menu {
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    grid-template-rows: repeat(2,minmax(200px, auto));

  }
}
@media (min-width:340px) {
  .right-menu {
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    grid-template-rows: repeat(2,minmax(150px, auto));

  }
}

/* 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 img  pro";
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: var(--pd);
}

.pro-image {
  grid-area: img;
  max-width: 400px;
}
.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: 20px;
  font-size: 13px;
  list-style-type:circle;
  color: #787878;
}



/* page- for contact */
.googel-map{
  display: grid;
  padding: var(--pd);
  grid-template-areas: 
  "map map map"
  "call contact-box contact-box";
 gap: 20px;
}
iframe {
  width: 100%;
}

.map {
  grid-area: map;
}
.contact-box form{
  grid-area: contact-box;
  flex-direction: column;
}
.contact-box input,
.contact-box textarea {
  padding: 10px;
  border: 1px solid var(--secound-bg);
  margin-top: 10px;
  margin-bottom: 10px;
  
}
.contact-box input,
.contact-box button,
.contact-box textarea{
  width: 100%;
  resize: none;
}
button {
  background-color: var(--main-b);
  color: white;
  padding: 10px; 
}
@media (max-width:990px){

}
.call{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0 10px;
  grid-area: call;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  color: var(--light-color);
}
.call h3{  
  font-size: 20px;
  padding: 10px;
  color: white;
  background: -webkit-linear-gradient(106deg, rgb(114, 210, 254) 0%, rgb(129 185 110) 35%, rgba(0,212,255,1) 100%);
}
.call li {
  border-bottom: 1px solid var(--main-bg);
  color: var(--main-bg);
  font-size: 16px;
}
.call li a,
.call li span{
  line-height: 4;
  padding-left: 10px;
  font-size: 16px;
  color: #787878;
}

.call li span:hover,
.call li a:hover {
  color: #273c89;
}
@media (max-width:720px){
  .contact-box form{
    margin-top: 10px;
  }
  .googel-map {
    grid-template-areas: 
    "map map map"
    "contact-box contact-box contact-box"
    "call call call";
    gap: 0;
  }
  .call{
    padding: 0;
    
  }

}

/*  */

.Mission-head{
  position: relative;
  width: 100%;
  height: 250px;
  background: url(images/Mission-content.jpg);
  background-position: 31% 50%;
  background-size: cover;
  margin-top: 70px;
}

.Mission-head p {
  font-size: 40px;
  color: white;
}
.Mission-head,
.Mission-content{
  padding: var(--pd);
}
.Mission-content {
  text-align: center;
  line-height: 2;
}
.Mission-content h2 {
  color: var(--main-bg);
  font-size: 25px;
  margin-bottom: 20px;
}
.Mission-content p {
  font-size: 14px;
  color: #999;
}
.mission.vision{
  margin: 20px 0;
  border-bottom: 1px solid var(--main-bg);
  padding-bottom: 10px;
}
.mission.vision h3,
.mission.vision p{
  text-align: left;
}
.mission.vision h3{
  font-size: 25px;
  color: #515050;
}

@media (max-width:720px) {
  .Mission-content p {
    text-align: left;
  }
}
.Philosophy{
width: 100%;
overflow: hidden;
background-color: var(--secound-bg);
}
.containt {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  gap: 20px;
  padding-bottom: 50px;
}
.containt .list{
  width: 300px !important;
  height: 300px;
  padding: 20px;
  background-color: white;
  text-align: center;
  box-shadow: 0 4px 6px -2px rgba(0,0,0,.05), 0 10px 15px -3px rgba(0,0,0,.1);
}
.containt .list i {
  font-size: 50px;
  color: var(--main-bg);
}
.containt .list h3{
  margin: 20px 0 10px 0;
  font-size: 16px;
  color: var(--main-b);
}
.containt .list p {
  font-size: 14px;
  line-height: 1.3;
  color: #909090;
}

/* our clients */

.client ,.PROJECT {
  padding: var(--pd);
  
}
.all-img{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,200px));
  grid-template-rows: repeat(5,200px);
  gap: 20px;
  justify-content: center;

}
.all-img .client-item {
  height: 200px;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0px 5px 1px #a1b7f5;

  transition: all .5s;
}
.all-img .client-item:hover{
 transform: scale(1.3);
}

.PROJECT .text{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 10px;
  justify-content: center;
}

.PROJECT .text p{
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight:bold;
  color: rgb(63, 63, 63);
  background-color: rgb(236, 236, 236);
  cursor: pointer;

}

.PROJECT .text p {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgb(0, 255, 85),
      rgb(0, 153, 255),
      rgb(194, 255, 81)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  box-shadow:  0 1px 2px 2px rgb(233, 233, 233);
}

.PROJECT .text p:hover {
  background-size: 0 3px, 100% 3px;
}