nav {
    gap: 12px;
    align-items: center;
}
.navbar {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 16px 24px;
	 background: #fff;
	 color: #fff;
}
.navlinks a{
	color: #fff;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 6px;
}
.btn{
	margin-top: 10px;
	padding: 10px 14px;
	border: none;
	border-radius: 10px;
	background: #D68189;
	color: #fff;
	cursor: pointer;
}

h1 {
  color: black;
  font-family: Aubrey;
  margin-center: 100px;
}
h2 {
  color: black;
  font-family: Roboto, sans-serif;
  margin-center: 100px;
  text-align: center;
  letter-spacing: 5px;
}

h3{
  color: black;
  font-family: Roboto, sans-serif;
  padding: 10px 250px;
}

h4{
  color: black;
  font-family: Roboto, sans-serif;
  text-align: center;
}
.spear-dragon{
  color: black;
  font-family: Roboto, sans-serif;
  padding: 10px 2px;
}
.enrollnow{
  color: white;
  font-family: Roboto, sans-serif;
  padding: 2px 10px;
  text-align: center;
}


.intro {
    padding: 10px 450px;
    text-align: center;
}

.introdescription {
   text-decoration: none;
   color: black;
  font-family: Roboto, sans-serif;
}

.featured{
	background-color: #eeebe6; /* light yellow */
	width: 1480px;
	height: 1150px;
	padding: 14px; /* inner spacing */
	border-radius: 5px; /* rounded corners */ 
}

.featuredlesson {
   text-decoration: none;
   color: black;
  font-family: Roboto, sans-serif;
    text-align: center;
}

.featuredimage {
padding: 0px 250px 
}
.intro {
    padding: 10px 450px;
    text-align: center;
}

.spear-tailed-dragon{
	text-decoration: none;
   color: black;
  font-family: Roboto, sans-serif;
  display: flex;
  flex-direction: row;
}

.dragon-lesson{ color: black;
  font-family: Roboto, sans-serif;
  padding: 2px 250px;
}
.enroll{background-color:#C6A49A;
  padding: 0px 0px;
  width: 215px;
  height:400px;
  align-items: center;
}

.price{background-color: #E3CFB4;
   text-align: center;
  border-radius: 50%;
  border-color: #D68189;
  width: 100px;
  height:  100px;
    line-height: 50
	px; 
  color: #D68189;
  font-family: Roboto, sans-serif;
  justify-content: center;
  align-items:center;
  letter-spacing: 2px;
  margin: auto;
}
.price-overlay{position: absolute; 
    padding: 25px 15px;
	font-size: 35px;
	  color: #D68189;
	font-family: Roboto, sans-serif;
  justify-content: center;
  align-items:center;
  letter-spacing: 2px;
  margin: auto;
}

.enrolldesc{ color: white;
text-align: center;
  font-family: Roboto, sans-serif;
  padding: 2px 10px;
}
.btn2{
    justify-content: center;
	padding: 10px 14px;
	border: none;
	border-radius: 10px;
	background: #D68189;
	color: #ffffff;
	cursor: pointer;
}
.description2{
	background-color: #FFFFFF;
	font-family: Roboto, sans-serif;
	padding: 10px 450px;
    text-align: center;
}

.masterclass-lessons{
	background-color: #eeebe6; 
	width: 1480px;
	height:800px;
	padding: 14px;
	border-radius: 5px; 
	display: flex;
  flex-direction: column;
}
.four-lessons{text-decoration: none;
   color: black;
  font-family: Roboto, sans-serif;
  text-align: center;
}

.lesson-list{display:flex;
  flex-direction: row;
  font-family: Roboto, sans-serif;
  gap: 40px;
}

.lessonimg{width: 300px;
height: 300px;
  margin: auto;
}

