@charset "utf-8";
/* Comment */


html{
	scroll-behavior: smooth;
}

body {
	padding: 0;
	margin: 0;
	background-color: white;
}

h1{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 750%;
	text-transform: uppercase;
	margin: 0;
	color: #3F3F3D;
	line-height: 1.2;
}

h2{
	color: #AB8F6F;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
	font-size: 280%;
}

h3{
	font-size: 160%;
}

h2, h3, h4, h5, p, li{
	font-family: 'Open Sans', sans-serif;
	margin: 0
}

p{
	font-size: 150%;
}

li{
	font-size: 150%;
	list-style-type: none; 
}

.bullet{
	list-style: circle;
	color: black;
	list-style-position: outside;
	margin-left: 30px;
	margin-bottom: 4%;
}

.bullet2{
	list-style: circle;
	color: black;
	list-style-position: outside;
	margin-left: 30px;
}


.container{
	width: 100%;
	margin: auto;
	padding-top: 0%;
	box-sizing: border-box;
}
	
.main{
	background-color: #FAF7F2;
	display: flex;
	justify-content: center;
	margin: 0;
	padding-top: 3%;
}

.myname{
	padding: 0 8% 8% 0%;
	margin-right: 5%;
	max-width: 60%;
}

#myname-subtitle{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-style: italic;
	font-size: 320%;
	margin-bottom: 1%;
	margin-left: 1%;
	padding-top: 15%;
	color: #C0AB93;
}

.div-wrapper{
	padding: 0% 0% 0% 35%;
	position: relative;
}

.div-wrapper img{
	right: 0;
	bottom: 0;
	position: absolute;
	display:block; 
}

.about-me{
	background-color: white;
	justify-content: center;
	margin: 0;
	padding: 8%;
	text-align: left;
}

.about-me p{
	font-size:140%;
}

.subtitle{
	margin-bottom: 2%;
}

.education-experience{
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1%;
	padding-bottom: 1%;
	display: flex;
	background-color: #F8F8F8;
}

.edudivide{
	display: flex;
	padding-left: 6%;
	padding-top: 2%;
}

.eduimage{
	padding-right: 3.5%;
}

.education{
	min-width: 50%;
	padding: 4% 2% 3.5% 1%;
	box-sizing: border-box;
	background-color: #F7F0E6;
	margin: 1% 1% 1% 0;
	border-radius:4%;
	line-height: 1.3;
}

.education h5{
	font-weight:500;
	font-size: 90%;
}

.expdivide{
	display: flex;
	padding-left: 6%;
	padding-top: 2%;
}

.expimage{
	padding-right: 3.5%;
}

.experience{
	min-width: 50%;
	padding: 4% 4% 3.5% 2%;
	box-sizing: border-box;
	background-color: #F7F0E6;
	margin: 1% 0 1% 0;
	border-radius:4%;
	line-height: 1.3;
}

.experience h5{
	font-weight:500;
	font-size: 90%;
}

.list{
	margin-top: 5%;
}

.skills{
	background-color: #FCF8F1;
	margin-top: 0%;
	justify-content: center;
	margin: 0;
	padding: 4% 8% 3.5% 8%;
}

.skills p{
	font-size: 140%;
	text-align: center;
}

.skills h3{
	text-align: center;
	padding-bottom: 1%;
}

.container2{
	display: flex;
	justify-content: center;
	align-content: center;
	min-height: 20vh;
	min-width: 30vh;
	position: relative;
	flex-wrap: wrap;
	gap:60px;
	border-radius: 50px;
	padding-bottom: 50px;
	padding-top: 20px;
}

.container2 .progress{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 100%;
	color: #FCF8F1;
	background: #E4E4E4 linear-gradient(to right, transparent 50%, var(--clr)0);
}

.container2 .progress img{
	position: absolute;
	top:50%;
	bottom:50%;
	transform: translate(-50%, -50%);
	font-size: 2.5em;
	z-index: 1;
	font-weight: 500;
}

.container2 .progress img span{
	font-size: 0.65em;
	font-weight: 400;
}

.container2 .progress img{
	position: absolute;
	top:62%;
	bottom:50%;
	transform: translate(50%, -70%);
	z-index: 1;
	font-weight: 500;
	color: var(--clr);
	text-transform: uppercase;
}

