body 
    {
        font-family: Arial, Helvetica, sans-serif;
 
        background-color: #ffffff;
        margin:auto;
  
 
    }
    
.topnav {
  overflow: hidden;
  background-color: #047993;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #03afd6;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #04b6df;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
    
    
    .container_form1 {
                        border-radius: 5px;
                        background-color: #f2f2f2;
                            padding: 20px;
                            max-width:350px;
                            display:block;
                            margin: auto;
                }
    
    
    

    
    .container_box 
        {

        text-align:center;
        
        background-color:#444444;
        width: 100%;
        display:block;
        margin: auto;
 
    }



.container 
    {

        text-align:center;
    
        background-color:none;
        width: 100%;
        display:block;
        margin: auto;
 
    }



.container1 
    {

        text-align:center;
        background-color:#78909C;
        width: 100%;
        margin: auto;
         padding: px;
 
    }

.container123 
    {

        text-align:center;
        
        background-color:none;
        width: 100%;
        display:block;
        margin: auto;
 
}



.container2 
    {
          text-align:center;
          width: 100%;
          display:block;
          margin: auto;
         
    } 


.container3
    {
          padding: 20px;
          text-align:right;
          border-radius: px;
          background-color: white;
          width: 20%;
          display: inline-block;
          margin: auto;
 
    } 


.container33

    {
      padding: 0px;
      text-align:right;
     
      background-color : none;
      width: 100%;
      display:block;
      margin: auto;
 
    } 


.container4 
    {
          padding:20px;
          text-align:right;
        
          background-color:white;
          width: 50%;
          display: inline-block;
          margin:auto;
 
    } 



.container4  li
    {
          
          text-align:left;
          line-height: 1.6;
          margin-left:2%;
          
          font-size:23px;
          color: #777777;
    }



.container44 
    { 
        padding: 20px;
      text-align:right;
    
      background-color:white;
      width: 70%;
      display: block;
      margin:auto;
 
    } 



.container44  li
    {
      
      text-align:left;
      line-height: 1.6;
      margin-left:2%;
      font-size:23px;
      color: #777777;
    }




.container5 
    {
      padding: 20px;
      text-align:right;
   
      background-color:white;
      width: 20%;
      display: inline-block;
      margin: auto;
 
    } 



.container6 
    {
      padding: 20px;
      text-align:right;
  
      background-color:white;
      width: 50%;
      display: inline-block;
      margin: auto;
 
    }
    
    

.container6  li
    {
 
  
  text-align:left;
  line-height: 1.6;
  margin-left:2%;
  font-size:23px;
  color: #777777;
}



@media screen and (max-width: 500px) 
    {
 .container123 
    {
                
    display:none;
                    
    /* The width is 100%, when the viewport is 800px or smaller */
    }
}



@media screen and (max-width: 500px) 

    {
 .container1  {
                
                    display:none;
                    
                    /* The width is 100%, when the viewport is 800px or smaller */
                }
    }



@media screen and (max-width: 500px) 
    {
 .container33  
        {
            display:none;
            /* The width is 100%, when the viewport is 800px or smaller */
        }
    }


@media screen and (max-width: 500px) {
 .container4  {
    display:none;
                    /* The width is 100%, when the viewport is 800px or smaller */
  }
}


@media screen and (max-width: 500px) 
    {
 .container3  
    {
     font-size:28px;  
     display:block; 
     text-align:left;
     /* The width is 100%, when the viewport is 800px or smaller */
    }
}



.slideproduct 

    {
        background-color: white;
        overflow: hidden;
        padding-top:20px;
        padding-bottom:20px;
        margin: auto;
        width: 100%;
        text-align: center;
        text-decoration: none;
        display: block;
    
    }

.products_home_page1 

    {
        background-color:#EAEDED;
        overflow: hidden;
        margin: auto;
        width: 100%;
       
        text-decoration: none;
        display: block;
    }

@media screen and (max-width: 500px) 
    {
     .products_home_page1   
        {
        display:none;
        }
    }


.products_home_page 

    {
        background-color: #EAEDED;
        overflow: hidden;
        padding: 20px;
        margin: auto;
        width: 60%;
        text-align: center;
        text-decoration: none;
        display: block;
    
    }


    
    
.img {
    
        height : 350px;
        display:block;
        margin: auto;
    
        }


.img1 {
        width:30%;
        display:inline-block;
        margin: auto;
    
        }


.img2 {
    
        height : 350px;
        display:block;
        margin: auto;
    
        }
        
   
   .img3 {
        padding:20;
        float: left;
        width:320px;
        position:inline-block;
        }



@media screen and (max-width: 500px) 

    {
        .img, .img1, .img3   
            {
                width: 100%;   
                margin: 100px 0px 20px 0px; 
                display:block; text-align:center;
                /* The width is 100%, when the viewport is 800px or smaller */
            }
    }
         
        


.img4 {
        float: left;
        width:450px;
        margin: 0px 0px 0px 0px;
        position:inline-block;
        }
        
@media screen and (max-width: 500px) 
        {
            .img4  
                {
                    width: 100%;  
                    margin: auto; 
                    display:block; 
                    text-align:center;
                    /* The width is 100%, when the viewport is 800px or smaller */
                }
        }    
        
        
  .img12 {
            width:45%;
            display:inline-block;
            margin: auto;
    
        }


@media screen and (max-width: 500px) 
    {
        .img12  {
                    width: 90%;  
                    margin: auto; 
                    display:block; 
                    text-align:center;
                    /* The width is 100%, when the viewport is 800px or smaller */
                }
        }    
        
        
a.one:link, .one:visited 
    {
         background-color:none;
        color:white;
        font-size:30px;
     
        text-align: center;
        text-decoration: none;
        display:block;
        
        width:800px;
        margin:auto;
    }
  
  
  
  a.one:hover 
  {
        background-color:;
        color: ;
    }


a.pro:link, .pro:visited 
    {
         background-color:none;
        color:white;
        font-size:16px;
        padding: 0px;
           
        text-align: center;
        text-decoration: none;
        display:inline-block;
        
        width:220px;
        margin:auto;
    }
  
  
  
  a.pro:hover 
  {
        background-color:;
        color:white ;
    }




a.ac:link, .ac:visited 
    {
            background-color:#808080;
            color:white;
            font-size:23px;
            margin-top:1%;
            padding: 40px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius:px;
            width:220px;
            margin:auto;
 }

  a.ac:hover 
    {
            background-color:#808080;
            color: white;
    }




/* Use a media query to add a break point at 800px: */

    @media screen and (max-width: 500px) 
        {
        a.one:link, .one:visited 
            {
                display:none;
            }
        }



/* Use a media query to add a break point at 800px: */

    @media screen and (max-width: 500px) 
        {
            a.ac:link, .ac:visited 
            {
                display:none;
      
                /* The width is 100%, when the viewport is 800px or smaller */
            }
        }        



.im {
     display: inline-block;
    }
    
    
    
    
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  font-size:15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #01748b;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #0097A7;
}








 
 .button 
    {
      display: inline-block;
      width: 140px;
      padding: 12px;
      height: px;
      background: #01748b;
      color: white;
      font-size:22px;
      border: none;
      border-radius: 5px;
      margin-left:5px;
      cursor: pointer;
      box-shadow: 1px 2px 6px #000000;
    }

