*{
    margin: 0px;
    padding: 0px;
}
 #nav{
    width: 100%;
    height: 6%;
    margin-top: -50px; 
     display: flex;
        justify-content: space-evenly;
       
        position: fixed;
    
       
        background-color: rgb(179, 212, 201);
        z-index: 100;
        
    } 


#nav>div{
 
    padding: 20px;
   
  
}
@media only screen and (max-width: 1000px) {
    /* Medium Screen  */
    .nav{
      flex-wrap: wrap;

    }
    
  }

   
/* ===========================nav1========================== */
@media only screen and (max-width: 10057px) {
    /* Medium Screen  */
  /* #img4{
    display: none;
  }   */
    
  }
  @media only screen and (max-width: 10032px) {
    /* Medium Screen  */
    #right{
        display: none;
        
        }
        #hover-underline-animation {
            display: none;
            
            
            
            }
    
  }
  @media only screen and (max-width: 10032px) {
    /* Medium Screen   */
    
         #parent{
            flex-wrap: wrap;
        flex-direction: row;
        }
        
    
  }
  @media only screen and (max-width: 500px) {
    /* Medium Screen  */
    
    #parent{
        display: none;
        
        
        }
        #left{
            display: none;
        }
        #right{
            display: none;
        }
        h1{
            display: none;
        }
        h4{
            display: none;
        
        }
        #left1{
        display: none;
        }   
       #img11{
        display: none;
       } 
    
  }

 #img11{
    width: 30px;
    height: 30px;
    margin-top: 8px;
 }
#parent{
width: 100%;
display: flex;
justify-content: space-between;
position: fixed;

background-color: white;
z-index: 100;

margin-top: -6px;
}
#left{
width:40%;
display: flex;
justify-content: space-between;
gap:40px;
margin-left: 40px;
}
#right{
display: flex;
justify-content: space-between;
margin-right:60px ;
gap:15px
}
h1{
font-size: 12px;
margin-top: 15px;
}
h4{
margin-bottom: 15px;

}
#left1{
display: flex;
}


#hover-underline-animation {
display: inline-block;
position: relative;
color: #111212;
/* border: 2px solid rgb(9, 156, 205); */
margin-top:16px;


}

#hover-underline-animation::before{
content: '';
position: absolute;
width: 97%;
transform: scaleX(0);
height: 0.8px;
bottom: 0;

background-color: #020202;

}

#hover-underline-animation:hover::before {
transform: scaleX(1);

} 
/* ===================================== */
#parent2{
width: 100%; 
display: flex;
justify-content: space-between;
position: fixed;
border: 1px solid rgb(191, 187, 187);
margin-top: 43px;
background-color: white;
z-index: 100;

}

#lefta{
width: 10%;
display: flex;
gap: 190%;
margin-left: 140px;

}
#righta{
margin-right: 80px;
/* align-items: center; */
display: flex;
}
#avtar,#cart-icon{
    /* margin-right: 180px; */
    width: 50px;
height: 50px;
    margin-top: 15px;
    
    }



*{
margin: 0px;
padding: 0%;
}



#man{
width:9000px;
height: 20px;
border:1px solid #e5e5e5;
padding: 7px;
border-radius: 40px;
margin-top: 20px;
background-color: #e5e5e5;
gap:10px;
display: flex;
}
input{
background: transparent;
height: 20px;
border: 0px;
outline: 0px;
width: 650px;


}
.icon-search{
color: rgb(5, 5, 5);
border: 1px solid red;
/* margin-top: -70px;
margin-left: -20px; */
} 
@media only screen and (max-width: 1500px) {
  
  #man{
    width: 500%;
  }
   #parent2{
    flex-wrap: wrap;
    flex-direction: row;
    
    }
    
    #lefta{
        flex-wrap: wrap;
        flex-direction: row;
  
    }
   
    #righta>img{
        /* flex-wrap: wrap;
    flex-direction: row; */
        display: none;
        }
    
    
}

