*{
  padding: 0px;
  margin: 0px;
  color: #3a0303;
  overflow: none;
  
}
body{
  background-color: #bdbbc4;

  /* max-width: 900px; */
}
nav{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/* position: fixed; */

}
.logo{
  display: block;
  font-weight: 900;
  font-size: 40px;
  text-align: center;
  padding: 12px 60px;
  text-decoration: none;
}
span{
  font-size: 50px;
  color: #49366e;
  
}
nav ul li a{
  font-size: 4vh;
  padding:  10px 15px;
  text-decoration: none;

} 
nav ul li{
  width: 12vw;
  padding: 25px 10px; 
  list-style: none;
  display: inline-block;
}
nav ul {
  float: right;
  margin-left: 70px;

}
.nav-link {
position: relative;
text-decoration: none;
color: #3a0303;
transition: color 0.2s ease-in; /* add transition for smooth color change */
}

.nav-link::after {
content: "";
height: 4.3px;
width: 0;
background-color:#49366e;/* purple color */
position: absolute;
bottom: -1px;
left: 0;
transition: width 0.2s ease-in; /* add transition for smooth width change */

}

.nav-link:hover {
/* font-weight: bolder; */
  font-weight: 550;
  transition-duration: 0.3;
  
}

.nav-link:hover::after {
width: 100%;
transition-duration: 0.2; /* expand the purple line to 100% width on hover */
}

.bar .fa-bars{
display: none;
}

.image-hidden{
  padding: 30px;
  height: 500px;
  width: 300px;
  display: flex;
  align-items: center;
  margin-left: 300px;
  display: none;
}

.home{
  height: 850px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.no-imgheader{
  height: 850px;
  display: flex;
  justify-content: space-evenly;
}
.home .home_content{
  font-size: 5vh;
  padding: 270px 0 0 0;
}
.icons{
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 font-size: 5vh;
 padding: 270px 0 0 0;

  
}
.icons .fa-brands{
  padding: 20px 25px;
  margin-left: 50px;
}
.icons .fa-brands:hover{
  opacity: 0.8;
  transition: 0.1s;

}
.fa-paper-plane{
  font-size: 24px;
  padding: 5px;
  color: #540b0b;
}
.image{
  width: 25vw;
  height: 40vw;
  padding: 100px 0 20px 0;
}
.btn {
  color: #540b0b;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid #513980;
  border-radius: 17px;
  margin-top: 30px;
  padding: 20px 30px;
  font-size: 20px;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.btn:hover {
  color: #e1e1e1; /* Change text color on hover */
}

.fa-paper-plane {
  color: #540b0b; /* Initial color of the paper plane icon */
  transition: color 1s; /* Smooth transition for color change */
}

.btn:hover .fa-paper-plane {
  color: #e1e1e1; /* Change paper plane icon color to white on hover */
}

.btn::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: #49366e;
  z-index: -1;
  transition: all 1s;
}

.btn:hover::before {
  width: 160%;
}



/* .loader {
  width: 40px;
  height: 60px;
  position: relative;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #514b82;
  clip-path: polygon(0 0,100% 0, 100% 67%,50% 67%,50% 34%,0 34%);
  animation: sp7 2s infinite;
}
.loader::after {
  --s:-1,-1;
}
@keyframes sp7 {
    0%,
    10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
    33%  {transform:scale(var(--s,1)) translate(0,-20px)    rotate(0deg)}
    66%  {transform:scale(var(--s,1)) translate(10px,-20px) rotate(-90deg)}
    90%,
    100% {transform:scale(var(--s,1)) translate(10px,-10px) rotate(-90deg)}
} */

/* #loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2.7em;
  margin-left: -2.7em;
  width: 5.4em;
  height: 5.4em;
  background-color: #404456;
}

#hill {
  position: absolute;
  width: 7.1em;
  height: 7.1em;
  top: 1.7em;
  left: 1.7em;
  background-color: transparent;
  border-left: .25em solid whitesmoke;
  transform: rotate(45deg);
}

#hill:after {
  content: '';
  position: absolute;
  width: 7.1em;
  height: 7.1em;
  left: 0;
  background-color: #404456;
}

#box {
  position: absolute;
  left: 0;
  bottom: -.1em;
  width: 1em;
  height: 1em;
  background-color: transparent;
  border: .25em solid whitesmoke;
  border-radius: 15%;
  transform: translate(0, -1em) rotate(-45deg);
  animation: push 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
} */

/* @keyframes push {
  0% {
    transform: translate(0, -1em) rotate(-45deg);
  }
  5% {
    transform: translate(0, -1em) rotate(-50deg);
  }
  20% {
    transform: translate(1em, -2em) rotate(47deg);
  }
  25% {
    transform: translate(1em, -2em) rotate(45deg);
  }
  30% {
    transform: translate(1em, -2em) rotate(40deg);
  }
  45% {
    transform: translate(2em, -3em) rotate(137deg);
  }
  50% {
    transform: translate(2em, -3em) rotate(135deg);
  }
  55% {
    transform: translate(2em, -3em) rotate(130deg);
  }
  70% {
    transform: translate(3em, -4em) rotate(217deg);
  }
  75% {
    transform: translate(3em, -4em) rotate(220deg);
  }
  100% {
    transform: translate(0, -1em) rotate(-225deg);
  }
} */
 .About{
  background-color: #909095;
 }
 .abouthead{
  font-size: 4.7vh;
  text-align: center;
  padding-top: 3vw;
  
 }
 .aboutContent{
 
  padding: 1px;
  display: flex;
  /* background-color: antiquewhite; */
  justify-content: space-evenly;
  /* height: 85vh;
  max-width: 100%; */
  /* overflow-x: hidden; */
 }
 .aboutContent img{
  padding: 0px 30px;
  height: 50vh;
  width: 30vw;
  /* background-color: #3a0303; */
 }
 .aboutnoimage{
  /* background-color: #c38686; */
  font-size: 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: space-evenly;
  height: 80vh;
 }
 .aboutpara{
  margin: 0px 30px;
 }
 .box{
  display: flex;
  justify-content: space-evenly;

 }
 .box0{
  width: 10vw;
  align-self: center;
  border-radius: 17px;
  border-style: solid;
  border-width: 2.5px;
  padding: 45px;
  background-color: #bdbbc4;
  margin: 0px 5vw 0px 0px;
 }
 .box0:hover{
  box-shadow: 0px 0px 20px 1px #3a0303 ;
  border: 1px solid rgba(255, 255, 255, 0.454);
 }

 .fa-solid{
  margin-left: 10px;
  display: flex;
  align-self: center;
 }

 
 #btnresume {
  font-size: 22px;
  color: #3a0303;
  padding: 15px;
  align-self: flex-start;
  margin: 0px 30px;
  border-radius: 17px;
  background-color:  #bdbbc4;
  border: 3px solid #3a0303;
  transition: all 0.5s ease;
}