.button:hover 
    {
        background: #0799b6;
    }


@media screen and (max-width: 1000px) 
        {
 .button    {
                width: 85%;  
            }
        }



hr{
        border-top: 2px solid #777777;
        margin-top: 2%;
        width:15%;

    }



h1 
    {

          font-family: Arial, Helvetica, sans-serif;
          color: #01748b;
          font-size:30px;
          margin:auto;
          text-align:center;
         display: inline-block; 
 
    }
  
  
  h2 
    {

          font-family:  Calibri,serif;
          color: #01748b;
          font-size:26px;
          margin:auto;
          text-align:left;
    }
  
  
  
   h3
    {

      font-family: Arial;
      color:  #444444;
      font-size:28px;
      padding-bottom : 10px;
      margin:auto;
      text-align:left;
    }
  
  
   
   h33 
    {

          font-family:Calibri,serif;
          color:  #F9E79F;
          font-size:20px;
          padding:15px;
          margin:auto;
          text-align:center;
          width: 100%;
   
    }
  
  
  
 h333 
    {
        font-family: Arial;
        color: #777777;
        font-size:35px;
        padding:15px;
        margin:auto;
        text-align:center;
        width: 100%;
   
    } 
  
  h4 
    {
        font-family:"Lucida Console";
        color: #777777;
        font-size:26px;
        margin:auto;
        text-align:center;
        line-height: 1.6;
        width:50%;
    }


 h6 
        {
          font-family:Calibri,serif;
          color:black;
          font-size:30px;
          margin:auto;
          text-align:left;
          line-height: 1.6;
          display: block;
          font-weight: bold;
        }
  
  
  h10 
    {
      font-family:  Calibri,serif;
      color: #01748b;
      font-size:55px;
      margin:auto;
      text-align:center;
      display: block;
    }
  
  
  

