*,
 *::before,
 *::after {
	 box-sizing: border-box;
 }
 

 :root {
	 --ff-first: 'Dancing Script', cursive;
	 --ff-second: 'Satisfy', cursive;
	 --ff-third: 'Handlee', cursive;
	 
	 --fw-reg: 300;
	 --fw-bold: 900;
	 
	 --clr-bg: #ffffff;
	 --clr-txt_1:#000000;
	 --clr-txt_2: #ffffff;
	 --clr-accent: #8c8c8c;
	 
	 --fs-h1: 3rem;
	 --fs-h2: 2.25rem;
	 --fs-h3: 1.5rem;
	 --fs-body: 1rem;
	 
	 --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.75),
		   0.125em 0.125em 0.25em rgba(0,0,0,.25),
		   0.125em 0.125em 0.25em rgba(0,0,0,.25);
	 
 }
 
 @media(min-width: 800px){
	 
	 :root{
		 --fs-h1: 4.5rem;
		 --fs-h2: 3.75rem;
		 --fs-h3: 1.5rem;
		 --fs-body: 1.125rem;
	 }
 }
 
 html{
	 scroll-behavior: smooth;
 }

 section{

	 padding: 5em 3em;

 }
 
 header{
	 display: flex;
	 justify-content: space-between;
	 padding: 1em;
 }
 
  .logo {
	 max-width: 300px;
 }
 

 
 .hamburger {
	 
	 display: block;
	 position: relative;
 }
 .hamburger,
 .hamburger::before,
 .hamburger::after {
	background: var(--clr-accent);
	 width: 1.25em;
	 height: 3px;
	 border-radius: 1em;
	 transition: transform 250ms ease-in-out;
 
 }
 
 
 .hamburger::before,
 .hamburger::after {
	 content: ' ';
	 position: absolute;
	 left: 0;
	 right:0;
	 
 }
	 
.hamburger::before { top:6px}
.hamburger::after{bottom: 6px;}	 

	 
 .nav{
	 position: fixed;
	 background: var(--clr-txt_1);
	 color: var(--clr-bg);
	 top:0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 z-index: 100;
	 
	 transform: translateX(100%);
	 transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
 	 
 }
 
 .nav-open .nav {
	 transform: translateX(0);
 }
 
 .nav__list{
	list-style: none;
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	margin: 0;
	padding: 0;
	
 }
	
.nav__link{
	color: inherit;
	font-weight: var(--fw-bold);
	font-size: var(--fs-h1);
	text-decoration: none;
}

.nav__link:hover{
	color: var(--clr-accent);
}

 .nav-toggle{
	 padding: .25em;
	 background: transparent;
	 border: 0;
	 cursor: pointer;
	 position: absolute;
	 right: 1em;
	 top: 1em;
	 z-index: 1000;
	 
 }
 
 .nav-open .nav-toggle{
	 position: fixed;
 }
 
 .nav-open .hamburger{
	 transform:rotate(.625turn);
 }
 
 .nav-open .hamburger::before{
	 transform: rotate(90deg) translateX(-6px);
 }
 
 .nav-open .hamburger::after{
	 opacity: 0;
 }
	 
		
 strong{
	 font-weight: var(--fw-bold);
  }
 

 
 body {
	 background: var(--clr-bg);
	 color: var(--clr-txt_1);
	 margin: 0 auto;
	 font-family: var(--ff-first);
	 font-size: var(--fs-body);
	 line-height: 1.6;
 }
 
 img {
	 display: block;
	 max-width: 100%;
	 
 }
 
 
h1,
h2,
h3 {
	line-height: 1;
	margin: 0 auto;
}

h1 { font-size: var(--fs-h1)}
h2 { font-size: var(--fs-h2)}
h3 { font-size: var(--fs-h3)}

.section_intro_title{
	font-weight: var(--fw-reg);
	margin-left:0.5em;

	
}
.section_intro_title strong{
	display: block;
	margin-left:0.125em;
	
}

.section_about_subtitle,
.section_intro_subtitle{
	background: var(--clr-accent);
	padding: 0.25em 1em;
	font-family: var(--ff-second);
	font-size: var(--fs-h3);
	display: inline-block;
	
	

}

.my_photo{
	box-shadow: var(--bs);
	}
	
.intro{
	position: relative;
}

@media(min-width:600px){
	.intro{
		padding: 5em 2em;
		display: grid;
		width: min-content;
		margin: 0 auto;
		grid-template-areas:
			"img title"
			"img subtitle";
		grid-template-columns: min-content max-content;		
	}
	
	.Photo{
		grid-area: img;
		min-width: 250px;
		position: relative;
		z-index: 2;
	}
	
	
	.section_intro_subtitle{
		
		align-self: start;
		grid-column: -1/1;
		grid-row: 2;
		text-align: right;
		position: relative;
		left: -1em;
		width: calc(100% + 1.5em);
				
	}
	

}

.about_me{
	
	background-color : var(--clr-bg);
	color: var(--clr-txt_1);
}

.course{
	background-color: var(--clr-txt_1);
	color: var(--clr-bg);
	background-image: url(https://business-services-technologies.com/wp-content/uploads/stock-1863880_1920-1024x683.jpg);
	background-size: cover;
	text-align: center;
	margin-bottom: 4em;
	
}
.section_course_title{
	position: relative;
}
.section_course_title::after{
	content: '';
	display: block;
	width: 5em;
	height: 1px; 
	margin: 0.5em auto 1em;
	background: var(--clr-bg);
	opacity:  0.50;
}

.service {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 800px) {
	.Subjects {
		display: flex;
		max-width: 1000px;
		margin: 0 auto;
	}
	.subject + .subject{
		  margin-left: 2em;
}

 .btn{
	 display: inline-block;
	 padding:.5em 2.5em !important;
	 background: var(--clr-bg);
	 color: var(--clr-txt_1);
	 text-decoration: none;
	 cursor: pointer;
	 font-size: .8rem;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	 font-weight: var(--fw-bold);
	 transition: transform 200ms ease-in-out;
	 
 }
 
.btn:hover{
	transform: scale(1.1);
	
}


.about_me {
	max-width: 1000px;
	margin: 0 auto;
}



.about_me_img{
	box-shadow: var(--bs);
}

@media (min-width: 600px) {
		.about_me {
			display: grid;
			grid-template-columns: 1fr 200px;
			grid-template-rows: 50px 25px auto;
			grid-template-areas:
				"title img"
				"subtitle img"
				"text img";
				
			grid-column-gap: 2em;
		}
		
		.section_about_title {
			grid-row-start: 1;
			grid-column-start: 1;
			grid-row-end: 1;
			grid-column-end: 1;
			
		}
		
		.section_about_subtitle{
				grid-column: 1/-1;
				position: relative;
				left: -1em;
				width: calc(100% + 2em);
				padding-left: 7em;
				padding-right:calc(200px + 4em);
				
				
		}
		
		.about_me_img {
			grid-row-start: 1;
			grid-column-start: 2;
			grid-row-end: 3;
			grid-column-end: 2;
			position: relative;
			z-index: 2;
			
			
			
			
			
		}

	
}

.footer {
	background: var(--clr-accent);
	text-align: center;
	Padding: 2.5em 0;
	
}
.social_items:hover {
	opacity: .25; 
}

.social_sites{
	list-style: none;
	display: flex;
	justify-content: center;
	margin: 2em 0 0;
	padding: 0;
}

.social_items{
	margin: 0 .5em;
}