/*
Theme Name: Graphic Universe
Author: Your Name
Description: Custom split-screen WordPress portfolio theme for designers.
Version: 1.0
*/

/* ==========================================================================
   1. RESET & BASE STYLES (Inter Font එකත් සමඟ)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* මුළු පේජ් එකම Scroll වීම සම්පූර්ණයෙන්ම නවත්වයි */
    font-family: 'Inter', sans-serif; /* Google Inter Font එක මුළු සයිට් එකටම */
    background-color: #ffffff;
    color: #111111;
}

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

CSS
/* ==========================================================================
   2. MAIN LAYOUT (SCROLLABLE RIGHT CONTENT, STICKY SIDEBAR)
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* මුළු වෙබ් පිටුවම එක තැන ලොක් කර තබයි */
    font-family: 'Inter', sans-serif;
    background-color: #f6f6f6;
}

/* WordPress Admin Bar එක ඇති විට */
body.admin-bar .site-container {
    height: calc(100vh - 32px);
    padding: 0 280px 40px 280px;
}

.site-container {
    display: flex !important;
    flex-direction: row; 
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0 280px 40px 280px; 
    gap: 10px !important;
    box-sizing: border-box;
}

/* වම් පැත්තේ ස්ථාවරව පවතින Sidebar එක (මෙය කිසිවිටක ස්ක්‍රෝල් නොවේ) */
.sidebar {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: none;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* පරතරය අඩු කිරීමට */
    gap: 20px; /* ඔබට අවශ්‍ය ඕනෑම අගයකට මෙය වෙනස් කර පරතරය අඩුවෙන් තබා ගත හැක (උදා: 10px, 20px) */
    flex-shrink: 0;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.01);
}

/* 🎯 දකුණු පැත්තේ Content Area එක විතරක් ස්ක්‍රෝල් වීමට සලස්වන කෝඩ් එක */
.main-content {
    flex: 1;
    height: 100%;
    overflow-y: auto !important; /* 👈 මෙතනින් දකුණු පැත්තට විතරක් Scrollබෝ එක දුන්නා */
    overflow-x: hidden;
    scroll-behavior: smooth; /* සිනිඳුවට ස්ක්‍රෝල් වීම සඳහා */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: none;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    position: relative;
    padding: 0 !important; /* Slider එක දාරවලටම වැදීමට පැඩින් 0 වේ */
}

/* ==========================================================================
   3. LUXURY LOGO BOX & HORIZONTAL MINI NAV (SIMPLE LETTERS & GRAY TONE)
   ========================================================================== */
.logo-area {
    width: 100%;
    text-align: center;
    background-color: transparent;
}

/* ලෝගෝ එකට යටින් එන තිරස් මෙනု එක */
.mini-horizontal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 15px 0 15px;
}

.mini-nav-link {
    font-size: 11px;
    font-weight: 600;
    text-transform: none; /* 🎯 CAPITAL අයින් කර සරල අකුරු (Simple letters) කලා */
    letter-spacing: 0.5px;
    color: #8e9aa8; /* 🎯 ඔයා ඉල්ලපු ලස්සන සියුම් Gray Tone එක */
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 🎯 Click කරාම හෝ Hover වුණාම තද කළු පාට වීමට */
.mini-nav-link:hover,
.mini-nav-link:active,
.mini-nav-link.active {
    color: #0a0a0a; /* True Black */
}

/* ==========================================================================
   4. HAIRLINE, TAG & LIGHT SERVICE BOXES (EDGE-TO-EDGE & NO ROUND CORNERS)
   ========================================================================== */
/* 02. සියුම් තිරස් ඉර (Hairline) */
.sidebar-hairline {
    width: 100%;
    height: 1px;
    background-color: #e2e8f0;
    margin: 10px 10px;
}

.designer-tag {
    font-size: 13px;
    font-weight: 900; /* ඔයාගේ කැමැත්ත පරිදි 800 තබා ගන්න */
    color: #414141;
    text-transform: uppercase;
    display: block;
    text-align: center;
    margin-bottom: 16px;
	margin-top: 16px;
    
    /* 🎯 අලුත් වෙනස්කම් */
    line-height: 1.4;       /* පේළි දෙක අතර පරතරය තීරණය කරයි */
    white-space: normal;    /* 👈 මේක අනිවාර්යයෙන්ම normal කරන්න, එතකොට තමයි <br> වැඩ කරන්නේ */
    
    /* ඇනිමේෂන් කොටස කලින් විදිහටම තියන්න */
    opacity: 0;
    transform: scaleX(0.9);
    animation: luxuryReveal 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.4s;
}

/* ඇනිමේෂන් එක කලින් විදිහටම තියන්න, ඒකේ කිසිම වෙනසක් ඕනේ නැහැ */
@keyframes luxuryReveal {
    0% {
        opacity: 0;
        letter-spacing: -3px; 
        transform: scaleX(0.9);
    }
    30% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        letter-spacing: 4px; 
        transform: scaleX(1);
    }
}

/* 04. Light Colour Boxes Container */
.services-boxes-container {
    display: flex;
    flex-direction: column;
    gap: 0; 
    padding: 0; /* 🎯 පැඩින් 0 කලා! දැන් බොක්ස් ටික කොලම් එකේ දාරයටම (Edge) දිග හැරෙනවා */
}

/* මෙනු වෙනුවට එන ලයිට් කලර් බොක්ස් */
.service-box {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0; 
    border-bottom: 1px solid #e2e8f0; 
    border-left: none; /* 🎯 දෙපැත්තේ බෝඩර් අයින් කලා සයිඩ්බාර් දාරයටම මුසු වෙන්න */
    border-right: none;
    margin-top: -1px; 
    padding: 10px 12px; /* 🎯 උස තවත් චූට්ටක් අඩු කලා */
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    text-transform: none; /* 🎯 CAPITAL අයින් කර සරල අකුරු (Simple letters) කලා */
    letter-spacing: 0.5px;
    border-radius: 0 !important; /* 🎯 Corner round කිරීම සම්පූර්ණයෙන්ම අයින් කලා */
    transition: all 0.3s ease;
}

