body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: black;
  margin: 0;
  color: white;
}

/* Sidebar styling */
.sidenav {
  height: 100%;
  width: 270px;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  top: 0;
  left: 0;
  background-color: black;
  padding-top: 20px;
  transition: transform 0.3s ease;
  border-right: 1px solid white;
  /* background-color: red; */
}

.sidenav a {
  /* margin-top: 10px; */
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  display: block;
  border-bottom: 1px solid white;
  cursor: pointer;
  /* background-color: red; */
}

.sidenav a:hover {
  color: orange;
  border-bottom: 1px solid orange;
}

.sidenav a i{
  margin-right: 20px;
}
/* ***************************** */

/* logo styling starts*/
.sidenav .logo{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Kaushan Script", serif;
 /* background-color: blue; */
}

.sidenav .logo a{
  margin-top: 15px;
  color: orange;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 5px;
  position: relative;
  text-decoration: none;
  border-bottom: 0;
}

.sidenav .logo a::before{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 4px solid orange;
  border-left: 4px solid orange;
  bottom: 0;
  left: 0;
}

.sidenav .logo a::after{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 4px solid orange;
  border-right: 4px solid orange;
  top: 0;
  right: 0;
}
/* logo styling ends  */
/* &******************************************************************************** */
.footer{
  background-color: rgb(32, 30, 30);
  color: white;
  width: 270px;
  height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
  margin-bottom: 5px;
  /* padding-left: 0; */
  
}
.foot{
  width: 100%;
  height: 45%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
  /* background-color: red; */
  
  
}

.footer a, .foot a{
  color: white;
  text-decoration: none;
  border-bottom: 0;
  text-shadow:2px 2px 2px black;  
}
.foot a:hover{
  color:black ;
}

.dev-logo{
 /* height: auto; */
 /* background-color: yellow; */
 text-shadow:2px 2px 2px black;
 animation:bayo 2s ease 1s infinite;
}

@keyframes bayo{

 0%{
    transform:rotateX(-45deg);
}
 50%{
    transform:rotateY(45deg);
}
}

/* ***************************************** */

/* Main content styling */
.main {
  margin-left: 270px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.content {
  display: none;
  animation: slideIn 0.5s forwards;
  height: 100vh;
}

@keyframes slideIn {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}
/* ************************* */
.content.active{
  display: block;
  animation: slideIn 0.5s forwards;
}
#intro.active{
  animation: grow 2s forwards;
}
@keyframes grow{
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.centered{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: white;
  /* background-image: url(./homeimgs/FB_IMG_1739703691354.jpg); */
  /* background-repeat: no-repeat; */
  /* background-size: contain; */
  /* background-position: center center; */
  /* background-attachment: fixed; */
}
.centered h2{
  color: orange;
}
.centered h2 span{
  color: white;
}

/* ***************************** */

/* Toggle button */
.toggle-btn {
  font-size: 20px;
  padding: 10px;
  border: 3px solid white;
  background-color: orange;
  color: white;
  border: none;
  cursor: pointer;
  display: none; 
}

/* ****************# */
/* home  */
#background-video {
  position: fixed; 
  top: 0;
  left: 0;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  z-index: -1; 
  object-fit: cover; 
}


.home-content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background-color: purple; */
}

.home-info{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: aqua; */
}

.hello, .my-profession{
  font-size: 35px;
  margin: 0;
  padding: 0 10px;
  /* background-color: brown; */
}

h1.name{
  /* font-family: 'Splash', cursive; */
  font-family: "Kaushan Script", serif;
  font-size: 70px;
  letter-spacing: 3px;
  word-spacing: 5px;
  color: orange;
  margin: 0;
  padding: 0 10px;
  /* background-color: black; */
}

.home-info p{
  margin: 10px;
  padding: 0 20px;
  color: white;
  font-weight: light;
  text-align: center;
  /* background-color: blue; */
}
/* ********************************************* */
.social-handle{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 20px;
  width: 200px;
  height: 50px;
  /* background: red; */
}

.social-handle i{
  color: white;
}

.social-handle i:hover{
  color: orange;
}

