/* ===================================================================
   BMG MYANMAR - OFFICIAL STYLESHEET (DE-MINIFIED & ORGANIZED)
   VERSION: 3.0
   DESCRIPTION: A clean, human-readable, and well-organized CSS 
                for the entire BMG Myanmar website.
   =================================================================== */

/* * TABLE OF CONTENTS
 * ---------------------------------------------------
 * 1. SETUP & VARIABLES (Font, Colors, etc.)
 * 2. GENERAL STYLES (Resets, Typography, Container)
 * 3. REUSABLE COMPONENTS (Buttons, Cards, Headers)
 * 4. MAIN LAYOUT COMPONENTS (Header, Footer)
 * 5. HOMEPAGE SECTIONS (Hero, About, etc.)
 * 6. ARTISTS PAGE SECTIONS
 * 7. ONBOARDING FORM PAGE
 * 8. OTHER PAGES (Services, Blog, Contact, etc.)
 * 9. UTILITY & MISC (Scroll-to-top, etc.)
 * 10. RESPONSIVE DESIGN (Media Queries)
 * ---------------------------------------------------
 */

/* ===============================================
   1. SETUP & VARIABLES (Font, Colors, etc.)
   =============================================== */
@font-face {
    font-family: 'Z14Irrawaddy';
    src: url(./Fonts/Z14Irrawaddy-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pyidaungsu';
    src: url(./Fonts/Pyidaungsu_Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
  --primary-color: #4169E1;
  --secondary-color: #1E90FF;
  --dark-color: #1a202c;
  --gray-color: #5f6368;
  --light-gray-color: #f8f9fa;
  --white-color: #fff;
  --accent-color: #FFA000; /* Bright Orange */
  /* --accent-color: #28a745; */ /* Vibrant Green (Alternative) */

  --body-font: 'Pyidaungsu', sans-serif;
  --heading-font: 'Z14Irrawaddy', 'Pyidaungsu', sans-serif;
  --box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
}

/* ===============================================
   2. GENERAL STYLES (Resets, Typography, Container)
   =============================================== */
*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--body-font);
    background-color: var(--white-color);
    color: var(--dark-color);
    line-height: 1.7;
    font-size: 16px;
}
h1,
h2,
h3,
h4 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.3;
}
h1 {
    font-size: 2.8rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.4rem;
}
p {
    margin-bottom: 1rem;
    color: var(--gray-color);
}
a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color .3s ease;
}
a:hover {
    color: var(--secondary-color);
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===============================================
   3. REUSABLE COMPONENTS (Buttons, Cards, Headers)
   =============================================== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 5px;
    font-weight: 700;
    transition: all .3s ease;
    border: none;
    cursor: pointer;
    font-family: var(--heading-font);
}
.btn-primary,
.hero-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.btn-primary:hover,
.hero-btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 92, 191, .4);
}
section {
    padding: 80px 0;
}
.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.section-subtitle {
    font-weight: 700;
    font-family: var(--heading-font);
    color: var(--primary-color);
    display: block;
    margin-bottom: 10px;
}
.section-header h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}
.section-description {
    max-width: 700px;
    margin: 0 auto;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-items: center;
}
.card {
    background-color: var(--white-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}

/* ===============================================
   4. MAIN LAYOUT COMPONENTS (Header, Footer)
   =============================================== */
.header {
    background-color: var(--white-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo img {
    max-height: 45px;
}
.nav-menu ul {
    display: flex;
    gap: 30px;
}
.nav-link {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark-color);
    position: relative;
    padding: 5px 0;
}
.nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width .3s ease;
}
.nav-link.active:after,
.nav-link:hover:after {
    width: 100%;
}
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--dark-color);
    transition: all .3s ease;
}
.footer {
    background-color: var(--dark-color);
    color: var(--light-gray-color);
    padding: 60px 0 20px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}
