:root{
    --menu-count:9;
}

.header-main3{
    display: none;
}

body{
    background-color: white; 
     padding: 0 50px; 
     

}

.header-im{
    width:80%;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.mobile-menu-btn{
    display: none;
}
 
.hedercenter{
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding-top: 20px;
    padding-bottom: 10px;
    
}
/* .logo{
    display: flex;
        justify-content:center;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 200;
        background-color: #fff;
} */

.header-main2{
    display:none;
}

.header-main1{
    width:80%;
    /*padding: 0 60px;
    padding-left: 60px;
    padding-right: 60px;*/
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;

    height: 60px;
    background-color:white;
    display: flex;
    justify-content: space-between;
    
    
    /*position: fixed;*/
    
    top:0;
    z-index: 100;
}




.header-main1 nav{
    display: flex;
    margin-left:auto;
    margin-right: auto;
    background-color: white;
    width:100%;             /*100% of header-main1 width. This should remain 100%      */
    border-top: 1px solid black;
    border-bottom: 1px solid black;
   
}

.header-main1 .logo {
    height: 50px;
    width: fit-content;
    align-self: center;
    cursor: pointer;
}

.header-main1 .logo img{
    height: 100%;
}

.header-main1 ul {
     /*  height: 100%;
         width: 100%; */
     /* padding-left: 50px;
     padding-right: 50px;  */
    list-style: none;
     height:40px;
      padding-left: 180px;
    display: flex;
    align-self: center; 
    
}  

.header-main1 ul li {
    margin-left:auto;
    margin-right: auto;

    /* position: relative; */

}



/* This will control space between menu items*/
.header-main1 ul li a{    
    display: flex;
    margin-left: auto;
    margin-right: auto;
     padding-right: 30px; 
     padding-left: 30px;
     
    /* text-align: left; */
    height: 100%;
    line-height: 50px; 
    font-size: 1rem;
    /*font-family: ;*/
    color: black;
    background-color:white;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all ease-in-out 100ms;
     
}

.header-main1 ul li a:hover{
    background-color:gray;
    color:white;

}

/*DROP DOWN STYLING START HERE */

.header-main1 ul li ul {
    visibility: hidden;
    opacity: 0;
    display: none;
    position: absolute;
    /* left: -60px;  */
    left:220px;
    transition: all ease-in-out 100ms;
}

.header-main1 ul li ul li a{
    white-space: nowrap;
}
 

ul li:hover> ul{
    visibility: visible;
    opacity: 1;
    display: block;
}

/*DROPDOWN STYLING STOP*/


.header-main1 .sm{
    align-self: center;
    display: flex;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.header-main1 .sm-links {
    height: 60px;
    width: fit-content;
    display: flex;
    align-items: center;
}


.header-main1 .sm-links a{
    display:block;
    height: 30px;
    margin-left: 10px;
    cursor: pointer;
    align-self: center;
}


.header-main1 .sm-links img {
    height: 30px;
    margin-left: 10px;
    cursor: pointer;
    align-self: center;
}

.himgcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:50%;
    padding-top:40px
  }

  .textcenter{
    display: block;
    /*width:50%;*/
    margin-left: 2%;
    margin-right: 2%;
    font:didot;
    font-size: 1rem;
    
  }
  
  
  /*
  .imenu1{
    display: flex;
    
    
  }

  .imenu1-nav{
    display: flex;
     background-color: yellow;
    align-self: center;
  }
  
  
   .imenu1{
   
    
     
    
   }

   .imain1 ul {
    height: 100%;
     
    
    list-style: none;
    display: flex;
    align-self: center;
}  
  
    
.imain1 ul li {
    position: relative;
    
}

.imenu1 ul li a{
    display: block;
    padding:  0 60px;
    height: 100%;
    line-height: 60px;
    font-size: 1rem;
    
    color: black;
    background-color:white;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all ease-in-out 100ms;
}

.imain1 ul li a:hover{
    background-color:gray;
    color:white;

}



.center{
    margin-left:50px;
    
} 

*/
.header-imagemain{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    background-color:white;
    border: #04AA6D;
    
}

.imtable{
    width:100%;
    
    

}


.imtable-tr{
    height: 800px;
}


   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  


  @media only screen and (max-width: 600px) 
  
   {
    .header-main2 {
       display: none; 
       
   }

   .header-imagemain{
        display: none;
   }
    .mobile-menu-btn{
        display: flex;
        justify-content:center;
        width: 100%;
        height: 30px;
        position: relative;
        top: 0;
        right: 0;
        z-index: 200;
        background-color: #fff;
        
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        
    }

    .mobile-menu-btn img{
        height: 90%;
        align-self: center;
        
    }
        
    .header-main1{
        display:none;
    }

    .header-main2{
         height: 80vh;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0;
        justify-content: flex-start;
        position: relative; 
         
    }   

    
    
    .header-main2 nav{
       width: 100%;
        height: 65vh;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: stretch;
        
       
    }

    .header-main2 .logo{
        display: none;
        height: 30%;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
      
    }

    .header-main2 .logo img{
        display: none;
        height: 60%;
        align-self: center;
    }



    .header-main2 ul{
        height: 70%;
        width: 100%;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: space-between;
       
        
     /*
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
       
        */
    }


    


    .header-main2 ul li{
        width: 100%;
        height: calc(100% / var( --menu-count));
        padding: 0;
        margin: 0;
        /*Giving all menu items a boarder top*/
        border-top: 1px solid #ddd;
        /*we set a flex here, with nowrap and column, to make the dropdown go below the gallery, and justify content instead since we are using column, to center the text*/
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        /*transition:all ease-in-out 100ms;*/
        transition: cubic-bezier(0.6, -0.28, 0.735, 0.045) ease-in-out 2s;
     
       

    }

    .header-main2 ul li:nth-last-child(1){
        border-bottom: 1px solid #ddd;
       
    }

    
    .header-main2 ul li a{
        
        width: 100%;
        height: fit-content;
        padding: 0;
        margin: 0;
        text-align: left;
        padding-left: 5%;
        /*font-size: 2.5rem;*/
        font-size: 1rem;
        text-decoration: none;
        text-transform: uppercase;
        color: #111;
    }

    /*to prevent changing of color of links after clicking*/

    .header-main2 ul li a:visited{
        text-decoration: none;
        color: #111;

    }

    .header-main2 ul li a:hover{
       background-color:transparent;
       
        color: #111;
      
    }

    .header-main2 nav{
        overflow-y: scroll;
        overflow-x: hidden ;
       
    }

    .header-main2 ul li:focus>ul,
    .header-main2 ul li:hover>ul{
       
        display: flex;
        visibility: visible;
        opacity: 1;
         
         
    }


   .header-main2 .sm{
        width:100%;
        height: 10vh;
        margin:0;
        padding:0;

        flex-wrap: wrap;
       flex-direction: column;
      
        
    }

    .header-main2 .sm-links{
        height: 90%;
        width: 100%;
        margin:0;
        padding: 0;
        justify-content: center;
        
       
    }

    .header-main2 .sm-links a{
        height: 100%;
        margin: 0.2%;
        padding: 0;
       
        
    }
    
    
.header-main2 .sm-links img {
    height: 60%;
    margin-left: 10%;
    cursor: pointer;
    }
/*code for sm links header-main3*/

.header-main3{
    width: 100%;
    
     height: 10vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
     
}
.header-main3 .sm{
    width:100%;
    height: 10vh;
    margin-top:120%;
    padding:0;
    flex-wrap: wrap;
   flex-direction:column;
}
.header-main3 .sm-links{
    height: 90%;
    width: 100%;
    margin:0;
    padding: 0;
    justify-content: center;
    
   
}

.header-main3.sm-links a{
    height: 10vh;
    margin: 0.2%;
    padding: 0;
   
    
}


.header-main3 .sm-links img {
height: 60%;
margin-left: 10%;
cursor: pointer;
     
}


}
    
/*contact form code*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  /* Add a background color and some padding around the form */
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }