/* 
*{
    margin: 0;
    padding: 0;
} */

body{
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    background-color: rgb(21, 20, 20);
}

#header{
    background-color: black;
    position: fixed;
    width: 100%;
}
#header #nav{
    /* position: sticky; */
    padding: 12px 150px;
    display: flex;
    /* justify-content: space-between; */
    text-decoration: none;
    width: 100%;
}
#header #nav li{

    padding: 20px 74px;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
}
#header #nav a{
color: #ffffff;
text-decoration: none;
font-weight: 600;
}
#header #nav a:hover{
    text-decoration: underline solid 2px;
    color: #29abe2;
    transition: 0.3s ease-in-out;
    transform: 0.3s ease-in-out;
}

/* home */

#home{
    background-color: rgb(21, 20, 20);
    /* position: sticky; */
    z-index: 999;
    /* padding: 20px 24px; */
    height: 100vh;
    padding-top: 20vh;
    display: flex;

}

#home .one{
    width: 50%;
    padding: 40px 84px;
}
#home .one h1{
 
    color: #ffffff;
    font-size: 3rem;
}
#home .one h2{
 
    /* color: #29abe2; */
    font-size: 28px;
}
#home .one .text-animation{
    font-size: 30px;
    font-weight: 600;
    min-width: 280px;
}
#home .one .text-animation span{
    position: relative;
}
#home .one .text-animation span::before{
    content: "Web Developer";
    color: #29abe2;
    animation: words 20s infinite;
}
#home .one .text-animation span::after{
    content: "";
    background-color: var(--#29abe2);
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    border-left: 3px solid var(--#29abe2);
    right: -8px;
    animation: cursor 0.6s infinite,I typing 20s steps(14) infinite;
}
@keyframes typing {
     
    0.0000%, 27.3488% { content: ""; }
    1.1395%, 26.2093% { content: "U"; }
    2.2791%, 25.0698% { content: "UI"; }
    3.4186%, 23.9302% { content: "UI /"; }
    4.5581%, 22.7907% { content: "UI / U"; }
    5.6977%, 21.6512% { content: "UI / UX"; }
    6.8372%, 20.5116% { content: "UI / UX D"; }
    7.9767%, 19.3721% { content: "UI / UX De"; }
    9.1163%, 18.2326% { content: "UI / UX Desig"; }
    10.2558%, 17.0930% { content: "UI / UX Designer"; }
  
    30.7674%, 51.2791% { content: ""; }
    31.9070%, 50.1395% { content: "F"; }
    33.0465%, 49.0000% { content: "Fr"; }
    34.1860%, 47.8605% { content: "Fron"; }
    35.3256%, 46.7209% { content: "Front"; }
    36.4651%, 45.5814% { content: "Fronted"; }
    37.6047%, 44.4419% { content: "Fronted Designer"; }
  
  
    54.6977%, 75.2093% { content: ""; }
    55.8372%, 74.0698% { content: "W"; }
    56.9767%, 72.9302% { content: "We"; }
    58.1163%, 71.7907% { content: "Web"; }
    59.2558%, 70.6512% { content: "Web De"; }
    60.3953%, 69.5116% { content: "Web Desi"; }
    61.5349%, 68.3721% { content: "Web Designer"; }
  
    /* 54.6977%, 75.2093% { content: ""; }
    55.8372%, 74.0698% { content: "T"; }
    56.9767%, 72.9302% { content: "Tr"; }
    58.1163%, 71.7907% { content: "Tra"; }
    59.2558%, 70.6512% { content: "Trasc"; }
    60.3953%, 69.5116% { content: "Trascri"; }
    61.5349%, 68.3721% { content: "Trascripter"; } */
  
    78.6279%, 96.8605% { content: "Full Stuck"; }
    79.7674%, 95.7209% { content: "Full Stuck W"; }
    80.9070%, 94.5814% { content: "Full Stuck We"; }
    82.0465%, 93.4419% { content: "Full Stuck Web"; }
    83.1860%, 92.3023% { content: "Full Stuck Web deve"; }
    84.3256%, 91.1628% { content: "Full Stuck Web developer"; }


  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .typewriter {
    --caret: currentcolor;
  }
  
  .typewriter::before {
    content: "";
    animation: typing 13.5s infinite;
  }
  
  .typewriter::after {
    content: "";
    border-right: 1px solid var(--caret);
    animation: blink 0.5s linear infinite;
  }
  
  .typewriter.thick::after {
    border-right: 1ch solid var(--caret);
  }
  
  .typewriter.nocaret::after {
    border-right: 0;
  }
  

#home .one p{
 
    /* color: black;
    font-size: 24px; */
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.8;
    max-width: 1000px;
    color: #ffffff;
}
#home .one button{
 
  color: white;
  padding: 10px 15px;
  background-color: #29abe2;
  border: none;
  border-radius: 20px;
  margin-left: 44px;
  margin-top: 24px;
  width: 30%;
  cursor: pointer;
}
#home .one button:hover{
    box-shadow: 0 0 25px #29abe2;
    box-shadow: 0 0 50px #29abe2;
    box-shadow: 0 0 100px #29abe2;
}
#home .one button a{
   text-decoration: none;
   color: white;
}

