body{font-family:Arial,sans-serif;margin:0;padding:0}nav{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;flex-wrap:wrap;position:relative;z-index:10}.logo-link{text-decoration:none}.logo span{font-size:36px;font-weight:700}.auto{color:#000}.payroll{color:#ffdc5c}.nav-links{list-style-type:none;display:flex;gap:40px;justify-content:center;align-items:center;padding:0;margin:10px 0 0;flex-wrap:nowrap}.nav-links li{display:inline-block}.nav-links a{text-decoration:none;font-size:18px;padding:10px 20px;transition:background-color .3s,color .3s}.nav-links li:nth-child(1) a,.nav-links li:nth-child(2) a{color:#000}.border-button{border:2px solid #ffdc5c;color:#000;border-radius:5px}.border-button:hover{background-color:#ffdc5c;color:#fff}.sign-in-button{background-color:#000;color:#ffdc5c;border-radius:8px;padding:8px 15px;border:2px solid #ffdc5c;box-shadow:-6px 2px #ffdc5c}.sign-in-button:hover{background-color:#ffdc5c;color:#000;box-shadow:-4px 0 12px #f3d157;border:1px solid black}.main-content{display:flex;justify-content:center;align-items:center;padding:0 30px;background-color:transparent;height:100vh;overflow:hidden;flex-direction:row;margin-top:50px}.left-content{flex:1;padding-right:50px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.left-content h1{font-size:36px;font-weight:700;color:#333;margin-bottom:20px;text-align:left;margin-left:35px}.left-content p{line-height:1.6;margin-bottom:30px;text-align:left;margin-left:35px}.left-content .p-color{color:#000;font-size:18px}.get-started-button{display:inline-block;background-color:#ffdc5c;color:#000;padding:12px 15rem;border-radius:5px;text-decoration:none;font-size:16px;font-weight:700;margin-top:20px;transition:background-color .3s,box-shadow .3s;box-shadow:-6px 4px #000000e6;align-self:center}.get-started-button:hover{background-color:#f2d056;box-shadow:4px 4px 15px #000000b3}.right-content{flex:1;text-align:center;display:flex;justify-content:flex-start;padding-top:50px}.dashboard-image{max-width:120%;height:auto}.logo{margin-bottom:10px}@media (max-width: 768px){nav{flex-direction:column;align-items:center}.nav-links{flex-direction:row;gap:10px;flex-wrap:wrap;justify-content:center}.nav-links a{font-size:14px;padding:8px 12px}.logo span{font-size:28px}.main-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:auto;margin-top:20px;padding:20px;background-color:#fff;max-width:100%;box-sizing:border-box;overflow:hidden}.left-content{flex:none;padding:0;margin-bottom:20px}.left-content h1{font-size:28px}.left-content p{font-size:16px}.right-content{flex:none;justify-content:center;padding:0}.dashboard-image{max-width:100%;height:auto}.get-started-button{width:90%;max-width:350px;padding:12px 15px;margin-top:20px}}@media (max-width: 480px){.left-content h1{font-size:24px}.left-content p{font-size:14px}.get-started-button{width:100%}}.new-section{background-color:#fff;color:#000;padding:50px 0}.top-box{background-color:#1f2937;color:#fff;padding:40px 0;text-align:center}.main-header{font-size:32px;font-weight:700;margin-bottom:50px;text-align:center;transform:rotate(0);white-space:nowrap;display:inline-block;line-height:1.2em;position:relative;left:39.5rem;top:1rem}.content-container{width:80%;margin:0 auto;text-align:center;position:relative}.features{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;margin-top:30px}.feature-item{flex:1;max-width:200px;text-align:left}.feature-box{background-color:#fff;box-shadow:-10px 4px 8px #fee180;padding:15px;border-radius:8px;text-align:left;height:200px;width:100%;display:flex;flex-direction:column;justify-content:space-between}.feature-box img{width:40px;height:auto;margin-bottom:15px}.feature-box h3{font-size:20px;margin-bottom:10px}.feature-box p{font-size:12px;color:#666}.workforce-glance{display:flex;align-items:center;justify-content:center;margin-top:50px}.workforce-glance-content{display:flex;align-items:center;gap:30px}.workforce-glance-content img{width:40rem;height:auto;margin-top:4rem}.workforce-text{text-align:left;justify-content:space-between;width:50%}.workforce-text h3{font-size:2rem;margin-bottom:15px;text-align:left}.workforce-text p{font-size:17px;color:#000;line-height:1.6;font-weight:700;text-align:justify}@media (max-width: 768px){.features{flex-direction:column;align-items:center}.feature-item{margin-bottom:20px;max-width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.main-header{font-size:28px;margin-left:-31rem}.workforce-glance{flex-direction:column}.workforce-glance-content{flex-direction:column;text-align:center;width:100%}.workforce-glance-content img{margin-bottom:20px;width:100%;height:auto}.workforce-text{width:100%;padding-left:15px;padding-right:15px;box-sizing:border-box;text-align:left}.workforce-text h3{font-size:24px;width:100%;padding-left:15px;padding-right:15px;text-align:left;box-sizing:border-box;margin-top:0}.workforce-text p{font-size:14px;width:100%;padding-left:15px;padding-right:15px;text-align:left;box-sizing:border-box}}.attendance-overview{background-color:#1f2937;padding:12rem 0}.overview-container{display:flex;justify-content:space-between;align-items:center;width:80%;margin:0 auto;gap:40px}.left-content-sec3{flex:1;text-align:left}.left-content-sec3 h3{font-size:40px;font-weight:700;color:#fff;margin-bottom:20px}.left-content-sec3 p{font-size:20px;color:#fff;line-height:1.6}.right-content-sec3{flex:1;display:flex;justify-content:flex-start}.overview-image{max-width:100%;width:50rem}@media (max-width: 768px){.overview-container{flex-direction:column;align-items:center;margin-top:-3rem}.left-content-sec3{text-align:center;margin-bottom:20px}.left-content-sec3 h3{font-size:28px}.left-content-sec3 p{font-size:16px}.right-content-sec3{display:flex;justify-content:center}.overview-image{max-width:80%}}.leave-request-overview{padding:10rem 0;background-color:#fdfcf9}.leave-request-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;flex-wrap:wrap}.left-content-sec4{flex:1;position:relative;text-align:center;padding-right:30px}.right-content-sec4{flex:1;text-align:left;display:flex;flex-direction:column;justify-content:center}.overview-image{width:100%;height:auto}.mobile-image{display:none;position:absolute;bottom:0;left:0;width:30px}.laptop-image{display:block}.right-content-sec4 h3{text-align:left;justify-content:justify;font-size:2.5rem}.right-content-sec4 p{text-align:justify;font-size:1.5rem;margin-top:-30px;max-width:100%}@media (max-width: 768px){.leave-request-container{flex-direction:column;text-align:center;width:100%}.right-content-sec4{margin-bottom:20px;padding-left:20px;padding-right:20px}.overview-image{max-width:100%;height:auto;margin-bottom:20px}.right-content-sec4 h3{font-size:1.5rem;margin-bottom:15px;padding-left:15px;padding-right:15px;text-align:center}.right-content-sec4 p{font-size:1rem;margin-top:10px;padding-left:15px;padding-right:15px;text-align:center}}.behind-the-scene-section{display:flex;flex-direction:column;align-items:center;background-color:#1f2937;color:#fff}.behind-the-scene-container{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;width:100%;max-width:1400px;padding:0 0 3rem}.ocr-capture-behind,.mobile-app-behind,.announcement-center-behind{flex:1 1 250px;max-width:300px;padding:20px;border-radius:12px;text-align:center;transition:transform .3s ease;margin:0 2rem}.dashboard-behind,.payroll-transactions-behind{flex:1 1 250px;max-width:300px;padding:20px;border-radius:12px;text-align:center;transition:transform .3s ease}.feature-boxs{display:flex;flex-direction:column;align-items:start}.feature-boxs img{width:50px;margin-bottom:20px}.feature-boxs h3{font-size:25px;font-weight:700;color:#333;margin-bottom:12px;color:#fff}.feature-boxs p{font-size:15px;color:#666;line-height:1.5;margin-bottom:10px;color:#fff;text-align:left}@media (max-width: 768px){.behind-the-scene-section h1{margin:40px 0 10px 40px}}.team-section{text-align:center;font-size:40px;padding:0 0 40px}.team-container{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:0 20px 20px 0}.profile{background-color:#1f2937;border-radius:100rem;width:200px;height:350px;box-shadow:0 4px 15px #0000001a;padding:10px 1px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}.profile-img{width:100%;height:100%;border-radius:30%;object-fit:cover;margin-bottom:10px}.profile-content h4{font-size:20px;margin:10px 0 5px;color:#fff}.profile-content p{font-size:16px;color:#777}@media (max-width: 768px){.team-container{justify-content:space-evenly;gap:20px}.profile{width:160px;height:300px}.profile-content h4{font-size:18px}.profile-content p{font-size:14px}.team-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.profile{flex:0 1 45%;max-width:45%}}@media (max-width: 768px){.team-container{justify-content:space-between}.profile{width:120px;height:300px}.profile-content h4{font-size:16px}.profile-content p{font-size:12px}}.hr-section{text-align:center;padding:50px 20px;background-color:#1f2937;border-radius:10px;box-shadow:0 4px 20px #0000001a}.hr-section h3{font-size:28px;color:#fff;margin-bottom:20px}.hr-section p{font-size:18px;color:#9e9e9e;margin-bottom:30px;max-width:800px;margin-left:auto;margin-right:auto}.get-started-btn{background-color:#ffd858;color:#000;font-size:18px;padding:12px 12rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;margin-top:2rem}.get-started-btn:hover{background-color:#ba9c3a}@media (max-width: 768px){.get-started-btn{padding:12px 25px;width:100%;max-width:250px}}.logo-section{text-align:left;padding:20rem 0 0;background-color:#fff}.logo-content-s8{font-size:15rem;font-weight:700;color:#000}.logo-payroll{color:#ffd858}@media (max-width: 768px){.logo-section{padding:10rem 0 0}.logo-content-s8{font-size:4rem}.logo-payroll{font-size:100%}}