html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
 }


 .navbar {
     background-color: var(--card-bg);
     border-bottom: 1px solid var(--border-color);
     position: relative;
     z-index: 10000;
 }

 .nav-container {
     margin: 0 auto;
     padding: 0.2rem 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: fixed;
     width: 95%;
     background: var(--card-bg);
     box-shadow: 8px 13px 30px var(--shadow-color);
     top: 25px;
     left: 2.5%;
     border-radius: 55px;
     transition: all 0.5s ease-in-out;
     /* smoother */
     transform: translateY(0);
     opacity: 1;
 }

 .nav-container.scrolled {
     top: 0;
     left: 0;
     width: 100%;
     border-radius: 0;
     padding: 1.5rem 2rem;
     /* shrink navbar */
     transform: translateY(-10px);
     /* slide up */
     opacity: 0.95;
     /* slight fade effect */
 }

 main {
     height: auto;
     padding-top: 100px;
 }

 .nav-link.active {

     color: var(--primary-green);
 }

 .logo {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--primary-green);
    font-family: 'Cinzel', serif;
    display: flex;
    flex-direction: column;
    align-items: center;
        height: 100px;
}
.flogo{
     font-size: var(--font-xl);
    font-weight: 700;
    color: var(--primary-green);
    font-family: 'Cinzel', serif;
    display: flex;
    flex-direction: column;
    align-items: left;
}
.flogop{
    color: var(--primary-green) !important;
    font-size: 40px !important;
}
.flogop span{
    color: var(--primary-red);
}

.logo p:first-child {
    font-size: 48px;
}

.logo p:first-child span {
    color: red;
}

/* Slogan container with solid "underscore" lines */
.slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin-top: 6px;
    position: relative;
        top: -25px;
}

.slogan p {
    font-size: 18px;
    margin: 0;
    white-space: nowrap;
    color: var(--text-color);
}

/* Solid, thick, underscore-style lines */
.slogan .line {
    content: '';
    display: block;
    height: 2px;
    width: 40px; /* Adjust width as needed */
    background-color: var(--text-color); /* Solid color */
}

 .nav-menu {
     list-style: none;
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }

 .nav-item {
     position: relative;
 }

 .nav-link {
     color: var(--text-color);
     text-decoration: none;
     font-size: var(--font-md);
     transition: color 0.3s ease;
 }

 .nav-link {
     text-decoration: none;
     color: var(--text-color);
     font-weight: 500;
     transition: color 0.3s ease;
     position: relative;
     padding-bottom: 5px;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-green);
     transition: width 0.3s ease;
 }

 .nav-link:hover {
     color: var(--primary-green);
 }

 .nav-link:hover::after {
     width: 100%;
 }

 /* Keep the acFtive state styling */
 .nav-menu .nav-link.active::after {
     width: 100%;
     color: var(--primary-green);
 }

