#contact-home{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 50vh;
  /* min-height: max-content; */
  /* background-color: #486975; */
  /* background-color: #00545bd6; */
  /* background-image: url(https://images.pexels.com/photos/4059652/pexels-photo-4059652.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2); */
  /* background-image: url(https://images.pexels.com/photos/30836161/pexels-photo-30836161/free-photo-of-modern-mechanical-keyboard-on-felt-desk-mat.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load); */
  /* background-image: url(https://images.pexels.com/photos/31010728/pexels-photo-31010728/free-photo-of-tranquil-coastal-scene-with-rocky-shoreline.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2); */
  /* background-image: url(https://images.unsplash.com/photo-1608933248284-7f926d879533?q=80&w=1776&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); */
  background-position: center;
  background-size: cover;
  /* background-repeat: repeat; */
  background-attachment: fixed;
}
#contact{
  /* background-color: #1d2f36c6; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #C6D9DA; */
  /* background-color: #00414d; */

  overflow: hidden;
  /* background: linear-gradient(to right, rgba(0, 204, 255, 0.482), rgba(136, 136, 136, 0)); */
  width: 100%;
  /* min-height: 100vh; */
  /* border-radius: 50px; */
  /* padding-top: 15vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-c{
  /* background-color: rgba(0, 0, 0, 0.178); */
  width: 80vw;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px;
}
.contact-c .left,.right{
  width: 400px;
  height: 360px;
  /* background-color: #0000007d; */
  border-radius: 20px;
  padding: 20px;
}
.contact-c img{
  width: 30px;
  border-radius: 3px;
}
#contact .email,.location{
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
  /* color: #009B58; */
  color: #ffffff;
  font-size: 13px;
  width: 100%;
  background-color: #026b79b8;
  margin-top: 10px;
  /* background-color: #009b589c; */
  padding: 10px;
  border-radius: 10px;
  height: 40px;
}
#contact .left i{
  font-size: 20px;
  /* color: #000000; */
}
#contact .media-contact{
  width: 100%;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
#contact .media-contact a i{
  font-size: 25px;
  transition: 0.5s;
  border-radius: 15px;
}
#contact .media-contact a i:hover{
  /* color: #ffffff; */
  background-color: #000000;
}
#contact .right .imgbn{
  /* background-image: url(https://img.freepik.com/premium-photo/computer-programmer-icon-white-background-ar-32-v-52-job-id-16481ff812194d37833d88603725b2d4_941600-89823.jpg); */
  /* background-image: url(https://i.gifer.com/5eKX.gif); */
  /* background-image: url(https://i.gifer.com/Ry6p.gif); */
  /* background-image: url(https://camo.githubusercontent.com/130ffc354b6ee3c8c9e506276e598bf4e19ea7950df203dacf6aeee4fc543a50/68747470733a2f2f616e616c7974696373696e6469616d61672e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031382f31322f646576656c6f7065722d6472696262626c652e676966); */
  /* background-image: url(../Images/matrix2.png); */
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
  background-color: #D6DFDE;
  width: 100%;
  height: 250px;
  border-radius: 20px;
  /* opacity: 80%; */
  border: #ffffff00 solid 10px;
  border-bottom: #0390a2 solid 10px;
  border-top: #0390a2 solid 10px;
  overflow: hidden;
}
#contact .right .imgbn video{
  width: 113.5%;
  position: relative;
  top: 10px;
  left:-35px;
  /* height: 10%; */
}
.vhr{
  background-color: #a6cdc9;
  /* background-color:#004c56; */

  width: 80px;
  height: max-content;
  position: absolute;
  margin-left: 130px;
  margin-top: 9.8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.vhr .hr{
  border: none;
  background-color:#0390a2;
  width: 10px;
  height: 60px;
}
.hrw{
  /* max-width: 80px; */
  /* height: 20px; */
  /* background-color: #ff0000; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  /* overflow: hidden; */
  position: relative;
  left: -60px;
  background-color:#0390a2;
  border-radius: 5px;
}
.hrw .hr2{
  border: rgba(245, 222, 179, 0) solid 1px;
  /* background-color:#009b58; */
  min-width: 70px;
  height: 20px;
  border-radius: 20px;
}
#contact .or{
  /* background-color: #6c07073a; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 20px;
  font-weight: 500;
  margin-top: 10px;
  color: #ffffff;
}
#contact .or span a{
  text-decoration: none;
  color: #ffffff;
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  padding: 15px;
  border: #ffffff solid 3px;
  /* background-color: #00973a32; */
  background-color: #038fa26a;
  border-radius: 10px;
  margin-left: 10px;
  transition: 0.5s;
  /* animation: or-v 2s linear infinite; */
}
@keyframes or-v {
  0% {
    /* opacity: 1; */
  }
  50% {
    /* opacity: 0; */
    background-color: #000;
    color: #ffffff;
    border: #ffffff solid 3px;
  }
  100% {
    /* opacity: 1; */
  }
}
/* #contact .or span a:hover{
  background-color: #000;
  color: #ffffff;
  border: #ffffff solid 3px;
} */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.popup.show {
  opacity: 1;
  transform: scale(1);
}

