html {
	scroll-behavior: smooth;
}

body {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-style: normal;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	line-height: 1.6;
}

nav {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-style: normal;
	
	color: white;
	background: #5BB4BD;
	/* background-image: linear-gradient(90deg,#8246a6,-3%,#6703a1 150%); */
	/* background-color: #752BBF; */
	/* box-shadow: 0 4px 6px rgba(117, 43, 191, 1); */
	
	padding: 10px 0;
	position: sticky;
	top: 0;
	z-index: 1000;
}

#navbar {
	height: 125px;
	transition: height 0.5s ease;
}

#navbar.shrink {
	height: 50px;
}

#navbar.shrink h1 {
	font-size: 1.2em;
}

#navbar.shrink ul {
	font-size: 1em;
}


/* // <weight>: Use a value from 100 to 1000
// <uniquifier>: Use a unique and descriptive class name

.dm-sans-<uniquifier> {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

nav h1 {
	/* font-family: "Homemade Apple", cursive;
    font-weight: 500;
    font-style: normal;
    font-size: 3em; */
    
    font-family: "DM Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-style: normal;
  	font-size: 4em;
    
    text-align: center;
    padding: 0;
    margin: 0;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

nav li {
	display: inline;
	margin: 0 15px;
}

nav a {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

nav a:hover {
	text-decoration: underline;
	
}

section {
	max-width: 800px;
	margin: auto;
	padding: 20px;
	background: white;
	margin-bottom: 10px;
}

section {
	scroll-margin-top: 80px;
}

header {
	background: #6666ff;
	color: white;
	text-align: center;
}

footer {
	color: white;
	margin: auto;
  	padding: 20px;
  	width: 100%;
  	background: #5BB4BD;
  	/* background-color: #752BBF; */
  	/* background-image: linear-gradient(90deg,#8246a6,-3%,#6703a1 150%); */
  	text-align: center;
  	height: 400px;
  	/* box-shadow: 4px 0 6px rgba(117, 43, 191, 1); */
}

img {
	border-radius: 25px;
}

#contact a {
	text-decoration: none;
	color: black;
}

#contact a:hover {
	
	color: #6703a1;
	font-weight: 800;
}


.container {
	display: flex;
	align-items: center;     /* Vertically center image and text */
	justify-content: space-between;
	gap: 25px;                /* Space between text and image */
	max-width: 1000px;
	margin: 0 auto;           /* Center the whole container */
}

.text {
	flex: 1;                  /* Let the text take remaining space */
}

.image {
	flex-shrink: 0;           /* Prevent image from shrinking */
	display: flex;
	align-items: center;
	justify-content: center;  /* Center image inside its div */
	width: 173px;             /* Set desired image container width */
}

.image img {
	max-width: 100%;
  	height: auto;
}

#services .image {
	width: 366.5px;
}

#SummerGroups .image {
	max-width: 100%;
}

#contact .image {
	width: 363px;
}

#contact p {
	display: inline-flex;
	align-items: center;
}

#contact svg {
	margin-right: 20px;
}

#home .image {
	justify-content: center;
    align-items: center;
}


.center-image {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */
 /*  height: 100vh;    */        /* Optional: full viewport height */
}

/* 🌐 Media query for screens smaller than 768px */
@media (max-width: 768px) {
#navbar {
	height: 125px;
	transition: height 0.5s ease;
}

#navbar.shrink {
	height: 75px;
}
	
	nav h1 {
		font-size: 2.8em;
	}
	
	section {
		font-size: 1.2em;
	}
	
	section {
		scroll-margin-top: 120px;
	}
	
	.container {
		flex-direction: column;
		align-items: stretch;
	
	}
	
	.image {
		margin-top: 20px; /* Space between text and image on mobile */
	}
	
	#TeenDBTSkillsCamp {
		width: 400px;
		height: 282.8px;
	}
	
	#KidsDBTSandtrayGroup {
		width: 400px;
		height: 282.8px;
	}
	
	.image #jordanPond {
		order: 1;
	}
	

	
	.text {
		order: 2;
	}

}