.text-hot-pink-50 {color:#fdf2f8} .bg-hot-pink-50 {background-color:#fdf2f8} .border-hot-pink-50 {border-color:#fdf2f8 !important;}
.text-hot-pink-100 {color:#fce7f3} .bg-hot-pink-100 {background-color:#fce7f3} .border-hot-pink-100 {border-color:#fce7f3 !important;}
.text-hot-pink-200 {color:#fbcfe8} .bg-hot-pink-200 {background-color:#fbcfe8} .border-hot-pink-200 {border-color:#fbcfe8 !important;}
.text-hot-pink-300 {color:#e466ab} .bg-hot-pink-300 {background-color:#e466ab} .border-hot-pink-300 {border-color:#f9a8d4 !important;}
.text-hot-pink-400 {color:#f472b6} .bg-hot-pink-400 {background-color:#f472b6} .border-hot-pink-400 {border-color:#f472b6 !important;}
.text-hot-pink-500 {color:#ec4899} .bg-hot-pink-500 {background-color:#ec4899} .border-hot-pink-500 {border-color:#ec4899 !important;}
.text-hot-pink-600 {color:#db2777} .bg-hot-pink-600 {background-color:#db2777} .border-hot-pink-600 {border-color:#db2777 !important;}
.text-hot-pink-700 {color:#be185d} .bg-hot-pink-700 {background-color:#be185d} .border-hot-pink-700 {border-color:#be185d !important;}
.text-hot-pink-800 {color:#9d174d} .bg-hot-pink-800 {background-color:#9d174d} .border-hot-pink-800 {border-color:#9d174d !important;}
.text-hot-pink-900 {color:#831843} .bg-hot-pink-900 {background-color:#831843} .border-hot-pink-900 {border-color:#831843 !important;}

.text-soft-pink-50 {color:#fef7f7} .bg-soft-pink-50 {background-color:#fef7f7} .border-soft-pink-50 {border-color:#fef7f7 !important;}
.text-soft-pink-100 {color:#fdeef0} .bg-soft-pink-100 {background-color:#fdeef0} .border-soft-pink-100 {border-color:#fdeef0 !important;}
.text-soft-pink-200 {color:#fce4e6} .bg-soft-pink-200 {background-color:#fce4e6} .border-soft-pink-200 {border-color:#fce4e6 !important;}
.text-soft-pink-300 {color:#f8ced3} .bg-soft-pink-300 {background-color:#f8ced3} .border-soft-pink-300 {border-color:#f8ced3 !important;}
.text-soft-pink-400 {color:#f2a8b4} .bg-soft-pink-400 {background-color:#f2a8b4} .border-soft-pink-400 {border-color:#f2a8b4 !important;}
.text-soft-pink-500 {color:#ea8695} .bg-soft-pink-500 {background-color:#ea8695} .border-soft-pink-500 {border-color:#ea8695 !important;}
.text-soft-pink-600 {color:#d85d77} .bg-soft-pink-600 {background-color:#d85d77} .border-soft-pink-600 {border-color:#d85d77 !important;}
.text-soft-pink-700 {color:#c43d5c} .bg-soft-pink-700 {background-color:#c43d5c} .border-soft-pink-700 {border-color:#c43d5c !important;}
.text-soft-pink-800 {color:#a33851} .bg-soft-pink-800 {background-color:#a33851} .border-soft-pink-800 {border-color:#a33851 !important;}
.text-soft-pink-900 {color:#8a334a} .bg-soft-pink-900 {background-color:#8a334a} .border-soft-pink-900 {border-color:#8a334a !important;}

.text-rose-gold-50 {color:#fdf7f0} .bg-rose-gold-50 {background-color:#fdf7f0} .border-rose-gold-50 {border-color:#fdf7f0 !important;}
.text-rose-gold-100 {color:#f9e6d3} .bg-rose-gold-100 {background-color:#f9e6d3} .border-rose-gold-100 {border-color:#f9e6d3 !important;}
.text-rose-gold-200 {color:#f4d0a7} .bg-rose-gold-200 {background-color:#f4d0a7} .border-rose-gold-200 {border-color:#f4d0a7 !important;}
.text-rose-gold-300 {color:#ecb176} .bg-rose-gold-300 {background-color:#ecb176} .border-rose-gold-300 {border-color:#ecb176 !important;}
.text-rose-gold-400 {color:#e39547} .bg-rose-gold-400 {background-color:#e39547} .border-rose-gold-400 {border-color:#e39547 !important;}
.text-rose-gold-500 {color:#d4712b} .bg-rose-gold-500 {background-color:#d4712b} .border-rose-gold-500 {border-color:#d4712b !important;}
.text-rose-gold-600 {color:#b85c20} .bg-rose-gold-600 {background-color:#b85c20} .border-rose-gold-600 {border-color:#b85c20 !important;}
.text-rose-gold-700 {color:#95441d} .bg-rose-gold-700 {background-color:#95441d} .border-rose-gold-700 {border-color:#95441d !important;}
.text-rose-gold-800 {color:#7a3a1f} .bg-rose-gold-800 {background-color:#7a3a1f} .border-rose-gold-800 {border-color:#7a3a1f !important;}
.text-rose-gold-900 {color:#65311b} .bg-rose-gold-900 {background-color:#65311b} .border-rose-gold-900 {border-color:#65311b !important;}

.bg-pink-gradient {background-image: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 30%, #f9a8d4 100%);}
.bg-hot-pink-gradient {background-image: linear-gradient(135deg, #f472b6 0%, #ec4899 50%, #db2777 100%);}
.bg-soft-pink-gradient {background-image: linear-gradient(135deg, #fce4e6 0%, #f8ced3 50%, #ea8695 100%);}
.bg-rose-gold-gradient {background-image: linear-gradient(135deg, #f4d0a7 0%, #ecb176 50%, #e39547 100%);}
.bg-hero-gradient {background-image: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 30%, #f9e6d3 100%);}


body {font-family: "Inter", sans-serif;}
h1, h2, h3, h4, h5, h6, .serif-font {font-family: "Playfair Display", serif;}


.header-height {
    height: 150px;
    max-height: 150px;
    min-height: 150px;
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    --bs-bg-opacity:90%;
}

.logo {height:4.5em;}
.bg-clip-text {color: transparent; -webkit-background-clip: text; background-clip: text;}
a.nav-item.nav-link {color:#555;} a.nav-item.nav-link:hover {color:#be185d;} a.nav-item.nav-link.active {color:#be185d;}

#home {
    background-image: url('https://www.tamlyn-makeup-artist.co.za/wp-content/uploads/2022/10/Collab-Edited-42-scaled.jpeg');
    background-size: cover;
    background-position: center;
    min-height: calc(100vh - 150px);
}
#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%),
    linear-gradient(135deg, rgba(253, 242, 248, 0.75) 0%, rgba(252, 231, 243, 0.75) 30%, rgba(249, 168, 212, 0.75) 100%);
    z-index: 1; /* Place overlay above background image */
}
#about, #services, #gallery, #contact {
    min-height: calc(100vh - 150px);
}
#services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%),
    linear-gradient(135deg, rgba(253, 242, 248, 0.75) 100%, rgba(252, 231, 243, 0.75) 30%, rgba(249, 168, 212, 0.75) 0%);
    z-index: 1; /* Place overlay above background image */
}
#about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%),
    linear-gradient(135deg, rgba(253, 242, 248, 0.75) 100%, rgba(252, 231, 243, 0.75) 30%, rgba(249, 168, 212, 0.75) 0%);
    z-index: 1; /* Place overlay above background image */
}
#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%),
    linear-gradient(135deg, rgba(253, 242, 248, 0.75) 100%, rgba(252, 231, 243, 0.75) 30%, rgba(249, 168, 212, 0.75) 0%);
    z-index: 1; /* Place overlay above background image */
}
#gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%),
    linear-gradient(135deg, rgba(253, 242, 248, 0.75) 100%, rgba(252, 231, 243, 0.75) 30%, rgba(249, 168, 212, 0.75) 0%);
    z-index: 1; /* Place overlay above background image */
}
.card, .virtual-card {
            -webkit-transition: -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
            transition: -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out; /* Smooth transition for movement and shadow */
        }

        .card:hover, .card-active, .virtual-card:hover, .virtual-card-active {
            -webkit-transform: translateY(-8px);
                    transform: translateY(-8px); /* Moves the card up by 3 pixels */
            -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5) !important;
                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5) !important; /* Darker shadow on hover */
        }

        .text-shadow { text-shadow: 2px 2px 4px #000000; }