#home .one .social-icons a{
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: 2px solid #29abe2;
    font-size: 2.5rem;
    border-radius: 50%;
    color: #ffffff;
    margin: 3rem 1rem 3rem 0;
    transition: 0.3s ease-in-out;
    margin-left: 2rem;
    box-shadow: 0 0 25px #29abe2;
}
#home .one .social-icons a:hover{
 /* color: #ffffff; */
 transform: scale(1.3)translate(-5px);
 box-shadow: 0 0 25px #29abe2;
 background-color: #29abe2;
}

#home .two{
    width: 50%;
    padding: 20px 24px;
}
#home .two img{
    /* border-radius: 600px;
    height: 70vh;
    padding: 20px 24px; */
    /* position: relative; */
    top: 3rem;
    width: 32vw;
    border-radius: 60%;
    box-shadow: 0 0 25px #29abe2;
    cursor: pointer;
    transition: 0.4s ease-in-out;
}
#home .two img:hover{

    box-shadow: 0 0 25px #29abe2;
    box-shadow: 0 0 50px #29abe2;
    box-shadow: 0 0 100px #29abe2;
}


@media (max-width:820px) {
    
    #header #nav li {
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
    }
    #home .one button {
        color: white;
        padding: 18px 24px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        margin-left: 12px;
        margin-top: 24px;
        width: 100%;
        cursor: pointer;
    }
    #home .two img {
        border-radius: 600px;
        height: 70vh;
        padding: 20px 24px;
        width: 100%;
    }
    div {
        display: block;
        unicode-bidi: isolate;
    }


}

/* about */

#about{
    justify-content: center;
    align-items: center;
    background-color: rgb(21, 20, 20);
    padding: 20px 24px;
    padding-bottom: 0;
    text-align: center;
    margin-bottom: 0;
    height: 100%;
}

#about .all{
    justify-content: center;
    align-items: center;
    text-align: center;
}
#about .all h1{
   margin-top: 20vh;
   color: white;
   font-size: 3rem;
}
#about .all img{
  width: 10%;
  /* margin-top: 20vh; */
  border-radius: 600px;
  height: 10%;
}
#about .all h2{
    color: #29abe2;
}
#about .all p{
    color: #ffffff;
   width: 60%;
   margin-left: 30vh;
   /* padding: 20px 344px; */
}
#about .all button{
    color: white;
  padding: 18px 24px;
  background-color: #29abe2;
  border: none;
  border-radius: 20px;
  width: 10%;
  cursor: pointer;
  margin-top:2vh;
  margin-bottom: 2vh;
}
#about .all button a{
    text-decoration: none;
    color: white;   

}
#about .social-icons a{
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    width: 3rem;
    height: 3rem;
    box-shadow: 0 0 25px #29abe2;
    background: transparent;
    border: 2px solid #29abe2;
    font-size: 2.5rem;
    border-radius: 50%;
    color: #ffffff;
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease-in-out;
}
#about .social-icons a:hover{
 /* color: #ffffff; */
 transform: scale(1.3)translate(-5px);
 box-shadow: 0 0 25px #29abe2;
 background-color: #29abe2;
}


@media (max-width:820px) {

    #about .all p {
        width: 80%;
        margin-left: 10vh;
        /* padding: 20px 344px; */
    }
    #about .all button {
        color: white;
        padding: 18px 24px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        width: 10%;
        cursor: pointer;
        margin-top: 2vh;
        width: 30%;
    }

}

/* enducation */

.heading{
    font-size: 4rem;
    text-align: center;
    margin-top: -2rem ;
    color: white;
}
.education{
    padding: 100px 15px;
    background: var(rgb(21, 20, 20));
}
.education h2{
    margin-bottom: 5rem;
}
.timeline-items{
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    
}
.timeline-items::before{
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: #29abe2;
    left: calc(50% - 1px);
}
.timeline-item{
    margin-bottom: 10px;
    width: 100%;
    position: relative;
}
.timeline-item:nth-child(){
 margin-bottom: 0;
}
.timeline-item:nth-child(old){
    padding-right: calc(50% + 30px);
    text-align: right;
}
.timeline-item:nth-child(even){
    padding-right: calc(50% + 30px);
}
.timeline-dot{
    height: 21px;
    width: 18px;
    background-color: #29abe2;
    box-shadow: 0 0 25px #29abe2;
    box-shadow: 0 0 50px #29abe2;
    position: absolute;
    left: calc(50% - 8px);
    border-radius: 50%;
    top: 10px;
}
.timeline-dot2{
    height: 21px;
    width: 18px;
    background-color: #29abe2;
    box-shadow: 0 0 25px #29abe2;
    box-shadow: 0 0 50px #29abe2;
    position: absolute;
    left: calc(50% - 8px);
    border-radius: 50%;
    top: 10px;
}
.timeline-date{
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin: 6px 0 15px;
    margin-left: 5rem;
    top: 8px;
}
.timeline-date2{
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin: 6px 0 15px;
    margin-left: 530px;
    top: 8px;
}
.timeline-content1{
    background-color: black;
    border: 3px solid #29abe2;
    padding: 30px 50px;
    border-radius: 4rem;
    box-shadow: 0 0 10px #29abe2;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    width: 80vh;
    margin-left: 39rem;
    position: relative;
}
.timeline-content{
    background-color: black;
    border: 3px solid #29abe2;
    padding: 30px 50px;
    border-radius: 4rem;
    box-shadow: 0 0 10px #29abe2;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.timeline-content1:hover{
    transform: scale(1.05);
    box-shadow: 0 0 25px #29abe2;
}
.timeline-content:hover{
    transform: scale(1.05);
    box-shadow: 0 0 25px #29abe2;
}
.timeline-content1 h3{
    font-size: 20px;
    color: white;
    margin: 0 0 10px;
    font-weight: 300;
    line-height: 22px;
}

.timeline-content1 p{
    color: white;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}
.timeline-content h3{
    font-size: 20px;
    color: white;
    margin: 0 0 10px;
    font-weight: 300;
    line-height: 22px;
}

.timeline-content p{
    color: white;
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}

::-webkit-scrollbar{
    width: 3px;
}
::-webkit-scrollbar-track{
    background-color: #29abe2;
}
::-webkit-scrollbar-thumb{
    background-color: black;
    width: 100%;
}






#education{
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 150px;
  background-color: rgb(21, 20, 20);
  
}

#education .all{
    justify-content: center;
  align-items: center;
  text-align: center;
}
#education .all h1{
    color: #ffffff;
}
#education .all img{
    width: 10%;
    /* margin-top: 20vh; */
    border-radius: 600px;
    height: 10%;
}
#education .all .endu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

#education .all .endu .endu1{
    border-color: #29abe2;
    /* justify-content: center;
    align-items: center;
    text-align: center; */

}
#education .all .endu .endu2{
    border-color: #29abe2;
    /* justify-content: center;
    align-items: center;
    text-align: center; */

}
#education .social-icons a{
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    width: 3rem;
    height: 3rem;
    box-shadow: 0 0 25px #29abe2;
    background: transparent;
    border: 2px solid #29abe2;
    font-size: 2.5rem;
    border-radius: 50%;
    color: #ffffff;
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease-in-out;
}
#education .social-icons a:hover{
 /* color: #ffffff; */
 transform: scale(1.3)translate(-5px);
 box-shadow: 0 0 25px #29abe2;
 background-color: #29abe2;
}



@media (max-width:820px) {
    
    .timeline-content1 {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 30px 50px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 20vh;
        margin-left: 25rem;
        position: relative;
    }
    .timeline-date {
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 6px 0 15px;
        margin-left: 24rem;
        top: 8px;
    }
    .timeline-dot {
        height: 35px;
        width: 35px;
        background-color: #29abe2;
        box-shadow: 0 0 25px #29abe2;
        box-shadow: 0 0 50px #29abe2;
        position: absolute;
        /* left: calc(50% - 8px); */
        border-radius: 50%;
        top: 10px;
        margin-left: 12rem;
    }
    #education {
        display: block;
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        padding-top: 150px;
        background-color: rgb(21, 20, 20);
    }
    .timeline-dot2 {
        height: 35px;
        width: 35px;
        background-color: #29abe2;
        box-shadow: 0 0 25px #29abe2;
        box-shadow: 0 0 50px #29abe2;
        position: absolute;
        /* left: calc(50% - 8px); */
        border-radius: 50%;
        top: 10px;
        margin-left: -1rem;
    }
    .timeline-date2 {
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 6px 0 15px;
        margin-left: 290px;
        top: 8px;
    }
    .timeline-item {
        margin-bottom: 10px;
        width: 40%;
        position: relative;
        margin-left: 2rem;
    }
}

