* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.top_nav_container {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(238, 233, 233);
}

.nav_logo_container {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav_logo_container img {
    width: 45px;
    height: 25px;
    margin-left: 20px;
}

.nav_bar_menu {
    width: 30%;
    height: 100%;

}

.nav_bar_menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
}

.nav_bar_menu ul li {
    list-style: none;
}

.nav_bar_menu ul li a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}

header {
    position: sticky;
    top: -40px; 
    z-index: 1000;
    background-color: white; 
}

.bottom_nav_container {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nike_logo_container {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
}

.nike_logo_container img {
    width: 100px;
    height: 50px;
}

.center_menu_container {
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center_menu_container ul {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 13px;
}

.center_menu_container ul li {
    list-style: none;
}

.center_menu_container ul li a {
    text-decoration: none;
    font-size: 18px;
    color: black;
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease;
}

.center_menu_container ul li a:hover {
    border-bottom: 2px solid black;
}



.bottom_nav_left_container {
    width: 25%;
    height: 100%;
    display: flex;
}

.search_container {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input_container {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    border-radius: 20px;
    background-color: rgb(236, 231, 231);
}

.input_container input {
    border: none;
    padding-left: 10px;
    background-color: transparent;
    font-size: 18px;
    outline: none;
}



.cart_container {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 18px;
}

.heart_container {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.heart_container:hover {
    background-color: rgb(196, 186, 186);
    transition: 0.7s ease;
}

    .bag_container {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.bag_container:hover {
    background-color: rgb(196, 186, 186);
    transition: 0.7s ease;
}

.main_logo_container {
    width: 100%;
    height: 100vh;
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_2279,c_limit/d717eaeb-44a2-4bfc-a2fb-417298a3c288/nike-just-do-it.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end
}

.banner_text {
    width: 700px;
    height: 300px;
    color: white;
    padding-left: 30px;

}

.banner_text h1 {
    font-size: 56px;
    font-weight: 800;
    margin-top: 65px;
}

.banner_text p {
    font-size: 25px;
}

.btn_1 {
    width: 75px;
    height: 40px;
    border: none;
    background-color: rgb(236, 231, 231);
    border-radius: 20px;
}

.btn_1:hover {
    background-color: rgb(196, 186, 186);
}

.section_grid_container {
    width: 93%;
    height: 150vh;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.banner-base {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.section_banner_1 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_1061,c_limit/82956428-9d58-48b9-81e1-47378548c0fb/nike-just-do-it.jpg);

}

.section_banner_2 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_1061,c_limit/73756532-3a44-46ad-894b-a9b1ba08a37f/nike-just-do-it.png);
   
}

.section_banner_3 {
    background-image: url(https://cdn.shopify.com/s/files/1/0603/3031/1875/articles/Nike_Air_Max_Day-2.jpg?v=1643944253);
   
}

.section_banner_4 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_1061,c_limit/1c2c38c3-afef-4187-bc22-a75e88462681/nike-just-do-it.jpg);
   
}

.small_banner_text {
    width: 500px;
    height: 200px;
    margin-left: 45px;
    color: white;
    padding-top: 20px;
    font-weight: 500;
}

.small_banner_text h3 {
    font-weight: 600;
    margin-bottom: 30px;
}



.btn_2 {
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 20px;
    color: black;
    font-weight: 500;
    margin-right: 10px;
}

.btn_2:hover {
    background-color: rgb(196, 186, 186);
}

.btn_3 {
    width: 120px;
    height: 40px;
    border: none;
    border-radius: 20px;
    color: black;
    font-weight: 500;
}

.btn_3:hover {
    background-color: rgb(196, 186, 186);
}

.btn_4 {
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 20px;
    color: black;
    font-weight: 500;
}

.btn_4:hover {
    background-color: rgb(196, 186, 186);
}

.main_logo2_container {
    width: 100%;
    height: 100vh;
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_2283,c_limit/a509d724-e1f8-43ca-989e-c4ab89ae8464/nike-just-do-it.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end
}

.section_h1 {
    width: 30%;
    height: 60px;
    margin-top: 60px;
    margin-bottom: 20px;
    margin-left: 100px;
}

.carussel_grid_container {
    width: 100%;
    height: 350px;
    display: grid;
    grid-template-columns: repeat(9, 450px);
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

}

.banner_basse {
     background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: 40px;
    padding-left: 40px;
}

.section_banner_5 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/b5449146-ce0b-462f-bf97-67650e9183c6/nike-just-do-it.png);
   
}

.section_banner_6 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/7cc8d3dc-56e8-4e6c-83c6-87e1a5b865cd/nike-just-do-it.png);
    
}

.section_banner_7 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/e9097b94-cc80-4316-9cf2-dee76a1b0b52/nike-just-do-it.png);
   
}

.section_banner_8 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/02c122bf-c286-4a71-b16d-618e25ebebee/nike-just-do-it.png);

}

