@media only screen and (min-width: 600px) {
    * {
        box-sizing: border-box;
    }

    .container {
        padding: 0 3%;
    }

    body {
        padding: 0;
        margin: 0;
        font-family: 'Poppins', sans-serif;
        color: rgb(43, 41, 41);
        overflow-x: hidden;
        background-color: rgba(245, 243, 243, 0.662);
        padding-top: 120px;
    }

    body.no-scroll {
        overflow: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    p {
        padding: 0;
        margin: 0;
    }

    p {
        font-size: 18px;
    }

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

    header {
        width: 100%;
        height: 120px;
        display: flex;
        background-image: linear-gradient(to bottom, #F8F6F6, #fffdfd, rgb(255, 255, 255));
        justify-content: space-between;
        align-items: center;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    .img-div-header {
        height: 100%;
        padding: 0;
        margin: 0;
        width: 25%;
    }

    #head_nav {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        background-color: white;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        z-index: 2000;
        /* ketu e kemi vene per shakak se po na pengon */
    }

    #head_nav.active {
        transform: translateX(0);
    }

    #head_ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .li {
        padding-top: 20px;
        cursor: pointer;
        font-size: 35px;
    }

    .link_list_header {
        text-decoration: none;
        color: black;
    }

    .li.active {
        color: blue;
    }

    #open-btn {
        background-color: transparent;
        font-size: 40px;
        cursor: pointer;
        border: none;
        outline: none;
        color: black;
        user-select: none;
    }

    #close-btn {
        font-size: 70px;
        position: absolute;
        user-select: none;
        top: 25px;
        right: 25px;
        outline: none;
        border: none;
        background-color: transparent;
        cursor: pointer;
    }



    .h2_title {
        line-height: 120%;
    }

    /* head content */

    #head_content {
        height: 80vh;
        background-image: url('../imgs/Banner_image.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 100% 100%;
        opacity: 1;
        display: flex;
        align-items: center;
    }

    .text_header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 0 30px;
        text-align: center;
    }

    .h1_title_header {
        color: white;
        font-size: 42px;
    }

    .para_text_header {
        color: rgb(239, 237, 237);
        margin-top: 40px;
        font-size: 20px;
        font-weight: 400;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .two_button_header {
        width: auto;
        margin-top: 80px;
    }

    .header_bttn {
        background-color: transparent;
        color: white;
        font-size: 19px;
        border-radius: 10px;
        border: none;
        padding: 10px 30px;
        font-weight: 550;
        cursor: pointer;
    }


    .see_more_button {
        background-color: rgba(0, 0, 255, 0.701);
        transition: ease-out .3s;
    }

    .see_more_button:hover {
        background-color: blue;
    }

    .links {
        text-decoration: none;
    }

    .links_shiko_me_shume {
        color: white
    }

    .contact_button {
        background-color: rgb(248, 246, 246);
        color: rgb(31, 29, 29);
        margin-left: 10px;
    }

    .links_contact {
        color: rgb(9, 9, 225)
    }


    /*success section */

    #success_section {
        margin-top: 150px;
    }

    .h2_title {
        font-size: 35px;
        color: rgba(5, 11, 24, 0.85);
    }

    .sub_header_box {
        text-transform: capitalize;
        color: rgb(255, 250, 250);
        font-size: 21px;
        font-weight: 600;
        text-align: center;
    }

    .text_description_sucess {
        color: rgb(255, 250, 250);
        margin-top: 30px;
        font-size: 18px;
        line-height: 170%;
    }

    .para_text {
        font-size: 20px;
        margin-top: 10px;
    }


    .sucess_box_container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 20px;
        margin-top: 80px;
        padding: 0 5%;
    }

    .box_succes_container {
        width: 100%;
        padding: 40px 40px 40px;
        border-radius: 20px;
        background-color: rgba(216, 215, 215, 0.329);
    }

    .box_1_succes_container {
        background-color: rgb(112, 73, 3);
    }

    .box_2_succes_container {
        background-color: rgb(122, 124, 5);
    }

    .box_3_succes_container {
        background-color: rgb(3, 118, 43);
    }

    .box_4_succes_container {
        background-color: rgb(76, 2, 74);
    }

    .box_5_succes_container {
        background-color: rgb(5, 3, 107);
    }

    .sucess_last_text {
        margin-top: 50px;
        width: 100%;
        text-align: center;
    }

    .text_last_sucess_box {
        font-size: 22px;
        font-weight: 500;
    }

    .color_konsult {
        text-decoration: none;
        color: white;
        background-color: rgb(7, 7, 219);
        padding: 2px 10px;
        border-radius: 10px;
        font-weight: 550;
        font-size: 18px;
    }


    /* Sektori Sherbimet tona */

    #services_section {
        margin-top: 150px;
    }

    .services_box_container {
        margin-top: 100px;
        padding: 0 5%;
    }

    .box_services_container {
        box-shadow: 5px 5px 20px 11px rgba(182, 181, 181, 0.559);
        border-radius: 25px;
        background-color: white;
        position: relative;
    }

    .box_1_services_container,
    .box_2_services_container {
        margin-top: 50px;
    }

    .sub_header_service {
        text-align: center;
        padding-top: 30px;
        font-size: 25px;
    }

    .text_description_services {
        padding: 50px 30px 30px;
        font-size: 19px;
    }

    .hr_box {
        width: 20%;
        position: absolute;
        border: 3px solid rgb(9, 5, 218);
        right: 0;
    }



    /*Sektori pakove */

    #pakot_section {
        margin-top: 150px;
    }

    .pakot_box_container {
        display: flex;
        flex-direction: column;
        margin-top: 50px;
        padding: 0 5%;
    }

    .box_pakot_container {
        border-radius: 50px;
        border: 3px solid rgb(8, 8, 205);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 400px;
        margin: 20px auto;
        padding: 30px 10px 30px 0;
        width: 90%;
        background-color: white;
    }

    .box_2_pakot_container {
        outline: 4px solid rgba(243, 243, 8, 0.916);
        position: relative;
    }

    .title_pako {
        font-size: 23px;
        font-weight: 700;
        position: relative;
        color: rgba(2, 2, 63, 0.8);
    }

    .box_2_pakot_container::after {
        content: "r e k o m a n d u a r";
        color: rgba(189, 189, 7, 0.916);
        position: absolute;
        font-weight: bold;
        bottom: 140px;
        right: 20px;
        font-size: 22px;
        transform: rotate(-10deg);
    }

    .title_pako,
    .price_title {
        text-align: center;
    }

    .ul_kons_1,
    .ul_kons_2,
    .ul_kons_3 {
        list-style: none;
        padding: 0 20px;
    }

    .ul_kons_2,
    .ul_kons_3 {
        margin-top: 70px;
    }

    .li_kons {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 19px;
    }

    .li_kons::before {
        content: "◉";
        color: rgb(8, 8, 205);
        margin-right: 10px;
        flex-shrink: 0;
    }

    .price_title {
        font-size: 22px;
        color: rgba(8, 8, 205, 0.80)
    }

    .div_price_pako {
        margin-top: 50px;
        text-align: center;
    }

    .bttn_pakot {
        padding: 10px 50px;
        font-size: 18px;
        border-radius: 30px;
        background-color: blue;
        color: white;
        border: none;
        margin-top: 10px;
        transition: background-color 0.2s ease-out;
    }

    .bttn_pakot:hover {
        cursor: pointer;
        background-color: rgb(7, 7, 202);
    }


    /* Sektori i video-Edukimit */
    #videos_section {
        margin-top: 150px;
    }

    .button_div_video {
        margin-top: 50px;
        text-align: center;
    }

    .button_to_videot {
        text-decoration: none;
        background-color: blue;
        color: white;
        padding: 10px 30px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 550;
        cursor: pointer;
    }


    /* Sektori kontaktit */
    #kontakt_section {
        padding-top: 50px;
        padding-bottom: 50px;
        margin-top: 100px;
        background-color: rgba(225, 217, 217, 0.297);
    }

    .para_text_2 {
        margin-top: 20px;
    }

    .kontakt_box_container {
        margin-top: 100px;
    }

    .box_kontakt_container {
        background-color: white;
        padding: 25px;
        margin-top: 20px;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .box_1_kontakt_container {
        margin-top: 0;
    }

    .sub_header_kontakt {
        font-weight: 500;
        font-size: 21px;
    }

    .text_description_kontakt {
        margin-top: 20px;
        font-size: 18px;
    }




    /* Komunitet section */
    #komunitet_section {
        margin-top: 150px;
    }

    .komunitet_box {
        width: 100%;
        background-image: linear-gradient(to right, rgba(6, 30, 151, 0.2),
                rgba(13, 33, 214, 0.25), rgba(3, 155, 211, 0.2));
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        min-height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid rgba(12, 106, 137, 0.2);
        border-radius: 20px;
        box-shadow: 0px 20px 30px 0px rgba(194, 185, 185, 0.7);
    }

    .para_text_3 {
        margin-top: 20px;
        font-weight: 400;
    }

    .sub_header_ready {
        font-size: 23px;
        font-weight: 400;
    }

    .komunitet_konsult {
        margin: 20px auto 0;
        padding: 5px 30px;
    }



    /* Sektori i footer */

    footer {
        margin-top: 200px;
        background-color: rgba(2, 2, 107, 0.85);
    }

    .box_footer_text {
        margin-top: 30px;
    }

    .footer_lists_t {
        display: flex;
        justify-content: space-between;
    }

    .title_lists_footer {
        color: white;
        font-size: 20px;
        margin-bottom: 5px;
        font-weight: 550;
    }

    .list_footer_text {
        display: block;
        width: fit-content;
        color: rgb(65, 249, 65);
        text-decoration: none;
        text-transform: capitalize;
        margin-top: 2px;
        font-size: 18px;
        font-weight: 450;
    }


    .describe_footer {
        padding-top: 20px;
        padding-bottom: 50px;
    }

    .footer_rights_text {
        margin-top: 100px;
    }

    #hr_footer_3 {
        border: 1px solid white;
        border-radius: 20px;
    }

    .rights_of_company {
        margin-top: 10px;
        color: white;
        font-size: 15px;
    }


    .social_media {
        margin-top: 50px;
        text-align: center;
    }

    .social_media_footer {
        text-decoration: none;
        text-transform: uppercase;
        color: rgb(225, 224, 224);
        font-size: 20px;
    }

    .instagram {
        margin-left: 40px;
    }


    /* faqja  e pergjegjsise */
    #pergjegjsi {
        margin-top: 75px;
    }

    .para_text_p {
        margin-top: 20px;
        font-size: 20px;
    }




    /* Videos section */

    .video {
        margin-top: 50px;
        padding: 0;
        margin-bottom: 0;
    }


    /* Videos buttons */

    .buttons_display {
        margin: 30px auto 0 auto;
        width: 100%;
        text-align: center;
    }


    .bttn_videos {
        padding: 12px 40px;
        font-size: 18px;
        border: none;
        border-radius: 30px;
    }


    .bttn_videos:hover {
        cursor: pointer;
    }

    .bttn_edukimi {
        background-color: rgba(171, 168, 168, 0.2);
        font-weight: 500;
    }

    .bttn_premium {
        margin-left: 5px;
        background-color: rgba(171, 168, 168, 0.2);
        font-weight: 500;
    }

    .bttn_videos.active {
        background-color: blue;
        color: white;
        font-weight: 550;
    }

    .edukimi_pako,
    .premium_pako {
        display: none;
    }


    .edukimi_pako.active,
    .premium_pako.active {
        display: block;
    }

    .bttn_kontakto_premium_box {
        margin-top: 10px;
    }


    .para_text_videot {
        margin-top: 50px;
        font-size: 19px;
        padding: 0;
        margin-bottom: 20px;
    }

    /* HOME GRID */

    #video_container {
        margin-top: 40px;
    }

    .videos_boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 50px;
    }

    .video_card {
        border-radius: 12px;
        transition: border .3s ease-out;
        border: 1px solid transparent;
    }

    .video_card:hover {
        border: 1px solid gray;
        cursor: pointer;
    }


    .video_image_box {
        position: relative;
    }

    .thumbnail {
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        background-size: cover;
    }

    .video_card_title {
        color: black;
        font-size: 20px;
        padding: 10px 0 0 10px;
        font-weight: 500;

    }

    /* PLAY BUTTON */

    .play_button {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -25%);
        width: 70px;
        height: 70px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
    }

    .play_button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);

        border-left: 25px solid white;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }

    .button_div_video_2 {
        margin: 50px 0;
        text-align: center;
    }

    .ballina_button {
        text-decoration: none;
        background-color: blue;
        color: white;
        padding: 10px 30px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 550;
        cursor: pointer;
    }

    /* MODAL */

    #video_modal {
        position: fixed;
        inset: 0;
        background: #0f0f0f;
        z-index: 9999;

        display: none;
        justify-content: center;
        align-items: flex-start;
        /* ndryshimi */

        padding-top: 40px;
        /* shto këtë */
        overflow-y: auto;
        /* shto këtë */
    }

    /* CONTENT */

    .modal_content {
        width: 100%;
        min-height: 90vh;

        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .container_modal {
        padding: 0 2%;
    }

    /* MAIN VIDEO */

    .main_video_box {
        flex: 3;
    }

    #modal_video {
        width: 100%;
        margin-top: 20px;
        object-fit: contain;
        /* ose contain */
    }

    /* TITLE */

    #video_title {
        color: white;
        font-weight: 550;
        margin-top: 5px;
        font-size: 22px;
        margin-left: 20px;
    }

    /* SIDEBAR */

    .video_sidebar {
        flex: 1;
        padding-top: 50px;
    }

    /* SIDEBAR VIDEO */

    .sidebar_video {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        cursor: pointer;
        padding: 8px;
        border-radius: 10px;
        position: relative;
    }

    .sidebar_video .video_duration {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: white;

        font-size: 12px;
        padding: 3px 6px;
        border-radius: 6px;
    }

    .sidebar_video img {
        width: 160px;
        height: 90px;
        object-fit: cover;
        border-radius: 10px;
    }

    .sidebar_video p {
        color: white;
        font-size: 17px;
    }

    .button_to_main_page {
        text-decoration: none;
        background-color: blue;
        color: white;
        padding: 10px 30px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 550;
        cursor: pointer;
    }

    /* ACTIVE VIDEO */

    .active_video {
        background: #2b2b2b;
    }

    /* HOVER */

    .sidebar_video:hover {
        background: #1d1d1d;
        transition: 0.3s;
    }

    /* CLOSE BUTTON */

    #back_bttn {
        position: absolute;
        top: 0;
        left: 15px;

        color: white;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        margin: 0;
        z-index: 10000;
    }


    /* video gjatesia */
    .video_duration {
        position: absolute;
        bottom: 10px;
        right: 10px;
        /* 👉 DJATHTAS */

        background: rgba(0, 0, 0, 0.7);
        color: white;

        font-size: 13px;
        padding: 4px 7px;
        border-radius: 6px;
    }


    /* premium alert */

    /* premium luck */
    .premium_lock {
        background-color: white;
        text-align: center;
        margin-top: 50px;
        padding: 30px 20px 50px;
        border-radius: 30px;
    }

    .text_description_alert {
        margin-top: 0;
    }

    .title_premium_box {
        font-size: 21px;
    }

    .para_text_premium_box {
        margin-top: 30px;
        text-align: left;
        margin-left: 20px;
    }

    .ul_premium_list {
        text-align: left;
        margin-top: 20px;
        font-size: 18px;
    }

    .inp_premium {
        margin-top: 50px;
    }

    #premium_code_input {
        width: 80%;
        padding: 8px 5px;
        font-size: 18px;
        border-radius: 5px;
        outline: 2px solid blue;
        border: none;
    }

    .bttn_Kycu {
        margin-top: 20px;
    }


    #bttn_kontakto_premium_box {
        margin-top: 10px;
    }

    .link_to_abonohu {
        color: black;
        text-decoration: none;
    }

    #premium_unlock_btn {
        background-color: blue;
        color: white;
        padding: 10px 30px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 550;
        border: none;
    }

    #premium_kontakto_btn {
        border: none;
        padding: 10px 30px;
        border-radius: 30px;
        font-size: 18px;
        background-color: rgba(171, 168, 168, 0.2);
        font-weight: 500;
    }

    .premium_videos_locked .videos_boxes,
    .premium_videos_locked .para_text_videot {
        display: none;
    }

    .premium_videos_unlocked .videos_boxes,
    .premium_videos_unlocked .para_text_videot {
        display: block;
    }

      /* Help list */
    #ndihme {
        margin-top: 50px;
    }

    /* contact form */

    .contact-form {
        width: 80%;
        background-color: white;
        margin: 0 auto;
        padding: 50px 0 70px;
        margin-top: 50px;
        border-radius: 50px;
        border-right: 3px solid rgba(183, 179, 179, 0.5);
        border-left: 3px solid rgba(183, 179, 179, 0.5);
    }

    #together_input_subdiv {
        width: 85%;
        margin: 0 auto;
    }

    .name_surname_input {
        display: block;
    }

    .input_f {
        margin-top: 19px;
        display: flex;
        flex-direction: column;
    }

    .label_f {
        font-size: 20px;
        font-weight: 500;
        color: rgb(82, 82, 82);
    }

    .input-field, .textarea-field {
        margin-top: 3px;
        font-size: 17.5px;
        padding: 8px 5px;
        border-radius: 5px;
        outline: none;
        border: 2px solid rgba(140, 135, 135, 0.6);
    }

    .textarea-field {
        resize: none;
        font-family: sans-serif;
    }

    .input-field:focus, .textarea-field:focus {
        outline: 2px solid blue;
    }

    .button_submit {
        margin-top: 40px;
        text-align: center;
    }

    .submit-btn {
        background-color: blue;
        color: white;
        padding: 10px 30px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 550;
        width: 100%;
        border: none;
    }

    .h2_title_p {
        margin-top: -20px;
    }


}