/* --- Global Reset & Basics --- */
* {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background-color: white;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

/* --- Header Section --- */
.start {
    width: 100%;
    min-height: 40px;
    background-color: white;
    border-bottom: 1px solid #ddd;
}

.rect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.for-flex1 {
    display: flex;
    gap: 15px;
    align-items: center;
}

.for-flex1 img {
    height: 18px;
    width: auto;
}

.free {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

/* --- Global Reset --- */
* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* --- Hero Section --- */
.frontpage {
    width: 100%;
    height: 85vh;
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761151161/bata1_hua2bi.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
}

.bata {
    width: 100%;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logos */
.logo-mobile {
    display: none;
}

.logo-desktop img {
    width: 100px;
}

.name {
    display: flex;
    gap: 20px;
}

.name a {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.for-flexten {
    display: flex;
    gap: 15px;
    align-items: center;
}

.s_box input {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 15px;
    border-radius: 4px;
    color: white;
    width: 200px;
}

.s_box input::placeholder {
    color: white;
    opacity: 0.8;
}

.three {
    display: flex;
    gap: 15px;
    align-items: center;
}

.three img {
    width: 24px;
    filter: brightness(0) invert(1);
}

/* Hero Gender Buttons */
.for-flex_gender {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}

.gender-btn a {
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Promo Sections (2 Columns) --- */
.photo-section {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    /* Allows stacking on mobile */
}

.promo-card {
    width: 50%;
    height: 70vh;
    background-size: cover;
    background-position: center;
    /* Keeps image centered */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Images */
.juti1 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761209932/imgi_1527_desk_editorials_banner_1A_bata_aj5msg.jpg");
}

.juti2 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761209930/imgi_277_banner2_desktop_cklsft.jpg");
}

.juti3 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217669/imgi_1554_NS-2-Editorial-banner-2-columns-Desktop-1920x2276_fk7s8b.jpg");
}

.juti4 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217671/imgi_1557_1920x2276_ow8yj0.jpg");
}

.overlay-content,
.overlay-content-bottom {
    text-align: center;
}

.online-tag,
.on-tag {
    background: #e21b1b;
    color: white;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
}

.on-tag {
    background: rgba(0, 0, 0, 0.7);
}

.links {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.links a,
.strike-text,
.big-links div {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 18px;
    text-decoration: underline;
}

.strike-text {
    font-size: 32px;
    text-decoration: none;
    margin: 10px 0;
}

.shop-btn {
    background: white;
    color: black;
    padding: 10px 30px;
    font-weight: bold;
    margin-top: 15px;
    display: inline-block;
}

/* --- Collections (3 Columns) --- */
.three_photo {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.collection-card {
    width: 33.33%;
    height: 80vh;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 3rem;
}

.photo_one {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217669/imgi_1544_Banner_Desktop_Bata_Festive_Men_1280x2276_evqzml.jpg");
}

.photo_two {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217671/imgi_1547_Banner_Desktop_Bata_Festive_Women-1_1280x2276_o9z3n1.jpg");
}

.photo_three {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217672/imgi_1550_BBG_Banner_Desktop_1280x2276_hailat.jpg");
}

.time {
    color: white;
    font-size: 28px;
    font-weight: 800;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    text-align: center;
}

.single {
    color: white;
    font-size: 20px;
    text-decoration: underline;
    margin-top: 10px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* ========================================= */
/* --- RESPONSIVE MEDIA QUERIES --- */
/* ========================================= */

/* TABLET (Max Width: 1024px) */
@media (max-width: 1024px) {

    /* Adjust Navbar */
    .bata {
        padding: 10px 15px;
    }

    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
    }

    .logo-mobile img {
        width: 80px;
    }

    .name {
        display: none;
        /* Hide nav links on tablet/mobile */
    }

    /* Adjust Heights for Tablet */
    .frontpage {
        height: 60vh;
    }

    /* Promo Cards */
    .promo-card {
        height: 50vh;
        background-position: center top;
        /* Focus on top part of image */
    }

    /* Collection Cards */
    .collection-card {
        height: 50vh;
    }

    .time {
        font-size: 20px;
    }
}

/* MOBILE (Max Width: 768px) */
@media (max-width: 768px) {

    /* Hide Search on Mobile */
    .s_box {
        display: none;
    }

    /* Hero Section */
    .frontpage {
        height: 50vh;
        background-position: center;
    }

    /* STACKING & IMAGE FIX */
    /* 1. We make width 100% so they stack */
    /* 2. We reduce height to 40vh. This maintains a 'landscape' shape 
          similar to the original image, so less is cut off. */

    .promo-card {
        width: 100%;
        height: 40vh;
        /* Reduced height prevents image cropping on sides */
        margin-bottom: 2px;
    }

    .collection-card {
        width: 100%;
        height: 40vh;
        /* Reduced height prevents image cropping */
        margin-bottom: 2px;
        padding-bottom: 20px;
    }

    /* Adjust Text Sizes for Mobile */
    .online-tag,
    .on-tag {
        font-size: 12px;
        padding: 4px 10px;
    }

    .strike-text {
        font-size: 24px;
    }

    .links a,
    .big-links div {
        font-size: 16px;
    }

    .time {
        font-size: 22px;
    }

    .single {
        font-size: 18px;
    }

    .shop-btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    /* Buttons position in Hero */
    .for-flex_gender {
        bottom: 20px;
        gap: 20px;
    }

    .gender-btn a {
        font-size: 16px;
    }
}

/* --- Navbar / Hero Header --- */
.frontpage {
    width: 100%;
    height: 85vh;
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761151161/bata1_hua2bi.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
}

.bata {
    width: 100%;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

/* Mobile specific logo handling */
.logo-mobile {
    display: none;
}

.logo-desktop img {
    width: 100px;
}

.name {
    display: flex;
    gap: 20px;
}

.name a {
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

.for-flexten {
    display: flex;
    gap: 15px;
    align-items: center;
}

.s_box input {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 8px 15px;
    border-radius: 4px;
    color: white;
    width: 200px;
}

.s_box input::placeholder {
    color: white;
    opacity: 0.8;
}

.three {
    display: flex;
    gap: 15px;
    align-items: center;
}

.three img {
    width: 24px;
    filter: brightness(0) invert(1);
}

/* Hero Buttons */
.for-flex_gender {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
}

.gender-btn a {
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Promo Sections (2 Column) --- */
.photo-section {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    /* Allows stacking on mobile */
}

.promo-card {
    width: 50%;
    height: 70vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Backgrounds */
.juti1 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761209932/imgi_1527_desk_editorials_banner_1A_bata_aj5msg.jpg");
}

.juti2 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761209930/imgi_277_banner2_desktop_cklsft.jpg");
}

.juti3 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217669/imgi_1554_NS-2-Editorial-banner-2-columns-Desktop-1920x2276_fk7s8b.jpg");
}

.juti4 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217671/imgi_1557_1920x2276_ow8yj0.jpg");
}

.overlay-content,
.overlay-content-bottom {
    text-align: center;
}

.online-tag,
.on-tag {
    background: #e21b1b;
    color: white;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
}

.on-tag {
    background: rgba(0, 0, 0, 0.7);
}

.links {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.links a,
.strike-text,
.big-links div {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 18px;
    text-decoration: underline;
}

.strike-text {
    font-size: 32px;
    text-decoration: none;
    margin: 10px 0;
}

.shop-btn {
    background: white;
    color: black;
    padding: 10px 30px;
    font-weight: bold;
    margin-top: 15px;
    display: inline-block;
}

/* --- Collections (3 Column) --- */
.three_photo {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.collection-card {
    width: 33.33%;
    height: 80vh;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.photo_one {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217669/imgi_1544_Banner_Desktop_Bata_Festive_Men_1280x2276_evqzml.jpg");
}

.photo_two {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217671/imgi_1547_Banner_Desktop_Bata_Festive_Women-1_1280x2276_o9z3n1.jpg");
}

.photo_three {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761217672/imgi_1550_BBG_Banner_Desktop_1280x2276_hailat.jpg");
}

.time {
    color: white;
    font-size: 28px;
    font-weight: 800;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.single {
    color: white;
    font-size: 20px;
    text-decoration: underline;
    margin-top: 10px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* --- Products --- */
.blacks {
    font-size: 24px;
    font-weight: bold;
    margin: 40px 20px 20px;
}

.variety-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 items desktop */
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 40px;
}

.product-card {
    border: 1px solid #f0f0f0;
}

.back_img {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: background-image 0.3s ease-in-out;
}

/* Product Images & Hover Animation */
.img-1 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283338/6618113_1_csppac.jpg");
}

.img-1:hover {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283332/6618113_2_tsjyst.jpg");
}

.img-2 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283332/7798454_1_k1riok.jpg");
}

.img-2:hover {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283332/7798454_2_y6los0.jpg");
}

.img-3 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283331/8396212_1_bg079x.jpg");
}

.img-3:hover {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283331/8396212_2_jgm5ml.jpg");
}

.img-4 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283331/8396788_1_xrfcce.jpg");
}

.img-4:hover {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761283331/8396788_2_sze4e8.jpg");
}

.titles {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.n {
    font-weight: bold;
}

.h_symbol img {
    width: 20px;
}

.G_Box {
    padding: 10px;
}

.Bcolor {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.BGcolor {
    font-weight: bold;
    font-size: 14px;
}

.plus img {
    width: 20px;
    cursor: pointer;
}

.colors {
    font-size: 14px;
    color: #555;
}

.mrp {
    font-size: 12px;
    color: #888;
}

.no {
    font-weight: bold;
}

/* --- Discounts --- */
.red {
    display: flex;
    width: 100%;
}

.red_contain,
.red_contain1 {
    width: 33.33%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #b91c1c;
    transition: background-color 0.3s;
}

.red_contain1 {
    background-color: #dc2626;
}

.red_contain:hover,
.red_contain1:hover {
    background-color: #7f1d1d;
}

.red_text {
    color: white;
    font-weight: 800;
    font-size: 32px;
}

/* --- Brands --- */
.floatzs {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.brand-card {
    width: 33.33%;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, filter 0.3s;
}

.floatz {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325667/imgi_1633_1-floats_ju1mnf.jpg");
}

.nine_west {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325667/imgi_1635_2-nine-west_pzrjnz.jpg");
}

.hush {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325669/imgi_1637_HP-1-Editorial-banner-low-2-columns-Desktop-1280x854_bzglo1.jpg");
}

.brand-card:hover {
    transform: scale(0.98);
    filter: brightness(0.7);
}

.f_text,
.N_text,
.W_text {
    font-size: 32px;
    color: white;
    font-weight: 900;
    text-shadow: 2px 2px 5px black;
}

/* --- Collections Grid --- */
.our {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 30px 0;
}

.onlineer {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.cat-card {
    width: 25%;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, filter 0.3s;
}

.fest {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325668/imgi_291_960x1280-px-_-Desktop-10by10-sneaker-collection_ids2jg.jpg");
}

.fest2 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325668/imgi_292_960x1280-px-_Desktop---10by10-Wedding-collection_dn4scy.jpg");
}

.fest3 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325668/imgi_293_960x1280-px-_Desktop---Exclusive-online_javbus.jpg");
}

.fest4 {
    background-image: url("https://res.cloudinary.com/dtw64z2mf/image/upload/v1761325668/imgi_294_960x1280-px-_Desktop---Exclusive-online-2_a9xuao.jpg");
}

.cat-card:hover {
    transform: scale(0.98);
    filter: brightness(0.8);
}

.red_texts {
    color: white;
    font-weight: 800;
    font-size: 24px;
    text-align: center;
    text-shadow: 2px 2px 5px black;
}

/* --- Footer --- */
.l_main {
    background-color: #f8f8f8;
    padding: 50px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.l_box1 {
    width: 30%;
}

.l_box2 {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.l_box21 {
    width: 23%;
    margin-bottom: 20px;
}

.red_textsb {
    color: #d60000;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.benifit {
    color: #555;
    margin-bottom: 20px;
    font-size: 16px;
}

.tomato_box {
    background: #d60000;
    color: white;
    padding: 10px 20px;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
}

.bc1 {
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
    opacity: 0.6;
}

.bc {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    cursor: pointer;
}

.bc:hover {
    text-decoration: underline;
}

.find_store {
    background: #f8f8f8;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd;
    flex-wrap: wrap;
}

.find {
    display: flex;
    gap: 30px;
    align-items: center;
}

.loco,
.loco1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 14px;
}

.w img {
    width: 30px;
}

.icon_five img {
    height: 30px;
    width: auto;
}

.last_one {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #666;
}

/* ========================================= */
/* RESPONSIVE MEDIA QUERIES                  */
/* ========================================= */

/* TABLET (1024px and below) */
@media screen and (max-width: 1024px) {
    .promo-card {
        height: 50vh;
    }

    .collection-card {
        height: 50vh;
    }

    .variety-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 items per row */
    }

    .l_box1 {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
    }

    .l_box2 {
        width: 100%;
    }

    .l_box21 {
        width: 48%;
    }

    /* 2 cols footer links */
}

/* MOBILE (768px and below) */
@media screen and (max-width: 768px) {

    /* Header */
    .rect {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }

    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: block;
    }

    .logo-mobile img {
        width: 80px;
    }

    .name {
        display: none;
    }

    /* Hide Nav links on mobile */
    .s_box {
        display: none;
    }

    /* Hide search on mobile */

    .bata {
        padding: 10px;
        justify-content: space-between;
    }

    .for-flexten {
        gap: 10px;
    }

    .frontpage {
        height: 60vh;
    }

    /* Stack Sections Vertically */
    .photo-section {
        flex-direction: column;
    }

    .promo-card {
        width: 100%;
        height: 50vh;
        margin-bottom: 5px;
    }

    .three_photo {
        flex-direction: column;
    }

    .collection-card {
        width: 100%;
        height: 50vh;
        margin-bottom: 5px;
    }

    .variety-grid {
        grid-template-columns: 1fr;
        /* 1 item per row */
    }

    .red {
        flex-direction: column;
    }

    .red_contain,
    .red_contain1 {
        width: 100%;
        height: 15vh;
    }

    .red_text {
        font-size: 24px;
    }

    .floatzs {
        flex-direction: column;
    }

    .brand-card {
        width: 100%;
        height: 40vh;
        margin-bottom: 5px;
    }

    .onlineer {
        flex-wrap: wrap;
    }

    .cat-card {
        width: 50%;
        height: 30vh;
    }

    /* 2x2 grid for categories */

    /* Footer Stack */
    .l_box21 {
        width: 50%;
    }

    .find_store {
        flex-direction: column;
        gap: 15px;
    }

    .find {
        flex-direction: column;
        width: 100%;
    }

    .gender-btn a {
        font-size: 16px;
    }
}