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


    /* style mobile for phone */

    * {
        box-sizing: border-box;
    }

    h1,
    h2,
    h3 {
        margin: 0;
    }


    img {
        width: 100%;
        height: 100%;
        user-select: none;
    }

    body {
        background-color: #F8F6F6;
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        max-width: 100%;
    }


    .container {
        width: 100%;
        padding: 0 3%;
    }

    header {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        /* e ke tashmë */
        background-color: #F8F6F6;
        /* e njëjtë me body */
        z-index: 1000;
    }


    #S1 {
        scroll-margin-top: 200px;
    }

    #S2,
    #S3,
    #S4,
    #S5 {
        scroll-margin-top: 90px;
    }

    #nav_ul a.active,
    #footer_ul a.active {
        color: rgb(33, 125, 30);
        /* ose ngjyra që do ti */
    }



    #img_logo {
        width: 140px;
        height: 40%;

    }


    /* introducting section */

    .intro_section {
        /* nuk ka diqka per momentin */
    }

    #box_container {
        margin-top: 20%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .left_section_container {
        width: 100%;
        padding: 0 3%;
        margin-top: 10%;
    }

    .right_section_container {
        height: 40%;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20%;
    }

    #img_group {
        width: 100%;
    }



    /* part of heading and texts*/

    .flex-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
    }

    #title {
        margin: 0;
        padding: 0;
    }

    .write_box {
        letter-spacing: 0;
        color: rgba(30, 34, 26, 1);
        width: 100%;
    }

    #title_intro {
        width: 100%;
    }

    #title_intro,
    #description_intro,
    #two_buttons_intro {
        line-height: 100%;
    }

    /* span element */

    #Design {
        font-size: 200%;
        font-weight: 600;
        letter-spacing: 0;
    }

    #Develop {
        font-size: 110%;
        font-weight: 600;
        letter-spacing: 0;

    }

    #Grow {
        font-size: 150%;
        letter-spacing: 0;
        font-weight: 600;
        display: block;
        /* E bën elementin të dalë në rresht të ri plotësisht */
        margin-top: 20px;
        /* Rregulloje këtë vlerë derisa të të pëlqejë distanca */
        line-height: 1.2;
    }



    /* paragraph text */

    #description_intro {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-style: medium;
        font-size: 160%;
        line-height: 120%;
        letter-spacing: 0;
        text-align: center;
    }



    #two_buttons_intro {
        text-align: center;
        margin-top: 10%;
    }

    .button {
        padding: 3% 0;
        width: 40%;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        font-size: 140%;
        letter-spacing: 0;
    }

    .left_button {
        background-color: rgba(79, 91, 69, 1);
        color: rgba(255, 255, 255, 1);
    }

    .right_button {
        margin-left: 20px;
        border: 1px solid rgba(79, 91, 69, 1);
        background-color: rgba(255, 255, 255, 1);
        color: rgba(79, 91, 69, 1);
    }




    /* our services  boxes */


    .our_services_section {
        margin-top: 20%;
        width: 100%;
    }

    /*title - property */
    .sub_title_part {
        display: flex;
        align-items: center;
    }

    .img_sub_title {
        width: 55px;
        height: 60px;
    }

    .title {
        padding: 10px 0;
        margin-left: 20px;
    }

    .title_h2 {
        font-weight: 600;
        font-size: 300%;
        font-family: 'Montserrat', sans-serif;
        color: rgba(30, 34, 26, 1);
    }


    /* boxes part */
    #box_services {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
        margin-top: 50px;
    }


    .box_s {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 15px;
        padding: 20px;
        width: auto;
    }

    .title_icon_text {
        display: flex;
        align-items: center;
    }

    .svg_icon {
        background-color: rgba(79, 91, 69, 0.4);
        border-radius: 5px;
        padding: 9px;
        width: 40px;
        height: 40px;
    }

    .title_box_services {
        font-weight: 600;
        font-size: 130%;
        margin-left: 10px;
        font-family: 'Montserrat', sans-serif;
        line-height: 100%;
        letter-spacing: 0;
        color: rgba(30, 34, 26, 1);
    }

    .description_box_services {
        margin: 20px 0 0;
        font-size: 113%;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
    }



    /* our work section */

    .our_work_section {
        margin-top: 150px;
    }


    .our_work-photo_container {
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 50px;
        height: 2500px;
    }


    .box_our_work {
        width: 100%;
        border-radius: 20px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }


    .box_1_our_work {
        background-image: url('../imgs/thumbnail_web.png');
    }

    .box_2_our_work {
        background-image: url('../imgs/project_2.png');
    }

    .box_3_our_work {
        background-image: url('../imgs/project_3.jpg');
    }

    .box_4_our_work {
        background-image: url('../imgs/Artboard.png');
    }


    /* About Us section */

    /* About Us section */
    .about_us_section {
        margin-top: 150px;
    }

    #content_about_us {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 5%;
        /* Lartësia që ke caktuar */
        gap: 20px;
        overflow: hidden;
        column-gap: 70px;
        /* Sigurohet që asgjë mos të dalë jashtë kësaj kutie */
    }

    .img_container_about_us {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        /* Rrumbullakimi */
        overflow: hidden;
        /* KRITIKE: Kjo e detyron imazhin të pritet te qoshet */
        background-color: #eee;
        /* Opsionale: Një ngjyrë gri e lehtë sa për ta parë kutinë */
    }

    .img_container_about_us img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Rekomandohet 'cover' që imazhi të mbushë gjithë div-in me border-radius */
        object-position: center;
    }

    .text_about_us {
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 140%;
        letter-spacing: 0;

    }



    /* question part */

    #question_part {
        width: 100%;
        height: 400px;
        display: block;
        margin-top: 150px;
    }

    .container_question {
        width: 80%;
        margin: 0 auto;
        background-image: url('../imgs/Cyrcle.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        display: block;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qustion_text {
        font-weight: 600;
        font-size: 270%;
        color: rgba(30, 34, 26, 1);
        font-family: 'Montserrat', sans-serif;
    }


    /* Contact Us part */
    .contact_us_section {
        margin-top: 150px;
    }



    #contact-form {
        padding: 10% 5%;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid #F3F3F3;
        box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
        display: flex;
        flex-direction: column-reverse;
        row-gap: 100px;
        align-items: stretch;
        /* Kjo e bën që fëmijët të shtrihen vertikalisht */
        border-radius: 8px;
        min-height: 400px;
        margin-top: 50px;
        /* Lartësi minimale për të kontrolluar pamjen */
    }

    form {
        display: flex;
        flex-direction: column;
        flex: 1.2;
        justify-content: space-between;
        /* Për të shpërndarë përmbajtjen vertikalisht */
    }

    .line_input {
        display: block;
        width: 100%;
        gap: 32px;
    }

    .input_1,
    .input_2 {
        flex: 1;
    }

    .input_2 {
        margin-top: 5%;
    }

    label {
        font-weight: 500;
        font-size: 120%;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
        margin-top: 12px;
        font-family: 'Montserrat' sans-serif;
    }

    .input_3,
    .input_4 {
        margin-top: 30px;
    }

    .input {
        margin-top: 5px;
        width: 100%;
        padding: 18px 16px;
        height: 46px;
        border-radius: 6px;
        border: 1px solid #F1F3F7;
        background: rgba(248, 246, 246, 1);
        box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
        font-size: 15px;
    }

    .input:focus {
        outline: 1px solid rgba(109, 117, 143, 1);
    }

    .input_textarea {
        height: 90px;
        resize: none;
    }

    /* number flag */
    .iti {
        width: 100%;
    }

    .iti__flag {
        margin-right: 10px;
    }

    /* submit button */
    #submit {
        background-color: rgba(79, 91, 69, 1);
        color: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
        font-size: 18px;
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
        padding: 5% 4%;
        width: 50%;
        margin-top: 35px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 10px;
        border: none;
    }


    /* contact text box */
    .contact_text {
        flex: 1;
        min-height: 100%;
        /* Kjo siguron që .map të jetë i barabartë me lartësinë e prindit */
    }

    .header_contat {
        font-weight: 600;
        font-size: 35px;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 0;
        color: rgba(30, 34, 26, 1);
    }

    .text_description_contact {
        font-size: 20px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        line-height: 31px;
        margin: 30px 0;

    }

    /* text contact form */
    .text_contact {
        font-family: 'Montserrat', sans-serif;
        font-family: 25px;
        font-weight: 400;
        color: rgba(30, 34, 26, 1);
        margin-left: 15px;
    }


    /* footer part */

    footer {
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
        margin-top: 300px;
        padding-top: 50px
    }

    .img_logo_footer {
        width: 50%;
        padding-top: 50px;
        margin-left: auto;
        margin-right: auto;
        height: 200px;
        display: block;
        user-select: none;
        overflow: hidden;
    }

    /* lists */

    #footer_ul {
        list-style-type: none;
        text-align: center;
        margin-top: 15%;
        margin-bottom: 0;
        padding-bottom: 30px;
    }

    #footer_ul li {
        display: inline-block;
        margin-left: 2%;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 18px;
        color: rgba(30, 34, 26, 1);
        padding: 0;
        text-align: center;
    }


    #footer_ul .first_list {
        margin-left: -10%;
    }

    .li_footer {
        text-decoration: none;
        color: rgba(54, 18, 9, 1);
        font-size: 18px;
        font-weight: 400;
        transition: .2s ease-in-out;
        transition: .2s ease-in-out;
    }

    .li_footer:hover {
        color: rgb(99, 97, 97);
        cursor: pointer;
    }


    /* li button in beggining of the web */
    .li_button {
        text-decoration: none;
    }





    #mobile-menu {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background-color: #fff;
        transition: left 0.3s ease-in-out;
        z-index: 1000;
    }

    #mobile-menu.active {
        left: 0;
    }

    #close-menu {
        display: none;
        /* Fshehur fillimisht */
        position: absolute;
        top: 5px;
        right: 30px;
        font-size: 350%;
        /* Madhësi e madhe për × */
        color: rgba(197, 70, 41, 1);
        cursor: pointer;
        font-weight: 400;
    }

    #mobile-menu.active #close-menu {
        display: block;
        /* Shfaqet kur menyja është aktive */
    }

    #nav_lists {
        display: block;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #nav_ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav_li {
        display: block;
        text-decoration: none;
        padding: 15px 0;
        width: 100%;
        text-align: center;
    }

    .nav_li a {
        text-decoration: none;
        color: rgba(54, 18, 9, 1);
        font-size: 22px;
        /* Rritur nga 18px në 22px */
        font-weight: 400;
        transition: 0.2s ease-in-out;
    }

    .nav_li a:hover {
        color: rgb(99, 97, 97);
    }

    #hamburger-menu {
        width: 30px;
        height: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        margin-left: auto;
    }

    .border_hamburger {
        width: 100%;
        height: 3px;
        background-color: black;
        transition: all 0.3s ease;
    }

    #hamburger-menu.active .border_hamburger:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    #hamburger-menu.active .border_hamburger:nth-child(2) {
        opacity: 0;
    }

    #hamburger-menu.active .border_hamburger:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }


     /* for icon at form message */
    .title_icon_form_2,
    .title_icon_form_3,
    .title_icon_form_4 {
        margin-top: 10px;
    }

    /* text contact */
    .text_contact {
        text-decoration: none;
    }
}