/* width */
::-webkit-scrollbar {
    width: 4px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(94, 94, 94, 0.1); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--highlight); 
  }

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /* outline: 1px solid#53c925; */
}
:root{
    --dark: #121314;
    --over-dark: hsl(232,11%,15%);
    --light: #dadada;
    --highlight: #1e88e5;
    --features: #ffbc2b;
    --primary-font: 'Mulish', sans-serif;
    --secondary-font: 'Mulish', sans-serif;
}
body{
    background-color: var(--light);
    color: var(--dark);
    font-family: var(--secondary-font);
    font-size: 1.125rem;
}
hr{
    width: 80px;
    margin: 1.5rem 0;
    border: 0.5px solid #4d4d4d;
}
.center-m{
    margin-left: auto ;
    margin-right: auto;
}
h1, h2, h3, h4, h5, h6{
    letter-spacing: 0;
    font-family: var(--primary-font);
}
a{
    text-decoration: none;
}
p{
    line-height: 1.5;
}
.dark-mode{
    color: var(--light);
    background-color: var(--dark);
}

/* back to top */

#backToTop {
    display: none;
    width: 50px;
    aspect-ratio: 1/1;
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--highlight); /* Set a background color */
    color: var(--light); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 100px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #backToTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }
  
 /* Navbar style */
