@media screen and (max-width: 1440px) {
    .header {
        top: 0;
        left: 0;
        width: 100%;
        padding: 2rem 9% 2rem 9%;
        background: transparent;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
        transition: .3s;
    }

    .navbar a:nth-child(4) {
        margin-right: 40px;
    }

    .home-content {
        top: 20%;
    }

    .home-sci-Container {
        top: 0;
    }

    .home-sci-Container .home-sci {
        position:relative;
        margin:auto;
        width:100%;
        top: 0;
    
    }
    
    section {
        padding: 10rem 4% 2rem;
    }

    .logo {
        font-size: 2.0rem;
        color: var(--text-color);
        font-weight: 400;
    }

    .navbar a {
        margin-left: 2rem;
    }
}


@media screen and (max-width: 1100px){

    .header{
        padding: 2rem 9% 2rem 6%;
    }
    
    .home-content {
        width: 80%;
    }
    .home-content h1 {
        font-size: 5.0rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .home-content .text-animate h3 {
        font-size: 3.0rem;
        font-weight: 600;
    }
    .home-sci-Container .home-sci {
        position: relative;
        top: 0;
    }
}




@media screen and (max-width: 991px) {
    .header {
        padding: 2rem 4%;
    }

    section {
        padding: 10rem 4% 2rem;
    }

    .home {
        padding: 0 0;
    }



    .footer {
        padding: 2rem 4%;
    }
}

@media screen and (max-width: 768px) {
    .header{
        background: var(--bg-color);
        padding: 2rem 10% 2rem 7%;
    }


    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        padding: 1rem 4%;
        background: var(--main-color);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
        z-index: 1;
        transition: .25s ease;
        transition-delay: .25s;

    }

    .navbar.active {
        left: 0;
        transition-delay: 0s;
    }

    .navbar .active-nav {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        z-index: -1;

    }

    .navbar.active .active-nav {
        left: 0;
        transition-delay: .25s;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        transform: translateX(-20rem);
        transition: .25s ease;
        transition-delay: 0s;
    }

    .navbar.active a {
        transform: translateX(0);
        transition-delay: .25s;
    }
    
    .home-content{
        width:95%;
    }

}


@media screen and (max-width: 620px){
    .home-sci-Container {
        width: 57%;
    }
    .home-sci-Container .home-sci {
        top: 0;
        width: 100%;
    }
}

@media screen and (max-width: 530px) {
    html {
        font-size: 50%;
    }
    /* header section */
    .header {
        padding: 2rem 10% 2rem 7%;
    }
    /* Home Section */
    .home {
        padding: 0 0;
    }
    .home-content {
        width: 100%;
        background-color: black;
        border: 2px solid rgb(33, 202, 137);
        border-radius: 10px;
        padding: 15px;
    }
    .home-content h1 {
        display: flex;
        flex-direction: column;
    }

    /* Social Media Profiles */

    .home-sci-Container .home-sci {
        position: relative;
    }
    .home-sci a {
        width: 25px;
        height: 25px;
    }
    
    .home-sci a img {
        width: 25px;
    }

    .home-sci a i {
        font-size: 25px;
        color: var(--main-color);
        transition: .3s;
    }


    /* My Projects Section */

    
    .projects-content .btn-box {
        width: 100%;
    }
    .projects .projects-content a:nth-child(2) {
        margin-right: 15px;
        margin-left: 15px;
    }
    .projects .projects-content .btn {
        font-size: 13px;
    }
   
}

@media screen and (max-width: 462px) {
    .home-content h1 {
        font-size:  5.0rem;
    }

    .education {
        padding: 10rem 4% 5rem 5%;
    }

    .contact form .input-box .input-field {
        width: 100%;
    }

    .footer {
        flex-direction: column-reverse;
    }

    .footer p {
        margin-top: 2rem;
        text-align: center;
    }

}

@media screen and (max-width: 400px) {
    /* Home Section */
    .home {
        justify-content: center;
    }

    .home-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .home-content h1 {
        font-size: 4rem;

    }
    .home-sci-Container .home-sci {
        position: relative;
    }

    


    
    .projects .projects-content a:nth-child(2) {
        margin-right: 2px;
        margin-left: 2px;
    }
    .projects .projects-content .btn {
        font-size: 10px;
    }
}


@media screen and (max-width: 300px) {
    .header {
        padding: 2rem 20% 2rem 10%;
    }


    /* Home content */
    .home-content {
        max-width: 35rem;
        background-color: black;
        border: 2px solid rgb(33, 202, 137);
        border-radius: 10px;
        padding: 15px;
    }

    .home-content h1 {
        font-size: 3rem;

    }

    .home-content .text-animate h3 {
        font-size: 2.5rem;
        font-weight: 600;
    }

    
    .home-content .btn-box .btn {
        width: 10rem;
        font-weight: 900;
    }

    /* Social Media Links */

    .home-sci-Container .home-sci {
        width: 100%;
    }


    /* Projects Section */
    .projects-content .btn-box  {
        width: 100%;
        text-align: center;
    }

    .projects-content .btn-box .btn {
        padding: 3px;
    }
}


@media screen and (orientation: landscape) and (max-height: 900px){
    .home-content {
        width: 80%;
    }
}

@media screen and (orientation: landscape) and (max-height: 700px){
    .home-content {
        width: 90%;
    }
}

@media screen and (orientation: landscape) and (max-height: 500px){
    .home-content {
        width: 98%;
    }
    
}


@media screen and (orientation: landscape) and (max-height: 400px){
    .header{
        display:none;
    }
    .home-content h1 {
        font-size: 4rem
        
    }

    .home-content .text-animate h3 {
        font-size: 2.0rem;
        font-weight:500;
    }

    .home-content p{
        font-size:2rem;
        font-weight:500;
        margin:1rem 0 2rem;        
    }
    
    .home-sci-Container .home-sci {
        width: 100%;
    }

    .home-sci a {
        width:30px;
        height:30px;
    }

    .home-sci a img {
        width:30px;

    }
   
}