/* Global Styles */
* {
    margin: 0;
    padding: 0;
    font-family: Assistant, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

/* Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 5rem; /* 80px */
    border-bottom: 0.0625rem solid #b6b1b1; /* 1px */
}

.myntra_home {
    height: 2.8125rem; /* 45px */
}

.logo {
    margin: 4%;
}

.action_bar {
    display: flex;
    justify-content: space-evenly;
    min-width: 12.5rem; /* 200px */
    margin-right: 4%;
}

/* Navigation Bar */
.nav_bar {
    display: flex;
    justify-content: space-evenly;
    min-width: 31.25rem; /* 500px */
}

.nav_bar a {
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.01875rem; /* 0.3px */
    color: #282c3f;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.6875rem 0; /* 27px */
    border-bottom: 0.3125rem solid #ffffff; /* 5px */
    position: relative;
}

.nav_bar a:hover {
    border-bottom: 0.25rem solid #f54e77; /* 4px */
}

.nav_bar a sup {
    color: #ff3f6c;
    font-size: 0.625rem; /* 10px */
}

/* Search Bar */
.search_bar {
    height: 2.5rem; /* 40px */
    min-width: 12.5rem; /* 200px */
    width: 30%;
    display: flex;
    align-items: center;
}

.search_icon {
    box-sizing: content-box;
    height: 1.25rem; /* 20px */
    padding: 0.625rem; /* 10px */
    background-color: #f5f5f6;
    color: #282c3f;
    font-weight: 300;
    border-radius: 0.25rem 0 0 0.25rem; /* 4px */
}

.search_input {
    color: #696e79;
    background-color: #f5f5f6;
    flex-grow: 1;
    height: 2.5rem; /* 40px */
    border: 0;
    border-radius: 0 0.25rem 0.25rem 0; /* 4px */
}

/* Action Bar */
.action_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Banner */
.banner_container {
    margin: 2.5rem 0; /* 40px */
}

.banner_image {
    width: 100%;
}

/* Category Heading */
.category_heading {
    text-transform: uppercase;
    color: #3e4152;
    letter-spacing: 0.09375rem; /* 0.15em */
    font-size: 1.125rem; /* 18px */
    margin: 3.125rem 0 0.625rem 1.875rem; /* 50px 0 10px 30px */
    max-height: 5em;
    font-weight: 700;
}

/* Category Items */
.category_items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.sale_item {
    width: 15.625rem; /* 250px */
}

/* Footer */
footer {
    height: 3.4375rem; /* 55px */
    background-color: #f7f7f7;
    padding-top: 1.75rem; /* 28px */
    font-size: 0.875rem; /* 14px */
    color: #696b79;
    text-decoration: none;
    font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 0.01875rem; /* 0.3px */
}

footer a {
    cursor: pointer;
    color: #696b79;
    text-decoration: none;
    font-weight: 500;
}

.footer-container {
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    padding-left: 13.75rem; /* 220px */
    padding-right: 13.75rem; /* 220px */
}

.row {
    display: flex;
    margin-bottom: 1.25rem; /* 20px */
}

.online-shopping,
.customer-policies,
.app {
    text-align: left;
    margin-right: 3.125rem; /* 50px */
}

.content-heading {
    color: black;
    font-weight: 600;
    letter-spacing: normal;
}

.content-box {
    line-height: 1.6;
}

.para-content {
    margin-top: 1.5625rem; /* 25px */
    margin-bottom: 2.5rem; /* 40px */
}

.copyright-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.875rem; /* 30px */
}

.horizontal-line {
    margin-bottom: 1.875rem; /* 30px */
    opacity: 0.2;
    height: 0.01875rem; /* 0.3px */
}

.office-address-content {
    opacity: 0.9;
    margin-bottom: 1.875rem; /* 30px */
}

.other-info-heading {
    font-weight: 600;
    letter-spacing: normal;
    color: black;
    font-size: 0.9375rem; /* 15px */
    opacity: 0.8;
}

.other-info-para-content {
    margin-top: 0.5rem; /* 8px */
    margin-bottom: 1.875rem; /* 30px */
    font-size: 0.8125rem; /* 13px */
    opacity: 0.8;
}

.download-button {
    display: flex;
    margin-top: 1.875rem; /* 30px */
}

.download-button img {
    width: 8.125rem; /* 130px */
    height: 2.5rem; /* 40px */
}

.original {
    margin-bottom: 1.875rem; /* 30px */
    color: black;
    opacity: 0.8;
}

.customer-satisfaction {
    margin-bottom: 1.875rem; /* 30px */
}

.social-links {
    margin-top: 0.75rem; /* 12px */
}

.fb-icon,
.tw-icon,
.yt-icon {
    margin-right: 0.375rem; /* 6px */
}

/* Menu Container */
#menu-container {
    display: none;
    position: absolute;
    z-index: 1;
}

#menu-container ul li {
    padding: 0.9375rem 1.25rem; /* 15px 20px */
    font-weight: bold;
    border: 0.0625rem solid #ccc; /* 1px */
    background-color: #faf3f3;
}

#menu {
    list-style-type: none;
    padding: 0;
    background-color: #302424;
    border: 0.0625rem solid #ccc; /* 1px */
    padding: 1.25rem; /* 20px */
    font-weight: bold;
}

.nav_bar a:hover + #menu-container,
#menu-container:hover {
    display: block;
}

#menu-container li:hover {
    color: #282c3f;
    background-color: lightpink;
}

/* Hamburger Styles for Mobile View */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 0.3125rem; /* 5px */
    margin-right: 1.25rem; /* 20px */
}

.hamburger span {
    width: 1.5625rem; /* 25px */
    height: 0.1875rem; /* 3px */
    background-color: #333;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav_bar {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 5rem; /* 80px */
        left: 0;
        background-color: white;
        width: 100%;
        z-index: 1000;
    }

    .nav_bar.active {
        display: flex;
    }

    .nav_bar a {
        padding: 0.9375rem 1.25rem; /* 15px 20px */
        border-bottom: 0.0625rem solid #ddd; /* 1px */
    }
}