@media screen and (max-width: 500px) 
    {
        h1, h6
            {
                font-size:24px; 
                width: 100%;  
                /* The width is 100%, when the viewport is 800px or smaller */
    }
  }

@media screen and (max-width: 500px) 
    {
    h4
        {
            font-size:18px; 
            width: 100%;  /* The width is 100%, when the viewport is 800px or smaller */
        }
  }


@media screen and (max-width: 500px) 
        {
    h3  
            {
                font-size:18px; width: 100%;  /* The width is 100%, when the viewport is 800px or smaller */
            }
        }

@media screen and (max-width: 500px) 

        {
    h10     {
                font-size:30px; width: 100%;  /* The width is 100%, when the viewport is 800px or smaller */
            }
        }
  
  
  

.cardbooklogo 
        {
          width: 50%;
          max-width:350px;
          height: auto;
        }




.p
    {
          font-family:arial;
          color: #000000;
          font-size:20px;
          margin-top:;
          text-align:center;
          line-height:1.6; 
          text-align:justify;
          font-weight: normal;
 
    }

@media screen and (max-width: 500px) 
        {
    .p 
            {
                    font-size:15px;   /* The width is 100%, when the viewport is 800px or smaller */
            }
        }


.p1
    {
        font-family:arial;
        color: white;
        font-size:16px;
        margin-top:;
        text-align:left;
        line-height:1.6; 
        text-align:justify;
        font-weight: normal;
        text-indent: 80px;
 
        }

@media screen and (max-width: 500px) 
        {
    .p1 
            {
                font-size:15px;      
                width: 80%; display:block; 
                margin:auto;  /* The width is 100%, when the viewport is 800px or smaller */
            }
        }
  
    .pp
        {
            font-family:arial;
            color: #000000;
            font-size:26px;
            text-align:center;
            line-height:1.6; 
            width: 50%;
            font-weight: normal;
            display: block;
            background:none;
            margin:auto;
 
        }



@media screen and (max-width: 500px) 
        {
    .pp 
            {
                font-size:18px;      
                width: 80%; 
                display:block; 
                margin:auto;  /* The width is 100%, when the viewport is 800px or smaller */
            }
        }

    
    .category {
    
                width: 100%;
                display: ;
                position: relative;
                animation-name: example;
                animation-duration: 1s;    
            }


.category a 
        {
              width:170px;
              font-size:16px;
              text-decoration:none;
              padding: 0px;
             
              line-height:3;
              background: white;
              color: #36454F;
              display: inline-block;
              margin:auto;
              cursor: pointer;
              box-shadow:none;
        }

.category i 
        {
          width: 70px;
          font-size:20px;
          text-decoration:none;
          padding: 15px;
          height: px;
          background:#566573;
          color:#ffffff;
          display: inline-block;
          border-radius:15px;
          margin-left:0%;
          margin-top:30px;
          cursor: pointer;
  
        }




.category  li{
                display: inline-block;
                animation-name: example;
                animation-duration: 5s;
            }



.category .fas
    {
	    padding:15px;
	    font-size:40px;
    }

.category i:hover 
    {
        background-color: #2C3E50;
        color: rgb(255, 251, 251);
    }


 @media screen and (max-width: 1000px) 
 
        {
   .category 
   
        {
            width: 100%; 
            display:block; 
            margin:auto;  
            padding: 0px; 
        }
  
    }


@media screen and (max-width: 1000px) 

        {
   .category a
        {
         width:180px;  
        }
    }
 
 @media screen and (max-width: 1000px) 
    {
   .category i 
    {
     width:70px; 
    }
    }