.btn{
  display: inline-block;
  white-space: nowrap;
  margin-top: 10px;
  padding: 12px 30px;
  color: white;
  border-radius: 10px;
  border: white 1px solid;
  background: transparent;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn:hover{
  background: orange;
}
/* ************************************************ */
.home-img{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 40%;
  /* background-color: blue; */
}

.home-img img{
  border-radius: 5px;
  /* height: 550px; */
  /* width: 100%; */
  /* background: red; */
}


/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* ABOUT  */
.about-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto; 
  overflow: hidden;
  /* background-color: red; */
  }

.about_heading span{
  color: white;
}
.about_heading {
  margin-bottom: 20px;
  color: orange; 
}

.me{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 40px;
  /* background-color: blue; */
}

.me p{
  /* display: flex; */
  width: 55vw;
  height: auto;
  padding: 20px;
  /* background-color: blueviolet; */
}

.me p span{
  color: orange;
}


.pic{
  width: 250px;
  height: 250px;
  border-radius: 200px;
  margin-top: 55px;
  background: orange ;
  animation: drake 8s infinite alternate;
}

@keyframes drake {
0% {
    opacity: 0;
}

50% {
    opacity: 1;
}

0% {
    transform: rotateY(45deg);
}
50% {
    transform: rotateY(-360deg);
}
75% {
    transform: rotateY(90deg);
}
100% {
    transform: rotateY(0deg);
}
}

.tope-img{
  width: 100%;
  height: 100%;
  border-radius: 130px;
}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

/* PORTFOLIO SECTION */
.project-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto; 
overflow: hidden;
/* background-color: red; */
}

.our-work{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
width: calc(100vw - 300px);
height: auto;
align-items: center;
justify-content: space-evenly;
gap: 20px;
/* background-color: blue; */
}

.parent {
  cursor: pointer;
}

.parent{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 320px;
}

.parent img{
  width: 450px;
  height: 320px; 
}

.child{
  position: absolute;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  background-color: orange;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  transition: width 0.4s ease, height 0.4s ease;  
}

.parent:hover .child{
  visibility: visible;
  width: 450px;
  height: 320px;
  opacity: 0.7; 
}

.child p{
  margin-top: 4vh;
  width: 370px;
  /* background-color: rebeccapurple; */
}
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */

/* CONTACT SECTION */
.contact-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto; 
overflow-x: hidden;
/* background-color: aqua; */
}

.contact-icons{
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: auto;
height: 80vh;
gap: 5px;
justify-content: center;
/* background: green; */
}

.contact-icons i{
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 65px;
border-radius: 5px;
background-color: orange;
color: white;
}

.contact-icons i:hover{
background-color: orange ;
color: black;
}

.contact-icons h1{
color: orange;
}

.contact-icons p{
color: white;
}

.sub-phone a, .sub-email a, .sub-whatsapp a, .sub-address a{
display: flex;
align-items: center;
width: 50vw;
height: 100px;
gap: 25px;
padding: 10px;
/* background-color: rebeccapurple; */
}
.sub-phone p span, .sub-email p span, .sub-whatsapp p span, .sub-address p span{
color: orange;
font-weight: bolder;
font-size: 25px;
}


.contact-icons a{
text-decoration: none;
color: white;
/* background-color: blue; */
}

.contact-icons p:hover{
color: orange ;
}

/* ****************************************** */
/* ****************************************** */
.yes-msg{
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(100vw - 270px);
height: 80vh;
/* background-color: blue; */
}
.contact-form{
padding-left: 65px;
display: flex;
align-items: center;
justify-content: center;
width: calc(100vw - 270px);
height: auto;
}

.cont-form, .maps{
display: flex;
justify-content: center;
align-items: center;
width: 38vw;
height: 70vh;
border-radius: 10px;
color: white;
/* background-color: red; */

}

form h1{
margin-bottom: 10px;
color: orange;
}

form input{
display: flex;
flex-direction: column;
margin-bottom: 10px;
width: 500px;
height: 50px;
border-radius: 6px;
border: none;
font-size: 16px;
padding-left: 15px;
color: black;

}

textarea{
width: 500px;
height: 30vh;
border-radius: 6px;
font-size: 15px;
padding-top: 10px;
padding-left: 15px;
background-color: white;
color: black;
}

.submit{
margin-top: 10px;
color: white;
background-color: transparent;
border: 1px solid white;
transition: all 0.3s ease;
}

.submit:hover{
background: orange;
}

/* ***************** */