html, body {
  margin: 0;
}
body {
	font-family: Montserrat, sans-serif;
}
* {
  box-sizing: border-box;
}


html {
	  scroll-padding-top: 100px; /* match your header height */
}

main {
  padding-top: 99px; /* match your header height */
}

.tsHeader img {
	width: 100px;

}
.bar {
	display: none;
}

.mobileHeader {
	display: none;
}

.tsHeader {
	display: flex;
	position: fixed;
	top: 0;            /* top of the viewport */
 	left: 0;           /* align left */
  	width: 100%;       /* full width */
  	z-index: 1000;     /* ensures it’s above other content */
  	background-color: white; /* optional, avoid transparency */
	padding: 20px;
	box-sizing: border-box; /* ensures padding doesn’t break width */
	align-items: center;
	box-shadow: 1px 1px 1px black;
}

.navbar {
	margin-left: auto;
	display: flex;
	gap: 20px;
	align-items: center;
}
.toggle {
	display: none;
}
.headerLinks {
	font-weight: 500;
	text-decoration: none;
	font-family: Montserrat;
	color: black;
	font-size: clamp(0.85rem, 1.10vw, 1.35rem);
}

.headerLinks a {
  transition: font-weight 0.2s ease;
}
.headerLinks:hover {
	transform: scale(1.05);
}



.homepageHeroOne {
	display: flex;
	font-family: Montserrat;
	font-weight: 700;
	width: 100%;
	height: 300px;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #1865AC, #4ABEFF);
	text-shadow: 1px 1px 1px black;

}

.homepageHeroOneLeft {
	flex-direction: column;
	width: 50%;
	padding: 20px;
	text-align: right;
	color: white;
}

.homepageHeroOneLeft p {
	font-weight: 200;
}

.homepageHeroOneRight {
	width: 50%;
	display: flex;
	justify-content: flex-end;
	height: 100%;
}

.homepageHeroOneRight img {
	height: 100%;
	object-fit: contain; 
}

