body{
   margin: 0px;
}
*{
   font-family: sans-serif;
   scroll-behavior: smooth;
}
header{
   background: rgba(13, 17, 23,0.9);   
   backdrop-filter: blur(5px);
   padding: 20px 0px;
   position: sticky;
   top: 0px;
   .forimg{
      
      margin: 0px 3%;
      /* background: red; */
      width: 80px;

      img{
         width: 100%;
         filter: brightness(2);
      }
   }

   h1{
      margin: 0px;
      color: white;
      
      
      span{
         color: #00D0F4;
      }
   }
}
.link-down{
   scroll-behavior: smooth;
}

.arr{
   text-align: center;
   line-height: 20px;
   width: fit-content;
   border-radius: 100%;
   background-color: #1b566c;
   color: white;
   font-size: 50px;
   position: fixed;
   right: 15px;
   bottom: 50px;
   cursor: pointer;
   z-index: 50;
}
#down-form{
   scroll-behavior: smooth;
}
.service-sec{
   background: #080909;
   padding: 50px 0px;
}
.testi-sec{
   background-color: #0b0c0c;
}
.testi-sec .testi-each{
   /* background: gold; */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 10px 0px;
}
.testi-sec .testi-each>div{
   /* background: green; */
   width: 48%;
   padding: 30px 10px;
   text-align: center;
   margin: 10px;
   box-shadow: 0px 0px 5px gray;
}
.testi-sec .for-test-img{
   width: 120px;
   height: 120px;
   background: gold;
   text-align: center;
   margin: 0px auto;
   border-radius: 100%;
   overflow: hidden;

   img{
      width: 100%;
   }
}
.testi-sec .for-test-name{
   color: #00D0F4;
   font-size: 20px;
   margin: 10px 0px ;
}
.testi-sec .for-test-icons{
   font-size: 16px;
   color: gold;
   margin: 10px 0px;
}
.testi-sec .testimony{
   font-size: 17px;
   font-style: italic;
   color: white;
   font-weight: 100;

   &::first-letter{
      font-size: 20px;
   }
}
.service-sec .serv-inner{
   margin: 0px 3%;
}
.serv-inner>h1{
   text-align: center;
   margin: 0px 0px 50px 0px;
   color: white;
}
.serv-inner>h1::after{
   content: "";
   height: 3px;
   background-color: #00D0F4;
   display: block;
   width: 100px;
   text-align: center;
   margin: 20px auto 0px auto; 
}
.serv-inner .serv-each{
   display: flex;
   flex-direction: row;
   justify-content: center;
}
.serv-each>div{
   height: 200px;
   width: 22%;
   background: transparent;
   padding: 50px 15px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin: 0px 12px;
   box-shadow: 0px 0px 5px #d1d1d1;
   transition: all 0.4s ease-in-out 0s;
   border: 1px solid whitesmoke;
   color: white;
}
.serv-each>div:hover{
   margin-top: -10px;
   box-shadow: 0px 0px 10px #d1d1d1;
}
.serv-each i{
   font-size: 40px;
   color: #00D0F4;
}
.serv-each>div h1{
   font-size: 25px;
   margin: 20px 0px;
   font-weight: 500;
}
section{
   padding: 10px 0px;
   position: relative;
   width: 100%;
   /* height: 100%; */
   background: #080909;
   /* position: absolute; */
   padding: 40px 0px;
   box-sizing: border-box;
}
section>div{
   width: 25%;
   border-radius: 10px;
   background: rgba(253, 253, 253, 0.114);
   box-shadow: inset 0px 0px 5px white;
   backdrop-filter: blur(10px);
   display: flex;
   flex-direction: column;
   padding: 30px 50px 50px 50px;
   margin: 0px auto;
   /* transform: translateY(20px); */
   /* position: relative; */
   /* position: absolute;
   right: 50%;
   bottom: 50%;
   transform: translate(50%, 50%); */
   /* height: fit-content; */
}
section .forhead{
   display: flex;
   justify-content: center;
   align-items: center;

   i{
      font-size:40px;
      margin: 0px 10px;
      color: white;
   }
   p{
      color: white;
   }

   .forimg{
      /* background: white; */
      width: 120px;

      img{
         width: 100%;
         filter: brightness(2);
      }
   }
}
section .success{
   color: white;
   text-align: center;
   display: none;
   animation: incre 2s ease-in-out 0s infinite alternate-reverse;
}

@keyframes incre{
   0%{
      font-size: 14px;
   }
   100%{
      font-size: 16px;
   }
}
section>div img{
   width: 80%;
   box-sizing: border-box;
   margin: 0px auto;
   text-align: center;
}
section>div h1{
   color: #2B89AC;
   text-align: center;
   margin: 0px 0px 10px 0px;
   font-size: 19px;
   font-family: monospace;
}
section>div form{
   display: flex;
   flex-direction: column;
}
section>div input,textarea{
   resize: vertical;
   /* box-shadow: inset 0px 0px 5px white; */
   margin-bottom: 0px;
   padding: 20px 18px;
   border: 1px solid rgb(176, 176, 176);
   border-radius: 5px;
   background: transparent;
   outline: #2B89AC;
   color: white !important;
   font-size: 16px;
   box-sizing: border-box;
}
section .chatbox{
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   margin-bottom: 10px;
}
section sup{
   color: rgb(201, 0, 0);
}
section>div input::placeholder{
   color: #f0f0f0;
}
section>div input,textarea::placeholder{
   color: white;
}
section>div input:focus{
   border: 2px solid white;
}
section>div label{
   color: white;
   margin-bottom: 10px;
}

section .forbut{
   text-align: right;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
section>div button{
   border-radius: 10px;
   position: relative;
   padding: 18px 28px;
   border: none;
   background: #1b566c;
   color: #f0f0f0;
   font-weight: 600;
   cursor: pointer;
   font-size: 14px;
}

footer{
   padding: 15px;
   background: #1E1F20;
   /* position: fixed; */
   bottom: 0px;
   width: 100%;
   margin: 0px;
   box-sizing: border-box;
}
footer ul{
   box-sizing: border-box;
   list-style-type: none;
   display: flex;
   padding: 0px;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   height: inherit;
}

footer li{
   margin: 0px 8px;
   font-size: 12px;
   color: gray;
}

@media screen and (max-width: 768px) {
   .serv-inner .serv-each{
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
   .serv-each>div{
      height: fit-content  ;
      width: 100%;
      box-sizing: border-box;
      margin: 10px 0px;
   }
   .testi-sec .testi-each{
      /* background: gold; */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0px;
   }
   .testi-sec .testi-each>div{
      /* background: green; */
      width: fit-content;
   }
   section>div{
      box-sizing: border-box;
      margin: 0px auto;
      /* position: absolute;
      right: 50%;
      bottom: 50%;
      transform: translate(50%, 50%); */
      width: 90%;
      
      padding: 20px;
      border-radius: 10px;
   }
   section>div img{
      width: 80%;
      box-sizing: border-box;
      margin: 0px auto;
      text-align: center;
   }
}