.popup-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: 90%;
  min-height: 280px;
  max-width: 400px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#directMessageForm{
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 10px;
  /* background-color: #000; */
}
.popup-content h2{
  margin-bottom: 20px;
  /* background-color: #4b1818; */
  text-align: left;
  font-size: 20px;
}

textarea {
  width: 100%;
  /* margin: 10px 0; */
  padding: 10px;
  font-size: 14px;
  resize: none;

  outline: none;
  border: none;
  border-left: #009dff86 solid 3px;
  /* border-radius: 10px; */
  background-color: #eeeeee;

}

button {
  background: #00a4c9f0;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background: #004742;
}
#email-v{
  outline: none;
  border: none;
  border-left: #009dff86 solid 3px;
  /* border-radius: 10px; */
  padding: 10px;
  width: 300px;
  background-color: #eeeeee;
}

.close{
  background-color: #eeeeee;
  color: #ffffff;
  padding: 0px 8px 5px 8px;
  border: #009dff00 solid 3px;
  border-radius: 7px;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  cursor: pointer;
  color: #747474;
  transition: 0.5s;
}
.close:hover{
  background-color: #00000000;
  color: #000000;
  border: #009dff86 solid 3px;
}
#wap,#fb,#ldn,#gh{
  /* background-color: #000000; */
  padding: 0px; 
  border-radius: 10px; 
  width: 40px;
  height: 40px;
  display: flex; 
  align-items: center;
  justify-content: center;
}
/* #fb{
  color: #0080ff;
}
#fb:hover{
  color: #ffffff;
}
#wap{
  color: #00b44b;
}
#wap:hover{
  color: #ffffff;
}
#ldn{
  color: #0067c7;
}
#ldn:hover{
  color: #ffffff;
}
#gh{
  color: #000000;
}
#gh:hover{
  color: #ffffff;
} */
.hd-3{
  display: flex;
  align-items: center;
  justify-content: left;
  color: #ffffff;
}
.hd-3 h2{
  font-family: "Playwrite IN", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
}
#contact-home .aa-header-color{
  color: #00d0eb;
  border: #00000000 solid 3px;
  border-bottom: #00bcd4 solid 3px;
  border-radius: 20px;
}
.hd-3 .aa-header-color2{
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  /* color: #8fd9e2; */
  font-weight: 600;
}
.hd-3{
  width: 100%;
  height: 60px;
  /* height: 100%; */
  /* background-color: #192c30; */
  padding: 10px;
  border-radius: 15px;
  /* border: #ff000000 solid 8px;
  border-left: #287561 solid 8px; */
}
.hd-3 a{
  color:  #ffffff;
  text-decoration: none;
  transition: 0.3s;
}
@media (max-width:1140px) {
  /* #contact{
    padding-top: 10vh;
  } */
  .contact-c{
    width: 100vw;
    gap: 0px;
  }
  .contact-c .right{
    padding: 0px;
  }
  .vhr{
    background-color: #a6cdc9;  
    width: 80px;
    margin-left: 150px;
    margin-top: 0px;
    margin-bottom: 1000px;
  }
  #contact .right .imgbn{
    height: max-content;
  }
}

































































































































