/* Colour Combs
   Hex Codes
   Mint Cream  : #F2F7F3 
   Eerie Black : #141414
   Emerald : #40DD8C
   Jet : #292929
*/

/* Font Families */
/* Logo */ 
/* font-family: 'Righteous', cursive; */
/* Text */
/* font-family: 'Open Sans', sans-serif; */
/* font-family: 'Caveat', cursive; */
*{
   padding: 0;
   margin: 0;
   text-decoration: none;
   list-style-type: none;
   box-sizing: border-box;
}
::-webkit-scrollbar{
   width: 10px;
}
::-webkit-scrollbar-track{
   box-shadow:  2px 2px 0px #40DD8C;
}
::-webkit-scrollbar-thumb{
   width: 5px;
   background: #40DD8C;
}
body{
   background:  #141414 ;
   font-family: 'Open Sans', sans-serif;
}
h1, h2, h3{
   color: #F2F7F3;
}

/* Navigation Bar CSS*/
header{
  background:  #40DD8C;
}

header::after{
   content: '';
   display: table;
   clear: both;
}
.logo{
   font-family: 'Righteous', cursive;
   /* font-family: 'Pacifico'; */
   float: left ;
   padding: 15px 0;
   font-size: 3.2rem;
   margin-left: 70px;
   color: #141414  ;
   text-transform: uppercase;
   cursor: pointer;
}
.logo span{
   color: #F2F7F3;
}
.logo a{
   color: inherit;
   text-decoration: none;
}

nav{
   min-height: 60px;
   float: right;
   position: relative;
}
nav ul{
  margin: 0;
  padding: 0;
  list-style: none; 
}
nav li{
   display: inline-block;
   margin: 0 35px;
   padding-top:50px ;

   position: relative;
}

nav a{
   font-weight: 400;
   align-items: center ;
   color: #141414;
   text-decoration: none;
   text-transform: uppercase;
   cursor: pointer;
}

nav a:hover{
   color: #F2F7F3;
   transition: 0.4s ease;
}

/* nav a::before{
   content: '';
   display: block;
   height: 5px;
   background-color: #292929 ;
   position: absolute;
   border-radius: 5px;

   top: 30px;
   width: 0%;



   transition: all ease-in-out 350ms
} */

nav a:hover::before{
   width: 100%;
}

/* Hamburger-Menu-Navbar CSS */
.hamburger{
   display: none;
   cursor: pointer;
   position: absolute;
   top: 35px;
   right:20px;

}
.bar{
   display: block;
   width: 25px;
   height: 3px;
   margin: 5px auto;
   border-radius: 3px;
   -webkit-transition: all 0.3s ease-in-out ;
   transition: all 0.3s ease-in-out;
   background: #F2F7F3;
}

@media(max-width: 1030px){
   .logo{
      font-size: 2.7rem;
      display: block;
   }
   .hamburger{
      display: block;
   }
   
   .hamburger.active .bar:nth-child(2){
      opacity: 0;

   }
   .hamburger.active .bar:nth-child(1){
      transform: translateY(8px) rotate(45deg);

   }
   .hamburger.active .bar:nth-child(3){
      transform: translateY(-8px) rotate(-45deg);

   }
   .nav-menu{
      z-index: 100;
      position: fixed;
      left: -100%;
      flex-direction: column;
      top: 60px;
      background: #40DD8C;
      display: flex;
      width: 100%;
      margin-top: 40px;
      height: max-content;
      min-height:100%;
      justify-content: center;
      text-align: center;
      transition: 0.5s ease-in-out;
   }
   
   .nav-items{
      font-size: 1.2rem;
      margin: 16px 10px;
   }
   .nav-menu.active{
      left: 0;
   }
}
/* Navigation-Bar End */



