*{
    padding: 0px;
    margin: 0px;
}
body{
    background-color:rgb(238, 238, 238) ;
    font-family: Assistant,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    padding: 0px;
    margin: 0px;
}
img{
    width: 20px;
    height: 20px;
}
a{
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    color:black;
}
 nav{
    background-color: violet;
    /* padding: 40px 0px; */
    position: fixed;
    top: 0px;
    z-index: 3;
} 
.nav-area{
    display: grid;
    grid-template-columns:1fr 1.4fr; 
    background-color:rgb(255, 255, 255);
    padding: 0px 30px;
    
    height: 90px;
}
.nav-area .first-part{
    display: flex;
}
.logo{
    display: flex;
    align-items: center;
    margin-left: 10px;
}
img.myntra-logo{
    width: 50px;
    height: 35px;
}
.nav-area .first-part .nav-content{
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    margin: 0px 20px;
}
.nav-area .first-part .nav-content a{
    all:unset;
}
.nav-area .first-part .nav-content a div{
    color: rgb(29, 29, 28);
    margin: 35px 0px 0px 0px;
    padding: 5px 25px 34px 25px;
    display: flex;
    align-items: center;
    /* background-color: yellow; */
}
.nav-area .first-part .nav-content a div:hover{
    padding-bottom:31px ;
    border-bottom: 3px solid rgb(0, 0, 0);
    cursor: pointer;
}
.nav-area .first-part .nav-content a div.men:hover{
    border-bottom: 3px solid rgb(236, 33, 57);
}
.nav-area .first-part .nav-content a div.women:hover{
    border-bottom: 3px solid rgb(251, 79, 173);
}
.nav-area .first-part .nav-content a div.kids:hover{
    border-bottom: 3px solid rgb(255, 183, 49);
}
.nav-area .first-part .nav-content a div.home-living:hover{
    border-bottom: 3px solid rgb(247, 247, 20)
}
.nav-area .first-part .nav-content a div.beauty:hover{
    border-bottom: 3px solid rgb(74, 136, 250);
}
.nav-area .first-part .nav-content a div.studio:hover{
    border-bottom: 3px solid rgb(236, 33, 57);
}

.nav-area .first-part .nav-content a div span{
    color: rgb(242, 45, 78);
    font-size: 12px;
    margin: 2px;
    margin-top: -12px;
}
.nav-area .second-part{
    display: flex;
}
.nav-area .second-part .search-bar{
    display: flex;
    align-items: center;
}
.nav-area .second-part .search-bar div.search-image-area  {
    position: absolute;
    margin-left: 10px;
}
.nav-area .second-part .search-bar div.search-image-area img{
    width: 12px;
    height: 12px;
}
.nav-area .second-part .search-bar div input{
    font-size: 15px;
    font-family: Segoe UI Historic;
    color: rgb(65, 64, 64);
    padding: 8px 20px 8px 40px;
    width: 400px;
    height: 24px;
    border: none;
    border-radius: 3px;
    background-color: rgb(232, 232, 232);
}
.nav-area .second-part .search-bar div input:focus{
    background-color: white;
    outline: none;
    border:0.5px solid rgb(197, 197, 197)
}
.nav-area .second-part .details-area{
    display: flex;
    margin-left: 30px;
}
.nav-area .second-part .details-area div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 7px;
    padding: 0px 2px;
    align-items: center;
}
.nav-area .second-part .details-area div div img{
    width: 17px;
    height: 17px;
}

.nav-area .second-part .details-area div div {
    font-weight: bold;
    font-size: 11px;
    padding: 2px 0px;
}

/* Complete nav bar */

/* nav content */

.nav-hover-content{
    width: 1083px;
    margin-left:110px;
    margin-right:150px;
    visibility:hidden;
    position: absolute;
}
.nav-men-content,
.nav-women-content,
.nav-kids-content,
.nav-home-living-content,
.nav-beauty-content,
.nav-studio-content{
    background-color: rgb(255, 255, 255);
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    font-size: 14px;
    padding: 10px 20px;
    position: absolute;
    visibility: hidden;
    transition: .5s;
}

.col1,
.col1,.col2,.col3,.col4,.col5{
    padding: 5px 10px;
}
.col2,
.col4{
    background-color: rgb(246, 246, 246);
}
.nav-hover-content .category-heading {
       margin: 8px 0px;
}
.nav-hover-content .category-heading a{
    font-weight:bold;
    margin: 4px 0px;
}
.category-details .category-products{
    margin: 5px 0px;
}
.category-details .category-products a:hover{
    font-weight: bold;
}
.nav-men-content .category-heading a{
    color:rgb(242, 45, 78);
}

.nav-women-content .category-heading a{
    color:rgb(251, 79, 173);;
}
.nav-kids-content .category-heading a{
    color: rgb(255, 183, 49);
}
.nav-home-living-content .category-heading a{
    color:rgb(247, 247, 20);
}
.nav-beauty-content .category-heading a{
    color:rgb(74, 136, 250);
}
.nav-studio-content .category-heading a{
    color:rgb(242, 45, 78);
}
.category-products hr{
    background-color: violet;
    border :.5px solid rgb(212, 211, 211);
    margin: 15px 10px;
    margin-right: 20px;
}
.nav-profile-content {
    background-color: rgb(255, 255, 255);
    width: 303px;
    margin-left:950px;
    margin-right:150px;
    /* visibility: visible; */
    visibility:hidden;
    /* box-shadow: 5px -5px 30px 2px; */
}
.nav-profile-content .col1{
    margin: 2px 10px;
}
.login_button{
    margin: 15px 10px;
}
.login_button a{
    background-color: white;
    border: 1px solid rgb(227, 226, 226);
    padding: 5px 10px;
    margin: 5px 10px;
    color:rgb(246, 87, 114) ;
    font-weight: bold;
    font-size: 15px;
}