.footer-logo {
    max-height: 40px;
    margin-bottom: 20px;
}
.footer p {
    color: #ccc;
}
.footer h3 {
    color: var(--white-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.footer-col ul li {
    margin-bottom: 10px;
}
.footer-col ul li a {
    color: #ccc;
    transition: color .3s, padding-left .3s;
}
.footer-col ul li a:hover {
    color: var(--white-color);
    padding-left: 5px;
}
.social-links {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}
.social-links img {
    height: 24px;
}
.contact-icon {
    height: 16px;
    margin-right: 10px;
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--gray-color);
    font-size: .9rem;
    color: #ccc;
}
.footer-bottom a {
    color: var(--white-color);
    text-decoration: underline;
    transition: color .3s ease;
}
.footer-bottom a:hover {
    text-decoration: none;
}

/* ===============================================
   5. HOMEPAGE SECTIONS
   =============================================== */
.hero {
    background: url(https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=2070&auto=format&fit=crop) no-repeat center center/cover;
    color: var(--white-color);
    padding: 120px 0;
    position: relative;
    text-align: left;
}
.hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}
.hero h1 {
    color: var(--white-color);
    font-size: 3rem;
    margin-bottom: 1rem;
}
.hero p {
    color: rgba(255, 255, 255, .9);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
.about-container {
    display: flex;
    align-items: center;
    gap: 50px;
}
.about-content {
    flex: 1;
}
.about-image-section {
    flex: 1;
    text-align: center;
}
.about-main-image {
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.features-list {
    margin-top: 30px;
}
.feature-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    align-items: flex-start;
}
.feature-item img {
    height: 24px;
    margin-top: 5px;
}
.feature-item h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.service-card {
    padding: 30px;
    text-align: center;
}
.service-icon-wrapper img {
    height: 50px;
    margin-bottom: 20px;
}
.service-card h3 {
    margin-bottom: 15px;
}
.read-more-link {
    font-weight: 700;
    font-family: var(--heading-font);
    margin-top: 20px;
    display: inline-block;
}
.read-more-link i {
    margin-left: 5px;
    transition: transform .3s ease;
}
.read-more-link:hover i {
    transform: translateX(5px);
}
.artist-card {
    text-align: center;
    display: flex;
    flex-direction: column;
}
.artist-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.artist-info {
    padding: 20px;
    flex-grow: 1;
}
.artist-info h3 {
    margin-bottom: 5px;
}
.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-content {
    padding: 25px;
}
.blog-meta {
    font-size: .9rem;
    color: var(--gray-color);
    margin-bottom: 10px;
}
.blog-meta i {
    margin-right: 5px;
}
.blog-content h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.blog-content h3 a {
    color: var(--dark-color);
}
.blog-content h3 a:hover {
    color: var(--primary-color);
}
.achievements-section {
    background-color: var(--light-gray-color);
}
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}
.achievement-card {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.achievement-card i {
    color: var(--secondary-color);
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.achievement-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}
.achievement-card h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* ===============================================
   6. ARTISTS PAGE SECTIONS
   =============================================== */
.artists-hero {
    padding: 80px 0;
    text-align: center;
    color: var(--white-color);
    background: linear-gradient(rgba(29, 43, 64, .85), rgba(29, 43, 64, .85)), url(https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?q=80&w=2070&auto=format&fit=crop) no-repeat center center/cover;
}
.artists-hero h1 {
    color: var(--white-color);
}
.artists-hero p {
    color: rgba(255, 255, 255, .85);
    max-width: 600px;
    margin: 10px auto 0;
}
.artist-spotlight-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}
.spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.spotlight-card {
    background-color: var(--white-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.spotlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}
.spotlight-card-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 5px solid var(--white-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
    flex-shrink: 0;
}
.spotlight-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.spotlight-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.spotlight-card-content h3 {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}
.spotlight-card-content .artist-bio {
    font-size: .95rem;
    color: var(--gray-color);
    flex-grow: 1;
    margin-bottom: 20px;
}
.spotlight-card-content .socials {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.spotlight-card-content .socials a {
    font-size: 1.5rem;
    color: var(--dark-color);
    transition: color .3s ease, transform .3s ease;
}
.spotlight-card-content .socials a:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}
.logo-grid-section {
    padding: 80px 0;
    background-color: var(--white-color);
}
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}
.partner-card {
    background-color: var(--light-gray-color);
    border-radius: 10px;
    transition: all .3s ease;
    border: 1px solid #eee;
}
.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
    border-color: transparent;
}
.partner-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    height: 180px;
    text-decoration: none;
}
.partner-link img {
    max-height: 60px;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .8;
    transition: all .3s ease;
    margin-bottom: 20px;
}
.partner-card:hover .partner-link img {
    filter: grayscale(0%);
    opacity: 1;
}
.partner-link h4 {
    color: var(--dark-color);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    transition: color .3s ease;
}
.partner-card:hover .partner-link h4 {
    color: var(--primary-color);
}
.artist-showcase {
    padding: 80px 0;
}
.artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.artist-showcase .artist-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform .3s ease;
    aspect-ratio: 1/1.1;
    display: block;
}
.artist-showcase .artist-card:hover {
    transform: translateY(-5px);
}
.artist-showcase .artist-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.artist-showcase .artist-card:hover img {
    transform: scale(1.05);
}
.artist-showcase .artist-card .artist-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    color: var(--white-color);
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 20%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    transition: background .4s ease;
}
.artist-showcase .artist-card:hover .artist-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, .95) 30%, transparent 100%);
}
.artist-overlay h3 {
    color: var(--white-color);
    font-size: 1.5rem;
    margin: 0 0 5px;
}
.artist-overlay .artist-genre {
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
    margin: 0;
}
.artist-overlay .artist-socials {
    margin-top: 15px;
    display: flex;
    gap: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .4s ease .1s;
}
.artist-showcase .artist-card:hover .artist-overlay .artist-socials {
    opacity: 1;
    transform: translateY(0);
}
.artist-overlay .artist-socials a {
    color: var(--white-color);
    font-size: 1.2rem;
}
.artist-overlay .socials a:hover {
    color: var(--secondary-color);
}
.join-us-cta {
    background-color: var(--dark-color);
    text-align: center;
    padding: 80px 0;
}
.join-us-cta h2 {
    color: var(--white-color);
}
.join-us-cta p {
    color: rgba(255, 255, 255, .8);
    margin-bottom: 30px;
}