.section_banner_9 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/0ddf45b9-cc38-4783-bc50-e5782b1cdee0/nike-just-do-it.png);
   
}

.section_banner_10 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/6563d85b-844a-410c-a57f-cfe5108ed169/nike-just-do-it.png);
   
}

.section_banner_11 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/276822a0-2d50-41fc-9431-0a66b1c8aff3/nike-just-do-it.png);
    
}

.section_banner_12 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/8121a303-0994-41a0-8ebb-dcfa3b862bbd/nike-just-do-it.png);
   
}

.section_banner_13 {
    background-image: url(https://static.nike.com/a/images/f_auto/dpr_1.3,cs_srgb/h_467,c_limit/a9cebb9e-1486-4965-8ac4-42f9b3833590/nike-just-do-it.png);
  
}

.products_container {
    width: 60%;
    height: 300px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.product_lis1_1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.product_lis1_1 a {
    text-decoration: none;
    padding: 5px;
    transition: 0.3s;
    color: gray;
    font-size: 16px;
    font-weight: 700;
}

.product_lis1_1 a:hover {
    color: black;
}

.product_lis1_2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.product_lis1_2 a {
    text-decoration: none;
    padding: 5px;
    transition: 0.3s;
    color: gray;
    font-size: 16px;
    font-weight: 700;
}

.product_lis1_2 a:hover {
    color: black;
}

.product_lis1_3 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.product_lis1_3 a {
    text-decoration: none;
    padding: 5px;
    transition: 0.3s;
    color: gray;
    font-size: 16px;
    font-weight: 700;
}

.product_lis1_3 a:hover {
    color: black;
}

.product_lis1_4 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.product_lis1_4 a {
    text-decoration: none;
    padding: 5px;
    transition: 0.3s;
    color: gray;
    font-size: 16px;
    font-weight: 700;
   transition: 0.7s ease;
}

.product_lis1_4 a:hover {
    color: black;
    
}

.footer_grid_container {
    width: 100%;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.footer_grid_container p {
    cursor: pointer;
}

.footer_list_1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 45px;
}

.footer_list_2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.footer_list_3 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.footer_list_4 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 200px;
    padding-left: 15px;
}

.footer_bottom_container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    margin-top: 30px;
}

/* 960px და ქვემოთ */
@media (max-width: 960px) {

    /* 1. ნავიგაცია - ტექსტები და დაშორებები დავაპატარაოთ */
    .nav_bar_menu ul {
        gap: 10px;
    }
    
    .center_menu_container ul {
        gap: 15px;
    }

    /* ლოგოს კონტეინერი ცოტა დავაპატარავოთ */
    .nav_logo_container {
        width: 15%;
    }

    /* მენიუს კონტეინერს მეტი ადგილი მივცეთ */
    .nav_bar_menu {
        width: 80%; /* 30%-ის ნაცვლად */
    }

    /* ტექსტებს შორის დაშორება შევამციროთ */
    .nav_bar_menu ul {
        gap: 8px;
        justify-content: flex-end; /* მარჯვნივ მივაკრათ */
        padding-right: 15px;
    }

    .nav_bar_menu ul li a {
        font-size: 11px; /* ტექსტიც დავაპატარავოთ */
    }
    
    .center_menu_container ul li a {
        font-size: 15px;
    }

    /* 2. მთავარი ბანერი - ტექსტი ცოტა დავაპატარაოთ, რომ არ "გაიჭრას" */
    .banner_text {
        width: 90%; /* ფიქსირებული 700px-ის ნაცვლად პროცენტი უკეთესია */
    }

    .banner_text h1 {
        font-size: 40px;
    }

    /* 3. სექციის გრიდი - 2 სვეტი დავტოვოთ, მაგრამ სიმაღლე შევამციროთ */
    .section_grid_container {
        grid-template-columns: repeat(2, 1fr);
        height: auto; /* აუცილებელია, რომ კონტენტს მოერგოს */
    }

    .banner-base {
        height: 350px; /* სურათები უფრო პატარა გამოჩნდეს */
    }

    /* 4. ფუტერი - 4 სვეტის ნაცვლად 2 სვეტი (რომ არ გაიჭედოს) */
    .footer_grid_container {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 30px;
        padding-bottom: 50px;
    }
    
    .footer_list_1, .footer_list_2, .footer_list_3, .footer_list_4 {
        width: 100%;
        padding-left: 20px;
    }
}

/* 600px და ქვემოთ (მობილურებისთვის) */
@media (max-width: 600px) {
    .section_grid_container {
        grid-template-columns: 1fr; /* ყველაფერი ერთმანეთის ქვეშ */
    }
    
    .footer_grid_container {
        grid-template-columns: 1fr; /* ფუტერიც ერთ სვეტად */
    }
    
    .center_menu_container {
        display: none; /* მენიუ ქრება (აქ ბურგერ მენიუა საჭირო) */
    }
}