@charset "utf-8";
/* CSS Document */

.container {
	width:80%;
	margin:0 auto;
	display:flex;
	border:1px, black ,medium;
	
}

li {
	list-style: none;
}
.img {
	width:75%;
	border-radius: 300px;
	padding-top:30px;
	
}
.grayscale-on-hover {
    transition: filter 0.3s;
}

.grayscale-on-hover:hover {
    filter: grayscale(100%); /* Turn the image black and white on hover */
}
.left {
	width:50%;
	padding-left: 150px;
	text-align: center;
}
.right {
	width:50%;
	padding-top: 100px;	
	margin-left: -20px;
}

h1 {
	font-size:50px;
	margin-top:10px;
}

h2 {
	font-family: 'lindell hill';
	font-size: 40px
}

.icons1 {
	list-style: none;
	display: flex;
	gap:3%;
	justify-content:center;
	padding: 0px 0px;
	margin-top:-5px;	
}
.icons2 {
	list-style: none;
	display: flex;
	gap:3%;
	justify-content: center;
	padding: 1px 0px;
	margin-left: -2px;
	
}

.aboutbox {
	background-color: #DBE7C3;
	width:65%;
	font-family:'mandali';
	line-height: normal;
	margin-left: 80px;
	margin-top: -100px;
	padding-top:70px;
	padding-bottom: 20px;
	
}

h3 {
	font-family: 'lindell hill';
	font-size: 40px;
	margin-left:-20px;
}

.times {
font-family: 'Linden Hill';
color: #000000;
	font-size:17px;
}

.course {
font-family: 'mandali';
font-style: normal;
color: #000000;
font-size:15px;
}

.place {
font-family: 'mandali';
font-style: normal;
color: #818F63;
font-size:15px;

}

h4 {
	text-align: center;
}

.conicon {
		list-style: none;
	display: flex;
	gap:15%;
	justify-content: center;
	align-content: center;
	padding: 20px 0px
}

h4 {
	font-family: 'lindell hill';
	font-size:40px;
}

.coninfo {
		list-style: none;
	display: flex;
	gap:3%;
	justify-content: center;
	align-content: center;
	padding: 0px 0px;
	font-family: 'mandali'
}

.edu {
	margin-left:-40px;
}

.exp {
	margin-left:-40px;
}

.portfolio {
	font-family:'mandali';
	list-style:square;
}

.grad {
	padding-right:10px;
}
.stu {
	padding-right:10px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .left, .right {
        width: 100%;
        padding: 20px;
    }

    .aboutbox {
        width: 90%;
        margin-left: 0;
    }

    .icons1, .icons2 {
       flex-direction: column;
        align-items: center;
    }