*{
  scroll-behavior: smooth;
}
body{
  background-color: black;
  }
nav{
    z-index: 1;
    position: sticky;
    top: 0;
    overflow: hidden;
    display: flex;
    justify-content: end;
    align-items: center;
}
nav a{
  color: whitesmoke;
}
nav h2{
    margin-right: auto;
    font-size: xx-large;
    color: rgba(255, 23, 23, 0.795)
}
ol{
    display:flex;
    gap: 15px;
    list-style-type: none;
    justify-content: end;
}
ul{
    justify-content: center;
    margin-right: 30px;
    list-style-type: none; 
}


#flip{
  justify-self: center;
  box-sizing: content-box;
  overflow: hidden;
  width: 150px;
  height: 20px;
}
.txt{
  animation-name: sh;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes sh{
10%{
transform: translateY(-10PX);
}
25%{
transform: translateY(-20PX);
}
50%{
transform: translateY(-20px);
}
75%{
transform: translateY(-30px);
}
100%{
transform: translateY(-40px);
}
  
}
.social{
    gap:20px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home{
  position: absolute;
  top:0;
  padding-top:80px ;
    background: linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,1)),url("Annapurna-Forest.jpg");
    color: whitesmoke;
    width: 100%;
    height: 100vh;
}
.maintext{
    text-align: center;
    font-size: x-large;
}
h3{
    rotate: 90deg;
    margin-top:95px;
    text-align: center;
    font-size: 14px;
    animation-name: scrl;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes scrl {
    0%{
    }   
    10%{
        transform: translateX(10px);
    }
    50%{
transform: translateX(20px);   
     }
    75%{
 transform: translateX(30px);
    }
    100%{
        
    } 
    
}

b{
  font-size: xx-large;
  color: white;
}
p{
  color: white;
  font-size: larger;
}
button{
  background-color: #DC143C;
  color: white;
  width: 180px;
  height: 55px;
}
.button:hover{
  background-color: white;
  color:black;
}
h1{
  color: white;
}
.about-cont{
  display:flex;
  width:100%;
  height: 100vh;
  position: relative;
  top:590px;
}
.about{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.picture{
  width:50%;
  display: flex;
  justify-content: center;
}
.picture img{
  width:100%;
  height:auto;
}
.services-cont{
  position:relative;
  top:600px;
  width: 100%;
  display: flex;
  background-size: cover;
  padding: 20px;
   background-image:linear-gradient(180deg, rgba(0,0,0,.2),rgba(0,0,0,.99)),url(computers-devices.jpg)
}
.services{
  width:30%;
}
.card-cont{
  width: 70%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
h4{
  color: white;
}
.box-style{
   width: 80%;
   height: auto;
   background: linear-gradient(180deg,rgba(0,0,0,.5), rgba(0,0,0,.5));
   gap:20px;
   padding:20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-bottom: 15px;
   }
.portfolio-cont{
  position:relative;
  top:600px;
  display:flex;
  width:100%;
  
}
.card1-cont{

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 80%;
}
.card-style{
  width:30px;
}
.tab{
position:relative;
  top:600px;
  font-size: xx-large;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.contact{
position:relative;
  top:600px;
   font-size: x-large;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    position: relative;
    justify-self: center;
    gap: 5px;
}
.input{
  width: 400px;
  height:80px;
}