#btnresume:hover {
  background-color: #470e0e; /* Change background color on hover */
  color: aliceblue; /* Change text color on hover */

}

#btnresume:hover .fa-file {
  color: aliceblue; /* Change icon color to white on hover */
}

.fa-file {
  color: #3a0303; /* Initial color for the icon */
  transition: color 0.5s ease; /* Smooth transition for icon color change */
}



.portfolio{
    /* background-color: #6f6aa7; */
    height: 99vh;
    width: 98.5vw;
    overflow-x: hidden;
}
.porttitle {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.porttitle button{
font-size: 27px;
padding: 13px;
margin: 10px;
border:1px solid #120000;
border-radius: 17px;
background-color: transparent;

}

.porttitle button:hover{
  background-color: #3a0303;
  border-radius: 17px;
  color: aliceblue;
  transition: 0.01s;
}

.projects{
/* background-color: #845ed6; */
padding: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;

}
.project1{
border-style: solid;
height: 40vh;
width: 20vw;
}
/* .imgcard{
border-style: groove;
border-radius: 17px;
height: 60%;
width: 85%;
}
.imgproject{
size: 10px;
border-image: fill;
} */
.container {
border-style: groove;
border-radius: 17px;
height: 65%;
width: 85%; 
}

.card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px 10px;
}
.card .btns{
display: flex;
}

.card .btn {
margin: 10px;
padding: 10px;
border: 1px solid #120000;
background-color: rgb(175, 175, 174);  /* Initial background color */
color: #320909; /* Initial text color */
}

.card .btn a {
text-decoration: none;
color: inherit; /* Inherit the button's text color */
}

.card .btn:hover {
background-color:#3a0303; /* Change background color on hover */
color: #e1e1e1; /* Change text color on hover */
}

.card .btn a:hover {
color: inherit; /* Ensures that the link text color matches the parent button on hover */
}













.wrapper { 
max-width: 1300px;
width: 100%; 
position: relative; 

} 

.wrapper i { 
height: 50px; 
width: 50px; 
background: rgb(161, 165, 161); 
text-align: center; 
line-height: 50px; 
border-radius: 50%; 
cursor: pointer; 
position: absolute; 
top: 50%; 
font-size: 1.25 rem; 
transform: translateY(-50%); 
box-shadow: 0 3px 6px rgba(74, 18, 18, 0.23); 

} 