/* -------------------------------------------------------------------------- */
#lowerNavBar{
    background-color: aquamarine;
    margin-top: -57px;
}
#subLowerNavBar{
    margin: auto;
    width: 98%;
    height: 5%;
    background-color: white;
    margin-top: 200px;
    position: fixed;
    border-bottom: 1px solid gray;
     padding-left: 50px;
     margin-right: 80px;
     border: 1 px solid red;
     z-index: 100;
    
    }
    #subLowerNavBar>ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1 px solid red;
    margin-top: 10px;
    margin-right: 160px;
    margin-left: 80px;
 
    }
    #subLowerNavBar>ul>li>a{
    font-size: 16px;
    color: rgb(51, 51, 51);
    font-weight: 500;
    font-style: large;
    line-height: 20px;
    border: 1 px solid red;
    text-align: center;
    margin-top: 90px;
    
    }
    #subLowerNavBar>ul>li>a:hover{
    color: rgb(23, 23, 23);
    font-style: normal;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    border: 1 px solid red;
    }
    #subLowerNavBar>ul>li:hover {
    border-bottom: 2px solid rgb(20, 19, 19);
    }
    
    .dropDownDivItems{
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
    }
    .dropDownDiv{
    width: 98%;
    margin: auto;
    margin-top: 1px;
    right: 0%;
    left: 0%;
    transition: 0.5s;
    position: absolute;
    display: none;
    background-color: white;
    border: 1px solid rgb(160, 158, 158);
    }
    #subLowerNavBar>ul>li:hover .dropDownDiv{
    display: block;
    }
    ul,li{
    list-style: none;
    }
    a{
    text-decoration: none;
    }
    .dropDownDivItems>div>h4{
    font-size: 20px;
    color: rgb(16, 54, 24);
    font-weight: 600;
    line-height: 20px;
    font-family: "Mier demi";
    }
    .dropDownDivItems>div>ul>li>a{
    font-size: 17px;
    color: rgb(102, 102, 102);
    font-weight: 450;
    line-height: 33px;
    }
    
   
    
@media only screen and (max-width: 800px) {
    /* Small Screen  */
    #subLowerNavBar{
        display: none;
     
      }

    
}

    

   
   /* ------------------------------------------------------------ */

/* .parent4{
    margin-top: 140px;
  

   border: 1 px solid red;
    background-color: rgb(254, 251, 251);
    z-index: -1;
  
} */


.viewimg>img{
  width:94%;
  
  margin-left: 60px;
  border: 1 px solid rgb(11, 25, 181);
 align-items: center;
 margin-top: 150px;
  
 
}

@media only screen and (max-width: 800px) {
    /* Small Screen  */
    .parent5{
        flex-wrap: wrap;
        flex-direction: row;
       
      }

    
}
.viewimg .btn{
    position: absolute;
  /* position: sticky; */
    top: 75%;
    left: 80%;
    transform: translate(-50% ,-50%);
    background-color: aliceblue;
    color: black;
    font-size: 16px;
    padding: 10px;
 
    cursor: pointer;
    border-radius: 1px;
    text-align: center;
   
   


}
.viewimg .btn:hover{
background-color: transparent;

}

 .parent5{
  display: flex;
  margin-top: 60px;
  align-items: center;
 
}
.img1{

margin-top: 0px;
height:49%;
width:45%;
margin-left: 60px;
justify-content: space-between;
}
.parent5 .btn{
    position: absolute;
    top: 140%;
    left: 25%;
    transform: translate(-50% ,-50%);
    background-color: aliceblue;
    color: black;
    font-size: 16px;
    padding: 10px;
 
    cursor: pointer;
    border-radius: 1px;
    text-align: center;

}
.parent5 .btn:hover{
background-color: transparent;
}
 .img2{
/* border: 1px solid rgb(9, 172, 9); */
height:70%;
/* position: relative; */
width:88%;
max-width: 4000px;
}

.parent6 .btn{
    position: absolute;
    top: 175%;
    left: 25%;
    transform: translate(-50% ,-50%);
    background-color: aliceblue;
    color: black;
    font-size: 16px;
    padding: 10px;
 
    cursor: pointer;
    border-radius: 1px;
    text-align: center;

}
.parent6 .btn:hover{
background-color: transparent;
}
.img3{
    margin-left: 60px;
    border: 1px solid red;
    width: 90%;
    margin-top: 40px;
}

#right4{

justify-content: space-around;
display: flex;
}


