/* ==========================================
   MYNTRA STYLE HOMEPAGE CSS
========================================== */


/* GLOBAL */

.myntra-section,
.brand-section,
.product-slider-section,
.latest-section,
.offer-banner
{
    padding:60px 0;
}


.myntra-title
{
    font-size:32px;
    font-weight:700;
    margin-bottom:35px;
    color:#282c3f;
    text-transform:uppercase;
}



/* ==========================================
   HERO BANNER
========================================== */


.myntra-hero img
{
    width:100%;
    height:520px;
    object-fit:cover;
}



/* ==========================================
   CATEGORY SECTION
========================================== */


.category-grid
{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:30px;
}


.category-item
{
    text-align:center;
}



.category-item a
{
    text-decoration:none;
    color:#282c3f;
}



.category-circle
{
    width:160px;
    height:160px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    background:#f5f5f6;
    transition:.3s;
}



.category-circle img
{
    width:100%;
    height:100%;
    object-fit:cover;
}



.category-item:hover .category-circle
{
    transform:translateY(-8px);
}



.category-item h5
{
    margin-top:15px;
    font-size:17px;
    font-weight:600;
}



/* ==========================================
   BRAND SECTION
========================================== */


.brand-section
{
    background:#fafafa;
}



.brand-grid
{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}



.brand-card
{
    background:#fff;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    transition:.3s;
}



.brand-card img
{
    max-width:80%;
    max-height:70px;
}



.brand-card:hover
{
    transform:translateY(-5px);
}





/* ==========================================
   PRODUCT SLIDER
========================================== */


.product-slider
{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
}



.product-slider::-webkit-scrollbar
{
    display:none;
}





/* ==========================================
   PRODUCT CARD
========================================== */


.myntra-product-card
{
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    transition:.3s;
    min-width:240px;
}



.myntra-product-card:hover
{
    transform:translateY(-6px);
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}





.product-image-box
{
    height:300px;
    position:relative;
    background:#f5f5f6;
}



.product-image-box img
{
    width:100%;
    height:100%;
    object-fit:cover;
}




.wishlist-icon
{
    position:absolute;
    top:15px;
    right:15px;
    
    background:#fff;
    width:35px;
    height:35px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}





.product-info
{
    padding:15px;
}



.product-info h6
{
    font-size:14px;
    color:#535766;
    margin-bottom:5px;
}



.product-info p
{
    font-size:15px;
    color:#282c3f;
    height:40px;
}



.product-price
{
    font-size:18px;
    font-weight:700;
    margin:10px 0;
}




.buy-now-btn
{
    display:block;
    background:#ff3f6c;
    color:white;
    text-align:center;
    padding:10px;
    border-radius:5px;
    text-decoration:none;
    font-weight:600;
}



.buy-now-btn:hover
{
    background:#e7335b;
    color:#fff;
}




/* ==========================================
   LATEST PRODUCTS
========================================== */


.latest-section
{
    background:#fafafa;
}





/* ==========================================
   OFFER BANNER
========================================== */


.offer-banner
{
    background:

    linear-gradient(
    90deg,
    rgba(255,63,108,.95),
    rgba(255,128,0,.9)
    ),

    url('../images/banner/offer.jpg');

    background-size:cover;
    background-position:center;

}



.offer-content
{
    text-align:center;
    color:white;
    padding:60px;
}



.offer-content h2
{
    font-size:42px;
    font-weight:700;
}



.offer-content p
{
    font-size:20px;
}




.offer-btn
{
    display:inline-block;
    background:white;
    color:#ff3f6c;
    padding:12px 35px;
    border-radius:5px;
    text-decoration:none;
    font-weight:700;
}






/* ==========================================
   RESPONSIVE
========================================== */


@media(max-width:992px)
{


.category-grid
{
    grid-template-columns:repeat(3,1fr);
}


.brand-grid
{
    grid-template-columns:repeat(3,1fr);
}



.myntra-hero img
{
    height:350px;
}


}



