:root{
  --bg1:#0f172a;       /* slate-900 */ 
  --bg2:#111827;       /* gray-900 */
  --pri:#4f9cff;       /* brand blue */
  --pri-2:#7c3aed;     /* violet */
  --txt:#e5e7eb;       /* gray-200 */
  --muted:#9ca3af;     /* gray-400 */
  --glass-bg:rgba(255,255,255,0.06);
  --glass-brd:rgba(255,255,255,0.18);
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius:16px;
  --t:.3s ease;
}

/* Base reset kept lean */
*,
*::after,
*::before{margin:0;padding:0;box-sizing:inherit;font-family:inherit;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  box-sizing:border-box;position:relative;line-height:1.5;
  font-family:'Source Sans Pro',sans-serif;overflow-x:hidden;overflow-y:scroll;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(79,156,255,.15), transparent 60%),
              radial-gradient(1000px 700px at 80% 30%, rgba(124,58,237,.18), transparent 60%),
              linear-gradient(160deg,var(--bg1),var(--bg2));
}

/* Utility */
a{text-decoration:none;color:inherit;}
li{list-style:none;}
input:focus,button:focus,a:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:2px;}
button{border:none;cursor:pointer;}
textarea{resize:none;}
.d-none{display:none;}
.sec-pad{padding:12rem 0;}
.main-container{max-width:120rem;margin:auto;width:92%;}

/* Headings - CRITICAL FIX: No more center alignment for hero text */
.heading-primary{
  font-size: clamp(4rem, 6vw, 7rem); /* Bigger base size for better wrapping */
  text-transform:uppercase;
  letter-spacing: 1px; /* TIGHTER spacing - no more weird breaks */
  line-height: 0.95; /* Almost single line to force together */
  text-align: left !important; /* FORCE LEFT ALIGNMENT - overrides everything */
  text-shadow: 0 2px 18px rgba(79,156,255,.25);
  margin: 0 0 1.5rem 0; /* Tight bottom margin */
  white-space: nowrap; /* PREVENT LINE BREAKS AT ALL COST */
  word-break: keep-all; /* Keep words intact */
  hyphens: none; /* No hyphenation */
  display: block;
  width: 100%;
}
.heading-sec__mb-bg{margin-bottom:11rem;}
.heading-sec__mb-med{margin-bottom:9rem;}
.heading-sec__main{
  display:block;font-size:clamp(2.6rem,2.6vw,4rem);
  text-transform:uppercase;letter-spacing:3px;text-align:center;margin-bottom:3.5rem;position:relative;
}
.heading-sec__main::after{
  content:'';position:absolute;top:calc(100% + 1.5rem);height:5px;width:4rem;
  background: linear-gradient(90deg,var(--pri),var(--pri-2));
  left:50%;transform:translateX(-50%);border-radius:5px;box-shadow:0 2px 12px rgba(79,156,255,.5);
}
.heading-sec__main--lt{color:#fff;}
.text-primary{
  color:#eff4fc;
  font-size:2.5rem; /* Larger for impact */
  line-height:1.9;
  opacity:1; /* Full opacity */
  margin: 1rem 0 2rem 0; /* Balanced spacing */
  font-weight: 400; /* Normal weight */
  text-align: left; /* LEFT ALIGN JOB TITLE */
  display: block;
  width: 100%;
}

/* Fancy glass card helper */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--radius);
}

/* Buttons */
.btn{
  background:#fff;color:#0b1220;text-transform:uppercase;letter-spacing:1px;display:inline-block;font-weight:700;border-radius:12px;
  box-shadow:0 8px 24px rgba(79,156,255,.28);transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  padding:1.4rem 5rem;
  font-size:1.7rem;
  margin-top: 1rem; /* Space from text */
  display: inline-block;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(79,156,255,.38);}
.btn--bg{padding:1.4rem 5rem;font-size:1.7rem;}
.btn--med{padding:1.5rem 5rem;font-size:1.6rem;}
.btn--theme{
  background:linear-gradient(135deg,var(--pri),var(--pri-2));
  color:#fff;
}

