@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root{
    --bg-color:#1f242d;
    --second-bg-color:#323946;
    --text-color:#fff;
    --main-color:rgb(0, 247, 255);
    --dot-color:#49225B;
}

html{
    font-size: 62.5%;
    
}

body{
    background: var(--bg-color);
    color: var(--text-color);
}

section{
    min-height: 100vh;
    padding: 8rem 9% 2rem ;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: var(--bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo{
    font-size: 2.5rem;
    color:lightcyan;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideTop .5s ease forwards;
}

.navbar a{
    font-size:1.7rem ;
    color: var(--text-color);
    margin-left: 4rem;
    transition: .3s;
    opacity: 0;
    animation: slideRight .5s ease forwards;
    animation-delay: calc(.1s * var(--i));
}

.navbar a:hover{
    color: var(--main-color);
}

.navbar a {
   font-size: 1.7rem;
   color: var(--text-color);
   margin-left: 4rem;
   position: relative;
   transition: color 0.3s;
}


.navbar a::after {
   content: "";
   position: absolute;
   width: 0;
   height: 2px;
   background: var(--main-color);
   left: 0;
   bottom: 0;
   transition: width 0.3s;
}

.navbar a:hover::after {
   width: 100%;
}


.navbar .nav-links {
   display: flex;
   list-style: none;
   gap: 2rem;
}

.navbar .nav-links li a {
   text-decoration: none;
   color: var(--text-color);
   font-size: 1.7rem;
   transition: 0.3s;
}

.navbar .nav-links li a:hover {
   color: var(--main-color);
}


.hamburger {
   font-size: 2.5rem;
   color: var(--text-color);
   cursor: pointer;
   display: none;
   position: absolute; 
    right: 9%; 
    top: 2rem;
}



@media (max-width: 768px) {
   .hamburger {
       display: block; 
   }

   .navbar {
       position: absolute;
       top: 80px;
       right: 0;
       width: 200px;
       background: var(--second-bg-color);
       display: none;
       flex-direction: column;
       padding: 1rem;
       border-radius: 10px;
   }

   .navbar .nav-links {
       flex-direction: column;
       gap: 1.5rem;
   }

   .navbar .nav-links li {
       text-align: center;
   }

   .navbar.show {
       display: flex;
   }
}


.pic{
    width: 320px;
    border-radius: 20%;
}


.home{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px 10% 0;
 }

 .home-content{
    max-width: 600px;
 }

 .home-content h3{
    font-size: 32px;
    font-weight: 700;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: .7s;

 }

 .home-content h3:nth-of-type(2){
    margin-bottom: 30px;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: .7s;
 }

 .home-content h3 span{
    color: var(--main-color);
 }
 .home-content h1{
    font-size: 56px;
    font-weight: 700;
    margin: -3px 0;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: .7s;

 }
 .home-content h1 span{
    color: var(--main-color);
 }

 .home-content p{
    font-size: 1.6rem;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: 1s;
 }
 .pic{
    width: 290px;
    border-radius: 20%;
 }

 .home-img img{
    max-width: 450px;
    margin-right: -20px;
    opacity: 0;
    animation: zoomIn 1s ease forwards;
    animation-delay: .1s;
 }

 .social-media a{
    font-size: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: .5s ease;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: calc(.2s * var(--i));
 }

 .social-media a:hover{
    background-color: var(--main-color);
    color: var(--second-bg-color);
    box-shadow: 0 0 1rem var(--main-color);
 }

 p{
    text-align: justify;
 }

 .btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    border-radius: 4rem;
    box-shadow: 0 0 1rem var(--main-color);
    font-size: 1.6rem;
    color: var(--second-bg-color);
    letter-spacing: .1rem;
    font-weight: 600;
    transition: .5s ease;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: .7s;
 }

 .btn:hover{
    background-color: var(--second-bg-color);
    color: var(--main-color);
 }

 .about-content span{
    color: var(--main-color) ;
 }

 .pic2{
    width: 400px;
    border-radius: 20%;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: .5s;
 }

 .pic2 {
   max-width: 100%;
   height: auto;
   display: block;
}


 .about{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: var(--second-bg-color);
 }

 .heading1{
    font-size: 5.5rem;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: .7s;
 }

 .about-content h3{
    text-align: left;
    line-height: 1.2rem;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: .5s;
 }
 

 .about-content h3{
    font-size: 2.6rem ;
 }

 .about-content p{
    font-size: 1.6rem;
    margin: 2rem 0 3rem;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: 1s;
 }
 .about-content h3{
    margin-left: 5rem;
 }

 .about-content span2{
    color: var(--main-color);
 }

 .heading2{
    font-size: 5.5rem;
    text-align: center;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: .5s;
 }
 .span3{
    color: var(--main-color);
 }

 .services h2{
    margin-bottom: 5rem;
 }

 .services-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    animation: slideRight .5s ease forwards;
    animation-delay: .1s;
 }
 .services-container .services-box {
    flex: 1 1 30rem;
    background: var(--second-bg-color);
    padding: 3rem 2rem 4rem;
    border-radius: 2rem;
    text-align: center;
    border: .2rem solid var(--bg-color); 
    transition: .5s ease;
 }

 .services-container .services-box:hover{
    border-color: var(--main-color) ;
    transform: .5s scale(1.02);
 }

 .services-box i{
    font-size: 7rem;
    color: var(--main-color);
    opacity: 0;
    animation: slideLeft 2s ease forwards;
    animation-delay: 1s;
 }

 .services-box h3{
    font-size:2.6rem ;
    opacity: 0;
    animation: slideRight 2s ease forwards;
    animation-delay: 1s;
 }

 .services-box p{
    font-size:1.6rem ;
    margin: 1rem 0 3rem;
    text-align: center;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: .5s;
 }

 .portfolio{
    background: var(--second-bg-color);
 }

 .portfolio h2{
    margin-bottom: 4rem;
    opacity: 0;
    animation: slideTop 2s ease forwards;
    animation-delay: 1s;
 }

 .portfolio-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 2.5rem;
 }

 .portfolio-container .portfolio-box{
    position: relative;
    border-radius: 2rem;
    box-shadow: 0 0 1rem var(--bg-color);
    overflow: hidden;
    display: flex;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: .5s;
 }

 .portfolio-box img{
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    animation: slideRight 2s ease forwards;
    animation-delay: 1s;
 }