@media(max-width:576px)
{


.myntra-title
{
    font-size:24px;
}



.category-grid
{
    grid-template-columns:repeat(2,1fr);
}



.category-circle
{
    width:120px;
    height:120px;
}



.brand-grid
{
    grid-template-columns:repeat(2,1fr);
}



.product-image-box
{
    height:230px;
}



.offer-content h2
{
    font-size:28px;
}


}

/* =====================================
MYNTRA STYLE HEADER
===================================== */


.fashion-header
{
    background:#fff;
    height:80px;
    display:flex;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.08);

    position:sticky;
    top:0;
    z-index:999;
}



.fashion-navbar
{
    display:flex;
    align-items:center;
    gap:35px;
}





.fashion-logo img
{
    width:150px;
}




.fashion-menu ul
{
    display:flex;
    gap:30px;
    list-style:none;
    margin:0;
    padding:0;
}



.fashion-menu a
{
    text-decoration:none;
    color:#282c3f;
    font-weight:700;
    font-size:14px;
}



.fashion-menu a:hover
{
    color:#ff3f6c;
}




.fashion-search
{
    flex:1;
}



.fashion-search form
{
    display:flex;
    background:#f5f5f6;
    border-radius:5px;
    overflow:hidden;
}



.fashion-search input
{
    width:100%;
    border:none;
    background:transparent;
    padding:14px;
    outline:none;
}



.fashion-search button
{
    border:none;
    padding:0 20px;
    background:none;
}





.fashion-actions
{
    display:flex;
    gap:25px;
}



.fashion-actions a
{
    text-decoration:none;
    color:#282c3f;
    text-align:center;
    font-size:13px;
}



.fashion-actions i
{
    display:block;
    font-size:22px;
}




.mobile-menu-btn
{
    display:none;
}




@media(max-width:992px)
{


.fashion-navbar
{
    flex-wrap:wrap;
}


.mobile-menu-btn
{
    display:block;
    border:none;
    background:none;
    font-size:30px;
}



.fashion-menu
{
    width:100%;
}



.fashion-menu ul
{
    flex-direction:column;
}


.fashion-actions
{
    display:none;
}


}

/* =====================================
MEGA MENU
===================================== */


.mega-menu-list
{
    display:flex;
    gap:30px;
    list-style:none;
    margin:0;
    padding:0;
}



.mega-parent
{
    position:relative;
}



.mega-parent>a
{
    padding:30px 0;
    display:block;
}



.mega-dropdown
{
    position:absolute;

    top:78px;
    left:-30px;

    width:650px;

    background:#fff;

    display:none;

    padding:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

    border-radius:0 0 10px 10px;

    z-index:9999;

}



.mega-parent:hover .mega-dropdown
{
    display:flex;
}




.mega-column
{
    width:50%;
}



.mega-column h6
{
    color:#ff3f6c;
    font-weight:700;
    margin-bottom:20px;
}



.mega-column a
{
    display:block;

    color:#282c3f;

    text-decoration:none;

    padding:8px 0;

    font-size:14px;
}



.mega-column a:hover
{
    color:#ff3f6c;
}




.mega-image
{
    width:50%;
}



.mega-image img
{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
}





@media(max-width:992px)
{


.mega-dropdown
{
    position:static;
    width:100%;
}


.mega-parent:hover .mega-dropdown
{
    display:none;
}


}

/* =====================================
MYNTRA PRODUCT CARD
===================================== */


.myntra-product-card
{
    background:#fff;
    position:relative;
    border-radius:8px;
    overflow:hidden;
    transition:.3s;
}



.myntra-product-card:hover
{
    transform:translateY(-5px);

    box-shadow:
    0 8px 25px rgba(0,0,0,.12);
}




.product-image-box
{
    height:330px;
    position:relative;
    background:#f5f5f6;
}



.product-image-box img
{
    width:100%;
    height:100%;
    object-fit:cover;
}