.homepageHeroTwo {
	display: flex;
	font-family: Montserrat;
	font-weight: 700;
	font-size: 20px;
	width: 100%;
	height: 300px;
	justify-content: center;
	align-items: center;
    background: linear-gradient(135deg, #A8AB37, #7F842A);
	border-bottom: 5px solid #1865AC;

}

.homepageHeroTwoLeft img {
	height: 100%;
	object-fit: contain; 
	padding-left: 20px;

		
}

.homepageHeroTwoLeft {
	width: 70%;
	display: flex;
	justify-content: flex-end;
	height: 100%;
}

.homepageHeroTwoRight {
	color: white;
	text-shadow: 1px 1px 1px black;
}

	/* Buttons HTML Below */
.headerButton {
	display: flex;
	background: #1865AC;
	border-radius: 30px;
	box-shadow: 1px 1px 1px 1px black;
	padding: 10px 20px;            /* uniform padding */	
	color: white;
	font-family: Montserrat;
	text-decoration: none;
	font-weight: 400;
	text-shadow: 1px 1px 1px black;
}

.headerButton:hover {
	transform: translateY(3px);
	box-shadow: none;
}

.headerButton:active {
	transform: translateY(3px);
	box-shadow: inset 1px 1px 1px black;
}

.homepageHeroButton {
	font-weight: 500;
    background: #A8AB37;
	padding: 10px;
	border-radius: 30px;
	box-shadow: 1px 1px 1px black;
	display: inline-block;
	text-decoration: none;
	color: white;
}

.homepageHeroButton:hover {
	transform: translateY(3px);
	box-shadow: none;
}

.homepageHeroButton:active {
	transform: translateY(3px);
	box-shadow: inset 1px 1px 1px black;
	
}

.homepageHeroButton2 {
	font-weight: 500;
	background: #1865AC;
	padding: 10px;
	border-radius: 30px;
	box-shadow: 1px 1px 1px black;
	display: inline-block;
	color: white;
	font-family: Montserrat;
	text-shadow: 1px 1px 1px black;
	text-decoration: none;
}

.homepageHeroButton2:hover {
	transform: translateY(3px);
	box-shadow: none;
}

.homepageHeroButton2:active {
	transform: translateY(3px);
	box-shadow: inset 1px 1px 1px black;
	
}

/* End of Button HTML */


.charityBanner {
	display: flex;
	justify-content: center;
}
.charityBanner img {
	width: 70%;
}


.aboutUs {
	display: flex;
	justify-content: center;
	align-items: center;
}

.aboutUsLeft img {
	height: 100%;
	border: 5px solid #1865AC;
	border-radius: 30px;
	box-shadow: 1px 1px 1px black;
	margin-left: auto;
}

.aboutUsLeft {
	display: flex;
	width: 50%;
	height: 500px;
	justify-content: flex-end;
	padding: 20px;
	padding: 50px;

}

.aboutUsRight {
	width: 50%;
	font-family: Montserrat;
	font-weight: 400;
}

.aboutUsRight p,
.aboutUsRight h2 {
	padding-right: 50px;
}

.reviewsBar {
	background: #1865AC;
	color: white;
	font-family: Montserrat;
	padding: 2px;
	padding-left: 20px;
	margin-left: 100px;
	border-radius: 50px 0 0 50px;
	text-align: center;
	font-size: 20px;
	margin: 20px 0 0 0;
	box-shadow: 1px 1px 1px black;
	margin-right: 0;
}

.hasDropdown:hover .dropdown {
  display: block;
}

.nav {
    position: relative;
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.hasDropdown {
  position: relative;
	display: block;
}

.dropdown {
	display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: white;
  padding: 15px;
	margin: 5px;
  list-style: none;
  box-shadow: 1px 1px 5px 1px black;
	border-radius: 30px;
	row-gap: 10px;
}

.dropdown li a {
  display: block;
  padding: 10px 15px;
}

.recognisingStudents {
	display: flex;
	justify-content: center;
	padding: 20px;
	font-family: Montserrat;
	align-items: center;
}

.recognisingStudents img {
	height: 500px;
	border-radius: 30px;
	box-shadow: 1px 1px 1px black;
	border: 5px solid #1865AC;
}

.recognisingLeft {
	padding: 20px;
}

.recognisingLeft a {
	text-decoration: none;
	font-weight: 500;
	color: white;
	background: #1865AC;
	padding: 10px;
	border-radius: 30px;
	box-shadow: 1px 1px 1px black;
}

.recognisingLeft a:hover {
	transform: translateY(3px);
	box-shadow: none;
}

.tasterForm {
	display: flex;
	font-family: Montserrat;
	font-weight: 500;
	text-align: center;
	background: #1865AC;
	color: white;
	padding: 20px;
	margin: 20px;
	border-radius: 30px;
	box-shadow: 1px 1px 1px 1px black;
	width: fit-content;
	align-items: center;

}

iframe {
	width: 500px;
	border-radius: 30px;
	box-shadow: 1px 1px 1px 1px black;
}

.tasterFormLeft {
	width: 50%;
}

.tasterFormRight {
	width: 50%;
}

.tasterFormRight img {
	width: 500px;
	align-items: flex-end;
}

.tsFooter {
	display: flex;
	background: #252525;
	color: white;
	font-family: Montserrat;
	padding: 50px;
	align-items: center;

}

.footerLeft {
	width: 50%;
	border-right: 1px solid white;
	padding: 20px;
}

.footerLeft img {
	width: 250px;
}

.footerRight {
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.footerLinksLeft {
	width: 50%;
}

.footerLinksRight {
	width: 50%;
}
.footerColumns {
  padding: 20px;
  display: flex;
  gap: 40px;
}

.footerColumns ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;

}
.footerRight a {
  color: white;
  text-decoration: none;
  font-weight: 500
}
.burger {
	display: none;
}
.headerLinks {
  display: block;
  padding: 5px 0;
}
.BlogPosts {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.BlogCard {
	font-size: clamp(0.5rem, 1.0vw, 1.5rem);
	margin: clamp(10px, 15px, 20px);
	display: flex;
	align-content: center;
	text-align: center;
	flex-direction: column;
	padding: clamp(10px, 15px, 20px);
	background: #1865AC;
	color: white;
	font-family: Montserrat;
	border-radius: 30px;
}
.BlogCard img {
	border-radius: 30px;
	width: 100%;
	height: 250px;
	object-fit: cover;
}
.BlogButton {
	background: #B0AD19;
	padding: 5px;
	border-radius: 999px;
	color: white;
	font-family: Montserrat;
	text-decoration: none;
}
.BlogContent {
	padding: clamp(10px, 15px, 20px);
	text-align: left;
}
.BlogContent img {
	width: 50%;
	height: auto;
	border-radius: 30px;
	box-shadow: 1px 1px 1px black;
}
.banner {
	width: 100%;
}
						@media (max-width: 1100px) {
  						/* tablet + small laptop fixes */

							.homepageHeroOne {
								width: 100%;
							}
							.bar {
								display: grid;
								background: black;
								padding-bottom: 5px;
								height: 5px;
							}
							.homepageHeroOneLeft {
								display: flex;
								text-align: center;
								width: 50%;
								overflow: none;
								height: 100%;
								margin-top: 20px;
								align-items: center;
								justify-content: center;
							}
							.homepageHeroOneLeft p{
								font-size: 16px;
							}
							.homepageHeroOneRight {
								width: 50%;
							}
							.homepageHeroOneRight img {
								width: 100%;
								overflow: none;
								object-fit: cover;
							}
							.homepageHeroOneLeft h1 {
								font-size: 20px;
							}
							.homepageHeroTwoRight {
								width: 50%;
							}
							.homepageHeroTwoLeft {
								width: 50%;
							}
							.aboutUsLeft img {
								overflow: none;
							}
							.recognisingStudents {
								width: 100%;
							}
							.recognisingLeft {
								width: 40%;
							}
							.recognisingRight {
								width: 60%;
							}
							.recognisingRight img {
								width: 90%;
								overflow: none;
								object-fit: cover;
							}
							.tasterForm {
								display: flex;
								flex-direction: column-reverse;
								width: 100%;
								max-width: 90%;
								box-sizing: border-box;
								margin: 0 auto;
								padding: 20px; 
								align-items: center;
								margin-bottom: 50px;
								justify-content: center;
								
							}
							.tasterFormLeft,
							.tasterFormRight {
							  width: 100%;
							  display: flex;
							  flex-direction: column;
							  align-items: center;
							  justify-content: center;
							}
							.tsHeader {
							display: grid;
							text-align: center;
							transition: 0.5s;
							justify-content: center;
							align-items: center;
							padding: 0;
							margin: 0;
							}
							.navbar {
								justify-content: center;
								text-align: center;
								padding: 0;
								margin: 0;
							}
							.nav {
								gap: 0px;
								display: none;
							}
							.dropdown {
								  display: grid;
								  position: relative;
								  top: 0;
								  left: 0;
								  z-index: 9999;
								  background: none;
								  padding: 0;
								  margin: 0;
								  list-style: none;
								  box-shadow: none;
								  border-radius: 0;
								  row-gap: 0;
							}
							.hasDropdown {
								padding: 0px;
								margin: 0;
							}
							.headerLinks {
								font-size: 15px;
								text-align: center;
								justify-content: center;
								gap: 0;
								padding: 0;
								margin: 0;
							}
							.nav {
								display: grid;
								z-index: -1;
								padding: 0;
								margin: 0;
							}
							.tsHeader img {
								justify-content: center;
								align-items: center;
								margin: 0 auto; 
								width: 25%;
								
							}

							
										/*MOBILE MENU*/
											.tsHeader {
												box-shadow: none;
												padding: 10px;
											}
										    .nav {
											display: none;
											position: fixed;
											transform: translateY(-150%);
											transition: transform 0.5s ease;
											background: white;
											padding: 10px;
											border-radius: 30px;
											box-shadow: 1px 1px 1px 1px black;
										}
										.burger {
											display: flex;
											flex-direction: column;
											gap: 5px;
											width: fit-content;
											cursor: pointer;
										}
										.burger span {
											width: 30px;
											height: 3px;
											background: black;
											border-radius: 999px;
										}
										.toggle {
											display: none;
										}
										.toggle:checked ~ .navbar .nav {
											display: grid;
											transform: translateY(300px);
											font-size: clamp(1.25rem, 1.5vw, 2rem);
													
										}
										/*MOBILE MENU*/

		/*MOBILE OPTIMIZATION*/

		@media (max-width: 600px) {
				* {
				  box-sizing: border-box;
				}
			html, body {
		  margin: 0;
		  padding: 0;
		  overflow-x: hidden;
		}
			/*MOBILE MENU*/
			.nav {
				display: none;
				transform: translateY(-150%);
				transition: transform 0.5s ease;
				position: fixed;
				gap: 0px;
			}
			.burger {
				display: flex;
				flex-direction: column;
				gap: 5px;
				width: fit-content;
				cursor: pointer;
			}
			.burger span {
				width: 30px;
				height: 3px;
				background: black;
				border-radius: 999px;
			}
			.toggle {
				display: none;
			}
			.toggle:checked ~ .navbar .nav {
				display: grid;
				transform: translateY(335px);
				background: white;
				padding: 50px;
				border-radius: 30px;
				box-shadow: 1px 1px 1px 1px black;
			}
			/*MOBILE MENU*/

			.headerLogo {
				padding-top: 20px;
				width: 40%;
			}
			.homepageHeroOne {
				width: 100%;
				display: flex;
				justify-content: center;
			}
			.homepageHeroOneLeft {
				text-align: center;
				width: 100%;
				height: 100%;
			}
		  .homepageHeroOneLeft,
		  .homepageHeroOneRight {
			width: 100%;
			margin: 0;
			box-sizing: border-box;
			  text-align: center;
		  }

			}

		  .homepageHeroTwo {
			flex-direction: column-reverse;
			width: 100%;
			padding: 0;
			margin: 0;
			align-items: center;
			box-sizing: border-box;
			  height: auto;
			  
		  }

		  .homepageHeroTwoLeft,
		  .homepageHeroTwoRight {
			width: 100%;
			margin: 0;
			box-sizing: border-box;
			  text-align: center;
		  }

		  .homepageHeroTwo img {
			width: 100%;
			height: auto;
			display: block;
			margin: 0;
		  }

			.charityBanner img {
				width: 100%;
				height: 100%;
			}

			.aboutUs {
				width: 100%;
				display: flex;
				flex-direction: column-reverse;
				text-align: center;
				align-items: center;

			}
			.aboutUsLeft {
					width: 100%;
					box-sizing: border-box;
			}
			.aboutUsRight {
				width: 100%;
			}
			.aboutUs h2 {
				width: 100%;
			}
			.aboutUs p {
				width: 100%;
			}
				.aboutUs img {
				  width: 100%;
				  object-fit: cover;
				  display: block;
			}
			
			.recognisingStudents {
				padding: 0;
				margin-top: -50px;
				display: flex;
				flex-direction: column;
				width: 100%;
				text-align: center;
			}
			.recognisingStudents h1,
			.recognisingStudents p {
			  margin: 0;
			  padding: 0 auto;
			}
			
			.recognisingStudents img {
				  width: 100%;
				  display: block;
			}
			.recognisingLeft {
 			 width: 100%;
				object-fit: cover;
				padding: 0 auto;
			}
			
			  .tasterForm {
				display: flex;
				flex-direction: column-reverse;
				width: 100%;
				max-width: 500px; 
				margin: 20px auto;
				padding: 30px;
				box-sizing: border-box;
				align-items: stretch; /* 👈 important */
			  }

			  .tasterFormLeft,
			  .tasterFormRight {
				width: 100%;
			  }

			  .tasterForm img,
			  .tasterForm iframe {
				width: 100%;        /* 👈 force full width */
				max-width: 100%;
				display: block;
				margin: 0;
			  }
			.tsFooter {
				flex-direction: column;
				text-align: center;
				width: 100%;
				border: none;
				padding: 20px;
  				box-sizing: border-box;
  				align-items: center;
			}
			.footerLeft {
				width: 100%;
				margin: 20px auto;
				border: none;
			}
			.footerRight {
				width: 100%;
				margin: 20px auto;
			}
}