<style>
		.service-highlight h2 {
    		font-size: 1.8rem;
		}

		@media (min-width: 1px) {
    		.service-highlight h2 {
        		font-size: 2.4rem;
    		}
			.hero {
				overflow: hidden;
        	}
			.hero h1 {
				font-family: 'Great Vibes', cursive;
				font-size: 3em;
			}
			.hero.faq h1 {
				font-family: 'Great Vibes', cursive;
				font-size: 2em;
			}
        	.hero-content::before {
            	font-family: 'Great Vibes', cursive;
            	font-size: 10em;
				content: attr(data-bgtext);
				position: absolute;
				top: 30%;
				left: 50%;
				transform: translate(-50%, -50%) scale(4);
				opacity: 0.08;
				white-space: nowrap;
				pointer-events: none;
				z-index: -1;
			}
		}

		@media (min-width: 350px) {
    		.service-highlight h2 {
        		font-size: 2.4rem;
    		}
			.hero h1 {
				font-family: 'Great Vibes', cursive;
				font-size: 6em;
			}
			.hero.faq h1 {
				font-family: 'Great Vibes', cursive;
				font-size: 4em;
			}
        	.hero-content::before {
            	font-family: 'Great Vibes', cursive;
            	font-size: 15em;
				content: attr(data-bgtext);
				position: absolute;
				top: 30%;
				left: 50%;
				transform: translate(-50%, -50%) scale(4);
				opacity: 0.08;
				white-space: nowrap;
				pointer-events: none;
				z-index: -1;
			}
		}

		@media (min-width: 1200px) {
    		.service-highlight h2 {
        		font-size: 5rem;
    		}
			.hero h1 {
				font-family: 'Great Vibes', cursive;
				font-size: 10em;
			}
			.hero.faq h1 {
				font-family: 'Great Vibes', cursive;
				font-size: 7em;
			}
			.hero-content::before {
            	font-family: 'Great Vibes', cursive;
            	font-size: 20em;
				content: attr(data-bgtext);
				position: absolute;
				top: 30%;
				left: 50%;
				transform: translate(-50%, -50%) scale(4);
				opacity: 0.08;
				white-space: nowrap;
				pointer-events: none;
				z-index: -1;
			}
		}
		.bg-primary {
			background: rgb(190 197 164 / 1.0) !important;
        	background-rgb: 190 197 164;
		}
		
		.bg-secondary {
    		background: rgb(226 198 180 / 1.0) !important;
        	background-rgb: 226 198 180; 
		}
		
		body {
			background-color: ivory;
		}
		.navbar {
			background: rgb(247 229 218 / 1.0);
	    	background-rgb: 247 229 218;
		}
		.navbar .bi {
			font-size: 1.3rem;
		}

		.navbar .nav-link:hover {
			opacity: 0.7;
		}

		.hero {
        	position: relative;
        	background-size: cover;
	    	background-position: center;
		}

		.hero.home {
	    	min-height: 40vh;
	    	background-image: url("../img/hero-home-bg2.jpeg");
		}
		.hero.live-sketching {
        	min-height: 20vh;
		}
		.hero.gallery {
        	min-height: 20vh;
	    	//background-image: url("../img/hero-home-bg2.jpeg");
		}

		.hero-overlay {
		    position: absolute;
		    inset: 0;
		    background: rgba(0,0,0,0.45);
		}

		.hero-content {
		    position: relative;
		    z-index: 2;
		    color: white;
		}

		footer {
		    background: #222;
		    color: white;
		}

		.social-icons .bi {
			font-size: 1.3rem;
			transition: color 0.3s ease;
		}

		.social-icons a {
			display: inline-block;
			transition: transform 0.2s ease;
		}

		.social-icons a:hover {
			transform: scale(1.15);
		}

		/* Facebook */
		.social-icons a:hover .bi-facebook {
			color: #1877F2;
		}

		/* Instagram */
		.social-icons a:hover .bi-instagram {
			color: #E4405F;
		}

		/* TikTok */
		.social-icons a:hover .bi-tiktok {
			color: #EE1D52;
		}
		.circle-img {
			//width: 200px;
			//height: 200px;
			border-radius: 50%; /* makes it a circle */
			object-fit: cover;   /* ensures the image fills the container */
        }

		.service-highlight {
			//background: rgb(230 246 225 / 1.0);
	    	//background-rgb: 230 246 225;
        	//padding: 20px;
        	//margin-left: 20px;
        	//margin-right: 20px;
        	text-align: center;
		}
		.service-highlight h2 {
        	font-family: 'Great Vibes', cursive;
        }

		.service-highlight-image {
			//min-height:50px !important;
        	//min-width:50px !important;
        	//max-height:450px !important;
        	//max-width:450px !important;
		}
		.bio {
        	background: rgb(247 229 218 / 1.0);
        }
		/* Make the image pop out slightly above the container */
		.pop-out-img {
    		position: relative;
    		top: -30px;          /* moves image above the top of div */
    		box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* subtle shadow */
		}

		/* Optional: responsive adjustments */
		@media (max-width: 767px) {
    		.float-start {
        		float: none !important; /* remove float on small screens */
        		display: block;
        		margin: 0 auto 1rem auto; /* center image on mobile */
    		}
		}
		.drawing-container {
			position: relative;
			margin-bottom: 2rem;
			border: 1px solid #ccc;
			border-radius: 8px;
			overflow: visible;
		}
		.drawing-container img.main-drawing {
			width: 100%;
			display: block;
		}
		.thumbnail {
			position: absolute;
			bottom: 10px;
			right: 6px;
			width: 50%;
			//height: 100px;
			border: 0.3vw solid white;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
			transform: rotate(-10deg);
			overflow: hidden;
			//border-radius: 8px;
			background-color: #fff;
		}
		.thumbnail img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
		.price::before {
        	content: '\00A3'; /* Unicode for £ */
        }
</style>