.discount-badge
{
    position:absolute;

    bottom:10px;

    left:10px;

    background:#ff3f6c;

    color:white;

    padding:5px 10px;

    font-size:12px;

    font-weight:700;

    border-radius:3px;
}





.wishlist-icon
{
    position:absolute;

    right:12px;

    top:12px;


    background:#fff;

    width:35px;

    height:35px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    box-shadow:
    0 2px 10px rgba(0,0,0,.15);


}



.wishlist-icon i
{
    color:#282c3f;
}




.product-info
{
    padding:15px;
}



.product-brand
{
    font-size:15px;

    font-weight:700;

    color:#282c3f;
}



.product-info h6
{
    color:#535766;

    font-size:14px;

    margin:6px 0;

    height:35px;

}





.rating-box span
{
    background:#14958f;

    color:white;

    padding:3px 8px;

    font-size:12px;

    border-radius:3px;
}





.price-area
{
    margin:12px 0;
}



.selling-price
{
    font-size:16px;

    font-weight:700;

    color:#282c3f;
}




.old-price
{
    text-decoration:line-through;

    color:#7e818c;

    margin-left:8px;

    font-size:14px;
}




.discount-text
{
    color:#ff905a;

    font-size:13px;

    font-weight:600;

    margin-left:5px;
}





.buy-now-btn
{
    background:#ff3f6c;

    color:white;

    display:block;

    text-align:center;

    padding:10px;

    border-radius:5px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;
}



.buy-now-btn:hover
{
    background:#e7335b;

    color:white;
}

.product-slider
{
    display:flex;
    gap:20px;
    overflow-x:auto;
    padding-bottom:15px;
}



.product-slider .myntra-product-card
{
    min-width:260px;
}

.product-image-wrapper
{
    position:relative;
    width:100%;
    height:330px;
    overflow:hidden;
}



.product-image-wrapper img
{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:.4s;
}



.hover-product-image
{
    position:absolute;
    top:0;
    left:0;

    opacity:0;
}



.myntra-product-card:hover .hover-product-image
{
    opacity:1;
}



.myntra-product-card:hover .main-product-image
{
    opacity:0;
}

.hero-slider-image{
    width:100%;
    height:650px;
    object-fit:cover;
}

@media (max-width:768px){
    .hero-slider-image{
        height:300px;
    }
}

/* ================================
   FASHION HEADER
================================ */

.fashion-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 999;
}

.fashion-navbar {
    height: 80px;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 0 30px;
}


/* LOGO */

.fashion-logo img {
    width: 150px;
    height: auto;
    display: block;
}


/* MENU */

.fashion-menu {
    flex: 1;
}

.mega-menu-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-list li {
    position: relative;
}

.mega-menu-list a {
    text-decoration: none;
    color: #282c3f;
    font-size: 14px;
    font-weight: 600;
}


/* MEGA DROPDOWN */

.mega-dropdown {
    position: absolute;
    top: 35px;
    left: 0;
    width: 450px;
    background: white;
    display: none;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    border-radius: 8px;
    z-index: 999;
}


.mega-parent:hover .mega-dropdown {
    display: flex;
}


.mega-column {
    width: 50%;
}


.mega-column h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 15px;
}


.mega-column a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
}


.mega-image {
    width: 50%;
}


.mega-image img {
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:8px;
}



/* SEARCH */

.fashion-search {
    flex: 1;
}


.fashion-search form {
    display:flex;
    background:#f5f5f6;
    border-radius:8px;
    overflow:hidden;
}


.fashion-search input {
    flex:1;
    border:none;
    outline:none;
    padding:12px 15px;
    background:transparent;
}


.fashion-search button {
    border:none;
    padding:0 18px;
    background:none;
}



/* ACTIONS */

.fashion-actions {
    display:flex;
    gap:20px;
}


.fashion-actions a {
    text-decoration:none;
    color:#282c3f;
    text-align:center;
    font-size:13px;
}