.portfolio-box .portfolio-layer{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(rgba(0,0,0,.1), var(--main-color));
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   padding:0 4rem ;
   transform: translateY(100%);
   transition: .5s ease;
}

.portfolio-layer h4{
   font-size: 3rem;
}

.portfolio-layer p{
   font-size: 1.3rem;
   margin: .3rem 0 1rem;
}

.portfolio-layer a{
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 5rem;
   height: 5rem;
   background-color: var(--text-color);
   border-radius: 50%;
}

.portfolio-layer a i{
   font-size: 2rem;
   color: var(--second-bg-color);
}

.portfolio-box:hover img{
   transform: scale(1.1);
 }

 .portfolio-box:hover .portfolio-layer{
   transform: translateY(0);
}

.portfolio-layer a:hover {
   background-color: var(--second-bg-color);
}

.portfolio-layer a:hover i{
   color: var(--main-color);
}

.span4{
   color: var(--main-color) ;
}


.contact h2{
   margin-bottom: 3rem;
}

.contact form{
   max-width: 70rem;
   margin: 1rem auto;
   text-align: center;
   margin-bottom: 3rem;
   opacity: 0;
    animation: slideRight 2s ease forwards;
    animation-delay: 1s;
}

.contact form .input-box{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.contact form .input-box input,
.contact form textarea {
   width:100% ;
   padding: 1.5rem;
   font-size: 1.6rem;
   color: var(--text-color);
   background-color: var(--second-bg-color);
   border-radius: .8rem;
   margin: .7rem 0;
}

.contact form .input-box input{
   width: 49%;
}

.contact form textarea{
   resize: none;
}

.contact form .btn{
   margin-top: 2rem;
   cursor: pointer;
}

.footer{
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding: 2rem 9%;
   background-color: var(--second-bg-color);
}

.footer-text p{
   font-size: 2rem;
}

.footer-iconTop a{
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: .8rem;
   background:var(--main-color) ;
   border-radius: .8rem;
   transform: .5s ease;
}

.footer-iconTop a:hover{
   box-shadow: 0 0 1rem var(--main-color);
}

.footer-iconTop a i{
   font-size: 2.4rem;
   color: var(--second-bg-color);
}



/*KEYFRAMS ANIMATION */
@keyframes slideRight{
   0% {
       transform:translateX(-100px) ;
       opacity: 0;
   }

   100% {
       transform: translateX(0);
       opacity: 1;
   }
}

@keyframes slideLeft{
  0% {
      transform:translateX(100px) ;
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes slideTop{
   0% {
       transform:translateY(100px) ;
       opacity: 0;
   }

   100% {
       transform: translateY(0);
       opacity: 1;
   }
}

@keyframes slideBottom{
  0% {
      transform:translateY(-100px) ;
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes zoomIn{
  0% {
      transform:scale(0) ;
      opacity: 0;
  }

  100% {
      transform:scale(1);
      opacity: 1;
   }
}


/* Responsive Design */

@media (max-width: 1200px) {
   html {
       font-size: 55%;
   }
   .home {
       flex-direction: column;
       text-align: center;
   }
   .home-img img {
       max-width: 80%;
   }
}

@media (max-width: 992px) {
   .header {
       padding: 2rem 5%;
   }
   section {
       padding: 8rem 5% 2rem;
   }
   .portfolio-container {
       grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .header {
       flex-direction: column;
       align-items: center;
   }
   .navbar a {
       margin: 1rem 0;
       display: block;
   }
   .services-container {
       flex-direction: column;
   }
   .portfolio-container {
       grid-template-columns: 1fr;
   }
   .home-content h1 {
       font-size: 4rem;
   }
   .home-content h3 {
       font-size: 2.5rem;
   }
   .home-content p {
       font-size: 1.4rem;
   }
   .about {
       flex-direction: column;
       text-align: center;
   }
   .about-content h3 {
       margin-left: 0;
   }
}

@media (max-width: 480px) {
   html {
       font-size: 50%;
   }
   .home-content h1 {
       font-size: 3.5rem;
   }
   .home-content h3 {
       font-size: 2rem;
   }
   .home-content p {
       font-size: 1.2rem;
   }
   .btn {
       font-size: 1.4rem;
       padding: 0.8rem 2rem;
   }
   .footer {
       flex-direction: column;
       text-align: center;
   }
}