@media only screen and (max-width:680px), (max-width:768px) {
    .container {
        display: flex;
        flex-direction: column;
    }

    h2 {
        text-align: center;
    }
    /* Nav start  */
    #nav-bar{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo {
        flex-direction: column;
    }

    #logo-text {
        /* display: none; */
        font-size: xx-small;
    }
    /* Nav end  */

    /* Main start  */
    #main-image {
        display: none;
    }
    #main-text {
        font-size: small;
        width: 60%;
    }
    /* Main end  */
/* Section campaign start */
#campaign {
    padding-top: 30px;
}
/* Section campaign end */

/* Grid Container start */
.grid-container {
    box-sizing: border-box;
    padding: 5px;
    display: grid;
    grid-template-areas: 'service-1 service-2'
                    'service-3 service-4' ;
}
/* Grid Container end */

/* Section service start */
#service {
    display: flex;
    flex-direction: column;
}
/* Section service  end */

/* Section portfolio start */
#portfolio {
    display: flex;
    flex-direction: column;
}
/* Section portfolio end */

/* Section form start */
.input-form, label-name {
    width: 90%;
}
/* Section form end */

/* Section grid container start */
.grid-container {
    display: flex;
    flex-direction: column;
}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
}
/* Section grid container end */

/* Grid footer start */
.footer-container {
    display: grid;
    grid-template-areas: 
    'logo-bottom logo-bottom'
    'footer-information footer-socmed'
    'footer-legal footer-socmed'
    'footer-support footer-socmed'
    /* 'logo-bottom footer-socmed'
    'logo-bottom footer-form' */
    ;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 50px;
}
#logo-bottom {
    grid-area: logo-bottom;
    width: 100%;
}
#footer-information {
    grid-area: footer-information;
}
#footer-legal {
    grid-area: footer-legal;
}
#footer-socmed {
    grid-area: footer-socmed;
}
#footer-form {
    grid-area: footer-form;
}
/* Grid footer end */
}