@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body{
  min-height: 100vh;
  background-color: black;
  overflow-x: auto;
  font-family: 'Poppins', sans-serif;
}
.information h1{
  font-size: 60px;
}
.information p{
  letter-spacing: 3px;
}
.dot-img img{
  z-index:-1;
  margin-top: 4rem;
  position: relative;
  opacity: 0.5;
}
nav{
  z-index: 1000 ;
  font-size: 18px;
  position: fixed;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color:#1f1f1f;
}
ul li a span{
  font-size: 33px;
  color: red;
  padding-left:3rem ;
  letter-spacing: 3px;
  font-weight: 400;
  text-transform:uppercase;
}
span{
  color: red;
}
ul li a:hover{
   color: red;
   transition: 0.5s;
}
nav ul{
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: flex-end;
  align-items: center;
  
}
nav li{
  height: 50px;
}
nav a{
  height: 100%;
  text-decoration: none;
  padding:0px 30px;
  display: flex;
  align-items: center;
  text-align: center;
  color: rgb(253, 253, 253);
  margin-top: 0.5rem;
  font-weight: 200;
  font-size: 15px;
}
nav li:first-child{
  margin-right: auto;
}
.sidebar li svg{
  display: none;
}
.sidebar {
  position: fixed;
  z-index: 999;
  height: 100vh;
  width: 250px;
  backdrop-filter: blur(10px);
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.2);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
 /* Added a transition for smoother animation */
}
.hide-menubar{
  display: none;
  padding-top: 10px;
  background-color: rgb(255, 0, 0);
  border-radius: 1px;
  transition:0.2s;
}
.hide-menubar:hover{
  opacity: 0.5;
}
.sidebar li{
  width: 100%;
}
.sidebar a{
  width: 100%;
}

#Home{
 width: 100%;
 height: fit-content;
 background-image: url('./vvvortex\ \(1\).svg');
 background-size:cover;
 background-repeat: no-repeat;
 background-position: right;
 object-fit: cover;
 background-attachment: fixed;
}
#Project{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container1{
  display: grid;
  grid-template: repeat(3, 270px) / repeat(2, 290px);
  gap: 6px;
  place-content: center;
  transform: translate(0%,20%);
  padding: 0;
  margin: 0;
}
.bottom:hover{
  border: 0.7px solid red;
}
.left:hover{
  border: 0.7px solid red;
}
.right:hover{
  border: 0.7px solid red;
}
.left {
  background-image: url('https://i.pinimg.com/564x/89/00/01/89000124a428a05512810bf6ed48b2ea.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  grid-area: span 2;
  border: 1px solid rgb(66, 64, 64);
  transition:0.2s;
}
.right{
  transition:0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(9px) saturate(182%);
  -webkit-backdrop-filter: blur(9px) saturate(182%);
  background-color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(209, 213, 219, 0.3);
  text-decoration: none;
  list-style: none;
  border: 1px solid rgb(95, 92, 92);
  color: rgb(0, 0, 0);
}
.Contact-Us{
  color: #383737;
}
.bottom{
  transition:0.2s;
  background-image: url(./photo1707329831.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgb(66, 64, 64);
}
#About{
  width: 100%;
  max-height: fit-content;
  background-color: #1f1f1f;
  overflow-x: hidden;
  position: relative;
}
.project2{
 color: #383737;
}
.dot-img1{
  margin-left: -4rem;
  margin-bottom: 3rem;
  opacity: 0.4;
}
.dot-img1 img{
  position: absolute;
}
#familior{
  width: 100%;
  height: 500px;
  overflow-x: hidden;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.button{
  width: 60px;
  height: 30px;
  text-decoration: none;
  color: white;
  border: none;
  cursor: pointer;
  position: relative;
  left: 60px;
  bottom: 20px;
}
.cv a{
  color: red;
}
.button1{
  width: 80px;
  height: 30px;
  background-color: red;
  border: none;
  text-align: center;
  transition:0.2s;
}
.button2{
  background-color: red;
  border: none;
  text-align: center;
  opacity: 0.3;
  color: white;
  transition:0.2s;
  padding: 4px;
}
.button1:hover{
  opacity: 0.3;
}
.button2:hover{
  opacity: 1;
}
.button3:hover{
  opacity: 1;
}
.button3{
  padding: 4px;
  opacity: 0.5;
  width: 80px;
  height: 30px;
  background-color: red;
  border: none;
  text-align: center;
  opacity: 0.3;
  transition:0.2s;
  color: white;
}
 a{
  text-decoration: none;
  color: white;
}
li{
  list-style:none;
  padding: 3px;
}
.content{
   display: grid;
   grid-template: repeat(1,290px)/repeat(3,250px);
   justify-content: center;
   gap: 6px;
   padding: 10px;
   z-index: 1;
}
.box-1{
  background-image: url('https://images.prismic.io/mparticle/3e7e9828-7aeb-4a3c-be49-6bd21e75a96a_TEMPLATE_+Tagged+Blog_Resources_News+Image+%402x+%281%29.png?auto=compress%2Cformat&rect=0%2C1%2C1465%2C822&w=1230&h=690&fit=max&fm=webp');
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 border: 1px solid rgb(66, 64, 64);
 transition:0.2s;
}
.box-1:hover{
  border: 0.7px solid red;
}
.box-2:hover{
  border: 0.7px solid red;
}
.box-3:hover{
  border: 0.7px solid red;
}
.box-2{
  border: 1px solid rgb(66, 64, 64);
  background-image: url('https://www.svgrepo.com/show/376337/node-js.svg');
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 transition:0.2s;
}
.box-3{
  background-image: url('https://www.svgrepo.com/show/353735/firebase.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgb(66, 64, 64);
  transition:0.2s;
}
#images-logo svg{
  width: 50px;
  height: 50px;
  position: relative;
  left: 60px;
  bottom: 30px;
}

#Contact{
  width: 100%;
  height: fit-content;
  background-color: #1f1f1f;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-control1{
  width: 100%;
  height: 20%;
  border: none;
  outline: none;
  background-color: #383737;
  color: #383737;
}