.login_button a:hover{
    background-color: rgb(234, 230, 230);
}

/* nav hovering part end */

/* main part of the page */
main{
    margin-top: 100px;
}
/*notification-area start*/
.notification-area{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: fixed;
    z-index: 2;
    margin:220px 0px 0px 1190px;
}

.notification-details{
    display: flex;
    margin: 20px;
    /* width: 400px; */
}
.notification-button{
    display: flex;

    align-items: end;
    /* background-color: rgb(143, 101, 101); */
    rotate: 270deg;
    
}
.notification-button .rotate-area{
    display: flex;
    color: white;
    background-color: rgb(0, 0, 0);
    padding: 10px;
    width: 280px;
    margin-top: 100px;
    cursor: pointer;
}

.notification-button .rotate-area .notification-type{
    /* background-color: violet; */
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    padding: 5px 10px;
}
.triangle-area{
    display: flex;
    padding-left: 10px;
    margin-left: 20px;
    
}
.triangle-area .triangle{
    border: 20px solid transparent;
    border-bottom: 20px solid white;
}


.hidden-notfication-area{
    display:flex;
    flex-direction: column;
    height: 300px;
    background-color: rgb(255, 228, 233);
}

.hidden-notfication-area .top-part{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px 30px;
    
}
.hidden-notfication-area .top-part .first{
    /* background-color: violet; */
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding: 5px 30px 6px 0px;
    margin-right: 29px;
    font-weight: bold;
} 
.hidden-notfication-area .top-part .first .avail{
    padding: 5px 0px 6px 9px;
    font-size: 12px;
}
.hidden-notfication-area .top-part .first .off{
    padding: 5px 0px;
    font-size: 32px;
}
.hidden-notfication-area .top-part .second{
    display: flex;
    justify-content: center;
}
.hidden-notfication-area .top-part .second img{
    width: 160px;
    height: 150px;
}
.hidden-notfication-area .middle-part{
    display: flex;
    padding: 5px 10px;
}
.hidden-notfication-area .middle-part .coupon-area{
    display: flex;
    padding: 5px 0px;
    font-weight: bold;
}
.hidden-notfication-area .middle-part .coupon-area .coupon-code-heading{
    margin-right: 10px;
}
.hidden-notfication-area .middle-part .notice-about-coupon{
    font-size: 14px;
    font-family: 'Arial Narrow';
    color: rgb(92, 90, 90);
}
.hidden-notfication-area .middle-part .second{
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.hidden-notfication-area .middle-part .second .sign-up-now-button a{
    background-color: rgb(254, 10, 87);
    padding: 12px 30px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-family:Segoe UI Historic;
}
.hidden-notfication-area .middle-part .second .sign-up-now-button a:hover{
    background-color: rgb(255, 40, 76);
}
.hidden-notfication-area .bottom-part{
    display:flex;
    justify-content: center;
    border-top:.7px solid rgb(209, 207, 207);
    color: rgb(62, 62, 62);
    font-size: 11px;
    font-weight: bold;
    margin-top: 5px;
    padding-top: 12px;
    font-family:Segoe UI Historic ;
}
.hidden-notfication-area .bottom-part .first{
    display: flex;
    align-items: center;
    margin: 0px 10px;
}
.hidden-notfication-area .bottom-part .first .logo img.icon{
    width: 30px;
    height: 30px;
    margin: 0px 1px;
}

.nofification-logo{
    display: flex;
    margin-right: 85px;
}
.nofification-logo img.notification-icon{
    width: 40px;
    height: 37px;
    padding: 3px;
    border: 2px solid skyblue;
    border-radius: 45px;
}
/*notification-area end*/
main.main-content div.front-banner .banner-image{
    display: flex;
    justify-content: center;
    margin: 25px 0px;
}
main.main-content div.front-banner .banner-image img.banner{
    width: 95%;
    height: 550px;
    transform: .5s;
}

.medel-worth-brands-to-bag-area,
.shop-by-category-area{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 30px 0px;
    padding: 30px 30px;
}
.medal-worthy-brands-to-bag-heading,
.shop-by-category-heading{
    font-size:24px ;
    font-weight: bold;
    color: rgb(54, 54, 54);
    padding: 70px 20px;
}
.products-area{
    display: flex;
    justify-content: center;
}
a.product-link{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgb(36, 36, 36);
}
.product .product-image img{
    width: 250px;
    height: 250px;
}
.product-band-image{
    display: flex;
    justify-content: center;
    padding: 10px 0px;
}
.product-band-image img{
    width: 200px;
    height: 75px;
}
.product-type{
    font-size: 15px;
    margin-left: 20px;

}
.discount{
    font-size: 18px;
    font-weight: bold;
    margin-left: 20px;
}
.shop-by-category-area{
    display: flex;
    flex-direction: column;

}
.shop-by-category-area .products-area a.product-link{
    margin: 10px 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.shop-by-category-area .products-area a.product-link .product img{
    width: 220px;
    height: 260px;
}
.shop-by-category-area .products-area a.product-link .product .product-details{
    display: flex;
    flex-direction: column;
    align-content: center;
    /* position:absolute; */
    background-color: rgb(242, 89, 23);
    color: rgb(255, 255, 255);
    opacity: .9; 
    margin-left:10px;
    margin-right:10px;
    margin-top: -92px;
    padding:  7px 20px;
}
.product .product-details .product-type{
    font-size: 14px;
    font-family: Segoe UI Historic;
}

.product .product-details .discount{
    font-size: 20px;
    font-family: Book Antiqua;   
    font-weight: bold;
}

.product .product-details .shop-now{
    font-size: 16px;
    font-family: Segoe UI Historic;    
}
/* main part end */