:root {
   --primary-blue: #0066FF;
   --text-main: #111827;
   --text-sub: #4B5563;
   --bg-grey: #F3F4F6;
   --border-light: #E5E7EB;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Inter', sans-serif;
   scroll-behavior: smooth;
 }

 body {
   color: var(--text-main);
   line-height: 1.6;
   overflow-x: hidden;
   padding-top: 90px;
 }

 @media (max-width: 900px) {
   body {
     padding-top: 70px;
   }
 }

 @media (max-width: 480px) {
   body {
     padding-top: 60px;
   }
 }

 .container {
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 40px;
 }

 @media (max-width: 1024px) {
   .container {
     padding: 0 30px;
   }
 }

 @media (max-width: 768px) {
   .container {
     padding: 0 24px;
   }
 }

 @media (max-width: 480px) {
   .container {
     padding: 0 16px;
   }
 }

 /* ===== Footer Active Highlight (NO underline) ===== */

 .footer-col a {
   color: var(--text-sub);
   transition: color 0.3s ease;
 }

 /*.footer-col a:hover,
.footer-col a.active {
  color: var(--primary-blue);
  font-weight: 600;
}
*/





 /* 
:root {
    --brand-blue: #00aeef;
    --text-dark: #1a1a1a;
    --text-gray: #666;
    
} */

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
 }

 body {
   background-color: #ffffff;
   color: #0b0f1a;
 }

 .container {
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 40px;
 }














 /* --- Hero Section --- */
 .hero {
   display: flex;
   align-items: center;
   gap: 80px;
   padding: 50px 0;
 }

 @media (max-width: 1024px) {
   .hero {
     flex-direction: column;
     gap: 40px;
     padding: 40px 0;
   }
 }

 @media (max-width: 768px) {
   .hero {
     gap: 30px;
     padding: 30px 0;
   }
 }

 @media (max-width: 480px) {
   .hero {
     gap: 16px;
     padding: 16px 0;
   }
 }

 .hero-text {
   flex: 1.2;
 }



 /* ===== HERO TEXT MATCH HOME PAGE ===== */

 .hero-text h1 {
   font-size: 51px;
   /* SAME AS HOME */
   font-weight: 700;
   color: #0b0f1a;
   margin-bottom: 25px;
 }

 @media (max-width: 768px) {
   .hero-text h1 {
     font-size: 36px;
     margin-bottom: 18px;
   }
 }

 @media (max-width: 480px) {
   .hero-text h1 {
     font-size: 26px;
     margin-bottom: 15px;
   }
 }

 .hero-text p {
   font-size: 15px;
   /* SAME AS HOME */
   line-height: 1.5;
   color: #5b5f6b;
   padding-bottom: 16px;
 }

 @media (max-width: 480px) {
   .hero-text p {
     font-size: 13px;
   }
 }











 .btn-expert {
   background: var(--primary-blue);
   color: #fff;
   border: none;
   padding: 14px 28px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .btn-expert:hover {
   opacity: 0.9;
   transform: translateY(-2px);
 }

 @media (max-width: 480px) {
   .btn-expert {
     padding: 10px 18px;
     font-size: 13px;
     width: auto;
     display: inline-block;
   }
 }




 .image-placeholder {


 height: auto;              /* ✅ ADD */
  min-height: unset;         /* ✅ REMOVE min-height */

   flex: 0.8;
   /* min-height: 350px; */
   background: #E5E7EB;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9CA3AF;
   overflow: hidden;
 }

 @media (max-width: 1024px) {
   .image-placeholder {
     min-height: 300px;
     flex: 1;
   }
 }

 @media (max-width: 768px) {
   .image-placeholder {
     min-height: 250px;
   }
 }

 @media (max-width: 480px) {
   .image-placeholder {
     min-height: 200px;
     flex: 1;
   }
 }

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

 /* --- Tabs Bar --- */
 .tabs-section {
   padding: 20px 0;
   display: flex;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
   background: #fff;
   position: sticky;
   top: 90px;
   z-index: 90;
   border-bottom: 1px solid var(--border-light);
 }

 @media (max-width: 900px) {
   .tabs-section {
     top: 70px;
   }
 }

 @media (max-width: 480px) {
   .tabs-section {
     top: 60px;
     padding: 10px 8px;
     gap: 6px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 }

 .tab-btn {
   padding: 10px 20px;
   border: 1px solid var(--border-light);
   border-radius: 8px;
   background: #fff;
   color: var(--text-sub);
   font-weight: 500;
   cursor: pointer;
   text-decoration: none;
   transition: 0.3s;
   font-size: 15px;
 }

 @media (max-width: 768px) {
   .tab-btn {
     padding: 8px 14px;
     font-size: 13px;
   }
 }

 @media (max-width: 480px) {
   .tab-btn {
     padding: 6px 8px;
     font-size: 10px;
     white-space: nowrap;
   }
 }

 .tab-btn:hover {
   background: var(--bg-grey);
 }

 .tab-btn.active {
   background: #F9FAFB;
   border-color: #D1D5DB;
   color: #111827;
   font-weight: 600;
   border-bottom: 2px solid var(--primary-blue);
 }

 /* --- Main Service Sections --- */
 .service-block {
   padding: 80px 0;
   display: flex;
   /* align-items: stretch; */
    align-items: center;   /* ✅ FIX */
   gap: 80px;
   scroll-margin-top: 100px;
 }

 @media (max-width: 1024px) {
   .service-block {
     flex-direction: column;
     gap: 40px;
     padding: 60px 0;
   }
 }

 @media (max-width: 768px) {
   .service-block {
     gap: 30px;
     padding: 40px 0;
   }
 }

 @media (max-width: 480px) {
   .service-block {
     gap: 16px;
     padding: 20px 0;
   }
 }

 .service-block.reverse {
   flex-direction: row-reverse;
 }

 @media (max-width: 1024px) {
   .service-block.reverse {
     flex-direction: column;
   }
 }

 .service-info {
   flex: 1.4;
   min-width: 0;
 }

 .service-side-img {
   flex: 0.8;
   height: 500px;
   background: transparent;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #9CA3AF;
   border: none;
   font-weight: 700;
   overflow: hidden;
 }

 @media (max-width: 768px) {
   .service-side-img {
     height: 350px;
   }
 }

 @media (max-width: 480px) {
   .service-side-img {
     height: 280px;
   }
 }

 .service-side-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 20px;
 }

 .service-info h2 {
   font-size: 42px;
   font-weight: 800;
   margin-bottom: 20px;
 }

 @media (max-width: 768px) {
   .service-info h2 {
     font-size: 32px;
     margin-bottom: 16px;
   }
 }

 @media (max-width: 480px) {
   .service-info h2 {
     font-size: 24px;
     margin-bottom: 14px;
   }
 }

 .service-info .main-desc {
   font-size: 18px;
   color: var(--text-sub);
   margin-bottom: 40px;
 }

 @media (max-width: 768px) {
   .service-info .main-desc {
     font-size: 15px;
     margin-bottom: 30px;
   }
 }

 @media (max-width: 480px) {
   .service-info .main-desc {
     font-size: 13px;
     margin-bottom: 25px;
   }
 }

 /* --- Cards Grid --- */
 .card-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-bottom: 40px;
 }

 @media (max-width: 768px) {
   .card-grid {
     grid-template-columns: 1fr;
     gap: 16px;
     margin-bottom: 30px;
   }
 }

 @media (max-width: 480px) {
   .card-grid {
     gap: 12px;
     margin-bottom: 20px;
   }
 }

 .card {
   padding: 24px;
   border: 1px solid var(--border-light);
   border-radius: 12px;
   background: #fff;
 }

 @media (max-width: 480px) {
   .card {
     padding: 16px;
   }
 }

 .card-label {
   display: inline-block;
   background: #F3F4F6;
   color: #374151;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 700;
   margin-bottom: 16px;
   text-transform: capitalize;
 }

 @media (max-width: 480px) {
   .card-label {
     font-size: 11px;
     padding: 4px 8px;
     margin-bottom: 12px;
   }
 }

 .card p {
   font-size: 15px;
   color: var(--text-sub);
   line-height: 1.5;
 }

 @media (max-width: 480px) {
   .card p {
     font-size: 13px;
   }
 }

 /* --- FAQ --- */
 .faq-section {
   max-width: 800px;
   margin: 0 auto;
   padding: 100px 0;
 }

 @media (max-width: 768px) {
   .faq-section {
     padding: 60px 0;
   }
 }

 @media (max-width: 480px) {
   .faq-section {
     padding: 40px 0;
   }
 }

 .faq-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 24px 0;
   border-bottom: 1px solid var(--border-light);
   font-weight: 600;
   font-size: 18px;
   cursor: pointer;
 }

 @media (max-width: 768px) {
   .faq-item {
     padding: 18px 0;
     font-size: 16px;
   }
 }

 @media (max-width: 480px) {
   .faq-item {
     padding: 14px 0;
     font-size: 14px;
   }
 }

 /* --- CTA Box (Consolidated) --- */
 .cta-container {
   position: relative;
   padding: 100px 0;
   margin-bottom: 60px;
   background-color: #0066FF;
   /* Fallback Color */
   background-image: url("../images/cta-bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 40px;
   overflow: hidden;
 }

 @media (max-width: 768px) {
   .cta-container {
     padding: 60px 0;
     margin-bottom: 40px;
   }
 }

 @media (max-width: 480px) {
   .cta-container {
     padding: 40px 0;
     margin-bottom: 30px;
   }
 }

 /* Overlay for CTA */
 .cta-container::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   /* dark overlay */
   z-index: 1;
   border-radius: 40px;
 }

 .cta-blue {
   position: relative;
   z-index: 2;
   max-width: 900px;
   margin: 0 auto;
   border-radius: 20px;
   padding: 40px;
   text-align: center;
   color: #ffffff;
 }

 @media (max-width: 480px) {
   .cta-blue {
     padding: 25px 16px;
   }
 }

 .cta-blue h2 {
   font-size: 48px;
   font-weight: 800;
   margin-bottom: 20px;
 }

 @media (max-width: 768px) {
   .cta-blue h2 {
     font-size: 34px;
     margin-bottom: 15px;
   }
 }

 @media (max-width: 480px) {
   .cta-blue h2 {
     font-size: 24px;
     margin-bottom: 12px;
   }
 }

 .cta-blue p {
   font-size: 20px;
   margin-bottom: 20px;
   opacity: 0.9;
 }

 @media (max-width: 768px) {
   .cta-blue p {
     font-size: 16px;
     margin-bottom: 15px;
   }
 }

 @media (max-width: 480px) {
   .cta-blue p {
     font-size: 13px;
     margin-bottom: 12px;
   }
 }

 .btn-white {
   background: #fff;
   color: var(--primary-blue);
   border: none;
   padding: 16px 32px;
   border-radius: 10px;
   font-weight: 700;
   font-size: 17px;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .btn-white:hover {
   opacity: 0.9;
   transform: translateY(-2px);
 }

 @media (max-width: 480px) {
   .btn-white {
     padding: 12px 20px;
     font-size: 14px;
     width: 100%;
   }
 }

 /* --- Footer --- */
 footer {
   padding: 60px 0 30px;
   border-top: 1px solid var(--border-light);
   background: #ffffff;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
   gap: 40px;
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 40px;
 }

 @media (max-width: 1024px) {
   .footer-grid {
     padding: 0 30px;
     gap: 30px;
   }
 }

 @media (max-width: 768px) {
   .footer-grid {
     grid-template-columns: 1fr 1fr;
     padding: 0 24px;
     gap: 24px;
   }
 }

 @media (max-width: 480px) {
   .footer-grid {
     grid-template-columns: 1fr;
     padding: 0 16px;
     gap: 20px;
   }
 }

 .footer-col h4 {
   margin-bottom: 25px;
   font-size: 17px;
   font-weight: 700;
 }

 @media (max-width: 480px) {
   .footer-col h4 {
     font-size: 15px;
     margin-bottom: 16px;
   }
 }

 .footer-col ul {
   list-style: none;
 }

 .footer-col li {
   margin-bottom: 12px;
   color: var(--text-sub);
   font-size: 15px;
 }

 @media (max-width: 480px) {
   .footer-col li {
     font-size: 13px;
     margin-bottom: 10px;
   }
 }

 .footer-col a {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
 }

 /*.footer-col a:hover{
   color: #1677ff;
}*/
 .footer-col a:hover {
   color: #1677ff;
 }

 /* ===== FOOTER BRAND FIX (Standardized) ===== */
 .footer-brand {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

 .footer-brand a img {
   width: 150px;
   height: auto;
   object-fit: contain;
   margin-bottom: 20px;
 }

 @media (max-width: 768px) {
   .footer-brand a img {
     width: 140px;
   }
 }

 @media (max-width: 480px) {
   .footer-brand a img {
     width: 120px;
   }
 }

 .footer-text {
   margin: 0;
   font-size: 14px;
   color: var(--text-sub);
   line-height: 1.6;
 }

 .footer-brand a {
   display: block;
 }




















 /* ===== FORCE FIX FOR LEARN MORE BUTTON ===== */

 /* Anchor styled as button */
 a.btn-expert,
 a.btn-expert:hover,
 a.btn-expert:active,
 a.btn-expert:focus,
 a.btn-expert:visited {
   color: #ffffff !important;
   text-decoration: none !important;
 }

 /* Button inside anchor */
 a button.btn-expert,
 a button.btn-expert:hover,
 a button.btn-expert:active,
 a button.btn-expert:focus {
   color: #ffffff !important;
   text-decoration: none !important;

 }

 /* Remove browser active link color */
 a:active,
 a:focus {
   color: inherit;
   text-decoration: none;
 }

 /* EXTRA safety */
 .btn-expert span {
   color: #ffffff !important;
   text-decoration: none !important;
 }




 .explore-section {
   position: relative;
   width: 100%;
   min-height: 400px;
   background-color: #0b1a2a;
   /* Fallback Dark Color */
   background-image: url("../images/service-p8-industrial.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #fff;
   margin: 60px 0;
   border-radius: 40px;
   overflow: hidden;
 }

 @media (max-width: 768px) {
   .explore-section {
     min-height: 300px;
     margin: 40px 0;
   }
 }

 @media (max-width: 480px) {
   .explore-section {
     min-height: 250px;
     margin: 30px 0;
   }
 }

 .explore-section .overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   /* Slightly darker */
   border-radius: 40px;
 }

 .explore-section .content {
   position: relative;
   max-width: 800px;
   padding: 20px;
   z-index: 2;
 }

 .explore-section h2 {
   font-size: 32px;
   margin-bottom: 12px;
   font-weight: 600;
 }

 @media (max-width: 768px) {
   .explore-section h2 {
     font-size: 26px;
     margin-bottom: 10px;
   }
 }

 @media (max-width: 480px) {
   .explore-section h2 {
     font-size: 20px;
     margin-bottom: 8px;
   }
 }

 .explore-section p {
   font-size: 15px;
   line-height: 1.6;
   margin-bottom: 22px;
   color: #eaeaea;
 }

 @media (max-width: 768px) {
   .explore-section p {
     font-size: 13px;
     margin-bottom: 16px;
   }
 }

 @media (max-width: 480px) {
   .explore-section p {
     font-size: 12px;
     margin-bottom: 12px;
   }
 }

 .explore-section .cta-btn {
   display: inline-block;
   padding: 12px 28px;
   background: #ffffff;
   color: #000;
   text-decoration: none;
   font-weight: 600;
   border-radius: 25px;
   transition: all 0.3s ease;
 }

 @media (max-width: 480px) {
   .explore-section .cta-btn {
     padding: 10px 18px;
     font-size: 13px;
   }
 }

 .explore-section .cta-btn:hover {
   background: #e5e5e5;
 }

 /* ===== LOTTIE ANIMATION STYLING ===== */
 #lottie-animation,
 #lottie-animation-software,
 #lottie-animation-testing,
 #lottie-animation-devops,
 #lottie-animation-staffing {
   width: 100%;
   /* height: 100%; */

 



  max-width: 420px;   /* ✅ Optional but recommended */
  height: auto;       /* ✅ FIX */


 }





 svg {
   width: 100%;
   height: 100%;
 }