/* new section */
.navi-group-1{
  /* background-color: #000; */
  display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.n-con{
  /* background-color: #000; */
  width: 100vw;
  min-height: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
/* @media (max-width:1080px) {
  .n-con{
    min-height: 150vh;
  }
} */
.anim-screen{
  width: 100vw;
  height: 50vh;
  margin-top: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  /* background-color: #00000036; */
  /* display: none; */
}
.anim-screen .circle{
  background-color: #00000086;
  /* border: #00000000 solid 10px;
  border-left: #000 solid 10px;
  border-right: #000 solid 10px; */
  width: 250px;
  height: 250px;
  border-radius: 20%;
  animation: circle-v2 50s infinite linear;
}
.c-nv{
  animation: circle-v 30s infinite linear;
  background-color: #000000;
  width: 250px;
  height: 250px;
  border-radius: 20%;
}
@keyframes circle-v {
  0%{
    transform: rotate(0deg);
    /* transform: translateX(-100px); */
    /* opacity: 0; */
  }
  100%{
    transform: rotate(360deg);
    /* opacity: 1; */
    /* transform: translateX(100px); */
  }
}
@keyframes circle-v2 {
  0%{
    /* transform: rotate(0deg); */
    transform: translateX(-200%);
    opacity: 0;
  }
  40%{
    opacity: 1;
  }
  50%{
    /* transform: rotate(360deg); */
    transform: translateX(200%);
    opacity: 0;
  }
  100%{
    /* transform: rotate(0deg); */
    transform: translateX(-200%);
    opacity: 1;
  }
}
@media (max-width:600px) {
  .anim-screen{
    height: 100vh;
    /* background-color: #000; */
  }
  @keyframes circle-v2 {
    0%{
      /* transform: rotate(0deg); */
      transform: translateX(0%);
      transform: translateY(-200%);
      opacity: 0;
    }
    30%{
      opacity: 1;
    }
    40%{
      /* opacity: 1; */
    }
    50%{
      /* transform: rotate(360deg); */
      transform: translateX(0%);
      transform: translateY(200%);
      /* opacity: 0; */
    }
    100%{
      /* transform: rotate(0deg); */
      transform: translateX(0%);
      transform: translateY(-200%);
      opacity: 0;
    }
  }
}
.new-contact{
  /* background-color: #00000089; */
  width: 100vw;
  min-height: 50vh;
  margin-top: 3vh;
  padding-top: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* gap: 20px; */
  /* position: absolute;
  z-index: 1; */
  background-color: #00484dd0;
  border-radius: 60px 60px 0px 0px;
  box-shadow: #ffffffad 0px 0px 19px 0px;
  margin-top: 5vh;
}
.new-contact .logo{
  width: 330px;
  height: 200px;
  /* background-color: #0000007d;
  backdrop-filter: blur(10px); */
  padding: 20px 20px 20px 0px;
  border-radius: 25px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  /* opacity: 50%; */
}
.v{
  background-image: url(https://cdn-icons-gif.flaticon.com/10971/10971749.gif);
      /* background-image: url(https://cdn-icons-gif.flaticon.com/10971/10971770.gif); */
  background-position: center;
  background-size: cover;
  position: absolute;
    width: 300px;
  height: 250px;
  opacity: 10%;
  border-radius: 25px;
  box-shadow: #fff 0px 0px 10px 10px;
  display: none;
}
.new-contact .logo a{
  /* background-color: #000000ec; */
  padding-bottom: 10px;
  border: #00000000 solid 5px;
  border-bottom: #00000000 solid 5px;
  border-radius: 20px;
  transition: 0.5s;
  padding-left: 20px;
  /* position: absolute;
    display: flex;
  align-items:start;
  justify-content: center;
  flex-direction: column; */
}
.new-contact .logo h2{
  font-family: "Playwrite IN", cursive;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #ffffff;
  text-shadow: #9aeeff 0px 0px 10px;
}
.new-contact .logo h2 span{
  border: #00000000 solid 4px;
  border-bottom: #1f1f1f solid 4px;
  border-radius: 100px;
}
.new-contact .logo h3{
  margin-left: 115px;
  font-size: 19px;
  font-weight: 600;
  color: #00d5ff;
  text-shadow: #000000 0px 0px 10px;
}









.hr-a{
  background-color: #00a1c6;
  width: 100px;
  height: 10px;
  border: none;
  border-radius: 20px;
  animation: gak 15s infinite linear;
  /* box-shadow: #ffffff90 0px 0px 10px 3px; */
}
@keyframes gak {
  0%{
    width: 40px;
  }
  50%{
    width: 100px;
    opacity: 50%;
  }
  100%{
    width: 40px;
  }
}
.navi{
  width: 300px;
  min-height: 250px;
  /* margin-bottom: 20px; */
  /* background-color: #0000007d;
  backdrop-filter: blur(10px); */
  padding: 10px;
  border-radius: 25px;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
}
@media (max-width:1080px) {
  .navi{
    width: 390px;
  }
}
.navi h2{
  color: #ffffff;
  background-color: #002529c0;
  border-left: #00000000 solid 8px;
  border-right: #00000000 solid 8px;
  border-bottom: #007781 solid 5px;
  width: 100%;
  height: 45px;
  padding-left:10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navi ul{
  /* background-color: #00000085; */
  width: 100%;
  height: 200px;
  list-style: none;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  /* gap: 10px; */
  /* padding: 10px; */
  margin-top: 20px;
  border-radius: 20px 20px 100px 100px;
  /* color: #000; */
}
.navi .ul-o a{
  font-size: 20px;
}
.navi a{
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  /* color: #000; */
  font-size: 18px;
  /* background-color: #000; */
  min-width: 260px;
  height: 35px;
  padding-left: 10px;
  border-radius: 10px;
  transition: 0.5s;
}
.navi a:hover{
  background-color: #000;
}
.m-j{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px;
  margin-top: 20px;
}
.navi h4{
  /* width: 140px; */
  height: 40px;
  /* background-color: #0000007e; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  width: 100%;
  background-color: #004d50b7;
  transition: 0.5s;
}
.navi h4 a{
  width: 100%;
  height: 100%;
  /* background-color: #000; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.navi h4:hover{
  background-color: #000;
}
.navi h4:hover a{
  color: #ffffff;
  font-weight: 500;
}
.navi .site-b{
  /* background-color: #ffffff47; */
  background-color: #ffffff52;
  box-shadow: rgba(0, 0, 0, 0.495) 10px 10px 10px 0px;
}
.navi .site-b a{
  color: #043337;
  font-weight: 700;
}