@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Assistant, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Navbar Css Start */

.top_Header_Nav{
height: 5rem;
display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 2.4rem 0px 2.8rem;
    position: fixed;
    background-color: #fff;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .05);
      z-index: 10;
       
      
}




.topNavLeft{
  /* background-color: olive; */
display: flex;
align-items: center;
justify-content: space-around;
gap: 2rem;
}

.topNavRight {
    /* background-color: rgb(238, 238, 29); */
    display: flex;
align-items: center;
gap: 2rem;

}

.brandLogo img{
    /* background-color: rgb(130, 13, 13); */
height: 2.3rem;
width: 4.rem;
}

.navContent{
    /* background-color: aquamarine; */
    display: flex;
    gap: 2.1rem;
   
}
.navContent a{
    text-decoration: none;
    font-size: 0.875rem;
    letter-spacing: .3px;
    font-weight: 700;
    color: #282c3f;
}


.navContent a:hover{
 
            color: gray;
            text-decoration: underline;
            text-underline-offset: 2rem;
            
        text-decoration-thickness: 0.2rem;

       
}

.navContent .opt1 a:hover{
text-decoration-color: rgb(255, 0, 85);
}

.navContent .opt2 a:hover {
    text-decoration-color: #ff6513;
}

.navContent .opt3 a:hover {
    text-decoration-color: rgb(227, 11, 123);
}

.navContent .opt4 a:hover {
    text-decoration-color: rgb(255, 251, 35);
}

.navContent .opt5 a:hover {
    text-decoration-color: rgb(0, 192, 199);
}

.navContent .opt6 a:hover {
    text-decoration-color: rgb(226, 8, 255);
}

 .categoryContainer{
    display: none;
height: 400px;
    width: 600px;

    background-color: rgb(255, 255, 255);
    position: absolute;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
top: 5.1rem;
z-index: 0;
}

.navContent .opt1:hover .categoryContainer{
    display: block;
    
}



.query{
   

    background: #f5f5f6;
    color: #696e79;
height: 2.4rem;
width: 23rem;

        border: 1px solid #f5f5f6;
}

.topNavRight .query input{
all: unset;
/* height: 1.25rem; */
/* background-color: #282c3f; */
height: 1.25rem;
  width: 18rem;



}


.topNavRight .query button{
  all: unset;
  /* background-color: blueviolet; */
height: 1.25rem;
    width: 40px;
        padding: 8px 8px 10px 16px;
        cursor: pointer;
}

.topNavRight .action{
  
display: flex;
    gap: 2rem;
  background-color:#fff;
}

.topNavRight .action a{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
}
.topNavRight .action .iconName{
    color: #000;
        font-size: 12px;
        font-weight: 700;
        line-height: 6px;
    
}

.topNavRight .action i{
    height: 1.5rem;
    width: 1.5rem;
padding-left: 4px;
}

.fa-user ,.fa-heart,.fa-shopping-bag{
    color: #0c0202;

}


/* Main css start */

main{

    padding-top: 5rem;
   
}
.container1 img{
height: auto;
width: 100%;

padding: 22px 18px 6px 18px;

       
}


.container2{
    display: flex;
    width: 100%;
}

.container2 img{
   
    width: 100%;
}




/* carousel css */

.carouselContainer{
padding-top: 3rem;
}

.carousel_items {
    display: flex;
   flex-wrap: nowrap;
    overflow: hidden;
}

.carousel_item {
min-width: 100%;
height: 50vh;
  
    transition: all 0.5s linear;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}



.item1 {
    background-image: url("./Images/second.webp");
}

.item2 {
    background-image: url("./Images/forth.webp");
}

.item3 {
    background-image: url("./Images/seven.webp");
}

.item4 {
background-image: url("./Images/third.webp") 
}

.item5 {
    background-image: url("./Images/eight.webp");
}
.item6 {
    background-image: url("./Images/fifth.webp");
}
.item7 {
    background-image: url("./Images/first.webp");
}



/* Footer */
.footerDiv {
    background-color: #282c3f;
    height: 400px;
    width: 100%;
    
}
.footerDiv li{
    list-style: none;
margin-bottom: 18px;
}

.copyRight{
    color: #fff;
    background-color: #121212;
    text-align: center;
    padding: 1rem;
}

.contactToMe{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #f1f1f1;
    color: #84868e;
    padding: 4rem;
}

.contactToMe h3{
    color: #000;
}


.onlineShopping {
    text-align: start;
    
}

.contactDtails{
    text-align: start;
}

.myntraApp img{
    height: 42px;
}