:root {
            --primary-text: #ffffff;
            --secondary-text: #e0e0e0;
            --background-start: #1f262e;
            --background-end: #0f1216;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.2);
            --hover-bg: rgba(255, 255, 255, 0.1);
        }

/* --- RESET & BASE --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide scrollbar for Chrome, Safari and Opera */
.left-col-wrapper::-webkit-scrollbar { display: none; }
/* Hide scrollbar for IE, Edge and Firefox */
.left-col-wrapper { -ms-overflow-style: none;  scrollbar-width: none; }

body {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

p { 
    margin-bottom: 24px; 
    font-size: clamp(1rem, 0.4rem + 0.7vw, 1.5rem); 
    line-height: 1.6; 
    color: #e0e0e0; 
}

/* Headings: Scaled using the same fluid logic
*/
h1 {
    font-size: clamp(2.5rem, 1.3636rem + 4.4416vw, 5rem); /* 40px -> 80px */
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 400;
    margin-bottom: 0.5em;
}

h2 { 
    font-size: clamp(1.8rem, 1.1636rem + 2.4858vw, 3.2rem); /* 28.8px -> 51.2px */
    line-height: 1.2; 
    letter-spacing: -1px; 
    margin-top: 60px; 
    margin-bottom: 30px; 
    font-weight: 400; 
}

h3 {
    font-size: clamp(1.4rem, 1.0364rem + 1.4205vw, 2.2rem);
    font-weight: 400; 
}

h4 { font-size: clamp(1.2rem, 1.0182rem + 0.7102vw, 1.6rem); }
h5 { font-size: clamp(1.1rem, 0.9864rem + 0.4432vw, 1.35rem); }
h6 { font-size: clamp(1rem, 0.9545rem + 0.1776vw, 1.1rem); }

/* --- ANIMATED TITLE OVERRIDE --- */
/* Ensures the fixed H1 still respects the fluid sizing */
#anim-title {
    position: fixed; 
    z-index: 100;
    font-weight: 500;
    color: #fff;
    top: 60px;
    left: 60px;
    will-change: opacity, font-size, top, left;
    font-size: clamp(2.5rem, 1.3636rem + 4.4416vw, 4.5rem); 
}


a { color: inherit; text-decoration: none; }

code {
    background-color: #222;
    color: #ccc;
    padding: 2px 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    border-radius: 2px;
    border: 1px solid #444;
}

/* --- MAIN LAYOUT --- */
.page-wrapper {
    width: 100%;
    padding: 60px; 

    margin: 20px 0 0 0;
}

/* --- ANIMATED TITLE --- */
#anim-title {
    position: relative; 
    z-index: 100;
    font-size: 72px; 
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 500;
    color: #fff;
    top: 0px;
    left: 0px;
    will-change: opacity, font-size, top, left;
}

/* --- SPACER FOR CONTENT --- */


/* --- 3-COLUMN GRID --- */
.split-layout {
    display: flex;
    width: 100%;
    gap: 60px; 
    align-items: flex-start;
    padding-top: 40px;
    position: relative;
}

/* 1. LEFT COLUMN (Metadata + Services + CTA) */
.left-col-wrapper {
    flex: 0 0 280px; 
    position: sticky;
    top: 60px; 
    height: calc(100vh - 120px); 
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    padding-bottom: 20px; 
}

.meta-container {
    margin-top: 0px; 
    border-top: 1px solid #333; 
    padding-top: 20px;
    margin-bottom: 0px;
    flex-shrink: 0;
}