/* contact */

#contact{
    justify-content: center;
    align-items: center;
    background-color: rgb(21, 20, 20);
    padding: 20px 24px;
    padding-bottom: 0;
    text-align: center;
    margin-bottom: 0;
    height: 100%;
}

.contact h2{
   margin-top: 6rem;
    margin-bottom: 3rem;
    color: white;
    font-size: 3rem;
}
.contact form{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin: 5rem auto;
    text-align: center;
}
.contact form .input-box{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.contact form .input-box input,
.contact form textarea{
    width: 100%;
    padding: 16px;
    font-size: 16px;
    color: var(--text-color);
    background: rgb(53, 50, 50);
    border-radius: 2rem;
    border: 2px solid #29abe2;
    margin: 1.5rem 0;
    resize: none;
}
.contact form .btn{
    margin-top: 2rem;
    color: white;
    padding: 18px 24px;
    background-color: #29abe2;
    border: none;
    width: 100%;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 0 25px #29abe2;
}
.contact .social-icons a{
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    width: 3rem;
    height: 3rem;
    box-shadow: 0 0 25px #29abe2;
    background: transparent;
    border: 2px solid #29abe2;
    font-size: 2.5rem;
    border-radius: 50%;
    color: #ffffff;
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease-in-out;
}
.contact .social-icons a:hover{

 transform: scale(1.3)translate(-5px);
 box-shadow: 0 0 25px #29abe2;
 background-color: #29abe2;
}


/* projects */

.projects{
    padding: 20px 24px;
    padding-bottom: 0;
    margin-bottom: 0;
    height: 100%;
    background-color: rgb(21, 20, 20);
}
.projects-box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    place-items: center;
    row-gap: 5rem;
    gap: 3rem;

}
.project-card{
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgb(16, 15, 15);
    border: 2px solid #29abe2;
    border-radius: 3rem;
    gap: 2rem;
    padding: 5rem 2rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 5px #29abe2;
    transition: 0.3s ease;
}
.project-card:hover{
    box-shadow: 0 0 25px #29abe2;
    box-shadow: 0 0 50px #29abe2;
    transform: scale(1.02);
}
.project-card img{
    max-width: 300px;
    border-radius: 2em;
    object-fit: cover;
}
.project-card  .c4{
    max-width: 300px;
    border-radius: 2em;
    object-fit: cover;
    height: 23vh;
}

.project-card h3{
    font-size: 2rem;
}
#projects h2{
    text-align: center;
    font-size: 3rem;
    color: #ffffff;
    padding: 20px 24px;
    margin-top: 6rem;
}
.project-card p{
    font-size: 1.6rem;
    color: rgb(194, 181, 181);
}
.project-card .btn{
 
    color: white;
    padding: 10px 15px;
    background-color: #29abe2;
    border: none;
    border-radius: 20px;
    margin-left: 44px;
    margin-top: 24px;
    width: 40%;
    cursor: pointer;
  }
  .project-card .btn:hover{
      box-shadow: 0 0 25px #29abe2;
      box-shadow: 0 0 50px #29abe2;
      box-shadow: 0 0 100px #29abe2;
  }
  .project-card .btn a{
     text-decoration: none;
     color: white;
  }
  .projects .social-icons {
    margin-left: 26rem;
  }
  .projects .social-icons a{
    display: inline-flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    box-shadow: 0 0 25px #29abe2;
    background: transparent;
    border: 2px solid #29abe2;
    font-size: 2.5rem;
    border-radius: 50%;
    color: #29abe2;
    color: #ffffff;
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease-in-out;
}
.projects .social-icons a:hover{
    /* color: #29abe2; */
 transform: scale(1.3)translate(-5px);
 box-shadow: 0 0 25px #29abe2;
 background-color: #29abe2;
}