.container2 .progress::before{
	content: '';
	display: block;
	height: 100%;
	margin-left: 50%;
	transform-origin: left;
	border-radius: 0 100% 100% 0/50%;
}

.container2 .progress::after{
	content: '';
	position: absolute;
	inset: 20px;
	border-radius: 50%;
	background: #FCF8F1;
}

.container2 .progress::before{
	background: var(--clr);
	transform: rotate(calc(((var(--i) - 50) * 0.01turn )));
}

/* if value is less than 50% then */

.container2 .progress.less::before{
	background: #FCF8F1;
	transform: rotate(calc(((var(--i) - 0) * 0.01turn )));
}

.subtitle{
	text-align: center;
}

.projects{
	background-color: #F8F8F8;
	margin: 0;
	padding: 4% 8% 8% 8%;
	justify-content: center;
}

.projects h2{
	padding-bottom: 3%;
}

.box img{
	width: 300px;
	height: 452px;
	object-fit: cover;
	border-radius:20px;
}

.box img{
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
	-webkit-filter: brightness(2.0);
    filter: grayscale(100%);
    transition: all 0.2s ease;
}

.box img:hover{
    -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   transition: all 0.5s ease;
	 filter: none !important;
}

.carousel{
	padding-left: 5%;
}

.row {
	display: flex;
	gap:2%;
	justify-content: center;
	align-content: left;
}

.column {
	min-width: 30%;
	padding: 2%;
	box-sizing: border-box;
}

.column h2, p {
	text-align: left;
}

.contact{
	background-color: #EEEEEE;
	margin: 0;
	padding: 6% 4% 1.5% 0%;
	text-align: left;
}

#contacttitle{
	margin-bottom: 0;
	padding-left: 8%;
}

.someshitlah{
	display: flex;
}

.numbers{
	min-width: 42%;
	padding: 0.5% 0% 3.5% 0%;
	box-sizing: border-box;
	margin: 1% 0 1% 6%;
	padding-left: 0
}

.phone{
	display: flex;
	padding-top: 1%;
	padding-bottom: 1%;
	
}

.phone li{
	padding-left: 2.5%;
	font-size: 140%;
}

.insta{
	display: flex;
	padding-top: 1%;
	padding-bottom: 1%;
}

.insta li{
	padding-left: 2.5%;
	font-size: 140%;
}

.email{
	display: flex;
	padding-top: 1%;
	padding-bottom: 1%;
}

.email li{
	padding-left: 3%;
	font-size: 140%;
}

.blogger{
	display: flex;
	padding-top: 1%;
	padding-bottom: 1%;	
}

.blogger li{
	padding-left: 2.5%;
	font-size: 140%;
}

.numbers a:link, a:active, a:visited {
	color: #AB8354;
	text-decoration: none;
}

.numbers a:hover {
	color: #785C3A;
	text-decoration: underline;
}

.contactcontainer{
	font-family: 'Open Sans', sans-serif;
	position: relative;
/*	max-width: 270px;*/
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3% 1%;
	margin-right: 4%;
}

.contactcontainer placeholder{
	font-size: 120%;
}

.contactcontainer:after{
	font-family: 'Open Sans', sans-serif;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url("img/bg.jpg") no-repeat center;
	background-size: cover;
	filter: blur(50px);
	z-index: -1;
}
.contact-box{
	font-family: 'Open Sans', sans-serif;
/*	max-width: 550px;*/
	width: 100%;
	display: grid;
/*	justify-content: center;*/
	align-items: center;
	text-align: center;
}

.field{
	font-family: 'Open Sans', sans-serif;
/*	min-width: 250%;*/
	max-width: 251%;
	border: 2px solid rgba(0, 0, 0, 0);
	outline: none;
	padding: 0.5rem 1rem;
	font-size: 1.1rem;
	margin-bottom: 2%;
	transition: .3s;
	border-radius: 10px;
}

.field:hover{
	background-color: rgba(230, 230, 230, 0.6);
}

input{
	max-width: 20px;
}

textarea{
	font-family: 'Open Sans', sans-serif;
	min-height: 100px;
	border-radius: 20px;
}

.btn-submit {
	font-family: 'Open Sans', sans-serif;
	padding: 1.5%;
	border: none;
	border: 2px solid transparent;
	border-radius: 10px;
	width: 100%;
	background-color: #DAC0A3;
	color: #fff;
	font-size: 1.1rem;
	outline: none;
	cursor: pointer;
	transition: .3s;
	max-width: 25%;
	align-items: left;
	float: right;
	margin-top: -1%;
}