/* Header - unchanged */
.header{
  position:fixed;width:100%;z-index:1000;
  background: rgba(17,24,39,0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--glass-brd);
  box-shadow:0 2px 24px rgba(0,0,0,.2);
}
.header__content{display:flex;align-items:center;justify-content:space-between;padding:1rem 5rem;}
.header__logo-container{display:flex;align-items:center;cursor:pointer;color:#e5e7eb;transition:color var(--t), transform var(--t);}
.header__logo-container:hover{color:#fff;transform:translateY(-1px);}
.header__logo-img-cont{
  width:5rem;height:5rem;border-radius:50px;overflow:hidden;margin-right:1.5rem;
  background: linear-gradient(135deg,var(--pri),var(--pri-2));
  box-shadow:0 6px 16px rgba(124,58,237,.4);
}
.header__logo-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.header__logo-sub{font-size:1.8rem;text-transform:uppercase;font-weight:800;letter-spacing:1px;}
.header__links{display:flex;gap:.6rem;}
.header__link{
  padding:2.2rem 2.2rem;display:inline-block;font-size:1.5rem;color:#e5e7eb;text-transform:uppercase;letter-spacing:1px;font-weight:800;
  transition:color var(--t);
  position:relative;
}
.header__link::after{
  content:'';position:absolute;left:2.2rem;right:2.2rem;bottom:1.1rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pri),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
.header__link:hover{color:#fff;}
.header__link:hover::after{transform:scaleX(1);}
.header__main-ham-menu-cont{display:none;width:3rem;padding:2.2rem 0;}
.header__main-ham-menu,.header__main-ham-menu-close{width:100%;}
.header__sm-menu{
  background: rgba(17,24,39,.85);position:absolute;width:100%;top:100%;
  visibility:hidden;opacity:0;transition:opacity var(--t), visibility var(--t);
  border-bottom:1px solid var(--glass-brd);
}
.header__sm-menu-link a{
  display:block;text-decoration:none;padding:2.5rem 3rem;font-size:1.6rem;color:#e5e7eb;text-align:right;border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:800;text-transform:uppercase;letter-spacing:2px;transition:color var(--t), background var(--t);
}
.header__sm-menu-link a:hover{color:#fff;background:rgba(255,255,255,.04);}
.header__sm-menu-link:first-child a{border-top:1px solid rgba(255,255,255,.06);}

/* Hero - Text alignment locked down */
.home-hero{
  color:#fff;
  background:
    radial-gradient(900px 600px at 70% 80%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(800px 600px at 10% 20%, rgba(79,156,255,.22), transparent 60%),
    linear-gradient(to right, rgba(0, 98, 185, 0.45), rgba(0, 98, 185, 0.45)),
    url(../../assets/svg/common-bg.svg);
  background-position:center;
  height:100vh;min-height:80rem;max-height:120rem;position:relative;
  padding-top: 8rem; /* Account for fixed header */
}
.home-hero__content{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90rem;width:92%;
  display: flex;
  align-items: flex-start; /* Align to top for better text control */
  justify-content: space-between;
  gap: 4rem;
  min-height: 40rem;
}
.home-hero__text { 
  flex: 1;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Top alignment for text */
  text-align: left !important; /* FORCE LEFT ALIGN FOR ALL TEXT */
}
.home-hero__info{
  margin: 1rem 0 0 0;
}
.home-hero__cta{
  margin-top: 2rem;
  text-align: left;
}
/* Move image to the right side - add this to your existing CSS */
.home-hero__image {
  flex: 0 0 500px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end; /* This pushes image to the RIGHT within its container */
  height: auto;
  margin-top: 0rem;
  margin-right: 2rem; /* Extra right margin to scoot it further */
  margin-left: auto; /* Auto left margin pushes everything right */
}

.hero-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 400px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
  object-position: right;
  transition: transform var(--t);
  display: block;
}

.hero-image:hover {
  transform: scale(1.05);
}

/* Mobile - Keep it centered */
@media (max-width: 768px) {
  .home-hero__image {
    margin: 0 auto 0 auto; /* Center on mobile */
    justify-content: center; /* Override for mobile */
  }
}

/* Mobile - Stack and center */
@media (max-width: 768px) {
  .home-hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
    padding: 2rem;
  }
  .home-hero__text {
    max-width: 100%;
    order: -1; /* Text first */
    text-align: center !important;
  }
  .heading-primary {
    text-align: center !important;
    white-space: normal; /* Allow wrapping on mobile */
    letter-spacing: 1.5px;
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1.1;
  }
  .text-primary {
    text-align: center !important;
    font-size: 1.9rem;
  }
  .home-hero__cta {
    text-align: center;
    margin-top: 1.5rem;
  }
  .home-hero__image {
    flex: none;
    order: 1;
    max-width: 280px;
  }
  .hero-image {
    width: 280px;
    max-width: 280px;
  }
  .btn--bg {
    padding: 1.1rem 4rem;
    font-size: 1.6rem;
  }
}



/* About */
.about{background:transparent;}
.about .main-container .heading-sec__main{color:#fff;}
.about .main-container .heading-sec__main::after{background:linear-gradient(90deg,var(--pri),var(--pri-2));}
.about__content{
  display:grid;grid-template-columns:1fr 1fr;grid-gap:6rem;
}
.about__content-title{
  font-weight:900;font-size:2.6rem;margin-bottom:2.2rem;color:#fff;
}
.about__content-details-para{
  font-size:1.8rem;color:var(--muted);max-width:60rem;line-height:1.8;margin-bottom:1.6rem;
}
.about__content-details-para:last-child{margin-bottom:4rem;}
.about__content-main{padding:2rem;}
.about__content-main .btn{margin-top:1rem;}
.about__content-skills .skills{gap:1rem;}
.skills{display:flex;flex-wrap:wrap;}
.skills__skill{
  padding:1rem 1.6rem;margin-bottom:1.2rem;margin-right:1.2rem;font-size:1.4rem;
  background: linear-gradient(135deg, rgba(79,156,255,.22), rgba(124,58,237,.22));
  border:1px solid rgba(255,255,255,.18);
  color:#eaf2ff;border-radius:999px;font-weight:800;letter-spacing:.4px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform var(--t), box-shadow var(--t);
}
.skills__skill:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28);}

/* Projects: convert rows into glass cards */
.projects__row{
  display:grid;grid-template-columns:1fr;grid-gap:2.4rem;margin-bottom:5rem;
}
.projects__row:last-child{margin-bottom:0;}
.projects__row-content{
  padding:2.4rem;border-radius:var(--radius);
}
.projects__row-content.glass, .contact__form-container.glass, .about__content-main.glass{
  /* Ensure glass applied where class added */
}
.projects__row-content-title{
  font-weight:900;font-size:2.4rem;margin-bottom:1.4rem;color:#fff;
}
.projects__row-content-desc{
  font-size:1.7rem;color:var(--muted);max-width:80rem;line-height:1.8;margin-bottom:0;
}

/* Contact */
/* Contact section - FIXED FOR READABILITY, you blind bat */
.contact{
  background:
    radial-gradient(900px 700px at 80% 10%, rgba(79,156,255,.12), transparent 60%), /* Reduced opacity */
    radial-gradient(900px 700px at 10% 90%, rgba(124,58,237,.12), transparent 60%), /* Reduced opacity */
    linear-gradient(to right, rgba(0, 98, 185, 0.25), rgba(0, 98, 185, 0.25)), /* Darker gradient base */
    url(../../assets/svg/common-bg.svg);
  background-size:cover;
  background-position:center;
  min-height: 80vh; /* Ensure full viewport */
  padding: 8rem 0; /* Proper padding */
  position: relative;
}

.contact__form-container{
  padding: 4rem;
  margin-top: 6rem;
  max-width: 80rem;
  text-align: left; /* LEFT ALIGN - right was stupid */
  width: 95%;
  margin: 5rem auto 0;
  border-radius: var(--radius);
  /* FIXED GLASS - DARKER for better contrast */
  background: rgba(15, 23, 42, 0.85); /* Much darker slate-900 base */
  border: 1px solid rgba(255, 255, 255, 0.25); /* Stronger border */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Deeper shadow */
}

.contact__form-field {
  margin-bottom: 3rem;
  width: 100%;
}

.contact__form-label {
  color: #f1f5f9; /* Much brighter slate-50 for labels */
  font-size: 1.6rem; /* Bigger for readability */
  letter-spacing: 0.5px;
  font-weight: 700; /* Bolder labels */
  margin-bottom: 1rem;
  display: block;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.contact__form-input {
  color: #f8fafc; /* Bright slate-50 for input text */
  padding: 1.8rem;
  width: 100%;
  border: 2px solid rgba(79, 156, 255, 0.4); /* Blue border by default */
  font-size: 1.7rem;
  letter-spacing: 0;
  background: rgba(30, 41, 59, 0.9); /* Darker slate-700 background */
  border-radius: 12px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color var(--t), box-shadow var(--t), background var(--t), transform var(--t);
  resize: vertical; /* Allow textarea resize */
}

.contact__form-input::placeholder {
  color: #cbd5e1; /* Lighter gray-300 for placeholders */
  font-weight: 400;
  font-size: 1.7rem;
  opacity: 0.8; /* Better placeholder visibility */
}

.contact__form-input:focus {
  border-color: #4f9cff; /* Full brand blue on focus */
  box-shadow: 0 0 0 4px rgba(79, 156, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3); /* Glow + shadow */
  background: rgba(30, 41, 59, 0.95); /* Slightly lighter on focus */
  outline: none;
  transform: translateY(-1px); /* Subtle lift effect */
}

/* Textarea specific */
.contact__form-input[type="textarea"] {
  min-height: 120px;
  resize: vertical;
}

/* Submit button - FIXED */
.contact__btn {
  width: 100%; /* Full width for better mobile */
  max-width: 300px; /* Cap width */
  padding: 1.8rem 3rem;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pri), var(--pri-2)); /* Blue to purple gradient */
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all var(--t);
  box-shadow: 0 8px 24px rgba(79, 156, 255, 0.3);
  margin-top: 2rem; /* Space from last field */
}

.contact__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(79, 156, 255, 0.4);
  background: linear-gradient(135deg, #60a5fa, #8b5cf6); /* Lighter hover state */
}

.contact__btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(79, 156, 255, 0.3);
}

/* Glass application to key blocks - DARKER FOR ALL */
.about__content-main,
.projects__row-content,
.contact__form-container {
  background: rgba(15, 23, 42, 0.85); /* Darker consistent glass */
  border: 1px solid rgba(255, 255, 255, 0.25); /* Stronger borders everywhere */
  -webkit-backdrop-filter: blur(16px); /* Stronger blur */
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Deeper shadows */
}

/* Responsive fixes */
@media (max-width: 768px) {
  .contact__form-container {
    width: 95%;
    padding: 2.5rem;
    margin: 3rem auto 0;
  }
  
  .contact__form-label {
    font-size: 1.5rem;
  }
  
  .contact__form-input {
    padding: 1.5rem;
    font-size: 1.6rem;
  }
  
  .contact__form-input::placeholder {
    font-size: 1.6rem;
  }
  
  .contact__btn {
    width: 100%;
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .contact {
    padding: 4rem 0;
  }
  
  .contact__form-container {
    padding: 2rem;
    margin: 2rem auto 0;
  }
}

/* Responsive */
@media (max-width: 980px){
  .about__content{grid-template-columns:1fr;grid-gap:3rem;}
  .header__links{display:none;}
  .header__main-ham-menu-cont{display:block;}
  .contact__btn{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}