*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Abhaya Libre', serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Roboto', sans-serif;
}

body
 {
    /*background-image: url(images/whiteradial.jpg);*/
    background: rgb(255, 255, 255);
    background-position: center;
    background-size: cover;
 }

 
 
 
 /*...............HEADER NAVBAR......................*/

 .header-main {
    max-width: 90%;
    height: 120px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px;
    padding-top: 0px;
    position: relative;
    margin: auto;
 
                }

.header-main-logo {
        width: 20%;
        height: 100%;
        display: flex;
        padding-top: 0px;
        padding-left: 0px;
        align-items: center; /* to align logo in the centr*/
    }


.header-main-logo img {
        width: 100%; 
        height: 100%;
        display: flex;
        align-self: center;
        padding-left: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    
    }
        

.header-main-nav1 {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: right;
        margin: auto;
        padding-top: 0px;
     /*   align-items: center;  to align logo in the centr*/
    }


/*............... NAVBAR......................*/

#navbar  {  
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 0px;
    padding-top: 0px;

                    }  
 
#navbar  li   {  
    list-style-type: none; 
    padding: 0 25px;          
           }  
                    
#navbar  li a {
    text-decoration: none;
    color: #222121;
    font-size: 15px;
    font-weight: 400;
    font-style: bold; 
}

#navbar  li a:hover
{
    color:#f44336;  /* changes the colour of the button)*/
    transition: 0.1s;
    padding-bottom: 2px;
    border-bottom: solid 2.5px #041e49ff;

}


#navbar  a.active
{      
    /*    color: #041e49ff; */
       padding-bottom: 2px;     
     /*  border: solid 1px #041e49ff;
       border-radius: 12px; */
       border-bottom: solid 2.5px #f44336; 
       
}


#REV_TITLE3_R3_C1_NB_UL  li a:hover
{
color:#f44336;  /* changes the colour of the button)*/
transition: 0.5s;
border-bottom: solid 2px #041e49ff;
}



#REV_TITLE3_R3_C1_NB_UL  a.active
{      
color: Green;
/*                       padding: 2px 6px;
       border: solid 1px #041e49ff;
       border-radius: 12px; 
       border-bottom: solid 2px #041e49ff; */
       
}


/*...............MOBILE NAVBAR......................*/

#mobile {
    display: none;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    padding: 0px 20px 0px 20px;
 }
#mobile a {
    text-decoration: none;
    padding: 0px 10px 0px 10px;

}

#close {
display: none;
text-decoration: none;
position: absolute;
top: 28px;
left: 30px;
font-size: 20px;
font-weight: bold;
color: #1a1a1a;
}

#bag{
    display: none;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #555;
}





/*------------------Laptop media---------------------------*/
        
@media(max-width:950px){
    
.header-main {
    max-width: 90%;
    height: 120px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px;
    padding-top: 0px;
    position: relative;
    margin: auto;
 
                }
 
 .header-main-logo {
        width: 20%;
        height: 100%;
        display: flex;
        padding-top: 0px;
        padding-left: 0px;
        align-items: center; /* to align logo in the centr*/
    }
 
 
 .header-main-logo img {
        width: 80%; 
        height: 100%;
        display: flex;
        align-self: center;
        padding-left: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    
    }
        
 
 .header-main-nav1 {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: right;
        margin: auto;
        padding-top: 0px;
     /*   align-items: center;  to align logo in the centr*/
    }
 
 
 /*............... NAVBAR......................*/
 
 #navbar  {  
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 0px;
    padding-top: 0px;
 
                    }  
 
 #navbar  li   {  
    list-style-type: none; 
    padding: 0 20px;          
           }  
                    
 #navbar  li a {
    text-decoration: none;
    color: #222121;
    font-size: 15px;
    font-weight: 400;
    font-style: bold; 
 }
 
 #navbar  li a:hover
 {
    color:#f44336;  /* changes the colour of the button)*/
    transition: 0.5s;
 
 }

}


@media(max-width:800px){
    
    .header-main {
        max-width: 90%;
        height: 120px;
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 0px;
        padding-top: 0px;
        position: relative;
        margin: auto;
     
                    }
     
    .header-main-logo {
            width: 20%;
            height: 100%;
            display: flex;
            padding-top: 0px;
            padding-left: 0px;
            align-items: center; /* to align logo in the centr*/
        }
     
     
    .header-main-logo img {
            width: 80%; 
            height: 100%;
            display: flex;
            align-self: center;
            padding-left: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
        
        }
            
     
    .header-main-nav1 {
            width: 80%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: right;
            margin: auto;
            padding-top: 0px;
         /*   align-items: center;  to align logo in the centr*/
        }
     
     
     /*............... NAVBAR......................*/
     
     #navbar  {  
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: right;
        padding-right: 0px;
        padding-top: 0px;
     
                        }  
     
     #navbar  li   {  
        list-style-type: none; 
        padding: 0 15px;          
               }  
                        
     #navbar  li a {
        text-decoration: none;
        color: #222121;
        font-size: 13px;
        font-weight: 400;
        font-style: bold; 
     }
     
     #navbar  li a:hover
     {
        color:#f44336;  /* changes the colour of the button)*/
        transition: 0.5s;
     
     }
    
    }
    
    
    

/*------------------Mobile media---------------------------*/

@media(max-width:650px) {
    
    .header-main {
        max-width: 90%;
        height: 50px;
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 0px;
        padding-top: 0px;
        position: relative;
        margin: auto;
                 }

.header-main-logo {
        width: 30%;
        height: 100%;
        display: flex;
        padding-top: 10px;
        padding-left: 0PX;
        align-items: center; /* to align logo in the centr*/
                   }
    

.header-main-logo img{
        width: 100%; 
        height: 100%;
        display: flex;
        align-self: center;
        padding-left: 0px;

                 }

#navbar {
        /*    display: flex;*/
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            position: fixed;
            top: 0;
            right: -300px;
            height: 60vh;
            width: 200px;
            background: rgb(240, 240, 240);
            /*rgb(250, 248, 248);*/
            padding: 80px 0 0 10px;
            transition: 0.5s;
            opacity: 99%;
            z-index: 1000;
           /* overflow:hidden;*/
                              }    
    
#navbar li {  
            padding: 0 30px; 
            margin-bottom: 30px; 
            /*overflow:hidden;*/                             
                               }  
                               #navbar  li a:hover
                               {
                                  color:#f44336;  /* changes the colour of the button)*/
                                  transition: 0.5s;
                               
                               }

                               
#navbar  li a {
    text-decoration: none;
    color: #222121;
    font-size: 16px;
    font-weight: 350;
    font-style: bold; 
                     }

#navbar  li a:hover
            {
            color:#f44336;  /* changes the colour of the button)*/
            transition: 0.5s;
                               
                             }


#navbar.active{
    right: 0px;
    /*overflow:hidden;*/
 }                   
 


 #mobile {
    display: flex;
    align-items: center;
    
/*    padding: 0px 20px 0px 20px;*/
 }
 
#mobile i{
        color:  #1a1a1a;
        padding: 0px 15px 0px 15px;
        }

#close{
    display: initial;
    text-decoration: none;
    position: absolute;
    top: 28px;
    left: 30px;
    font-size: 18px;
    font-weight: 200;
    color: #1a1a1a;
            }
#bag{
    display: none;
}

#bag01{
    display: none;
}


}