nav {
    gap: 12px;
    align-items: center;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v51/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2) format('woff2');
    unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
}
.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: 50px 200px;
	width: 1480px;
	height:100px;
	padding: 9px;
	border-radius: 5px; 
	display: flex;
  flex-direction: column;
}

.lessoncards{	background-color: #ffffff; 
padding: 50px 250px;
	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;
}

.grid-box-lesson-button{border: none;
    margin: -10px;
	margin-left: -25px;
	padding: 2px;
    display:flex;
	flex-direction: row;
	  flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.lesson-name{color:black;
font-size: 25px;
font-weight: bold;
text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; 
}
  
.lesson-enroll a{
	  display: flex;
  justify-content: center;
  align-items: center; 
	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 */
 .masterclass-youtube{	background-color: #eeebe6; 
	width: 1475px;
	height:800px;
	padding: 2px;
	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; 
}

.videolessons{color:black;
font-size: 20px;
font-weight: bold;
text-align: center;
height: 350px;
  display: flex;
  justify-content: center;
  align-items: center; 
}
/* FOOTER */
.footerbar {display: grid;
	grid-template-columns:  1fr 1fr 1fr;
    justify-content: flex-start;
    align-items: flex-start;
	 padding: 1px;
	 background: #C6A49A;
	 color: #fff;
}

footer {
    background: #C6A49A;
    padding: 15px;
    margin-top: 40px;
}

.copyright-text{font-family: Roboto, sans-serif;
margin-top: -5px;
padding: 20px, 2px;}

.design-text{font-family: Roboto, sans-serif;
margin-left: 600px;
padding: 10px 2px;}

.footer-container {
    display: grid;
	grid-template-columns:  1fr 1fr 1fr;
    justify-content: flex-start;
    align-items: flex-start;
}
.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: column;
	  justify-content: flex-end;
	 padding: 1px 400px;
		text-align: right;
	font-family: Roboto, sans-serif;
		 color: #fff;
}
.lessons-selection{
  width: 1480px;
  height:500px;
	border: 1px #000;
	border-radius: 10px;
	margin-left: 2px;
}
/* CONTACT */

.map-section{
  width: 1480px;
  height:350px;
	border: 1px solid #999;
	border-radius: 10px;
	padding: 12px;
}

.forms-and-headquarters-section{border: none;
border-radius: none;
padding: 14px;
margin: 16px 0;
}

.column-label {font-family: Roboto, sans-serif;
margin-top: 5px;
margin-right: 100px;
}

.column-label-head{font-family: Roboto, sans-serif;
font-weight: bold;}

.grid-container{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	border: none;
	padding: 12px;
}

.grid-box1{
	border: none;
	border-radius: 10px;
	padding: 14px 150px;
	min-height: 70px;
    display:flex;
	flex-direction: column;
}

.grid-box-form{border: none;
	border-radius: 10px;
	padding: 14px;
	min-height: 70px;
    display:flex;
	flex-direction: row;
}
.grid-box2{
	border: none;
	border-radius: 10px;
	padding: 14px;
	min-height: 70px;
    display:flex;
	flex-direction: column;
}

.grid-box3{
	border: none;
	border-radius: 10px;
	padding: 14px;
	min-height: 70px;
    display:flex;
	flex-direction: column;
}

.radio-label{
	font-family: Roboto, sans-serif;
    margin-top:3px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size:13px;
}
.checkbox-skill-level{
	font-family: Roboto, sans-serif;
    margin-top:5px;
	margin-left: 80px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size:13px;
}
.checkbox-interests{
	font-family: Roboto, sans-serif;
    margin-top:8px;
	margin-left: -90px;
    display:flex;
    flex-direction: column;
	    flex-wrap: wrap;
    gap:6px;
    font-size:13px;
}

select {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background: #EEEBE6;
  border-radius: 10px;
  border: none;
      display:flex;
      flex-wrap: wrap;
}
.send-message{
    justify-content: center;
	padding: 10px 14px;
	border: none;
	border-radius: 10px;
	background: #E94E77;
	color: #ffffff;
	cursor: pointer;
		    display:flex;
	    flex-wrap: wrap;
}
.grid-box-form-button{border: none;
	border-radius: 10px;
	padding: 14px;
	min-height: 70px;
    display:flex;
	flex-direction: row;
	justify-content: flex-start;
}

.radio-label{font-family: Roboto, sans-serif;
margin-left: -10px;}
  input[type="number"] {width: 100%; /* Makes the textarea responsive to its container width */
  height: 10px;
  padding: 12px 20px;
  box-sizing: border-box; /* Includes padding and border in the width calculation */
  border: 0px solid #ccc;
	border-radius: 4px;
	background: #EEEBE6;
	    display:flex;
	    flex-wrap: wrap;
}
  font-size: 16px;
  resize: vertical; /* Allows vertical resizing only */
}

