/*add link font google*/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
   margin: 0;
   padding: 0;
   outline: none; 
   border: none;
   box-sizing: border-box;
   font-family: 'Jost', sans-serif;
   transition: .4s ease-in-out;
   scroll-behavior: smooth;
   text-decoration: none;
}

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

span{
   color: #0ef;
}

:root {
   --bg: #081b29;
   --secondClrBg: #112e42;
   --cl: #0ef;
   --fontClr: #fff;
}

h1,
h2,
a,
::placeholder {
   text-transform: capitalize;
}

input {
   border: none;
   outline: none;
}

section {
   position: relative;
   padding: 6%;
}

html::-webkit-scrollbar{
  width: 1rem;
   border:none;
}

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

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

body {
   background-color: var(--bg);
}

header {
   width: 100%;
   background-color: var(--bg);
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   padding: 15px 6%;
   z-index: 999;
   display: flex;
   justify-content: space-between;
   align-items: center;
   box-shadow: var(--cl);
}

header .fa-bars {
   font-size: 25px;
   color: #fff;
   padding: 8px 15px;
   border-radius: 10px;
   cursor: pointer;
   display: none;
}

header .logo {
   font-size: 35px;
   font-weight: 700;
   color: var(--fontClr);
   animation: slideRight 1s ease forwards;
      opacity: 0;
}

header .logo{
   color: var(--cl);
   height:40px;
}

header .navbar a {
   font-size: 17px;
   color: var(--fontClr);
   padding: 5px 10px;
   border-radius: 20px;
   font-weight: 500;
   animation: slideRight .6s ease forwards;
      opacity: 0;
      animation-delay: calc(.2s * var(--i));
}

header .navbar a:hover {
   box-shadow:0 0 1rem var(--cl);
   background-color: var(--cl);
   color: var(--bg);

}

/*----------------------------section Home----------------------------------*/

.home {
   padding: 15% 6%;
   background-color: var(--bg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.home .home_content h1 {
   font-size: 50px;
   color: var(--fontClr);
   animation: slideBottom 1s ease forwards;
      animation-delay: 1s;
      opacity: 0;
}

.home .home_content p {
   color: #eee;
   font-size: 17px;
   margin: 20px 0 30px;
   line-height: 1.6;
   animation: slideLeft 1s ease forwards;
      animation-delay: 1.5s;
      opacity: 0;
}

.btn {
   display: inline-block;
   padding: 10px 30px;
   background-color: var(--cl);
   color: var(--bg);
   font-size: 21px;
   font-weight: 500;
   text-transform: capitalize;
   border-radius: 10px;
   cursor: pointer;
      animation: slideLeft 1s ease forwards;
         animation-delay: 2s;
         opacity: 0;
}

.btn:hover {
   transform: scale(.95);
}

.link {
   margin-top: 50px;
}

.link a {
   position: relative;
   display: inline-flex;
   width: 50px;
   height: 50px;
   border: solid 2px var(--cl);
   justify-content: center;
   align-items: center;
   color: #0ef;
   border-radius: 50%;
   font-size: 20px;
   z-index: 2;
   transition: .3s linear;
   margin-left: 8px;
   overflow: hidden;
   animation: slideRight 1s ease forwards;
     
      opacity: 0;
      animation-delay: calc(.3s * var(--i));
}

.link a:hover {
   color: #112e42;
}

.link a::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   width: 0%;
   height: 100%;
   background-color: #0ef;
   border-radius: 50%;
   transition: .4s linear;
   z-index: -1;
}

.link a:hover::before {
   width: 100%;
}


.home img {
   height: 350px;
   cursor: pointer;
   border-radius: 40%;
   animation: slidescel 1s ease forwards;
      animation-delay: 3s;
      opacity: 0;
}
.home img:hover{
 transform: scale(1.1);
}

/*------------------------------------start product--------------------------------------*/
.heading {
   text-align: center;
   font-size: 40px;
   color: var(--fontClr);
   margin-bottom: 40px;

}

.product {
   background-color: var(--secondClrBg);
}

.product_container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1.5rem;
}

.product_container .product_box {
   position: relative;
   background-color: var(--fontClr);
   cursor: pointer;
   border-radius: 20px;
   overflow: hidden;
}

.product_container .product_box img {
   width: 100%;
}