/* ===============================================
   7. ONBOARDING FORM PAGE
   =============================================== */
.onboarding-hero {
    padding: 80px 0;
    text-align: center;
    color: var(--white-color);
    background: linear-gradient(rgba(29, 43, 64, .85), rgba(29, 43, 64, .85)), url(https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=2070&auto=format&fit=crop) no-repeat center center/cover;
}
.onboarding-hero h1 {
    color: var(--white-color);
}
.onboarding-hero p {
    color: rgba(255, 255, 255, .85);
    max-width: 600px;
    margin: 10px auto 0;
}
.onboarding-form-section {
    padding: 80px 0;
    background-color: #f0f2f5;
}
.onboarding-form-container {
    max-width: 850px;
    margin: 0 auto;
    background-color: var(--white-color);
    padding: 20px 40px 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
}
.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}
.progress-bar:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #e0e0e0;
    z-index: 1;
}
.progress-bar .progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    background-color: var(--primary-color);
    width: 0;
    z-index: 2;
    transition: width .3s ease;
}
.progress-step {
    text-align: center;
    position: relative;
    z-index: 3;
    width: 150px;
}
.progress-step .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-weight: 700;
    font-size: 1.2rem;
    transition: background-color .3s ease, border .3s ease;
    border: 4px solid #e0e0e0;
}
.progress-step .step-label {
    font-size: .9rem;
    color: var(--gray-color);
    font-weight: 700;
}
.progress-step.active .step-icon {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.progress-step.active .step-label {
    color: var(--primary-color);
}
.progress-step.completed .step-icon {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-step {
    display: none;
}
.form-step.active {
    display: block;
    animation: fadeIn .5s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.form-fieldset {
    border: none;
    padding: 0;
    margin-bottom: 30px;
}
.form-fieldset legend {
    font-size: 1.5rem;
    font-family: var(--heading-font);
    padding-bottom: 10px;
    margin-bottom: 25px;
    color: var(--dark-color);
    border-bottom: 2px solid var(--light-gray-color);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-fieldset legend i {
    color: var(--primary-color);
}
.form-group {
    margin-bottom: 25px;
}
.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #344767;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #d2d6da;
    border-radius: 8px;
    font-family: var(--body-font);
    font-size: 1rem;
    transition: border-color .3s, box-shadow .3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, .2);
}
.form-group small {
    display: block;
    margin-top: 8px;
    font-size: .85rem;
    color: var(--gray-color);
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.track-item {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}
.track-item h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.btn-add-track {
    background: none;
    border: 2px dashed var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
    width: 100%;
}
.btn-add-track:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.confirmation-section {
    text-align: center;
    padding: 20px;
}
.confirmation-section h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    cursor: pointer;
}
.checkbox-label input {
    margin-right: 10px;
    width: 18px;
    height: 18px;
}
.checkbox-label a {
    text-decoration: underline;
}
.form-navigation {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-navigation button {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
}
.form-navigation .btn-prev {
    background-color: #6c757d;
    color: #fff;
}
.form-navigation .btn-prev:hover {
    background-color: #5a6268;
}
.form-navigation .btn-next,
.form-navigation .btn-submit {
    background-color: var(--primary-color);
    color: #fff;
}
.form-navigation .btn-next:hover,
.form-navigation .btn-submit:hover {
    background-color: var(--secondary-color);
}
.success-message {
    text-align: center;
    padding: 40px;
}
.success-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: tada 1s ease;
}
.success-message h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}
.success-message p {
    font-size: 1.1rem;
    color: var(--gray-color);
    margin-bottom: 30px;
}
@keyframes tada {
    0% {
        transform: scale(1);
    }
    10%,
    20% {
        transform: scale(.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/* ===============================================
   8. OTHER PAGES (Services, Blog, Contact, etc.)
   =============================================== */
.page-header {
    background: linear-gradient(rgba(0, 50, 100, .8), rgba(0, 50, 100, .8)), url(https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070&auto=format&fit=crop) no-repeat center center/cover;
    padding: 80px 0;
    text-align: center;
    color: #fff;
}
.page-header h1 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 10px;
}
.page-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.breadcrumbs {
    font-size: .9rem;
}
.breadcrumbs a {
    color: #fff;
    font-weight: 700;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs i,
.breadcrumbs span {
    color: rgba(255, 255, 255, .7);
    margin: 0 8px;
}
.services-detailed-section {
    padding: 80px 0;
    background-color: var(--white-color);
}
.service-item {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}
.service-item:nth-child(even) {
    flex-direction: row-reverse;
}
.service-image-col {
    flex: 1;
    min-width: 40%;
}
.service-image-col img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    object-fit: cover;
}
.service-text-col {
    flex: 1.2;
}
.service-text-col .service-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: inline-block;
}
.service-text-col h3 {
    font-size: 2rem;
    margin-bottom: 15px;
}
.service-text-col p {
    font-size: 1rem;
    margin-bottom: 25px;
}
.service-feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.service-feature-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.service-feature-list li i {
    color: var(--primary-color);
}
.final-cta-section {
    background-color: var(--dark-color);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.final-cta-section h2 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 15px;
}
.final-cta-section p {
    color: rgba(255, 255, 255, .8);
    margin-bottom: 30px;
}
.btn-cta {
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px 35px;
    font-size: 1.1rem;
    border-radius: 5px;
    transition: all .3s ease;
}
.btn-cta:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 92, 191, .4);
}
.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
}
.filter-btn {
    background-color: #f0f0f0;
    color: var(--dark-color);
    border: none;
    padding: 10px 25px;
    border-radius: 20px;
    font-family: var(--heading-font);
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease;
}
.filter-btn:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}
.filter-btn.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 4px 10px rgba(0, 92, 191, .3);
}
.artist-card.hide {
    display: none;
}
.join-us-cta {
    background-color: var(--light-gray-color);
    text-align: center;
    padding: 80px 0;
}
.blog-listing-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}
.featured-post-card {
    display: flex;
    gap: 30px;
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin-bottom: 60px;
    align-items: center;
}
.featured-post-image {
    flex-basis: 50%;
}
.featured-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.featured-post-content {
    flex-basis: 50%;
}
.post-meta {
    display: flex;
    gap: 20px;
    font-size: .9rem;
    color: var(--gray-color);
    margin-bottom: 15px;
    align-items: center;
}
.post-category {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 3px 12px;
    border-radius: 15px;
    font-size: .8rem;
    font-weight: 700;
    font-family: var(--heading-font);
}
.post-date i {
    margin-right: 5px;
}
.featured-post-content h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}
.featured-post-content h2 a {
    color: var(--dark-color);
}
.featured-post-content h2 a:hover {
    color: var(--primary-color);
}
.post-excerpt {
    margin-bottom: 25px;
}
.latest-posts-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.2rem;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    justify-items: center;
}
.blog-card {
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}
.blog-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.blog-card-content .post-meta {
    margin-bottom: 10px;
    font-size: .8rem;
}
.blog-card-content h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    flex-grow: 1;
}
.blog-card-content h3 a {
    color: var(--dark-color);
}
.blog-card-content h3 a:hover {
    color: var(--primary-color);
}
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    gap: 10px;
}
.page-link {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    color: var(--dark-color);
    border-radius: 5px;
    font-weight: 700;
    transition: all .3s ease;
}
.page-link:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}
.page-link.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}
.page-link.disabled {
    color: #ccc;
    pointer-events: none;
}
.contact-page-section {
    padding: 80px 0;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: flex-start;
}
.contact-details-col h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.contact-details-col p {
    margin-bottom: 30px;
}
.info-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}
.info-card-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: 5px;
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}
.info-card-text h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}
.info-card-text p {
    margin: 0;
    color: var(--gray-color);
}
.contact-form-col {
    background: var(--light-gray-color);
    padding: 40px;
    border-radius: 10px;
}
.contact-form-col h3 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 30px;
}
.main-contact-form .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--body-font);
    font-size: 1rem;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
}
.full-width-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}
.map-container {
    margin-top: 80px;
    text-align: center;
}
.map-container h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}
.map-container iframe {
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.faq-page-section {
    padding: 80px 0;
    background-color: var(--white-color);
}
.faq-page-section .faq-container {
    max-width: 900px;
    margin: 0 auto;
}
.faq-page-section .faq-category-title {
    font-size: 1.8rem;
    color: var(--dark-color);
    margin-top: 50px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}
.faq-page-section .faq-category-title:first-child {
    margin-top: 0;
}
.blog-post-section {
    padding: 80px 0;
}
.blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}
.post-header .post-category {
    display: inline-block;
    margin-bottom: 15px;
}
.post-title {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 15px;
}
.post-meta-single {
    display: flex;
    gap: 25px;
    color: var(--gray-color);
    font-size: .9rem;
    margin-bottom: 30px;
}
.featured-image-single {
    margin-bottom: 30px;
}
.featured-image-single img {
    width: 100%;
    border-radius: 10px;
}
.post-body {
    font-size: 1.1rem;
    line-height: 1.8;
}
.post-body p {
    margin-bottom: 1.5em;
}
.post-body h2,
.post-body h3 {
    margin-top: 2.5em;
    margin-bottom: 1em;
}
.post-body h2 {
    font-size: 1.8rem;
}
.post-body h3 {
    font-size: 1.5rem;
}
.post-body blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    border-left: 5px solid var(--primary-color);
    background-color: var(--light-gray-color);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--dark-color);
}
.post-body ul {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 1.5em;
}
.post-body ul li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
}
.post-body ul li:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 5px;
}
.post-sharing {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}
.post-sharing h4 {
    margin-bottom: 15px;
}
.sharing-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.share-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 5px;
    color: var(--white-color);
    font-size: .9rem;
    text-decoration: none;
}
.share-link.copy-link {
    background-color: var(--gray-color);
}
.share-link.facebook {
    background-color: #1877f2;
}
.share-link.telegram {
    background-color: #26a5e4;
}
.share-link.twitter {
    background-color: #1da1f2;
}
.post-comments {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}
.post-comments h3 {
    margin-bottom: 20px;
}
.blog-sidebar .sidebar-widget {
    background: var(--light-gray-color);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.widget-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}
