:root { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #3b82f6; --accent: #f59e0b; --accent-dark: #d97706; --text-light: #ffffff; --text-dark: #1f2937; --bg-white: #ffffff; --bg-light: #f9fafb; --bg-gray: #f3f4f6; --border-light: #e5e7eb; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 5rem; --border-radius: 10px; --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-white); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; } /* Utilities */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-sm); position: relative; z-index: 1; } .text-center { text-align: center; } .mb-1 { margin-bottom: var(--spacing-xs); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-3 { margin-bottom: var(--spacing-md); } .mb-4 { margin-bottom: var(--spacing-lg); } .mb-5 { margin-bottom: var(--spacing-xl); } .mt-1 { margin-top: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mt-3 { margin-top: var(--spacing-md); } .mt-4 { margin-top: var(--spacing-lg); } .mt-5 { margin-top: var(--spacing-xl); } .accent-text { color: var(--accent-dark); font-weight: 700; } .blue-bg { background-color: var(--primary); color: var(--text-light); } .white-bg { background-color: var(--bg-white); color: var(--text-dark); } .light-bg { background-color: var(--bg-light); color: var(--text-dark); } /* Animations */ .fadeInUp { animation: fadeInUp 0.6s ease-out; } .fadeIn { animation: fadeIn 0.8s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-float { animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .animate-scale { transition: transform 0.3s ease; } .animate-scale:hover { transform: scale(1.05); } /* Particles */ .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .particle { position: absolute; border-radius: 50%; opacity: 0.3; background-color: var(--primary-light); } /* Header */ .header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; } .header.scrolled { padding: 0.6rem 0; background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); text-decoration: none; display: flex; align-items: center; } .logo i { margin-right: var(--spacing-xs); font-size: 1.8rem; color: var(--accent); transition: transform 0.3s ease; } .logo:hover i { transform: rotate(15deg); } .header-button { background-color: var(--primary); color: var(--text-light); border: none; padding: 0.5rem 1.2rem; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); } .header-button i { margin-right: 0.5rem; } .header-button:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 8px rgba(37, 99, 235, 0.3); } .header-button:active { transform: translateY(0); } /* Hero Section */ .hero { padding-top: 7rem; padding-bottom: 5rem; background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%); color: var(--text-dark); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.1) 0%, transparent 400px), radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.08) 0%, transparent 400px); } .hero-bg-shape { position: absolute; z-index: 0; } .hero-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-lg); position: relative; z-index: 2; } .hero-content { flex: 1; } .hero-image { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } .hero-image::after { content: ''; position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%); z-index: -1; } .hero-title { font-size: 3rem; font-weight: 700; margin-bottom: var(--spacing-sm); line-height: 1.2; color: var(--text-dark); background: linear-gradient(90deg, var(--text-dark) 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.2rem; margin-bottom: var(--spacing-md); color: #4b5563; max-width: 600px; line-height: 1.6; } .highlight-box { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: var(--border-radius); padding: var(--spacing-md); margin-bottom: var(--spacing-md); border-left: 4px solid var(--primary); max-width: 600px; box-shadow: var(--box-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .highlight-box:hover { transform: translateY(-5px); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1); } .salary-highlight { font-size: 2.2rem; font-weight: 700; color: var(--primary); margin-bottom: var(--spacing-xs); position: relative; display: inline-block; } .salary-highlight::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 3px; background: var(--accent); border-radius: 3px; } .hero-img { max-width: 100%; height: auto; border-radius: 20px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transition: transform 0.5s ease, box-shadow 0.5s ease; transform: perspective(1000px) rotateY(-5deg); filter: contrast(1.05); } .hero-img:hover { transform: perspective(1000px) rotateY(0deg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .hero-tag { display: inline-block; background-color: rgba(37, 99, 235, 0.1); color: var(--primary); padding: 0.5rem 1rem; border-radius: 30px; font-size: 0.9rem; font-weight: 600; margin-bottom: var(--spacing-sm); transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .hero-tag:hover { background-color: rgba(37, 99, 235, 0.15); transform: translateY(-2px); } .hero-tag i { margin-right: 0.5rem; color: var(--primary); } .job-stats { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--spacing-sm); 
  margin-top: var(--spacing-sm); 
}