.imm   {
            width: 60px;
            text-decoration:none;
            padding: 15px;
            height: px;
            background:white;
            color:#ffffff;
            display: inline-block;
            border-radius:0px;
            margin-left:0%;
            margin-top:30px;
            cursor: pointer;
            border-style: groove;
            border-style: solid;
            border-color: #666666; 
            border-width: 1px;
            transition: width .5s
  
        }
 
 .imm:hover {
              background-color:white;
               box-shadow: 1px 1px 6px #2c2c2c; 
  
            }
            
            
            
.imm1   {
            max-width:100px;
            text-decoration:none;
            padding: 0px;
            height: px;
            background:none;
            color:#ffffff;
            display: inline-block;
            border-radius:0px;
            margin-left:0%;
            margin-top:30px;
            cursor: pointer;
            transition: width .5s
        }
 
 .imm1:hover {
              background-color:white;
               box-shadow: 1px 1px 6px #2c2c2c; 
            }
            
            
    .imm111   {
            max-width:150px;
            text-decoration:none;
            padding: 0px;
            height: px;
            background:none;
            color:#ffffff;
            display: inline-block;
            border-radius:0px;
            margin-left:0%;
            margin-top:20px;
            cursor: pointer;
            transition: width .5s
        }
 
 .imm111:hover {
              background-color:white;
               box-shadow: 1px 1px 6px #2c2c2c; 
            }
            
            
            
            
            
.imm11  {
            max-width:250px;
            text-decoration:none;
         
           
            background:none;
            color:#ffffff;
            display: inline-block;
          
          
            margin-top:20px;
            cursor: pointer;
            transition: width .5s
            
        }
 
 .imm11:hover {
             
            }
            
            
            
            
      .imm12   {
            max-width:200px;
            text-decoration:none;
            padding: 0px;
            height: px;
            background:none;
            color:#ffffff;
            display: block;
            border-radius:0px;
            margin-left:0%;
            margin-top:30px;
            cursor: pointer;
            transition: width .5s
        }
 
 .imm12:hover {
                background-color:white;
                box-shadow: 1px 1px 6px #2c2c2c; 
        
            }
            
            
