*{
margin: 0;
padding:0;
list-style: none;
font-family: Georgia, 'Times New Roman', Times, serif;

}




:root{
  --primarycolour:paleturquoise;
}

nav{
    display:flex;
    justify-content: space-between;
    text-align: center;
    height: 8vh;
    border-bottom: 1px solid var(--darkcolour);
    height: 9vh;
    background-color:paleturquoise;
}
nav h1{
  margin: 2rem;
  
}

 nav ul{
        width: 30%;
        display: flex;
        font-size: 1.2rem;    
        justify-content: space-evenly;
        align-items: center;

    }
    nav ul li{
        color: light rgb(132, 156, 249);

    }
    nav ul li:hover{
        cursor: pointer;
        text-decoration:underline;
      
    }
    nav h1{
      font-size: 2.5rem;
      color: black;
      text-align:center;
      

    }

  .hero{
    height: 92vh;
    display: flex;
    background-color: paleturquoise;
  }

  .hero .left{
 
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  
  }

  .hero .right{
   
    height: 100%;
    width: 50%;
    display: flex;
  justify-content:center;
    align-items:center;

  }
  .hero .right img{
   height: 60%;
   border-radius: 50% 20% / 10% 40%;
  }

  .left h1{
    font-size: 3rem;
  }

  .socialmedia{
    width: 10rem;
    display: flex;
    justify-content: space-evenly;

  }
/* images of social media icon */
  .socialmedia img{
    height:2.5rem;
    border-radius: 50% ;

  }
/* socialmedia names */
  .socialmedianame{
    width: 10rem; 
    display: flex;
    justify-content: space-evenly;
    font-size: 0.7rem;
  

  }

.services{
  padding: left 1rem; 
    height: 100vh;
    width: 100%;
    background-color:rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(3,1fr) ;
    gap: 1rem;
    color: rgb(10, 10, 10);
  }
  .services h1{
    color: black;
    font-size: 3rem;
    text-align: center;
  }

  .services div{
    margin:0.2rem;
    height:22rem;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2rem;
    background-color: #98e8ec;
    border-radius: 25% 10%;
    
  
    
  }
  .services div:hover{
    cursor: pointer;
    background-color: #a8d4f9;
    transform: scale(1.1);
    transition: 2s;

  }

  .services div img{
    height: 10rem;
    width: 8rem;
    border-radius: 50%;
    margin-top:2.5rem;
  }

  .services div h3{
    color: rgb(230, 173, 27);
  }

  .services div p{
    padding: 0 3rem ;
  }

  .outsideofservices{
    color: black;
    margin-top:  2rem; 
    margin-bottom: 2rem;
    text-align: center;
    font-size: 3rem;

  }


.projects{
    height: 100vh;
    width: 100%;
    background-color:rgb(115, 237, 190)se;
    padding: 0;
} 
.outsideofprojects{
  color: black;
  margin-top:  2rem; 
  margin-bottom: 2rem;
  font-size: 3rem;
  text-align: center;


}
.projects h1{
  text-align: center;
}

#contact{
  margin: 0;
    height: 100vh;
    width: 100%;
    padding: 3rem;
    display: flex;
    background-color: #d2f2f0;
}
.contactleft{
  
    height: 100%;
    width:25% ;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.contactright{
    height: 100%;
    width: 75% ;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.contactform{
  margin: 0;
    max-width: 50rem;
    padding: 2rem;
    border-radius: .4rem;
    box-shadow: black;
    width: 100%;
    background-color:paleturquoise;
}

label{
    display: block;
    font-weight:bold;
}

.input,textarea{
    width: 100%;
    padding: 10px;
    box-sizing:border-box ;
    border-radius: .4rem;
    margin-bottom: .9rem;
}

.button{
    cursor: pointer;
    color: #94defc;
    padding: 1rem 2rem ;
    border-radius: 4rem;
    transition: 5px 1s ease-in-out ;
    
}


  


  /* From Uiverse.io by andrew-demchenk0 */ 
.pyramid-loader {
  position: relative;
  width: 300px;
  height: 300px;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

/* loading gradientpiramid */
.pyramid-loader .wrapper .side {
  width: 70px;
  height: 70px;

/* you can choose any gradient or color you want */
  /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pyramid-loader .wrapper .side1 {
  transform: rotateZ(-30deg) rotateY(90deg);
  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

.pyramid-loader .wrapper .side2 {
  transform: rotateZ(30deg) rotateY(90deg);
  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

.pyramid-loader .wrapper .side3 {
  transform: rotateX(30deg);
  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
}

.pyramid-loader .wrapper .side4 {
  transform: rotateX(-30deg);
  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
}

.pyramid-loader .wrapper .shadow {
  width: 60px;
  height: 60px;
  background: #8B5AD5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: rotateX(90deg) translateZ(-40px);
  filter: blur(12px);
}