/* =================================================================== 
   IMPROVED CONTRAST & READABILITY OVERRIDES
   Append this to your existing style.css or include as separate file
   =================================================================== */

/* ============================================
   GLOBAL TEXT IMPROVEMENTS
   ============================================ */

/* Improved body text contrast */
body {
    color: rgba(255, 255, 255, 0.85);
}

/* Enhanced paragraph readability */
p {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.8;
}

/* ============================================
   ABOUT PAGE SPECIFIC IMPROVEMENTS
   ============================================ */

/* Hide template watermark numbers */
.team-one::before,
.team-one::after {
    display: none !important;
}

/* Intro section max-width for better layout */
.about-intro-section {
    max-width: 900px;
    margin: 0 0 80px 0;
}

/* Skill Cards - Improved Visibility */
.skill-card {
    background: rgba(255, 255, 255, 0.10);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.skill-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.skill-card h3 {
    color: #fff !important;
    font-size: 24px;
    margin-bottom: 20px;
}

.skill-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px;
    line-height: 1.8;
}

/* Domain Cards - Better Contrast */
.domain-card {
    background: rgba(255, 255, 255, 0.10);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    height: 100%;
    transition: all 0.3s ease;
}

.domain-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
}

.domain-card h3 {
    color: #fff !important;
    font-size: 22px;
    margin-bottom: 15px;
}

.domain-card ul {
    list-style: none;
    padding: 0;
}

.domain-card ul li {
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 8px;
}

/* Tool Cards - Enhanced Readability */
.tool-card {
    background: rgba(255, 255, 255, 0.10);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    height: 100%;
    transition: all 0.3s ease;
}

.tool-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.tool-card h4 {
    color: #fff !important;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.tool-card p {
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 15px;
    line-height: 1.8;
}

/* Education & Experience Cards */
.edu-card,
.exp-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.edu-card h3,
.exp-card h3 {
    color: #fff !important;
    font-size: 24px;
    margin-bottom: 10px;
}

.edu-card p,
.exp-card p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Stats/Odometer Cards - High Visibility */
.stats-card {
    background: rgba(255, 255, 255, 0.10);
    padding: 40px 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.stats-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-5px);
}

.stats-card .odometer {
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    line-height: 1;
}

.stats-card p {
    font-size: 16px !important;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6;
}

.stats-card span {
    font-size: 40px;
    color: #fff;
    font-weight: 700;
    margin-left: 5px;
}

/* ============================================
   PROJECT PAGES IMPROVEMENTS
   ============================================ */

/* Project detail text */
.single-work p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px;
    line-height: 1.8;
}