.job-stat { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  font-size: 0.95rem; 
  color: #4b5563; 
  transition: transform 0.3s ease; 
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 5px;
}

.job-stat:hover { 
  transform: translateX(5px); 
  background-color: rgba(37, 99, 235, 0.05);
}

.job-stat i { 
  color: var(--primary); 
  font-size: 1.1rem;
  min-width: 20px;
  text-align: center;
  margin-right: 8px;
}

.cta-button { background: linear-gradient(45deg,
      var(--primary) 0%, var(--primary-light) 100%); color: var(--text-light); border: none; padding: 1rem 2rem; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; margin-top: var(--spacing-md); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); position: relative; overflow: hidden; z-index: 1; } .cta-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary-light) 0%, var(--primary) 100%); z-index: -1; transition: opacity 0.3s ease; opacity: 0; } .cta-button:hover::before { opacity: 1; } .cta-button i { margin-right: 0.75rem; font-size: 1.2rem; transition: transform 0.3s ease; } .cta-button:hover i { transform: translateX(3px); } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 20px -3px rgba(37, 99, 235, 0.4); } .cta-button:active { transform: translateY(-1px); box-shadow: 0 5px 10px -3px rgba(37, 99, 235, 0.3); } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } /* Features Section */ .features-section { padding: var(--spacing-md) 0; background-color: var(--bg-white); position: relative; overflow: hidden; } .features-section::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%); z-index: 0; } .features-container { display: flex; flex-wrap: wrap; margin: 0 -10px; position: relative; z-index: 1; } .feature-item { display: flex; align-items: flex-start; padding: 20px; flex: 0 0 50%; max-width: 50%; box-sizing: border-box; transition: all 0.3s ease; position: relative; } .feature-item:hover { transform: translateY(-5px); } .feature-item::after { content: ''; position: absolute; bottom: 10px; left: 20px; right: 20px; height: 2px; background: linear-gradient(90deg, var(--primary-light) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .feature-item:hover::after { opacity: 1; } .feature-icon-compact { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.2) 100%); color: var(--primary); margin-right: 20px; flex-shrink: 0; font-size: 1.4rem; box-shadow: 0 5px 15px rgba(37, 99, 235, 0.1); position: relative; overflow: hidden; transition: all 0.3s ease; } .feature-icon-compact::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .feature-item:hover .feature-icon-compact { color: white; transform: rotateY(180deg); } .feature-item:hover .feature-icon-compact::before { opacity: 1; } .feature-content { flex: 1; } .feature-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; color: var(--primary-dark); position: relative; display: inline-block; transition: color 0.3s ease; } .feature-item:hover .feature-title { color: var(--primary); } .feature-desc { font-size: 0.95rem; color: #4b5563; line-height: 1.5; } @media (max-width: 768px) { .features-container { margin: 0 -5px; } .feature-item { flex: 0 0 100%; max-width: 100%; padding: 15px; } .feature-icon-compact { width: 50px; height: 50px; font-size: 1.2rem; } .features-section { padding: var(--spacing-sm) 0; } } /* Section Styles */ .section { padding: var(--spacing-md) 0; position: relative; } .section-title { text-align: center; margin-bottom: var(--spacing-md); } .section-title h2 { font-size: 1.8rem; margin-bottom: 10px; position: relative; color: inherit; display: inline-block; } .section-title h2::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--accent); border-radius: 3px; } .section-title p { color: #6c757d; font-size: 1rem; } .green-bg .section-title h2 { color: var(--text-light); } .green-bg .section-title p { color: rgba(255, 255, 255, 0.9); } /* How It Works */ .steps-section { padding: var(--spacing-xl) 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--text-light); position: relative; overflow: hidden; } .steps-section::before { content: ''; position: absolute; top: -20%; right: -20%; width: 60%; height: 140%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1) 0%, transparent 70%); transform: rotate(-30deg); z-index: 0; } .steps-section::after { content: ''; position: absolute; bottom: -20%; left: -20%; width: 60%; height: 140%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.05) 0%, transparent 70%); transform: rotate(30deg); z-index: 0; } .steps-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .step-card { display: flex; margin-bottom: var(--spacing-md); background-color: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: var(--spacing-md); position: relative; backdrop-filter: blur(10px); transition: all 0.3s ease; transform-origin: center left; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); } .step-card:hover { transform: translateY(-5px) translateX(5px); background-color: rgba(255, 255, 255, 0.12); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .step-card:last-child { margin-bottom: 0; } .step-card::before { content: ''; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.3); transition: all 0.3s ease; } .step-card:hover::before { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.2); } .step-number { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.9); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; margin-right: 20px; flex-shrink: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; z-index: 1; } .step-card:hover .step-number { transform: scale(1.1) rotate(10deg); background: var(--accent); color: white; } .step-content { flex: 1; } .step-content h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; color: var(--text-light); position: relative; display: inline-block; } .step-content h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } .step-card:hover .step-content h3::after { width: 100%; } .step-content p { font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } @media (max-width: 768px) { .steps-section { padding: var(--spacing-md) 0; } .step-card { padding: var(--spacing-sm); } .step-number { width: 45px; height: 45px; font-size: 1.2rem; margin-right: 15px; } .step-content h3 { font-size: 1.1rem; } .step-content p { font-size: 0.95rem; } } /* Requirements */ .requirements-section { padding: var(--spacing-md) 0; background-color: #fff; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; } .requirements-container { display: flex; flex-wrap: wrap; margin: 0 -10px; } .requirement-item { flex: 0 0 50%; max-width: 50%; padding: 10px; box-sizing: border-box; } .requirement-content { background-color: #f8f9fa; border-radius: var(--border-radius); padding: 15px; border-left: 3px solid var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.05); height: 100%; } .requirement-title { display: flex; align-items: center; margin-bottom: 8px; font-size: 1rem; color: var(--primary-dark); font-weight: 600; } .requirement-title i { margin-right: 8px; color: var(--primary); font-size: 1.1rem; } .requirement-desc { font-size: 0.9rem; color: #6c757d; line-height: 1.4; } /* Dividers */ .divider { height: 20px; position: relative; background-color: transparent; } /* CTA Section */ .cta-section { padding: var(--spacing-lg) 0; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); color: var(--text-light); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.1) 0%, transparent 200px), radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.1) 0%, transparent 200px); z-index: 0; } .cta-title { font-size: 2.2rem; margin-bottom: var(--spacing-sm); background: linear-gradient(135deg, var(--text-light) 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; z-index: 1; } .cta-section p { font-size: 1.1rem; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-md); position: relative; z-index: 1; } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @media (max-width: 768px) { .section { padding: var(--spacing-sm) 0; } .section-title { margin-bottom: var(--spacing-sm); } .section-title h2 { font-size: 1.5rem; } .requirement-item { flex: 0 0 100%; max-width: 100%; } .cta-title { font-size: 1.5rem; } } /* Footer */ .footer { background-color: var(--primary-dark); color: var(--text-light); padding: var(--spacing-md) 0; text-align: center; font-size: 0.9rem; } .footer p { opacity: 0.8; } /* Mobile Sticky CTA */ .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.9); padding: var(--spacing-xs) var(--spacing-sm); z-index: 1000; display: none; flex-direction: row; align-items: center; justify-content: space-between; box-shadow: 0 -4px 10px rgba(0,0,0,0.2); } .spots-counter { color: var(--accent); font-weight: 600; margin-right: var(--spacing-xs); font-size: 0.9rem; flex: 1; } .mobile-cta-button { background-color: var(--accent); color: var(--text-dark); border: none; flex: 1; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius); font-weight: 600; font-size: 1rem; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: all 0.3s ease; } .mobile-cta-button:active { transform: scale(0.98); } .mobile-cta-button i { margin-right: 0.5rem; } .img-box img{ width: 100%; height: auto; display: block; max-width: 100%; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .img-box { margin: var(--spacing-md) 0; } @media (max-width: 992px) { .hero-container { flex-direction: column; gap: var(--spacing-md); } .hero-content, .hero-image { flex: none; width: 100%; } .hero-image { order: -1; } .hero-title { font-size: 2rem; text-align: center; } .hero-subtitle { text-align: center; margin-left: auto; margin-right: auto; } .highlight-box { margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .hero { padding-top: 1.5rem; padding-bottom: 2rem; } .hero-title { font-size: 1.8rem; } .salary-highlight { font-size: 1.6rem; } .job-stats { justify-content: center; } } @media (max-width: 576px) { .hero { padding-top: 2.5rem; padding-bottom: 1.5rem; } .hero-title { font-size: 1.5rem; } .hero-subtitle { font-size: 0.95rem; } .salary-highlight { font-size: 1.4rem; } .highlight-box { padding: var(--spacing-sm); } .job-stats { flex-direction: column; align-items: baseline; gap: 0.2rem; } } /* Small phone optimization */ @media (max-width: 380px) { .hero-title { font-size: 1.3rem; } .accent-text { font-size: 1.5rem; } .salary-highlight { font-size: 1.4rem; } .section-title h2 { font-size: 1.3rem; } .requirement-card h3 { font-size: 0.95rem; } .feature-title { font-size: 1rem; } .cta-title { font-size: 1.4rem; } } .text-center{ display: flex; justify-content: center; align-items: center; } /* Testimonials */ .testimonials-section { padding: var(--spacing-md) 0; background-color: #f8f9fa; position: relative; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; } .testimonial-container { max-width: 800px; margin: 0 auto; position: relative; } .comment-list-wrapper { position: relative; overflow: hidden; height: 400px; margin-bottom: var(--spacing-md); } .comment-list { position: relative; animation: scrollComments 30s linear infinite; } .comment-item { display: flex; margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--border-light); } .comment-item:last-child { margin-bottom: 0; border-bottom: none; } @keyframes scrollComments { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-50%)); } } .comment-avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: var(--spacing-sm); flex-shrink: 0; overflow: hidden; border: 2px solid var(--primary-light); background-color: #e9f7ef; } .comment-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-content { flex: 1; } .comment-text { margin-bottom: var(--spacing-xs); color: #212529; line-height: 1.5; font-size: 0.95rem; } .comment-author { font-weight: 600; color: var(--primary-dark); margin-bottom: 0.3rem; font-size: 0.95rem; } .comment-meta { font-size: 0.8rem; color: #6c757d; display: flex; align-items: center; gap: 1rem; } .comment-rating { display: flex; color: var(--accent); } /* Comment Form */ .comment-form { margin-top: var(--spacing-md); background-color: #fff; padding: var(--spacing-md); border-radius: var(--border-radius); box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .form-title { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--primary-dark); } .form-group { margin-bottom: var(--spacing-sm); } .form-label { display: block; margin-bottom: 0.3rem; font-weight: 500; color: #212529; font-size:
      0.9rem; }
       .form-control { width: 100%; padding: 0.75rem; border: 1px solid var(--border-light); border-radius: var(--border-radius); font-family: inherit; font-size: 0.9rem; transition: border-color 0.3s; } .form-control:focus { outline: none; border-color: var(--primary-light); } textarea.form-control { min-height: 80px; resize: vertical; } .submit-button { background-color: var(--primary); color: white; border: none; padding: 0.7rem 1.2rem; border-radius: var(--border-radius); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem; } .submit-button:hover { background-color: var(--primary-dark); } .form-row { display: flex; gap: var(--spacing-sm); } @media (max-width: 768px) { .comment-list-wrapper { height: 400px; } .comment-avatar { width: 40px; height: 40px; } .form-row { flex-direction: column; gap: 10px; } .comment-form { padding: 15px; } } @media (max-width: 576px) { .comment-list-wrapper { height: 400px; } .comment-avatar { width: 35px; height: 35px; } .comment-meta { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .comment-text { font-size: 0.85rem; } }
       .bg-button-bt{background:#4caf50 !important; ;}