/* Title Banner CSS */
.title-wrapper{
   max-height: 100%;
   display: flex;
   justify-content: center;
   position: relative;

}
.title-wrapper, .title{
   align-items: center;
}
.title-img img{
   margin-top: 70px;
   width: 450px;
   height: 450px;
   object-fit: cover;
}

.title{
   margin-right: 200px;
   font-size: 3.2rem;
   position: relative;
   color: #F2F7F3 ;
   width: 500px;
}
/* .rotate-words{
   margin-left: 0px;
} */

.rotate-words span{
   width: max-content;
   position: absolute;
   background:#40DD8C ;
   padding-inline: 10px;
   opacity: 0;
   transform-origin: 10% 75%;
   animation: rotateWords 8s
   var(--d) linear infinite;
}
.rotate-words #designer{
   font-family: 'Caveat', cursive;
}

@keyframes rotateWords {
   5%{
       opacity: 1;
   }
   10%,20%{
       opacity: 1;
       transform: rotate(3deg);
   }
   15%{
       opacity: 1;
       transform:rotate(-1deg)
   }
   25%{
       opacity: 0;
       transform: translateY(90px)
       rotate(10deg);
   }
}

@media(max-width: 1030px){
   .title-wrapper{
      margin-top: 30px;
      margin-left: 20px;
      align-items: center;
      justify-content: center;
      width: 80%;
      display: inline-block;
   }
   .title{
      align-items: center;
      justify-content: center;
      margin-top: 50px;
      margin-right: 50px;
   }
   .title-img{
      margin-top: 110px;
   }
}

/* Title-Banner End */

/* About-Banner Start */
.about-container{
   margin-top: 100px;
   max-width: 100%;
   padding: 78px 0;
}

.about, img{
   height: auto;
   width: 450px;
   object-fit: cover;
}

.about-text{
   width: 550px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex; /* display: inline for responsive */
align-items: center;
justify-content: space-around ;
}

.about-text h1{
   color: #40DD8C;
   font-size: 4rem;
   text-transform: capitalize;
   margin-bottom: 20px;
}

.about-text h5{
   color: #40DD8C;
   font-size: 2.2rem;
   text-transform: capitalize;
   margin-bottom: 25px;
   letter-spacing: 2px;
}

h5 #designer{
   color: #F2F7F3;
   font-family: 'Caveat', cursive;
}
.about-text p{
   color: #F2F7F3;
   line-height: 32px;
   font-size: 1.1rem;
   margin-bottom: 45px;
}
button{
   font-family:'Open Sans', sans-serif ;
   background:#40DD8C ;
   color: #141414;
   text-decoration: none;
   text-transform: capitalize;
   font-size: 0.9rem;
   letter-spacing: 1px;
   font-weight: bold;
   padding: 10px 25px ;
   border-radius: 20px ;
   transition: .4s ease;
}
button:hover{
   background: transparent;
   border: 2px solid #40DD8C;
   color: #F2F7F3;
   cursor: pointer;
}
button, a{
   color: #F2F7F3;
   text-decoration: none;
}

@media(max-width: 1030px){
.main{
   width: 600px;
   display: inline;
   justify-content: center;
   align-items: center;
}
.main img{
   margin-left: 20px;
   margin-bottom: 30px;
}
.about-text{
   margin-left: 20px;
   width: 450px;
}
/* .about-text, h1{
   justify-content: center;
} */
button{
   align-items: center;
   justify-content: center;
}
}


/* About-Banner End*/

/* Footer CSS */
.footer{
   margin-top: 55px;
   width: 100%;
   height: 100px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items:center ;
}
.footer-links{
   width: 150px;
   display: inline-block;
}
.footer-icons{
   color: #40DD8C;
   cursor: pointer;
   font-size: 1.8rem;
   transition: 300ms;

}
.footer-icons:hover{
   color: #F2F7F3;   
}


/* Footer CSS End */
@media(max-width: 1030px){
   .footer, .footer-icons{
      width: 600px;
      justify-content: center;
      align-items: center;
   }
}