@media only screen and (max-width: 900px) {
    /* Small Screen  */
    #right4{

       flex-wrap: wrap;
       flex-direction: row;
        } 
}
h2{
font-size: 200%;
text-align: center;
padding: 2%;
color: green;
} 
.parent7{
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    
}

@media only screen and (max-width: 800px) {
    /* Small Screen  */
    .parent7{
        flex-wrap: wrap;
        flex-direction: row;
       
      }
      .parent8{
        flex-wrap: wrap;
        flex-direction: row;
       
      }
    
}
.parent9>img{
    border: 1px solid red;
    width:93%;
    height:10%;
    margin-left: 40px;
    margin-bottom: 60px;
  
} 


h3{
    font-size: 20PX;
    text-align: center;
    padding: 2%;
    color: green;
    } 
    .footer{
        background-color: rgb(253, 253, 246);
    }
/* =======================foot============== */
 @media only screen and (max-width: 800px) {
    /* Small Screen  */

    .footer1{
     
        flex-wrap: wrap;
        flex-direction: row;
    }

    .footer2{
        flex-wrap: wrap;
        flex-direction: row;
    }



    #foot{
      
        flex-wrap: wrap;
        flex-direction: row;
       
    }

    #foot {
        flex-wrap: wrap;
        flex-direction: row;
        
        
        }
        
        #foot::before{
            flex-wrap: wrap;
            flex-direction: row;
        
        }
        
        
        .footer3{
            flex-wrap: wrap;
    flex-direction: row;

        } 
        .left2{
            flex-wrap: wrap;
            flex-direction: row;
        }
    

        .right3{
            flex-wrap: wrap;
            flex-direction: row;
        }
.footer4{
   
    flex-wrap: wrap;
    flex-direction: row;
}

.footer5{
  
    flex-wrap: wrap;
    flex-direction: row;
  
}

.footer6{
 
    flex-wrap: wrap;
    flex-direction: row;
  
}

#foot1{
   
    flex-wrap: wrap;
    flex-direction: row;
   
}
.parentfoot{
    flex-wrap: wrap;
    flex-direction: row;
}
   
    
    } 
.footer{
    width: 100%;
    
    margin: auto;
}



    .footer1{
        width: 85%;
     
        display: flex;
        gap:80px;
        padding: 25px;
       
        text-align: center;
        margin: auto;
        justify-content: start;

    }

    .footer2{
      
        display: flex;
        gap:80px;
        padding: 25px;
        margin-left: 90px;
        text-align: center;
        justify-content: space-around;
    }



    #foot{
      
        color: black;
        margin-bottom: 0px;
        margin-left: none;
        margin-right: none;
        margin-top: 2px;
        background-color: white;
     
        font-size: 15px;
        border: none;
       
    }

    #foot {
        display: inline-block;
        position: relative;
        color: #111212;
     
        margin-top:16px;
        
        
        }
        
        #foot::before{
        content: '';
        position: absolute;
        width: 97%;
        transform: scaleX(0);
        height: 0.8px;
        bottom: 0;
        
        background-color: #020202;
        
        }
        
        #foot:hover::before {
        transform: scaleX(1);
        
        }
        .footer3{
            width:90%;
            margin: auto;
            display: flex;
            justify-content: space-around;

        } 
        .left2{
            display: flex;
            gap:50px;
            padding: 50px;
            align-items: center;
            margin-left: 80px;
        }
    

        .right3{
            display: flex;
            gap:50px;
            padding: 50px;
            align-items: center;
            /* margin-left: 80px; */
            justify-content: center;
        }
.footer4{
   
    display: flex;
    justify-content: space-around;
   
    padding: 25px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: center;
}

.footer5{
  
    display: flex;
    margin-top: -30px;
    gap: 20px;
   
 
    margin-left: 93px;
  
}

.footer6{
 
    display: flex;
 
    gap: 20px;
    margin-top: 20px;
 
    margin-left: 93px;
  
}

#foot1{
   
    color: black;
    margin-bottom: 0px;
    margin-left: none;
    margin-right: none;
    margin-top: 2px;
    background-color: white;
  
    font-size: 15px;
    border: none;
   
}
.parentfoot{
    width: 100%;
    height: 100%;
    background-color: rgb(253, 253, 246);

padding-bottom: 50px;
}