.btn-submit:hover {
	font-family: 'Open Sans', sans-serif;
	border: 2px solid;
	background-color:#BD9D79;
	border-color:#BD9D79;
	border-radius: 10px;
}

.field:focus{
    border: 2px solid rgba(30,85,250,0.47);
    background-color: #fff;
}


/* This is @media query. We use this selector type to create a responsive website*/

@media (max-width:600px) /* The max-width is to set the breakpoint for smaller devices */ {
	.main {
		display: block; /* in normal view, the display of .main is flex. In smaller devices, we overide the display to become block*/
	}
	.row {
		display: block; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
	}
	
	h1{
		text-align: left;
		font-size: 550%;
		line-height: 1.2;
		padding-left: 15%;
		padding-right: 7%;
		align-content: center;
		
	}

	h2{
		letter-spacing: 1px;
		font-size: 200%;
	}

	h3{
		font-size: 140%;
	}

	p{
		font-size: 100%;
	}

	li{
		font-size: 100%;
	}

	.bullet{
		margin-left: 30px;
		margin-bottom: 0;
	}

	.main{
		padding-top: 3%;
		display: block;
	}

	.myname{
		padding: 0% 0% 2% 0%;
		max-width: 100%;
	}

	#myname-subtitle{
		font-size: 200%;
		text-align: left;
		padding-left: 13%;
		padding-right: 7%;
	}


.div-wrapper{
	padding: 0% 0% 0% 35%;
	position: relative;
	display: block;
}

.div-wrapper img{
	bottom: 0;
	position: inherit;
	align-content: center;
	max-width: 100%;
	margin-left: -25%;
}

.about-me{
	background-color: white;
	justify-content: center;
	margin: 0;
	padding: 8%;
	text-align: left;
}

	.about-me p{
		font-size:100%;
	}

.education-experience{
	padding: 2%;
	display: block;
}

.edudivide{
	display: flex;
	padding-left: 7%;
	padding-top: 5%;
}

.eduimage{
	padding-right: 3.5%;
	max-width: 40px;
	max-height: 40px;
}

.education h5{
	font-size: 100%;
}

.expdivide{
	display: flex;
	padding-left: 10%;
	padding-top: 5%;
}

.expimage{
	padding-right: 3.5%;
	max-width: 40px;
	max-height: 40px;
}

.experience{
	min-width: 50%;
	padding: 4% 7% 7% 0%;
	margin: 1% 3% 5% 0;
	line-height: 1.3;
	display: inline-block;
}

.experience h5{
	font-size: 100%;
}

.list{
	margin-top: 5%;
}
	
.skills{
	background-color: #FCF8F1;
	margin-top: 0%;
	justify-content: center;
	margin: 0;
	padding: 4% 8% 3.5% 8%;
}

.skills p{
	font-size: 100%;
	text-align: center;
	padding-bottom: 10%;
}

.skills h3{
	text-align: center;
	padding-bottom: 1%;
}

.projects{
	padding: 5% 8% 8% 8%;
}

.projects h2{
	padding-bottom: 3%;
}

.box img{
	max-width: 250px;
	max-height: 322px;
}

#contacttitle{
	margin-bottom: 0;
	padding-left: 8%;
}

.someshitlah{
	display: block;
}

.numbers{
	min-width: 40%;
	padding: 0.5% 0% 2% 0%;
	box-sizing: border-box;
	margin: 1% 0 1% 0%;
}

.phone{
	padding-bottom: 0%;
}
	
	.phone img{
		width: 30px;
		height: 30px;
	}

.phone li{
	padding-left: 3%;
	font-size: 110%;
}

.insta{
	padding-bottom: 0%;
}
	
	.insta img{
		width: 30px;
		height: 30px;
	}

.insta li{
	padding-left: 3%;
	font-size: 110%;
}

.email{
	padding-bottom: 0%;
}
	
	.email img{
		width: 30px;
		height: 30px;
	}

.email li{
	padding-left: 3%;
	font-size: 110%;
}

.blogger{
	padding-bottom: 0%;	
}
	
	.blogger img{
		width: 30px;
		height: 30px;
	}