.navbar{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem 2rem;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--light);
    justify-content: space-between;
    align-items: center;
}
.btn-light-dark{
    width: 80px;
    padding: 2px;
    border-radius: 80px;
    color: var(--light);
    border: none;
    /* aspect-ratio: 1/1; */
    outline: 0.2px solid #3d3d3d;
    background-color: transparent;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    background-color: var(--dark);
}
.btn-light-dark:hover{
    color: var(--features);
}
#icon{
    padding: 8px;
    width: 34px;
    border-radius: 20px;
    background-color: rgba(205, 205, 205, 0.1);
    aspect-ratio: 1/1;
    position: relative;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease;
}
.slide{
    background-color: var(--features) !important;
    color: var(--dark);
}
.logo{
    font-weight: 800;
}
.logo a{
    color: #fff;
    cursor: pointer;
}
.logo span{
    color: var(--highlight);
}
.nav{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.navlist{
    display: flex;
    gap: 1rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    list-style: none;
    justify-content: end;
    font-size: 0.8rem;
}
.navlist a{
    color: var(--light);
}
.navitem a:hover{
    color: var(--highlight);
}
.active{
    color: var(--highlight) !important;
}
.fixed{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
}
#collapsed{
    display: none;
    font-size: 1.5rem;
    color: var(--light);
}
/* Header styles */
.header-wrap{
    width: 100%;
    padding: 150px 0 100px 0;
    background-color: #181818;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='450' preserveAspectRatio='none' viewBox='0 0 1440 450'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3crect width='1440' height='450' x='0' y='0' fill='url(%23SvgjsLinearGradient1009)'%3e%3c/rect%3e%3cpath d='M59 450L509 0L965 0L515 450z' fill='url(%23SvgjsLinearGradient1010)'%3e%3c/path%3e%3cpath d='M320.8 450L770.8 0L889.3 0L439.3 450z' fill='url(%23SvgjsLinearGradient1010)'%3e%3c/path%3e%3cpath d='M660.6 450L1110.6 0L1329.6 0L879.6 450z' fill='url(%23SvgjsLinearGradient1010)'%3e%3c/path%3e%3cpath d='M1432 450L982 0L653.5 0L1103.5 450z' fill='url(%23SvgjsLinearGradient1011)'%3e%3c/path%3e%3cpath d='M1095.2 450L645.2 0L400.70000000000005 0L850.7 450z' fill='url(%23SvgjsLinearGradient1011)'%3e%3c/path%3e%3cpath d='M786.4 450L336.4 0L-109.10000000000002 0L340.9 450z' fill='url(%23SvgjsLinearGradient1011)'%3e%3c/path%3e%3cpath d='M1004.2970237076108 450L1440 14.297023707610833L1440 450z' fill='url(%23SvgjsLinearGradient1010)'%3e%3c/path%3e%3cpath d='M0 450L435.70297629238917 450L 0 14.297023707610833z' fill='url(%23SvgjsLinearGradient1011)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1440' height='450' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='17.19%25' y1='-55%25' x2='82.81%25' y2='155%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1009'%3e%3cstop stop-color='rgba(3%2c 22%2c 37%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(55%2c 9%2c 54%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1010'%3e%3cstop stop-color='rgba(82%2c 60%2c 174%2c 0.12)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(82%2c 60%2c 174%2c 0.12)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1011'%3e%3cstop stop-color='rgba(82%2c 60%2c 174%2c 0.12)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(82%2c 60%2c 174%2c 0.12)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-repeat: no-repeat;
}
.container{
    max-width: 1200px;
    padding: 0 1rem;
    margin: 0 auto;
}
.header{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    color: var(--light);
}
.social-links{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    gap: 1rem;
    bottom: -20px;
    left: 0;
    mix-blend-mode: normal;
}
.my-name{
    font-size: 2.5rem;
}
.link{
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 6px;
    aspect-ratio: 1/1;
    background-color: var(--highlight);
    outline: 1px solid var(--highlight);
    color: var(--dark);
    padding: 1rem;
    cursor: pointer;
    overflow: hidden;
    transition: 0.8s ease;
    font-size: 18px;
}
.link:hover{
    color: var(--highlight);
    background-color: var(--dark);
}
.greeting{
    font-weight: 200;
    font-size: 1.5rem;
}
.my-avatar{
    width: 125px;
    aspect-ratio: 1/1;
    border-radius: 100px;
    outline: 10px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.1rem;
}
.heading{
    text-align: center;
    font-weight: 800;
    margin-bottom: 1rem;
}
.input-cursor {
    display: inline-block;
    width: 2px;
    height: 15px;
    /* color: ; */
    background-color: white;
    margin-left: 8px;
    animation: blink .6s linear infinite;
}
@keyframes blink {
    0%{
        opacity: 1;
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
/* about sec styles */
.about-wrap{
    padding: 100px 0;
    width: 100%;
}
.info{
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.text-wrap{
    width: 65%;
    padding: 0 1.5rem;
    text-align: justify;
}
.highlight{
    color: var(--highlight);
}
.details{
    color: var(--light);
    border-radius: 5px;
    overflow: hidden;
    width: 30%;
    overflow: hidden;
    background-color: var(--over-dark);
}
.d-text{
    position: relative;
    padding: 1.3rem;
    z-index: 2;
}
.details img{
    z-index: -1;
    position: absolute;
    width: 500px;
    left: 0;
    top: 0;
    mix-blend-mode: lighten;
    filter: blur(1.5px);
    opacity: 0.15;
}
.details h1{
    margin-bottom: 1.5rem;
    font-weight: 400;
}
.details p{
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
}
.details i{
    font-size: 1.2rem;
}
 /* Task sec */

.task-sec{
    padding: 2rem 3.5rem;
    text-align: center;
    background-color: var(--dark);
    color: var(--light);
}
.task-heading{
    margin-bottom: 0.5rem;
}
.task-sub-heading{
    margin-bottom: 1.2rem;
}
.task-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}
.task{
    width: 21.875rem;
    flex: 1;
    height: 100%;
    background-color: var(--over-dark);
    /* border: 0.1px solid #3d3d3e; */
    color: var(--light);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
.preview{
    object-fit: contain;
    background-size: cover;
    overflow: hidden;
}
.preview-img{
    aspect-ratio: 16/9;
    width: max(350px);
}
.task:hover{
    cursor: pointer;
}
.task:hover > .preview > .preview-img{
    transform: scale(1.1);
    transition: 1s ease;
}
.task-title{
    color: var(--highlight);
}
.task-desc{
    font-weight: 100;
    font-size: 0.8rem;
    line-height: 1.5;
}
.desc{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}
.task-date{
    margin-top: 0.5rem;
    color: #78788c;
    font-size: 0.9rem;
}

.used-technology{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
}
.used-tools{
    font-size: 0.8rem;
    color: var(--features);
}
/* Responsive */

@media(max-width:360px){
    .task{
        width: 15rem;
    }
    .preview-img{
        margin: 0 auto;
        width: 15rem;
    }
    .task-date{
        color: #78788c;
        font-size: 0.9rem;
    }
    .duration{
        font-size: 0.75rem;
    }
  }
  footer{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1596%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsLinearGradient1597)'%3e%3c/rect%3e%3cpath d='M751.69 602.02C859 598.51 926.25 443.65 1146.49 432.98 1366.74 422.31 1428.08 216.6 1541.3 208.98' stroke='rgba(108%2c 51%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M438.11 619.17C584.95 566.43 604.77 142.1 824.13 128.76 1043.5 115.42 1017.15 198.76 1210.16 198.76 1403.17 198.76 1498.1 129.04 1596.18 128.76' stroke='rgba(108%2c 51%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M533.7 599.29C699.89 561.92 771.64 123.76 1020.54 122.61 1269.44 121.46 1368.63 382.68 1507.38 391.41' stroke='rgba(108%2c 51%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M445.75 620.95C566.74 588.66 526.67 255.49 787.39 254.66 1048.1 253.83 1294.42 426.91 1470.66 428.26' stroke='rgba(108%2c 51%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M747.26 652.41C873.65 648.39 960.86 462.7 1212.98 455.06 1465.09 447.42 1552.96 268.29 1678.69 264.66' stroke='rgba(108%2c 51%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1596'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='15.28%25' y1='-39.29%25' x2='84.72%25' y2='139.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1597'%3e%3cstop stop-color='rgba(0%2c 18%2c 40%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(71%2c 14%2c 68%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    color: var(--light);
  }
  .f-top{
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  .f-top-details{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  .f-socials{
    background-color: rgba(0, 0, 0, 0.45);
  }
  .f-down{
    width: 100%;
    padding: 1rem;
    /* border-top: 0.2px solid #4b4b4b; */
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
  }
  .f-link{
    color: var(--light);
    transition: 0.8s ease;
  }
  .f-link:hover{
    color: var(--highlight);
  }
  .btn{
    width: 150px;
    padding: 0.8rem;
    border-radius: 5px;
    font-weight: 700;
  }

  .btn-dark{
    background-color: var(--features);
    color: var(--dark);
    transition: 0.8s ease;
  }
  .btn-dark:hover{
    background-color: var(--highlight);
    color: var(--light);
  }

 /* media queries */
@media(max-width:1135px){
    .about-wrap{
        justify-content: center;
        gap: 2rem;
    }
    .details p{
        font-size: 0.9rem;
    }
}
@media (max-width: 1049px) {
    .details img{
        width: 800px;
        top: -150px;
    }
    .details p{
        font-size: 1rem;
    }
}
@media (max-width:990px) {
    .info{
        gap: 2rem;
    }
    .text-wrap, .details{
        width: 100%;
    }
}
@media (max-width:320px) {
    .details p{
        font-size: 0.8rem;
    }
}
@media(max-width:547px) {
    .header{
        text-align: center;
        gap: 1.5rem;
    }
}
@media(max-width:680px){
    /* .navbar{
        justify-content: space-between;
    } */
    #collapsed{
        display: block;
    }
    .nav{
        position: absolute;
        flex-direction: column;
        width: 100%;
        height: 300px;
        top: -300px;
        left: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: -5;
        padding: 1rem 1rem 2rem 1rem;
      }
      .navlist{
        height: 300px;
        padding: 60px 0 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-5-3 23:54:11
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-top-1
 * ----------------------------------------
 */
 .fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tilt-in-top-1 {
	-webkit-animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }
  @keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }