/* —————————————————————————————HOMEPAGE———————————————————————————————————————————*/

:root{
	--darkpink:#E94E77; /** --name: #hexcode;      so now whenever you type something like background—color:var(--darkpink), you don't have to type a hex code**/
	--lighttan:#EEEBE6;
	--rose:#D68189;
	--tan:#C6A49A;
	--bluegreen:#C6E5D9;
	--ivory:#E3CFB4;
}

body{
	font-family: 'Roboto', sans-serif;
	margin:0;
}

img {
	width:100%;
}

h1{
	font-family: 'Aubrey', cursive;
	font-size:48px;
	text-align:center;
}

p{
	font-size:18px;
}


/**header**/
header{
	background-color:white;
	padding:20px 30px;
	overflow:hidden; 
}

#logo-container{ /**SIZE NG LOGO**/
	width:400px;
	float:left;
}



nav ul {
	/**FLEXBOX**/
	/**display:flex;**/
	
	/**FLOAT**/
	float:right;
	padding-right:30px;
}

header nav ul li {
	list-style:none;
	margin-left:20px;
	
	/**FLOAT**/
	display: inline-block;
}

header nav ul li a {
	background-color:var(--rose);
	text-decoration:none;
	color:white;
	padding:10px 20px; /**PADDING NG BOXES**/
	border-radius:100px; /**HOW ROUND CORNER NG NAV BUTTONS;**/
	position:relative;
	top:0;
	transition:top .3s; /**ANIMATION TIME, better yung may decimal like .3, .5, masyado matagal 1 second ngl**/
}

header nav ul li a:hover{  /** hover is a pseudoclass, this makes the animation, paired with its reference tag */
	background-color:var(--darkpink);
	top:-5px;   /**SO THIS MAKES THE HOVER ANIMATION, negative is up? positive is down for some reason;**/
}

/****sections****/
/**NAKA NAME BASE SA MGA DIV CLASS, TO TARGET SPECIFIC SECTIONS;**/

.main-container{
	padding-left: 313px;
	padding-right: 313px;
	
}


h1.webpage-title{
	padding-top:100px;
}


.intro-text {
  text-align: justify;
  padding-left: 313px;
  padding-right: 313px;
  padding-bottom: 110px;
}


.section-bgcolor {
	background-color:var(--lighttan);
	padding-top: 85px;
	padding-bottom: 100px;

}


h2.section-title{
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 500; /* SINCE VARIABLE FONT, U CAN CUSTOMIZE THICKNESS */
	letter-spacing: 25px; /* PARA SA WIDE KERNING*/
	text-transform: uppercase; /* PARA MAGING UPPERCASE*/
	margin-bottom: -5px; /* reduce space below */
	
}

p.section-subtitle{
	text-align: center;
	margin-bottom: 30px;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;

	
}


.featured-img img  {
	border-radius: 12px;
}


.featured-text {
  display: flex; /*to make the flexbox*/
  align-items: flex-start; /* Aligns items vertically at the top.
     Prevents the shorter CTA column from being vertically centered
     next to the taller description column. */
  gap: 30px; /* Adds space BETWEEN the columns.
     Cleaner than margins and doesn’t affect outer spacing. */
}


.featured-desc {
  flex: 2.2;   /* left column, HIGHER FLEX=WIDER SPACE TAKEN */ 
}


.featured-cta {
  flex: 1;   /* right column */
  background-color:var(--tan);
  text-align: center;
  color: white;
  border-radius: 12px;
  margin-top: 20px;
  padding: 20px;
  
}


.price{
	display: inline-flex;      
	width: 100px;
  	height: 100px;
  	border-radius: 50%;
  	border: 4px solid white;
  	background-color: var(--ivory);
  	font-size: 40px;
  	color: var(--darkpink);
  	align-items: center;
  	justify-content: center;
  	margin: -7px;
	
}

.price sup {   /*tinatarget natin yung superscript sa html <sub>*/
  font-size: 0.5em; /*what's nice with 'em' instead of 'px' is that it is relative SA PARENT. so responsive siya 
  sa size ng price text natin*/
  top: -0.1em;
  position: relative;
}



a.button{
	background-color:var(--darkpink);
	color:white;;
	padding:10px 25px; /**PADDING NG BOXES**/
	border-radius:10px; /**HOW ROUND CORNER NG NAV BUTTONS;**/
	position:relative;
	
}

a.button:hover{
	background-color: white;
	color: var(--darkpink);
	top:-5px;   /**SO THIS MAKES THE HOVER ANIMATION, negative is up? positive is down for some reason;**/
	
}


/*the white description section  */

main section:nth-of-type(3) {
  padding: 30px;
}



/**masterclass**/

section:nth-of-type(4) {
  background-color: var(--lighttan);
  padding-bottom: 100px;
}


section.bgcolor h2.section-title {
  padding-top: 100px;
  margin-bottom: -10px;
}


.card-container {
  display: grid;                       /* use CSS Grid */
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 10px;                            /* spacing between cards */
  padding: 20px;                        /* optional padding around the container */
}


.lesson-card {
	background-color: white;   /* optional background for each card */
  	border-radius: 10px;              /* rounded corners */
 	overflow: hidden;                 /* ensures images don’t overflow corners */
  	box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* subtle shadow */
  	padding: 15px;                    /* internal spacing */
	
}


.lesson-card img{
	width: 100%;        /* image fits the card width */
  	height: auto;
  	border-radius: 10px /* rounded top corners */

}


.lesson-card h3{
	text-align: center;
}


/*button ng kada card*/
.skill-level{ 
	display: inline-flex;           /* make it like a button */
  	flex-direction: column;         /* stack content vertically */
  	align-items: center;            /* center text horizontally */
  	justify-content: center;        /* center text vertically */
  	padding: 10px 15px;             /* spacing inside button */
  	background-color: var(--darkpink);  /* button color */
  	color: white;                    /* text color */
  	border-radius: 10px;             /* rounded button shape */
  	cursor: default;                 /* pointer if you want hover effect */
  	line-height: 1.2;                /* tighter spacing between lines */
  	min-width: 70px;                 /* optional: ensure consistent width */
  	text-align: center;
  	margin-top: 10px;                /* spacing from above content */
  	position: relative;          /* 🔑 REQUIRED */
  	top: 0;                      /* starting position */
  	transition: top 0.2s ease;   /* smooth animation */
}


.skill-level:hover{
	top:-5px;   /**SO THIS MAKES THE HOVER ANIMATION, negative is up? positive is down for some reason;**/
}

.skill {
	font-size: 30px;
	font-weight: 1000;
	color: white;
	
}


.lesson-card small {
	color: black;

}


/*page-title *****/
section.page-title {
	
}

section.page-title h1{

}



/* Responsive media queries */
@media screen and (max-width: 1200px) { ... }
@media screen and (max-width: 768px) { ... }



/** ——————————————————————————————LESSONS PAGE ——————————————————————————————————————————**/




.banner-lessons { 
  	background-image: url("../images/bg_tile.png");
  	background-size: cover;          /* fill the strip */
  	background-position: center;     /* center the image */
  	background-repeat: no-repeat;

  	min-height: 20pxpx;               /* height of the strip */
  	padding: 10px 30px;

  	display: flex;
  	flex-direction: column;
  	justify-content: center;         /* vertical center */
  	align-items: flex-start;             

  	color: black;
}


h2.masterclasslessons-title {
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-weight: 500; /* SINCE VARIABLE FONT, U CAN CUSTOMIZE THICKNESS */
		letter-spacing: 25px; /* PARA SA WIDE KERNING*/
		text-transform: uppercase; /* PARA MAGING UPPERCASE*/
		margin-bottom: -5px; /* reduce space below */
		padding-top: 70px; /*adding space sa taas */

}


.mainmasterclasses-container {
	width: 1100px;
  height: 1050px;
  display:flex;

	margin: 0 auto;   /* GANTO PALA ICENTER MAIN CONTAINER NA TO ARGGHHH, took so long to figure out*/
	padding-bottom: 100px;

}


.masterclasses-cards {
	display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
}


.mlesson-card {
	width: 200px;
	height: 300px;
	margin: 4px;
	background-color: var(--lighttan);   /* optional background for each card */
  border-radius: 10px;              /* rounded corners */
  padding: 10px;                    /* internal spacing */
  display: flex;
  display:flex;
  flex-direction: column;
  align-items: center;

}

.mlesson-card h3 {
	margin: 3px;
	margin-top: 14px;

}

.mlesson-card img {
	width: 100%;        /* image fits the card width */
  height: auto;
  border-radius: 10px /* rounded top corners */
}


/*button ng kada masterclass lesson card*/
.enroll-button{ 
  padding: 10px 15px;             /* spacing inside button */
  background-color: var(--darkpink);  /* button color */
  color: white;                    /* text color */
  border-radius: 10px;             /* rounded button shape */
  cursor: default;                 /* pointer if you want hover effect */
  line-height: 1.2;                /* tighter spacing between lines */
  text-align: center;
	width: 100px;


  margin-top: 2px;                /* spacing from above content */
  position: relative;         
  top: 0;                      
  transition: top 0.2s ease;   /* sum transition */
}


.enroll-button:hover{
	background-color: var(--lighttan);
	color: var(--darkpink);
	top:5px;   /**SO THIS MAKES THE HOVER ANIMATION, negative is up? positive is down for some reason;**/
	outline: 2px solid var(--darkpink); /* HOVER ANIMATION: OUTLINE EFFECT, PARAMETERS: Width, Style, Color */

}




.video-lessons {
	background-color: var(--lighttan);
	padding-top: 50px;
	padding-bottom: 80px;
}


h2.videolessons-title {
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-weight: 500; /* SINCE VARIABLE FONT, U CAN CUSTOMIZE THICKNESS */
		letter-spacing: 25px; /* PARA SA WIDE KERNING*/
		text-transform: uppercase; /* PARA MAGING UPPERCASE*/
		margin-bottom: -10px; /* reduce space below */
		padding-top: 70px; /*adding space sa taas */

}


.videolessons-container {
	width: 1100px;
  height: 200px;
  display:flex;

	margin: 0 auto;   /* GANTO PALA ICENTER MAIN CONTAINER NA TO ARGGHHH, took so long to figure out*/
	padding-bottom: 100px;

}


.video-card {
	display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}


.video-card h3 {
	margin-top: 20px;

}





/** ——————————————————————————————ABOUT PAGE ——————————————————————————————————————————**/


/*BANNER*/
.banner-about { 
  	background-image: url("../images/bg_tile.png");
  	background-size: cover;          /* fill the strip */
  	background-position: center;     /* center the image */
  	background-repeat: no-repeat;

  	min-height: 30pxpx;               /* height of the strip */
  	padding: 10px 30px;

  	display: flex;
  	flex-direction: column;
  	justify-content: center;         /* vertical center */
  	align-items: flex-start;             

  	color: black;
}

.mainabout-container {
	padding-top: 40px;
	padding-bottom: 80px;
}

.mainabout-container .section-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 450;
    font-size: 28px;
    text-align: center;
}


/*TWO PICTURES*/
.masters-container {
  	display: flex;              /* put items in a row */
  	justify-content: center;    /* center horizontally */
  	gap: 40px;                  /* space between masters */
  	margin-top: 40px;
}


.masters-content{
	text-align: center;         /* center image + text */
	margin-top: -30px;
}


.masters-content h3 {
	margin: -1px;

}


.masters-content img{
	width: 200px;               /* fixed size for perfect circle */
  	height: 200px;
  	object-fit: cover;          /* crop image properly */
  	border-radius: 50%;         /* makes it a circle */
  	margin-bottom: 15px;
  	padding-top: 15px;
	
}


.about-content {
	background-color: var(--lighttan);
	
}

.schoolmasters-container {
  display: flex;              /* main two-column layout */
  gap: 180px;                  /* space between left and right column */
  justify-content: center;    /* center the whole section horizontally */
  align-items: center;    /* align top edges */
  margin-top: 40px;
}


/* Left column: Headmaster */
.headmaster {
  flex: 1.5;                  
  text-align: center;
}

.headmaster img {
  width: 250px;               /* bigger image */
  height: 300px;
  border-radius: 10%;         
  object-fit: cover;
  margin-bottom: 0px;
}

/* Right column: Lesson masters */
.lessonmasters {
  flex: 2;                     
  display: grid;               
  grid-template-columns: repeat(2, 1fr); 
  gap: 50px;                   
}

.lessonmaster-content {
  text-align: center;
}


.lessonmaster-content h3 {
	margin: -3px;
}

.lessonmaster-content img {
  width: 123px;               
  height: 123px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}




/* footer *****/
footer{
	background-color:var(--tan);
	padding:10px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}

footer img{
	width:200px;
	margin-right:10px;
}

footer p{
	font-size:12px;
	margin-left:auto;
}