* {
       
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
    --git-bg:          #1a2744;
    --git-left-bg:     linear-gradient(135deg, #080f14 0%, #091f33 50%, #0c2031 100%);
    --git-right-bg:    linear-gradient(135deg, #183147 0%, #1c374e 100%);
    --git-heading:     #f2f9ff;
    --git-text:        #c8d4ec;
    --git-label:       #e8edf8;
    --git-input-bg:    rgba(255,255,255,0.07);
    --git-input-border:rgba(255,255,255,0.15);
    --git-input-focus: rgba(124,99,230,0.5);
    --git-btn:         #6381e6;
    --git-btn-hover:   #9278f0;
    --git-icon:        #9aaac8;
    --git-divider:     rgba(255,255,255,0.1);
    --git-transition:  0.25s ease;

    background: var(--git-bg);
    font-family: 'Sora', sans-serif; /* fallback: sans-serif */
  }

  /* Light theme: add class "light" to .git-section */
    html {
  scroll-behavior: smooth;
}

body {
  background:  #091f33;
  overflow-x: hidden;
}

/* GLOBAL AIR-STYLE CINEMATIC BACKGROUND */

main {
  position: relative;
  overflow: hidden;
  background:
   
#05101b;

  
   
}

/* grid texture overlay */

main::before {
  content: '';

  position: fixed;
  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(59,130,246,0.18),
      transparent 40%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(6,182,212,0.15),
      transparent 40%
    ),

    linear-gradient(
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    72px 72px,
    72px 72px;

  pointer-events: none;

  z-index: 0;
}

/* cinematic blue glow */

main::after {
  content: '';
  position: fixed;

  top: -20%;
  left: 50%;
  transform: translateX(-50%);

  width: 1200px;
  height: 900px;

  background: rgba(59,130,246,0.10);

  filter: blur(140px);

  pointer-events: none;
  z-index: 0;
}

/* every section above background */

main section {
  position: relative;
  z-index: 1;
}

  .git-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
  }
  .git-left h2:hover {
    transform: scale3d(1.05, 1.05, 1.05);
    transition: all 0.5 ease-in;
  }

  /* ── LEFT PANEL ── */
  .git-left {
    background: transparent;
    padding: 72px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
  }

  /* subtle grid overlay */
  .git-left::before {
    content: '';
    position: absolute;
    inset: 0;
   
    pointer-events: none;
  }

  .git-left h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: var(--git-heading);
    line-height: 1.15;
    letter-spacing: -0.01em;
    position: relative;
  }

  .git-left p {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--git-text);
    line-height: 1.7;
    max-width: 380px;
    position: relative;
  }

  .git-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 0.5rem;
    position: relative;
  }

  .git-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .git-contact-item svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: var(--git-icon);
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    
  }

  .git-contact-item span {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--git-text);
    line-height: 1.5;
    text-decoration: none;
  }
  .git-contact-item span a {
    color: var(--git-text);
    text-decoration: underline;
    transition: color var(--git-transition);
  }
  .git-call-btn  {
    background: var(--git-btn);
    display: flex;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 5px 20px;
    height: 4.5vh;
    
    align-items: center;
    cursor: pointer;
    transition: background var(--git-transition), transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.02em;
  }
  .git-call-btn:hover {
  background: var(--git-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124,99,230,0.4);
  }
  .git-call-btn:active {
    transform: translateY(0);
  }
  .git-call-btn a p {
    text-decoration: none;
     letter-spacing: 0.02em;
      color: #ffffff;
      font-size: 0.875rem;
    font-family: 'Sora', sans-serif; /* fallback: sans-serif */
    font-weight: 800;
  }
  /* ── RIGHT PANEL ── */
  .git-right {
    background: #ffffff09;
    backdrop-filter: blur(10px);
    padding: 72px 56px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    box-shadow: inset 1px 0 0 0px #f5feff57;
    border: 1px solid var(--git-divider);
   
    border-radius: 50px;
  }

  .git-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .git-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .git-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .git-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--git-label);
    letter-spacing: 0.02em;
  }

  .git-field input,
  .git-field textarea {
    background: var(--git-input-bg);
    border: 1px solid var(--git-input-border);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 300;
    color: var(--git-label);
    outline: none;
    transition: border-color var(--git-transition), background var(--git-transition), box-shadow var(--git-transition);
    width: 100%;
  }

 

  .git-field input:focus,
  .git-field textarea:focus {
    border-color: rgba(124,99,230,0.6);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px var(--git-input-focus);
  }

  .git-field textarea {
    resize: vertical;
    min-height: 110px;
  }

  .git-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
  }

  .git-btn {
    background: var(--git-btn);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 28px;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--git-transition), transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.02em;
  }

  .git-btn:hover {
    background: var(--git-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124,99,230,0.4);
  }
  .git-field input::placeholder,
.git-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.247);
  opacity: 1;
}

.git-field input::-webkit-input-placeholder,
.git-field textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.192);
}

.git-field input::-moz-placeholder,
.git-field textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.281);
}
  .job-section {
    background: #ffffff11;
    backdrop-filter: blur(10px);
    padding: 72px 56px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
   margin-top: 20px;
    border-top: 1px solid #ffffff73;
     border-bottom: 1px solid #ffffff71;
    color: var(--git-heading);
   
    text-align: center;
  }
  .job-section h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
  }
  .job-section p {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--git-text);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 2rem;
  }
  .job-section a {
    background: var(--git-btn);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    height: 4.5vh;
    display: inline-block;
    align-items: center;
    cursor: pointer;
    transition: background var(--git-transition), transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.02em;
    text-decoration: none;
    font-size: 0.875rem;
    font-family: 'Sora', sans-serif; /* fallback: sans-serif */
    font-weight: 800;
  }
  .job-section a:hover {
    background: var(--git-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124,99,230,0.4);
  }
  @media (max-width: 900px){
    .job-section {
      flex-direction: column;
      gap: 1.5rem;
    }
     .job-section a {
      padding: 10px 20px;
    }
  }
  .git-btn:active {
    transform: translateY(0);
  }@media (max-width: 820px) {
    .git-inner { grid-template-columns: 1fr; }
    .git-right { border-left: none; border-top: 1px solid var(--git-divider); }
    .git-left, .git-right { padding: 48px 32px; }
  }

  @media (max-width: 480px) {
    .git-left, .git-right { padding: 36px 20px; }
    .git-row { grid-template-columns: 1fr; }
  }