@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300&display=swap");

/*shorten the image height*/

*{
    margin:0;
    padding:0;
   
    font-family : "Be Vietnam Pro", sans-serif;
    scroll-behavior: smooth;
   
   
}
:root {
    --bgOrange: #e84949;/*global var*/
}
#wrapper{
    height:100vh;
   
    
}
.container{
    width:1200px;
    margin:0 auto; /*container must be in center adjust itself using auto (l-r)*/
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items: center;

    padding-top:1rem;
}
.logo{
    width:80px;
}

.logo-container{
    display:flex;
  justify-content: center ;
   align-items: center;
}
 
.logo-text{
    margin-left: -1.2rem;
    font-size: 28px;
}

.nav-items{
    display:flex;
    gap:2rem;
    padding:0 4rem;
}

.nav-items div{
    font-size:20px;
    font-weight:500;
    cursor:pointer;
}
.nav-items div a{
    color:black;
}

a{
    text-decoration: none; /*removes the underline under the a link*/ 
}

.nav-items div:hover{
    font-weight:bold;
    transition: 0.4s;
}

.hero-section{
    position:relative;
    display:flex;
    justify-content: center;
    align-items:center;
    
    gap:5rem;
    margin: 4rem auto;
    padding: 0 1rem;
    padding-bottom: 8rem;
}

.faded-text{
  user-select:none;
  font-size:7em;
  color: rgb(231,231,231);

  font-weight: bold;
  bottom: -16%;
  left: -5%;
  transition: all 3s;
}

  .hero-section-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  }

  .hero-section-heading{
    font-size: 35px;
    color: #343d68;
    font-weight: 500;
  }

  .role{
    color: #4345d5;
    font-weight: 800;
  }
  .hero-section-sub-heading{
    font-size: 45px;
    line-height: 45px;
  }
  .hero-section-description{
    margin-top: 1rem;
    width: 70%;
    font-weight: 500;
  }
  
  .btn-pink{
    background-color: var(--bgOrange);
    width: fit-content;
    color:white;
    padding: 0.8rem 2.3rem;
    box-shadow: 5px 5px 7px 0px #0000003f;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.5s;
    font-weight: 500;
    border: solid 3px transparent;
    position: relative;
    z-index: 1;
    user-select: none;
  }

  .btn-pink::before{
    content:"";
    position: absolute;
    background-color: #fff;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.8s;
    user-select: none;
  }

  .btn-pink:hover::before{
    transform: scaleX(1);
    user-select: none;
  }

  .btn-pink:hover{
    border: solid 3px var(--bgOrange);
    color:black;
    user-select: none;
  }

  #btn-bottom {
    display:none;
  }


  .hero-section-right{
    position: relative;
  }

  .absolute{
    position: absolute;
  }
   .user-image img{
    z-index:-9;
   }
   .user-image {
    padding: 2.5rem;
    filter: grayscale(1);
    transition: all 1s;
    animation: scaleImage 4s linear infinite;
    
}

@keyframes scaleImage {
    0% {
        filter: grayscale(0);
        transform: scale(1) 
    }
    50% {
        transform: scale(1.1); 
        filter: grayscale(1);
        box-shadow: 3px 3px 10px black;
    }
    100% {
        transform: scale(1);
        filter: grayscale(0);
    }
}

     .icon-dots{
        z-index:9;
        bottom: -1rem;
        right:0;
        animation: dotAnimation 3s infinite;
     }
      @keyframes dotAnimation {
        0%{
            transform: translateY(0px);
        }
        50%{
            transform: translateY(-15px);
        }
        100%{
            transform: translateY(0px);
        }
      }

      .icon-cube{
        z-index:9;
        top:-0.8em;
        right:1em;
        animation: cubeRotate 3s infinite;
      }

      @keyframes cubeRotate {
        0%{
            transform: rotateY(0deg) translateY(0px);
        }
        50%{
            transform: rotateY(180deg) translateY(-12px);
        }
        100%{
            transform: rotateY(360deg) translateY(0px);
        }
    }

    .icon-circle{
        z-index: 9;
        left: 0;
        bottom: 0;
        animation: shakeEffect 6s linear infinite;
    }

    @keyframes shakeEffect {
        0%{
           left:0;
           bottom:0;
        }
        50%{
           left:5%;
           bottom:10%;
        }
        100%{
            left:0;
            bottom:0;
        }
    }

    .icon-zigzag{
        z-index: 9;
        top: 1.5em;
        left:-0.3em;
        animation: zigzagAnimation 5s ease-in infinite;
    }

    @keyframes zigzagAnimation {
        0%{
           left:0;
           bottom:0;
        }
        50%{
           left:5%;
           top:2%;
        }
        100%{
            left:0;
            bottom:0;
        }
    }

    .icons-plus{
        z-index:9;
        top:-0.8rem;
        left:50%;
        animation: shakeEffectPlus 5s ease-in infinite;
    }

    @keyframes shakeEffectPlus {
        50%{
            top:3%;
            left:48%;
        }
    }




    .project-section{
      background-color: rgb(231,231,231);
      margin-top: 4rem;
    }

    .page-header{    
        color: var(--bgOrange);
        font-size:90px;
        padding-top:30px;
        text-align : center;
    }

    .project-container{
        max-width:1200px;
        margin:0 auto;
        padding: 3rem 0;
        display:flex;
        flex-direction: column;

        gap:120px;

    }

    .project-card{
        width:90%;
        height:550px;
        background-image: url(focusmatecover.PNG);
        background-size:cover;
        
        position: relative;/*to make contents overlap on img*/
        box-shadow: 0px 0px 40px #1f1f1f;
    }


    .project-card::after{
       content :"";
       position: absolute;
      top:0;
       left:0;
       right:0;
       bottom:0;
       background-color: #1f1f1f9a;
       transform: scaleX(1);
       z-index:0;
    }
    

    .project-card::before{
        content:"";
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background: linear-gradient(45deg, #343d68 , #343d68be, #343d687c);
        transform: scaleX(0);
        transform-origin:left;
        transition: all 0.4s;
        z-index:1;
    }

    .project-card:hover::before{
        transform:scaleX(1);
    }

    .project-number{
        position: absolute;
        font-size:200px;
        font-weight: 600;
        color: white;
        z-index: 10;
        display:none;
       
    }
    .project-card:hover .project-number{
     /*when hovered the number should only display*/
       
      display: block;
      transition:1s;
    }

    .project-number-right{
        right: -40px;
        top: -45px;
    }
    .project-number-left{
        left:-40px;
        top:-45px;
    }

    .project-content{
        position:absolute;
        display:flex;
        flex-direction: column;
        color:white;

        padding:2em;
        bottom:20%;
        z-index:5;
        gap:1em;
        transition:all 0.4s;
    }

    .project-content-left{
        left:10%;
    }
    .project-content-right{
        right:10%;
    }

    .project-skills-container{
        width:60%;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }
    .project-skill{
        width:40px;
    }

    .project-heading{
        font-size:50px;
        font-weight:bold;
        line-height:3rem;
    }
    .project-subHeading{
        width:70%;
        font-size:16px;
        font-style:italic;
    }

    .btn-grp{
        display:flex;
        gap:0.9rem;
        align-items:center;
    }
    .btn-project:hover{
        border:none;
    }
    .icon{
        color:white;
        cursor:pointer;
        font-size:35px;
    }
    .icon:hover{
        color:var(--bgOrange);
        transition:0.4s;
    }

     .project-card:hover .project-content{
        transform:scale(1.05);
        transition:0.4s;
     }


     #project1{
        background-image:url(focusmatecover.PNG);
     }
     
     #project2{
        margin-left:120px;
        background-image:url(ezpaycover.PNG);
     }
     
     #project3{
        background-image:url(handmarkedcover.PNG);
     }
     
    .skills-container{
        position: relative;
        display: flex;
      
        padding:5rem;
        margin: 10rem auto;
        gap:30px;
    }

    .skill-container-left{
        display: flex;
        width:50%;
        flex-direction: column;
    }

    .skill-container-right{
        display: flex;
        width:50%;
        flex-wrap:wrap;
        gap:2rem;
        position: relative;
        z-index:-1;
    }

    .skill-fade-text{
       
        font-size:15em;
        font-style:bold;
        color: rgb(231,231,231);
        bottom:-34.5%;
        right: -25%;
        user-select: none;
        position: absolute;
        overflow-y: hidden;
    }   

    .blob-style{
        position: absolute;
        top:50%;
        left:50%;
       
        transform: translate(-50%,-50%);
        animation: blobAnimate 3s linear infinite;
        z-index:-1;
    }

    @keyframes blobAnimate {
        50%{
            top:54%;
            left:46%;
        }  
    }
    .skills-logo {
        width: 90px;
        transition: all 0.5s;
    }

    .skills-logo:hover {
        transform: scale(1.3);
    }
    .skill-heading{
        font-size:50px;
        font-style:bold;
        color:var(--bgOrange);
        line-height:50px;
    }
    .caps{
        font-size:90px;
    }

    .skil-subHeading{
        margin-top:1rem;
        width:85%;
        text-align:justify;
    }

    .skill-subheading p{
        margin:15px 0;
    }

    .contactus-form-container{
        width:100%;
        background-color: rgb(231,231,231);

    }

    .contactus-heading{
        color:var(--bgOrange);
        font-size:5em;
        padding-top:2rem;
    }

    .contactus-sub-heading{
        font-size:3rem;
        color:#343d68aa;
        text-transform:capitalize;
    }

    .contactus-form-container{
        margin-top:25px;
        display:flex;
        align-items:center;
        justify-content: center;
    }

    .form{
        display: flex;
        flex-direction: column;
        gap:30px;
        width:70%;
        margin: 2rem 5rem;
    }
    .formfield-container{
        width:100%;
        
    }
    .formfield{
        width: 100%;
        height: 42px;
        padding: 0 2rem;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #1f1f1f;
        font-weight:500;
        border:none;
        margin:17px;
    }

    .formfield-textarea{
        height:auto;
        padding-top:1rem;
    }

    
    #submit-btn{
        border:none;
        font-size:1.4rem;
        margin: 1rem 0;
    }

     #submit-btn:hover{
        scale:0.9;
    } 

    .submit-icon{
        padding:0 1rem;
        font-size: 1.5rem;
    }
    .btn-pink:hover{
        transform:translateY(3px);
        transition:0.4s;
    }

    footer{
        position:relative;
        margin-top: -1px;
        background-color:  #343d68;
        padding: 5rem;
    
    }

    .footer-wrapper{
        display:flex;
        gap:1rem;
        padding: 1.2rem;
        justify-content : space-between;
        align-items:center;
    }

    .footer-faded-text{
        position:absolute;
        left:0;
        bottom:0;
        color:#535c87; 
        user-select:none;
        font-size:5em;   
    }

    .link-wrapper{
        display:flex;
        gap:1.2rem;
    }
    .link-wrapper div a{
        color:white;
        text-decoration:none;
    }
 
    .link-wrapper div a:hover{
        color:var(--bgOrange);
        transition:0.4s;
       
    }

    .icon-wrapper{
        display:flex;
        gap:1rem;
    }