.fashion-actions i {
    display:block;
    font-size:22px;
}



/* MOBILE BUTTON */

.mobile-menu-btn {
    display:none;
    border:none;
    background:none;
    font-size:28px;
}



/* =====================================
      TABLET
===================================== */

@media(max-width:992px){

    .fashion-navbar {
        height:auto;
        padding:15px;
        flex-wrap:wrap;
    }


    .fashion-logo img {
        width:120px;
    }


    .mobile-menu-btn {
        display:block;
        order:2;
    }


    .fashion-menu {
        order:5;
        width:100%;
    }


    .mega-menu-list {
        flex-direction:column;
        align-items:flex-start;
        padding:15px 0;
        gap:15px;
    }


    .mega-dropdown {
        position:static;
        width:100%;
        box-shadow:none;
        margin-top:10px;
    }


    .fashion-search {
        order:3;
        width:100%;
        flex:none;
    }


    .fashion-actions {
        order:4;
        margin-left:auto;
        gap:12px;
    }

}



/* =====================================
      MOBILE
===================================== */

/* ============================
   MOBILE RESPONSIVE HEADER
============================ */

.mobile-menu-btn {
    display: none;
}


@media (max-width: 992px) {

    .fashion-navbar {
        height: auto;
        padding: 12px 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }


    /* Logo */
    .fashion-logo {
        flex: 1;
    }


    .fashion-logo img {
        width: 120px;
    }


    /* Hamburger */
    .mobile-menu-btn {
        display: block;
        border: none;
        background: transparent;
        font-size: 28px;
        color: #282c3f;
    }


    /* Search */
    .fashion-search {
        order: 5;
        width: 100%;
        margin-top: 12px;
    }


    .fashion-search form {

        width:100%;
        height:42px;

        display:flex;
        align-items:center;

        background:#f5f5f6;
        border-radius:6px;

    }


    .fashion-search input {

        flex:1;
        height:100%;

        border:none;
        outline:none;

        padding:0 14px;

        background:transparent;

        font-size:13px;

    }


    .fashion-search button {

        width:45px;
        height:100%;

        border:none;
        background:none;

    }



    /* Menu */
    .fashion-menu {

        order:6;
        width:100%;

    }


    .mega-menu-list {

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        padding:15px 0;

        gap:15px;

    }


    .mega-menu-list li {

        width:100%;

    }


    .mega-menu-list a {

        font-size:14px;

    }



    /* Dropdown */
    .mega-dropdown {

        position:static;

        width:100%;

        margin-top:10px;

        box-shadow:none;

        display:none;

    }


    .mega-parent:hover .mega-dropdown {

        display:block;

    }


    .mega-column,
    .mega-image {

        width:100%;

    }


    .mega-image {

        margin-top:15px;

    }



    /* Right icons */

    .fashion-actions {

        display:flex;

        gap:12px;

    }


    .fashion-actions span {

        display:none;

    }


    .fashion-actions i {

        font-size:22px;

    }

}





/* ============================
   SMALL MOBILE
============================ */

@media(max-width:576px){


    .fashion-navbar {

        padding:10px 12px;

    }


    .fashion-logo img {

        width:110px;

    }


    .fashion-actions {

        display:none;

    }


    .mobile-menu-btn {

        font-size:26px;

    }


    .fashion-search {

        margin-top:8px;

    }


    .fashion-search input {

        font-size:12px;

    }

}
.offer{
    font-size: 12px;
}

.category-card{
    padding:0;
    margin:0;
    border:2px solid #f8c99b;
    overflow:hidden;
    background:#fff;
    text-align:center;
}

.category-img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
}

.category-content{
    padding:10px;
}

.category-content h6{
    margin:0 0 5px;
    font-size:18px;
}

.category-content .offer{
    margin:0 0 5px;
    font-size:24px;
    font-weight:700;
}

.category-content p{
    margin:0;
}