.skill-level{background-color:#E94E77;
display: flex;
  justify-content: center;
  align-items: center;
width: 100px;
height: 50px;
text-align: center;
	padding: 10px 14px;
	border: none;
	border-radius: 5px;
		color: #ffffff;}
.lesson1{background-color:#FFFFFF;
  padding: 20px 20px;
  width: 300px;
  height:600px;
}

.lesson2{background-color:#FFFFFF;
  padding: 20px 20px;
  width: 300px;
  height:600px;
}

.lesson3{background-color:#FFFFFF;
  padding: 20px 20px;
  width: 300px;
  height:600px;
}

.lesson4{background-color:#FFFFFF;
  padding: 20px 20px;
  width: 300px;
  height:600px;
}

/* ABOUT */
.image-container {
	background-color:#C6A49A;
    position: relative; 
    display: inline-block;
	width: 200;
    height: 2000;
}
.image-container img {
    display: block; /* Removes default image margins */
    width: 200;
    height: 2000;
}
 
.overlay-text {
    position: absolute; /* Positions the text over the image */
    padding: 40px 60px;
    top: 50%; 
    left: 10%; /* Centers the text horizontally */
    transform: translate(-50%, -50%); /* Adjusts for the text box's own size to be perfectly centered */
    color: white;
}

.page-banner {padding: 40px 60px;
	font-family: Roboto, sans-serif;
	color: white;
	align: left;
    font-size: 2rem;
    letter-spacing: 2px;
}

.description2{
	background-color: #FFFFFF;
	font-family: Roboto, sans-serif;
	padding: 10px 450px;
    text-align: center;
}

.founders {background-color: #FFFFFF;
display:flex;
  flex-direction: row;
  justify-content: center;
  padding: 100px 300px;
	width: 1450px;
	height:500px;
	padding: 14px;
	border-radius: 1px
  font-family: Roboto, sans-serif;
  gap: 10px;
}

.founder{background-color: #ffffff;
  width: 300px;
  height:450px;
    margin-bottom: 20px;
  font-family: Roboto, sans-serif;
  gap: 10px;
}

.foundername{color:black;
font-size: 20px;
font-weight: bold;
text-align: center;
  display: flex;
  justify-content: center;}
  
.founderrole{color:black;
font-size: 15px;
font-weight: regular;
text-align: center;
  display: flex;
  justify-content: center;}

.founderimg{padding: 20px 30px;
	  width: 250px;
  height: 250px;
	  border-radius: 50%;
}

.schoolmasters {background-color: #EEEBE6;
display: flex;
  flex-direction: column;
  padding: 100px 300px;
	width: 1485px;
	height:1000px;
	padding: 5px;
	border-radius: 1px
  font-family: Roboto, sans-serif;
  gap: 10px;
}

.btn:hover {
  background-color: #E94E77;
color: white;}
  
  .btn2:hover {
  background-color: black; 
  color: white;
}

.lesson-btn:hover{
  background-color: black; 
  color: white;
}
.schoolmaster-description{text-decoration: none;
   color: black;
  font-family: Roboto, sans-serif;
  text-align: center;
}

.schoolmasters2.{background-color: #ffffff;
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
margin-top: 50px;}

.headmasterimg{
    display: flex;
	flex-direction: row;
    gap: 40px;
    justify-content: center;
	width: 200px;
height: 200px;}

.mastername{color:black;
font-family: Roboto, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
  display: flex;
  justify-content: flex-start;}
  
.masterrole{color:black;
font-family: Roboto, sans-serif;
font-size: 15px;
font-weight: regular;
text-align: center;
  display: flex;
  justify-content: flex-start;}
  
.master-grid {
  display: grid;
  flex-direction: row;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 40px;}

.master-large{background-color: #EEEBE6;
  display: grid;
  justify-content: center;
  grid-template-columns: auto;
  border: none;
  padding: 10px;
  font-size: 30px;
  text-align: center;}
  
.master-small{background-color: #EEEBE6;
  display: grid;
  grid-template-columns: auto;
  border: none;
  padding: 10px;
  font-size: 30px;
  text-align: center;}
		
.masterimg {display: flex;
	flex-direction: row;
	justify-content: center;
    gap: 40px;
    justify-content: center;
	width: 100px;
height: 100px;
	  border-radius: 50%;}

/* LESSONS */
.masterclass-lessons2{	background-color: #ffffff; 
padding: 100px 200px;
	width: 1480px;
	height:100px;
	padding: 14px;
	border-radius: 5px; 
	display: flex;
  flex-direction: column;
}

.masterclass-regular{font-weight: regular;}
.first-row-lessons{display:flex;
  flex-direction: row;
  justify-content: space-around;
    align-items: center; 
  font-family: Roboto, sans-serif;
  gap: 20px;
  margin-top: 10px;
}
.first-row-lesson-card{
  border-radius: 2%;
  background-color:#E3CFB4;
  padding: 20px 20px;
  width: 450px;
  height:400px;
    margin-bottom: 20px;
}
.first-lessonimg{
  display: flex;
  justify-content: center;
  align-items: center; 
  gap: 20px;
  margin-top: 10px;
	width: 300px;
  height:250px;
}
.second-row-lessons{display:flex;
  flex-direction: row;
  justify-content: space-around;
    align-items: center; 
  font-family: Roboto, sans-serif;
  gap: 20px;
  margin-top: 10px;
}

.third-row-lessons{display:flex;
  flex-direction: row;
  justify-content: space-around;
  font-family: Roboto, sans-serif;
  gap: 20px;
  margin-top: 10px;
}

.lesson-name{color:black;
font-size: 25px;
font-weight: bold;
text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; 
}
  
.lesson-enroll a{
	color: #fff;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 6px;
  display: block;
  	 padding: 10px 30px;
}

.lessonbar {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 color: #fff;
	 margin: 10px;
	 
}

.lesson-btn{
	margin-top: 4px;
margin: 1px;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	background: #E94E77;
	color: #fff;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	  display: flex;
  justify-content: center; 
  align-items: center;  
}
 .masterclass-youtube{	background-color: #eeebe6; 
	width: 1450px;
	height:800px;
	padding: 14px;
	border-radius: 5px; 
	display: flex;
  flex-direction: column;
}

 .masterclass-video{ 
display:flex;
  flex-direction: row;
  justify-content: center;
  font-family: Roboto, sans-serif;
  gap: 20px;
}

 .masterclass-card{background-color: #ffffff;
  width: 300px;
  height:230px;
    margin-bottom: 20px;
  font-family: Roboto, sans-serif;
  gap: 20px;
}
.youtube-video{
display: flex;
flex-direction: row;
  justify-content: center;
  align-items: center; 
  margin: auto;
  padding: 10px 10px;
  width: 250px;
  height: 137px;
}
.lesson-name2{color:black;
font-size: 20px;
font-weight: bold;
text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; 
}


/* FOOTER */
.footerbar {display: flex;
     flex-direction: row;
	 justify-content: space-between;
	 padding: 16px;
	 background: #C6A49A;
	 color: #fff;
}
.footerimg{display: flex;
     flex-direction: row;
	 padding: 1px 10px;}
.footer-copyright{display: flex;
     flex-direction: row;
	text-align: left;
	  padding: 1px 5px;
	font-family: Roboto, sans-serif;
		 color: #fff;
}
.footer-design-credit{
	display: flex;
     flex-direction: row;
	  justify-content: flex-end;
	 padding: 1px 400px;
		text-align: right;
	font-family: Roboto, sans-serif;
		 color: #fff;
}