.dropdown {
     position: absolute;
     top: 90%;
     right: 0;
     transform: translateX(0%);
     display: none;
     background-color: var(--card-bg);
     box-shadow: var(--box-shadow);
     padding: 1rem;
     border: 1px solid var(--border-color);
     border-radius: 0.5rem;
     width: max-content;
     max-width: 95vw;
     overflow-x: auto;
     white-space: nowrap;
     z-index: 1000;
 }

 .nav-item:hover>.dropdown {
     display: flex;
 }

 .dropdown-content {
     display: flex;
     flex-direction: row;
     gap: 2rem;
 }

 .dropdown-column {
     width: max-content
 }

 .dropdown-column h4 {
     font-size: var(--font-sm);
     color: var(--primary-green);
     margin-bottom: 0.5rem;
 }

 .dropdown-column a {
     display: block;
     font-size: var(--font-sm);
     color: var(--text-color);
     text-decoration: none;
     margin: 0.3rem 0;
     transition: color 0.2s ease;
 }

 .dropdown-column a:hover {
     color: var(--primary-green);
 }

 .btn {
     text-decoration: none;
     padding: 0.5rem 1rem;
     border-radius: 0.3rem;
     font-size: var(--font-sm);
     transition: background-color 0.3s ease;
 }

 .btn-login {
     color: var(--primary-green);
     border: 1px solid var(--primary-green);
 }

 .btn-login:hover {
     background-color: var(--primary-green);
     color: var(--bg-color);
 }

 .btn-signup {
     background-color: var(--primary-green);
     color: var(--bg-color);
 }

 .btn-signup:hover {
     opacity: 0.9;
 }

 .auth-buttons {
     display: flex;
     gap: 0.5rem;
     display: flex;
     gap: 0.5rem;
     align-items: center;
     justify-content: space-between;
 }

 .auth-buttons>a {
     width: 100px;
     text-align: center;
     max-block-size: fit-content;
 }

 .user-profile {
     background-color: var(--primary-green);
     color: var(--bg-color);
     padding: 0.4rem 0.8rem;
     border-radius: 50%;
     font-size: var(--font-sm);
     text-align: center;
 }

 .theme-toggle {
     background: transparent;
     border: none;
     font-size: 1.25rem;
     cursor: pointer;
     color: var(--text-color);
 }

 .mobile-menu-btn {
     display: none;
     font-size: 1.5rem;
     background: transparent;
     border: none;
     color: var(--text-color);
     cursor: pointer;
 }

 /* Mobile Menu Styles */





 .nav-menu .nav-link.active::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -5px;
     width: 100%;
     height: 2px;

     transition: width 0.3s ease;
 }


 main {
     flex: 1;
 }



 /* banner section */
 /* Banner Section - Clean Industry Design */
 .banner {
     background-color: var(--bg-color);
     padding: 8rem 0;
     position: relative;
     height: 100vh;
 }

 .banner-container {
     width: 90%;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
 }

 /* Left Content Styling */
 .banner-content {
     animation: slideInLeft 0.8s ease-out;
 }

 .banner-content>p:first-child {
     font-size: 3.5rem;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 2rem;
     color: var(--text-color);
 }

 .highlight {
     color: var(--primary-green);
     display: inline-block;
     position: relative;
 }

 .highlight::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 100%;
     height: 4px;

     border-radius: 2px;
 }

 .banner-content>p:nth-child(2) {
     font-size: 1.125rem;
     color: var(--text-color);
     opacity: 0.85;
     margin-bottom: 2.5rem;
     line-height: 1.7;
 }

 /* CTA Button */
 .btn-signup {
     display: inline-block;
     background-color: var(--primary-green);
     color: white;
     padding: 1rem 2.5rem;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.1rem;
     box-shadow: var(--box-shadow);
     transition: all 0.3s ease;
     margin-bottom: 2rem;
 }

 .btn-signup:hover {
     transform: translateY(-2px);
     opacity: 0.9;
     box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
 }

 /* Rating Section */
 .rating {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--text-color);
     opacity: 0.9;
     font-size: 1rem;
 }

 .rating strong {
     color: var(--primary-green);
 }

 /* Right Image Area */
 .banner-image {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     animation: slideInRight 0.8s ease-out;
 }

 /* Decorative Circle */
 .round-design {
     position: absolute;
     width: 450px;
     height: 450px;
     background: linear-gradient(135deg, var(--primary-green)10 0%, transparent 70%);
     border-radius: 50%;
     opacity: 0.1;
     animation: rotate 20s linear infinite;
     z-index: 1;
 }

 .image-placeholder {
     position: relative;
     z-index: 2;
     width: 600px;
     height: 600px;
 }

 .image-placeholder img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 20px;
     position: relative;
 }

 /* Animated glowing border line */
 .image-placeholder::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 20px;
     border: 3px solid transparent;
     background: linear-gradient(90deg,
             rgba(16, 185, 129, 0) 0%,
             rgba(16, 185, 129, 1) 50%,
             rgba(16, 185, 129, 0) 100%) border-box;
     -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s ease;
     box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
 }

 .image-placeholder:hover::before {
     opacity: 1;
     animation: border-trace 2s linear infinite;
 }



 @keyframes border-trace {
     0% {
         background-position: 0% 0%;
     }

     100% {
         background-position: 200% 0%;
     }
 }

 /* Floating Icons */
 .float-icon {
     position: absolute;
     width: 60px;
     height: 60px;
     background: var(--card-bg);
     padding: 15px;
     border-radius: 12px;
     box-shadow: var(--box-shadow);
     border: 1px solid var(--border-color);
     transition: all 0.3s ease;
 }

 .float-icon:hover {
     transform: translateY(-3px);
     border-color: var(--primary-green);
     box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
 }

 .icon-code {
     top: 15%;
     left: -8%;
     animation: float 6s ease-in-out infinite;
 }

 .icon-book {
     top: 65%;
     left: -5%;
     animation: float 6s ease-in-out infinite 2s;
 }

 .icon-laptop {
     top: 35%;
     right: -8%;
     animation: float 6s ease-in-out infinite 4s;
 }

 /* Animations */
 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }
 }



 /* Highlight Section - Industry Standard Design */
 .highlight-section {
     background-color: var(--bg-color);
     padding: 6rem 0;
 }

 .highlight-container {
     width: 90%;
     margin: 0 auto;
 }

 .section-header {
     text-align: center;
     margin-bottom: 4rem;
 }

 .section-header h2 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-color);
     margin: 0;
     position: relative;
     display: inline-block;
 }

 .section-header h2::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 4px;
     background-color: var(--primary-green);
     border-radius: 2px;
 }

 .highlight-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 2rem;
 }

 /* Individual Highlight Cards */
 .highlight-box {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 2.5rem 1.5rem;
     text-align: center;
     box-shadow: var(--box-shadow);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .highlight-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background-color: var(--primary-green);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .highlight-box:hover::before {
     transform: scaleX(1);
 }

 .highlight-box:hover {
     transform: translateY(-8px);
     border-color: var(--primary-green);
     box-shadow: 0 15px 35px rgba(16, 185, 129, 0.15);
 }

 /* Image Styling */
 .highlight-box img {
     width: 165px;
     height: 150px;
     margin-bottom: 1.5rem;
     transition: all 0.3s ease;
     filter: grayscale(20%);
 }

 .highlight-box:hover img {
     transform: scale(1.1);
     filter: grayscale(0%);
 }

 /* Title Styling */
 .highlight-box h3 {
     color: var(--text-color);
     font-size: 1.125rem;
     font-weight: 600;
     margin: 0;
     transition: color 0.3s ease;
 }

 .highlight-box:hover h3 {
     color: var(--primary-green);
 }



 .why-choose-section {
     padding: 25vh 0;
     background: radial-gradient(circle at center, var(--card-bg) 0%, var(--bg-color) 100%);
     position: relative;
     overflow: hidden;
 }

 .why-choose-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 80%, rgba(7, 123, 255, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(40, 167, 69, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(220, 53, 69, 0.1) 0%, transparent 50%);
     pointer-events: none;
 }

 .hexagon-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 20px;
     margin-top: 50px;
     position: relative;
 }

 .hexagon-item {
     width: 280px;
     height: 320px;
     position: relative;
     margin: 20px;
     opacity: 0;
     transform: scale(0.8) rotateY(90deg);
     transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .hexagon-item.animate-in {
     opacity: 1;
     transform: scale(1) rotateY(0deg);
 }

 .hexagon-shape {
     width: 100%;
     height: 240px;
     background: var(--card-bg);
     border: 3px solid var(--border-color);
     clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 40px 20px;
     position: relative;
     transition: all 0.5s ease;
     cursor: pointer;
 }

 .hexagon-shape::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
     clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
     opacity: 0;
     transition: opacity 0.5s ease;
     z-index: -1;
 }

 .hexagon-shape:hover::before {
     opacity: 0.1;
 }

 .hexagon-shape:hover {
     transform: translateY(-15px) scale(1.05);
     border-color: var(--primary-blue);
     box-shadow: 0 20px 40px var(--shadow-color);
 }

 .hex-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 20px;
     color: white;
     position: relative;
     z-index: 2;
 }

 .hexagon-item:nth-child(1) .hex-icon {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

 .hexagon-item:nth-child(2) .hex-icon {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 }

 .hexagon-item:nth-child(3) .hex-icon {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 }

 .hexagon-item:nth-child(4) .hex-icon {
     background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 }

 .hexagon-item:nth-child(5) .hex-icon {
     background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
 }

 .hex-title {
     font-size: var(--font-lg);
     font-weight: 700;
     color: var(--text-color);
     margin-bottom: 15px;
     z-index: 2;
     position: relative;
 }

 .hex-description {
     font-size: var(--font-sm);
     color: var(--text-color);
     opacity: 0.8;
     line-height: 1.6;
     z-index: 2;
     position: relative;
 }

 .hex-number {
     position: absolute;
     top: -10px;
     right: -10px;
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary-blue), var(--primary-green));
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: var(--font-sm);
     box-shadow: var(--box-shadow);
     z-index: 3;
 }

 /* Connecting lines animation */
 .connection-lines {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 1;
 }

 .connection-line {
     position: absolute;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
     opacity: 0;
     animation: pulse-line 3s ease-in-out infinite;
 }

 /* Floating particles effect */
 .floating-particle {
     position: absolute;
     width: 6px;
     height: 6px;
     background: var(--primary-blue);
     border-radius: 50%;
     opacity: 0.3;
     animation: float 6s ease-in-out infinite;
 }

 .floating-particle:nth-child(1) {
     top: 10%;
     left: 10%;
     animation-delay: 0s;
 }

 .floating-particle:nth-child(2) {
     top: 20%;
     right: 10%;
     animation-delay: 1s;
 }

 .floating-particle:nth-child(3) {
     bottom: 20%;
     left: 15%;
     animation-delay: 2s;
 }

 .floating-particle:nth-child(4) {
     bottom: 10%;
     right: 20%;
     animation-delay: 3s;
 }

 /* Animations */
 @keyframes pulse-line {

     0%,
     100% {
         opacity: 0;
         transform: scaleX(0);
     }

     50% {
         opacity: 0.5;
         transform: scaleX(1);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     33% {
         transform: translateY(-20px) rotate(120deg);
     }

     66% {
         transform: translateY(10px) rotate(240deg);
     }
 }


 /* Content Section - Enhanced Design */
 .content-section {
     background-color: var(--bg-color);
     padding: 6rem 0;
 }

 .content-container {
     width: 90%;
     margin: 0 auto;
 }

 .content-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 3rem;
 }

 /* Content Items */
 .content-item {
     text-align: center;
     padding: 2.5rem 2rem;
     transition: all 0.3s ease;
     position: relative;
 }

 .content-item:hover {
     transform: translateY(-8px);
 }

 /* Number Block Styling */
 .number-block {
     display: flex;
     align-items: baseline;
     justify-content: center;
     margin-bottom: 2rem;
     position: relative;
 }

 .content-number {
     font-size: 5rem;
     font-weight: 900;
     color: var(--primary-green);
     line-height: 1;
     transition: all 0.3s ease;
     text-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
 }

 .plus-sign {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--primary-green);
     margin-left: 0.5rem;
     opacity: 0.8;
 }

 .content-item:hover .content-number {
     transform: scale(1.05);
     text-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
 }

 .content-item:hover .plus-sign {
     opacity: 1;
     transform: translateY(-2px);
 }

 /* Content Icon for Text-Only Items */
 .content-icon {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     opacity: 0.8;
     transition: all 0.3s ease;
 }

 .content-item:hover .content-icon {
     opacity: 1;
     transform: scale(1.1);
 }

 /* Content Text Area */
 .content-text {
     text-align: center;
 }

 .content-text h3 {
     color: var(--text-color);
     font-size: 1.4rem;
     font-weight: 700;
     margin: 0 0 1rem 0;
     transition: color 0.3s ease;
     position: relative;
 }

 .content-item:hover .content-text h3 {
     color: var(--primary-green);
 }

 .content-text h3::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: 40px;
     height: 2px;
     background-color: var(--primary-green);
     transition: transform 0.3s ease;
 }

 .content-item:hover .content-text h3::after {
     transform: translateX(-50%) scaleX(1);
 }

 .content-text p {
     color: var(--text-color);
     opacity: 0.8;
     font-size: 1rem;
     line-height: 1.7;
     margin: 0;
     transition: all 0.3s ease;
 }

 .content-item:hover .content-text p {
     opacity: 1;
     color: var(--text-color);
 }

 /* Background Effects */
 .content-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, transparent, var(--primary-green), transparent);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .content-item:hover::before {
     opacity: 1;
 }


 .explore-section {
     padding: 60px 5%;
     background-color: var(--bg-color);
 }

 .explore-header {
     text-align: left;
     margin-bottom: 30px;
 }

 .explore-header h2 {
     font-size: var(--font-2xl);
     color: var(--text-color);
     margin-bottom: 10px;
 }

 .zigzag-line {
     width: 120px;
     height: 10px;
     background: url('zigzag.svg') repeat-x;
     background-size: contain;
     margin-bottom: 15px;
 }

 .subtitle {
     font-size: var(--font-sm);
     color: #666;
     margin: 2px 0;
 }

 .course-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 50px;

 }

 .course-card {
     box-shadow: var(--box-shadow);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     transition: transform 0.3s ease;
     border-radius: 15px;
     background-color: var(--card-bg);
 }

 .course-card:hover {
     transform: translateY(-6px);
 }

 .card-image img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .card-body {
     padding: 16px;
     flex-grow: 1;
 }

 .meta {
     font-size: var(--font-xs);
     color: #555;
     margin-bottom: 6px;
 }

 .course-title {
     font-size: var(--font-md);
     font-weight: 600;
     margin: 6px 0;
     color: var(--primary-green);
 }

 .description {
     font-size: var(--font-sm);
     color: var(--text-color);
     margin: 6px 0 12px;
 }

 .rating {
     display: flex;
     gap: 2px;
 }

 .star {
     color: rgb(255, 217, 0);
     font-size: var(--font-sm);
 }

 .star.inactive {
     color: var(--border-color);
 }

 .shadow {
     box-shadow: var(--box-shadow);
 }

 .card {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 0.75rem;
     box-shadow: var(--box-shadow);
     transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 /* Custom Why Us Section */
 .why-us-section {
     padding: 80px 5%;
     background: linear-gradient(135deg, var(--bg-color) 0%, rgba(44, 255, 7, 0.1) 100%);
     position: relative;
     overflow: hidden;
     width: 48%
 }

 .why-us-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 20% 30%, rgba(44, 255, 7, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 70%, rgba(44, 255, 7, 0.1) 0%, transparent 50%);
     pointer-events: none;
 }

 .why-us-container {
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
     z-index: 2;
 }

 .section-title {
     font-size: var(--font-3xl);
     font-weight: 700;
     text-align: left;
     margin-bottom: 20px;
     position: relative;
     background: linear-gradient(135deg, var(--text-color) 0%, var(--primary-green) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: fadeInLeft 0.8s ease forwards;
     opacity: 0;
 }



 .why-us-flow {
     margin-top: 60px;
     position: relative;
 }

 .flow-path {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 100%;
     background: linear-gradient(to bottom,
             transparent 0%,
             var(--primary-green) 20%,
             var(--primary-green) 80%,
             transparent 100%);
     opacity: 0.3;
 }

 .why-us-item {
     position: relative;
     margin: 40px 0;
     padding: 0 40px;
     animation: fadeSlideIn 0.8s ease forwards;
     opacity: 0;
 }

 .why-us-item:nth-child(even) {
     text-align: right;
 }

 .why-us-item:nth-child(odd) {
     text-align: left;
 }

 .why-us-item:nth-child(1) {
     animation-delay: 0.2s;
 }

 .why-us-item:nth-child(2) {
     animation-delay: 0.4s;
 }

 .why-us-item:nth-child(3) {
     animation-delay: 0.6s;
 }

 .why-us-item:nth-child(4) {
     animation-delay: 0.8s;
 }

 .why-us-item:nth-child(5) {
     animation-delay: 1s;
 }

 .item-content {
     display: inline-block;
     position: relative;
     padding: 20px 30px;
     background: var(--bg-color);
     border-radius: 30px;
     border: 2px solid transparent;
     background-clip: padding-box;
     transition: all 0.4s ease;
     max-width: 450px;
 }

 .item-content::before {
     content: '';
     position: absolute;
     inset: -2px;
     padding: 2px;
     background: linear-gradient(135deg, var(--primary-green), rgba(7, 255, 40, 0.3));
     border-radius: inherit;
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
     -webkit-mask-composite: xor;
 }

 .item-content:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 20px 40px rgba(8, 252, 8, 0.2);
 }

 .item-icon {
     font-size: var(--font-xl);
     margin-right: 12px;
     display: inline-block;
     animation: bounce 2s infinite;
 }

 .why-us-item:nth-child(even) .item-icon {
     margin-right: 0;
     margin-left: 12px;
 }

 .item-text {
     font-size: var(--font-lg);
     font-weight: 600;
     color: var(--text-color);
     display: inline-block;
     vertical-align: middle;
 }

 .item-dot {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 12px;
     height: 12px;
     background: var(--primary-green);
     border-radius: 50%;
     z-index: 3;
     animation: pulse 2s infinite;
 }




 /* Animations */
 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes expandLine {
     from {
         transform: scaleX(0);
     }

     to {
         transform: scaleX(1);
     }
 }

 @keyframes fadeSlideIn {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-10px);
     }

     60% {
         transform: translateY(-5px);
     }
 }

 @keyframes pulse {
     0% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }

     50% {
         transform: translate(-50%, -50%) scale(1.3);
         opacity: 0.7;
     }

     100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }
 }



 /* Testimonial Section */
 .testimonial-section {
     background-color: var(--bg-color);
     padding: 6rem 0;
     overflow: hidden;
 }

 .testimonial-container {
     width: 90%;
     margin: 0 auto;
 }

 .section-header {
     text-align: center;
     margin-bottom: 4rem;
 }

 .section-header h2 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-color);
     margin: 0 0 1rem 0;
     position: relative;
     display: inline-block;
 }

 .section-header h2::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 4px;
     background-color: var(--primary-green);
     border-radius: 2px;
 }

 .section-header p {
     font-size: 1.125rem;
     color: var(--text-color);
     opacity: 0.8;
     margin: 0;
 }

 /* Slider Wrapper */
 .testimonial-wrapper {
     position: relative;
     overflow: hidden;
     margin: 0 auto;
 }

 .testimonial-slider {
     display: flex;
     transition: transform 0.8s ease-in-out;
     gap: 2rem;
 }

 /* Testimonial Cards */
 .testimonial-card {
     flex: 0 0 calc(33.333% - 1.33rem);
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 2.5rem 2rem;
     box-shadow: var(--box-shadow);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .testimonial-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background-color: var(--primary-green);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .testimonial-card:hover::before {
     transform: scaleX(1);
 }

 .testimonial-card:hover {
     transform: translateY(-5px);
     border-color: var(--primary-green);
     box-shadow: 0 15px 35px rgba(16, 185, 129, 0.15);
 }

 /* Testimonial Content */
 .testimonial-content {
     margin-bottom: 2rem;
 }

 .testimonial-content p {
     color: var(--text-color);
     font-size: 1rem;
     line-height: 1.7;
     margin: 0;
     opacity: 0.9;
     font-style: italic;
 }

 /* Author Info */
 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .author-info h4 {
     color: var(--text-color);
     font-size: 1.125rem;
     font-weight: 600;
     margin: 0 0 0.25rem 0;
     transition: color 0.3s ease;
 }

 .testimonial-card:hover .author-info h4 {
     color: var(--primary-green);
 }

 .author-info span {
     color: var(--text-color);
     opacity: 0.7;
     font-size: 0.95rem;
     font-weight: 500;
 }


 /* FAQ Section */
 .faq-section {
     background-color: var(--bg-color);
     padding: 6rem 0;
 }

 .faq-container {
     width: 90%;
     margin: 0 auto;
 }

 .section-header {
     text-align: center;
     margin-bottom: 4rem;
 }

 .section-header h2 {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-color);
     margin: 0 0 1rem 0;
     position: relative;
     display: inline-block;
 }

 .section-header h2::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     width: 250px;
     height: 4px;
     background-color: var(--primary-green);
     border-radius: 2px;
 }

 .section-header p {
     font-size: 1.125rem;
     color: var(--text-color);
     opacity: 0.8;
     margin: 0;
 }

 /* FAQ Grid */
 .faq-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.5rem;
     max-width: 800px;
     margin: 0 auto;
 }

 /* FAQ Items */
 .faq-item {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     overflow: hidden;
     transition: all 0.3s ease;
     position: relative;
 }

 .faq-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background-color: var(--primary-green);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .faq-item:hover::before {
     transform: scaleX(1);
 }

 .faq-item:hover {
     border-color: var(--primary-green);
     box-shadow: 0 8px 25px rgba(16, 185, 129, 0.1);
 }

 /* FAQ Question */
 .faq-question {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem 2rem;
     cursor: pointer;
     transition: all 0.3s ease;
     user-select: none;
 }

 .faq-question:hover {
     background-color: rgba(16, 185, 129, 0.05);
 }

 .faq-question h3 {
     color: var(--text-color);
     font-size: 1.125rem;
     font-weight: 600;
     margin: 0;
     transition: color 0.3s ease;
     flex-grow: 1;
     padding-right: 1rem;
 }

 .faq-item:hover .faq-question h3 {
     color: var(--primary-green);
 }

 /* FAQ Icon */
 .faq-icon {
     color: var(--primary-green);
     font-size: 1.5rem;
     font-weight: 600;
     transition: all 0.3s ease;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .faq-item.active .faq-icon {
     transform: rotate(45deg);
 }

 /* FAQ Answer */
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
     border-top: 1px solid transparent;
 }

 .faq-item.active .faq-answer {
     max-height: 500px;
     border-top-color: var(--border-color);
 }

 .faq-answer p {
     color: var(--text-color);
     opacity: 0.85;
     font-size: 1rem;
     line-height: 1.6;
     margin: 0;
     padding: 1.5rem 2rem;
 }



 /* Career Contact Section - Specific Styling */
 .career-contact-section {
     background: linear-gradient(135deg, rgba(0, 208, 132, 0.05), rgba(59, 130, 246, 0.05));
     position: relative;
     padding-top: 25vh;
     /* height: 150vh; */
     padding-bottom: 20vh;

 }

 .career-contact-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(0, 208, 132, 0.03) 0%, transparent 50%);
     pointer-events: none;
 }

 .career-contact-container {
     display: flex;
     gap: 4rem;
     align-items: flex-start;
     width: 90%;
     margin: 3rem auto;
 }

 .career-content-left {
     width: 40%;
 }

 .career-content-right {
     width: 50%;
 }

 /* Career-specific subtitle to avoid affecting other sections */
 .career-fixed-subtitle {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--primary-green);
     margin: 1rem 0;
     text-align: center;
 }

 .benefits-list {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 2.5rem;
     box-shadow: var(--shadow-md);
 }

 .benefit-item {
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: 1.1rem;
     color: var(--text-color);
     padding: 0.5rem 0;
 }

 .benefit-icon {
     color: var(--primary-green);
     font-weight: 600;
     font-size: 1.3rem;
     min-width: 20px;
 }

 /* Career Form Wrapper */
 .career-content-right {
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 3rem 2.5rem;
     box-shadow: var(--shadow-md);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .career-content-right::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background-color: var(--primary-green);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .career-content-right:hover::before {
     transform: scaleX(1);
 }

 .career-content-right:hover {
     border-color: var(--primary-green);
     box-shadow: 0 15px 35px rgba(0, 208, 132, 0.1);
 }

 /* Message Boxes */
 .message-box {
     border-radius: 12px;
     padding: 2rem;
     margin-bottom: 2rem;
     text-align: center;
 }

 .success-message {
     background-color: rgba(0, 208, 132, 0.1);
     border: 1px solid var(--primary-green);
 }

 .info-message {
     background-color: rgba(59, 130, 246, 0.1);
     border: 1px solid #3b82f6;
 }

 .message-box h4 {
     color: var(--text-color);
     font-size: 1.25rem;
     font-weight: 600;
     margin: 0 0 0.5rem 0;
 }

 .success-message h4 {
     color: var(--primary-green);
 }

 .info-message h4 {
     color: #3b82f6;
 }

 .message-box p {
     color: var(--text-color);
     opacity: 0.9;
     margin: 0;
     font-size: 1rem;
     line-height: 1.6;
 }

 /* Form Styling */
 .career-contact-form {
     display: grid;
     gap: 1.5rem;
 }

 .career-contact-form .form-group {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .career-contact-form .form-group label {
     color: var(--text-color);
     font-weight: 600;
     font-size: 0.95rem;
     margin-bottom: 0.25rem;
 }

 .career-contact-form .form-group input,
 .career-contact-form .form-group textarea {
     background-color: var(--bg-color);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 0.875rem 1rem;
     color: var(--text-color);
     font-size: 1rem;
     transition: all 0.3s ease;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     width: 100%;
 }

 .career-contact-form .form-group input:focus,
 .career-contact-form .form-group textarea:focus {
     outline: none;
     border-color: var(--primary-green);
     box-shadow: 0 0 0 2px rgba(0, 208, 132, 0.1);
     transform: translateY(-1px);
 }

 .career-contact-form .form-group input:hover,
 .career-contact-form .form-group textarea:hover {
     border-color: var(--primary-green);
 }

 .career-contact-form .form-group input::placeholder,
 .career-contact-form .form-group textarea::placeholder {
     color: var(--text-color);
     opacity: 0.5;
 }

 .career-contact-form .form-group textarea {
     resize: vertical;
     min-height: 120px;
     line-height: 1.5;
 }

 /* Submit Button */
 .submit-btn {
     background-color: var(--primary-green);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 1rem 2rem;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-top: 1rem;
     position: relative;
     overflow: hidden;
 }

 .submit-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
 }

 .submit-btn:hover::before {
     left: 100%;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 208, 132, 0.3);
     opacity: 0.9;
 }

 .submit-btn:active {
     transform: translateY(0);
 }

 .submit-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 .submit-btn:disabled:hover::before {
     left: -100%;
 }

 .btn-loader {
     display: inline-block;
 }





 .wave-divider {
     position: relative;
     width: 100%;
     height: 200px;
     overflow: hidden;
     rotate: none;
 }



 .wave-main {
     filter: drop-shadow(0 -2px 8px rgba(0, 208, 132, 0.1));
 }

 .wave-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: var(--primary-green);
     border-radius: 50%;
     opacity: 0.6;
     animation: particleFloat 12s linear infinite;
 }

 .particle-1 {
     left: 10%;
     animation-delay: 0s;
 }

 .particle-2 {
     left: 30%;
     animation-delay: 3s;
 }

 .particle-3 {
     left: 50%;
     animation-delay: 6s;
 }

 .particle-4 {
     left: 70%;
     animation-delay: 9s;
 }

 .particle-5 {
     left: 90%;
     animation-delay: 1.5s;
 }

 /* Scroll to Top Button */
 .scroll-to-top-btn {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary-green), #00b874);
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     font-size: 1.2rem;
     font-weight: 600;
     box-shadow: 0 4px 15px rgba(0, 208, 132, 0.3);
     transition: all 0.3s ease;
     z-index: 1000;
     opacity: 0;

     transform: translateY(20px);
 }

 .scroll-to-top-btn.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .scroll-to-top-btn:hover {
     transform: translateY(-3px) scale(1.1);
     box-shadow: 0 8px 25px rgba(0, 208, 132, 0.4);
 }

 .scroll-to-top-btn:active {
     transform: translateY(-1px) scale(1.05);
 }

 .scroll-arrow {
     display: inline-block;
     transition: transform 0.3s ease;
 }

 .scroll-to-top-btn:hover .scroll-arrow {
     transform: translateY(-2px);
 }

 /* Enhanced Footer */
 /* Updated Footer CSS - Integrated with Component Variables */

 .footer {
     background: var(--bg-color, #0a0a0a);
     border-top: 1px solid var(--border-color, #374151);
     padding: 4rem 2rem 2rem;
     position: relative;
     overflow: hidden;
 }

 .footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(16, 185, 106, 0.05);
     /* Using primary-green with opacity */
     pointer-events: none;
 }

 .footer::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--primary-green, #10b96a), transparent);
 }

 /* Starry Background */
 .footer .star {
     position: absolute;
     background: var(--text-color, #f8fafc);
     border-radius: 50%;
     animation: twinkle 3s infinite;
 }

 .footer .star:nth-child(1) {
     width: 2px;
     height: 2px;
     top: 15%;
     left: 10%;
     animation-delay: 0s;
 }

 .footer .star:nth-child(2) {
     width: 1px;
     height: 1px;
     top: 25%;
     left: 85%;
     animation-delay: 1s;
 }

 .footer .star:nth-child(3) {
     width: 3px;
     height: 3px;
     top: 40%;
     left: 20%;
     animation-delay: 2s;
 }

 .footer .star:nth-child(4) {
     width: 2px;
     height: 2px;
     top: 60%;
     left: 70%;
     animation-delay: 0.5s;
 }

 .footer .star:nth-child(5) {
     width: 1px;
     height: 1px;
     top: 80%;
     left: 40%;
     animation-delay: 1.5s;
 }

 .footer .star:nth-child(6) {
     width: 2px;
     height: 2px;
     top: 30%;
     left: 60%;
     animation-delay: 2.5s;
 }

 .footer .star:nth-child(7) {
     width: 1px;
     height: 1px;
     top: 70%;
     left: 15%;
     animation-delay: 0.8s;
 }

 .footer .star:nth-child(8) {
     width: 3px;
     height: 3px;
     top: 50%;
     left: 90%;
     animation-delay: 1.8s;
 }

 .footer .star:nth-child(9) {
     width: 2px;
     height: 2px;
     top: 20%;
     left: 45%;
     animation-delay: 2.2s;
 }

 .footer .star:nth-child(11) {
     width: 1px;
     height: 1px;
     top: 35%;
     left: 35%;
     animation-delay: 2.8s;
 }

 .footer .star:nth-child(12) {
     width: 2px;
     height: 2px;
     top: 65%;
     left: 55%;
     animation-delay: 0.3s;
 }

 .footer .star:nth-child(13) {
     width: 1px;
     height: 1px;
     top: 45%;
     left: 25%;
     animation-delay: 1.7s;
 }

 .footer .star:nth-child(14) {
     width: 3px;
     height: 3px;
     top: 75%;
     left: 95%;
     animation-delay: 2.3s;
 }

 .footer .star:nth-child(15) {
     width: 2px;
     height: 2px;
     top: 85%;
     left: 65%;
     animation-delay: 0.7s;
 }

 .footer .star:nth-child(16) {
     width: 1px;
     height: 1px;
     top: 55%;
     left: 75%;
     animation-delay: 2.7s;
 }

 .footer .star:nth-child(17) {
     width: 2px;
     height: 2px;
     top: 25%;
     left: 5%;
     animation-delay: 1.3s;
 }

 .footer .star:nth-child(18) {
     width: 1px;
     height: 1px;
     top: 95%;
     left: 30%;
     animation-delay: 0.9s;
 }

 .footer .star:nth-child(19) {
     width: 3px;
     height: 3px;
     top: 15%;
     left: 50%;
     animation-delay: 2.1s;
 }

 .footer .star:nth-child(20) {
     width: 2px;
     height: 2px;
     top: 75%;
     left: 10%;
     animation-delay: 1.9s;
 }

 .footer-content {
     width: 90%;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 3fr;
     gap: 3rem;
     position: relative;
     z-index: 2;
 }

 .footer-section h3 {
     color: var(--text-color, #ffffff);
     font-size: var(--font-lg, 1.25rem);
     font-weight: 600;
     margin-bottom: 1.5rem;
     position: relative;
     font-family: var(--font-sans);
 }

 .footer-section h3::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 30px;
     height: 2px;
     background: var(--primary-green, #10b96a);
     border-radius: 1px;
 }

 .footer-brand p {
     color: rgba(248, 250, 252, 0.8);
     /* Using text-color with opacity */
     line-height: 1.6;
     margin-bottom: 2rem;
     font-family: var(--font-sans);
     font-size: var(--font-md, 1rem);
 }

 .subscribe-box {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 2rem;
 }

 .subscribe-input {
     flex: 1;
     padding: 0.75rem 1rem;
     border-radius: 8px;
     border: 1px solid var(--border-color, #374151);
     background: var(--card-bg, #111827);
     color: var(--text-color, #ffffff);
     font-size: var(--font-sm, 0.875rem);
     font-family: var(--font-sans);
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }

 .subscribe-input::placeholder {
     color: rgba(248, 250, 252, 0.6);
 }

 .subscribe-input:focus {
     outline: none;
     border-color: var(--primary-green, #10b96a);
     box-shadow: 0 0 0 2px rgba(16, 185, 106, 0.3);
     background: rgba(17, 24, 39, 0.8);
 }

 .subscribe-btn {
     padding: 0.75rem 1.5rem;
     background: linear-gradient(135deg, var(--primary-green, #10b96a), #00b874);
     color: var(--text-color, white);
     border: none;
     border-radius: 8px;
     font-weight: 600;
     font-size: var(--font-sm, 0.875rem);
     font-family: var(--font-sans);
     cursor: pointer;
     transition: all 0.3s ease;
     white-space: nowrap;
 }

 .subscribe-btn:hover {
     background: linear-gradient(135deg, #00b874, var(--primary-green, #10b96a));
     transform: translateY(-1px);
     box-shadow: 0 4px 15px rgba(16, 185, 106, 0.4);
 }

 .social-links {
     display: flex;
     gap: 1rem;
 }

 .social-link {
     width: 40px;
     height: 40px;
     background: var(--card-bg, rgba(255, 255, 255, 0.1));
     border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-size: var(--font-lg, 1.2rem);
     color: var(--text-color, #ffffff);
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }

 .social-link:hover {
     border-color: var(--primary-green, #10b96a);
     background: rgba(16, 185, 106, 0.2);
     transform: translateY(-2px);
     box-shadow: 0 4px 15px rgba(16, 185, 106, 0.3);
 }

 .footer-links {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }

 .footer-links a {
     color: rgba(248, 250, 252, 0.7);
     text-decoration: none;
     font-size: var(--font-sm, 0.95rem);
     font-family: var(--font-sans);
     transition: all 0.3s ease;
     padding: 0.25rem 0;
     position: relative;
 }

 .footer-links a:hover {
     color: var(--primary-green, #10b96a);
     padding-left: 0.5rem;
 }

 .footer-links a::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 2px;
     background: var(--primary-green, #10b96a);
     transition: width 0.3s ease;
 }

 .footer-links a:hover::before {
     width: 4px;
 }

 .footer-bottom {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
     position: relative;
     z-index: 2;
 }

 .footer-bottom-content {

     margin: 0 auto;
     text-align: center;
 }

 .footer-bottom-content p {
     color: rgba(248, 250, 252, 0.6);
     font-size: var(--font-sm, 0.875rem);
     font-family: var(--font-sans);
     margin-bottom: 0.5rem;
 }

 .footer-brand-name {
     color: var(--primary-green, #10b96a);
     font-weight: 600;
 }

 /* Dark Mode Adaptations */
 .dark-mode .footer {
     background: var(--bg-color, #ffffff);
 }

 .dark-mode .footer::before {
     background: rgba(16, 185, 106, 0.03);
 }

 .dark-mode .footer .star {
     background: var(--text-color, #111827);
 }

 .dark-mode .footer-section h3 {
     color: var(--text-color, #111827);
 }

 .dark-mode .footer-brand p {
     color: rgba(17, 24, 39, 0.8);
 }

 .dark-mode .subscribe-input {
     background: var(--card-bg, #f9fafb);
     border-color: var(--border-color, #e5e7eb);
     color: var(--text-color, #111827);
 }

 .dark-mode .subscribe-input::placeholder {
     color: rgba(17, 24, 39, 0.6);
 }

 .dark-mode .social-link {
     background: var(--card-bg, #f9fafb);
     border-color: var(--border-color, #e5e7eb);
     color: var(--text-color, #111827);
 }

 .dark-mode .footer-links a {
     color: rgba(17, 24, 39, 0.7);
 }

 .dark-mode .footer-bottom-content p {
     color: rgba(17, 24, 39, 0.6);
 }

 /* Twinkling Animation */
 @keyframes twinkle {

     0%,
     100% {
         opacity: 0.3;
         transform: scale(1);
     }

     50% {
         opacity: 1;
         transform: scale(1.2);
     }
 }

 /* Additional Animations */
 @keyframes waveFloat {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-5px);
     }
 }

 @keyframes particleFloat {
     0% {
         transform: translateY(100px) translateX(0px);
         opacity: 0;
     }

     10% {
         opacity: 0.6;
     }

     90% {
         opacity: 0.6;
     }

     100% {
         transform: translateY(-20px) translateX(20px);
         opacity: 0;
     }
 }



 .career-session-container {
     width: 50%;
     margin: 0 auto;
     background: white;
     border-radius: 15px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     height: 100%;
 }

 .career-session-header {
     background: linear-gradient(135deg, #28a745, #20c997);
     color: white;
     padding: 40px 30px;
     text-align: center;
 }

 .career-session-title {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
 }

 .career-session-subtitle {
     font-size: 18px;
     opacity: 0.9;
     font-weight: 400;
     margin-bottom: 10px;
 }

 .career-session-tagline {
     font-size: 14px;
     opacity: 0.8;
     font-style: italic;
 }

 .career-session-content {
     padding: 40px 30px;
 }

 .career-motivation-text {
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     border-left: 4px solid #28a745;
     padding: 20px;
     margin-bottom: 30px;
     border-radius: 8px;
 }

 .career-motivation-text h3 {
     color: #28a745;
     font-size: 20px;
     margin-bottom: 10px;
 }

 .career-motivation-text p {
     color: #495057;
     line-height: 1.6;
     font-size: 16px;
 }

 .career-form-container {
     background: #f8f9fa;
     padding: 30px;
     border-radius: 10px;
     border: 2px solid #e9ecef;
 }

 .career-form-title {
     color: #28a745;
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 20px;
     text-align: center;
 }

 .career-form-group {
     margin-bottom: 20px;
 }

 .career-form-label {
     display: block;
     font-weight: 600;
     color: #495057;
     margin-bottom: 8px;
     font-size: 14px;
 }

 .career-form-input,
 .career-form-textarea,
 .career-form-file {
     width: 100%;
     padding: 12px 16px;
     border: 2px solid #dee2e6;
     border-radius: 8px;
     font-size: 16px;
     transition: all 0.3s ease;
     background: white;
 }

 .career-form-input:focus,
 .career-form-textarea:focus,
 .career-form-file:focus {
     outline: none;
     border-color: #28a745;
     box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
 }

 .career-form-textarea {
     resize: vertical;
     min-height: 100px;
     font-family: inherit;
 }

 .career-form-file {
     padding: 10px;
     cursor: pointer;
 }

 .career-submit-btn {
     background: linear-gradient(135deg, #28a745, #20c997);
     color: white;
     border: none;
     padding: 16px 32px;
     border-radius: 50px;
     font-size: 18px;
     font-weight: 600;
     cursor: pointer;
     width: 100%;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .career-submit-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 35px rgba(40, 167, 69, 0.4);
 }


 .profile-image-container {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .profile-image {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--primary-green);
 }

 .profile-icon {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: var(--primary-green);
     color: var(--bg-color);
     font-weight: bold;
     font-size: 16px;
 }


 .profile-dropdown {
     position: relative;
     display: inline-block;
 }

 .dropdown-box {
     display: none;
     position: absolute;
     top: 100%;
     right: 0;
     background-color: var(--bg-color);
     border-radius: 6px;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
     z-index: 1000;
     min-width: 140px;
 }

 .dropdown-box a {
     display: block;
     padding: 10px 15px;
     color: var(--text-color);
     text-decoration: none;
 }

 .dropdown-box a:hover {
     background-color: var(--primary-green);
 }

 .profile-dropdown:hover .dropdown-box {
     display: block;
 }



 .learn-section {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 50px 0;
     position: relative;
     overflow: hidden;
 }

 .learn-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
     width: 100%;
 }

 .learn-content-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 /* Left Side Content */
 .learn-content-left {
     padding: 40px 0;
 }

 .learn-main-title {
     font-size: 3.5rem;
     font-weight: bold;
     color: var(--primary-green);
     line-height: 1.1;
     margin-bottom: 30px;
     text-shadow: 0 0 20px var(--accent-glow);
 }

 .learn-sub-title {
     font-size: 2rem;
     color: var(--text-color);
     margin-bottom: 30px;
     font-weight: 600;
 }

 .learn-description {
     font-size: 1.2rem;
     color: var(--text-gray);
     margin-bottom: 40px;
     line-height: 1.8;
 }

 .learn-features-list {
     list-style: none;
     padding: 0;
 }

 .learn-feature-item {
     font-size: 1.3rem;
     color: var(--text-color);
     margin-bottom: 20px;
     position: relative;
     padding-left: 40px;
     transition: all 0.3s ease;
 }

 .learn-feature-item::before {
     content: '★';
     position: absolute;
     left: 0;
     color: var(--primary-green);
     font-size: 1.5rem;
     text-shadow: 0 0 10px var(--accent-glow);
     animation: learn-star-pulse 2s ease-in-out infinite alternate;
 }

 .learn-feature-item:hover {
     color: var(--primary-green);
     transform: translateX(10px);
     text-shadow: 0 0 10px var(--accent-glow);
 }

 /* Right Side AI Design */
 .learn-content-right {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 600px;
 }

 .learn-ai-container {
     position: relative;
     width: 100%;
     height: 600px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .learn-ai-text {
     font-size: 25rem;
     font-weight: 900;
     position: relative;
     z-index: 10;
     cursor: pointer;
     transition: all 0.5s ease;
     font-family: 'Arial Black', sans-serif;
     letter-spacing: -20px;
     user-select: none;
     background: linear-gradient(180deg, var(--primary-green) 0%, var(--primary-green) 70%, #003d1a 85%, #001a0d 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     filter: drop-shadow(0 0 30px var(--accent-glow));
     text-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
 }

 .learn-ai-text:hover .learn-letter {
     animation: learn-letter-dance 0.6s ease-in-out;
 }

 .learn-ai-text:hover {
     filter: drop-shadow(0 0 50px var(--primary-green)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
 }

 .learn-letter {
     display: inline-block;
     transition: all 0.3s ease;
 }

 .learn-letter:hover {
     transform: scale(1.2) rotate(5deg);
     color: #00ffaa;
 }

 /* Vintage Effect - Bottom Fade */
 .learn-ai-text::before {
     content: '';
     position: absolute;
     bottom: -20px;
     left: -10%;
     width: 120%;
     height: 60px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
     z-index: -1;
     border-radius: 50px;
     filter: blur(8px);
 }

 /* Vintage border effect */
 .learn-ai-text::after {
     content: '';
     position: absolute;
     top: -10px;
     left: -10px;
     right: -10px;
     bottom: -10px;
     border: 3px solid transparent;
     background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.2), transparent) border-box;
     -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: subtract;
     mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
     mask-composite: subtract;
     border-radius: 20px;
     z-index: -1;
 }

 /* Node System */
 .learn-node {
     position: absolute;
     width: 8px;
     height: 8px;
     background: var(--primary-green);
     border-radius: 50%;
     box-shadow: 0 0 15px var(--accent-glow);
     opacity: 0.7;
     transition: all 0.3s ease;
 }

 .learn-node::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     width: 16px;
     height: 16px;
     border: 1px solid var(--primary-green);
     border-radius: 50%;
     opacity: 0.3;
     animation: learn-node-pulse 2s ease-in-out infinite;
 }

 .learn-node:hover {
     transform: scale(2);
     box-shadow: 0 0 25px var(--primary-green);
     opacity: 1;
 }

 /* Connection Lines */
 .learn-connection-line {
     position: absolute;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary-green), transparent);
     opacity: 0.4;
     transform-origin: left center;
     transition: all 0.3s ease;
 }

 .learn-connection-line::before {
     content: '';
     position: absolute;
     top: -1px;
     left: 0;
     width: 100%;
     height: 4px;
     background: inherit;
     filter: blur(2px);
     opacity: 0.5;
 }

 .learn-connection-line.learn-active {
     opacity: 1;
     animation: learn-energy-flow 1.5s linear infinite;
     box-shadow: 0 0 10px var(--primary-green);
 }

 /* Floating Particles */
 .learn-particle {
     position: absolute;
     width: 3px;
     height: 3px;
     background: var(--primary-green);
     border-radius: 50%;
     pointer-events: none;
     animation: learn-float-particle 4s linear infinite;
     opacity: 0.6;
 }

 /* Ripple Effect */
 .learn-ripple {
     position: absolute;
     border-radius: 50%;
     border: 2px solid var(--primary-green);
     opacity: 0;
     pointer-events: none;
     transform: translate(-50%, -50%);
 }

 /* Animations */
 @keyframes learn-star-pulse {
     0% {
         opacity: 0.7;
         transform: scale(1);
     }

     100% {
         opacity: 1;
         transform: scale(1.1);
     }
 }

 @keyframes learn-letter-dance {
     0% {
         transform: translateY(0px) rotate(0deg);
     }

     25% {
         transform: translateY(-20px) rotate(-10deg);
     }

     50% {
         transform: translateY(-10px) rotate(5deg);
     }

     75% {
         transform: translateY(-25px) rotate(-5deg);
     }

     100% {
         transform: translateY(0px) rotate(0deg);
     }
 }

 @keyframes learn-node-pulse {

     0%,
     100% {
         opacity: 0.3;
         transform: scale(1);
     }

     50% {
         opacity: 0.8;
         transform: scale(1.2);
     }
 }

 @keyframes learn-energy-flow {
     0% {
         background-position: -100% 50%;
     }

     100% {
         background-position: 200% 50%;
     }
 }

 @keyframes learn-float-particle {
     0% {
         opacity: 0;
         transform: translateY(20px) rotate(0deg);
     }

     10% {
         opacity: 0.6;
     }

     90% {
         opacity: 0.6;
     }

     100% {
         opacity: 0;
         transform: translateY(-100px) rotate(360deg);
     }
 }

 @keyframes learn-ripple-expand {
     0% {
         width: 0px;
         height: 0px;
         opacity: 1;
     }

     100% {
         width: 300px;
         height: 300px;
         opacity: 0;
     }
 }








































/* ========================================
   RESPONSIVE DESIGN - COMPREHENSIVE
   ======================================== */

/* =====================================
   SMALL LAPTOP - 1024px
   ===================================== */
@media (max-width: 1024px) {
    /* Navbar */
    .nav-container {
        width: 92%;
        left: 4%;
        padding: 1.2rem 1.5rem;
    }

    .nav-menu {
        gap: 1rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    /* Banner Section */
    .banner {
        padding: 6rem 0;
        height: auto;
        min-height: 90vh;
    }

    .banner-container {
        width: 92%;
        gap: 3rem;
    }

    .banner-content > p:first-child {
        font-size: 2.8rem;
    }

    .image-placeholder {
        width: 500px;
        height: 500px;
    }

    .round-design {
        width: 400px;
        height: 400px;
    }

    .float-icon {
        width: 50px;
        height: 50px;
        padding: 12px;
    }

    /* Highlight Section */
    .highlight-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .highlight-box {
        padding: 2rem 1.2rem;
    }

    .highlight-box img {
        width: 140px;
        height: 130px;
    }

    /* Why Choose Section */
    .why-choose-section {
        padding: 20vh 0;
    }

    .hexagon-container {
        gap: 15px;
    }

    .hexagon-item {
        width: 260px;
        height: 300px;
        margin: 15px;
    }

    .hexagon-shape {
        height: 220px;
        padding: 35px 18px;
    }

    /* Content Section */
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .content-number {
        font-size: 4rem;
    }

    .plus-sign {
        font-size: 2rem;
    }

    /* Learn Section */
    .learn-ai-text {
        font-size: 20rem;
        letter-spacing: -15px;
    }

    .learn-main-title {
        font-size: 3rem;
    }

    .learn-sub-title {
        font-size: 1.8rem;
    }

    .learn-description {
        font-size: 1.1rem;
    }

    .learn-feature-item {
        font-size: 1.2rem;
    }

    /* Testimonial Section */
    .testimonial-card {
        flex: 0 0 calc(50% - 1rem);
    }

    /* Career Contact Section */
    .career-contact-container {
        width: 92%;
        gap: 3rem;
    }

    .career-content-left {
        width: 45%;
    }

    .career-content-right {
        width: 55%;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 2rem;
        text-align: left !important;
    }
}

/* =====================================
   TABLET/IPAD - 768px
   ===================================== */
@media (max-width: 768px) {
    /* Navbar */
    .mobile-menu-btn {
        display: block;
        font-size: 1.8rem;
    }

    .nav-container {
        padding: 1rem 1.5rem;
    }

    .nav-menu {
        position: fixed;
        top: 100px;
        left: -100%;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background: var(--card-bg);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 1rem 0 2rem 0;
        transition: left 0.3s ease;
        border-radius: 0;
        box-shadow: var(--box-shadow);
        z-index: 9999;
    }

    .nav-menu.open {
        left: 0;
    }

    .nav-item {
        margin: 0.5rem 0;
        width: 90%;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: 0.8rem;
        border-radius: 0.5rem;
        font-size: 1rem;
    }

    .nav-link:hover {
        background: rgba(16, 185, 129, 0.1);
    }

    .nav-link.active {
        background: rgba(16, 185, 129, 0.15);
    }

    .logo {
        font-size: 1.5rem;
    }

    /* Banner Section */
    .banner {
        padding: 4rem 0;
        height: auto;
        min-height: auto;
    }

    .banner-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .banner-content > p:first-child {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .banner-content > p:nth-child(2) {
        font-size: 1rem;
    }

    .image-placeholder {
        width: 350px;
        height: 350px;
        margin: 0 auto;
    }

    .round-design {
        width: 320px;
        height: 320px;
    }

    .banner-image {
        order: -1;
    }

    .float-icon {
        width: 45px;
        height: 45px;
    }

    .icon-code {
        top: 10%;
        left: 5%;
    }

    .icon-book {
        top: 70%;
        left: 5%;
    }

    .icon-laptop {
        top: 40%;
        right: 5%;
    }

    /* Highlight Section */
    .highlight-section {
        padding: 4rem 0;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .highlight-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .highlight-box {
        padding: 2rem 1rem;
    }

    .highlight-box img {
        width: 120px;
        height: 110px;
    }

    .highlight-box h3 {
        font-size: 1rem;
    }

    /* Why Choose Section */
    .why-choose-section {
        padding: 15vh 0;
    }

    .hexagon-container {
        gap: 15px;
    }

    .hexagon-item {
        width: 240px;
        height: 280px;
        margin: 10px;
    }

    .hexagon-shape {
        height: 200px;
        padding: 30px 15px;
    }

    .hex-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 15px;
    }

    .hex-title {
        font-size: 1rem;
    }

    .hex-description {
        font-size: 0.85rem;
    }

    /* Content Section */
    .content-section {
        padding: 4rem 0;
    }

    .content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .content-number {
        font-size: 3.5rem;
    }

    .plus-sign {
        font-size: 1.8rem;
    }

    .content-item {
        padding: 2rem 1.5rem;
    }

    .content-text h3 {
        font-size: 1.2rem;
    }

    .content-text p {
        font-size: 0.95rem;
    }

    /* Learn Section */
    .learn-section {
        padding: 30px 0;
    }

    .learn-content-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .learn-content-left {
        padding: 20px 0;
    }

    .learn-main-title {
        font-size: 2.5rem;
    }

    .learn-sub-title {
        font-size: 1.5rem;
    }

    .learn-description {
        font-size: 1rem;
    }

    .learn-feature-item {
        font-size: 1.1rem;
        padding-left: 35px;
    }

    .learn-ai-text {
        font-size: 15rem;
        letter-spacing: -10px;
    }

    .learn-content-right {
        min-height: 450px;
    }

    .learn-ai-container {
        height: 450px;
    }

    /* Testimonial Section */
    .testimonial-section {
        padding: 4rem 0;
    }

    .testimonial-card {
        flex: 0 0 100%;
        padding: 2rem 1.5rem;
    }

    /* FAQ Section */
    .faq-section {
        padding: 4rem 0;
    }

    .faq-question {
        padding: 1.25rem 1.5rem;
    }

    .faq-question h3 {
        font-size: 1rem;
    }

    .faq-answer p {
        padding: 1.25rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Career Contact Section */
    .career-contact-section {
        padding-top: 15vh;
        padding-bottom: 15vh;
    }

    .career-contact-container {
        flex-direction: column;
        gap: 2rem;
    }

    .career-content-left,
    .career-content-right {
        width: 100%;
    }

    .benefits-list {
        padding: 2rem;
    }

    .benefit-item {
        font-size: 1rem;
    }

    .career-content-right {
        padding: 2.5rem 2rem;
    }

    /* Footer */
    .footer {
        padding: 3rem 1.5rem 1.5rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
       text-align: left !important;
    }

    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .subscribe-box {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .subscribe-input,
    .subscribe-btn {
        width: 100%;
        max-width: 350px;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        align-items: left;
    }

    /* Scroll Button */
    .scroll-to-top-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

/* =====================================
   LARGE PHONE - 425px
   ===================================== */
@media (max-width: 425px) {
    /* Navbar */
    .nav-container {
        width: 95%;
        left: 2.5%;
        padding: 0.9rem 1rem;
        top: 15px;
    }

    .logo {
        font-size: 1.3rem;
    }

    .mobile-menu-btn {
        font-size: 1.6rem;
    }

    .nav-menu {
        top: 85px;
    }

    .nav-link {
        font-size: 0.95rem;
        padding: 0.7rem;
    }

    /* Banner Section */
    .banner {
        padding: 3rem 0;
    }

    .banner-container {
        width: 90%;
        gap: 2rem;
    }

    .banner-content > p:first-child {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .banner-content > p:nth-child(2) {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .btn-signup {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }

    .rating {
        font-size: 0.9rem;
    }

    .image-placeholder {
        width: 280px;
        height: 280px;
    }

    .round-design {
        width: 260px;
        height: 260px;
    }

    .float-icon {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    /* Highlight Section */
    .highlight-section {
        padding: 3rem 0;
        margin-top: 115px;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .highlight-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .highlight-box {
        padding: 1.8rem 1rem;
        max-width: 100%;
    }

    .highlight-box img {
        width: 110px;
        height: 100px;
    }

    .highlight-box h3 {
        font-size: 0.95rem;
    }

    /* Why Choose Section */
    .why-choose-section {
        padding: 10vh 0;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }

    .hexagon-container {
        gap: 10px;
    }

    .hexagon-item {
        width: 220px;
        height: 260px;
        margin: 8px;
    }

    .hexagon-shape {
        height: 180px;
        padding: 25px 12px;
    }

    .hex-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-bottom: 12px;
    }

    .hex-title {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .hex-description {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .hex-number {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    /* Content Section */
    .content-section {
        padding: 3rem 0;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .content-number {
        font-size: 3rem;
    }

    .plus-sign {
        font-size: 1.5rem;
    }

    .content-item {
        padding: 1.8rem 1rem;
    }

    .content-text h3 {
        font-size: 1.15rem;
    }

    .content-text p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .content-icon {
        font-size: 2.2rem;
        margin-bottom: 1.2rem;
    }

    /* Learn Section */
    .learn-section {
        padding: 25px 0;
    }

    .learn-content-grid {
        gap: 40px;
    }

    .learn-main-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .learn-sub-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .learn-description {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }

    .learn-feature-item {
        font-size: 1rem;
        margin-bottom: 15px;
        padding-left: 32px;
    }

    .learn-feature-item::before {
        font-size: 1.3rem;
    }

    .learn-ai-text {
        font-size: 12rem;
        letter-spacing: -8px;
    }

    .learn-content-right {
        min-height: 380px;
    }

    .learn-ai-container {
        height: 380px;
    }

    /* Testimonial Section */
    .testimonial-section {
        padding: 3rem 0;
    }

    .testimonial-card {
        padding: 1.8rem 1.2rem;
    }

    .testimonial-content p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .author-info h4 {
        font-size: 1rem;
    }

    .author-info span {
        font-size: 0.9rem;
    }

    /* FAQ Section */
    .faq-section {
        padding: 3rem 0;
    }

    .faq-grid {
        gap: 1.2rem;
    }

    .faq-question {
        padding: 1rem 1.2rem;
    }

    .faq-question h3 {
        font-size: 0.95rem;
    }

    .faq-icon {
        font-size: 1.2rem;
    }

    .faq-answer p {
        padding: 1rem 1.2rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Career Contact Section */
    .career-contact-section {
        padding-top: 10vh;
        padding-bottom: 10vh;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .career-fixed-subtitle {
        font-size: 1.2rem;
    }

    .section-header p {
        font-size: 0.95rem;
    }

    .career-contact-container {
        width: 90%;
        gap: 1.5rem;
    }

    .benefits-list {
        padding: 1.8rem;
        gap: 1.2rem;
    }

    .benefit-item {
        font-size: 0.95rem;
        padding: 0.3rem 0;
    }

    .benefit-icon {
        font-size: 1.2rem;
    }

    .career-content-right {
        padding: 2rem 1.5rem;
    }

    .career-contact-form {
        gap: 1.2rem;
    }

    .career-contact-form .form-group label {
        font-size: 0.9rem;
    }

    .career-contact-form .form-group input,
    .career-contact-form .form-group textarea {
        padding: 0.75rem 0.9rem;
        font-size: 0.95rem;
    }

    .career-contact-form .form-group textarea {
        min-height: 100px;
    }

    .submit-btn {
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
    }

    .message-box {
        padding: 1.5rem;
    }

    .message-box h4 {
        font-size: 1.1rem;
    }

    .message-box p {
        font-size: 0.9rem;
    }

    /* Footer */
    .footer {
        padding: 2.5rem 1.2rem 1.2rem;
    }

    .footer-content {
        gap: 2rem;
        text-align: left !important;
    }

    .footer-section h3 {
        font-size: 1.1rem;
        margin-bottom: 1.2rem;
    }

    .footer-brand p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .subscribe-input,
    .subscribe-btn {
        max-width: 100%;
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    .social-link {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .footer-links a {
        font-size: 0.9rem;
    }

    .footer-bottom-content p {
        font-size: 0.85rem;
    }

    /* Scroll Button */
    .scroll-to-top-btn {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        bottom: 1.2rem;
        right: 1.2rem;
    }
}

/* =====================================
   SMALL PHONE - 375px
   ===================================== */
@media (max-width: 375px) {
    /* Navbar */
    .nav-container {
        padding: 0.8rem 0.9rem;
    }

    .logo {
        font-size: 1.2rem;
    }

    .mobile-menu-btn {
        font-size: 1.5rem;
    }

    .nav-link {
        font-size: 0.9rem;
        padding: 0.65rem;
    }

    /* Banner Section */
    .banner {
        padding: 2.5rem 0;
    }

    .banner-content > p:first-child {
        font-size: 1.6rem;
    }

    .banner-content > p:nth-child(2) {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .btn-signup {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem;
    }

    .rating {
        font-size: 0.85rem;
    }

    .image-placeholder {
        width: 250px;
        height: 250px;
    }

    .round-design {
        width: 230px;
        height: 230px;
    }

    .float-icon {
        width: 35px;
        height: 35px;
        padding: 8px;
    }

    /* Highlight Section */
    .section-header h2 {
        font-size: 1.5rem;
    }

    .section-header h2::after {
        width: 50px;
        height: 3px;
    }

    .highlight-box {
        padding: 1.5rem 0.9rem;
    }
    .highlight-section {
        padding: 3rem 0;
        margin-top: 115px;
    }
    .highlight-box img {
        width: 100px;
        height: 90px;
    }

    .highlight-box h3 {
        font-size: 0.9rem;
    }

    /* Why Choose Section */
    .why-choose-section {
        padding: 8vh 0;
    }

    .section-header h2 {
        font-size: 1.4rem;
    }

    .hexagon-item {
        width: 200px;
        height: 240px;
    }

    .hexagon-shape {
        height: 165px;
        padding: 20px 10px;
    }

    .hex-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .hex-title {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .hex-description {
        font-size: 0.75rem;
    }

    .hex-number {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        top: -8px;
        right: -8px;
    }

    /* Content Section */
    .content-number {
        font-size: 2.5rem;
    }

    .plus-sign {
        font-size: 1.3rem;
    }

    .content-item {
        padding: 1.5rem 0.9rem;
    }

    .content-text h3 {
        font-size: 1.05rem;
    }

    .content-text p {
        font-size: 0.85rem;
    }

    .content-icon {
        font-size: 2rem;
    }

    /* Learn Section */
    .learn-main-title {
        font-size: 1.75rem;
        margin-bottom: 18px;
    }

    .learn-sub-title {
        font-size: 1.15rem;
        margin-bottom: 18px;
    }

    .learn-description {
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    .learn-feature-item {
        font-size: 0.95rem;
        margin-bottom: 12px;
        padding-left: 30px;
    }

    .learn-feature-item::before {
        font-size: 1.2rem;
    }

    .learn-ai-text {
        font-size: 10rem;
        letter-spacing: -6px;
    }

    .learn-content-right {
        min-height: 350px;
    }

    .learn-ai-container {
        height: 350px;
    }

    /* Testimonial Section */
    .testimonial-card {
        padding: 1.5rem 1rem;
    }

    .testimonial-content {
        margin-bottom: 1.5rem;
    }

    .testimonial-content p {
        font-size: 0.9rem;
    }

    .author-info h4 {
        font-size: 0.95rem;
    }

    .author-info span {
        font-size: 0.85rem;
    }

    /* FAQ Section */
    .section-header p {
        font-size: 0.9rem;
    }

    .faq-question {
        padding: 0.9rem 1rem;
    }

    .faq-question h3 {
        font-size: 0.9rem;
    }

    .faq-answer p {
        padding: 0.9rem 1rem;
        font-size: 0.85rem;
    }

    /* Career Contact Section */
    .section-header h2 {
        font-size: 1.6rem;
    }

    .career-fixed-subtitle {
        font-size: 1.1rem;
    }

    .benefits-list {
        padding: 1.5rem;
    }

    .benefit-item {
        font-size: 0.9rem;
    }

    .career-content-right {
        padding: 1.8rem 1.2rem;
    }

    .career-contact-form .form-group label {
        font-size: 0.85rem;
    }

    .career-contact-form .form-group input,
    .career-contact-form .form-group textarea {
        padding: 0.7rem 0.85rem;
        font-size: 0.9rem;
    }

    .submit-btn {
        padding: 0.85rem 1.6rem;
        font-size: 0.95rem;
    }

    /* Footer */
    .footer-section h3 {
        font-size: 1rem;
    }

    .footer-brand p {
        font-size: 0.85rem;
    }

    .subscribe-input,
    .subscribe-btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }

    .social-link {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .footer-links a {
        font-size: 0.85rem;
    }

    /* Scroll Button */
    .scroll-to-top-btn {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }
}

/* =====================================
   EXTRA SMALL DEVICES - 320px
   ===================================== */
@media (max-width: 320px) {
    .logo {
        font-size: 1.1rem;
    }

    .banner-content > p:first-child {
        font-size: 1.4rem;
    }

    .image-placeholder {
        width: 220px;
        height: 220px;
    }

    .section-header h2 {
        font-size: 1.3rem;
    }

    .hexagon-item {
        width: 180px;
        height: 220px;
    }

    .learn-ai-text {
        font-size: 8rem;
        letter-spacing: -5px;
    }

    .learn-main-title {
        font-size: 1.5rem;
    }

    .content-number {
        font-size: 2.2rem;
    }
}

/* =====================================
   UTILITY RESPONSIVE CLASSES
   ===================================== */

/* Hide elements on specific breakpoints */
.hide-on-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    .show-on-mobile {
        display: block !important;
    }
}

/* Text alignment helpers */
@media (max-width: 768px) {
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-text-left {
        text-align: left !important;
    }
}

/* Spacing adjustments */
@media (max-width: 768px) {
    .mobile-no-padding {
        padding: 0 !important;
    }
    
    .mobile-small-padding {
        padding: 1rem !important;
    }
}