.search-form {
    display: flex;
    position: relative;
}
.search-form input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.search-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: none;
    border: none;
    color: var(--gray-color);
    cursor: pointer;
}
.categories-list,
.recent-posts-list {
    list-style: none;
    padding: 0;
}
.categories-list li,
.recent-posts-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
}
.categories-list li:last-child,
.recent-posts-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.categories-list a,
.recent-posts-list a {
    color: var(--dark-color);
}
.categories-list a {
    display: flex;
    justify-content: space-between;
}
.categories-list span {
    background: #e0e0e0;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: .8rem;
}
.about-section-padding {
    padding: 80px 0;
}
.about-layout {
    display: flex;
    align-items: center;
    gap: 50px;
}
.about-image {
    flex: 1;
}
.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.about-content {
    flex: 1.2;
}
.about-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.mission-card {
    background-color: var(--white-color);
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
}
.mission-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
.mission-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.team-card {
    text-align: center;
    background: var(--light-gray-color);
    padding: 30px;
    border-radius: 10px;
}
.team-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 5px solid var(--white-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
}
.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.team-info h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}
.team-title {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
    font-family: var(--heading-font);
}
.team-description {
    font-size: .9rem;
}

/* ===============================================
   9. UTILITY & MISC (Scroll-to-top, etc.)
   =============================================== */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    z-index: 100;
}
#scrollToTopBtn:hover {
    background-color: var(--secondary-color);
}

