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

    :root{
      --text:#2d3436;
      --muted:#636e72;
      --accent-blue:#0984e3;
      --accent-green:#00b894;
      --bg:#f5f5f5;
      --card-shadow: 0 4px 15px rgba(0,0,0,0.08);
      --footer-start:#00b894; /* chosen to match provided image */
      --footer-end:#0984e3;
    }

    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      font-family:  Arial, sans-serif;
      color: #2d3436;
      background-color: #f5f5f5;
      color:var(--text);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
    }
    
    
    
    /* Header */
    header {
      background-color: white;
      padding: 20px 10px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: relative;
    }
    
    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .logo-container img {
      height: 40px;
    }
    
    .logo-text {
      font-size: 18px;
      font-weight: normal;
      color: #2d3436;
    }
    
    nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      margin: 0 50px;
    }
    
    nav a {
      text-decoration: none;
      color: #2d3436;
      font-size: 16px;
    }

    .nav-links {
      display: flex;
      gap: 40px;
      justify-content: center;
      width: 100%;
      
    }

    .sign-in-btn {
      background: linear-gradient(to right, #00c6ff, #008080);
      color: white;
      padding: 8px 24px;
      border-radius: 10px;
      font-weight: bold;
      margin-left: auto;
    }
    
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 5px;
    }
    
    .hamburger span {
      width: 30px;
      height: 3px;
      background-color: #2d3436;
      transition: 0.3s;
    }
    
    /* Mobile Menu Drawer */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 0;
      right: -100%;
      width: 70%;
      max-width: 250px;
      height: 100vh;
      background-color: white;
      box-shadow: -2px 0 10px rgba(0,0,0,0.1);
      transition: right 0.3s ease;
      z-index: 1000;
      padding: 80px 30px 30px 30px;
    }
    
    .mobile-menu.active {
      right: 0;
    }
    
    .mobile-menu a {
      display: block;
      text-decoration: none;
      color: #2d3436;
      font-size: 18px;
      padding: 15px 0;
      border-bottom: 1px solid #f0f0f0;
      text-align: left;
    }
    
    .mobile-menu .sign-in-btn {
      display: block;
      text-align: center;
      margin-top: 20px;
      border-bottom: none;
    }
    
    .close-menu {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      font-size: 30px;
      cursor: pointer;
      color: #2d3436;
    }
    
    /* Overlay */
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0,0,0,0.5);
      z-index: 999;
    }
    
    .overlay.active {
      display: block;
    }
    
    /* Hero Section */
    .hero {
      max-width: 1200px;
      margin: 10px auto;
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 60px;
    }
    
    .hero-text {
      flex: 1;
    }
    
    .hero-text h1 {
      font-size: 52px;
      line-height: 1.2;
      color: #2d3436;
      font-weight: bold;
      margin-bottom: 20px;
    }
    
    .hero-image {
      flex: 1;
      text-align: center;
    }
    
    .hero-image img {
      max-width: 100%;
      height: auto;
    }
    
    /* Nature of Business Section */
    .nature-section {
      max-width: 1200px;
      margin: 10px auto;
      padding: 0 20px;
    }
    
    .nature-card {
      background: linear-gradient(to right, #00c6ff, #008080);
      border-radius: 30px;
      padding: 40px;
      display: flex;
      align-items: center;
      gap: 60px;
      color: white;
    }
    
    .nature-icon {
      flex-shrink: 0;
    }
    
    .nature-icon img {
      width: 150px;
      height: auto;
    }
    
    .nature-content h2 {
      font-size: 36px;
      margin-bottom: 15px;
      font-weight: bold;
    }
    
    .nature-content p {
      font-size: 16px;
      line-height: 1.6;
    }
    
    /* About Us Section */
    .about-section {
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 40px;
      
    }
    
    .about-section h2 {
      font-size: 30px;
      margin-bottom: 30px;
      color: #2d3436;
      font-weight: bold;
      text-align: center;
      text-decoration: underline;
    }
    
    .about-section p {
      font-size: 16px;
      line-height: 1.8;
      color: #636e72;
      max-width: 900px;
      margin: 0 auto;
      text-align: justify;
    }
    
    /* Footer */
    footer {
      background: linear-gradient(to right, #00c6ff, #008080);
      color: white;
      padding: 10px 0;
      text-align: center;
      margin-top: auto;
      width: 100%;
    }
    
    .footer-content {
      margin: 0 auto;
    }
    
    .footer-content p {
      margin: 4px 0;
      font-size: 14px;
    }
    
      /* Page container */
    .container{
      max-width:1200px;
      margin: 26px auto;
      padding: 0 20px 80px;
    }

        /* Page header (big rounded top) */
    .page-header{
      max-width:1200px;
      margin: 16px auto 10px;
      background: linear-gradient(to right, #00c6ff, #008080);
      color:#fff;
      padding:16px 19px;
      text-align:center;
      border-radius:30px 30px 0px 0px; /* rounded top corners and gentle bottom corners */
      box-shadow: 0 6px 18px rgba(9,132,227,0.12);
    }
    .page-header h1{ font-size:32px; font-weight:700; margin-bottom:6px; }
    .page-header p{ font-size:14px; opacity:0.95; }

    /* Results info */
    .results-info{
      text-align:center; color:var(--muted); margin-bottom:18px; font-size:15px;
    }
    .results-info strong{ color:var(--accent-blue); font-size:16px; }

    /* Job grid container */
    .job-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(330px,1fr));
      gap:22px;
    }

    /* Job card (rounded + subtle gradient top) */
    .job-card{
      background:#fff;
      border-radius:14px;
      padding:22px;
      box-shadow:var(--card-shadow);
      display:flex;
      flex-direction:column;
      position:relative;
      overflow:hidden;
      transition:transform .28s, box-shadow .28s;
      border-top:6px solid transparent;
    }
    .job-card::before{
      content:'';
      position:absolute; top:0; left:0; width:100%; height:6px;
      background: linear-gradient(to right, #00c6ff, #008080);
    }
    .job-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(9,132,227,0.12);
    }
    .job-card h3{
      font-size:18px; color:var(--text); margin-bottom:12px; line-height:1.25; font-weight:700;
      min-height:48px;
    }
    .job-info{ flex:1; margin-bottom:16px; }
    .job-meta{ font-size:13px; color:var(--muted); margin-bottom:8px; line-height:1.6; }
    .job-meta strong{ color:var(--text); font-weight:700; }
    .level-badge{
      display:inline-block; margin-top:8px;
      background: linear-gradient(135deg, rgba(9,132,227,0.08), rgba(0,184,148,0.08));
      color:var(--accent-blue); padding:6px 12px; border-radius:14px; font-weight:700; font-size:12px;
    }

    /* Job actions (buttons) — match primary styles */
    .job-actions{
      display:flex; gap:10px; margin-top:auto;
    }
    .btn{
      flex:1; padding:12px 14px; border-radius:10px; border:none; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; text-align:center;
    }
    .btn-detail{
      background:#fff; color:var(--accent-blue); border:2px solid var(--accent-blue);
    }
    .btn-detail:hover{ background:var(--accent-blue); color:#fff; transform:translateY(-3px); }
    .btn-apply{
      background: linear-gradient(135deg,var(--accent-blue),var(--accent-green)); color:#fff; box-shadow:0 4px 10px rgba(9,132,227,0.18);
    }
    .btn-apply:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(9,132,227,0.22); }

    .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 0 20px 0;
            gap: 10px;
            /* Required for styling links generated by Laravel's Blade pagination */
        }
        
    .page-link {
      padding:10px 14px; 
      border-radius:8px; 
      border:2px solid #0984e3; 
      background:#fff; 
      color:var(--muted); 
      font-weight:700; 
      cursor:pointer;        
        }

    .page-link:hover, .page-link.active {
      background: linear-gradient(135deg,var(--accent-blue),var(--accent-green)); 
      color:#fff; 
      border-color:#0984e3; 
        }

    .page-link:disabled { 
      opacity:0.45; 
      cursor:not-allowed; 
        }
      
    .job-card2 {
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    
    .job-header {
      background: linear-gradient(135deg, #0984e3, #00b894);
      color: white;
      padding: 18px 20px;
      text-align: center;
    }
    
    .job-header h1 {
      font-size: 32px;
      margin-bottom: 10px;
      font-weight: bold;
    }
    
    .job-header .job-badge {
      display: inline-block;
      background: rgba(255,255,255,0.2);
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 13px;
      margin-top: 10px;
    }
    
    /* Job Content */
    .job-content {
      padding: 40px;
    }
    
    .job-description {
      background: linear-gradient(135deg, rgba(9, 132, 227, 0.05), rgba(0, 184, 148, 0.05));
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 35px;
      border-left: 4px solid #0984e3;
      line-height: 1.7;
      color: #4a5568;
    }
    
    /* Job Details Grid */
    .job-details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
      margin-bottom: 35px;
    }
    
    .detail-item {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 12px;
      border-left: 3px solid #0984e3;
      transition: all 0.3s;
    }
    
    .detail-item:hover {
      transform: translateX(5px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    /* Combined detail block (spans the job-details grid) */
    .detail-item.combined {
      grid-column: 1 / -1; /* span both columns */
      padding: 22px;
      display: block;
    }

    .detail-item.combined .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .detail-item.combined .detail-entry {
      background: #f8f9fa;
      padding: 12px 14px;
      border-radius: 10px;
      border-left: 3px solid transparent; /* inner entries keep subtle separation */
    }
    
    .detail-label {
      font-size: 13px;
      color: #0984e3;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    
    .detail-value {
      font-size: 15px;
      color: #2d3436;
      font-weight: 600;
    }
    
    /* Section Headers */
    .section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 35px 0 20px 0;
      padding-bottom: 12px;
      border-bottom: 2px solid #e9ecef;
    }
    
    .section-header h2 {
      font-size: 22px;
      color: #2d3436;
      font-weight: bold;
    }
    
    .section-icon {
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, #0984e3, #00b894);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    /* Requirements & Skills */
    .requirements-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .requirement-card {
      background: white;
      border: 2px solid #e9ecef;
      border-radius: 12px;
      padding: 20px;
      transition: all 0.3s;
    }
    
    .requirement-card:hover {
      border-color: #0984e3;
      box-shadow: 0 4px 12px rgba(9, 132, 227, 0.1);
    }
    
    .requirement-card h3 {
      font-size: 15px;
      color: #0984e3;
      margin-bottom: 10px;
      font-weight: bold;
    }
    
    .requirement-card p {
      font-size: 14px;
      color: #4a5568;
      line-height: 1.6;
    }
    
    /* Skills Tags */
    .skills-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 30px;
    }
    
    
    .btn-back {
      background: white;
      color: #0984e3;
      border: 2px solid #0984e3;
    }
    
    .btn-back:hover {
      background: #0984e3;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(9, 132, 227, 0.3);
    }
    
    /* Info Banner (Enhanced) */
    .info-banner {
      background: linear-gradient(135deg, #fff8e1, #fff3cd);
      border-left: 6px solid #ffc107;
      padding: 25px 30px;
      border-radius: 15px;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      animation: pulseBanner 3s infinite;
    }

    @keyframes pulseBanner {
      0% { box-shadow: 0 0 0 rgba(255, 193, 7, 0.4); }
      50% { box-shadow: 0 0 15px rgba(255, 193, 7, 0.3); }
      100% { box-shadow: 0 0 0 rgba(255, 193, 7, 0.4); }
    }

    .info-banner .date-info {
      display: flex;
      flex-direction: column;
      font-size: 15px;
      color: #856404;
    }

    .info-banner .date-info strong {
      color: #664d03;
      font-size: 16px;
    }

    .info-banner .deadline-box {
      background: linear-gradient(135deg, #ffc107, #ff9800);
      color: white;
      font-weight: bold;
      padding: 12px 25px;
      border-radius: 25px;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(255, 152, 0, 0.4);
      letter-spacing: 0.5px;
      transition: transform 0.3s;
    }

    .info-banner .deadline-box:hover {
      transform: scale(1.05);
    }

    /* Container widths (match job page) */
    .form-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }

    /* Card styling aligned to job-card */
    .form-card {
      background: white;
      border-radius: 20px;
      padding: 0;
      overflow: hidden;
      box-shadow: var(--card-shadow);
    }

    .form-header {
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
      color: white;
      padding: 12px 16px;
      text-align: center;
    }
    .form-header h2 {
      font-size: 24px;
      margin-bottom: 2px;
      font-weight: 650;
      color: #fff;
    }
    .form-header p { color: rgba(255,255,255,0.9); font-size: 14px; }

    /* Inner form padding and layout matches job-content */
    .form-body {
      padding: 30px 40px;
    }

    /* Reuse job page form-like controls but keep behavior */
    .form-group { margin-bottom: 22px; }
    .form-group label {
      display:block; margin-bottom:8px; color:var(--accent-blue); font-weight:700; font-size:14px;
    }
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
      width:100%;
      padding:12px 15px;
      border:2px solid #bebebe;
      border-radius:12px;
      font-size:15px;
      transition: all .25s;
      background-color:#fafafa;
      color:var(--text);
    }
    input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
      outline:none; border-color:var(--accent-blue); background:#fff;
      box-shadow: 0 0 0 4px rgba(9,132,227,0.06);
    }

    /* Question sections — match look of requirement-card / job-description */
    .question-section {
      background: linear-gradient(135deg, rgba(9,132,227,0.03), rgba(0,184,148,0.03));
      padding: 18px;
      border-radius: 12px;
      margin-bottom: 20px;
      border-left: 4px solid var(--accent-blue);
    }
    .question-section h3 { font-size:15px; color:var(--text); margin-bottom:6px; font-weight:700; }
    .question-section .subtitle { font-size:12px; color:#636e72; margin-bottom:10px; }

    /* Radio layout matches job page visual spacing */
    .radio-group { display:flex; gap:24px; margin-top:10px; flex-wrap:wrap; }
    .radio-option { display:flex; align-items:center; gap:8px; }
    .radio-option input[type="radio"] { width:18px; height:18px; cursor:pointer; accent-color:var(--accent-blue); }

    /* File upload UI — styled like file-upload-label but adapted */
    .file-upload-wrapper { position:relative; margin-top:10px; }
    .file-upload-label {
      display:block; padding:14px 18px; background:linear-gradient(135deg, rgba(9,132,227,0.08), rgba(0,184,148,0.08));
      border:2px dashed var(--accent-blue); border-radius:12px; text-align:center; cursor:pointer; transition: all .25s;
      font-weight:700; color:var(--accent-blue);
    }
    .file-upload-label:hover { background: linear-gradient(135deg, rgba(9,132,227,0.12), rgba(0,184,148,0.12)); border-color:var(--accent-green); }
    input[type="file"] { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; }
    .file-info { margin-top:8px; font-size:13px; color:#636e72; }

    /* Buttons — use same .btn classes to match job page */
    .form-actions { display:flex; gap:15px; justify-content:flex-end; margin-top:30px; padding-top:22px; border-top:1px solid #e9ecef; }



      /* Mobile Styles */
    @media (max-width: 768px) {
      header {
        padding: 15px 20px;
      }
      
      nav, .sign-in-btn {
        display: none;
      }
      
      .hamburger {
        display: flex;
        margin-left: auto;
      }
      
      .mobile-menu {
        display: block;
      }
      
      .hero {
        flex-direction: column;
        margin: 30px auto;
        padding: 0 20px;
        gap: 40px;
      }
      
      .hero-text h1 {
        font-size: 36px;
        text-align: center;
      }
      
      .nature-card {
        flex-direction: column;
        padding: 30px 20px;
        gap: 30px;
        text-align: center;
      }
      
      .nature-icon img {
        width: 150px;
      }
      
      .nature-content h2 {
        font-size: 28px;
      }
      
      .nature-content p {
        font-size: 14px;
      }
      
      .about-section {
        margin: 60px auto;
        padding: 0 20px;
      }
      
      .about-section h2 {
        font-size: 32px;
      }
      
      .about-section p {
        font-size: 14px;
      }
      
      footer {
        padding: 15px 10px;
      }
      .job-grid{ grid-template-columns: 1fr; }

      .job-header {
        padding: 25px 20px;
      }
      
      .job-header h1 {
        font-size: 24px;
      }
      
      .job-content {
        padding: 25px 20px;
      }
      
      .job-details,
      .requirements-grid {
        grid-template-columns: 1fr;
      }
      
      .action-buttons {
        flex-direction: column-reverse;
      }
      
      .btn {
        width: 100%;
        text-align: center;
      }
      
      .info-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
      }

      .info-banner .deadline-box {
        width: 100%;
        text-align: center;
      }
/* Other mobile styles */
      .form-card { padding:0; }
      .form-header { padding:22px; }
      .form-body { padding:20px; }
      .radio-group { flex-direction:column; gap:10px; }
      .form-actions { flex-direction:column-reverse; }
      .btn { width:100%; }
      .file-upload-label { text-align:center; }
    }