.wrapper i:first-child { 
left: -22px; 

} 

.wrapper i:last-child { 
right: -22px; 

} 
/* //card is for making those pop */
.card:hover {
border: 1px solid black;
transform: scale(1.0001);
overflow-y: hidden;
}

.card:active {
transform: scale(0.95) ;
}

.wrapper .carousel{
display: none;
}
.wrapper .carousel--active { 
display: grid; 
grid-auto-flow: column; 
grid-auto-columns: calc((100% / 3) - 12px); 
gap: 16px; 
overflow-x: auto; 
scroll-snap-type: x mandatory; 
scroll-behavior: smooth; 
scrollbar-width: 0; 
} 

.carousel--active::-webkit-scrollbar { 
display: none; 
} 

.carousel--active :where(.card, .img) { 
display: flex; 
align-items: center; 
justify-content: center; 
} 

.carousel-.carousel--active { 
scroll-snap-type: none; 
scroll-behavior: auto; 
} 

.carousel-.carousel--active.no-transition { 
scroll-behavior: auto; 
} 

.carousel--active.dragging .card { 
cursor: grab; 
user-select: none; 
} 

.carousel--active .card { 
scroll-snap-align: start; 
height: 360px; 
list-style: none; 
background: #a6a6a6; 
border-radius: 8px; 
display: flex; 
cursor: pointer; 
width: 99.5%; 
padding-bottom: 15px; 
align-items: center; 
justify-content: center; 
flex-direction: column; 
}

@media screen and (max-width: 900px) { 
.wrapper .carousel--active { 
    grid-auto-columns: calc((100% / 2) - 9px); 

} 
} 

@media screen and (max-width: 600px) { 
.wrapper .carousel--active { 
    grid-auto-columns: 100%; 

} 
}




.contact{
height: 55vh;
width: 98.5vw;
margin: 70px 0px;
/* overflow-x: hidden; */
background-color: #989898;
}
.contactform{
display: flex;
flex-direction: row;
}
.side1{
margin: 20px; 
}
.side1 input{
width: 20vw;
height: 5vh;
margin: 10px;
font-size: 20px;
background-color: #d6d0e3;
}
.side1  #sub{
width: 41.5vw;
}
.btncontact{
align-self: center;
width: 94vw;
height: 6vh;
margin-left: 30px;
margin-top: 7px;
margin-bottom: 100px;
font-size: 20px;
background-color: #cec7de;
}
.btncontact:hover{
box-shadow: 0px 0px 20px 12px rgba(56, 14, 14, 0.23) ;
}
.side2 input{
font-size: 20px;
width: 50vw;
height: 13vh;
margin: 30px 10px 0px 10px;
background-color: #d6d0e3;
}

footer{
height: 50vh;
font-size: 25px;
display: flex;
justify-content: space-evenly;
flex-direction: row;
background-color:#979797;
}
footer .icons1{
font-weight: 500;
padding: 10px;
font-size: 45px;
}
/* footer .icons1:hover{

} */

@keyframes appear {
from{
opacity:0;
clip-path: inset(100% 100% 0 0);
}
to{
opacity: 1;
clip-path:inset(0 0 0 0);
}
} 
/* .abouthead,.aboutContent, .box, .porttitle,  .projects{
animation: appear linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}  */

/* @media only screen and (max-width: 3212px) {
  nav ul li a {
    font-size: 8vh;
    padding: 5px 10px;
    text-decoration: none;
  } 
   .home{
    height: 80vh;
    padding-bottom: 10vh;
   }
   .home .home_content{
    font-size: 5vh;
   }
  .home .icons{
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    font-size: 7vh;
    padding:  10vh;
    align-self: center;
   }

   .home img{
    width: 25vw;

  }
}
@media only screen and (max-width: 1789px) {

  nav ul li a {
    font-size: 30px;
    padding: 5px 5px;
    text-decoration: none;
  } 
  .home{
    margin-bottom: 8vw;
  }
   .home .home_content{
    padding-top: 210px;
    font-size: 5vh;
   }
  .home .icons{
    font-size: 6vh;

   }
}

  

@media only screen and (max-width: 1089px) {
  nav ul li a {
    font-size: 25px;
    padding: 5px 10px;
    text-decoration: none;
  } 

  .home{
    margin-bottom: 10vw;
  }
   .home img{
    padding: 20vw 0 0 20vh;
    width: 35vw;
    height: 35vh;
    min-width: fit-content;

  }
  .box{
    display: flex;
    flex-wrap: wrap;

  }

}
@media only screen and (max-width: 845px) {
  .nav{
    display: flex;
    justify-content: space-between;
  }
  .bar .fa-bars{
    display: block;
    float: right;
    font-size: 30px;
    padding: 10px ;
    margin-left: 40px;
  }
.nav-link{
  display: none;
  padding: 0;
  margin: 0;
}
nav ul li a{
  font-size: 0;
  padding:  10px 15px;
  text-decoration: none;

} 
nav ul li{
  width: 0;
  padding: 0; 
  list-style: none;
  display: none;
}
nav ul {
  float: none;
  margin-left: 0;

}
nav .bar .fa-bars{
  font-size: 10vw;
}
 .home .home_content{
  padding-top: 210px;
  font-size: 6vh;
 }
 .home img{
  margin-top: 100px;
  width: 40vw;
  height: 50vw;
  /* display: none; */
  
  /* }
}

 
 



@media only screen and (max-width: 590px) 
{
  .portfolio{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
   /* .card{
    max-width: 80vw;
   } */