.input-radio-rating{margin-left: -10px;}
.textbox {
margin-left: 20px;
  min-width: 20px;
  min-height: 150px;
  padding: 12px 15px;
  box-sizing: border-box; /* Includes padding and border in the width calculation */
  border: 0px solid #ccc;
  border-radius: 8px; /* Gives rounded corners */
  background-color: #EEEBE6;
  font-size: 16px;
  resize: vertical;
}

.row-message{display: flex;
flex-direction: row;
}

.emptytext{color: white;}
.send-message:hover {
  background-color: black; 
  color: white;
}

.form-column-label{font-family: Roboto, sans-serif;
    display:flex;
    flex-direction: column;
    gap:6px;}
	
.column-label{font-family: Roboto, sans-serif;
    display:flex;
    flex-direction: column;
    gap:6px;}
.headquarters-heading{
  font-weight: bold;
  color: black;
  font-family: Roboto, sans-serif;
  text-align:left;
}
.ratio iframe{
	position: absolute;
	inset: 0
	width: 100%;
	height: 100%;
	border: 0;
  width: 1480px;
  height:350px;
}
.row-input{
	font-family: Roboto, sans-serif;
    margin-top:8px;
    display:flex;
    flex-direction: row;
    gap:6px;
    font-size:13px;
}
input[type=text], input[type=email], textarea {
	margin: 300px;
	font-family: Roboto, san-serif;
	background: #EEEBE6;
    width: 100%;
    padding: 5px;
    margin: 1px 0;
    box-sizing: border-box;
	border-radius: 10px;
	border: none;
    display: flex;
    flex-direction: column;
}

.grid-box-form-row{
    display: flex;
    flex-direction: row;
}

.form-grid-container {
  display: grid;
  grid-template-columns: auto auto;
}
.survey-group {
    display: flex;
    flex-direction: column;
}
.input-radio-rating {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
	margin-right: 2px;
}

.headquarters-text{font-family: Roboto, sans-serif;}
#id .twolabel{font-family: Roboto, sans-serif;}

input[type="number"] {
  width: 300px;
  padding: 15px;
  	margin-top: 4px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  	font-family: Roboto, san-serif;
	background: #EEEBE6;
  border: none;
  border-radius: 8px;
      margin-left: 140px;
}

textarea {
    padding: 5px;
    border-radius: 8px;
    border: none;
    background: #e8e4e4;
}

.nav-send {
	 display: flex;
	 margin-left: 20px;
	 padding: 16px 24px;
	 background: #fff;
	 color: #fff;
}
.nav-send2 a{
	color: #fff;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 6px;
}

.socials {
    font-family: Roboto, sans-serif;
    display: flex;
    flex-direction: row;
    gap: 2%;
    font-weight: 400;
    margin-left: 2px;
}

.fa {
  padding: 15px 5px;
  border-radius: 11px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin-left: -2px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #808080;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-twitter {
  background: #808080;
  color: white;
}

.fa-youtube {
  background: #808080;
  color: white;
}

.fa-instagram {
  background: #808080;
  color: white;
}

.fa-pinterest {
  background: #808080;
  color: white;
}

.fa-behance {background: #808080;
  color: white;
}

.origami-logo {width: 250px; height: 50px;}

/* MOBILE AND TABLET */

@media (min-width: 480px)  (max-width: 960px) {
    header, section, footer {
        max-width: 580px;
        margin: auto;
    }
	
	.origami-logo { width: 500px; height: 15px;   }
	
.navlinks a{
	color: #fff;
	text-decoration: none;
	padding: 20px 2px;
	border-radius: 6px;
}
.btn{
	margin-top: 10px;
	padding: 2px 8px;
	border: none;
	border-radius: 10px;
	background: #D68189;
	color: #fff;
	cursor: pointer;
}
.radio-label{
flex-direction: column;
        align-items: flex-start;
        padding: 1px 1px;
        gap: 10px;
		    font-size: 11px;
  }
.map-section {
  width: 100px;
  height: 15px;
	border: 1px solid #999;
	border-radius: 10px;
	padding: 2px;
    }
    .forms-and-headquarters-section {
grid-area: 2 / span 1;
    }
	.grid-box1{
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 20px;
	gap: 20px;}
	
	.grid-box3{
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 20px;
	gap: 20px;}
.ratio iframe {
        min-width: 150px;
        min-height: 250px;
    }
	
	.input-radio-rating{
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 20px;
	gap: 20px;}
	
	.grid-container{
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 20px;
	gap: 20px;}
	.socials{
	        flex-direction: column;
        align-items: flex-start;
        padding: 30px 20px;
	gap: 20px;}
}