.single-work h4 {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.single-work strong {
    color: #fff;
    font-weight: 600;
}

/* Project list styling */
.single-work_list li {
    color: #fff !important;
}

.single-work_list li span {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   HEADING HIERARCHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    color: #fff;
}

h2 {
    font-size: 48px;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #fff;
}

h3 {
    font-size: 32px;
    line-height: 1.4;
    color: #fff;
}

/* ============================================
   SERVICE/GALLERY BLOCKS
   ============================================ */

/* Service block text */
.service-block_one-heading {
    color: #fff !important;
}

.service-block_one-text {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* Gallery block improvements */
.gallery-block_one-title {
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 18px;
}

.gallery-block_one-heading a {
    color: #fff !important;
}

/* ============================================
   COUNTER/STATS SECTIONS
   ============================================ */

.counter-block_one-counter {
    color: #fff !important;
    font-weight: 700;
}

.counter-block_one-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-one_heading {
    color: #fff !important;
}

.contact-one_list li {
    color: rgba(255, 255, 255, 0.85) !important;
}

.contact-one_list li a {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* ============================================
   TESTIMONIAL BLOCKS
   ============================================ */

.testimonial-block_one-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.testimonial-block_one-author {
    color: #fff !important;
}

.testimonial-block_one-designation {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* ============================================
   TEAM BLOCKS
   ============================================ */

.team-block_one-title {
    color: #fff !important;
}

.team-block_one-designation {
    color: rgba(255, 255, 255, 0.75) !important;
}

.team-block_one-text {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* ============================================
   AWARDS SECTION
   ============================================ */

.awards-block_one-title {
    color: #fff !important;
}

.awards-block_one-text {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* ============================================
   BACKGROUND SECTION (About Page)
   ============================================ */

.team-one h2 {
    color: #fff !important;
    font-size: 48px;
    margin-bottom: 30px;
}

.team-one p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px;
    line-height: 1.8;
}

/* ============================================
   RESPONSIVE TEXT IMPROVEMENTS
   ============================================ */

@media only screen and (max-width: 991px) {
    .skill-card,
    .domain-card,
    .tool-card {
        margin-bottom: 20px;
    }
    
    .stats-card .odometer {
        font-size: 50px;
    }
}

@media only screen and (max-width: 767px) {
    h2 {
        font-size: 36px;
    }
    
    .stats-card .odometer {
        font-size: 40px;
    }
    
    .skill-card,
    .domain-card,
    .tool-card {
        padding: 20px;
    }
}

@media only screen and (max-width: 479px) {
    h2 {
        font-size: 28px;
    }
    
    .stats-card .odometer {
        font-size: 36px;
    }
    
    .stats-card p {
        font-size: 14px !important;
    }
}

/* ============================================
   PROJECT LABEL (for XR Production page)
   ============================================ */

.project-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00ffcc;
    margin-bottom: 15px;
    font-weight: 600;
}

/* ============================================
   HIDE TEMPLATE WATERMARKS & ARTIFACTS
   ============================================ */

/* Hide any large overlay numbers */
.team-one .title-box::before,
.team-one .title-box::after,
section::before[content*="1920"],
section::after[content*="3807"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure no pseudo-elements with huge numbers overlay content */
*::before[style*="font-size: 400px"],
*::after[style*="font-size: 400px"],
*::before[style*="font-size: 500px"],
*::after[style*="font-size: 500px"] {
    display: none !important;
}

/* ============================================
   IMPROVED LINK CONTRAST
   ============================================ */

a {
    transition: all 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

/* Footer links */
.footer_socials li a,
.footer_navs li a {
    color: rgba(255, 255, 255, 0.90) !important;
}

.footer_socials li a:hover,
.footer_navs li a:hover {
    color: #fff !important;
}

/* ============================================
   BUTTON IMPROVEMENTS
   ============================================ */

.theme-btn,
button[type="submit"],
.submit-btn {
    font-weight: 600;
    transition: all 0.3s ease;
}

.theme-btn:hover,
button[type="submit"]:hover,
.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ============================================
   FORM INPUT IMPROVEMENTS
   ============================================ */

.contact-form input,
.contact-form textarea,
.contact-form select {
    color: rgba(255, 255, 255, 0.90) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.50) !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
}

/* ============================================
   PAGE TITLE IMPROVEMENTS
   ============================================ */

.page-title_heading {
    color: #fff !important;
}

.page-title_text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   PODCAST PAGE IMPROVEMENTS
   ============================================ */

.podcast-intro-text p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px;
    line-height: 1.8;
}

/* ============================================
   IMPROVED CARD HOVER STATES
   ============================================ */

.gallery-block_one-inner:hover,
.service-block_one-inner:hover,
.journal-block_one-inner:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Improved link underline on focus */
a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    * {
        background: white !important;
        color: black !important;
    }
}

/* =========================
   Projects: Filter + Card Polish
   ========================= */

.projects-filter{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin: 10px 0 26px 0;
}

.projects-filter .filter-btn{
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.78);
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1;
	transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.projects-filter .filter-btn:hover{
	transform: translateY(-1px);
	border-color: rgba(0,255,204,0.35);
	background: rgba(0,255,204,0.08);
	color: rgba(255,255,255,0.9);
}

.projects-filter .filter-btn.is-active{
	border-color: rgba(0,255,204,0.45);
	background: rgba(0,255,204,0.12);
	color: rgba(255,255,255,0.95);
}

/* Card hover elevation + glow */
.gallery-block_one-inner{
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	border-radius: 18px;
}

.gallery-block_one-inner:hover{
	transform: translateY(-8px);
	box-shadow: 0 22px 55px rgba(0,0,0,0.42);
}

/* Media overlay gradient */
.project-card-media{
	position:relative;
	overflow:hidden;
	border-radius: 16px;
}

.project-card-media img{
	width:100%;
	height:auto;
	display:block;
	transform: scale(1);
	transition: transform .55s ease;
}

.gallery-block_one-inner:hover .project-card-media img{
	transform: scale(1.06);
}

.project-card-overlay{
	position:absolute;
	inset:0;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.0) 0%,
		rgba(0,0,0,0.18) 45%,
		rgba(0,0,0,0.62) 100%
	);
	opacity: .95;
	pointer-events:none;
	transition: opacity .25s ease;
}

.gallery-block_one-inner:hover .project-card-overlay{
	opacity: 1;
}

/* Tag pills generated from your structured line */
.project-tags{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top: 10px;
}

.project-tag{
	display:inline-flex;
	align-items:center;
	padding: 7px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.82);
	white-space: nowrap;
}

