/* --- Generic More Button --- */
.btn-more {
	display: inline-block;
	padding: 10px 28px;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(90deg, #e63c8e 0%, #f29dc6 100%);
	border: none;
	box-shadow: 0 2px 12px 0 rgba(230, 60, 142, 0.12);
	transition: background 0.2s, color 0.2s, filter 0.2s;
}

.btn-more:hover, .btn-more:focus {
	background: linear-gradient(90deg, #f29dc6 0%, #e63c8e 100%);
	color: #fff;
	filter: brightness(1.08);
	text-decoration: none;
}
/* Ensure magic-section creates a stacking context for waves */
.magic-section {
	position: relative;
	z-index: 3;
	margin-top: -60px;
}
@media (min-width: 769px) and (max-width: 991.98px) {
	.magic-section {
		margin-top: -90px;
	}
}
/* Branding Section Styles */
.branding-section {
	background: none;
	position: relative;
	z-index: 1;
}
.branding-section {
	background: url('img/Gauteng/header_img.png') center center / cover no-repeat fixed;
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 100%;
}
.branding-section .form-control.branding-glow,
.branding-section .form-select.branding-glow,
.branding-section textarea.branding-glow {
	box-shadow: 0 0 0 3px #b6e0fc, 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid #e0e0e0;
	background: #fafdff;
	transition: box-shadow 0.2s;
}
.branding-section .form-control.branding-glow:focus,
.branding-section .form-select.branding-glow:focus,
.branding-section textarea.branding-glow:focus {
	box-shadow: 0 0 0 4px #7fd0ff, 0 2px 8px rgba(0,0,0,0.08);
	border-color: #7fd0ff;
}
.branding-btn {
	background: linear-gradient(90deg, #4e9af1 0%, #7f53ac 100%);
	color: #fff;
	border: none;
	border-radius: 2em;
	font-weight: 600;
	box-shadow: 0 2px 12px 0 rgba(79, 114, 205, 0.12);
	transition: background 0.2s, box-shadow 0.2s;
}
.branding-btn:hover, .branding-btn:focus {
	background: linear-gradient(90deg, #7f53ac 0%, #4e9af1 100%);
	color: #fff;
	box-shadow: 0 4px 16px 0 rgba(79, 114, 205, 0.18);
}
/* GLOBAL */
body {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
color: #000;
overflow-x: hidden;
}

html {
overflow-x: hidden;
}
.section-title {
font-weight: 700;
color: #000;
}
/* ...existing code... */

.custom-nav .container {
background: rgba(22, 51, 63, 0.50);
backdrop-filter: blur(6px);
padding: 6px 20px;
border-radius: 50px;
margin: 20px auto;
}
/* Gradient pill button for Contact Us */
.nav-btn {
background: linear-gradient(90deg, #FDF347, #29ABE2, #E63C8E);
padding: 6px 30px;
border-radius: 50px;
margin-left: 30px;
font-weight: 600;
border: 1px solid #ffffff;
transition: 0.25s ease;
text-align: center;
filter: brightness(0.9);
}
/* Hover effect: brighten slightly */
.nav-btn:hover {
filter: brightness(1);
color: #ffffff !important;
}
/* Menu links */
.custom-nav .nav-link {
color: #ffffff;
font-weight: 500;
margin-left: 22px;
letter-spacing: 0.5px;
transition: all 0.25s ease;
}
/* Hover effect */
.custom-nav .nav-link:hover {
color: #E63C8E;
}
.custom-nav .dropdown-menu {
background: rgba(22, 51, 63, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
padding: 10px 0;
margin-top: 12px;
transform: translateX(25px) translateY(-5px);
}
.custom-nav .dropdown-item {
color: #ffffff;
font-weight: 500;
padding: 8px 18px;
}
.custom-nav .dropdown-item:hover,
.custom-nav .dropdown-item:focus {
color: #E63C8E;
background: transparent;
}
.custom-nav .dropdown-toggle::after {
vertical-align: middle;
}
@media (max-width: 991.98px) {
.custom-nav .dropdown-menu {
margin-bottom: 12px;
}
}
@media (min-width: 992px) {
.custom-nav .dropdown {
position: relative;
padding-bottom: 12px;
margin-bottom: -12px;
}
.custom-nav .dropdown:hover > .dropdown-menu,
.custom-nav .dropdown:focus-within > .dropdown-menu {
display: block;
}
.custom-nav .dropdown:hover > .nav-link,
.custom-nav .dropdown:focus-within > .nav-link {
color: #E63C8E;
}
}
/* Logo styling */
.navbar-brand {
font-size: 1.25rem;
letter-spacing: 1px;
}

/* HERO CONTENT */
.hero-content {
position: relative;
z-index: 2;
padding-top: 20%;
}

/* Ensure all hero blocks bleed edge-to-edge across the viewport */
#heroCarousel,
.hero-slide,
.hero.static-hero,
.hero.static-hero > div {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
#heroCarousel {
position: relative;
}

#heroCarousel .carousel-inner {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
overflow: hidden;
}

.hero.static-hero,
.hero.static-hero > div {
overflow: hidden;
background-size: calc(100% + 50px) auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.hero.static-hero {
margin-top: -20px;
}

/* HERO CAROUSEL */
#heroCarousel h1{
font-size: clamp(1.5rem, 2.9vw, 2.9rem);
}
#heroCarousel h2{
font-size: clamp(1.1rem, 1.4vw, 1.4rem);
font-weight: 300 !important;
color: #FDF347;
}
.hero-slide {
margin-top: -20px;
height: 90vh;
background-size: calc(100% + 50px) auto;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
@media (max-width: 991.98px) {
.hero-slide {
height: 55vh;
background-size: cover;
}
.hero.static-hero > div {
height: 55vh !important;
background-size: cover !important;
}
.hero-content {
padding-top: 30%;
}
}
.hero-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.20),
rgba(0,0,0,0.10)
);
}

/* HERO THUMBNAIL NAV */
.hero-thumb-nav {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.hero-thumb {
width: 58px;
height: 58px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.75);
background-size: cover;
background-position: center;
cursor: pointer;
transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
padding: 0;
outline: none;
flex-shrink: 0;
}
.hero-thumb.active {
width: 76px;
height: 76px;
border-color: #fff;
box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
@media (max-width: 767.98px) {
.hero-thumb-nav {
right: 10px;
gap: 8px;
}
.hero-thumb {
width: 38px;
height: 38px;
border-width: 2px;
}
.hero-thumb.active {
width: 50px;
height: 50px;
}
}

/* FOOTER */
.footer {
color: #000 !important;
position: relative;
z-index: 4;
}

.footer-link {
color: #000;
text-decoration: none;
}
.footer-link:hover {
color: #29ABE2;
}
.footer .container {
border-top-left-radius: 150px;
border-top-right-radius: 150px;
background: linear-gradient(to bottom, #F2F2F3 0%, #DDF5FE 100%);
padding: 80px 80px 20px 80px;
box-shadow: 0 0 10px rgba(41, 171, 226, 0.9) !important;
border: 1px solid rgba(41, 171, 226, 0.9) !important;
}
.footer-social img{
margin-top: 20px;
max-width: 35px;
margin-right: 10px;
filter: brightness(0);
}
.footer .bi {
color: #000;
}
.footer-logo{
max-width: 200px;
}
/* WHERE MAGICMYK HAPPENS */
/* Ensure magic-section content sits between waves */
.magic-bg {
position: absolute;
top: 120px;
bottom: 120px;
left: 0;
width: 100%;
z-index: 1;
background: linear-gradient(
	180deg,
	#f2f2f3 0%,
	#edf8fd 38%,
	#e6f6fd 68%,
	#ddf5fe 100%
) !important;
overflow: hidden;
}
.magic-section > .container {
margin-top: -80px;
position: relative;
z-index: 3;
background: none !important;
padding: 75px 0;
text-align: center;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
}

/* Homepage intro block content styling */
.magic-section .content {
max-width: 1160px;
margin: 0 auto;
}

.magic-section .content h2 {
margin-top: 0.5rem;
margin-bottom: 1.25rem;
font-size: clamp(1.2rem, 2.8vw, 2.8rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: 0.02em;
color: #0f151d;
}

.magic-section .content .lead {
max-width: 1240px;
margin: 0 auto 1.2rem;
font-size: 1rem;
line-height: 1.45;
font-weight: 500;
color: #202c39;
}

.magic-section .content .c { color: #29ABE2; }
.magic-section .content .m { color: #E63C8E; }
.magic-section .content .y { color: #F1D83A; }
.magic-section .content .k { color: #111111; }
.wave {
position: absolute;
width: 100%;
left: 0;
line-height: 0;
pointer-events: none;
z-index: 2;
}
.wave svg {
width: 100%;
height: 120px;
}
.wave-top {
position: absolute;
top: 0;
z-index: 2;
clip-path: none;
}
.wave-top svg {
transform: none;
}
.wave-bottom {
position: absolute;
bottom: 0;
z-index: 2;
clip-path: none;
}
.wave-bottom svg {
transform: none;
}

/* Keep waves from acting like hard paint blocks above the gradient */
/* WHAT WE DO SECTION */

.wwd-slide-container {
position: relative;
overflow: visible;
border-radius: 14px;
transition: transform 0.3s ease;
}

.wwd-slide-container img {
border-radius: 14px !important;
display: block;
width: 100%;
}

.wwd-overlay {
position: absolute;
inset: 0;
border-radius: 14px;
overflow: hidden;
padding: 1.5rem 1.75rem !important;
display: flex;
flex-direction: column;
justify-content: center;
}

.wwd-overlay-content {
max-width: 50%;
}

.wwd-slide-container h3 {
font-size: 20px;
font-weight: 700;
}

.wwd-subtitle {
font-weight: 500;
}

/* The Main Slide Styling */
.main-featured {
z-index: 10;
}

.main-featured img {
height: auto;
width: 100%;
}

/* Ghost image heights */
.small-scale img {
height: 350px;
object-fit: cover;
width: 100%;
}

/* The Pink Glow Effect */
.shadow-pink {
border-radius: 14px;
box-shadow: 0 0 8px 1px rgba(41, 171, 226, 0.45) !important;
transition: box-shadow 0.3s ease-in-out;
}

/* Ensure the container doesn't clip the shadow */
#testimonialsCarousel .carousel-item {
/* Adding padding ensures the glow has space to show outside the image */
padding: 20px 0;
overflow: hidden;
}

/* wwd-slide-container consolidated above */

#wwdCarousel,
#wwdCarousel .carousel-inner,
#wwdCarousel .carousel-item {
overflow-x: clip;
overflow-y: visible;
}

.btn-outline-pink {
filter: brightness(0.8);
color: #fff;
border: 1px solid #fff;
background: linear-gradient(90deg, #FDF347, #29ABE2, #E63C8E);
border-radius: 50px;
font-size: 0.8rem;
padding: 5px 15px;
text-decoration: none;
margin: 5px 5px 5px 0;
width: 130px;
}
/* Hover effect: brighten slightly */
.btn-outline-pink:hover {
filter: brightness(1.1);
color: #ffffff !important;
border: 1px solid #fff;
}

/* Clean up Bootstrap controls */
.carousel-control-prev, .carousel-control-next {
width: 5%;
}

/* Black arrows for WWD carousel */
#wwdCarousel .carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#wwdCarousel .carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Position the indicator container */
.custom-wwd-indicators {
bottom: -50px; /* Moves dots below the images so they don't clutter the text */
}

/* Base style for the dots */
.custom-wwd-indicators [data-bs-target] {
width: 12px !important;
height: 12px !important;
border-radius: 50% !important; /* Makes them circles */
background-color: #F29DC6 !important;
border: none;
opacity: 0.3;
transition: all 0.3s ease;
margin: 0 8px;
}

/* Active dot styling */
.custom-wwd-indicators .active {
opacity: 1 !important;
transform: scale(1.3);
box-shadow: 0 0 12px rgba(242, 157, 198, 0.8); /* Pink glow */
}

/* Add some bottom margin to the section to make room for the dots */
.what-we-do-section {
background: transparent;
padding-top: 40px !important;
padding-bottom: 40px !important;
margin-top: 0;
position: relative;
z-index: 1;
}

/* On pages where WHAT WE DO follows WHERE MAGICMYK HAPPENS, pull it up under that section */
.magic-section + .what-we-do-section {
margin-top: -100px;
}

.what-we-do-section .section-title {
color: #000 !important;
}

@media (max-width: 768px) {
.what-we-do-section {
padding-top: 10px !important;
}

.wwd-overlay {
padding: 0.9rem 1rem !important;
justify-content: flex-start;
}

.wwd-overlay-content {
max-width: 60%;
}

.wwd-slide-container h3 {
font-size: 16px;
line-height: 1.1;
margin-bottom: 0.35rem !important;
}

.wwd-subtitle {
font-size: 0.8rem;
line-height: 1.2;
margin-bottom: 0.6rem !important;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

#wwdCarousel .btn-outline-pink {
font-size: 0.72rem;
padding: 4px 10px;
width: auto;
min-width: 108px;
margin: 3px 4px 0 0;
}

.magic-section + .what-we-do-section {
margin-top: -70px;
}

.magic-section > .container {
padding: 85px 16px;
margin-top: -80px;
}

.magic-section .content h2 {
font-size: clamp(1.8rem, 8.2vw, 2.8rem);
line-height: 1.12;
}

.magic-section .content .lead {
font-size: 1.05rem;
line-height: 1.5;
}
}

/* WE'VE WORKED WITH SECTION */
.worked-with-section {
width: 100%;
min-height: 450px;
position: relative;
}

.worked-with-section::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Homepage/Worked_With-1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
pointer-events: none;
}

.worked-with-section::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, #DDF5FE 0%, #F2F2F3 50%, #DDF5FE 100%);
z-index: 1;
pointer-events: none;
}

.worked-with-section .container {
position: relative;
padding-top: 7%;
z-index: 4;
}

.worked-with-section .section-title {
font-size: clamp(1.5rem, 4vw, 2.4rem);
line-height: 1.2;
padding: 0 12px;
word-break: break-word;
overflow-wrap: anywhere;
}

.worked-with-marquee {
position: relative;
overflow: hidden;
padding: 8px 0;
}


.worked-with-track {
display: flex;
align-items: center;
gap: 20px;
width: max-content;
animation: workedWithConveyor 14s linear infinite;
}

.worked-with-marquee:hover .worked-with-track {
animation-play-state: paused;
}

.worked-with-logo {
flex: 0 0 auto;
width: clamp(135px, 13vw, 185px);
height: 92px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
}

.worked-with-logo img {
max-width: 100%;
max-height: 58px;
object-fit: contain;
}

@keyframes workedWithConveyor {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}

/* Mobile Responsive */
@media (max-width: 768px) {
.worked-with-section {
min-height: 450px;
}

.worked-with-section::before {
background-size: cover;
background-position: center top;
}
.worked-with-section .container {
position: relative;
padding-top: 39%;
z-index: 4;
}

.worked-with-section .section-title {
font-size: clamp(1.2rem, 6vw, 1.8rem);
margin-top: 0.75rem;
margin-bottom: 1.25rem !important;
}

.worked-with-track {
gap: 14px;
animation-duration: 10s;
}

.worked-with-logo {
width: 120px;
height: 76px;
padding: 10px;
}

.worked-with-logo img {
max-height: 48px;
}
}

@media (prefers-reduced-motion: reduce) {
.worked-with-track {
animation: none;
}
}

/* TESTIMONIALS */

#testimonials {
width: 100%;
position: relative;
isolation: isolate;
z-index: 2;
}

#testimonials::before {
content: "";
position: absolute;
top: -110px;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('../img/Homepage/Paint_BG.png');
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
z-index: 0;
pointer-events: none;
}

@media (max-width: 768px) {
#testimonials::before {
top: -95px;
}

#testimonials {
padding-top: 0 !important;
}

#testimonials h2 {
margin-top: 0;
}
}


#testimonials .container {
	position: relative;
	z-index: 10;
	/* No extra padding here */
}