/* Hover ස්ටයිල් එක */
.service-box:hover {
    background-color: #0a0a0a;
    color: #ffffff;
    border-top-color: #0a0a0a;
    border-bottom-color: #0a0a0a;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   5. COMMON SECTION HEADERS (SPACING ADJUSTMENT)
   ========================================================================== */
.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px !important; /* 🎯 ABOUT ME එකෙන් පස්සේ පොඩි Space එකක් (25px) ඉතුරු කලා */
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 15px;
}
.sidebar-top-group {
    width: 100%;
}

.sidebar-bottom-group {
    width: 100%;
    margin-top: 0px; /* බටන් එක සහ ෆුටර් එක හැමවිටම පල්ලෙහාට තල්ලු කර තබයි */
}

/* 05. Hire Me Button */
.hire-me-area {
    width: 100%;
    padding: 0 !important;
}

.hire-me-btn {
    display: block;
    background-color: #0a0a0a;
    color: #ffffff;
    border: none;
    border-top: 1px solid #d4af37;
    text-align: center;
    padding: 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
    width: 100%;
}

.hire-me-btn:hover {
    background-color: #d4af37;
    color: #0a0a0a;
}

/* 06. Copyright Footer */
.sidebar-footer {
    padding: 2px 0px;
    text-align: center;
    background-color: #ffffff;
    font-size: 11px; /* මෙතන අගය ඔයාට ඕන විදිහට අඩු වැඩි කරන්න (උදා: 9px, 10px) */
    line-height: 1.4; /* පේළි දෙකක් අතර පරතරය */
}

.sidebar-footer { 
    margin-top: 1px !important; /* මෙතන 15px වෙනුවට 10px හෝ 5px දැමීමෙන් තව උඩට ගත හැක */
}


/* ==========================================================================
   6. CINEMATIC LUXURY SLIDER & CONTENT SCROLL SETTINGS
   ========================================================================== */
.home-hero-section.luxury-matrix-slider {
    position: relative !important; /* 🎯 Absolute වෙනුවට Relative කලා ඊළඟ සෙක්ෂන්ස් යටින් පෙළගැසෙන්න */
    width: 100% !important;
    height: calc(100vh - 40px) !important; /* 🎯 පළමු ස්ක්‍රීන් එක විතරක් සම්පූර්ණයෙන්ම වසා ගනී */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: #050505;
}

body.admin-bar .home-hero-section.luxury-matrix-slider {
    height: calc(100vh - 72px) !important;
}

/* 🎯 සෙක්ෂන්ස් අතර අනවශ්‍ය ලොකු හිස් ඉඩ (Space Area) අඩු කිරීමේ සැකසුම */
.main-content section:not(.home-hero-section) {
    min-height: auto; /* බලහත්කාරයෙන් සෙක්ෂන් එක දිගු කිරීම නතර කලා */
    padding: 50px 50px; /* උඩ සහ යට තිබ්බ 90px හිස් ඉඩ 50px දක්වා අඩු කලා */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* මැදට තෙරපෙන්නේ නැතිව උඩ ඉඳන් ලස්සනට ගලාගෙන යන්න සෙට් කලා */
    border-bottom: 1px solid #f1f5f9;
    box-sizing: border-box;
}

/* WordPress Admin Bar එක ඇති විට පෑඩින් එක ගැළපීම */
body.admin-bar .main-content section:not(.home-hero-section) {
    min-height: auto;
}

/* --- SLIDES BASE STYLING --- */
.matrix-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    transform: scale(1);
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transition: transform 0s, opacity 0s, clip-path 0s, filter 0s;
}

.matrix-slide.active {
    opacity: 1;
    z-index: 2;
    transform: scale(1.05);
    transition: transform 5s linear, opacity 1.2s ease;
}