.error {color: #E74C3C;}





.category1 
{
     
     display:none ;
         
}

.category1 a 
{
 
}

.category1 i 
{

  display: none;
 
}


.category1  li
{
 
  display: none;

}


.category1 .fas
{
	padding:15px;
	font-size:40px;
  }

.category1 i:hover 
        {
          background-color: #2C3E50;
          color: rgb(255, 251, 251);
    }




 @media screen and (max-width: 500px) 
 
        {
   .category1 
            {
                width: 100%; 
                display:block; 
                margin:auto;  
                padding: 0px;
                position: relative;
                background-color: #EAEDED;
   
            }
  
        }


@media screen and (max-width: 500px) 
    {
   .category1 a
        {
            width:180px;
            font-size:16px;
            text-decoration:none;
            padding: 0px;
            
            line-height:3;
            background-color: #EAEDED;
            color: #36454F;
            display: inline-block;
            margin:auto;
            cursor: pointer;
            box-shadow:none;
          }
    }
 
 @media screen and (max-width: 500px) 
 
        {
   .category1 i 
   
        {
            width:70px; 
            display: inline-block;
            
  
        }
 }
 
 
 
 
 .product1 
        {
            display:none ;
        }


 @media screen and (max-width: 500px) 
 
        {
   .product1 
        {
            width: 90%; 
            display:block; 
            margin:auto;  
            padding: 0px;
            text-align:center;
            position: relative;
            background-color: #EAEDED;
               
        }
  
 }



@media screen and (max-width: 500px) 

        {
   .product1 a
            {
                width:180px;
                font-size:16px;
                text-decoration:none;
                padding: 0px;
                line-height:3;
                background-color: #EAEDED;
                color: #36454F;
                display: inline-block;
                margin:auto;
                cursor: pointer;
                box-shadow:none;
                text-align:center;
            }
        }
 




 

table 
    {
          border-collapse: collapse;
         
          width: 800px;
          margin:auto;
          display: block;
          text-align: center; 
          border: none;
}

 


th, td 
        {
            padding:10px;
            border:none;
        }

 td 
    { 
        text-align: left;
        color: #444444;
        font-size:17px;

        }


th {
        
        color:Black;
        text-align: left;
        font-size:20px;
}


  @media screen and (max-width: 500px) 
        {
        table 
        {
        width: 340px;  
        }
  }


  
 


a.t:link, .t:visited
    {
            background-color:white;
          color: #01748b;
          font-size:18px;
          height: 20px;
          margin-top:1%;
          padding: 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          box-shadow: 1px 1px 6px #2c2c2c;
          border-radius:5px;
          width:150px;
         
        
    }
  


a.t:hover 
        {
            background-color:#444444;
            color: white;
          
        }


a.t2:link, .t:visited
            {
                background-color:white;
                color: #01748b;
                font-size:30px;
                height: 20px;
                padding-top:5px;
                padding-bottom:20px;
                line-height: 1.6;
                text-align: left;
                text-decoration: none;
                display: inline-block;
                font-family:  Calibri,serif;
                width:400px;
                margin:auto;
            }
  


    a.t2:hover 
    {
            color:#444444;
          
    }



    a.t3:link, .t3:visited
        {
                background-color:white;
                color: #01748b;
                font-size:30px;
                height: 32px;
                padding-top:5px;
                padding-bottom:20px;
                line-height: 1.6;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-family:  Calibri,serif;
                box-shadow: 1px 1px 6px #2c2c2c;
                border-radius:5px;
                width:250px;
                margin:auto;
     }
  


a.t3:hover {
            background-color:#444444;
            color: white;
          }




@media screen and (max-width: 500px) 
    {
    a.t3 {
        font-size:16px; height: 24px;   
        /* The width is 100%, when the viewport is 800px or smaller */
    }
  }





a.t4:link, .t4:visited
    {
        background-color:white;
        color:#01748b;
        font-size:30px;
        padding-top:5px;
        padding-bottom:px;
        line-height: 1.6;
        text-align: left;
        text-decoration: none;
        display: inline-block;
        font-family:  Calibri,serif;
        margin:auto;
    }
  


a.t4:hover {
            color:#444444;
          
}


@media screen and (max-width: 500px) 
        {
            a.t4 
                {
                    font-size:20px;   
                    text-decoration: none;   
                    /* The width is 100%, when the viewport is 800px or smaller */
            }
    }

.cropped-ofp 
        {
           
            width: 150px; 
            height: 150px; 
            object-fit: cover;
            object-position: 50% 50%; 
            box-shadow: 1px 1px 6px #2c2c2c;

        }


.cropped-ofp1 

        {
            border-radius:50%;
            width: 200px; 
            height: 200px; 
            background-image: url("profile-image.png");
            background-repeat: no-repeat;
            background-position: center;
             background-size: cover;
            object-fit: cover;
            object-position: 50% 50%; 
            box-shadow: 1px 1px 6px #2c2c2c;

}


.container_box 
    {

        background-color:#ffffff;
   
 
    }
    

    
    
    
    
    
/* Footer====================================================== */    
    
    
    


.Footer_box1

        {
            background-color: #5F6A6A;
            overflow: hidden;
            padding-top:20px;
            padding-bottom:20px;
            margin: auto;
            width: 100%;
            
            text-align: center;
            text-decoration: none;
            display: block;
        }
        
        .Footer_box1 a 
    {
        text-decoration:none;
        color: #ffffff;
        padding: 8px;
        display: block;
        margin:auto;
    }


.Footer_box1 a:hover 
    {
        text-decoration:none;
        color: #FFFD5A;
        background-color: none;
    }
    
    
    
.Ft1

   {
        background-color:#5F6A6A;
        overflow: hidden;
        padding:30px;
        font-size:16px;
        margin:auto;
        width:350px;
        text-align:left;
        text-decoration:none;
        display:inline-block;
         color: #ffffff;
         vertical-align: text-top;

   }
   
.Ft1 a 
    {
        text-decoration:none;
        color: #ffffff;
        padding: 8px;
        
        margin:auto;
    }


.Ft1 a:hover 
        {
            text-decoration:none;
            color: #FFFD5A;
            background-color: none;
        }
        
  
.mq

 {
    
     font-size:20px;
     width:100%;  
     
 }


@media screen and (max-width: 1000px)
    {
   .mq
    {
        width:100%;  
    }
    }
    
    
.mq1

 {
    
     font-size:20px;
     width:100%;  
    
}