@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100..900;1,100..900&display=swap');
       *{
       	margin: 0px;
       	list-style: none;
       	font-family: 'Poppins', sans-serif;
       	list-style: none;
       	text-decoration: none;
		overflow-x: hidden;
		box-sizing: border-box;
       }
	   html{
		scroll-behavior: smooth;
	   }
	   body{
		background: #359381;
	   }
	   body::-webkit-scrollbar{
		display: none;
	   }

/* NAVIGATION BAR CSS */
		.menu_bar{
			height: 70px;
			background-color: #344955;
			width: 90%;
			color: #fff;
			margin: auto;
			border-radius: 15px;
			margin-top: 10px;
			transition: 200ms;
			transform: scale(1,1);
			overflow-y: hidden;
			padding-top: 5px;
			position: relative;
		}
		.sticky{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			margin-top: 0px;
			z-index: 998;
			color: #000;
			border-radius: 0px;
		}
		.sticky ul li{
			color: #000;
		}
		.sticky ul li a , .sticky ul li a i{
			color: #000;
		}
		label::-webkit-scrollbar, .menu_bar::-webkit-scrollbar{
			display: none;
		}
		label{
			margin: 0px 50px;
			line-height: 50px;
			font-size: 25px;
		}
		.menu_bar ul{
			float: right;
		}
		.menu_bar ul li{
			float: left;
			line-height: 60px;			
			margin: 0 10px;
			padding: 0px;
		}
		.menu_bar ul li a{
			text-decoration: none;
			color: #000;
			font-size: 20px;
			padding: 10px;
		}
		.fa-home{
			color: #000;
			font-size: 24px;
			line-height: 38px;
			margin: 10px 10px 0px 10px;

		}	
         #click{
           display: none;
         }
         .checked{
         	float: right;
         	line-height: 60px;
         	padding: 0px;
         	visibility: hidden;
			color: #fff;
         }
		.menu_bar ul li:hover{
			background-color: #359381;
			border-radius: 20px;
			transition: 0.3s;
		 }
/* GO TO TOP BUTTON  */
		.btn{
			background-color: #fff;
			position: fixed;
			bottom: 20px;
			width: 50px;
			right: 28px;
			height: 50px;
			border-radius: 60%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32px;
			color: #000;
			text-decoration: none;
			opacity: 0;
			pointer-events: none;
			transition: all .4s;
		}
		.btn:hover{
			background-color: #27ae60;
			color: #fff;
		}
		.btn.top{
			bottom: 32px;
			pointer-events: auto;
			opacity: 1;
		}
/* RESPONSIVE CSS */
 @media only screen and (max-width:700px){
         	.checked{
				color: #000;
				cursor: pointer;
				visibility: visible;
         	}
         	.menu_bar ul{
         	  background: #202123;
              position: fixed;
              padding: 0px;
              margin: 0px;
              float:left;
              top: 60px;
			  height: auto;
              left:-110%;
              width: 100%;
              z-index: 999;
              color: #fff;
         	}
         	.menu_bar ul li{
				display: block;
				float: none;
				margin-left: 0;
				line-height: 26px;
		  }
		  .menu_bar ul li a i{
			color: #fff;
		  }
		  .menu_bar ul li a{
			color: #fff;
			font-size: 18px;
		  }
		    #click:checked~ul{
		    	left:0%;
		    }
			#click:checked~.menu_bar{
				height: 287px;
			}
		    .menu_bar ul li{
		    	padding: 10px 0px;
				width: 100%;
		    }
		    li.active,li:hover{
         	background: transparent;
         	color: #fff;
         	transition: 1s ease-out;
         	width: 25%;
            }
            h2{
             font-size: 25px;  
            }
        .webpage a li{
				background:none;       	
				font-size: 16px;
        }
        .webpage a li:hover{
        	background: none;
        }
		.btn{
			width: 30px;
			font-size: 20px;
			height: 30px;
		}
    }
	img{
		cursor: pointer;
		height: 60px;
		width: 100px;
		text-align: center;
	}

/*HOME CSS*/
			#home{
				background: #202123;
				min-height: 120vh;
				margin: 10px;
				border-radius: 10px;
				padding: 50px;
				font-size: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				font-weight: 700;
			}
			#home h1, p{
				color: #E2DFD2;
			}
			#home h1 span, p span{
				color: #27ae60;
			}
			#homeImage{
				height: 50vh;
				width: 320px;
				border-radius: 90%;
			}

/* ABOUT CSS */
	#about{
		height: 110vh;
		background-color: #202123;
		position: relative;
		padding-top: 50px;
		margin: 10px;
		border-radius: 15px;
		overflow-y: hidden;
	}
	#about div{
		display: flex;
		align-items: center;
	}
	#about h1{
		width: 100%;
		text-align: center;
		margin-top: 20px;
		font-size: 40px;
		color: #27ae60;
	}

	#about h1 span{
		color: #27ae60;
	}

	#about div p{
		margin: auto;
		padding: 20px;
		font-size: 28px;
		color: #fff;
		text-align: justify;
	}

/* FOOTER CONTAINER CSS*/

	.footer_container{	
		background: #24272e;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 20px;
	}
	.footer_items{
		column-gap: 20px;
		width: 200px;
	}
	.grow1{
		flex-grow: 2;
	}
	.grow2{
		align-items: center;
		flex-grow: 1;
	}
	.grow3{
		align-items: center;
		flex-grow: 1;
	}
	.grow3 ol a li{
		color: #fff;
		font-size: 20px;
		padding: 10px;
	}
	.grow3 ol a:hover li{
		color: #27ae60;
	}
	.footer_items h5{	
		background: none;
		margin: 20px;
		color: #27ae60;
		padding-left: 30px;
		font-size: 23px;
		font-family: 'Ubuntu';
	}
	#footer-p{
		color:#fff;
		font-size: 20px;
		margin-left: 30px;
		text-align: center;
	}
	.footer_items p i{
	color: #fff;
	font-size: 20px;
	margin: 10px;
	}
	#footer-logos a .fa{
		padding: 10px;
		color: #fff;
	}
	#footer-logos  a .fa:hover{
		background: #fff;
		border-radius: 6px;
		color: #000;
		cursor: pointer;
		transition: background 0.5s ease;
	}
	.webpage li{
		font-size: 20px;
		width: 60%;
		color: #fff;
		cursor: pointer;
		position: relative;
		padding-bottom: 7px;
	}
	.webpage li::before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 20%;
		height: 2px;
		transition: width 0.5s ease-out;
	}
	.webpage li:hover::before{
		width: 80%;
		left: 0;
		right: auto;
		background-color: rgb(0, 255, 0);
	}
	.webpage li::after{
	width: 10%;
	transition: width 0.3s ease;
	content: '';
	}
	.webpage li:hover{
	border-bottom: none;
	}