@chipstcp/upyog-css 1.0.0

package/src/pages/employee/landing.scss

@@ -0,0 +1,1803 @@
+/* ========================================
+   Landing Page - Modern Redesign
+   ======================================== */
+
+.landing-page {
+  min-height: 100vh;
+  background-color: #f8fafc;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Hero Section */
+.landing-hero {
+  position: relative;
+  min-height: 85vh;
+  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #0ea5e9 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+    opacity: 0.5;
+  }
+}
+
+.landing-hero-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
+              radial-gradient(ellipse at bottom left, rgba(14, 165, 233, 0.3) 0%, transparent 50%);
+}
+
+.landing-hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+
+.landing-hero-text {
+  text-align: center;
+  max-width: 700px;
+}
+
+.landing-hero-title {
+  font-size: 48px;
+  font-weight: 800;
+  color: #ffffff;
+  margin-bottom: 20px;
+  line-height: 1.2;
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+
+  span {
+    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 32px;
+  }
+}
+
+.landing-hero-subtitle {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.7;
+  margin: 0;
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
+}
+
+/* Login Cards */
+.landing-login-cards {
+  display: flex;
+  gap: 32px;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    max-width: 400px;
+  }
+}
+
+.landing-login-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  padding: 40px 32px;
+  width: 320px;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
+              0 8px 25px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
+    transform: scaleX(0);
+    transition: transform 0.4s ease;
+  }
+
+  &:hover {
+    transform: translateY(-12px) scale(1.02);
+    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2),
+                0 15px 40px rgba(0, 0, 0, 0.15);
+
+    &::before {
+      transform: scaleX(1);
+    }
+
+    .landing-login-card-icon {
+      transform: scale(1.1) rotate(5deg);
+    }
+
+    .landing-login-card-btn {
+      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+      color: #ffffff;
+
+      svg {
+        transform: translateX(4px);
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+    padding: 32px 24px;
+  }
+}
+
+.landing-login-card-citizen {
+  .landing-login-card-icon {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+    color: #2563eb;
+  }
+
+  &:hover .landing-login-card-btn {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  }
+}
+
+.landing-login-card-employee {
+  .landing-login-card-icon {
+    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+    color: #059669;
+  }
+
+  &:hover .landing-login-card-btn {
+    background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  }
+}
+
+.landing-login-card-icon {
+  width: 72px;
+  height: 72px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  transition: all 0.4s ease;
+
+  svg {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+.landing-login-card-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 12px 0;
+}
+
+.landing-login-card-desc {
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0 0 24px 0;
+}
+
+.landing-login-card-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #f1f5f9;
+  color: #475569;
+  padding: 14px 24px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    transition: transform 0.3s ease;
+  }
+}
+
+/* ========================================
+   Original Landing Page Styles
+   ======================================== */
+
+.middle-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 522px;
+    @media (min-width: 768px) {
+      flex-direction: row;
+      min-height: 360px;
+    }
+  }
+  .middle-left-half {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    @media (min-width: 768px) {
+      width: 50%;
+    }
+  }
+  .middle-left-half-upper {
+    min-height: 162px;
+    margin-bottom: 18px;
+    box-shadow: 0px 0px 5px 0px #22222270;
+    font-family: Noto sans;
+    background-color: #ffe5e5;
+    @media (min-width: 768px) {
+      height: 50%;
+    }
+  }
+  .middle-left-half-upper-body {
+    list-style-type: none;
+    padding: 0px 10px;
+  }
+  
+  .middle-left-half-upper-body ul li {
+    text-decoration: none !important;
+    margin-top: 20px;
+  }
+  
+  .middle-left-half-lower {
+    min-height: 162px;
+    box-shadow: 0px 0px 5px 0px #22222270;
+    @media (min-width: 768px) {
+      height: 45%;
+    }
+  }
+  .middle-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 16px;
+    min-height: 360px; 
+    position: relative;
+    z-index: 2;
+    margin-bottom: 20px; 
+  }
+  .middle-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    @media (min-width: 768px) {
+      flex-direction: row;
+    }
+  }
+  .middle-left-half {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .middle-right-half {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 0px 5px 0px #22222270;
+  }
+  .middle-header {
+    font-size: 20px;
+    background-color: #092e86;
+    color: white;
+    padding: 10px;
+  }
+
+  .middle-right-body {
+    display: flex;
+    flex-direction: column; 
+    @media (max-width: 768px) {
+      flex-direction: row; 
+    }
+  }
+  .middle-image-section {
+    flex: 40%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    height: 160px;
+    img {
+      max-width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+    @media (max-width: 768px) {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .middle-right-content-section {
+    flex: 60%;
+    padding: 10px;
+    @media (max-width: 768px) {
+      width: 60%;
+    }
+  }
+  .middle-right-content-section li {
+    padding: 10px 0;
+    display: flex;
+  }
+
+  .photo-gallery {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 10px;
+    height: 150px;
+    background-color: #f5f5f5;
+  }
+  .gallery-image {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    transition: transform 0.5s ease-in-out;
+  }
+ 
+  .gallery-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+  .gallery-btn.left {
+    left: 10px;
+  }
+  .gallery-btn.right {
+    right: 10px;
+  }
+  .gallery-btn:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .help-section {
+    text-align: center;
+    padding: 20px 60px;
+    position: relative;
+    clear: both; 
+  
+    @media (max-width: 768px) {
+      margin-top: 35vh;
+    }
+  
+    @media (max-width: 600px) {
+      margin-top: 40vh;
+    }
+  
+    @media (max-width: 450px) {
+      margin-top: 75vh;
+    }
+  }
+  .help-section-header {
+    margin-bottom: 20px;
+    color: #18191c;
+    font-size: 32px;
+    font-family: Poppins;
+    font-weight: 500;
+  }
+  .help-section-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: center;
+    @media (min-width: 768px) {
+      flex-direction: row;
+      justify-content: center;
+    }
+  }
+  .help-section-button {
+    display: flex;
+    align-items: center;
+    padding: 8px 20px 8px 10px;
+    border-radius: 90px;
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 300px;
+    background-color: white;
+    font-family: Noto sans, sans-serif;
+    @media (min-width: 640px) {
+      margin-right: 20px;
+    }
+  }
+  .help-section-text-container {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+  }
+  .help-section-medium {
+    font-size: 16px;
+    letter-spacing: 0.5px;
+    font-weight: 400;
+    color: #1c1d1f;
+  }
+  .help-section-contact-no {
+    font-size: 20px;
+    letter-spacing: 0.25px;
+    font-weight: 600;
+    color: #61646b;
+  }
+  .help-section-icon {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+  }
+
+  .about-section,
+  .middle-section {
+    padding: 20px 60px;
+  }
+  .title {
+    text-align: left;
+    color: #18191c;
+    font-size: 32px;
+    font-family: Poppins;
+    font-weight: 400;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+    margin-bottom: 20px;
+  }
+  .about-content {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    @media (min-width: 640px) {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+  .content {
+    display: flex;
+    justify-content: space-between;
+  }
+  .about-left-half,
+  .about-right-half {
+    width: 100%;
+    font-family: Noto sans, sans-serif;
+    font-size: 16px;
+    color: #61646b;
+    letter-spacing: 0.5px;
+    @media (min-width: 640px) {
+      width: 48%;
+    }
+  }
+  /* .top-section-parent {
+    position: relative;
+    width: 100%;
+    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #0ea5e9 100%);
+    padding: 40px 20px 60px;
+    margin-top: -20px;
+    
+    @media (max-width: 768px) {
+      padding: 30px 15px 50px;
+    }
+  } */
+
+  .top-section-parent {
+    display: none;
+  }
+
+  .top-section-wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    position: relative;
+    
+    @media (max-width: 640px) {
+      gap: 8px;
+    }
+  }
+
+  .top-section-slider-container {
+    flex: 1;
+    overflow: hidden;
+    border-radius: 16px;
+  }
+
+  .top-section-slider {
+    display: flex;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &.sliding-next {
+      animation: slideNext 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    &.sliding-prev {
+      animation: slidePrev 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+
+  @keyframes slideNext {
+    0% { opacity: 0.8; }
+    50% { opacity: 0.9; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes slidePrev {
+    0% { opacity: 0.8; }
+    50% { opacity: 0.9; }
+    100% { opacity: 1; }
+  }
+
+  .top-section-slide-item {
+    flex-shrink: 0;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  .top-section-logo-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    padding: 24px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border: 2px solid transparent;
+    height: 140px;
+    
+    &:hover {
+      transform: translateY(-8px) scale(1.02);
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+      border-color: rgba(59, 130, 246, 0.3);
+      
+      .top-section-logo-icon {
+        transform: scale(1.1);
+      }
+    }
+    
+    @media (max-width: 640px) {
+      padding: 20px 12px;
+      height: 120px;
+    }
+  }
+
+  .top-section-logo-icon {
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    transition: transform 0.3s ease;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    
+    @media (max-width: 640px) {
+      width: 44px;
+      height: 44px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .top-section-logo-text {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e293b;
+    margin: 0;
+    line-height: 1.3;
+    
+    @media (max-width: 640px) {
+      font-size: 11px;
+    }
+  }
+
+  .top-section-nav-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.95);
+    color: #1e40af;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+    
+    &:hover:not(.disabled) {
+      background: #ffffff;
+      transform: scale(1.1);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+    
+    &.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    
+    @media (max-width: 640px) {
+      width: 36px;
+      height: 36px;
+      
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  .top-section-dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .top-section-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 0;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.7);
+    }
+    
+    &.active {
+      background: #ffffff;
+      transform: scale(1.3);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  /* Keep old styles for backward compatibility */
+  .top-section {
+    position: absolute;
+    top: -50px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .logo-box {
+    width: 120px;
+    height: 100px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 10px;
+    box-sizing: border-box;
+    border-radius: 8px;
+  }
+  .logo {
+    max-width: 70%;
+    max-height: 50%;
+    padding-top: 25px;
+  }
+  .logo-text {
+    margin-top: 8px; 
+    color: black;
+    font-size: 15px; 
+  }
+  .nav-button {
+    background: white;
+    border: none;
+    color: black;
+    font-size: 24px;
+    cursor: pointer;
+    margin: 0 10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+/* ========================================
+   Services Section (Middle Section)
+   ======================================== */
+
+.landing-services-section {
+  padding: 60px 20px;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+}
+
+.landing-services-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.landing-services-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.landing-services-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+  color: #1e40af;
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.landing-services-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0;
+  
+  @media (max-width: 768px) {
+    font-size: 28px;
+  }
+}
+
+.landing-services-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.landing-services-card {
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.landing-services-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+  color: #ffffff;
+  
+  svg {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+  
+  h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+.landing-services-card-body {
+  padding: 24px;
+}
+
+.landing-services-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.landing-services-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f5f9;
+  transition: all 0.2s ease;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:hover {
+    padding-left: 8px;
+    
+    .landing-services-list-bullet {
+      transform: scale(1.2);
+    }
+    
+    a {
+      color: #2563eb;
+    }
+  }
+  
+  a {
+    color: #475569;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+    transition: color 0.2s ease;
+  }
+}
+
+.landing-services-list-bullet {
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+/* Photo Gallery */
+.landing-gallery-container {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+.landing-gallery-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.5s ease;
+}
+
+.landing-gallery-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  color: #1e40af;
+  
+  &:hover {
+    background: #ffffff;
+    transform: translateY(-50%) scale(1.1);
+  }
+  
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.landing-gallery-prev {
+  left: 12px;
+}
+
+.landing-gallery-next {
+  right: 12px;
+}
+
+/* News Items */
+.landing-news-item {
+  padding: 16px 0;
+  border-bottom: 1px solid #f1f5f9;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.landing-news-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px 0;
+  line-height: 1.5;
+}
+
+.landing-news-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.landing-news-date {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.landing-news-link {
+  font-size: 12px;
+  color: #3b82f6;
+  text-decoration: none;
+  font-weight: 600;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+/* ========================================
+   Help Section
+   ======================================== */
+
+.landing-help-section {
+  padding: 80px 20px;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.landing-help-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.landing-help-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+
+.landing-help-text {
+  text-align: center;
+  max-width: 600px;
+}
+
+.landing-help-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  color: #ffffff;
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 16px;
+}
+
+.landing-help-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 16px 0;
+  
+  @media (max-width: 768px) {
+    font-size: 28px;
+  }
+}
+
+.landing-help-subtitle {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.7;
+}
+
+.landing-help-cards {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  justify-content: center;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    width: 100%;
+    max-width: 400px;
+  }
+}
+
+.landing-help-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 300px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 2px solid transparent;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+    border-color: var(--card-color);
+    
+    .landing-help-card-arrow {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  @media (max-width: 768px) {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+.landing-help-card-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--card-bg);
+  flex-shrink: 0;
+  
+  img {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+  }
+}
+
+.landing-help-card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.landing-help-card-label {
+  font-size: 14px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.landing-help-card-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.landing-help-card-arrow {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--card-color);
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: all 0.3s ease;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* ========================================
+   About Section
+   ======================================== */
+
+/* .landing-about-section {
+  padding: 80px 20px;
+  background: #ffffff;
+} */
+
+.landing-about-section{
+  display: none;
+}
+
+.landing-about-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.landing-about-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.landing-about-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+  color: #1e40af;
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.landing-about-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 16px 0;
+  
+  @media (max-width: 768px) {
+    font-size: 24px;
+  }
+}
+
+.landing-about-divider {
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 2px;
+  margin: 0 auto;
+}
+
+.landing-about-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.landing-about-main {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+  
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.landing-about-card {
+  background: #f8fafc;
+  border-radius: 20px;
+  padding: 32px;
+  position: relative;
+  overflow: hidden;
+  
+  h3 {
+    font-size: 22px;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 0 0 20px 0;
+  }
+  
+  p {
+    font-size: 15px;
+    color: #64748b;
+    line-height: 1.8;
+    margin: 0 0 16px 0;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    strong {
+      color: #1e40af;
+    }
+  }
+}
+
+.landing-about-card-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+}
+
+.landing-about-highlights {
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    gap: 16px;
+  }
+}
+
+.landing-about-highlight-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  padding: 16px 24px;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.landing-about-highlight-icon {
+  font-size: 24px;
+}
+
+.landing-about-highlight-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+}
+
+/* ========================================
+   Footer
+   ======================================== */
+
+.landing-footer {
+  background: #0f172a;
+  color: #ffffff;
+}
+
+/* Please do not remove until binit sir and palam sir approves */
+
+/* .landing-footer-partners {
+  background: #f8fafc;
+  padding: 40px 20px;
+} */
+
+/* .landing-footer-partners-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+} */
+
+.landing-footer-partners-container{
+  display: none;
+}
+
+.landing-footer-partners-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin: 0 0 24px 0;
+}
+
+.landing-footer-partners-grid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  flex-wrap: wrap;
+  
+  @media (max-width: 768px) {
+    gap: 20px;
+  }
+}
+
+.landing-footer-partner-logo {
+  background: #ffffff;
+  padding: 12px 20px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  }
+  
+  img {
+    height: 40px;
+    width: auto;
+    object-fit: contain;
+    
+    @media (max-width: 768px) {
+      height: 32px;
+    }
+  }
+}
+
+/* Please do not remove until binit sir and palam sir approves */
+
+/*.landing-footer-main {
+  padding: 60px 20px;
+} */
+
+.landing-footer-main {
+  display: none;
+}
+
+.landing-footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.landing-footer-grid {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr;
+  gap: 48px;
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
+  }
+  
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+}
+
+.landing-footer-section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0 0 20px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: #3b82f6;
+  }
+}
+
+.landing-footer-address-content {
+  p {
+    font-size: 14px;
+    color: #94a3b8;
+    line-height: 1.8;
+    margin: 0 0 4px 0;
+  }
+}
+
+.landing-footer-email {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px !important;
+  color: #3b82f6 !important;
+  
+  svg {
+    color: #3b82f6;
+  }
+}
+
+.landing-footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  li {
+    margin-bottom: 12px;
+    
+    a {
+      font-size: 14px;
+      color: #94a3b8;
+      text-decoration: none;
+      transition: all 0.2s ease;
+      display: inline-block;
+      
+      &:hover {
+        color: #ffffff;
+        transform: translateX(4px);
+      }
+    }
+  }
+}
+
+.landing-footer-social-icons {
+  display: flex;
+  gap: 12px;
+}
+
+.landing-footer-social-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  transition: all 0.3s ease;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+  
+  &:hover {
+    transform: translateY(-4px);
+  }
+}
+
+.landing-footer-social-facebook:hover {
+  background: #1877f2;
+}
+
+.landing-footer-social-twitter:hover {
+  background: #1da1f2;
+}
+
+.landing-footer-social-linkedin:hover {
+  background: #0077b5;
+}
+
+.landing-footer-social-youtube:hover {
+  background: #ff0000;
+}
+
+.landing-footer-bottom {
+  background: #020617;
+  padding: 20px;
+}
+
+.landing-footer-bottom-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  
+  @media (max-width: 640px) {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.landing-footer-powered,
+.landing-footer-license,
+.landing-footer-copyright {
+  font-size: 13px;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  
+  &:hover {
+    color: #ffffff;
+  }
+}
+
+.landing-footer-license {
+  text-decoration: none;
+}
+
+.landing-footer-divider {
+  color: #475569;
+  
+  @media (max-width: 640px) {
+    display: none;
+  }
+}
+
+/* ========================================
+   Middle Section - Explore Our Initiatives
+   ======================================== */
+
+.landing-middle-section {
+  padding: 80px 20px;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+}
+
+.landing-middle-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.landing-section-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.landing-section-title {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 12px 0;
+  
+  @media (max-width: 768px) {
+    font-size: 28px;
+  }
+}
+
+.landing-section-subtitle {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0;
+}
+
+.landing-middle-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.landing-info-card {
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.landing-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+  color: #ffffff;
+}
+
+.landing-card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.landing-card-icon-purple {
+  background: rgba(139, 92, 246, 0.3);
+}
+
+.landing-card-icon-amber {
+  background: rgba(245, 158, 11, 0.3);
+}
+
+.landing-card-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* Projects Card */
+.landing-projects-card {
+  .landing-card-header {
+    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+  }
+}
+
+.landing-projects-list {
+  padding: 8px;
+}
+
+.landing-project-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  text-decoration: none;
+  color: #1e293b;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: #f1f5f9;
+    
+    .landing-project-arrow {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+.landing-project-icon {
+  font-size: 20px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f1f5f9;
+  border-radius: 10px;
+}
+
+.landing-project-name {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.landing-project-arrow {
+  width: 20px;
+  height: 20px;
+  color: #3b82f6;
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: all 0.2s ease;
+}
+
+/* Gallery Card */
+.landing-gallery-card {
+  .landing-card-header {
+    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
+  }
+}
+
+.landing-gallery-container {
+  position: relative;
+  padding: 16px;
+}
+
+.landing-gallery-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.landing-gallery-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.landing-gallery-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: #f1f5f9;
+  color: #475569;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+  
+  &:hover {
+    background: #3b82f6;
+    color: #ffffff;
+  }
+}
+
+.landing-gallery-dots {
+  display: flex;
+  gap: 8px;
+}
+
+.landing-gallery-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &.active {
+    background: #3b82f6;
+    transform: scale(1.2);
+  }
+  
+  &:hover:not(.active) {
+    background: #94a3b8;
+  }
+}
+
+/* News Card */
+.landing-news-card {
+  .landing-card-header {
+    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
+  }
+}
+
+.landing-news-list {
+  padding: 16px 24px;
+}
+
+.landing-news-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f5f9;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.landing-news-bullet {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  border-radius: 50%;
+  margin-top: 6px;
+}
+
+.landing-news-text {
+  font-size: 14px;
+  color: #475569;
+  line-height: 1.6;
+  margin: 0;
+}