@charset "utf-8";
/* CSS Document */
/* Responsive CSS below */
@media screen and (max-width: 1100px) {
	header{
		height: 55px;
	}
	header nav{
			display: none;
		}
		
		.mobile-menu{
			display: none;
			position: absolute;
			top: 50px;
			left: 0;
			height: auto;
			width: 100%;
		}

		#hamburger-icon{
			display: block;
		}
		
		ul li{
			display: inline-block;
			position: relative;
			border-bottom: none;
			width: 100%;
			background: #EBE0AB;
		}
		
		ul li a{
			display: block;
			padding: 14px 25px;
			color: #000000;
			text-decoration: none;
			text-align: left;
			font-size: 18px;
		}
		
		ul li:hover ul.dropdown {
			display: block;
			height: auto;
			background: #EBE0AB;
		}
	
	   ul li ul.dropdown li{
			display: block;
		    background: #86CDF0;
		    font-size: 15px;
		    border-bottom: 1px dotted black;
		}
	
	   ul li ul.dropdown li a{
			padding: 8px 35px;
		}
	
		ul li ul.dropdown{
			width: 150%;
			background: #86CDF0;
			position: absolute;
			z-index: 999;
			display: none;
		}

		ul li a:hover{
			background: #FBC27A;
		}

	
	.in_box, .base_row{
		flex-direction: column;
		height: auto;
		gap: 3em;
		flex-grow: 1;
		padding: 10px 40px;
	}
	
	.bx_special{
		width: 100%;
		background-color: #fff;
		box-shadow: 5px 5px 25px #cccccc;
		padding: 0;
		border-radius: 10px;
	}
	
	.bx_2, .bx_3, .bx_4, .bx_5, .bx_6, .bx_7,.bx_8{
		width: 100%;
	}
	
	.bx_10{
		width: 100%;
		height: auto;
		align-content: center;
		text-align-last: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		padding: 30px 0;
		display: flex;
		flex-direction: column;
	}
	
	
	.col7 p{
		text-align: justify;
	}
	
	nav1{
		width: 100%;
	}
	
	nav1 .title{
		width: 100%;
		font-weight: bold;
		color: #FFFFFF;
	}

	nav1 ul{
		background-color: inherit !important;
		text-align: left;
		list-style: circle !important;
		list-style-position:inside;
	}

	nav1 ul li{
		width: 100%;
		background-color: inherit !important;
		text-align: left;
		list-style: circle !important;
	}

	nav1 ul li, nav1 ul li a{
		text-align: left;
		width: 100%;
		padding: 2px 0;
		font-size: 13px;
		color: #000000;
	}

	.nav1_table{
		font-size: 13px;
	}
	nav1 ul li a:hover{
		background: none;
		text-decoration: underline;
	} 

	nav1 ul li a:link{
		width: 100%;
		text-decoration: none;
	}
	
	  .rhide {
    display: none; }
	
	.project_box{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		height: auto;
		gap: 3em;
		flex-grow: 2;
		padding: 10px 20px;
		align-items: center;
		align-content: center;
	}

	.bx_2{
		width: 20%;
		height: auto;
		align-content: center;
		text-align-last: center;
		align-items: center;
	}


  .content-wrapper {
    padding: 0 20px; }


	.mylist, .mylist li{
		background-color: #ffffff;
		liststyle: circle; 
		list-style-type: circle; 
		list-style-position: inside;
	}
	
	
  main .featured {
    height: auto; 
	}
    main .featured h2 {
      font-size: 48px;
      width: 100%;
      padding: 0 10px; }
    main .featured p {
      font-size: 22px;
      width: 100%;
      padding: 0 10px; }
	
	 main .about {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: center;
	  margin-left: auto;
	  margin-right: auto;
	  height: 250px;
	  align-items: center;
	  justify-content: center;
	  text-align: center; }

	 main .project {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: center;
	  margin-left: auto;
	  margin-right: auto;
	  min-height: 100px; 
	}

	main .project ul {
		padding-left: 30px;
		background: #FFFFFF !important;
		list-style: circle !important;
	}

	main .project ul li, .panel ul li {
		padding: 5px 0;
		background: #FFFFFF !important;
		text-align: justify;
		list-style: circle !important;
		display: list-item;
	}
	
	main .project h2 {
		font-size: 35px;
		color: #ffffff;
		text-align: left;
		padding-left: 10px;
		text-shadow: 2px 2px 4px #000000;
	}
	
	main .project h3 {
		font-size: 20px;
		color: #000000;
		text-shadow: 2px 2px 4px yellow;
		text-align: center;
	}
	
	
	/** Accordion **/
	.accordion {
	  background-color: #eee;
	  color: #444;
	  cursor: pointer;
	  padding: 8px ;
	  width: 100%;
	  border: none;
	  text-align: left;
	  outline: none;
	  font-size: 15px;
	  transition: 0.4s;
	}

	.active, .accordion:hover {
	  background-color: #ccc;
	}

	.accordion:after {
	  content: '\002B';
	  color: #777;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
	}

	.active:after {
	  content: "\2212";
	}

	.panel {
	  padding: 0 18px;
	  background-color: white;
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	}


}