@media (max-width: 1180px) {
    
    /* Header */
    .header>.logo {
        font-size: 20px;
        margin: 0 -7%;
    }

    .navbar{
        margin: 0 -7%;
    }

    /* Section3 */
    .section2 {
        margin-top: -15px;
    }

    .section2>h2 {
        margin-bottom: 30px;
    }

    .timeline-items {
        margin: 0 25px;
        position: relative;
    }

    .timeline-items::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 100%;
        background-color: #0ef;
        left: 10%;
        border-radius: 25px;
    }

    .odd-logo {
        left: 1.3%;
        height: 50px;
        width: 50px;
    }

    .even-logo {
        left: 5.6%;
        height: 50px;
        width: 50px;
    }

    .date-odd {
        text-align: right;
        margin-right: -25%;
    }

    .date-even {
        text-align: left;
        margin-left: 10%;
    }

    .timeline-content {
        margin: 0 15%;
        padding: auto;
    }

    .timeline-content-even {
        margin: 0 -87%;
        padding: auto;
    }
}
@media (max-width: 1080px) {

    /* Header */
    .header>.logo {
        font-size: 18px;
        margin: 0 -7%;
    }

    .navbar{
        font-size: 15px;
        margin: 0 -7%;
    }

    /* Skills */
    .section3 > .card-set{
        margin: 0 -12%;
    }

    .all-projects{
        width: 780px;
    }

    .timeline-items {
        margin: 0 auto;
        position: relative;
    }
}

@media (max-width: 812px) {

    /* Header */
    .header {
        width: 100%;
        position: fixed;
        left: 0;
        z-index: 100;
    }

    .logo {
        margin-right: auto;
    }

    .navbar {
        display: none;
        flex-direction: column;
        gap: 16px;
        background-color: #1e1b29;
        position: fixed;
        width: 200px;
        height: 250px;
        top: 70px;
        right: 40px;
        padding: 10px;
        border-radius: 5px;
        position: fixed;
    }

    .navbar.active {
        display: flex;
        background-color: #1e1b29;
        opacity: 1;
    }

    .hamburger {
        display: flex;
        cursor: pointer;
        color: #1e1b29;
    }

    /* Section1 */
    .section1 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin: 5px 20px;
    }

    .home-content {
        margin-left: -30px;
    }

    /* section2 */
    .timeline-items {
        margin: 0 25px;
        position: relative;
    }

    .timeline-items::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 100%;
        background-color: #0ef;
        left: 48px;
        border-radius: 25px;
    }

    .odd-logo {
        left: -4.7%;
    }

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

    .even-logo {
        left: -0.5%;
    }

    .date-even {
        text-align: left;
        margin-left: -545px;
    }

    .timeline-content {
        margin: 0 30px;
    }

    .timeline-content-even {
        margin: 0 -545px;
    }

    /* Section3 */
    .card-set {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .cardrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 -215px;
    }

    /* Section4 */
    /* Experiance section */
    .exp-content {
        margin: 0 auto;
        height: auto;
    }

    /* Project Section */
    .all-projects {
        display: flex;
        align-items: center;
        width: 400px
    }

    /* Section5 */
    .section5 {
        padding: 20px;
        text-align: center;
    }
}

@media (max-width: 416px) {


    .title {
        font-size: x-large;
    }

    .header {
        width: 100%;
        position: fixed;
        left: 0;
        z-index: 100;
    }

    .logo {
        margin-right: auto;
        font-size: 15px;
        transition: 0.3s ease-in-out;
    }

    .logo:hover {
        font-size: large;
        transform: scale(0.5);
    }

    .navbar {
        display: none;
        flex-direction: column;
        gap: 16px;
        background-color: #1b1f27;
        position: fixed;
        width: 200px;
        height: 250px;
        top: 70px;
        right: 40px;
        padding: 10px;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }


    .navbar.active {
        display: flex;
        right: 12px;
    }

    .hamburger {
        display: flex;
        margin-right: 10px;
        cursor: pointer;
    }

    /* Section1 */
    .section1 {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin: 5px 20px;
    }

    #Home {
        margin: auto;
    }

    .home-img img {
        width: 80%;
        margin: auto;
        display: block;
    }

    .home-content {
        margin: 0 auto;
    }

    .home-content > h1 {
        font-size: 32px;
    }

    .home-content > h3 {
        font-size: 22px;
    }

    .home-content > p {
        font-size: 14px;
        width: auto;
        margin: auto;
    }

    .home-content > a {
        margin: 25px 66px;
        font-size: 12px;
        width: auto;
    }

    /* section2 */
    .section2 {
        margin-top: -15px;
    }

    .section2>h2 {
        margin-bottom: 30px;
    }

    .timeline-items {
        margin: 0 25px;
        position: relative;
    }

    .timeline-items::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 100%;
        background-color: #0ef;
        left: 14px;
        border-radius: 25px;
    }

    .odd-logo {
        left: -90px;
        height: 50px;
        width: 50px;
    }

    .even-logo {
        left: -40px;
        height: 50px;
        width: 50px;
    }

    .date-odd {
        text-align: left;
        margin-left: -20px;
        font-size: 15px;
    }


    .date-even {
        text-align: left;
        margin-left: -600px;
        font-size: 15px;
    }

    .timeline-content {
        margin: 0 -25px;
        width: 310px;
        padding: 30px;
    }

    .timeline-content>.disc {
        font-size: small;
    }

    .timeline-content-even {
        margin-left: -605px;
        width: 310px;
        padding: 30px;
    }

    /* Section3 */
    .section3>h1 {
        margin-bottom: auto;
    }

    .card-set {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .cardrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 -415px;
    }

    .card>ul {
        display: grid;
        grid-template-columns: 130px 130px;
        grid-row: 40px 40px;
        column-gap: 12px;
        row-gap: 12px;
    }

    .card > p {
        text-align: center;
        font-size: 14px;
        max-width: 280px;
    }

    /* Section4 */
    /* Experiance section */
    .section4>h1 {
        font-size: 20px;
    }

    .section4 > p{
        font-size: 14px;
    }

    .section4>.exp-flex {
        display: flex;
        flex-direction: column-reverse;
        /* flex-direction: column; */
    }

    .exp-tabs {
        display: inline;
        margin-top: -35px;
    }

    .exp-tabs>.tab {
        padding: 10px auto;
        font-size: small;
    }

    .exp-tabs>.tab.active {
        padding: 10px auto;
        font-size: small;
    }

    .exp-content {
        margin-left: 16px;
        width: 380px;
        height: 320px;
    }

    .content>p {
        font-size: small;
    }

    .exp-title>.location {
        font-size: 15px;
    }

    .exp-title>.duration {
        font-size: x-small;
    }

    /* Project Section */
    .project-wrap {
        margin-top: 70px;
    }

    .all-projects {
        display: flex;
        align-items: center;
        width: 410px;
    }

    .project-cards {
        display: flex;
        gap: 40px;
    }

    .project-card {
        margin-left: -8px;
    }

    .backbtn {
        display: none;
    }

    .nextbtn {
        display: none;
    }

    /* Section5 */
    .section5>h1 {
        margin-top: 70px;
        font-size: x-large;
    }

    .section5>h1>span {
        font-size: xx-large;
    }

    .section5 {
        margin-bottom: 250px;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
    }

    .cont-left {
        height: auto;
        gap: 20px;
    }

    .cont-btn {
        margin: 40px;
    }

    .scroll-to-top.show {
        display: block;
    }
}

