/* Global styles for the page */

  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: <weight>; */
  font-style: normal;


  /* font-style: normal; */

  /* box-sizing:border-box; */
  background-color:   #d8bfd8;

  color: black;
}
/* Navbar */
nav {
    background-color: transparent;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10; /* Add this */

  }

  .logo {
    font-size: 24px;
    font-weight: bold;
  color: #32cd32;
  }

  .nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
    /* background-color: black; */

    
  }.nav-links li{
    color: #32cd32;
  }

  .nav-links a {
    color: white;
    font-weight: 500;
    font-size: 17px;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .nav-links a:hover {
    color: #00adb5;
  }

  .menu-toggle {
    display: none;
  }

  .hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 15px;
    right: 20px;
  }

  @media (max-width: 768px) {
    .nav-links {
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      background-color: #333;
      border-radius: 10px;
      flex-direction: column;
      align-items: center;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .menu-toggle:checked ~ .nav-links {
      max-height: 300px;
    }

    .hamburger {
      display: block;
    }.logo{
        font-size: small;
    }
    
  }

.h2{
    padding-bottom: 50px;
}
/* hero section */
.hero {
  text-align: center;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  background-color:   #d8bfd8;
  /* width: 100vw; */

  /* background-size: object-fit; */
 font-size: 10px;

}
  
.texthero{
  /* background-image: url("./assets/5b254d02-d87f-4b8f-8fa9-c7a88bec9276.jpg"); */

font-weight: bolder;
font-size: larger;
height: 290px;
background-color: #d9d9d9;
backdrop-filter: blur(10px);
/* color: #333; */
border-radius: 10px;
padding:50px 50px 0 50px;
}
.texthero p{
font-size: 25px;
}
.hero-title{
  font-size: 5rem;
  font-weight: bold;
  opacity: 1;
  /* transform: translateY(-100px); */
  animation: fallIn 1s ease-in-out forwards;

}
@keyframes appear{
    from{
        opacity: 0;
        scale: 0.5;
    }to{
        opacity: 1;
        scale: 1;
    }
   
}
@keyframes fallInSlow {
    from {
      opacity: 0;
      transform: translateY(-100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  #letters {
    font-size: 100px;
    animation: fallInSlow 2s ease-in-out forwards;
  }
    
.grid-item, .service-item{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
/* About Section */
.about-image img{
    margin-top: 2rem;
width: 50%;
height: 320px;
border-radius: 20px;
}
/* Service Section */
.gridly{
  display: flex;
justify-content:center;
align-items: center;
}
.grid-container{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 20px;
  max-width: 50%;
  align-content: center;
  justify-self: center;
}
/* media query for grid */
@media (max-width:798px){
   
.grid-container{
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  
}.space{
 border: 3px solid black;
background-color: #e91e63;
}.texthero p {
  font-size: 17px;
  font-weight: 300;
  margin-bottom: 0;
  margin-top: 0;
  
}#letters{
  font-size: 8px;
}.texthero{
display: inline-block;
height: fit-content;
}.about-image img{
  width: 305px;
}.section{
    height: auto;
}.grid-item{
    font-size: 40px;
}

}
.grid-item{
  background: #32cd32;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: rgb(13, 166, 218);
  
  

}

.services{
    /* padding-top: 2rem; */
  text-align: center;
  /* height: 100vh; */
  /* margin-bottom: 200px; */
  /* margin-top: 150px; */
  padding-bottom: 5rem;
  /* position: relative; */
}
/* Projects Section */
.projects{
   padding-top: 6rem;
  text-align: center;
  /* height: 100vh; */
display: block;
  margin-top: 200px;
  padding-bottom: 2rem;
  
}
.projects-grid{
  display: flex;
justify-content:center;
align-items: center;
}
.projects h2{
  text-align: center;
}
.project-container{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap: 20px;
  align-content: center;
  justify-self: center;
}
@media (max-width:798px){
.project-container{
  grid-template-columns: 1fr;
}.projects{

    margin-top: auto;
    padding-top: auto;
}

}
.service-item{

  text-align: center;
  border-radius: 10px;
  box-shadow: rgb(13, 166, 218);
  height: 210px;
  width: 210px;
 
}
.service-item:hover{
  transform: scale(1.05);
}
/* Contact Section */

.contact-button{
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1.2rem;
  background-color: #32cd32 ;
  color: white;
  border: none;
  cursor: pointer;
  transition:  0.3s ease-in-out;
  border-radius: 5px;
}
@keyframes slideIN{
    from{
        opacity: 0;
        transform: translateX(100px);
    }to{
        opacity: 1;
        transform: translateX(2px);
    }
}

.about-image{
    animation:  slideIn 2s linear;
}
.contact-button:hover{
  background-color: #228b22;

}
/* extra colour #d8bfd8, */
#letters{
  font-size: 100px;
}
#servicesimage{
  margin-top: 10px;
  height: 200px;
  width: 200px;
}

/* Projects */
/* Section Styling */




.about{
    /* padding-top: 2rem; */
  text-align: center;
  
}


/* contact Styles */
.contact{
  /* position: relative; */
  /* min-height: 100vh; */
  /* margin-top: 7rem; */
  padding: 50px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background: url(); put in lavender image or linear gradient
  background cover */
}
.contact .contact{
  max-width: 800px;
  text-align: center;

}

.contact h2{
  text-align: center;
}
.contact .content p{
text-align: center;
  font-weight: 300;
  /* color: #d9d9d9; */
  
}

.container-contact{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.container-contact .contact-info{
  /* width: 50%; */
  padding-right: 50px;
  display: flex;
  flex-direction: column;
}
.contact-info{
  background-color: #32cd32;
  height: 100%;
  border-radius: 10px;
  padding-left: 10px;
  
}
.box{
    margin-bottom: 10px;
    padding-top: 20px;
}
.container-contact .contact-info .inputBox{
  position: relative;
  padding: 20px 0;
  display: flex;
}
/* .container-contact .contact-info .inputBox .icon{
  min-width:60px;
  height: 60px;
  justify-content: center;
  align-items:center;
  border-radius: 50%;
  font-size:22px;

  display: flex;
} */
.container-contact .contact-info .inputBox .text{
margin-left: 20px;
font-size: 16px;
flex-direction: column;
font-weight: 300;
  display: flex;
}
.container-contact .contact-info .inputBox .text h3{

font-weight: 500;
color: #32cd32;

}
.contact-form{
  width: 40%;
  padding: 40px;
  background-color: #d9d9d9;
  border-radius: 10px;
  
}
.contact-form h2{
 font-size: 30px;
 font-weight: 500;
}
.contact-form .inputBox{
  position: relative;
  width: 100%;
  margin-top: 10px;

}
.contact-form .inputBox input, .contact-form .inputBox textarea{
  width: 100%;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  border: none;
  border-bottom: 2px solid #32cd32;
  outline: none;
  resize: none;
}
.contact-form .inputBox span{
  position: absolute;
  left: 0;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  pointer-events: none;
  transition: 0.5s;
  color: #666;
}
.contact-form .inputBox input:focus ~ span,
.contact-form .inputBox input:valid ~ span,
.contact-form .inputBox textarea:focus ~ span,
.contact-form .inputBox textarea:focus ~ span{
  color: #e91e63;
  font-size: 12px;
  transform: translateY(-20px);
}
.contact-form .inputBox input[type="submit"]{
  width: 100px;
  background-color: #32cd32;
  color: #d8bfd8;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
  border-radius: 10px;
}
@media (max-width: 991px){
    html{
        width: 100%;
    }
    .contact{
        margin-top: 0;
        display: flex;
        width: 100%;
    }
  .container-contact {
    flex-direction: column;
  }
  .container-contact .contact-info{
    margin-bottom: 40px;
    
  }.contact-info{
    width: 290px;
    /* margin-right:20px ; */
  }
 .contact-form{
    display: flex;
    width: 290px;
  }.content{
    width: 290px;
  }.heading-title{
    margin-top: 0;
  }
}

.contact-btn{
  padding: 10px;
  font-size: 1.2rem;
  background-color: #32cd32;
  color: #d9d9d9;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  
  
}
.contact-btn:hover{
  background-color: #228b22;
}
/* Hero Animation */
@keyframes fallIn {
  from {
    opacity: 0;
    transform: translateY(0);
  }to{
    opacity: 1;
    transform: translateY(-100px);
  }
}
 img{
  width: 150px;
  height: 150px;
 }
h2{
  font-size: xx-large;
}
section{
  height: 100vh;
  /* height: 500px; */
  /* margin-bottom:100px; */
/* margin-bottom: 3rem; */

}
/* Team Section */
.heading-title{
  text-align: center;
  margin-top: 10rem;
 
}
.heading-title p{
    margin-bottom: 20px;
}
.team{
  display: flex;
  align-items: center;
  justify-content: center;
}
.team img{
  height: 310px;
  width: 310px;
  border-radius: 10px;
}.team:hover{
  transform: scale(1.05);
}
footer {
    background-color: black;
    color: white;
    padding: 10px 0;
    text-align: center;
    margin-top: 20px;
    bottom: 0;
    
  }