/* ===============================================
   10. RESPONSIVE DESIGN (Media Queries)
   =============================================== */
@media (max-width:992px) {
    h1 {
        font-size: 2.5rem;
    }
    .about-layout,
    .contact-content,
    .featured-post-card,
    .hero h1 {
        flex-direction: column;
        font-size: 2.5rem;
    }
    .about-container {
        flex-direction: column;
    }
    .contact-content {
        padding: 30px;
    }
    .featured-post-card {
        text-align: center;
    }
    .featured-post-content .post-meta {
        justify-content: center;
    }
    .service-item,
    .service-item:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }
    .service-image-col {
        margin-bottom: 30px;
    }
    .service-feature-list li {
        justify-content: center;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .blog-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width:768px) {
    section {
        padding: 60px 0;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .section-header h2 {
        font-size: 2rem;
    }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--white-color);
        flex-direction: column;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    }
    .nav-menu.active {
        display: flex;
    }
    .nav-menu ul {
        flex-direction: column;
        gap: 0;
    }
    .nav-menu ul li {
        border-bottom: 1px solid #f0f0f0;
    }
    .nav-menu ul li a {
        display: block;
        padding: 15px 0;
    }
    .hamburger-menu {
        display: flex;
    }
    .page-header h1 {
        font-size: 2.5rem;
    }
    .service-text-col h3 {
        font-size: 1.8rem;
    }
    .featured-post-content h2 {
        font-size: 1.8rem;
    }
    .onboarding-form-container {
        padding: 20px;
    }
    .form-fieldset {
        padding: 20px;
    }
}