@media (max-width: 384px) {

    /* header */
    .header {
        width: 384px;
        position: fixed;
        left: 0;
        z-index: 100;
    }

    /* Section1 */
    .home-img img {
        width: 65%;
        margin: auto auto 10px auto;
    }

    .home-content {
        margin: 0 auto 0 auto;
    }

    .home-content>h1 {
        font-size: 30px;
    }

    .home-content>h3 {
        font-size: 15px;
    }

    .home-content > p {
        width: auto;
    }



    /* section2 */
    .timeline-content {
        margin: 0 -35px;
        width: 290px;
        padding: 22px;
    }

    .timeline-content-even {
        margin-left: -615px;
        width: 290px;
        padding: 22px;
    }

    /* Section3 */
    .cardrow {
        margin: 0 -490px;
    }

    /* Section4 */
    /* Experiance */
    .exp-content {
        margin-left: auto;
    }

    .exp-tabs {
        display: inline;
        margin-top: -15px;
        width: 386px;
    }
/*     
    .exp-tabs {
        display: inline;
        margin-top: -35px;
    } */

    /* Prooject */
    .section4>h2 {
        padding: 40px 0 40px 0;
    }

    .project-main {
        margin-left: auto;
    }

    /* scroll-to-top */
    .scroll-to-top {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 360px) {

    /* Header */
    .navbar.active {
        display: flex;
        top: 69px;
        right: 0;
        left: 0;
        width: 110%;
    }

    .header {
        width: 100%;
        position: fixed;
        left: 0;
        z-index: 100;
    }

    /* Section1 */
    .home-img img {
        width: 60%;
        margin: 70px auto 0 auto;
        display: block;
    }

    .home-content {
        /* margin-top: -45px;
        margin-left: -35px; */
        width: 300px;
    }

    .home-content>p {
        font-size: 14px;
        width: 300px;
        margin: auto;
    }

    .home-content h3:nth-of-type(2) {
        margin-bottom: 30px;
        height: 15px;
    }

    .home-content>a {
        margin: 25px 50px;
    }

    /* section2 */
    .timeline-content {
        margin: 0 -35px;
        width: 275px;
        padding: 22px;
    }

    .timeline-content-even {
        margin-left: -615px;
        width: 275px;
        padding: 22px;
    }

    /* Section3 */
    .exp-content {
        width: auto;
        height: 350px;
        margin: 10px;
    }

    .cardrow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 -450px;
    }

    /* Section4 */
    /* Experiance section */
    .exp-tabs {
        display: inline;
        margin-left: -16px;
        margin-top: -36px;
    }

    .exp-tabs>.tab {
        padding: 10px auto;
        font-size: small;
    }

    .exp-tabs>.tab.active {
        padding: 10px auto;
        font-size: small;
    }

    /* Project Section */
    .all-projects {
        display: flex;
        align-items: center;
        width: 400px;
        height: auto;
        margin: auto;
    }

    .project-card {
        padding: auto;
        margin-left: -15px;
    }

    .proj-content>p {
        font-size: 14px;
    }

    /* Section5 */
    .section5 {
        top: 10px;
        margin-bottom: 250px;
    }

    .left-inps {
        width: 300px;
        padding: 12px;
    }

    .right-inps {
        width: 300px;
        height: 200px;
        padding: 12px;
    }

    .cont-right {
        margin-left: 30px;
    }

    .cont-btn {
        margin-top: 20px;
        margin-left: 15px;
    }

    /* Footer */
    .copyrights {
        margin: 20px 0;
        margin-bottom: -8px;
        font-size: smaller;
    }

}