*{
  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;
    color: whitesmoke;
}

nav a{
  color: whitesmoke;
}
nav h2{
    margin-right: auto;
    font-size: xx-large;
    color: rgba(255, 255, 255, 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: al;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes al{
10%{
transform: translateY(-10PX);
}
25%{
transform: translateY(-20px);
}
50%{
transform: translateY(-30px);
}
75%{
transform: translateY(-40px);
}
100%{
transform: translateY(-50px);
} 
}
.social{
    gap:20px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home{
  position: absolute;
  top: -10px;
  padding-top: 130px;
    background: linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,1)),url("tree.jpg");
    color: whitesmoke;
    width: 100%;
    height: 650px;
    background-repeat: no-repeat;
    background-size: cover;
}
.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%;
}
.about{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.picture{
  width:50%;
  padding: 50px;
}
.picture img{
  width:100%;
  height:auto;
}
.services-cont{
  width:100%;
  display: flex;
  background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.99)),URL("computer.jpg");
  background-size: cover;
  padding: 20px;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}
.services{
width: 30%;

}
.card-cont{
  width: 70%;
  height: auto;
  color: whitesmoke;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 40px;
}
h4{ 
    color:white;
}

.box-style{
   background:linear-gradient(180deg,rgba(0,0,0,0.1),rgba(0,0,0,.8));
    height: 140px;
    width: 65%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.Portfolio-cont{
  display: flex;
  width: 100%;
}
.card1-cont{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 80%;
}
.card-style{
  width: 30PX;
}
.tab{
font-size: 30PX;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.contact{
  font-size:xx-large;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  position: relative;
  justify-self: center;
  gap: 5px;
}
.input{
  height: 30px;
  width: 130px;
}