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



body::-webkit-scrollbar {
    display: none;
  }


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-size: 4rem;
    font-weight: 550;
    color: #424040;
}

h2 {
    font-size: 2.9rem;
    width: 100%;
    font-weight: 450;
    color: #efebeb;
}

h3 {
    font-size: 2.1rem;
    font-weight: 400;
    margin: 12px 0 ;
    color: #efebeb;
}

.title-container {
  
    height: 100vh;
    width: 100vw;
    max-width:1650px;
    display: flex;
    justify-content: center;
    
    flex-direction: column;
    padding: 0 20px;
}

.title-heading{
    margin-bottom: 120px;
   
    color: rgb(255, 255, 255);
    width: 100%;
    box-sizing: border-box;
    font-size: 4.8rem !important;
}

.sub-heading{
    color: rgb(255, 255, 255);
    font-size: 1.7rem !important;
    margin-left: 300px;
    align-self: flex-end;
    opacity: 0;
    animation: fade-to-top-animation 1s 0.9s 1 forwards;

}

.heading-dot{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left:8px;
    margin-bottom: -5px;
    opacity: 0;
    background: #e3e9b1;

    animation: scale-animation 0.5s 0.5s 1 forwards;
}

.underline{
   border-bottom: 3px solid #e3e9b1;
}

.text-left{
    text-align: left;
   
}

.hero-top-circle {

    z-index: -1;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    clip-path: circle(35% );

    width: 60%;
    min-height: 1330px;
    background: linear-gradient(90deg, #53d79a 0%, #46d2a2 25%, #39cdaa 50%, #2dc8b2 75%, #00b8d4 100%);
   
}

.about-circle {

    z-index: -1;

    position: absolute;
    top: 60%;
    left: 11%;

    transform: translate(-50%, -50%);
    clip-path: circle(25% );

    width: 50%;
    min-height: 1330px;
    background: linear-gradient(90deg, #53d79a 0%, #46d2a2 25%, #39cdaa 50%, #2dc8b2 75%, #00b8d4 100%);
   

}

.about-circle-2 {

    z-index: -1;

    position: absolute;
    top: 10%;
    right: -7%;

    clip-path: circle(14% );

    width: 40%;
    min-height: 1330px;
    background: linear-gradient(90deg, #53d79a 0%, #46d2a2 25%, #39cdaa 50%, #2dc8b2 75%, #00b8d4 100%);
   

}



.hero-section-decor{

    z-index: -1;

    position: absolute;
    top: 22%;
    right: -100px;


    rotate: 90deg;
    opacity: 0;
    animation: fade-to-top-animation 1.5s 0.5s 1 forwards;

    width: 500px;
   
}

.about-section-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
     animation: fade-to-top-animation 1.5s forwards;
    animation-timeline: view(); 
    animation-range: entry 50% cover 60%; 

}



body {
    font-size: 60%;
    background: #141615;
}

.hero-section, .about-section, .project-section, .project-card-container, footer{
    max-width: 1650px;
    
}
   
.hero-section{
    display: flex;
    align-items: center;
    width: 100vw;
}

.about-section > div{
    flex-grow: 1;
    width: 50%;
}

.about-section-content .section-text{
    color: #efebeb;
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.8;
}

.title-container, .about-section, .project-section, footer{
    min-width: 100vw;
    display: flex;
    padding: 0 350px;
}

.title-container{
    height: 100vh;
    justify-content: center;
    flex-direction: column;
}

.about-section{
    height: 60vh;
    width: 100vw;
    position: relative;
    margin-top: 200px;
}

.about-section-list-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 20px ;
}

.tech-card{
    border: 2px solid #919191;
    border-radius: 8px;

    display: flex;
    align-items: center;
    width: fit-content;

    padding: 6px 18px;
}

.tech-card .icon{
    width: 25px;
    height: 25px;
}

.tech-card .icon.tailwind{
    width: auto;
    height: 16px;
    
}

.tech-name{
    color: #efebeb;
    font-size: 1rem;
    margin-left: 10px;

}

.about-section-list{
    display: flex;
    flex-wrap: wrap;
   gap: 15px;
}

.project-section{
   flex-direction: column;
    margin-top: 200px;
}

.project-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% / 3 - 40px);
  
    border-radius: 8px;
    border: 0.3em solid #53d79a;

    background: #1f1f1f;
    padding: 20px;
    padding-top: 90px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: 0.3s;

    animation: color-change-animation linear;
    animation-timeline: view();
    animation-range: 0 50%;
}

.project-card:hover{
    transform: translateY(10px);
    box-shadow: 0 0 20px rgba(67, 183, 178, 0.3);
}

.project-card:hover .project-card-circle-decor{
    width: 200px;
    min-height: 180px;
}

.project-card-container{
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

}

.project-card-circle-decor {
    position: absolute;
    top: -20%;
    left: -15%;
    transition: 0.4s;

    clip-path: circle(34% );

    width: 180px;
    min-height: 150px;
    background: linear-gradient(90deg, #53d79a 0%, #46d2a2 25%, #39cdaa 50%, #2dc8b2 75%, #00b8d4 100%);

}

.project-card .project-card-text{
    color: #efebeb;
    font-size: 1rem;
    margin-bottom: 30px;
}

.project-btn{
    background: transparent;
    color: #141615;
    padding: 10px 20px;
    border-radius: 8px;
    border: 0.1em solid #76bca6;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 25px;

    text-decoration: none;
    color: rgb(242, 242, 242);
    font-weight: 500;
}

.project-btn[disabled], .project-btn[disabled]:hover{
    background: #141615;
    color: #919191;
    border: 0.1em solid #919191;
    cursor: not-allowed;
}

.project-btn:hover{
    background: #19d7ae;
    border: 0.1em solid #19d7ae;

    color: #ffffff;
}

footer{
    margin-top: 50px;
    margin-bottom: 30px;
    min-width: 100%;

    display: flex;
    justify-content: flex-end;

}

footer a{
    color: #ffffff;
    text-decoration: none;
}

.footer-content{
    border-right: 2px solid #39cdaa;
    padding-right: 10px;
    margin-right: 80px;
   
    text-align: right;

    font-size: 1.1rem;
    color: white;
}