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

html{
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
    overflow-x: hidden;
    background-color: #F0F2F5;
}

.btn-color{
    background-color: #18d26e;
}

/* Navbar  */
.logo{
    animation: uptodown 1s linear 1;
    animation-delay: .15s;
    animation-fill-mode: forwards;
    visibility: hidden;
}
.navmenu{
    animation: uptodown 1s linear 1;
    animation-delay: .25s;
    animation-fill-mode: forwards;
    visibility: hidden; 
}
.resume{
    animation: uptodown 1s linear 1;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    visibility: hidden; 
}
@keyframes uptodown {
0%{
    transform: translateY(-100px);
    visibility: visible;
}    
100%{
    transform: translateY(0);
    visibility: visible;
}    
}

/* Intro Part  */
.profile-pic-section{
position: relative;
width: 200px;
height: 200px;
}
.profile-pic{
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: url(../images/img.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

animation: profilescale 2s linear 1;
animation-delay: .25s;
animation-fill-mode: forwards;
visibility: hidden; 
}

@keyframes profilescale {
    0%{
        transform:scale(0.5);
        visibility: visible;
    }    
    100%{
        transform:scale(1);
        visibility: visible;
    }    
    }
.profile-pic-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/paper.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    mix-blend-mode: lighten;
    filter: brightness(1.1);
}
#banner-profile {
    background-image: linear-gradient(180deg, rgb(21 48 48 / 84%), rgb(108 114 121 / 74%)), url(../images/banner-top.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.intro-section,.contact-section-form {
    position: relative;
    z-index: 1;
}

.card-intro,.contact-intro {
    position: relative;
    border-radius: 10px;
}
.card-intro::before,
.contact-intro::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: -8px;
    right: 1px;
    border-radius: 10px;
    background: rgb(29, 153, 172);
    background: linear-gradient(90deg, rgba(29, 153, 172, 0.6979166666666667) 0%, rgba(9, 113, 121, 1) 35%, rgba(47, 158, 120, 1) 100%);
    /* box-shadow: 5px 5px 15px 5px #000000; */
    transform: rotate(-6deg);
}

/* Projects Section  */
.thumbnail-div{
    overflow:hidden;
    overflow-y: scroll;
    height: 400px;
    scroll-behavior: smooth;
}
.project-thumbnail {
    width: 100%;
}

/* .project-thumbnail {
    object-fit: cover;
    object-position: top;
    transition: 15s;
    transition-delay: 0.1s;
    transition-timing-function: ease-in-out;
    transform: scale3d(0.9, 0.9, 0.5);
} */

/* .single-project:hover .project-thumbnail,
.thumbnail-div:hover .project-thumbnail {
    object-position: bottom;
    /* transform: skew(1deg) scale3d(1.4, 1.2, 2.3) rotate3d(1, 0, 0, 30deg); */
    /* transform: scale3d(1.1, 1, 2); 
} */


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
#contact-section{
    position: relative;
    background-image: linear-gradient(187deg,rgb(0 0 0 / 95%) 34%,rgba(33, 71, 128, 0.95)),url('../images/contact-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    /* background-attachment: fixed; */
}
.contact-section-title{
    position: relative;
    display: flex;
    justify-content: center;
}

.contact-section-title h1{
    position: absolute;
    font-size: 3em;
}
.contact-section-title h1:nth-child(1){
    color: transparent;
    -webkit-text-stroke: 3px #02131b;
}
.contact-section-title h1:nth-child(2){
    color:#0b6792;
    animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
    0%,100%{
        /* clip-path: polygon(27% 69%, 45% 75%, 69% 72%, 85% 62%, 100% 44%, 100% 100%, 0 100%, 0 1%, 7% 32%, 15% 54%); */
        clip-path: polygon(40% 61%, 59% 56%, 74% 40%, 83% 24%, 100% 0, 100% 100%, 0 100%, 0 66%, 11% 56%, 25% 61%);


    }
    50%{
        clip-path: polygon(52% 47%, 56% 60%, 68% 75%, 82% 79%, 100% 74%, 100% 100%, 0 100%, 0 0, 15% 15%, 40% 30%);
    }
}

.info-box {
    color: #444444;
    padding: 20px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
  }
.info-box i.bx {
    font-size: 24px;
    color: #18d26e;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 14px;
    float: left;
    background: rgba(255, 255, 255, 0.1);
  }
  
.info-box h3 {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    margin: 10px 0 8px 68px;
  }
.info-box p {
    padding: 0;
    color: #fff;
    line-height: 24px;
    font-size: 14px;
    margin: 0 0 0 68px;
  }
.info-box .social-links , .btn-social{
    margin: 5px 0 0 68px;
    display: flex;
  }
.info-box .social-links a {
    font-size: 18px;
    display: inline-block;
    color: #fff;
    line-height: 1;
    margin-right: 12px;
    transition: 0.3s;
  }
  .info-box .social-links a:hover, .btn-social:hover{
    color: #18d26e;
  }

  /* Footer Part  */
  .bg-footer {
    background: linear-gradient( 360deg,rgb(24 35 52) 34%,rgba(33, 71, 128, 0.95));
}