@media (max-width:414px) {
    
    #home .two img {
        border-radius: 600px;
        height: 50vh;
        padding: 20px 24px;
        width: 430%;
    }
    #home .one button {
        color: white;
        padding: 5px 10px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        margin-left: 12px;
        margin-top: 24px;
        width: 400%;
        cursor: pointer;
        gap: 12px;
    }
    #home .one button {
        gap: 12px;
        display: inline-flex;
        color: white;
        padding: 10px 15px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        margin-left: 2px;
        margin-top: 24px;
        width: 100%;
        cursor: pointer;
        margin-bottom: 3rem;
    }
    #home .one .link{
        display: inline-flex;
    }
    #home .one .social-icons a {
        display: inline-flex;
        justify-content: center;
        text-decoration: none;
        align-items: center;
        margin-top: -2rem;
        width: 3rem;
        height: 3rem;
        background: transparent;
        border: 2px solid #29abe2;
        font-size: 2.5rem;
        border-radius: 50%;
        color: #ffffff;
        /* margin: 3rem 1rem 3rem 0; */
        transition: 0.3s ease-in-out;
        margin-left: 2rem;
        box-shadow: 0 0 25px #29abe2;
    }
    #about .all p {
        width: 100%;
        margin-left: 7vh;
        /* padding: 20px 344px; */
    }
    #about .all button {
        color: white;
        padding: 5px 10px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        width: 10%;
        cursor: pointer;
        margin-top: 6vh;
        width: 40%;
    }

    .timeline-content {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 30px 50px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 20vh;
        margin-top: 2rem;
    }
    .timeline-content1 {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 30px 50px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 20vh;
        margin-left: 10rem;
        position: relative;
        margin-top: 2rem;
    }
    .timeline-dot {
        height: 40px;
        width: 40px;
        background-color: #29abe2;
        box-shadow: 0 0 25px #29abe2;
        box-shadow: 0 0 50px #29abe2;
        position: absolute;
        /* left: calc(50% - 8px); */
        border-radius: 50%;
        top: 10px;
        margin-left: 4.5rem;
    }
    .timeline-date {
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 6px 0 15px;
        margin-left: 12rem;
        top: 8px;
    }
    .timeline-date2 {
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 6px 0 15px;
        margin-left:5rem;
        top: 8px;
    }
    .timeline-dot2 {
        height: 40px;
        width: 40px;
        background-color: #29abe2;
        box-shadow: 0 0 25px #29abe2;
        box-shadow: 0 0 50px #29abe2;
        position: absolute;
        /* left: calc(50% - 8px); */
        border-radius: 50%;
        top: 10px;
        margin-left: -2.5rem;
    }
    .project-card {
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: rgb(16, 15, 15);
        border: 2px solid #29abe2;
        border-radius: 3rem;
        gap: 2rem;
        padding: 5rem 2rem;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 5px #29abe2;
        transition: 0.3s ease;
        margin-left: 12rem;
    }
    .contact h2 {
        margin-top: 6rem;
        margin-bottom: 3rem;
        color: white;
        font-size: 3rem;
        margin-left: 4rem;
    }
    #projects h2 {
        text-align: center;
        font-size: 3rem;
        color: #ffffff;
        padding: 20px 24px;
        margin-top: 6rem;
        margin-left: 4rem;
    }
    .heading {
        font-size: 4rem;
        text-align: center;
        margin-top: -2rem;
        color: white;
        margin-left: 4rem;
    }
    #about .all h1 {
        margin-top: 25vh;
        color: white;
        font-size: 3rem;
        margin-left: 4rem;
    }
}
@media (max-width:412px) {
    #header #nav {
        /* position: sticky; */
        padding: 12px 150px;
        display: flex;
        /* justify-content: space-between; */
        text-decoration: none;
        width: 100%;
        margin-left: -9rem;
        font-size: 14px;
    }
    #header #nav li {
        padding: 20px 12px;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
    }
    #home .two img {
        border-radius: 600px;
        height: 20vh;
        padding: 20px 24px;
        width: 430%;
        margin-left: -3rem;
    }
    .timeline-content1 {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 30px 50px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 15vh;
        margin-left: 10rem;
        position: relative;
        margin-top: 2rem;
    }
    .project-card {
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: rgb(16, 15, 15);
        border: 2px solid #29abe2;
        border-radius: 3rem;
        gap: 2rem;
        padding: 5rem 2rem;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 5px #29abe2;
        transition: 0.3s ease;
        margin-left: 3rem;
    }
}


/* resposive small screens */