.meta-group {
    display: flex; justify-content: space-between;
    margin-bottom: 15px;
    border-bottom: 1px solid #222; 
    padding-bottom: 5px;
    font-size: 14px; text-transform: uppercase;
}
.meta-label { color: #888; }
.meta-value { font-weight: 400; color: #fff; }

/* --- SERVICES SECTION --- */
.services-wrapper {
    display: block; 
    flex-shrink: 0;
}

.services-header {
    font-size: 14px; color: #666; font-weight: 500; 
    margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 40px;
}

.service-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid #333;
    border-radius: 50px;
    font-size: 12px;
    color: #ccc;
    background: #000;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

.service-pill:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* --- CTA BUTTON (Glassmorphism) --- */
.cta-wrapper {
    margin-top: auto; 
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.schedule-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    
    /* Glassmorphism Styles */
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(16px);            
    -webkit-backdrop-filter: blur(16px);    
    border: 1px solid rgba(255, 255, 255, 0.1); 
    
    color: #ffffff !important;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.schedule-btn:hover {
    background: rgba(255, 255, 255, 0.15); 
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.btn-text {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-icon-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 4px;
}

.btn-icon-arrow svg {
    fill: #fff;
    width: 100%;
    height: 100%;
}

/* 2. ARTICLE (Center) */
.article-container {
    flex: 1; 
    border-top: 1px solid #333;
    padding-top: 20px; 
    margin-top: 0px; 
    min-width: 0; 
}

.article-label {
    font-size: 14px; color: #666; font-weight: 500; 
    margin-bottom: 20px; display: block; text-transform: uppercase;
}



/* 3. RELATED (Right) */
.related-container {
    display: none; 
    flex: 0 0 20%;
    position: sticky; top: 120px; 
    border-top: 1px solid #333;
    margin-top: 0px;
    padding-top: 20px;
}

.related-header { font-size: 14px; color: #666; font-weight: 500; margin-bottom: 20px; text-transform: uppercase; }
.related-post-card { margin-bottom: 30px; display: block; text-decoration: none; }
.related-date { font-size: 14px; color: #888; margin-bottom: 5px; display: block; }
.related-title { font-size: 1.1rem; font-weight: 500; line-height: 1.2; color: #fff; transition: color 0.2s;}
.related-post-card:hover .related-title { color: #aaa; }

/* --- RESPONSIVE BREAKPOINTS --- */

/* 1600px+ (Large Desktop) */
@media (min-width: 1600px) {
    .related-container { display: block; }
}

/* 1366px (Laptop) */
@media (max-width: 1366px) {
    .page-wrapper { padding: 40px; }
    #anim-title { top: 40px; left: 0px; font-size: 64px; }
    .left-col-wrapper { top: 40px; height: calc(100vh - 80px); flex: 0 0 250px; }
    .split-layout { gap: 40px; }
}

/* 1024px (Tablet Landscape) */
@media (max-width: 1024px) {
    .page-wrapper { padding: 30px; }
    #anim-title { top: 60px; left: 0px; font-size: 56px; }
    
    .split-layout { gap: 30px; }
    .left-col-wrapper { 
        top: 30px; 
        height: calc(100vh - 60px); 
        flex: 0 0 220px; 
    }

    .services-grid { grid-template-columns: 1fr; } 
    .related-container { display: none; }
}

/* 768px (Tablet Portrait / Large Mobile) */
@media (max-width: 768px) {
    .page-wrapper { padding: 80px 15px 0px 15px; }
    
    #anim-title { 
        position: relative !important; 
        top: 0 !important; left: 0 !important; 
        width: 100% !important; 
        font-size: 24px !important; 
        opacity: 1 !important; 
        transform: none !important; 
        pointer-events: auto !important;
    }
    
    .content-spacer { display: none; }
    .split-layout { flex-direction: column; gap: 40px; }
    .services-wrapper { display: none; }
    .left-col-wrapper { 
        width: 100%; 
        position: relative; 
        top: 0; 
        height: auto; 
        flex: none;
        border-bottom: 1px solid #222;
        padding-bottom: 40px;
        overflow-y: visible;
    }
    
    .meta-container { margin-top: 0; border-top: none; }
    .article-container { margin-top: 0; border-top: none; }

    .services-grid { grid-template-columns: 1fr 1fr; } 
    .cta-wrapper { margin-top: 20px; }
}

/* 480px (Mobile) */
@media (max-width: 480px) {
    #anim-title { font-size: 30px !important; }
    p { font-size: 1.1rem; }
    .services-grid { grid-template-columns: 1fr; }
}


/* related post */
.main-header {
  position: fixed;
  top: 0;
  right: 0.5%;
  width: 20.5%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35px 30px;
  height: 40px;
  z-index: 1001;
  border-radius: 15px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

/* LOGO IMAGE STYLES */
.logo img {
  display: block;
  width: 150px; /* Default desktop size */
  height: auto;
  cursor: pointer;
  filter: brightness(0) invert(1); /* Makes the logo WHITE if it's black/colored */
}

/* Hamburger Menu */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px; 
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001; 
}

.hamburger-menu .bar,
.bar2 {
  display: block;
  width: 100%; 
  height: 2px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.hamburger-menu.open .bar { transform: translateY(4.5px) rotate(45deg); }
.hamburger-menu.open .bar2 { transform: translateY(-4.5px) rotate(-45deg); }

/* --- NAVIGATION MENU --- */
.side-nav {
  position: fixed;
  top: 110px;
  right: 0.5%;
  height: 0; 
  width: 20.5%;
  border: 1px solid transparent;
  border-radius: 15px; 
  z-index: 999; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.side-nav.open {
  height: 50vh; 
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  padding-bottom: 20px;
}

.side-nav-content { padding: 20px 0 20px 30px; }
.side-nav ul { list-style: none; padding: 0; margin: 0; }
.side-nav ul li a {
  display: block;
  color: var(--secondary-text);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 10px 0;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.side-nav ul li a:hover { color: var(--primary-text); padding-left: 10px; }

.social-icons { display: flex; gap: 25px; padding: 0 30px; }
.social-icons a { color: var(--secondary-text); font-size: 1.5rem; transition: 0.3s; }
.social-icons a:hover { color: var(--primary-text); transform: scale(1.1); }

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1024px) {
  .info-widget { left: 20px; top: 20px;}
  .info-widget {
    border: none;
    background: transparent;
    box-shadow: none; /* Optional: Remove shadow if it looks weird without bg */
    backdrop-filter: none; /* Optional: Removes the blur effect */
    -webkit-backdrop-filter: none;
  }
  .main-header { width: 30%; right: 20px; top: 0; margin-top: 20px; padding: 32px 20px; }
  .side-nav { width: 30%; right: 20px; }
  .side-nav.open { width: 30%; }
}

@media (max-width: 768px) {
  .info-widget { left: 15px; top: 15px; padding: 10px 15px; gap: 10px; display: none;}
  .info-text .location-display { font-size: 0.7rem; }
  .time-display { font-size: 0.95rem; }
  .weather-icon { width: 24px; height: 24px; }

  .main-header {
    width: auto; min-width: 240px; right: 15px; left: 15px;
    top: 0; margin-top: 15px; padding: 25px 20px;
  }

  .main-header {
    border: none;
  }
  
  /* Adjusted Logo size for Mobile */
  .logo img { width: 120px; }
  
  .side-nav { top: 90px; right: 15px; width: 45%; }
  .side-nav.open { width: 50%; height: 55%; }
}

@media (max-width: 480px) {
  .info-widget {  left: 10px; top: 15px; padding: 8px 12px; }
  .info-text .location-display { display: none; } 
  
    .main-header {
    width: 92vw;
    min-width: 200px;
    right: 40px;
    margin-top: 15px;
    padding: 20.5px 15px;
  }
  
  /* Adjusted Logo size for Small Mobile */
  .logo img { width: 100px; }
  
  .side-nav { top: 80px; right: 10px; width: 150px; }
  .side-nav.open { width: 95%;  }
}

@media (max-width: 320px) {
  .info-widget {  left: 10px; top: 15px; padding: 8px 12px; }
  .info-text .location-display { display: none; } 
  
  .main-header { right: 10px; margin-top: 15px; padding: 8px 15px; }
  
  /* Adjusted Logo size for Small Mobile */
  .logo img { width: 100px; }
  
  .side-nav { top: 80px; right: 10px; width: 150px; }
  .side-nav.open { width: 200px; right: 10px; }
}

.k97-social-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            transition: transform 0.2s ease;
        }
        
        .k97-social-icon:hover {
            transform: scale(1.1);
        }


/* Free Consultation */

/* --- IN-ARTICLE CTA BANNER (Updated) --- */
.kx-cta-banner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Fixes width calculation */
    margin: 60px 0;
    padding: 60px 40px; /* More vertical breathing room */
    
    /* Rounded Corners & Layout */
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Stack logo, text, button vertically */
    justify-content: center;
    align-items: flex-start; /* Align everything left */
    
    /* Background Configuration */
    background: 
        linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(20, 5, 40, 0.7) 100%), 
        url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=2000'); /* Dummy Background Image */
        
    background-size: cover;
    background-position: center;
    
    /* Border & Shadow */
    border: 1px solid rgba(162, 44, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.kx-cta-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
}

/* Logo Styling */
.kx-cta-logo {
    display: block;
    height: 40px; /* Adjust based on your actual logo file */
    width: auto;
    margin-bottom: 24px;
    filter: brightness(0) invert(1); /* Ensures logo is white if it's black */
}

.kx-cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.kx-cta-text {
    font-size: 1.125rem;
    color: #e0d4fc;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 90%;
}

/* --- NEW BUTTON STYLE (Split Style) --- */
.kx-cta-button-split {
    display: inline-flex;
    align-items: stretch; /* Ensures divider is full height */
    text-decoration: none;
    background-color: #9228e6; /* The requested purple */
    color: #ffffff;
    border-radius: 4px; /* Slightly sharper corners like reference */
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(146, 40, 230, 0.3);
    
    /* Overflow Protection */
    max-width: 100%; 
    box-sizing: border-box;
}

.kx-cta-button-split:hover {
    background-color: #a64bf0;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(146, 40, 230, 0.5);
}

/* The Icon Box (Left Side) */
.kx-btn-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Fixed width for the icon box */
    background-color: rgba(0, 0, 0, 0.1); /* Slightly darker area */
    border-right: 1px solid rgba(255, 255, 255, 0.3); /* The Vertical Line */
    flex-shrink: 0; /* Prevents icon from squishing */
}

.kx-btn-icon-box svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    transition: transform 0.3s ease;
}

.kx-cta-button-split:hover .kx-btn-icon-box svg {
    transform: translate(2px, -2px);
}

/* The Text Label (Right Side) */
.kx-btn-label {
    padding: 16px 24px;
    font-weight: 400;
    font-size: 1rem;
    white-space: nowrap; /* Tries to keep text on one line */
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 600px) {
    .kx-cta-banner {
        padding: 40px 25px;
        align-items: flex-start;
        text-align: left;
    }

    .kx-cta-title {
        font-size: 1.75rem;
    }

    /* Button Overflow Fix for Mobile */
    .kx-cta-button-split {
        width: 100%; /* Full width button on mobile */
    }
    
    .kx-btn-label {
        width: 100%;
        text-align: center;
        white-space: normal; /* Allows text to wrap if screen is very small */
        padding: 14px 16px;
        font-size: 0.95rem;
    }
}

/* footer*/


  @property --k97-x {
            syntax: '<length>';
            inherits: false;
            initial-value: 0px;
        }
        @property --k97-y {
            syntax: '<length>';
            inherits: false;
            initial-value: 0px;
        }

       .k97-main-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0 60px;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: opacity 0.3s ease;
        }

        /* --- TOP CONTAINER --- */
        .k97-top-container {
            width: 100%;
            padding: 80px 0;
            box-sizing: border-box;
            background-color: #000;
            color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 3rem;
            z-index: 10;
            position: relative;
        }

        .k97-cta-section {
            flex: 1;
            min-width: 300px;
        }

        .k97-cta-section h2 {
            font-size: clamp(2.5rem, 5vw, 6rem);
            font-weight: 500;
            line-height: 1.1;
            margin: 0 0 2rem 0;
            letter-spacing: -0.02em;
        }

        /* --- SLIDE TO CONTACT STYLES --- */
        .k97-slider-container {
            position: relative;
            width: 280px; /* Default desktop width */
            height: 64px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            display: flex;
            align-items: center;
            padding: 4px;
            box-sizing: border-box;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
            cursor: pointer;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }

        .k97-slider-text {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 1rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            z-index: 1;
            transition: opacity 0.1s ease;
            letter-spacing: 0.5px;
            
            /* Shimmer */
            background: linear-gradient(to right, rgba(255,255,255,0.4) 0%, #fff 50%, rgba(255,255,255,0.4) 100%);
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: k97-shimmer 3s linear infinite;
        }

        @keyframes k97-shimmer {
            to { background-position: 200% center; }
        }

        .k97-slider-handle {
            width: 56px;
            height: 56px;
            background-color: #ffffff;
            border-radius: 50%;
            position: absolute;
            left: 4px;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            touch-action: none; 
        }

        .k97-slider-handle:active {
            cursor: grabbing;
            transform: scale(0.98);
        }

        .k97-slider-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        /* --- INFO SECTION --- */
        .k97-info-section {
            flex: 1;
            min-width: 250px;
            display: flex;
            align-self: flex-end;
            flex-direction: column;
            gap: 2rem;
            text-align: right;
            font-size: 1rem;
            color: #ccc;
        }

        .k97-info-group h3 {
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .k97-info-group p {
            margin: 0.5rem 0;
            line-height: 1.5;
        }

        .k97-social-links {
            display: flex;
            justify-content: flex-end;
            gap: 1.5rem;
            align-items: center;
            margin-top: 1rem;
        }

        .k97-social-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            transition: transform 0.2s ease;
        }
        
        .k97-social-icon:hover {
            transform: scale(1.1);
        }

        /* --- FOOTER --- */
        .k97-divider {
            width: 100%;
            height: 1px;
            background-color: #222;
            margin: 0 auto;
        }

        .k97-copyright-bar {
            width: 100%;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: 0.85rem;
        }

        .k97-footer-container {
            width: 98%;
            padding: 0rem; 
            background-color: #000000;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .k97-torch-text {
            font-size: clamp(2rem, 19vw, 40rem);
            font-weight: 500;
            width: 100%;
            text-align: center;
            margin: 0;
            line-height: 0.9;
            letter-spacing: -0.04em;
            text-transform: uppercase;
            cursor: default;
            user-select: none;
            color: transparent; 
            /* Using prefixed CSS variables */
            background-image: radial-gradient(
                circle 600px at var(--k97-x, 50%) var(--k97-y, 50%), 
                #E3E2DC 0%,        
                rgba(227, 226, 220, 0.3) 40%, 
                transparent 70%
            );
            background-clip: text;
            -webkit-background-clip: text;
            background-attachment: scroll; 
            -webkit-font-smoothing: antialiased;
            transition: --k97-x 1s ease-out, --k97-y 1s ease-out; 
            will-change: --k97-x, --k97-y;
        }
        
        .k97-torch-text::before {
            content: 'KENTAURX';
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            color: transparent;
            -webkit-text-stroke: 1px rgba(227, 226, 220, 0.05);
            z-index: -1;
        }

        @media (max-width: 1920px) {
    .k97-main-wrapper {
      padding: 20px 60px;
        /* Center the layout on huge screens */
    }
}

/* --- 1440px (Large Laptops) --- */
@media (max-width: 1440px) {
    .k97-main-wrapper{
        padding: 20px 60px; /* Reduce padding slightly */
    }

    .k97-cta-section h2 {
        /* Slightly reduce headline size */
        font-size: clamp(2.2rem, 4.5vw, 5rem);
    }
}

/* --- 1366px (Standard Laptops) --- */
@media (max-width: 1366px) {
    .k97-top-container {
        padding: 50px 0px;
        gap: 2rem;
    }

    .k97-info-section {
        /* Ensure font size is readable on laptop screens */
        font-size: 0.95rem;
    }

    .k97-torch-text {
        /* Adjust footer text scaling */
        font-size: 17vw;
    }

    .k97-footer-container {
            width: 100%;
            padding: 0rem; 
            background-color: #000000;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

    .k97-footer-container {
            padding-bottom: 0.5rem;
            margin: 0 -10px;
        }
    .k97-torch-text{
            font-size: 19vw;
            }

}

/* --- 1024px (Tablets / Small Laptops) --- 
   Major layout shift: Info section moves from right-aligned 
   to left-aligned or stacked. */
@media (max-width: 1024px) {
    .k97-top-container {
        padding: 2.5rem 0rem;
        flex-wrap: wrap; /* Ensure wrapping happens here */
    }

    .k97-main-wrapper{
        padding: 30px;
    }
    .k97-cta-section {
        /* Make CTA take full width if needed, or keep 50% depending on preference */
        min-width: 100%;
        margin-bottom: 2rem;
    }

    .k97-info-section {
        min-width: 100%;
        text-align: left; /* Switch from right-align to left */
        align-items: flex-end;
        
        /* Optional: Arrange Contact and Socials side-by-side on tablet */
        flex-direction: row; 
        justify-content: space-between;
    }

    .k97-social-links {
        justify-content: flex-start; /* Align social icons to left */
    }

    .k97-slider-container {
        /* Make the slider slightly wider for easier touch on tablets */
        width: 320px; 
    }
     .k97-footer-container {
             padding-bottom: 0.5rem;
            margin: 0 -10px;
          }
            .k97-torch-text{
                font-size: 20vw;
            }
}


        /* --- MOBILE RESPONSIVE TWEAKS --- */
        @media (max-width: 768px) {
            .k97-top-container {
                padding: 0; /* Slightly less padding */
                flex-direction: column;
                gap: 2rem;
            }

            .k97-main-wrapper {
                padding: 60px 15px 10px 15px;
              }

            .k97-info-section {
                text-align: left;
                align-items: flex-start;
                padding-bottom: 40px;
                width: 100%;
            }

            .k97-social-links {
                justify-content: flex-start;
            }

            /* --- FIX 1: Slider Full Width on Mobile --- */
            .k97-cta-section {
                width: 100%;
            }
            .k97-slider-container {
                width: 100%; /* Force full width */
            }

            /* --- FIX 2: Copyright Bar Left/Right on Mobile --- */
            .k97-copyright-bar {
                padding: 20px 0;
                flex-direction: row; /* Force side-by-side */
                justify-content: space-between; /* Spread them out */
                text-align: left; /* Remove center align */
                gap: 0;
                font-size: 0.75rem; /* Slightly smaller to fit on small screens */
            }
            .k97-footer-container {
             padding-bottom: 0.5rem;
            margin: 0 -10px;
          }
            .k97-torch-text{
                font-size: 20vw;
            }
        
        }

/* --- 480px (Mobile Devices) --- 
   Full stack layout, maximized touch targets. */
@media (max-width: 480px) {
    .k97-top-container {
        
        flex-direction: column;
        gap: 2.5rem;
    }

    .k97-main-wrapper {
        padding: 60px 15px 05px 15px;
    }

    .k97-cta-section h2 {
        font-size: 2.2rem; /* readable fixed size */
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    /* Force Slider to full width of screen */
    .k97-slider-container {
        width: 100%; 
    }

    /* Stack the info section vertically again */
    .k97-info-section {
        flex-direction: column;
        gap: 2rem;
    }

    .k97-copyright-bar {
        padding: 20px 0  ;
        flex-direction: column; /* Stack copyright text */
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.75rem;
    }

    .k97-footer-container {
        padding-bottom: 0.5rem;
        margin: 0 -5px;
    }

    .k97-torch-text {
        /* Prevent text from disappearing or being too small */
        font-size: 19vw; 
    }
}

.featured-hero {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden; /* Clips the image corners */
  
  /* Flexbox to center the main title */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;

}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image fills the box without stretching */
  z-index: 1;
  filter: brightness(0.2); /* Darkens image slightly so text is readable */
}

/* Vertical Image */
.seminar-image-vertical {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 20px auto;
}

/* Horizontal Image */
.seminar-image-horizontal {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 20px auto;
}