/* } */


/* 
@media(max-width: 360px){

  .bar .fa-bars{
    display: block;
    float: right;
    font-size: 30px;
    padding: 10px ;
    margin-left: 40px;
  }
  .nav-link{
    display: none;
    padding: 0;
    margin: 0;
  }
  nav ul li a{
    font-size: 0;
    padding:  10px 15px;
    text-decoration: none;
  
  } 
  nav ul li{
    width: 0;
    padding: 0; 
    list-style: none;
    display: none;
  }
  nav ul {
    float: none;
    margin-left: 0;
  
  }
  .home .home_content{
    padding-top: 210px;
    font-size: 5vh;
   }
   .home .home_content p{
    font-size: 4vh;
   }
   .home .icons{
    padding: 3vh 3vh ;
    font-size: 7vh;
    align-self: center;
   } */
  /* .home img{
    padding: 650px 0 10px 10px;
     width: 90vw;
     height: 50vh;
     align-self: center;
} */
 /* .home img{
  display: none;
 }

}  */

/* @media only screen and (max-width: 1305px) {

} */

@media(max-width: 450px){
  nav{
    min-width: 1100px;
  }
  .home{
    min-width: 1100px;
    height: 1400px;
  }
 .About{
  min-width: 1100px;
  height: 1100px;
 }
 .portfolio{
  min-width: 1100px;
  height: 1100px;
 }
 .contact{
  min-width: 1100px;
  height: 690px;
 }
 footer{
  min-width: 1100px;
  height: 210px;
 }
  nav ul{
    display: none;
  }
  .logo{
    margin: 25px;
    font-size: 10vh;
  }
  nav .bar{
    margin: 25px;
    
  }
  nav .bar .fa-bars{
    display: inline;
    align-items: flex-end;
    font-size: 12vh;
    
  }
  .image-hidden{
    display: block;
    margin: auto;
  }
  .home .image{
    display: none;
  }
  .icons{
  font-size: 10vh;
  padding: 100px 50px 0 0;
  }
  .no-imgheader{
    padding: 0px;
  }
  .home .home_content{
    font-size: 8.2vh;
    padding: 100px 0 0 0;
  }
  .abouthead{
    padding: 40px;
    font-size: 7vh; 
   }
   .aboutContent img{
    padding: 0;
    display: none;
   }
   .aboutnoimage{
    /* background-color: #c38686; */
    font-size: 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;
    height: 80vh;
   }
   .aboutpara{
    margin: 0px 70px;
   }
   .box{
    margin:  0 30px;
   }

   .box0{
    width: 40vw;
    align-self: center;
    border-radius: 17px;
    border-style: solid;
    border-width: 2.5px;
    padding: 45px;
    background-color: rgb(175, 175, 174);
    margin: 0px 5vw 0px 0px;
   }
  
   .fa-solid{
    margin-left: 10px;
    display: flex;
    align-self: center;
    justify-content: center;
   }
   .aboutpara{
    font-size: 4vh;
   }
   #btnresume {
    font-size: 26px;
    color: #3a0303;
    padding: 18px;
    align-self:center;
 
  }
  .porttitle button{
    font-size: 30px;
    padding: 28px;
    font-size: 5vh;
    
    }
    .wrapper{
      padding: 30px;
      width: 670px;
    }
    .contactform{
      display: inline-block;

      }
      .side1, .side2{
        display: inline-block;
        display: block;
        margin: auto;
      }
      .side1  #sub, .side2 input , .btncontact,.side1 input{
        width: 150vw;
        height: 7vh;
        margin: 10px 0px 0 190px;
      }
      footer{
        padding-top: 40px;
        
      }
      
      footer .part1 .logo{
         font-size: 6.7vh;
     }



  


}