/* EFFECT 1: CINEMATIC ZOOM & DISSOLVE */
.effect-zoom.exiting {
    opacity: 0;
    transform: scale(1.12);
    filter: blur(6px);
    z-index: 3;
    transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* EFFECT 2: SLEEK EDITORIAL WIPE */
.effect-wipe.exiting {
    clip-path: inset(0 0 0 100%);
    transform: scale(1.06); 
    z-index: 3;
    transition: clip-path 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* EFFECT 3: MINIMALIST PARALLAX LIFT */
.effect-lift.exiting {
    opacity: 0;
    transform: translateY(-40px) scale(1.06);
    z-index: 3;
    transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ==========================================================================
   LOGO IMAGE OPTIMIZATION (ලෝගෝ ඉමේජ් එක බොක්ස් එකට සෙට් කිරීම)
   ========================================================================== */
/* ලෝගෝ එකේ ප්‍රමාණය හරියටම පාලනය කිරීම */
.logo-box {
    background-color: #000000;
    width: 218px; /* ලෝගෝ බොක්ස් එකේ ප්‍රමාණය */
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}

/* වැදගත්ම කොටස: ලෝගෝ එක බොක්ස් එකට වඩා ලොකු වෙන්න දෙන්නේ නැහැ */
.site-logo {
    width: 150px !important; /* මෙතන 150px කරලා බලන්න, අවශ්‍ය නම් අඩු වැඩි කරන්න */
    height: auto !important;
    max-width: 90% !important; /* බොක්ස් එකෙන් එළියට පනින්නේ නැහැ */
    display: block;
}

/* Hover කරද්දී ලෝගෝ ඉමේජ් එක සියුම්ව විශාල වීමේ Luxury ඇනිමේෂන් එක */
.logo-box:hover img {
    transform: scale(1.06);
}

/* ==========================================================================
   7. LUXURY ABOUT ME & PROGRESS BARS & TIMELINE STYLING (REFINED)
   ========================================================================== */
/* 2 Column Top Grid Layout */
.about-top-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    margin-bottom: 60px;
    align-items: start;
}

.about-column-heading {
    font-size: 18px !important; /* 🎯 WHO AM I සහ EXPERT IN අකුරු ලොකු කලා */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a0a;
    margin: 0 0 10px 0 !important; /* 🎯 මාතෘකාවට පස්සේ තියෙන හිස් ඉඩ ගොඩක් අඩු කලා */
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.about-bio-text {
    font-size: 14px;
    line-height: 1.75;
    color: #475569;
    margin: 0;
}

/* Premium CV Button Style */
.cv-btn-container {
    margin-top: 35px;
}

.luxury-cv-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #0a0a0a;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-cv-button:hover {
    background-color: #d4af37;
    color: #0a0a0a;
    transform: translateY(-2px);
}

/* Software Logos Styling */
.software-logos-container {
    display: flex;
    gap: 25px;
    align-items: center;
    transition: opacity 0.3s ease;
}

/* Logos වලට hover කළාම වර්ණවත් වෙන්න අවශ්‍ය නම් මේ ටික දාන්න */
.software-logos-container:hover {
    opacity: 1;
    filter: grayscale(0);
}

.software-logos-container img {
    height: 25px;
    object-fit: contain;
}

/* ලෝගෝ එක උඩ මවුස් එක තිබ්බම පොඩ්ඩක් Glow වීම */
.site-logo:hover {
    transform: scale(1.05); /* පොඩ්ඩක් ලොකු වෙනවා */
    opacity: 0.9;
}

/* --- CUTTING-EDGE EXPERIENCES TIMELINE --- */
.experience-showcase-area {
    border-top: 1px dashed #e2e8f0;
    padding-top: 40px;
}

/* 1. Timeline අයිතමය Flex එකක් විදිහට හදමු (Text එක full වෙන්න) */
.premium-timeline-item {
    display: flex; /* මේකෙන් තමයි වම් පැත්ත සහ දකුණු පැත්ත බෙදන්නේ */
    align-items: flex-start;
    gap: 30px; /* වම් පැත්තේ දින සහ දකුණු පැත්තේ විස්තර අතර පරතරය */
    padding-bottom: 40px;
    position: relative;
}

/* 2. වම් පැත්තේ දින (Year) සඳහා Fixed width එකක් දෙමු */
.tl-time-side {
    flex: 0 0 120px; /* දින ටික අහකට නොගිහින් එකම පේළියක තියෙන්න */
    font-weight: 700;
    color: #d4af37; /* Gold color */
    padding-top: 5px;
}

/* 3. දකුණු පැත්තේ විස්තරයට ඉතිරි ඔක්කොම ඉඩ දෙමු */
.tl-content-side {
    flex: 1; /* මේකෙන් තමයි මුළු කොලම් එකම පිරෙන්නේ */
    width: 100%;
}

/* 4. අකුරු වල අගය තවත් වැඩි කරමු (Luxury Look) */
.tl-content-side h4 {
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.tl-content-side h5 {
    color: #64748b; /* මදක් ලා පාට කිරීම */
    margin-bottom: 10px;
}

.tl-time-side {
    font-size: 13.5px !important; /* 🎯 Gold Colour Date එක ටිකක් ලොකු කලා */
    font-weight: 800 !important; /* 🎯 Date එක හොඳට Bold කලා */
    color: #d4af37;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.tl-content-side h4 {
    font-size: 14px;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 5px 0;
}

/* 🎯 (COMMUNICATION EXECUTIVE) වගේ Gray අකුරු තදින් පෙනෙන්න Bold කිරීම */
.tl-content-side h4 span {
    font-weight: 700 !important; /* 🎯 පැහැදිලිව පෙනෙන්න Bold කලා */
    font-size: 12px;
    color: #64748b;
}

.tl-content-side h5 {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 6px 0;
}

.tl-content-side p {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Hidden Group Accordion */
.timeline-hidden-group {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.5s ease-in-out;
}

.timeline-hidden-group.show {
    max-height: 1400px;
    opacity: 1;
}

.toggle-btn-wrapper {
    text-align: center;
    margin-top: 30px;
}

.luxury-toggle-button {
    background: none;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 12px 30px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.luxury-toggle-button:hover {
    border-color: #0a0a0a;
    color: #0a0a0a;
    background-color: #fafafa;
}

/* ==========================================================================
   5. COMMON SECTION HEADERS (SPACING ADJUSTMENT)
   ========================================================================== */
.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px !important; 
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 15px;
}

/* ==========================================================================
   7. LUXURY ABOUT ME & PROGRESS BARS & TIMELINE STYLING
   ========================================================================== */
.about-top-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    margin-bottom: 60px;
    align-items: start;
}

.about-column-heading {
    font-size: 18px !important; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a0a;
    margin: 0 0 10px 0 !important; 
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.about-bio-text {
    font-size: 14px;
    line-height: 1.75;
    color: #475569;
    margin: 0;
}

.cv-btn-container {
    margin-top: 35px;
}

.luxury-cv-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #0a0a0a;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.luxury-cv-button:hover {
    background-color: #d4af37;
    color: #0a0a0a;
    transform: translateY(-2px);
}


.tl-time-side {
    font-size: 13.5px !important; 
    font-weight: 800 !important; 
    color: #d4af37;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.tl-content-side h4 {
    font-size: 14px;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 5px 0;
}

.tl-content-side h4 span {
    font-weight: 700 !important; 
    font-size: 12px;
    color: #64748b;
}

.tl-content-side h5 {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 6px 0;
}

.tl-content-side p {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.timeline-hidden-group {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out;
}

.timeline-hidden-group.show {
    max-height: 1400px;
    opacity: 1;
}

.toggle-btn-wrapper {
    text-align: center;
    margin-top: 30px;
}

.luxury-toggle-button {
    background: none;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 12px 30px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.luxury-toggle-button:hover {
    border-color: #0a0a0a;
    color: #0a0a0a;
    background-color: #fafafa;
}

/* ==========================================================================
   8. DYNAMIC PORTFOLIO TRANSITIONS & LAYOUTS (GRID VS EDITORIAL)
   ========================================================================== */
.portfolio-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(40px);
}

.portfolio-tab-content.active {
    display: block;
    animation: portfolioSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes portfolioSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-luxury-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

.portfolio-luxury-grid .grid-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f8fafc;
}

.portfolio-luxury-grid .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-luxury-grid .grid-item:hover img {
    transform: scale(1.05);
}

.portfolio-editorial-stack {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 850px;
    margin: 0 auto;
}

.editorial-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.editorial-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.editorial-caption {
    text-align: center;
    margin-top: 20px;
    max-width: 650px;
}

.editorial-caption h4 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.editorial-caption p {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.services-boxes-container .service-box.active {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* ==========================================================================
   9. REFINED PORTFOLIO DESIGN (MATCHED HEADINGS & COMPACT GRID)
   ========================================================================== */
/* MY PORTFOLIO මාතෘකාව WORK EXPERIENCE එකට සමාන කිරීම */
.portfolio-column-heading {
    font-size: 18px !important; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a0a;
    margin: 0 0 25px 0 !important; 
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
    width: 100%;
}

/* Grid එක සහ Button එක එකම ස්ක්‍රීන් එකක තබා ගැනීමට Grid එක Compact කිරීම */
.portfolio-luxury-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* පරතරය තරමක් අඩු කලා */
    width: 100%;
    max-width: 680px; /* 🎯 එකම ස්ක්‍රීන් එකක පෙනෙන්න Grid එකේ පළල සීමා කළා */
    margin: 0 auto;
}

/* Enter the My Graphic Universe බොත්තම VIEW ALL EXPERIENCE බොත්තම ලෙස නිමවීම */
.luxury-universe-button {
    display: inline-block;
    background: none;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 12px 30px;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.luxury-universe-button:hover {
    border-color: #0a0a0a;
    color: #0a0a0a;
    background-color: #fafafa;
}

/* ==========================================================================
   10. EDGE-TO-EDGE PORTFOLIO GRID (REMOVING ALL GAPS & MARGINS)
   ========================================================================== */

/* 🎯 පෝර්ට්ෆෝලියෝ සෙක්ෂන් එකේ දෙපැත්තේ තිබ්බ පෑඩින් (Side Padding) සම්පූර්ණයෙන්ම අයින් කිරීම */
#portfolio.home-portfolio-preview {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* "MY PORTFOLIO" මාතෘකාව විතරක් සයිට් එකේ අනිත් අකුරු එක්ක පෙළගැසෙන්න පැති පෑඩින් ලබාදීම */
.portfolio-title-wrapper {
    padding: 0 50px;
}

/* 🎯 Grid එකේ පොටෝ අතර ගැප් එක 0 කර, 680px සීමාව අයින් කර කෙළවරටම (Edge) ගැනීම */
.portfolio-luxury-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important; /* පින්තූර අතර කිසිම ඉඩක් නැති කළා */
    width: 100% !important;
    max-width: 100% !important; /* සම්පූර්ණ පළලටම දිග හැරීමට සීමාවන් ඉවත් කළා */
    margin: 0 !important;
}

/* පින්තූර යටින් එන නිරායාස baseline හිස් ඉඩ අත්හැරීම් සම්පූර්ණයෙන්ම නැති කිරීම */
.portfolio-luxury-grid .grid-item {
    padding: 0 !important;
    margin: 0 !important;
}

.portfolio-luxury-grid .grid-item img {
    display: block; /* Inline-block නිසා එන පොඩි හිස්තැන් නැති කරයි */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   11. PREMIUM HORIZONTAL PORTFOLIO GALLERY VIEWER (WHITE BG)
   ========================================================================== */
.luxury-gallery-viewer {
    background-color: #ffffff; /* 🎯 පසුබිම සම්පූර්ණයෙන්ම සුදු පැහැය */
    padding: 20px 50px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* Horizontal Cinematic Image Framework (16:9 Ratio) */
.gallery-main-display {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.gallery-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* 🎯 Horizontal පෙනුම ලබාදීම */
    overflow: hidden;
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
}

.gallery-large-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease-in-out;
    opacity: 1;
}

/* මැදින් සකස් කළ පිරිසිදු කැප්ෂන් ස්ටයිල් එක */
.gallery-main-meta {
    margin-top: 15px;
}

.gallery-img-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 5px 0;
    letter-spacing: 1px;
}

.gallery-img-caption {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* Filmstrip Thumbnail Layout */
.gallery-thumbnails-strip {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    max-width: 800px;
}

/* 🎯 සිලෙක්ට් නොකළ කොටු පොඩ්ඩක් Dark/Gray Tone එකකට හැරවීම */
.gallery-thumb-box {
    width: 60px;
    height: 60px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* මුලින්ම හැම එකක්ම මඳක් Dark/Dim Tone එකක පවතී */
    opacity: 0.4;
    filter: brightness(0.6) grayscale(20%);
}

.gallery-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 🎯 සිලෙක්ට් කරපු කොටුව විතරක් Crisp සහ ලස්සනට කැපී පෙනීම */
.gallery-thumb-box.active,
.gallery-thumb-box:hover {
    opacity: 1;
    filter: brightness(1) grayscale(0%);
    border-color: #0a0a0a;
}

/* ==========================================================================
   12. CAROUSEL THUMBNAILS EXTENSION (HORIZONTAL SLIDER WITH ARROWS)
   ========================================================================== */
.gallery-carousel-container {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 800px;
    justify-content: center;
    margin-top: 5px;
}

/* 🎯 කොටු 5ක උපරිම පළල පමණක් පෙන්වන පිරිසිදු කවුළුව (5 * 60px + 4 * 10px Gap = 340px) */
.thumb-scroll-window {
    width: 340px; 
    overflow: hidden; /* ඉතිරි කොටු ටික සඟවා තබයි */
    white-space: nowrap;
}

.gallery-thumbnails-strip {
    display: flex;
    gap: 10px;
    width: max-content;
}

/* ලිස්සන කවුළුව ඇතුලේ කොටු තෙරපීම වැලැක්වීම */
.gallery-thumb-box {
    flex-shrink: 0; 
}

/* 🎯 ඔයා ඇඳපු ඊතල දෙක පිරිසිදු Luxury විදිහට හැඩගැන්වීම */
.thumb-carousel-arrow {
    background: none;
    border: none;
    font-size: 32px;
    color: #475569;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
    user-select: none;
    transition: all 0.2s ease;
    font-family: serif;
}

.thumb-carousel-arrow:hover {
    color: #0a0a0a;
    transform: scale(1.2);
}

.thumb-carousel-arrow:active {
    transform: scale(0.9);
}

/* ==========================================================================
   13. PREMIUM LUXURY BLACK TESTIMONIAL TICKER MARQUEE (IMAGE_2A3246)
   ========================================================================== */
.luxury-black-block {
    background-color: #000000 !important; /* 🎯 මුළු සෙක්ෂන් එකම කළු බ්ලොක් එකක් කළා */
    padding: 60px 0 !important;
    overflow: hidden;
    width: 100%;
}

/* Infinity Marquee Track Layout */
.feedback-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    padding: 20px 0;
}

.feedback-marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: smoothMarqueeTicker 25s linear infinite; /* හිමින් සැරේ වමට චලනය වීම */
}

/* 🎯 මවුස් එක බොක්ස් එකක් උඩට ගෙනිච්චම ඇනිමේෂන් එක නතර වීම */
.feedback-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes smoothMarqueeTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 🪙 GRAY TESTIMONIAL CARD BASED ON IMAGE_2A3246.PNG */
.client-testimonial-card {
    background-color: #161819; /* 🎯 රූපයේ පරිදි අඳුරු Gray කලර් එක */
    border: 1px solid #222526;
    border-radius: 12px;
    width: 320px;
    min-width: 320px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.client-avatar img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #2d3134;
}

/* 🎯 GOLD STARS SYSTEM BASED ON USER PLAN */
.premium-star-rating {
    display: flex;
    gap: 3px;
}

.star-icon {
    font-size: 16px;
    color: #d4af37; /* Gold fill */
}

.star-icon.outline {
    color: #d4af37; /* Gold Outline */
}

.client-review-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #94a3b8; /* Grayish font */
    margin: 0 0 25px 0;
}

.client-meta-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-name {
    font-size: 14px;
    font-weight: 700; /* Bold Name */
    color: #ffffff;
}

.client-position {
    font-size: 12px;
    font-style: italic; /* Italic Position */
    color: #64748b;
}

/* කළු සෙක්ෂන් එක ඇතුලේ සුදු පැහැති බොත්තම */
.premium-white-btn {
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.premium-white-btn:hover {
    border-color: #ffffff !important;
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* 📋 TESTIMONIAL SUBMISSION FORM STYLING */
.luxury-review-form {
    max-width: 550px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.luxury-review-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.luxury-review-form label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.luxury-review-form input, .luxury-review-form textarea {
    padding: 12px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    outline: none;
}

/* Star selection inputs styles */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;
}
.star-rating-input input { display: none; }
.star-rating-input label { font-size: 26px; color: #cbd5e1; cursor: pointer; transition: color 0.2s; }
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label { color: #d4af37; }

/* ==========================================================================
   15. MINIMALIST LET'S TALK SECTION (2-COLUMN GRID)
   ========================================================================== */
.home-contact-section {
    background-color: #ffffff;
    padding: 60px 0;
    width: 100%;
    box-sizing: border-box;
}

/* Split Column Framework */
.contact-split-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* වම් පැත්තට වැඩි ඉඩකුත් දකුණු පැත්තට මඳ ඉඩකුත් වෙන් කිරීම */
    gap: 60px;
    padding: 20px 50px;
    max-width: 1200px;
}

/* 👈 LEFT FORM STYLING (MATCHED WITH IMAGE_28D1A7.PNG) */
.ssd-minimal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row-double {
    display: flex;
    gap: 20px;
}

.form-row-double .form-field-group {
    flex: 1;
}

.form-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field-group label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.ssd-minimal-form input,
.ssd-minimal-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1; /* Light grey border */
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background-color: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.ssd-minimal-form input:focus,
.ssd-minimal-form textarea:focus {
    border-color: #0f172a;
    outline: none;
}

/* Premium Black Submit Button */
.ssd-form-submit-btn {
    background-color: #1e1e1e;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    align-self: flex-start; /* බොත්තම වම් කෙළවරට තබා ගැනීම */
    transition: background-color 0.2s ease;
}

.ssd-form-submit-btn:hover {
    background-color: #000000;
}

.contact-success-msg {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 12px;
    border-radius: 6px;
    font-size: 13.5px;
    margin-bottom: 15px;
}

/* 👉 RIGHT INFORMATION SIDE STYLING (BLACK ICONS) */
.info-block-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-sub-heading {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0 0 5px 0;
    letter-spacing: 0.5px;
}

/* Clean Black Icons Framework */
.black-icon-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s ease;
    width: max-content;
}

.black-icon-link:hover {
    opacity: 0.7;
}

.black-svg-icon {
    width: 20px;
    height: 20px;
    fill: #000000; /* 🎯 සියලුම අයිකන කළු පාටින් තැබීම */
    flex-shrink: 0;
}

/* Static Call Display Setup */
.icon-text-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.primary-info-text {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.sub-info-notice {
    font-size: 11.5px;
    color: #64748b;
    margin-left: 32px; /* අයිකනයට යටින් පිළිවෙලට පෙළගැසීමට */
    display: block;
    margin-top: 2px;
}

/* Responsive adjustment for small screens */
@media (max-width: 768px) {
    .contact-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ==========================================================================
   16. PREMIUM CAREERS & RECRUITMENT SECTION (JOIN OUR TEAM)
   ========================================================================== */
.home-careers-section {
    background-color: #ffffff;
    padding: 40px 0 80px 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #f1f5f9;
}

.careers-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 50px;
    text-align: center;
}

/* 📸 බැනර් එක හැඩගැන්වීම */
.careers-image-wrapper {
    width: 100%;
    margin-bottom: 35px;
    overflow: hidden;
}

.careers-main-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Text Formatting */
.careers-text-block {
    margin-bottom: 40px;
}

.careers-description-text {
    font-size: 14px;
    line-height: 1.8;
    color: #475569;
    margin: 0 0 15px 0;
    text-align: justify;
    text-align-last: center; /* මැද සිට දෙපැත්තට සමබරව පෙළගැසීම */
}

/* 🎛️ දෙපැත්තෙන් එන බොත්තම් Layout එක */
.careers-btn-group {
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
}

/* 🎯 VIEW ALL EXPERIENCE ↓ හා සමාන පිරිසිදු බොත්තම් නිමවුම */
.luxury-career-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 35px;
    border: 1px solid #000000;
    background-color: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    min-width: 240px;
    box-sizing: border-box;
}

.btn-sub-no {
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    margin-top: 2px;
    color: #64748b;
    transition: color 0.3s ease;
}

/* 🎯 Mouse එක උඩට ගෙනිච්චාම පසුබිම සම්පූර්ණයෙන්ම කළු කිරීම */
.luxury-career-button:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.luxury-career-button:hover .btn-sub-no {
    color: #cbd5e1; /* කළු පසුබිම මත නම්බර් එක ලස්සනට පෙනෙන්නට */
}

/* Responsive Grid for Mobile Screens */
@media (max-width: 640px) {
    .careers-btn-group {
        flex-direction: column;
        gap: 15px;
    }
    .luxury-career-button {
        width: 100%;
    }
}

/* ==========================================================================
   17. PERFECT EXTENDED CAREERS VIEW (FULL WIDTH IMG & EXACT LEFT ALIGN)
   ========================================================================== */
.home-careers-section {
    background-color: #ffffff;
    padding: 0 0 80px 0 !important; /* උඩ පැඩින්ග් 0 කළේ ෆොටෝ එක ඉහළ සෙක්ෂන් එකේ ගෑවෙන්න */
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #f1f5f9;
}

/* 📸 ඡායාරූපයේ දෙපැත්තේ හිස්තැන් (White Gutters) 0 කර මුළු පළලටම ඇදීම */
.careers-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 45px 0 !important;
    padding: 0 !important;
}

.careers-main-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 📝 WHO AM I? එකේ විදිහටම නූලටම 50px වමෙන් ටෙක්ස්ට් පෙළගස්වන කන්ටේනර් එක */
.careers-text-alignment-container {
    padding: 0 50px !important; /* 🎯 සයිට් එකේ අනෙක් Heading වල Alignment එකටම ලොක් කළා */
    box-sizing: border-box;
    width: 100%;
}

/* හෙඩිම පිරිසිදුවට වමට කිරීම */
.careers-heading {
    border: none !important;
    text-align: left !important;
    margin-bottom: 25px !important;
    font-size: 20px !important;
    padding-left: 0 !important;
    color: #000000;
}

.careers-text-block {
    margin-bottom: 40px;
    max-width: 900px; /* කියවීමට ලෙහෙසි වෙන්න ටෙක්ස්ට් එකේ උපරිම දිග පමණක් සීමා කළා */
}

/* සම්පූර්ණ විස්තරය WHO AM I එක වගේම Left Align කිරීම */
.careers-description-text {
    font-size: 14px;
    line-height: 1.8;
    color: #475569;
    margin: 0 0 15px 0;
    text-align: left !important; /* 🎯 Perfect Baseline Left Align */
}

/* බොත්තම් ටිකත් වම් පැත්තටම ලොක් කිරීම */
.careers-btn-group {
    display: flex;
    gap: 25px;
    justify-content: flex-start;
    align-items: center;
}

/* බොක්ස් දෙකම එකම මට්ටමට ලොක් කිරීම */
.luxury-career-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 45px;
    border: 1px solid #000000;
    background-color: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    min-width: 240px;
    box-sizing: border-box;
}

/* මවුස් එක ගෙනිච්චාම පසුබිම කළු වීම */
.luxury-career-button:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Mobile Screens වලට සමබර වීම */
@media (max-width: 768px) {
    .careers-text-alignment-container {
        padding: 0 20px !important;
    }
    .careers-btn-group {
        flex-direction: column;
        gap: 15px;
    }
    .luxury-career-button {
        width: 100%;
    }
}
/* 🎯 අන්තිම පේළි ටිකත් වමටම ලොක් කරන සුපිරි ෆික්ස් එක */
.careers-description-text {
    text-align: left !important;
    text-align-last: left !important; /* 🎯 මැදට පනින එක නතර කර, අවසාන පේළිත් වමටම බලෙන් හරවයි */
}

/* බොත්තම් සහ හෙඩිම් වලත් කිසිම කැදැල්ලක් නැතුව වමටම ලොක් කිරීම */
.careers-heading,
.careers-btn-group {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* 🎯 LET'S TALK: SEND MESSAGE BUTTON REFINEMENT (FULL WIDTH & SHARP CORNERS) */
.ssd-form-submit-btn {
    width: 100% !important;        /* 🎯 උඩ තියෙන Input කොටු වල පළලටම 100%ක් සමාන කිරීමට */
    border-radius: 0px !important; /* 🎯 කොන් රවුන්ඩ් (Rounded corners) සම්පූර්ණයෙන්ම අයින් කර තියුණු කිරීමට */
    text-transform: uppercase;     /* අකුරු ටිකත් Premium විදිහට Capital කිරීමට */
    letter-spacing: 1px;           /* අකුරු අතර ඉඩ මඳක් වැඩි කිරීමට */
    height: 52px;                  /* Careers බොත්තම් වල උසටම සමාන කිරීමට */
}

/* Core Competencies Styling */
.core-competencies-wrapper ul li {
    color: #475569;
    transition: color 0.3s ease;
}
.core-competencies-wrapper ul li:hover {
    color: #d4af37; /* Hover කළාම රන්වන් පාට වීම */
    padding-left: 10px;
}
.core-competencies-wrapper ul li span {
    color: #d4af37; /* Gold bullet point */
    margin-right: 10px;
}

/* සොෆ්ට්වෙයාර් අයිකන්ස් පෙන්වීමට ෆිල්ටර් එක ඉවත් කරන්න */
.software-logos-container img {
    height: 40px !important;      
    width: auto;
    filter: none; /* කළු වීම නැවැත්වීමට මෙය භාවිතා කරන්න */
    /* ඔබට ලෝගෝ කළු-සුදු (Grayscale) වීමට අවශ්‍ය නම් පමණක් පහත පේළිය එක් කරන්න: */
    /* filter: grayscale(100%); */ 
}
 /* WORK EXPERIENCE කොටස තනි කොලම් එකක් ලෙස තහවුරු කිරීම */
.experience-showcase-area {
    width: 100% !important;     /* පළල 100% */
    display: block !important;  /* ග්‍රිඩ් එකක් නොවන බව තහවුරු කිරීම */
    float: none !important;     /* කිසිදු float එකක් ඇත්නම් ඉවත් කිරීම */
    clear: both !important;     /* පැති කොලම් වල බලපෑම ඉවත් කිරීම */
    columns: 1 !important;      /* කිසිම විටක කොලම් වලට බෙදීම වළක්වයි */
    -webkit-columns: 1 !important;
    -moz-columns: 1 !important;
}

/* Timeline අයිතම ද සම්පූර්ණ පළලටම දිග හැරීම */
.timeline-container-box {
    width: 100% !important;
    display: block !important;
}

/* Software Logos Styling - Larger & Clean */
.software-logos-container {
    display: flex;
    gap: 15px; /* ලෝගෝ අතර පරතරය */
    align-items: center;
    margin-top: 30px; /* උඩින් ඉඩක් තියන්න */
    padding-bottom: 20px;
}

.software-logos-container img {
    height: 40px !important; /* ලෝගෝ එක ලොකු කරා (50px) */
    width: auto;
    filter: none !important; /* කළු වීම නවත්වයි */
    opacity: 1 !important;   /* අළු පාට නැති කරයි */
}

/* Client Trust Headline - LET'S TALK style එකට */
.logo-section-heading {
    font-size: 16px;           /* ටිකක් ලොකු කරා */
    font-weight: 800;          /* තද කළා */
    letter-spacing: 3px;       /* අකුරු අතර පරතරය */
    text-transform: uppercase;
    color: #000000;            /* තද කළු පාටින් */
    text-align: center;
    margin-bottom: 50px;       /* පරතරය වැඩිකළා */
}

/* Logo Sizing & Speed Fix */
.logo-marquee-track {
    display: flex;
    gap: 50px;                 /* ලෝගෝ අතර පරතරය වැඩිකළා */
    align-items: center;
    animation: marquee 50s linear infinite; /* 50s = දැන් හෙමින් යනවා */
    width: max-content;
}

.logo-marquee-track img {
    height: 80px !important;   /* ලෝගෝ ලොකු කළා (65px) */
    width: auto;
    filter: grayscale(0%) !important; /* වර්ණවත්ම පේනවා */
    opacity: 1;                /* හොඳට පේනවා */
    transition: opacity 0.3s ease;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ලෝගෝ වල ප්‍රමාණය සහ වේගය සකස් කිරීම */
.logo-marquee-track {
    display: flex;
    gap: 100px; /* ලෝගෝ අතර පරතරය තවත් වැඩි කළා */
    align-items: center;
    animation: marquee 50s linear infinite;
    width: max-content;
}

.logo-marquee-track img {
    height: 90px !important; /* කලින් 65px තිබුණේ, දැන් 90px කළා (වැඩිපුර පේන්න) */
    width: auto;
    filter: none !important;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.logo-marquee-track img:hover {
    opacity: 1;
}
/* Client Trust Section */
.logo-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    background: #ffffff;
}

.logo-marquee-track {
    display: flex;
    gap: 40px; 
    align-items: center;
    /* 50s වෙනුවට 30s දැම්මා, දැන් වේගය ටිකක් වැඩි වේවි */
    animation: marquee 30s linear infinite; 
    width: max-content;
}

.logo-marquee-track img {
    height: 90px !important; /* ලෝගෝ ලොකු කළා */
    width: auto;
    filter: none !important; /* කලර් එක එනවා */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hover කරද්දී ටිකක් තද වෙන්න */
.logo-marquee-track img:hover {
    opacity: 1;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 1. Portfolio page එකේ විතරක් අනවශ්‍ය Header එක අයින් කරන්න */
.portfolio-page-custom .wp-block-template-part, 
.portfolio-page-custom .site-header, 
.portfolio-page-custom header {
    display: none !important;
}

/* 2. Portfolio page එකේ Dark Mode එක පවත්වා ගන්න */
.portfolio-page-custom {
    background-color: #0a0a0a !important;
}

/* Sidebar එකේ පැති බෝඩර් එකක් ඇවිල්ලා නම් ඒකත් අයින් කරන්න */
.portfolio-page-custom .sidebar {
    border-right: none !important;
    border-left: none !important;
}

/* Sidebar - පරතරය සහ Logo position එක වෙනස් කළා */
.sidebar { 
    width: 300px; 
    padding: 60px 20px 80px 20px; /* උඩ පරතරය අඩු කළා */
    border-right: 1px solid #f4f4f4; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

.grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; 
    width: 100%; /* Grid එක සම්පූර්ණ ප්‍රදේශය ගන්න */
}
.portfolio-item img { 
    width: 100%; 
    height: 300px; /* පින්තූර වල උස ස්ථාවර කරන්න */
    object-fit: cover; /* පින්තූර ඇද නොවී ලස්සනට Crop වෙන්න */
    display: block; 
}

.portfolio-item {
    width: 100%;
    overflow: hidden; /* පින්තූරය කොටුවෙන් පිටතට යාම නවත්වයි */
}
.portfolio-item img { 
    width: 100%; 
    height: 300px; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease; /* Hover ඇනිමේෂන් එකක් අවශ්‍ය නම් */
}
.grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; 
    width: 100%; 
}
.portfolio-item {
    width: 100%;
}
.portfolio-item img { 
    width: 100%; 
    height: 300px; 
    object-fit: cover; 
    display: block; 
}

/* Grid එක කොලම් 3ට හැදීම */
.grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* කොලම් 3යි */
    gap: 30px; /* පරතරය */
    padding: 20px;
}

/* පින්තූර ප්‍රමාණය සහ අනුපාතය */
.portfolio-item img { 
    width: 100%; 
    aspect-ratio: 4 / 3; /* පින්තූර සියල්ල එකම හැඩයකට */
    object-fit: cover; 
    display: block; 
}

/* Scroll ගැටළුව විසඳීම */
html, body {
    overflow: auto; /* Scroll එක සක්‍රිය කළා */
    height: auto;
}

/* Grid එක කොලම් 3කට සකස් කිරීම */
.grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* කොලම් 3යි */
    gap: 20px; 
    padding: 40px;
}

/* පින්තූර ප්‍රමාණය */
.portfolio-item img { 
    width: 100%; 
    aspect-ratio: 1 / 1; /* හතරැස් හැඩයට (Square) */
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease;
}

/* මෙනුවේ සාමාන්‍ය පෙනුම */
.nav-menu a {
	font-size: 11.5px;!important;
    color: #475569 !important;
    font-weight: 600 !important;
	letter-spacing: 0.5px;!important;
}

/* Grid එක හරියටම කොලම් 3කට සකස් කිරීම */
.grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* කොලම් 3ක් පමණක් වන ලෙස */
    gap: 20px; 
    padding: 0; 
    width: 100%;
}

.portfolio-item {
    width: 100%;
}

.portfolio-item img { 
    width: 100%; 
    aspect-ratio: 1 / 1; /* හතරැස් හැඩය */
    object-fit: cover; 
    display: block; 
}

.sidebar { 
    width: 300px; 
    padding: 40px 20px 20px 20px; /* ඉහළ (Top) පෑඩින් එක 120px සිට 40px දක්වා අඩු කළා */
    display: flex; 
    flex-direction: column;
}

.story-container { 
    margin-top: 10px; /* මෙනුව සහ Story පෙළ අතර ඉඩ */
    margin-bottom: 10px; 
}

.nav-menu { 
    margin-top: 0px !important; /* මෙනුවට ඉහළින් තිබූ අමතර ඉඩ ඉවත් කළා */
}
 /* පරණ Categories කොටස සැඟවීමට */
.editor-post-taxonomies__hierarchical-terms-field, 
.categorydiv {
    display: none !important;
}
/* Portfolio Grid එක Home page එකේ ප්‍රමාණයට සීමා කිරීම */
.main-content {
    max-width: 900px; /* Home page එකේ කොලම් එකේ පළලට සමාන අගයක් මෙතන දෙන්න */
    margin: 0 auto;   /* මැදට ගැනීම */
    padding: 40px;
}

.grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* කොලම් 3යි */
    gap: 30px; 
    width: 100%;
}

/* Portfolio wrapper එක Home page එකට සමාන කිරීම */
.portfolio-wrapper { 
    max-width: 100%; 
    margin: 0 auto; 
    display: flex; 
    gap: 10px !important;
}


/* Contact බොත්තම */
.sidebar-footer {
    margin-top: 23px; /* මෙතනින් Menu එක සහ බොත්තම අතර ඉඩ පාලනය කරන්න */
}

.contact-btn {
    display: block;
    width: 260px;
    box-sizing: border-box;
    padding: 15px 0;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}

/* Sidebar එකේ සාමාන්‍ය Width එක */
.sidebar {
    width: 260px; /* ලෝගෝ බොක්ස් එකට හරියටම ගැලපේ */
    padding: 0;
    margin: 0;
}


/* Contact බොත්තම */
.contact-btn {
    display: block;
    width: 260px;
    box-sizing: border-box;
    padding: 15px 0;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 10px; /* මෙනුව සහ බොත්තම අතර ඉඩ */
}

/* Home Page එකේ ඉඩ අඩු කිරීම */
.site-container {
    gap: 0px !important; 
}

/* Portfolio Page එකේ ඉඩ අඩු කිරීම */
.portfolio-wrapper {
    gap: 10px !important;
}
/* 1. සයිඩ්බාර් එක සහ කන්ටෙන්ට් එක එකම ලේවුට් එකකට ගේමු */
.site-container, .portfolio-wrapper {
    display: flex !important;
    gap: 10px !important; /* මෙතන 40px වෙනුවට ඔයාට ඕන අගය දාන්න */
    padding-left: 280px !important; /* වම් පැත්තේ ඉඩ */
    max-width: 100% !important;
    margin: 0 !important;
}

 /* Portfolio පේජ් එකේ ඉර විතරක් නිවැරදි කිරීම */
.portfolio-wrapper .portfolio-sidebar-hairline {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #000000 !important;
    margin: 20px 0 !important;
    visibility: visible !important;
    border: none !important;
}