/* Accent variants */
.project-tag.accent-teal{
	border-color: rgba(0,255,204,0.28);
	background: rgba(0,255,204,0.10);
}
.project-tag.accent-purple{
	border-color: rgba(214,139,255,0.30);
	background: rgba(214,139,255,0.12);
}
.project-tag.accent-blue{
	border-color: rgba(77,195,255,0.30);
	background: rgba(77,195,255,0.12);
}
.project-tag.accent-orange{
	border-color: rgba(255,179,92,0.30);
	background: rgba(255,179,92,0.12);
}
.project-tag.accent-red{
	border-color: rgba(255,120,120,0.30);
	background: rgba(255,120,120,0.12);
}

/* Filter hide/show */
.project-hidden{
	display:none !important;
}
/* =====================================================
   HERO VIDEO SYSTEM
   ===================================================== */

.banner-one{
position:relative;
overflow:hidden;
min-height:90vh;
display:flex;
align-items:center;
}

.banner-one .auto-container{
position:relative;
z-index:2;
}

.banner-one_grid{
display:grid;
grid-template-columns: 1fr 460px;
gap:40px;
align-items:center;
}

.hero-artifact{
position:relative;
z-index:3;
}

.hero-artifact_card{
border-radius:18px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(10,12,16,0.55);
box-shadow:0 22px 70px rgba(0,0,0,0.5);
overflow:hidden;
}

.hero-artifact_head{
display:flex;
justify-content:space-between;
padding:14px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.hero-artifact_badge{
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(0,255,204,0.25);
background:rgba(0,255,204,0.10);
font-size:12px;
color:white;
}

.hero-artifact_controls{
display:flex;
gap:10px;
}

.hero-artifact_btn{
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.05);
color:white;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
}

.hero-artifact_stage{
padding:14px;
}

.device-frame{
max-width:420px;
margin:auto;
}

.device-frame_bezel{
border-radius:28px;
padding:12px;
background:rgba(0,0,0,0.55);
border:1px solid rgba(255,255,255,0.14);
position:relative;
}

.device-frame_notch{
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%);
width:34%;
height:18px;
border-radius:0 0 14px 14px;
background:rgba(0,0,0,0.55);
}

.device-frame_viewport{
border-radius:22px;
overflow:hidden;
aspect-ratio:9/19.5;
background:black;
}

.device-frame_video{
width:100%;
height:100%;
object-fit:contain;
}

.hero-artifact_footer{
padding:14px;
border-top:1px solid rgba(255,255,255,0.08);
}

.hero-artifact_caption{
font-size:13px;
line-height:1.6;
color:rgba(255,255,255,0.85);
}

@media(max-width:991px){

.banner-one_grid{
grid-template-columns:1fr;
}

.hero-artifact{
margin-top:20px;
}

}
/* =========================
   HERO ARTIFACT CONTROLS — RESPONSIVE
   Fixes: overlap, tiny tap targets, overflow on mobile
   ========================= */

.hero-artifact_head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap; /* ✅ allow controls to drop below title */
}

.hero-artifact_title{
  min-width: 220px;
  flex: 1 1 320px; /* ✅ title takes space, but wraps */
}

.hero-artifact_controls{
  display:flex;
  flex-wrap:wrap;          /* ✅ wrap buttons */
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex: 0 1 auto;
  max-width: 100%;
}

/* Buttons: stable size + accessible tap target */
.hero-artifact_btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;        /* ✅ tap target */
  padding: 10px 14px;
  border-radius: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* If the header gets tight, make buttons 2-up */
@media (max-width: 991px){
  .hero-artifact_controls{
    width: 100%;
    justify-content:flex-start; /* looks more “product” */
  }
  .hero-artifact_btn{
    flex: 1 1 160px;        /* ✅ two columns when possible */
  }
}

/* On small phones, full-width stacked buttons */
@media (max-width: 480px){
  .hero-artifact_btn{
    width: 100%;
    flex: 1 1 100%;
  }
}
/* =========================
   FIX: HERO BUTTONS NOT CLICKABLE
   Ensures no overlay blocks pointer events
========================= */

/* Make sure the whole card doesn't block clicks accidentally */
.hero-artifact_card,
.hero-artifact_head,
.hero-artifact_controls {
  position: relative;
  z-index: 10;
}

/* The stage/video should NOT sit above controls */
.hero-artifact_stage,
.device-frame,
.device-frame_bezel,
.device-frame_viewport,
.device-frame_video {
  position: relative;
  z-index: 1;
}

/* Controls always above everything */
.hero-artifact_controls {
  z-index: 20;
}

/* Ensure nothing invisible steals clicks */
.hero-artifact_card * {
  pointer-events: auto;
}

/* If you have any overlay layers in the card, they must not capture clicks */
.hero-artifact_card::before,
.hero-artifact_card::after,
.hero-artifact_stage::before,
.hero-artifact_stage::after {
  pointer-events: none !important;
}

/* Make buttons feel like buttons */
.hero-artifact_btn {
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
}