 <style>
       /* General Styles */
       body {
           background-color: #f9f9f9;
           overflow-x: hidden;
           font-family: 'Poppins', sans-serif;
           margin: 0;
           padding: 0;
           color: #333;
       }

       h1, h2, h3, h4 {
           font-family: 'Montserrat', sans-serif;
       }

       /* 1. Header Section - Hero Banner */
       .hero-section {
          
           background-size: cover;
           background-position: center;
           background-attachment: fixed;
           color: #fff;
           height: 60vh;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           text-align: center;
           position: relative;
           padding: 0 20px;
       }

       .hero-section h1 {
           font-size: 4rem;
           letter-spacing: 2px;
           margin: 0 0 15px 0;
           text-transform: uppercase;
           font-weight: 700;
           text-shadow: 0 5px 15px rgba(0,0,0,0.3);
           animation: slideUp 1s ease-out forwards;
       }

       .hero-section h2 {
           font-size: 1.5rem;
           font-weight: 300;
           margin-bottom: 20px;
           opacity: 0;
           animation: fadeIn 1s ease-out 0.3s forwards;
       }

       .breadcrumb {
           font-size: 1rem;
           font-weight: 400;
           letter-spacing: 1px;
           opacity: 0;
           animation: fadeIn 1s ease-out 0.5s forwards;
           background: rgba(255, 255, 255, 0.1);
           padding: 10px 20px;
           border-radius: 30px;
           backdrop-filter: blur(5px);
       }

       .breadcrumb a {
           color: #fff;
           text-decoration: none;
           transition: color 0.3s;
       }

       .breadcrumb a:hover {
           color: #e0e0e0;
       }

       /* 2. Why Work With Us Section */
       #why-join {
           padding: 100px 20px;
           background-color: #fff;
           position: relative;
       }

       .section-container {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 60px;
           max-width: 1200px;
           margin: 0 auto;
       }

       .image-content {
           flex: 1;
           opacity: 0;
           transform: translateX(-50px);
           transition: all 0.8s ease-out;
       }

       .image-content.visible {
           opacity: 1;
           transform: translateX(0);
       }

       .image-content img {
           width: 100%;
           border-radius: 15px;
           box-shadow: 0 20px 40px rgba(0,0,0,0.1);
       }

       .text-content {
           flex: 1;
           opacity: 0;
           transform: translateX(50px);
           transition: all 0.8s ease-out;
       }

       .text-content.visible {
           opacity: 1;
           transform: translateX(0);
       }

       .section-title {
           color: #0d6efd;
           font-size: 2.5rem;
           margin-bottom: 25px;
           font-weight: 700;
           position: relative;
           display: inline-block;
       }

       .section-title::after {
           content: '';
           position: absolute;
           left: 0;
           bottom: -10px;
           width: 60px;
           height: 4px;
           background: #00d25b;
           border-radius: 2px;
       }

       .benefits-list {
           list-style: none;
           padding: 0;
           margin-top: 30px;
       }

       .benefits-list li {
           margin-bottom: 20px;
           display: flex;
           align-items: flex-start;
           font-size: 1.1rem;
           color: #555;
       }

       .benefits-list li i {
           color: #00d25b;
           margin-right: 15px;
           margin-top: 5px;
           font-size: 1.2rem;
       }

       /* 4. Life at Company Section */
       #culture {
           padding: 100px 20px;
           background-color: #fff;
           text-align: center;
       }

       .culture-text {
           max-width: 800px;
           margin: 0 auto 50px;
           font-size: 1.2rem;
           color: #555;
       }

       .culture-grid {
           display: grid;
           grid-template-columns: repeat(4, 1fr);
           gap: 15px;
           max-width: 1200px;
           margin: 0 auto;
       }

       .culture-img {
           height: 250px;
           border-radius: 10px;
           overflow: hidden;
           position: relative;
       }

       .culture-img img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.5s ease;
       }

       .culture-img:hover img {
           transform: scale(1.1);
       }

       /* 5. How to Apply Section */
       #process {
           padding: 100px 20px;
           background-color: #f8f9fa;
           text-align: center;
       }

       .steps-container {
           display: flex;
           justify-content: center;
           gap: 40px;
           margin-top: 50px;
           flex-wrap: wrap;
       }

       .process-step {
           flex: 1;
           min-width: 250px;
           max-width: 300px;
           background: #fff;
           padding: 30px;
           border-radius: 15px;
           box-shadow: 0 5px 15px rgba(0,0,0,0.05);
           position: relative;
           opacity: 0;
           transform: translateY(20px);
       }

       .process-step.visible {
           opacity: 1;
           transform: translateY(0);
       }

       .step-icon {
           width: 70px;
           height: 70px;
           background: #eef2ff;
           color: #0d6efd;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.8rem;
           margin: 0 auto 20px;
       }

       .step-num {
           position: absolute;
           top: -15px;
           left: 50%;
           transform: translateX(-50%);
           background: #00d25b;
           color: #fff;
           width: 30px;
           height: 30px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: 700;
       }

       /* Application Form Section */
       #application-form {
           padding: 100px 20px;
           background-color: #fff;
           position: relative;
           z-index: 1;
       }

       .form-card {
           background: #fff;
           border-radius: 20px;
           box-shadow: 0 15px 35px rgba(0,0,0,0.1);
           max-width: 800px;
           margin: 0 auto;
           padding: 50px;
           border-top: 5px solid #0d6efd;
           opacity: 0;
           transform: translateY(30px);
       }

       .form-card.visible {
           opacity: 1;
           transform: translateY(0);
       }

       .form-group {
           margin-bottom: 25px;
       }

       .form-label {
           display: block;
           margin-bottom: 8px;
           font-weight: 600;
           color: #333;
       }

       .form-control {
           width: 100%;
           padding: 12px 15px;
           border: 1px solid #ddd;
           border-radius: 8px;
           font-family: 'Poppins', sans-serif;
           transition: border-color 0.3s;
       }

       .form-control:focus {
           border-color: #0d6efd;
           outline: none;
           box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
       }

       .submit-btn {
           display: block;
           width: 100%;
           padding: 15px;
           background-color: #0d6efd;
           color: #fff;
           border: none;
           border-radius: 8px;
           font-size: 1.1rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s;
           margin-top: 30px;
       }

       .submit-btn:hover {
           background-color: #0a58ca;
           box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
           transform: translateY(-2px);
       }

       /* 6. Call to Action Section */
       #cta {
           padding: 80px 20px;
           background: linear-gradient(45deg, #0d6efd, #00d25b);
           text-align: center;
           color: #fff;
           position: relative;
           overflow: hidden;
       }

       .wave-animation {
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 100px;
           background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" fill="rgba(255,255,255,0.1)"></path></svg>');
           background-size: 200% 100%;
           animation: waveFlow 15s linear infinite;
       }

       .cta-content {
           position: relative;
           z-index: 2;
           max-width: 800px;
           margin: 0 auto;
       }

       .cta-content h2 {
           font-size: 2.5rem;
           margin-bottom: 15px;
           font-weight: 700;
       }

       .cta-btn-large {
           display: inline-block;
           padding: 18px 50px;
           background: #fff;
           color: #0d6efd;
           font-weight: 700;
           border-radius: 50px;
           text-decoration: none;
           margin-top: 30px;
           transition: all 0.3s;
           box-shadow: 0 10px 30px rgba(0,0,0,0.2);
       }

       .cta-btn-large:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 40px rgba(0,0,0,0.3);
           color: #00d25b;
       }

       /* Animations Keyframes */
       @keyframes slideUp {
           from { opacity: 0; transform: translateY(30px); }
           to { opacity: 1; transform: translateY(0); }
       }

       @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
       }

       @keyframes waveFlow {
           0% { background-position-x: 0; }
           100% { background-position-x: 200%; }
       }

       /* Responsive Design */
       @media (max-width: 992px) {
           .section-container {
               flex-direction: column;
               text-align: center;
           }

           .image-content, .text-content {
               transform: none; /* Reset transform for simpler mobile animation */
           }

           .section-title::after {
               left: 50%;
               transform: translateX(-50%);
           }
           
           .benefits-list li {
               justify-content: center;
           }
           
           .culture-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }

       @media (max-width: 768px) {
           .hero-section h1 { font-size: 2.5rem; }
           .hero-section h2 { font-size: 1.1rem; }

           .culture-grid {
               grid-template-columns: 1fr;
           }

           .form-card {
               padding: 30px 20px;
           }
       }
      </style>