#testimonialsCarousel,
#testimonialsCarousel .carousel-inner {
	overflow: hidden;
}

#testimonialsCarousel .card {
box-shadow: 0 0 0 2px #ECCEE4, 0 0 26px rgba(236, 206, 228, 1), 0 0 56px rgba(236, 206, 228, 0.78) !important;
border: 1px solid #ECCEE4 !important;
background-color: #FFFFFF;
color: #000000;
padding:35px;
}

.testimonials-btn {
position: static !important;
width: 50px !important;
height: 50px !important;
background-color: rgba(242, 157, 198, 0.5) !important;
opacity: 1 !important;
border: 1px solid rgba(255, 255, 198, 0.7) !important;
border-radius: 50%;
display: inline-flex !important;
align-items: center;
justify-content: center;
}

.testimonials-btn:hover {
background-color: rgba(242, 157, 198, 0.8) !important;
}

.testimonials-btn .carousel-control-prev-icon,
.testimonials-btn .carousel-control-next-icon {
filter: invert(1);
width: 20px !important;
height: 20px !important;
}

/* HERO CONTENT */
/* Mobile Responsive */
@media (max-width: 768px) {
.hero-content {
padding-top: 50%;
text-align: center;
}

.hero-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.20),
rgba(0,0,0,0.10)
);
}
}