h1 {
  color: black;
  font-family: Aubrey;
  margin-center: 20px;
}

h2 {
  color: black;
 font-family: Roboto, sans-serif;
  margin-center: 20px;
  text-align: center;
  letter-spacing: 20px;
  font-weight: normal;
}
h3 {
  color: black;
  font-family: Roboto, sans-serif;
  margin-center: 20px;
  text-align: justify;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

h4 {
  color: black;
 font-family: Roboto, sans-serif;
  text-align: center;
  font-weight: semi-bold;
}

.featured {
      color: black;
 font-family: Roboto, sans-serif;
    padding: 20px 160px;
    display: flex;
    flex-wrap: wrap;
}
.dragon {
    padding: 20px 200px;
    display: flex;
    flex-wrap: wrap;
}
.master-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30p
.image-container {
	background-color:#C6A49A;
    position: relative; /* Essential for positioning the text relative to the container */
    display: inline-block; /* Helps the container wrap around the image size */
	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%; /* Centers the text vertically */
    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;
}

.page-banner {
	font-family: Roboto, sans-serif;
	color: white;
	align: left;
    font-size: 2rem;
    letter-spacing: 2px;
}
}
table {
    width: 100%; /* Sets the width of the table */
    margin: 10px; /* Centers the table on the page */
    border: 0px solid #ddd; /* Adds a border around the table */
}

th, td {
    border: 0px solid #ddd; /* Adds borders to table headers and data cells */
    padding: 5px; /* Adds spacing within cells */
    text-align: left; /* Aligns text to the left */
	
}
#content {
	background: #EEEBE6;
	padding: 14px; /* inner spacing */
	border-radius: 5px; /* rounded corners */ 
}
.btn {
	padding: 10px 14px; /* size */
	color: white;
	text-decoration: none;
	border: none; /*remove default border */
	border-radius: 8px; /* rounded corners */
	cursor: pointer; /* hand cursor */
	background-color: #D68189; 
.card {
    flex: 1;
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 25px;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
}

p {
	font-family: Roboto, sans-serif; /*readable font */
	margin: 20px; /*space around the page */
	line-height: 1.5; /* better readability */
	padding: 5px 450px 30px;
}

.spear-tailed-dragon p
{font-family: Roboto, sans-serif; /*readable font */
	margin: 1px; /*space around the page */
	line-height: 1.5; /* better readability */
	padding: 5px 450px 30px;
}
.origami-masters {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.master img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}
.circle-img {
  width: 50px;   /* Set equal width and height */
  height: 50px;  /* Set equal width and height */
  border-radius: 50%; /* Makes the square image a circle */
}
	
.box {
	background-color:#C6A49A;
	color: white;
	
.box-b {
	background: #E94E77;
	color: white;
}

.grid {
    display: grid;
    grid-template-columns: 1.2fr 4fr;
    gap: 30px;
    align-items: center;
}

.headmaster img
{  width: 50px;   /* Set equal width and height */
  height: 50px;  /* Set equal width and height */
  padding: 50px 40px 20px; 
  border-radius: 10%; /* Makes the square image a circle */
.footertable{
    width: 100%; /* Sets the width of the table */
    margin: 10px; /* Centers the table on the page */
    border: 0px solid #ddd; /* Adds a border around the table */
	background-color:#C6A49;
	padding: 25px;
    text-align: center;
    font-size: 0.8rem;
	font-family: Roboto,
    color: #fff;
school h2 {
    letter-spacing: 8px;
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: normal;
}
user agent stylesheet
h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
.page-banner {
    background-image: url(images/bg_tile.png);
    background-color: var(--tan);
    background-position: center;
    padding: 40px 160px;
}
.founders {
    display: flex;
    justify-content: center;
    gap: 80px;
}
.enroll {
    width: 350px;
    background-color: var(--tan);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    color: white;
}
.master img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}
.school {
    background-color: var(--lighttan);
    padding: 60px 160px;
    text-align: center;
}
}
/* FOOTER */
footer {
    background: #C6A49A;
    padding: 25px;
    text-align: center;
    font-size: 0.8rem;
	font-family: Roboto,
    color: #fff;
}
	
	:root {
    --darkpink: #E94E77;
    --lighttan:#EEEBE6;
    --rose:#D68189;
    --tan:#C6A49A;
    --ivory:#E3CFB4;
}

.teacher img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
  object-position: center; /* Centers the image within the frame */
}