@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;300;400;700&display=swap');
/* CSS Document */

	*{
		padding:0px;
		margin: 0px;
		box-sizing: border-box;
		font-family: 'Roboto', sans-serif;
	}

	html {scroll-behavior: smooth;}
	
	body, html{height: 100%;}
	
    body.no-scroll{overflow: hidden;}

	.container{	
	    width: 1140px;
		margin: 0px auto;
		min-height: 200px;
		padding: 100px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.subHead{
		height: 30px;
		width: 100%;
		margin-bottom: 32px;
	}

	.subHead h1{
		float: left;
		line-height: 20px;
		font-size: 40px;
	}

	.subCount{
		display: flex;
		justify-content: flex-start;
		align-items: center;	
	}
	
	.subCount span{
		float: right;
	}
	
	.subCount .line{
		display: block;
		height: 1px;
		background-color: #D5DBDF;
		margin: 0px 14px;
		width: 100%;
	}


	header{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		display: flex;
		height: 40px;
		transition:all 0.2s;
		z-index: 9999;
	}
	
	header.solid{
		background-color:black; 
		box-shadow: 1px 1px 6px #00000017;
		height: 80px;
	}

	header.solid a{
		color: black;
	}


	header > section{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0px 0px;
	}
	
	header .first{
		color: white;
		font-size: 12px;
		justify-content: flex-start;
	}

	header .first span{
			margin-left: 4px;
			font-weight: 300;
	}
	
	header .middle{
		justify-content: center;
	}
	
	header .middle a{
		margin: 20px;
		text-decoration: none;
		color: white;
		position: relative;
		font-size: 14px;
		transition: 0.5s;
	}

	header .middle a:focus{
		color: #E3667D;	
	}

	header .middle a:hover{
		color: #357AF6;	
	}

	header .last{
		justify-content: flex-end;
	}

	header .last a{
		display: block;
		font-size: 14px;
		padding: 10px 14px;
		box-sizing: border-box;
		background-color: #ffffff1c;
		border-radius: 6px;
		text-decoration: none;
		color: white;
	}

	header .last a:hover{
		background-color: #E3667D;
		transition: all 0.2s ease;
	}

	#Hero{
		display: flex;
		width: 100%;
		margin: 0px auto;
		height: 100%;
		padding: 0px 0px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-image: url("img/yoga.jpg");
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	#Hero .scrim{
		background-color:#000000bd;
		position:absolute;
		top: 0px;
		right:0px;
		bottom:0px;
		left:0px;
		z-index: 1;
	}

	#Hero div.intro{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		z-index: 2;
	}
	
	#Hero div.links{
		display: flex;
		justify-content: center;
		flex-direction: row;
		z-index: 2;
	}

	#Hero div a{
		min-width: 140px;
		padding: 0px 24px;
		font-size: 16px;
		margin: 0px 14px;
		line-height: 48px;
		text-align: center;
		height: 48px;
	}
	

	#Hero div a:first-child{
		background-color: #E3667D;
		color: white;
	}

	#Hero div a:last-child{
	    background-color: #ffffff;
    	color: black;
	}

	#Hero h1{
		color: white;
		font-size: 52px;
		font-weight: 200;
		text-align: center;
	}
	
	#Hero p{    
		color: white;
		line-height: 32px;
		font-weight: 500;
		margin:14px 0px 52px 0px;
		text-align: center;
		max-width: 60%;
	}

	#Hero a{
		display: block;
		font-size: 14px;
		font-weight: 700;
		padding: 10px 14px;
		box-sizing: border-box;
		background-color: #ffffff1c;
		border-radius: 6px;
		text-decoration: none;
		color: white;
	}

	#About{
		width: 100%;
		height: auto;
		padding: 0px 0px;
		background-color: white;
	}
	
	#About p{    
		color: #3C4043;
		line-height: 32px;
		font-weight: 400;
		margin-bottom: 32px;
		margin-left:2%;
		margin-right:2%;
		text-align: justify;
	}
	
	#About .count{
		font-size:16px;
		font-weight: 700;
	}
	
	#About .left{
		margin-right: 100px;
	}
	
	#About .right{
	}

	#About .right span{
		height: 360px;
    	width: 360px;
		display: block;
		background-image:url("img/me.jpeg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 100%;
		border: 14px solid #e3667c;
	}
	
	#About a{
		height: 48px;
		background-color: white;
		border: 1px solid #DCE3E8;
		border-radius: 8px;
		color: black;
		text-decoration: none;
		display: block;
		position: relative;
		float: left;
		line-height: 47px;
		font-size: 14px;
	}

	#Work{background-color: #F5F7FA;}

	#Works{
	    display: flex;
    	justify-content:space-between;
    	align-items: center;
		padding-top:0px;
	}
	
	#Works .course{
		    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 40px;
    width: 30%;
    min-height: 340px;
    flex-direction: column;
    transition: ease all 0.3s;
    overflow: hidden;
    -webkit-box-shadow: 0px 23px 16px -9px rgb(0 0 0 / 15%);
    box-shadow: 0px 23px 16px -9px rgb(0 0 0 / 15%);
    background-color: white;
    text-align: center;
	}	
	
	#Works .course:hover{
		-webkit-box-shadow: 0px 33px 26px -9px rgb(0 0 0 / 21%);
		box-shadow: 0px 33px 26px -9px rgb(0 0 0 / 21%);
	}

	#Works .course h1{
		font-weight: 100; 
		font-size: 28px;
		margin-bottom: 28px;
	}

	#Works .course h3{
		text-transform: uppercase;
		margin-bottom: 14px;
		font-weight: 700;
	}

	#Works .course p{
		line-height: 30px;
	}
	
	#Works .course a{
		display: block;
		font-size: 14px;
		padding: 10px 14px;
		box-sizing: border-box;
		background-color: #e3667c;
		border-radius: 6px;
		text-decoration: none;
		color: white;
		margin-top:24px;
	}

	#Footer{
		background-color:black;
		padding: 0px 40px;
	}

	#Footer .subHead h1 {
		float: left;
		line-height: 20px;
		font-size: 52px;
		color: white;
	}

	#Footer .subCount span {
		color: white;
		font-weight: 700;
	}

	#Footer .line {
		opacity: 0.2;
	}

	#Footer .container{
		align-items: center;
	}

	.contact{
		display: flex;
		color: white;
		padding: 0px;
		
	}

	.contact h2{margin-bottom: 12px;}
	
	.contact > section{
		width: 100%;
	}

	.contact ul li{
		list-style-type: none;
		color:#828d96;
		font-size: 14px;
    	margin-bottom: 10px;
	}
	
	