.blogger li{
	padding-left: 3%;
	font-size: 110%;
}

.contactcontainer{
	justify-content: center;
	align-items: center;
	padding: 3% 3%;
}

.contact-box{
	width: 90%;
	display: grid;
}

}


@media (max-width:992px) and (min-width:600px)/* The max-width is to set the breakpoint for smaller devices */  {
	.main {
		display: block; /* in normal view, the display of .main is flex. In smaller devices, we overide the display to become block*/
	}
	.row {
		display: block; /* in normal view, the display of .row is flex. In smaller devices, we overide the display to become block*/
	}
	
	h1{
		text-align: left;
		font-size: 600%;
		line-height: 1.2;
		padding-left: 0%;
		padding-right: 7%;
		align-content: center;
		
	}

	h2{
		letter-spacing: 1px;
		font-size: 240%;
	}

	h3{
		font-size: 150%;
	}

	p{
		font-size: 120%;
	}

	li{
		font-size: 120%;
	}

	.bullet{
		margin-left: 30px;
		margin-bottom: 0;
	}

	.main{
		padding-top: 3%;
		display: block;
	}

	.myname{
		padding: 0% 0% 0% 15%;
		max-width: 100%;
	}

	#myname-subtitle{
		font-size: 300%;
		text-align: left;
		padding-left: -5%;
		padding-right: 7%;
	}


.div-wrapper{
	padding: 10% 0% 0% 0%;
	position: relative;
	display: block;
}

.div-wrapper img{
	bottom: 0;
	position: inherit;
	align-content: center;
	max-width: 80%;
	margin-left: 10%;
}

.about-me{
	background-color: white;
	justify-content: center;
	margin: 0;
	padding: 8%;
	text-align: left;
}

	.about-me p{
		font-size:100%;
	}

.education-experience{
	padding: 2%;
	display: block;
}

.edudivide{
	display: flex;
	padding-left: 5%;
	padding-top: 5%;
	padding-bottom: 0%;
}

.eduimage{
	padding-right: 3.5%;
	max-width: 50px;
	max-height: 50px;
}

.education h5{
	font-size: 110%;
	padding-top: 0%;
}

.expdivide{
	display: flex;
	padding-left: 5%;
	padding-top: 5%;
	padding-bottom: 0%;
}

.expimage{
	padding-right: 3.5%;
	max-width: 50px;
	max-height: 50px;
}

.experience h5{
	font-size: 110%;
}

.list{
	margin-top: 5%;
}
	
.skills{
	background-color: #FCF8F1;
	margin-top: 0%;
	justify-content: center;
	margin: 0;
	padding: 4% 8% 3.5% 8%;
}

.skills p{
	font-size: 120%;
	text-align: center;
	padding-bottom: 5%;
}

.skills h3{
	text-align: center;
	padding-bottom: 1%;
}

.projects{
	padding: 5% 8% 8% 8%;
}

.projects h2{
	padding-bottom: 3%;
}

.box img{
	max-width: 250px;
	max-height: 322px;
}

#contacttitle{
	margin-bottom: 0;
	padding-left: 8%;
}

.someshitlah{
	display: block;
}

.numbers{
	min-width: 40%;
	padding: 0.5% 0% 2% 0%;
	box-sizing: border-box;
	margin: 1% 0 1% 0%;
}

.phone{
	padding-bottom: 0%;
	padding-left: 5%;
}
	
	.phone img{
		width: 30px;
		height: 30px;
	}

.phone li{
	padding-left: 3%;
	font-size: 120%;
}

.insta{
	padding-bottom: 0%;
	padding-left: 5%;
}
	
	.insta img{
		width: 30px;
		height: 30px;
	}

.insta li{
	padding-left: 3%;
	font-size: 120%;
}

.email{
	padding-bottom: 0%;
	padding-left: 5%;
}
	
	.email img{
		width: 30px;
		height: 30px;
	}

.email li{
	padding-left: 3%;
	font-size: 120%;
}

.blogger{
	padding-bottom: 0%;	
	padding-left: 5%;
}
	
	.blogger img{
		width: 30px;
		height: 30px;
	}

.blogger li{
	padding-left: 3%;
	font-size: 120%;
}

.contactcontainer{
	justify-content: center;
	align-items: center;
	padding: 3% 3%;
}

.contact-box{
	width: 90%;
	display: grid;
}

}