.product_container .product_box img:hover {
   transform: scale(1.1);
}

.product_container .product_box .product_info {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 10px;
}

.product_container .product_box .product_info .icon-star i {
   color: orange;
}

.product_container .product_box .product_info p {
   color: orange;
   font-size: 18px;

}

.product_container .product_box .product_info p span {
   color: #000;
   text-decoration: line-through 2px;
}

.product .product_container .product_box .tittel {
   display: flex;
   justify-content: space-between;
   padding: 0px 10px 15px;

}

.product .product_container .product_box .tittel h5 {
   font-size: 18px;
   color: #081b29;
}

.product .product_container .product_box .tittel i {
   font-size: 20px;
   color: #081b29;
}

/*----------------------------section devs----------------------------------------------*/

.devs {
   background: var(--bg);
}

.devs .devs_container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   
   gap: 1.5rem;
}

.devs .devs_container .devs_box {
   position: relative;
   cursor: pointer;
   text-align: center;
   background-color: var(--secondClrBg);
   padding: 20px;
   border-radius: 20px;
   border: solid 2px #0ef;
}

.devs .devs_container .devs_box:hover {
   transform: scale(1.1);
}

.devs .devs_container .devs_box img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
}

.devs_container .devs_box .devs_info p {
   color: var(--fontClr);
   font-size: 18px;
   margin: 10px 0;
}

.devs_container .devs_box .devs_info .icon-star i {
   color: var(--cl);
   font-size: 22px;
}

.devs_container .devs_box .devs_info h4 {
   font-size: 22px;
   margin-top: 10px;
   color: #eee;
}

/*---------------------------------secrion contact----------------------------------*/
.contact {
   background-color: var(--secondClrBg);
}

.contact form{
   max-width: 600px;
   margin: 1rem auto;
   text-align: center;
  
}

.contact .input-box{
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.contact input ,
.contact textarea{
   width: 100%;
   background-color: var(--bg);
   padding: 15px;
   margin-top: 10px;
   border-radius: 10px;
   font-size:20px ;
   border: #0ef solid 2px;
   color: var(--fontClr);

}

textarea{
   resize: none;
   outline: none;
}
.contact .input-box input{
   width: 49%;
}
.contact .btn{
   margin-top: 20px ;
   box-shadow: 0 0 20px #0ef;
     cursor: pointer;

}

 
/*----------------responsive-------------------------*/
@media(max-width:998px){
  .home{
    margin-top: 120px;
  }

  .home img{
   height: 300px;
  }
.home .home_content h1{
   font-size: 40px;
  }

  .contact .input-box input{
   width: 100%;
  }

  header nav{
    display: none;
  }

  .navbar.active{
    display: block;
 }

   header .fa-bars{
      display: block;
   }


}

@media(max-width:768px){
   #br{
   display:none;
   }
   
  .home{
    margin-top: 120px;
  }

  .home {
   text-align: center;
   justify-content: center;
  }
  .home img{
   margin-top: 30px;
  }
   header nav {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      background-color: #081b29;
      padding: 20px;
      padding-bottom: 700px;
      display: none;

   }
            header nav a{
               margin-top: 20px;
               display: block;
               text-align: center;
            }
                        header .fa-bars{
                           display: block;
                        }
}
.navbar.active{
   display: block;
}

/*----------------- animation--------------- */
@keyframes slideRight {
   0% {
      transform: translateX(-100px);
      opacity: 0;
   }

   100% {
      transform: translateX(0px);
      opacity: 1;
   }
}

@keyframes slideTop {
   0% {
      transform: translatey(100px);
      opacity: 0;
   }

   100% {
      transform: translatey(0px);
      opacity: 1;
   }
}

@keyframes slideBottom {
   0% {
      transform: translatey(100px);
      opacity: 0;
   }

   100% {
      transform: translatey(0px);
      opacity: 1;
   }
}

@keyframes slideLeft {
   0% {
      transform: translatex(-100px);
      opacity: 0;
   }

   100% {
      transform: translatex(0px);
      opacity: 1;
   }
}

@keyframes slidescel {
   0% {
      transform: scale(0);
      opacity: 0;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

/* message */
.sub_message{
  background-color: var(--cl);
  border:0;
  font-size: 24px;
  font-weight: bold;
     cursor: pointer;

}

.call_button{
   color: var(--bg);
}