@media (max-width: 320px) {

    #header #nav {
        /* position: sticky; */
        padding: 2px 150px;
        display: flex;
        /* justify-content: space-between; */
        text-decoration: none;
        width: 100%;
        margin-left: -9rem;
        font-size: 8px;
    
    }
    #home .one {
        width: 50%;
        padding: 10px 12px;
        
    }
    #home .one h1 {
        color: #ffffff;
        font-size: 12px;
    }
    #home .two img {
        border-radius: 600px;
        height: 100vh;
        padding: 10px 20px;
        width: 40vh;
        margin-left: -28px;
    }
    #home .one h2 {
        /* color: #29abe2; */
        font-size: 12px;
    }
    #home .one p {
        font-size: 12px;
        font-weight: 500;
        line-height: 1.8;
        max-width: 1000px;
        color: #ffffff;
    }
   
    #home .one button a {
        text-decoration: none;
        color: white;
        font-size: 12px;
    }
    #home .one .link {
        display: block;
    }
    #home .one button {
        display: block;
        gap: 12px;
        display: inline-flex;
        color: white;
        padding: 10px 20px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        margin-left: -2px;
        margin-top: 14px;
        width: 150%;
        cursor: pointer;
        margin-bottom: 3rem;
        width: 21vh;
    }
    #about .all h1 {
        margin-top: 40vh;
        color: white;
        font-size: 2rem;
        margin-left: 4rem;
    }
    .heading {
        font-size: 2rem;
        text-align: center;
        margin-top: -2rem;
        color: white;
        margin-left: 3rem;
    }
    .timeline-dot {
        height: 40px;
        width: 40px;
        background-color: #29abe2;
        box-shadow: 0 0 25px #29abe2;
        box-shadow: 0 0 50px #29abe2;
        position: absolute;
        /* left: calc(50% - 8px); */
        border-radius: 50%;
        top: 10px;
        margin-left: 2.5rem;
    }
    .timeline-date {
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 6px 0 15px;
        margin-left: 8.5rem;
        top: 8px;
    }
    .timeline-content1 {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 30px 50px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 15vh;
        margin-left: 8rem;
        position: relative;
        margin-top: 2rem;
    }
    .timeline-date2 {
        font-size: 20px;
        font-weight: 800;
        color: white;
        margin: 6px 0 15px;
        margin-left: 2.5rem;
        top: 8px;
    }
    .timeline-content {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 20px 16px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 20vh;
        margin-top: 2rem;
        margin-left: -2rem;
    }
    #projects h2 {
        text-align: center;
        font-size: 2rem;
        color: #ffffff;
        padding: 20px 24px;
        margin-top: 6rem;
        margin-left: 4rem;
    }
    .projects {
        padding: 20px 24px;
        padding-bottom: 0;
        margin-bottom: 0;
        margin-left: -2rem;
        height: 100%;
        background-color: rgb(21, 20, 20);
    }
    .contact .social-icons a {
        display: inline-flex;
        justify-content: center;
        text-decoration: none;
        align-items: center;
        width: 2rem;
        height: 2rem;
        box-shadow: 0 0 25px #29abe2;
        background: transparent;
        border: 2px solid #29abe2;
        font-size: 1.5rem;
        border-radius: 50%;
        color: #ffffff;
        /* margin: 3rem 1.5rem 3rem 0; */
        transition: 0.3s ease-in-out;
    }
    #about .all p {
        width: 100%;
        margin-left: 1vh;
        /* padding: 20px 344px; */
    }
    
    .timeline-content1 {
        background-color: black;
        border: 3px solid #29abe2;
        padding: 10px 20px;
        border-radius: 4rem;
        box-shadow: 0 0 10px #29abe2;
        cursor: pointer;
        transition: 0.3s ease-in-out;
        width: 15vh;
        margin-left: 8rem;
        position: relative;
        margin-top: 2rem;
    }
    #home .two img {
        border-radius: 600px;
        height: 50vh;
        /* padding: 10px 20px; */
        width: 30vh;
        margin-left: -38px;
    }
    .project-card {
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: rgb(16, 15, 15);
        border: 2px solid #29abe2;
        border-radius: 3rem;
        gap: 2rem;
        padding: 5rem 2rem;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 5px #29abe2;
        transition: 0.3s ease;
        margin-left: -1rem;
        width: 48vh;
    }
    .project-card .btn {
        color: white;
        padding: 10px 10px;
        background-color: #29abe2;
        border: none;
        border-radius: 20px;
        margin-left: 44px;
        margin-top: 24px;
        width: 50%;
        cursor: pointer;

    }
    #home .two {
        width: 50%;
        padding: 10px 10px;
    }
    
}