@media screen and (max-width:600px) {
    
     header {
        padding: 0px;
        width: 100%;
        min-height: 600px;
    }
    
    div#headerContent{
         width: 95%;
         margin: 0 auto;
        height:auto;
        flex-direction: column-reverse;
    }
    
     .header-container {
        height: auto;
    } 

    div.header-container h2{
        font-size: 22px;
        font-family: "Poppins";
        font-weight: 400;
    }
    
    h1 {
        margin: 0;
        font-size: 4rem;
        font-family: "RobotoBold";
    }
    
    
    img#headerImage{
        width: 200px;
        /* border: 1px solid red; */
        height:auto
    }
    
    section#about {
        width: 100%;
        margin: 0;
        padding: 0px;
        justify-content: flex-start;
    }
    
    div#tittleContainer{
        width: 95%;
        margin: 20px auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    h2#aboutTittle{
        width: 60%;
        font-size:34px;
        font-family: "PoppinsBold";
        line-height: 42px;
        margin-bottom: 0;
    }
    
    div#tittleContainer img{
        width: 100px;
        height: 100px;
        margin-left: 15px;
    }
    
    section#about p{
        width: 95%;
        font-size: 18px;
        margin: 10px auto;
        margin-bottom: 0px;
    }
    
    img#arduinoLogo{
        width: 150px;
        margin: -20px calc(50% - 75px);
    }
    
    
    
    div#featuresContent{
        width: 95%;
    }
    
    div#featuresContent h2{
        font-size: 42px;
        text-align: center;
    }
    
    ul#featuresList {
        width: 95%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
    }
    
    ul li {
        width: 100%;
    }
    
    div.featereCard h4{
        font-size:16px;
    }
    
    div.featereCard img{
        width: 70px;
        height: 70px;
        margin-top:0px;
        margin-bottom: 10px;
    }
    
    div.featereCard p{  font-size: 10px; }
    
    section#diagram{
        width:100%;
        height:auto;
        min-height: auto;
        justify-content: flex-start;
    } 
    
    section#diagram img{
        margin: 20px auto;
        width: 95%;
    }
    
    section#diagram p{
        width: 90%;
        text-align: center;
        color: #fff;
    }
    
    
    section#characteristics{
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    
    section#characteristics img{
        width: 200px;
        height:200px;
        margin: 20px auto;
    }
    
    section#characteristics div{
        width: 95%;
        height: auto;
        min-height: auto;
        color:black;
        margin:10px auto;
        font-size: 16px;
        font-weight: normal;
        text-align: center;
    }
    
    section#characteristics div h3{
        font-size: 20px;
        margin-top: 0;
    }

    section#characteristics div p{
        font-size: 14px;
        margin-top: 0;
        text-align: left;
    }
    
    section#contact{
        height: auto;
        min-height: auto;
        flex-direction: column-reverse;
    }
    
    form {
        width: 90%;
        margin: 10px auto;
    }
    
    form label {
        margin-top: 10px;
        width: 100%;
        text-align: left;
        font-weight: bold;
    }
    
    form input {
        width: 100%;
        height: 30px;
        padding: 10px;
        margin-top: 5px;
        border: 2px solid #fff;
        border-radius: 10px;
        background-color: #F79630;
        color: black;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    textarea{
        width: 100%;
        height:80px;
        border: 2px solid #fff;
        border-radius: 10px;
        background-color: #F79630;
        color: black;
        font-weight: bold;
        font-size: 16px;
    }
    
    form button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    form button:hover {
        background-color: #0056b3;
    }
    
    div#formContent{
        width: 95%;
        margin: 10px auto;
        color: white;
        font-family: "Poppins";
        
    }
    
    div#formContent h2{
        font-size: 30px;
        text-align: center;
    }
    
    div#formContent p{
        text-align: center;
        font-size: 20px;
    }
    
    footer {
        height: 100%;
        min-height: 100%;
        padding: 0px;
    }

    footer  h1{
        font-size: 32px;
    }

    footer img{
        width: 90%;
    }
}