#menutop
{	
    width: 800px;
  	margin: 1px auto; 
		padding: 75,0 ;
	  height: auto !important;
	  background: #F0F0F0;
    border: 0px #F8F8F8 ;
		bottom: 60% 
		transform: translateY(-25%);
		/*bottom: 0; */

	}
.dropmenu1
	{
	position: relative;
	
     top:1px ;
     Left:1px  ;

    /* top: 143px;
	left: 159px;
	/* width: 778px; */
	}
.dropmenu1 ul
{
  list-style-type:none;
padding:0px;
margin:0px;
 text-align:center;


}
.dropmenu1 li{ z-index:200;
float:left;
position:relative;
width:133px;
margin:0px;
 text-align:center;
}
.dropmenu1 a, .dropmenu1 :visited { display:block;
font-size:16px;
width:133px;
height:40px;   /*30px; */
border: 1px solid #ffffff ;
/*  #001133;    */
padding-top:6px;
margin:0px ;
color:#ffffff ;
/*  #001133;  */
background: #666;
/* #666    #E4D094;      */
font-family:verdana, sans-serif;
text-decoration:none;
text-align:center;
/* font-weight:bold; */
padding-top:10;

}
.dropmenu1 :hover{ color:#000;
background: #f90;
/*  #C99A5D;   */
/*                        text-decoration:underline; /*          #11347F;     */
/* border-right: 5px double white; */
}
.dropmenu1 ul ul { position:absolute;
padding-left:0;
Margin-Left:0;
visibility:hidden;
width:135 ;  /*119px; */
height:0px;
background: #999999;
/* border-top: 3px solid #001133; */
}
.dropmenu1 ul li:hover ul, .dropmenu1 ul a:hover ul{ visibility:visible;
background: #999999;
/*  #C99A5D;          /* #11347F;   */
/* font-weight:bold; */
color:#ffffff;
/*left: 151px; */
top: 40px;           /* 32px; */
width: 135px;  /* was 133 same as main block*/
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 20px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:135px;  /* was 133 */
     background: #999999;
}

/*         style for NEW nav and hamberger menu   **********************************/


@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

* {
  box-sizing: border-box;
}



.villan {
  flex: 1 1;
  padding:  1rem 0; 
 /* border-top: 1px solid #eaeaea82; */
  display: flex;
  max-height: 3vh;
  justify-content: left;  /* center; */
  align-items: center;
  flex-grow: 1;
	/*                   background-color: #f2f2f2;   /* #666;  /*  dark grey  */
	color: black;  /*white; */
	 /*              border: 1px solid red;  */
	width: 50%;
					
		position: relative;
					float: right;	
					
					top: 45px;
					left: 18%;	
	
}

.villan div {
  margin: 0 1rem;
  text-align: center;
	
	
}

div.box {
  text-align: left;
}

.villan a {
  color: black;
  text-decoration: none;
	
	 padding: 10px 10px;  /*15px 16px; */
	 font-size: 1.2rem;
  display: block;
	
	
	
	
	
}

.villan a:hover {
  text-decoration: none;  /*underline; */
	 /*background-color: #F80;   orange */
	 padding: 15px;
  color: black; 
	
	border-bottom: .2rem solid #f80;
}


.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.material-symbols-rounded {
  color: aliceblue;
  position: absolute;
  z-index: 10;
  font-size: 100px;
}

div.hamburger-menu {
  display: none;
}

/*    div for iphone display  and ipad ***********************/


@media screen and (min-width: 0px) and (max-width: 600px) {
  section.villan {
    display: none;
  }
  div.hamburger-menu {
    display: block;
  }
  main {
    display: block;
  }
		
}

.ham-menu-bg {
  background-color: #0070f3;
  height: 50vh;
  width: 100%;  /* 80vw; */
  z-index: 8;
  display: none;
	
}

.expand-btn:target ~ .ham-menu-bg {
  display: block;
}

/* new */

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 170px;
  left: 40px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 100; /*  higher index to make sure on top of screen */
	padding-left:10px;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #616161;
  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 155px;
  left: -100%;
  width: 300px; 
  height: 50%;
  margin: 0;
	margin-left: 20px;
  padding: 100px 0;
	padding-left: 5px;
  list-style: none;
  background-color: #eceff1;   /*  very light grey */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  transition-duration: 0.25s;
	z-index: 10; 
}
.menu__item {
  display: block;
  padding: 8px 24px;
  color: #333;
  /*  font-family: "Roboto", sans-serif; */
  font-size: 1.2rem;
  /*font-weight: 600; */
  text-decoration: none;
  transition-duration: 0.25s;
	
	
}
.menu__item:hover {
  background-color: #f7ca97;   /*#f80;  /* #cfd8dc; */
	color: black;
	text-decoration: none;
	border-bottom: .2rem solid #f80;
	
}


@media screen and (min-width: 900px) {
  label.menu__btn {
    display: none;
  }	
	div.hamburger-menu {
  display: none;
}
	 
  }

@media screen and (max-width: 901px) {
   section.villan {
    display: none;
  }
	 
  }



/* dropdown ************************/

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

.dropdown .dropbtn {
  font-size: 1.2rem;  
  border: none;
  outline: none;
  color: black ; /* white; */
  padding: 5px 5px;   /*14px 16px; */
         background-color: inherit; */
  font-family: inherit;
  margin: 0;
	
}

.navbar a:hover, .dropdown:hover .dropbtn {
  /*                         background-color: #f80; */
	border-bottom: .2rem solid #f80;
}

.dropdown-content {
	display: none;
  position: absolute;
  background-color: #f9f9f9;   /*   light grey */
  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;
}

.dropdown-content a:hover {
  /*                  background-color: #f7ca97;     /*#ddd; */
	border-bottom: .2rem solid #f80;
}

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



/*   accordian menu  ***********************/


/*
	div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: white;
  padding: 1px;
 
} */
	
	
	/*   accordian menu code   **************************/
	
	
	details {
  /* Adds space between accordion items */
  margin-bottom: 1rem; 
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden; /* Ensures rounded corners are respected */
}

summary {
  background-color: #f2f2f2;
  padding: 1rem;
  cursor: pointer;
  /* Use flexbox to align content and potential icons */
  display: flex; 
  justify-content: space-between;
  align-items: center;
}

/* Change background color when the accordion is open */
details[open] summary {
  background-color: #e6e6e6;
}

.content {
  padding: 1rem;
  background-color: white;
}