@media only screen and (max-width: 900px){
	
	.container{
		width: 100%;
	}
	
	header{
		flex-direction: column;
	}
	
	header > section{
		justify-content: center !important;
	}
	
	header .left{
		font-size: 8px;
		text-align: center;
	}
	
	header.solid{
		height: 120px;
	}
	
	#Hero h1 {
		font-size: 36px;
		text-align: center;
	}
	
	#Hero .count{
		text-align: center;
	}
	
	#About .container{
		flex-direction: column-reverse;
	}
	
	#About .left {
    	margin-right: 0px;
	}

	
	#About .right span {
    	margin-bottom: 70px;
	}
	
	#Work{
		width: 100%;
	}
	
	#Work .container{
		flex-direction: column;
	}
	
	#Works .course{
		width: 100%;
		margin-bottom: 40px;
	}
	
	#Project #Details{
		width:100%;
		padding: 64px;
		top: 0px;
	}
	
	#Project #Details h1{
		font-size: 18px;
	}
	
	#Project #Details p{
		font-size: 14px;
	}
	
	#Project{
		width: 100%;
	}
	
	#closer{
		top:30px;
	}
	
	#Work .container{
		flex-direction: column;
	}
	
	#Footer .container {
    	flex-direction: column;
	}
	
	.contact h2 {
   		 margin: 12px 0px;
	}


}