/* src/main/resources/static/css/style.css */

/* Font import for 'Inter' if not available by default */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root{
    /* === FONTS === */
    --roboto: 'Roboto', sans-serif;

    /* === COLORS === */
    --red: #ED1C24;
    --blue: #00047E;
    --white: #FFFFFF;
    --dark-white: #F6F6F6;
    --black: #000000;
    --light-blue: #E0F3FF;
    --lavender: #E9EBFF;
    --yellow: #FBB040;
    --grey:#9F9F9F;
    --light-grey: #CCCCCC;
    --grey-blue: #F2F3FF;
    --gradient: linear-gradient(124.61deg, rgba(237, 28, 36, 0.04) 21.74%, rgba(237, 28, 36, 0.2) 80.29%), #00047E;

    /* === SIZES === */
    /* Container Widths */
    --width-container: 1440px;
    --width-content: 1312px;
    --width-column: 656px;
    --width-content-inner: 592px;

    /* Heights */
    --height-button: 48px;
    --height-button-small: 40px;
    --height-avatar: 56px;
    --height-icon: 24px;
    --height-logo-small: 36.56px;
    --height-logo-large: 43px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 14px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 48px;
    --spacing-6xl: 56px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 100px;
    --spacing-10xl: 128px;

    /* Padding */
    --padding-button: 8px 20px;
    --padding-button-large: 12px;
    --padding-container: 56px 64px;

    /* Widths */
    --width-logo-small: 126px;
    --width-logo-large: 161px;
    --width-icon: 24px;

    /* Gap */
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 10px;
    --gap-lg: 20px;
    --gap-xl: 22px;
    --gap-2xl: 32px;
    --gap-3xl: 40px;
    --gap-4xl: 48px;
    --gap-5xl: 64px;
    --gap-6xl: 100px;

    /* Border Radius */
    --radius-full: 50px;

    /* Borders */
    --border-thin: 1px solid;
    --border-thick: 2px solid;
}


/* Global Body Styles */
body {
    font-family: var(--roboto); /* Fallback to sans-serif */
    background-color: var(--white);
    margin: 0;
    padding: 0; /* Remove padding from body as app-container will handle it */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top to allow header/footer */
    min-height: 100vh;
    box-sizing: border-box;
    color: #343a40; /* Default text color */
}

/* App Container (wraps header, main content, footer) */
.app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff; /* Background for the main app area */
    overflow: hidden; /* Ensures rounded corners are visible */
}

/* Global Loader Styles */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header Styles */
.app-header {
   /* background-color: #007bff; *//* Primary blue *//*
    color: white;
    padding: 1rem 2rem;*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /*display: flex;
    justify-content: space-between;
    align-items: center;*/
    /*flex-wrap: wrap;*/ /* Allow wrapping on small screens */
}

/*.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-logo {
    font-size: 1.8rem;
    font-weight: bold;
    margin-right: 1rem;
}

.header-title {
    font-size: 1.2rem;
    flex-grow: 1; *//* Takes available space *//*
    text-align: left;
}

.header-user, .header-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; *//* Pushes to the right *//*
}

.header-button {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.header-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}*/

.header-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 29px;
    width: 100%;
    height: 72px;
    background: #ffffff;
    box-sizing: border-box;
}

.header-left {
    flex: none;
    order: 0;
    flex-grow: 0;
}

.header-logo {
    width: 126px;
    height: 36.56px;
    object-fit: contain;
}

.header-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0 100px;
    padding: 0;
    flex: 1;
    justify-content: flex-start;
}

.header-menu li {
    height: 21px;
    position: relative;
}

.header-menu a {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #000000;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    cursor: pointer;
}

.header-menu a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #ED1C24;
}

.header-menu .dropdown {
    position: relative;
}

.header-menu .dropdown > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-menu .dropdown .fas.fa-caret-down {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.header-menu .dropdown.open .fas.fa-caret-down {
    transform: rotate(180deg);
}


.header-dropdown {
    position: absolute;
    top: 100%;
    left: -80px;
    min-width: 250px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 3px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-dropdown::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 115px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
}

.header-dropdown::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 115px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #e0e0e0;
}

.header-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-dropdown li {
    height: auto;
    margin: 0;
}

.header-dropdown ul li a {
    font-family: 'Roboto', sans-serif;
    width: fit-content !important;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 15px 2px 5px 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-bottom: none;
}

.header-dropdown ul li a:hover {
    border-bottom: 2px solid var(--red);
    transition: 0.1s;
}

.header-dropdown ul li a.active::after,
.header-dropdown ul li a::after {
    display: none;
}

.dropdown.open .header-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-column {
    width: 100%;
}

.dropdown-heading {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 13px;
    color: var(--red);
    text-transform: uppercase;
    padding: 10px 2px var(--spacing-sm) 2px;
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--light-grey);
}

.dropdown-grid{
    display: flex;
    flex-direction: row;
    padding: 0 20px 10px 20px;
    gap: 18px;
}

.dropdown-divider {
    border: 0;
    height: 1px;
    background-color: var(--light-grey);
    margin: 8px 0;
}

.dropdown-column > ul:first-of-type {
    margin-top: 0;
}

.header-dropdown li.has-submenu > a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-dropdown li.has-submenu {
    position: relative;
    width: 100%;
}

.header-submenu {
    position: absolute;
    top: -16px;
    left: 100%;
    min-width: 250px;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    padding: 15px 20px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-dropdown li.has-submenu.open > .header-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.header-submenu ul li a {
    padding: 5px 2px;
}


.header-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.mobile-contact {
    display: none;
}

.contact-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 119px;
    height: 40px;
    background: #ED1C24;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    cursor: pointer;
}

.menu-icon {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 1100;
}

.menu-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #000;
    border-radius: 2px;
}
/* Main Content Area */
.app-main-content {
    flex-grow: 1; /* Takes up remaining vertical space */
    /*padding: 2rem;*/ /* Padding inside the main content area */
    background-color: var(--white); /* Light background for content */
}

/* Footer Styles */
/*.app-footer {
    background-color: #343a40; *//* Dark gray *//*
    color: white;
    *//*padding: 1rem 2rem;*//*
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.footer-content p {
    margin: 0.5rem 0;
    color: #ced4da;
}*/

.app-footer {
  background: var(--gradient);
  color: #fff;
  padding: 80px 60px;
  font-size: 0.9rem;
  font-weight: 400;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 98%;
  margin: auto;
  padding-bottom: 1rem;
  gap: 2rem;
}

.footer-left {
  flex: 1;
  min-width: 300px;
}

.footer-logo-section {
    display: flex;
    gap: 24px;
    margin-bottom: 1rem;
}

.footer-logo {
  width: 161px;
  height: auto;
  margin-bottom: 1rem;
}

.footer-tagline {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  max-width: 400px;
}

.footer-address {
  color: #fff;
  line-height: 1.6;
}

.footer-address p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  min-width: 250px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
}

.footer-social span {
  margin-right: 0.5rem;
}

.footer-social a {
  color: #fff;
  font-size: 1.1rem;
  transition: 0.3s;
  padding: 0.3rem;
}

.footer-social a:hover {
  color: var(--yellow);
  transform: translateY(-2px);
}

.footer-email{
    padding-top: 24px;
}

.footer-email,
.footer-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
}

.footer-email i,
.footer-phone i {
  font-size: 1rem;
  color: var(--white);
}

.footer-email a,
.footer-phone a {
  color: var(--white);
  text-decoration: none;
  transition: 0.3s;
}

.footer-email a:hover,
.footer-phone a:hover {
  color: var(--yellow)
}

.footer-bottom {
  border-bottom: 1px solid var(--white);
  padding: 1.5rem 0;
  text-align: center;
  max-width: 98%;
  margin: 0 auto;
}

.footer-bottom p {
  margin: 0;
  color: var(--white);
  font-size: 0.85rem;
}
/* --- Existing styles for pages (Dashboard, Home) --- */

/* Page Titles */
.page-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #374151;
    margin-bottom: 1.5rem;
}

/* Page Descriptions */
.page-description {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Message Box Styles (for backend responses/errors) */
.message-box {
    background-color: #f0f8ff;
    color: #004085;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    font-weight: 500;
    border: 1px solid #b8daff;
}

.message-box p:first-child {
    font-size: 1.25rem;
    font-weight: 600;
}

.message-box p:last-child {
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.error-box {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.small-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* HOME PAGE */
.home-container {
   width: 100%;
   min-height: 100vh;
}


.hero-container {
   background-image: url('../assets/images/bg-hero.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat !important;
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: var(--spacing-7xl) var(--spacing-8xl);
   position: relative;
   overflow: hidden;
}

.hero-container::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background:
       radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
       radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
   pointer-events: none;
}

.hero-content {
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-8xl);
   align-items: center;
   position: relative;
   z-index: 1;
}

.text-section {
   color: var(--white);
}

.hero-title {
   font-family: var(--roboto);
   font-weight: 800;
   font-size: 3.5rem;
   line-height: 1.1;
   margin-bottom: var(--spacing-3xl);
   background: linear-gradient(135deg, #FFFFFF 0%, #E0E7FF 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.hero-description {
   font-family: var(--roboto);
   font-size: 1.25rem;
   line-height: 1.6;
   margin-bottom: var(--spacing-5xl);
   color: rgba(255, 255, 255, 0.9);
   font-weight: 400;
}

.button-group {
   display: flex;
   gap: var(--spacing-xl);
   align-items: center;
}

.btn {
   padding: 16px 32px;
   font-family: var(--roboto);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   border: none;
   transition: all 0.3s ease;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.btn-primary {
   background: var(--red);
   color: var(--white);
   box-shadow: 0 4px 16px rgba(237, 28, 36, 0.3);
}


.btn-secondary {
   background: transparent;
   color: var(--white);
   border: 2px solid rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(10px);
}


.image-section {
   display: flex;
   justify-content: right;
   align-items: center;
}

.team-image-placeholder {
   width: 500px;
   height: 500px;
   border-radius: 50%;
   overflow: hidden;
   position: relative;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(20px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.team-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

/* Solution Guidance Section */
.solution-guidance-container {
    background: url('../assets/images/bg-solution-section.png');
    background-size: cover;
    background-position: center;
    padding: var(--spacing-sm) var(--spacing-7xl) 60px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.solution-guidance-content {
    display: flex;
    gap: var(--gap-md);
    max-width: var(--width-content);
    margin: 0 auto;
    align-items: center;
}

.human-body-section {
    position: relative;
    width: 345px;
    height: 831px;
    flex-shrink: 0;
}

.human-body-image {
    position: absolute;
    width: 622px;
    height: 901px;
    left: -161px;
    top: -35px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.solution-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: var(--roboto);
    font-weight: 500;
    font-size: 24px;
    padding: var(--spacing-md) var(--spacing-xl);
    height: 53px;
    box-sizing: border-box;
}

.label-think-tank { background-color: #0309BF; top: 50px; left: 65px; width: 193px; }
.label-erp { background-color: #721214; top: 202px; left: 69px; width: 193px; }
.label-front-end { background-color: #2D1272; top: 402px; left: 132px; width: 193px; }
.label-specific { background-color: #3C0056; top: 669px; left: 41px; width: 284px; }


.solutions-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
    width: 100%;
}

.solutions-main-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    color: var(--white);
    width: 100%;
    text-align: left;
    margin: 0;
}

.solutions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.solution-card {
    padding: var(--spacing-xl);
    border-radius: 3px;
}

.card-think-tank { background-color: #190089; }
.card-erp { background-color: #721214; }
.card-front-end { background-color: #2D1272; }
.card-specific { background-color: #3C0056; }

.solution-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.solution-card-header h3 {
    font-family: var(--roboto);
    font-weight: 500;
    font-size: 24px;
    color: var(--white);
    margin: 0;
}


.card-logos img {
    height: 24px;
}

.solution-card-body {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: var(--gap-md);
}

.solution-item {
    color: var(--white);
    font-family: var(--roboto);
    font-size: 12px;
    text-align: center;
    padding: var(--padding-button);
    border-radius: 3px;
    min-height: 61px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.card-think-tank .solution-item { background-color: #0309BF; }
.card-erp .solution-item { background-color: #530304; }
.card-front-end .solution-item { background-color: #4A367D; }
.card-specific .solution-item { background-color: #5B127A; }

.solution-item:hover {
    filter: brightness(1.2);
}

.trusted-by-container {
    background-image: url('../assets/images/bg-trusted-by.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-9xl) 0;
    gap: var(--spacing-8xl);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.trusted-by-title {
    font-weight: 700;
    font-size: 40px;
    text-align: center;
    color: var(--black);
    margin: 0;
}

.trusted-by-logos {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: -webkit-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}

.logo-track {
    display: flex;
    gap: var(--spacing-4xl);
    align-items: center;
    width: calc((150px + var(--spacing-4xl)) * 58);
    animation: scroll 60s linear infinite;
}

.trusted-by-logos:hover .logo-track {
    animation-play-state: paused;
}

.company-logo {
    height: 60px;
    max-width: 180px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.company-logo:hover {
    transform: scale(1.1);
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-1 * (150px + var(--spacing-4xl)) * 29));
    }
}

.our-values-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-8xl) var(--spacing-7xl);
    gap: var(--spacing-8xl);
    background-color: var(--white);
    border-radius: 0px;
    box-sizing: border-box;
}

.our-values-title {
    width: 768px;
    height: 48px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 120%;
    text-align: center;
    color: var(--black);
    margin: 0;
}

.our-values-description {
    max-width: 1000px;
    margin: 0;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
}

.our-values-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: var(--spacing-7xl);
    width: var(--width-content);
    height: auto;
}

.our-values-grid > .row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: var(--gap-6xl);
    width: var(--width-content);
    height: auto;
    border-radius: 0;
}

.value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--spacing-3xl);
    width: 287px;
    height: auto;
    border-radius: 0;
}

.value-icon {
    width: 122px;
    height: 128px;
    object-fit: contain;
}

.value-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--spacing-2xl);
    width: 287px;
    height: auto;
    border-radius: 0;
}

.value-title {
    width: 287px;
    height: auto;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    text-align: center;
    color: var(--blue);
}

.value-description {
    width: 287px;
    height: auto;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: var(--black);
}

.achievements-container {
    background: linear-gradient(0deg, rgba(73, 52, 192, 0.2), rgba(73, 52, 192, 0.2)), url('../assets/images/bg-achievements.png');
    background-size: cover;
    background-position: center;
    padding: 70px var(--spacing-7xl);
    color: var(--white);
}

.achievements-content {
    max-width: var(--width-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
}

.achievements-header {
    text-align: left;
}

.achievements-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    margin: 0 0 5px 0;
}

.achievements-subtitle {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    justify-content: center;
}

.achievement-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
    border-radius: 5px;
    text-align: center;
}

.highlight-card {
    background: var(--white);
    color: rgba(255, 255, 255, 0.1);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}

.highlight-card .achievement-number,
.highlight-card .achievement-label {
    background: linear-gradient(0deg, rgba(73, 52, 192, 0.2), rgba(73, 52, 192, 0.2)), url('../assets/images/bg-achievements.png');
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.achievement-number {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 80px;
    line-height: 1.2;
}

.achievement-label {
    font-family: var(--roboto);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.5;
    color: var(--white);
}

.project-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-7xl) var(--spacing-7xl) var(--spacing-6xl);
    gap: var(--spacing-3xl);
    background-color: var(--white);
    width: 100%;
    box-sizing: border-box;
}

.project-section-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: var(--spacing-4xl);
    line-height: 120%;
    color: var(--black);
    margin: 0;
    align-self: center;
}

.project-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xl);
    width: var(--width-content);
    max-width: 100%;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-lg);
    width: 100%;
}

.project-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--gap-2xl);
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.1);
    border: var(--border-thick) solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 8px 3px rgba(0, 0, 0, 0.15);
    background: var(--lavender);
    cursor: pointer;
}

.project-card--highlighted {
    border: var(--border-thick) var(--blue);
}

.project-card-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 0;
}

.project-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.project-card-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: var(--spacing-2xl);
    line-height: 140%;
    color: var(--black);
    margin: 0;
}

.project-card-description {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--black);
    margin: 0;
}

.latest-news-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-7xl) var(--spacing-6xl);
    gap: var(--spacing-3xl);
    width: 100%;
    height: auto;
    background-color: var(--white);
    border-radius: 0px;
    box-sizing: border-box;
}

.latest-news-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: var(--spacing-lg);
    width: 100%;
    height: auto;
    font-family: var(--roboto);
    font-weight: 500;
    font-size: 36px;
    line-height: 140%;
    color: var(--black);
    margin: 0;
}

.latest-news-title::after,
.news-page-title::after {
    content: '';
    width: 100%;
    height: 1px;
    border: 2px solid var(--black);
    background-color: var(--black);
    transform: rotate(0.02deg);
    margin-top: var(--spacing-sm);
}

.news-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 150px;
    width: 100%;
    height: auto;
}

.news-grid a{
    text-decoration: none;
    color: inherit;
}

.news-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--spacing-sm);
    width: 384px;
    height: auto;
    min-height: 540px;
    background-color: var(--grey-blue);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.news-card:hover {
    cursor: pointer;
}

.news-image {
    width: 100%;
    height: 226px;
    object-fit: cover;
    display: block;
}

.news-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-xl);
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
}

.news-category-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px var(--spacing-md);
    gap: var(--gap-sm);
    width: 84px;
    height: 29px;
    background-color: var(--red);
}

.news-category {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    text-align: center;
    color: var(--white);
}

.news-title {
    width: 100%;
    max-width: 344px;
    height: auto;
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    color: var(--black);
    margin: 10px 0;
}

.news-description {
    width: 100%;
    max-width: 344px;
    height: auto;
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    text-align: justify;
    color: var(--black);
    margin: 10px 0;

}

.news-date {
    width: 100%;
    max-width: 141px;
    height: 20px;
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    text-align: left;
    color: #9E9E9E;
    align-self: flex-start;
}
/*Home End*/

/*Contact Us*/
.contact-container {
    display: flex;
    flex-direction: column;
    background: var(--blue);
    padding: 40px 64px 112px 64px;
}

.contact-top {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.building-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.contact-main-wrapper {
    display: flex;
    padding: var(--spacing-7xl) 0;
    gap: var(--spacing-8xl);
    align-items: flex-start;
}

.contact-left {
    flex: 1;
    color: var(--white);
}

.contact-left-content {
    padding-right: var(--spacing-4xl);
}

.office-section {
    margin-bottom: var(--spacing-5xl);
}

.office-title {
    font-family: var(--roboto);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    color: var(--white);
    line-height: 1.2;
}

.office-address {
    font-family: var(--roboto);
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.contact-right {
    flex: 0 0 500px;
}

.contact-form-container {
    background: var(--white);
    border-radius: 20px;
    padding: var(--spacing-md) var(--spacing-4xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 633px;
}

.form-header {
    margin-bottom: var(--spacing-3xl);
}

.form-title {
    font-family: var(--roboto);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--black);
    margin: var(--spacing-md) 0px;
}

.form-subtitle {
    font-family: var(--roboto);
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.form-group {
    position: relative;
}

.form-input {
    width: 100%;
    padding: 16px 20px;
    border: var(--border-thick) var(--light-grey);
    border-radius: 12px;
    font-family: var(--roboto);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9fafb;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 4, 126, 0.1);
}

.form-textarea {
    width: 100%;
    padding: 16px 20px;
    border: var(--border-thick) var(--light-grey);
    border-radius: 12px;
    font-family: var(--roboto);
    font-size: 1rem;
    min-height: 120px;
    resize: vertical;
    transition: all 0.3s ease;
    background: #f9fafb;
    box-sizing: border-box;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 4, 126, 0.1);
}

.submit-btn {
    background: var(--red);
    color: var(--white);
    border: none;
    padding: 18px 40px;
    border-radius: 12px;
    font-family: var(--roboto);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--spacing-md);
}

.submit-btn:hover {
    background: #d11920;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(237, 28, 36, 0.3);
}

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

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
}
/*Contact End*/

/*Career*/
.career-container {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 0px 0px 112px 0px;
}

.career-main-wrapper {
    display: flex;
    padding: var(--spacing-xl) var(--spacing-7xl);
    gap: var(--spacing-8xl);
    align-items: flex-start;
}

.career-main-wrapper h1{
    margin-top: 0;
}



.list-main-container{
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    background: white;
    border: 1px solid #B7B7B7
}

.list-card-container{
     border-bottom: 1px solid #B7B7B7
 }

.list-card{
    padding: 31px 22px 31px 22px;
}

.list-card:hover{
    cursor: pointer;
    background: #FFAAAA4D;
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.pagination-numbers {
    display: flex;
}

.page-number {
    display: inline-block;
    padding: 8px 12px;
    margin-right: 5px;
    /*border: 1px solid #ccc;*/
    /*border-radius: 4px;*/
    cursor: pointer;
}

.page-number.active {
    background-color: var(--red);
    color: white;
    border-color: #dc3545;
}

.pagination-buttons {
    display: flex;
    gap: 10px;
}

.prev-icon {
    transform: rotate(180deg);
}

.prev-icon,
.next-icon {
    height: 10px;
}

.pagination-prev,
.pagination-next {
    background-color: var(--red);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.pagination-prev:hover,
.pagination-next:hover {
    opacity: 0.9;
}

.pagination-prev:disabled,
.pagination-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.career-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/*Career End*/

/*Career Open*/
.career-open-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 40px 64px;
    gap: var(--gap-5xl);
    background: var(--white);
    border-radius: 0px;
}

.job-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 599px;
    flex: 1;
    min-width: 300px;
}

.job-details h1 {
    width: 100%;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    color: var(--black);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.job-details p {
    width: 100%;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--black);
    margin-bottom: 0;
}

.job-details h2 {
    width: 100%;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: var(--black);
    margin: var(--spacing-2xl) 0 0 0;
}

.job-details ul {
    padding-left: var(--spacing-xl);
    list-style-type: disc;
    margin: 0;
}

.job-details li {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--black);
}

.apply-form {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl);
    width: 633px;
    background: var(--white);
    border: var(--border-thin) #B7B7B7;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    flex: none;
}

.apply-form h2 {
    width: 100%;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 140%;
    color: var(--black);
    margin-top: 0;
    margin-bottom: var(--spacing-2xl);
}

.apply-form form{
    width: 100%;
    padding: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--spacing-md);
    width: 100%;
    margin-bottom: var(--spacing-2xl);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 25px;
    gap: var(--gap-md);
    width: 100%;
    height: 57px;
    background: var(--white);
    border: 0.5px solid var(--black);
    border-radius: 10px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    color: var(--black);
}

.form-group textarea {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--spacing-xl) 25px 0px;
    gap: var(--gap-md);
    width: 100%;
    height: 150px;
    background: var(--white);
    border: 0.5px solid var(--black);
    border-radius: 10px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    color: var(--black);
    resize: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--black);
}

.upload-field {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px 25px;
    background: var(--white);
    border: 0.5px solid var(--black);
    border-radius: 10px;
}

.upload-field-label {
    font-family: var(--roboto);
    font-size: 19px;
    color: var(--black);
    font-weight: 400;
}

.upload-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.upload-field .file-name {
    width: auto;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--black);
}

input[type="file"] {
    display: none;
}

.upload-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: var(--gap-sm);
    background: var(--grey);
    border: none;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--white);
    cursor: pointer;
}

.submit-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-xl);
    gap: var(--gap-sm);
    width: 100%;
    height: 63px;
    background: var(--red);
    border: var(--border-thin) var(--white);
    border-radius: 10px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    color: var(--white);
    cursor: pointer;
}

.submit-button:hover {
    background-color: #D41820;
}

.no-job-opening {
    text-align: center;
    padding: var(--spacing-9xl) var(--spacing-4xl);
    font-family: var(--roboto);
}

.no-job-opening h1 {
    font-size: 32px;
    color: var(--grey);
    font-weight: 500;
}

.career-open-wrapper {
    width: 100%;
    max-width: var(--width-container);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
/*Career Open End*/

/*About Us*/
.about-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: var(--roboto);
    background: var(--white);
}

.about-top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-top-image {
    width: 100%;
    height: 628px;
    object-fit: cover;
    border-radius: 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
}

.about-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    padding: var(--spacing-5xl) var(--spacing-8xl);
    gap: var(--gap-6xl);
    height: 570px;
    background: var(--gradient);
    border-radius: 0px;
    flex: none;
    flex-grow: 0;
}

.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--gap-6xl);
    width: 616px;
    height: 433px;
    border-radius: 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: var(--gap-md);
    width: 616px;
    border-radius: 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.section-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: var(--spacing-2xl);
    width: 616px;
    height: 351px;
    border-radius: 0px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.section-title h2 {
    width: 616px;
    height: 58px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    color: var(--white);
    margin: 0;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.section-text p {
    width: 616px;
    height: auto;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--white);
    margin: 0;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.about-image {
    max-width: 616px;
    height: 433px;
    background: url('../assets/images/pic-about-building.jpg') no-repeat center center;
    background-size: cover;
    flex: none;
    order: 1;
    flex-grow: 1;
}

.vision-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-5xl) var(--spacing-8xl);
    gap: 124px;
    background: var(--dark-white);
    border-radius: 0px;
    flex: none;
    flex-grow: 0;
}

.vision-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 124px;
    width: 100%;
    height: 240px;
    border-radius: 20px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.vision-image {
    max-width: 540px;
    height: 360px;
    background: url('../assets/images/pic-about-team.jpg') no-repeat center center;
    background-size: cover;
    flex: none;
    order: 0;
    flex-grow: 1;
}

.vision-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--spacing-2xl);
    width: 500px;
    border-radius: 0px;
    order: 1;
    flex-grow: 0;
}

.vision-icon {
    width: 100px;
    height: 100px;
    background: url('../assets/images/icon-eagle.png') no-repeat center center;
    background-size: contain;
    flex: none;
    order: 1;
    align-self: center;
}

.vision-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: var(--spacing-2xl);
    width: auto;
    border-radius: 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.vision-text h2 {
    height: 58px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    text-align: center;
    color: var(--black);
    margin: 0;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.vision-text p {
    max-width: 435px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    color: var(--black);
    margin: 0;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.article-text .highlight,
.category-list .highlight,
.vision-text .highlight,
.our-values-description .highlight{
    font-weight: 700;
}

.history-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px var(--spacing-8xl) 112px;
    gap: 80px;
    background-color: var(--white);
    border-radius: 0px;
    flex: none;
    flex-grow: 0;
}

.history-section h2 {
    width: 768px;
    height: 58px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    text-align: center;
    color: var(--black);
    flex: none;
    order: 0;
    flex-grow: 0;
}

.history-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 80px;
    width: 1019px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.history-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 969px;
    min-height: 200px;
    flex: none;
    flex-grow: 0;
}

.history-year {
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 56px;
    line-height: 120%;
    color: var(--black);
    margin-left: 46px;
    flex: none;
    order: 0;
    flex-grow: 0;
    position: relative;
    left: 180px;
}

.history-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.history-image img{
    width: 245px;
    height: 115px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.history-timeline {
    position: relative;
    width: 14px;
    height: 100%;
    margin: 0 32px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.history-timeline .line {
    position: absolute;
    width: 2px;
    height: 145px;
    left: 6px;
    top: 0;
    background: #A0A0A0;
}

.history-frame:nth-child(1) .history-timeline .line,
.history-frame:nth-child(6) .history-timeline .line,
.history-frame:nth-child(7) .history-timeline .line{
    height: 180px
}

.history-frame:nth-child(2) .history-timeline .line,
.history-frame:nth-child(8) .history-timeline .line{
    height: 235px;
}
.history-frame:last-child .history-timeline .line {
    height: 260px
}

.history-timeline .dot {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 0;
    top: 0;
    background: var(--red);
    border-radius: 50%;
}

.history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 16px;
    width: 592px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.history-item h3 {
    width: 592px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    color: var(--black);
    text-transform: uppercase;
    margin: 0;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.history-item p {
    width: 592px;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--black);
    margin: 0;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.history-item .category-list {
    width: 592px;
    padding-left: 20px;
    margin: 0;
    list-style-type: disc;
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--black);
    order: 2;
}

.history-item .category-list li {
    margin-bottom: 8px;
}

.history-item .category-list li:last-child {
    margin-bottom: 0;
}

.history-content .history-frame:nth-child(3) .history-year,
.history-content .history-frame:last-child .history-year
 {
    left: 90px
}

.testimonial-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-5xl) var(--spacing-8xl);
    background: var(--light-blue);
    order: 5;
}

.testimonial-header {
    margin-bottom: var(--spacing-5xl);
    text-align: left;
    width: 100%;
    max-width: 1200px;
}

.testimonial-header h2 {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    color: var(--black);
    margin-bottom: 16px;
}

.testimonial-header p {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--black);
}

.testimonial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.testimonial-carousel {
    width: 100%
}

.testimonial-page {
    display: none;
    width: 100%
}
.testimonial-page.active {
    display: block;
}

.testimonial-container {
    display: flex;
    flex-direction: row;
    gap: 180px;
    margin-bottom: 60px;
    width: 100%;
}

.testimonial-column {
    flex: 1;
    max-width: 500px;
}

.testimonial-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
}

.stars {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.star {
    width: 20px;
    height: 20px;
    background: var(--yellow);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.quote {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    color: var(--black);
    margin-bottom: 24px;
}

.avatar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ccc;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.avatar-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.avatar-name {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    color: var(--black);
    margin: 0;
}

.avatar-title {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    color: var(--blue);
    margin: 0;
}

.divider {
    width: 1px;
    height: 61px;
    background: var(--black);
    margin: 0 8px;
}

.testimonial-company-logo {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.testimonial-company-logo img {
    max-width: 100%;
    object-fit: contain;
}

.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.slider-dots {
    display: flex;
    gap: 12px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slider-dot.active {
    background: var(--black);
}

.slider-buttons {
    display: flex;
    gap: 16px;
}

.slider-button {
    width: 48px;
    height: 48px;
    border: 2px solid var(--black);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slider-button:hover {
    background: var(--black);
}

.slider-button .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-button .icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.slider-button:hover .icon img {
    filter: brightness(0) invert(1);
}
/*About Us End*/

/*Our Services*/

.services-container {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 0px 0px 112px 0px;
}

.services-main-wrapper {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-7xl) var(--spacing-7xl);
    gap: var(--spacing-8xl);
    align-items: flex-start;
}

.services-top{
    text-align: center;
    align-self: center;
}

.services-image-top{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.services-bottom-container{
    display: flex;
    flex-direction: row;
    gap: 80px;
}

.services-image-bottom{
    width: 632px;
    height: 403px;
    object-fit: cover;
    object-position: center;
}

.image-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.services-bottom-left{
    align-self: center;
}

.allSolutions-container {
    width: 100%;
    min-height: 100vh;
}

.allSolutions-hero-container {
    background: linear-gradient(to right, rgba(69, 39, 160, 0.4), rgba(103, 58, 183, 0.2)), url('../assets/images/pic-allSolutions.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 729px;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}

.allSolutions-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--white);
    gap: var(--spacing-2xl);
    padding: 0 var(--spacing-xl);
}

.allSolutions-hero-title {
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 700;
    font-size: var(--spacing-6xl);
    line-height: 1.2;
    margin: 0;
    max-width: 701px;
}

.allSolutions-hero-subtitle {
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: var(--spacing-2xl);
    line-height: 1.5;
    margin: 0;
    max-width: 1007px;
}

.solutions-section-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: var(--spacing-4xl);
    line-height: 120%;
    color: var(--black);
    margin: 0;
}

.solutions-intro-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 68px var(--spacing-7xl) var(--spacing-8xl);
    gap: var(--spacing-4xl);
    background: var(--white);
    width: 100%;
    box-sizing: border-box;
}

.solutions-intro-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-4xl);
    width: var(--width-content);
    max-width: 100%;
}


.solutions-intro-description {
    font-family: var(--roboto);
    font-style: normal;
    font-weight: 400;
    font-size: var(--spacing-2xl);
    line-height: 150%;
    color: var(--black);
    margin: 0;
    align-self: stretch;
}

.services-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-7xl) var(--spacing-6xl);
    gap: var(--spacing-3xl);
    background-color: var(--white);
    width: 100%;
    box-sizing: border-box;
}

.services-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xl);
    width: var(--width-content);
    max-width: 100%;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-lg);
    width: 100%;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--gap-2xl);
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.1);
    border: var(--border-thick) solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 8px 3px rgba(0, 0, 0, 0.15);
    background: var(--lavender);
    cursor: pointer;
}

.service-card--highlighted {
    border: var(--border-thick) var(--blue);
}

.service-card-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 0;
}

.service-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.service-card-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: var(--spacing-2xl);
    line-height: 140%;
    color: var(--black);
    margin: 0;
}

.service-card-description {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: var(--black);
    margin: 0;
}
.product-section {
    display: flex;
    justify-content: center;
    padding: 68px var(--spacing-7xl) 112px;
    background-color: #F4F4F4;
    width: 100%;
    box-sizing: border-box;
}

.product-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
    width: var(--width-content);
    max-width: 100%;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4xl) var(--spacing-xl);
}

.product-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 285px;
    padding: var(--spacing-3xl);
    background: var(--white);
    background-size: cover;
    background-position: center;
    border: var(--border-thin) var(--light-grey);
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card--erp{
    background-image:
            linear-gradient(90deg, rgba(0, 4, 126, 0.9) 0%, rgba(0, 4, 126, 0.8) 100%),
            url('../assets/images/services-erpsolution.png');
}
.product-card--scm{
    background-image:
            linear-gradient(90deg, rgba(0, 4, 126, 0.9) 0%, rgba(0, 4, 126, 0.8) 100%),
            url('../assets/images/services-kinaxis.png');
}
.product-card--ies{
    background-image:
            linear-gradient(90deg, rgba(0, 4, 126, 0.9) 0%, rgba(0, 4, 126, 0.8) 100%),
            url('../assets/images/services-intelligent.png');
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.product-card:hover::before {
    opacity: 1;
}

.product-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    position: relative;
    z-index: 2;
    transition: color 0.4s ease-in-out;
}

.product-card-title {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: var(--spacing-2xl);
    line-height: 140%;
    color: var(--white);
    margin: 0;
}

.product-card-description {
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    color: var(--white);
    margin: 0;
    max-width: 420px;
}

.other-solutions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-7xl) var(--spacing-6xl);
    gap: var(--spacing-3xl);
    width: 100%;
    height: auto;
    background-color: #E9E9E9;
    border-radius: 0px;
    box-sizing: border-box;
}

.other-solutions-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: var(--spacing-lg);
    width: 100%;
    height: auto;
    font-family: var(--roboto);
    font-weight: 500;
    font-size: 36px;
    line-height: 140%;
    color: var(--black);
    margin: 0;
}

.other-solutions-title::after {
    content: '';
    width: 100%;
    height: 1px;
    border: 2px solid var(--black);
    background-color: var(--black);
    transform: rotate(0.02deg);
    margin-top: var(--spacing-sm);
}

.solutions-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 150px;
    width: 100%;
    height: auto;
}

.solutions-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-sm);
    width: 384px;
    height: auto;
    min-height: 400px;
    background-color: var(--white);
    box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solutions-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 8px 3px rgba(0, 0, 0, 0.15);
    background: var(--lavender);
    cursor: pointer;
}

.solutions-image {
    width: 100%;
    height: 226px;
    object-fit: cover;
    display: block;
}

.solutions-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
}

.solutions-category-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px var(--spacing-md);
    gap: var(--gap-sm);
    width: 84px;
    height: 29px;
    background-color: var(--red);
}

.solutions-category {
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    text-align: center;
    color: var(--white);
}

.solutions-title {
    width: 100%;
    max-width: 344px;
    height: auto;
    font-family: var(--roboto);
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    color: var(--black);
    margin: 10px 0;
}

.solutions-description {
    width: 100%;
    max-width: 344px;
    height: auto;
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    text-align: justify;
    color: var(--black);
    margin: 10px 0;

}

.solutions-date {
    width: 100%;
    max-width: 141px;
    height: 20px;
    font-family: var(--roboto);
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    text-align: left;
    color: #9E9E9E;
    align-self: flex-start;
}

.servicesDetail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: var(--white);
    padding: 0 var(--spacing-7xl);
}

.service-detail-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 60px 64px;
    gap: 80px;
    width: 100%;
    background: linear-gradient(110deg,
    var(--blue) 0%,
    var(--blue) 77.5%,
    var(--red) 77.5%,
    var(--red) 78.5%,
    var(--dark-white) 78.5%,
    var(--dark-white) 100%);
}

@media (max-width: 1578px) {
    .service-detail-section {
        background: linear-gradient(110deg,
        var(--blue) 0%,
        var(--blue) 73.5%,
        var(--red) 73.5%,
        var(--red) 74.5%,
        var(--dark-white) 74.5%,
        var(--dark-white) 100%);
    }
}

@media (max-width: 1323px) {
    .service-detail-section {
        background: linear-gradient(110deg,
        var(--blue) 0%,
        var(--blue) 69.5%,
        var(--red) 69.5%,
        var(--red) 70.5%,
        var(--dark-white) 70.5%,
        var(--dark-white) 100%)
    }
}

.service-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xl);
    flex: 3;
}

.service-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xl);
    width: 100%;
}

.service-content h1 {
    font-weight: 700;
    font-size: 48px;
    line-height: 120%;
    color: var(--white);
    margin: 0;
}

.service-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--white);
    margin: 0;
    max-width: 1619px;
}

.service-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 277px;
}

.service-image img {
    width: 100%;
    object-fit: contain;
}

.service-content .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-button);
    gap: var(--gap-sm);
    font-family: var(--roboto);
    cursor: pointer;
}

.service-content .btn-primary {
    background: var(--red);
    color: var(--white);
    border: 1px solid var(--white);
    font-size: 20px;
    line-height: 150%;
}

.other-explanation-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-4xl) var(--spacing-7xl) var(--spacing-7xl) var(--spacing-7xl);
    gap: var(--gap-3xl);
    width: 100%;
    background: #F0F0F0;
}

.other-explanation-section-white {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-4xl) var(--spacing-7xl) var(--spacing-7xl) var(--spacing-7xl);
    gap: var(--gap-3xl);
    width: 100%;
    background: var(--white);
}

.other-explanation-section-white h2,
.other-explanation-section h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 150%;
    color: var(--black);
    align-self: stretch;
    margin: 0;
}

.explanation-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xl);
}

.explanation-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--black);
    align-self: stretch;
    margin: 0;
}

.feature-list {
    list-style: none;
    padding-left: 0;
    width: 100%;
}

.feature-list li {
    background: var(--grey-blue);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    border-left: 4px solid var(--red);
    border-radius: 4px;
    font-size: 16px;
}

.feature-list-title {
    font-weight: 500;
    font-size: 22px;
    color: var(--blue);
    width: 100%;
    margin-top: var(--spacing-3xl);
    margin-bottom: 0;
}

.business-list {
    list-style: none;
    padding-left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.business-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    font-size: 16px;
    line-height: 150%;
    color: var(--black);
}

.business-list li img {
    flex-shrink: 0;
    width: 24px;
    height: auto;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--gap-2xl);
    width: 100%;
}

.content-card {
    background: var(--white);
    border: var(--border-thin) solid var(--light-grey);
    border-radius: var(--spacing-sm);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-card h4 {
    font-weight: 700;
    font-size: 20px;
    color: var(--blue);
    margin: 0;
}

.content-card p {
    font-size: 16px;
    line-height: 150%;
    color: var(--black);
    margin: 0;
}

.content-image {
    width: 100%;
    margin-top: var(--spacing-4xl);
    border-radius: var(--spacing-sm);
    overflow: hidden;
    line-height: 0;
}

.content-image img {
    width: 100%;
    height: auto;
    display: block;
}

.side-by-side-container {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-5xl);
    width: 100%;
    margin-top: var(--spacing-2xl);
}

.text-column {
    flex: 1.2;
}

.text-column p {
    font-size: 18px;
    line-height: 160%;
    margin: 0;
}

.image-column {
    flex: 1;
    min-width: 300px;
}

.image-column img {
    width: 100%;
    height: auto;
    border-radius: var(--spacing-sm);
    display: block;
}

.sequential-flow-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
}

.flow-step {
    background: var(--white);
    border: 2px solid var(--blue);
    color: var(--blue);
    padding: var(--spacing-md) var(--spacing-2xl);
    border-radius: var(--radius-full);
    text-align: center;
    font-weight: 500;
    flex-shrink: 0;
}

.flow-connector {
    width: 32px;
    height: 32px;
    background-image: url("../assets/images/chevron-right.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.flow-step:last-of-type + .flow-connector {
    display: none;
}

.functionalities-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-4xl) var(--gap-2xl);
}

.functionality-item h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    color: var(--blue);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}

.functionality-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}
.suite-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    padding: var(--spacing-3xl);
    color: var(--white);
    align-self: stretch;
}

.suite-section h3 {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    margin: 0;
}

.core-functionality {
    background-color: #19008B;
}

.strategic-solutions {
    background-color: #2D1272;
}

.operating-services {
    background-color: #721214;
}

.suite-grid {
    display: grid;
    gap: var(--spacing-md);
}

.core-grid {
    grid-template-columns: repeat(5, 1fr);
}
.strategic-grid,
.os-grid {
    grid-template-columns: repeat(4, 1fr);
}

.suite-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: var(--spacing-sm);
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}

.core-functionality .suite-item{
    background-color: #0309BF;
}

.strategic-solutions .suite-item{
    background-color: #4A367D;
}

.operating-services .suite-item{
    background-color: #530304;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-4xl) var(--gap-2xl);
    width: 100%;
}

.benefit-item {
    display: flex;
    flex-direction: column;
}

.benefit-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.checkmark-icon {
    width: 28px;
    height: 28px;
    fill: var(--blue);
    flex-shrink: 0;
}

.benefit-item h4 {
    font-weight: 700;
    font-size: 20px;
    color: var(--blue);
    margin: 0;
    line-height: 1.4;
}

.benefit-item p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--black);
    margin: 0;
}

.business-areas-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    width: 100%;
}

.business-area-item {
    background-color: #19008B;
    color: var(--white);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 200px;
    min-height: 50px;
}

.partner-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    width: 100%;
}

.partner-card {
    background-color: var(--white);
    border: 1px solid #A5A5A5;
    border-radius: 5px;
    padding: var(--spacing-4xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-3xl);
}

.partner-card-icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.partner-icon {
    width: 84px;
    height: 84px;
}

.partner-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #0309BF;
    text-align: center;
    line-height: 1.4;
    min-width: 200px;
    margin: 0;
}

.partner-card-description {
    font-size: 18px;
    line-height: 1.5;
    color: var(--black);
    margin: 0;
}
/*Our Services End*/

/*News Page*/
/* News Container Styles */
.news-container {
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-7xl);
    font-family: var(--roboto);
    background: var(--white);
}


/* News Header */
.news-page-header {
    text-align: left;
    margin-bottom: var(--spacing-3xl);
}

.news-page-title {
    display: flex;
    flex-direction: column;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
}

.news-page-subtitle {
    font-size: 1.1rem;
    color: var(--black);
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.news-page-hero {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.news-image-hero {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.news-image-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*News End*/

/*Article Pages*/
.article-container {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--spacing-4xl) var(--spacing-xl);
    background: var(--white);
}

.article-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--black);
    text-align: center;
    line-height: 1.2;
    max-width: 700px;
    margin: 0 auto var(--spacing-4xl) auto;
}

.article-logo,
.article-image {
    width: 100%;
    margin-bottom: var(--spacing-3xl);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.article-image img {
    width: 100%;
    height: 440px;
    display: block;
}

.article-logo img {
    width: 60%;
    height: auto;
    display: block;
}

.article-subtitle {
    font-size: 24px;
    font-weight: 500;
    color: var(--black);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.4;
}

.article-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--black);
    margin-bottom: var(--spacing-2xl);
    text-align: justify;
}

.article-text p {
    margin-bottom: var(--spacing-lg);
}

.article-text p:last-child {
    margin-bottom: 0;
}

.content-section {
    margin-bottom: var(--spacing-2xl);
}

.back-button {
    display: inline-block;
    margin: var(--spacing-xl);
    font-size: 1rem;
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
}

.back-button:hover {
    text-decoration: underline;
}
/*Article End*/

/*Media Query*/
@media (max-width: 1485px){
    /*Home Page*/
    .our-values-grid > .row{
        gap: var(--gap-4xl);
    }
}

@media (max-width: 1428px) {
    /*Contact Us Page*/
    .contact-form-container {
        width: auto;
    }
}

@media (max-width: 1408px) {
    /*Home Page*/
    .latest-news-container, .other-solutions-container{
        padding: var(--spacing-lg) var(--spacing-4xl) var(--spacing-5xl);
        max-width: 100%;
    }

    .latest-news-title, .other-solutions-title {
        font-size: 30px;
    }

    .news-grid, .solutions-grid {
        gap: var(--gap-4xl);
        max-width: 100%;
    }

    .news-card, .solutions-card {
        width: 100%;
        max-width: 384px;
    }
}

@media (max-width: 1303px) {
    /*Home Page*/
    .our-values-container {
        padding: var(--spacing-6xl) var(--spacing-4xl);
        width: 100%;
        height: auto;
    }

    .our-values-grid {
        width: 100%;
        gap: var(--gap-3xl);
    }

    .our-values-grid > .row {
        flex-wrap: wrap;
        gap: var(--gap-xl);
        width: 100%;
    }

    .value-card {
        width: calc(50% - 20px);
    }

    .our-values-title {
        font-size: 32px;
        width: 100%;
        max-width: 600px;
    }
}

@media (max-width: 1200px) {
    .solution-card-header h3 {
        font-size: 18px;
    }

    .solution-card-body {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--spacing-xs);
    }
    .solution-item {
        font-size: 10px;
        min-height: 45px;
        padding: 4px;
        line-height: 1.2;
    }
}

@media (max-width: 1024px) {
    /*Home Page*/
    .solution-guidance-container {
        padding: var(--spacing-4xl) var(--spacing-2xl);
    }
    .solution-guidance-content {
        gap: var(--gap-md);
    }
    .solutions-main-title {
        font-size: 32px;
    }

    .human-body-section {
        flex: 0 0 207px;
        width: 207px;
        height: 500px;
    }
    .human-body-image {
        width: 373px;
        height: 540px;
        left: -96px;
        top: -21px;
    }
    .solution-label {
        font-size: 14px;
        height: 32px;
        padding: 6px 10px;
    }
    .label-think-tank { top: 30px; left: 39px; width: 116px; }
    .label-erp { top: 121px; left: 41px; width: 116px; }
    .label-front-end { top: 241px; left: 79px; width: 116px; }
    .label-specific { top: 401px; left: 25px; width: 170px; }


   .hero-content {
       grid-template-columns: 1fr;
       gap: var(--spacing-6xl);
       text-align: center;
   }

   .hero-title {
       font-size: 3rem;
   }

   .team-image-placeholder {
       width: 400px;
       height: 400px;
   }

   .image-section {
      display: flex;
      justify-content: center;
      align-items: center;
      order: -1;
   }

   .button-group {
       justify-content: center;
   }

    .trusted-by-container {
        padding: 80px 40px;
        gap: 60px;
    }
    .trusted-by-title {
        font-size: 32px;
    }

    .trusted-by-logos {
        mask-image: none;
    }

    .company-logo {
        flex-grow: 1;
        max-width: 120px;
    }

    .achievements-container {
        padding: var(--spacing-6xl) var(--spacing-3xl);
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2xl);
    }

    .achievements-title {
        font-size: 36px;
    }

    .achievements-subtitle {
        font-size: 20px;
    }

    .achievement-number {
        font-size: 64px;
    }

    .achievement-label {
        font-size: 24px;
    }

    /*Contact Us Page*/
    .contact-container{
        padding: 32px 20px 64px 20px;
    }

    .contact-main-wrapper {
        flex-direction: column;
        gap: var(--spacing-4xl);
        padding: var(--spacing-4xl) var(--spacing-xl);
    }

    .contact-right {
        flex: none;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .contact-left-content {
        padding-right: 0;
    }

    .office-title {
        font-size: 2rem;
    }

    /*Career Page*/
    .career-container {
        padding: 0px 0px 64px 0px;
    }

    .services-container {
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        padding: 0px 0px 112px 0px;
    }

    .career-main-wrapper {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    .services-bottom-container{
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

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

    .contact-right {
        flex: none;
        max-width: 600px;
        margin: 0 auto;
    }


    .office-title {
        font-size: 2rem;
    }

    .career-list-container {
        padding: 20px;
    }

    .form-title {
        font-size: 1.6rem;
    }

    .list-card h3 {
        font-size: 1.2rem;
    }

    .list-card p {
        font-size: 0.9rem;
    }

    .pagination-container {
        padding-top: 20px;
        margin-top: 10px;
    }

    .career-image{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /*About Us Page*/
    .about-top-image {
        height: 500px;
    }

    .about-section {
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
        padding: var(--spacing-5xl) var(--spacing-4xl);
        gap: var(--gap-2xl);
    }

    .about-content,
    .about-image,
    .section-title,
    .section-text {
        width: 100%;
        max-width: 100%;
        gap: var(--gap-2xl);
        height: auto;
    }

    .about-image {
        height: 400px;
    }

    .section-title h2 {
        font-size: 40px;
        height: auto;
    }

    .section-text p {
        font-size: 16px;
        width: auto;
    }

    .vision-section {
        padding: var(--spacing-5xl) var(--spacing-4xl);
        order: 5;
    }

    .vision-container {
        flex-direction: column;
        height: auto;
        gap: 64px;
        padding: 0;
    }

    .vision-image {
        width: 100%;
        height: 300px;
        max-width: 100%;
    }

    .vision-content {
        width: 100%;
        max-width: 500px;
        height: auto;
    }

    .vision-text {
        width: auto;
        justify-content: center;
        align-items: center;
    }

    .vision-text h2 {
        font-size: 40px;
        max-width: 100%;
    }

    .vision-text p {
        font-size: 18px;
    }

    .history-section {
        padding: 50px var(--spacing-4xl) 96px;
        gap: 64px;
    }

    .history-section h2 {
        width: 100%;
        font-size: 40px;
    }

    .history-content {
        width: 100%;
        gap: 64px;
    }

    .history-frame {
        width: 100%;
    }

    .history-year {
        font-size: 48px;
        left: 200px;
    }

    .history-content .history-frame:nth-child(3) .history-year,
    .history-content .history-frame:last-child .history-year {
        left: 140px;
    }

    .history-row {
        flex-direction: row;
        gap: 24px;
    }

    .history-item {
        width: 50%;
    }

    .history-item h3,
    .history-item p,
    .history-item .category-list {
        width: 100%;
    }

    .testimonial-section {
        padding: 60px 40px;
    }

    .testimonial-header h2 {
        font-size: 42px;
    }

    .testimonial-container {
        gap: 100px;
    }

    .testimonial-column {
        max-width: 450px;
    }

    .quote {
        font-size: 16px;
    }

    /*Career Open*/
    .career-open-container {
        padding: 40px 32px;
        gap: 50px;
    }

    .apply-form {
        width: 45%;
        min-width: 380px;
    }

    /* All Solutions Page */
    .allSolutions-hero-container {
        height: 600px;
    }

    .allSolutions-hero-title {
        font-size: 42px;
    }

    .allSolutions-hero-subtitle {
        font-size: 18px;
        max-width: 800px;
    }

    .solutions-intro-content {
        width: 100%;
    }

    .solutions-intro-description {
        font-size: 18px;
    }

    .project-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4xl);
    }

    .product-card {
        max-width: 650px;
        margin: 0 auto;
        width: 100%;
    }

    /*Services Detail Page*/
    .servicesDetail-container {
        padding: 0 var(--spacing-4xl);
    }

    .service-detail-section {
        flex-direction: column;
        gap: var(--spacing-4xl);
        background: linear-gradient(208.42deg, rgba(237, 28, 36, 0) 33.41%, rgba(237, 28, 36, 0.2) 76.75%), var(--blue);
    }

    .service-image {
        background: linear-gradient(360deg, #FFFFFF -7.68%, #999999 274.39%);
        width: 100%;
        max-width: 250px;
    }

    .service-content h1 {
        font-size: 36px;
    }

    .service-content p {
        font-size: 16px;
    }

    .sequential-flow-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .flow-connector {
        transform: rotate(90deg);
        margin: var(--spacing-xs) 0;
    }

    .core-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .strategic-grid,
    .os-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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


    .news-grid, .solutions-grid {
        flex-wrap: wrap;
    }

    .business-areas-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .partner-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 889px) {
    /*HEADER*/
    .header-nav {
        padding: 0 20px;
        height: 64px;
        position: relative;
    }

    .header-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        width: 80%;
        margin: unset;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
        height: auto;
        padding: 10px 0;
    }

    .header-menu.show {
        display: flex;
    }

    .header-menu li {
        margin: 10px 0;
    }

    .header-submenu {
        position: static;
        display: none;
        width: 100%;
        left: auto;
        top: auto;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 5px 0 5px 15px;
        background-color: transparent;
        min-width: 200px;
    }

    .header-dropdown li.has-submenu.open > .header-submenu {
        display: block;
    }

    .header-dropdown li.has-submenu > a .fa-caret-right {
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    .header-dropdown li.has-submenu.open > a .fa-caret-right {
        transform: rotate(-90deg);
    }

    .header-right {
        display: none;
    }

    .menu-icon {
        display: flex;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .header-dropdown li {
        height: auto;
        margin: 0 !important;
    }

    .header-dropdown{
        left: -80px;
        width: 100px;
    }

     .header-dropdown::after{
        left: 50%;
     }

     .header-dropdown::before{
        left: 50%;
     }

    .dropdown-grid{
        flex-direction: column;
        gap: 0;
    }

    .dropdown-column {
        width: 100%;
    }


}

@media (max-width: 768px) {
    .mobile-contact {
        display: block;
    }
    .header-right {
        display: none;
    }
    /*Home Page*/
    .solution-guidance-container {
        padding: var(--spacing-3xl) var(--spacing-md);
    }
    .solution-guidance-content {
        gap: var(--spacing-sm);
    }
    .solutions-main-title {
        font-size: 22px;
        margin-bottom: var(--spacing-md);
    }
    .human-body-section {
        flex: 0 0 138px;
        width: 138px;
        height: 332px;
    }
    .human-body-image {
        width: 249px;
        height: 360px;
        left: -64px;
        top: -14px;
    }
    .solution-label {
        font-size: 10px;
        height: 22px;
        padding: 4px 6px;
        font-weight: 400;
    }
    .label-think-tank { top: 20px; left: 26px; width: 77px; }
    .label-erp { top: 81px; left: 27px; width: 77px; }
    .label-front-end { top: 161px; left: 53px; width: 77px; }
    .label-specific { top: 267px; left: 16px; width: 114px; }

    .solution-card {
        padding: var(--spacing-sm);
    }
    .solution-card-header {
        margin-bottom: var(--spacing-sm);
    }
    .solution-card-header h3 {
        font-size: 14px;
    }
    .card-logos img{
        height: 10px;
        width: auto;
    }

    .card-logos .kinaxis{
        width: 40px !important;
    }

    .card-logos .blueYonder{
        width: 50px !important;
    }
    .solution-card-body {
        grid-template-columns: repeat(6, 1fr);
        gap: 2px;
    }
    .solution-item {
        font-size: 8px;
        min-height: 35px;
        padding: 2px;
    }

   .hero-container {
       padding: var(--spacing-4xl) var(--spacing-xl);
   }

   .hero-title {
       font-size: 2.5rem;
   }

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

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

   .button-group {
       flex-direction: column;
       gap: var(--spacing-lg);
   }

   .btn {
       width: 100%;
       max-width: 280px;
   }

   .team-image-placeholder {
       width: 320px;
       height: 320px;
   }

    .trusted-by-container {
        padding: 60px 20px;
        gap: 40px;
    }
    .trusted-by-title {
        font-size: 28px;
    }
    .company-logo {
        height: 45px;
        flex: 0 0 calc(33.333% - 40px);
    }

    .our-values-container {
        padding: var(--spacing-4xl) var(--spacing-xl);
    }

    .our-values-grid {
        gap: var(--gap-lg);
    }

    .our-values-grid > .row {
        flex-direction: column;
        align-items: center;
        gap: var(--gap-lg);
    }

    .value-card {
        width: 100%;
        max-width: 400px;
    }

    .our-values-title {
        font-size: 28px;
    }
    .latest-news-container, .other-solutions-container {
        padding: var(--spacing-md) var(--spacing-xl) var(--spacing-4xl);
    }

    .latest-news-title, .other-solutions-title {
        font-size: 26px;
    }

    .news-grid, .solutions-grid {
        flex-direction: column;
        gap: var(--gap-2xl);
    }

    .news-card, .solutions-card {
        min-height: 400px;
    }

    .news-image, .solutions-image {
        height: 180px;
    }

    .achievements-container {
        padding: var(--spacing-5xl) var(--spacing-2xl);
    }

    .achievements-header {
        text-align: center;
    }

    .achievements-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .achievements-title {
        font-size: 32px;
    }

    .achievements-subtitle {
        font-size: 18px;
    }

    .achievement-card {
        padding: var(--spacing-3xl) var(--spacing-lg);
    }

    .achievement-number {
        font-size: var(--spacing-6xl);
    }

    .achievement-label {
        font-size: 22px;
    }

    /*News*/
    .news-container {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .news-page-title {
        font-size: 2rem;
    }

    .news-page-subtitle {
        font-size: 1rem;
    }

    .news-image-hero {
        height: 180px;
    }

    .article-container {
        padding: var(--spacing-2xl) var(--spacing-lg);
        max-width: 100%;
    }

    .article-title {
        font-size: 2rem;
        margin-bottom: var(--spacing-2xl);
    }

    .article-subtitle {
        font-size: 1.1rem;
    }

    .article-text {
        font-size: 0.95rem;
        text-align: left;
    }

    .article-logo img{
        width: 100%;
        height: auto;
    }
    .article-image img {
        height: auto;
    }

    /*Contact Us Page*/
    .contact-top {
        height: auto;
    }

    .contact-main-wrapper {
        padding: var(--spacing-3xl) var(--spacing-lg);
    }

    .contact-form-container {
        padding: var(--spacing-3xl) var(--spacing-2xl);
    }

    .office-title {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-lg);
    }

    .office-address {
        font-size: 1rem;
    }

    .form-title {
        font-size: 1.5rem;
    }

    .office-section {
        margin-bottom: var(--spacing-3xl);
    }

    /*Career Page*/
    .career-container {
        padding: 0px 0px 64px 0px;
    }

    .services-container {
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        padding: 0px 0px 112px 0px;
    }

    .career-main-wrapper {
        gap: 25px;
        padding: 30px 16px;
    }

    .services-main-wrapper{
        padding: 30px 24px;
    }

    .contact-form-container {
        padding: 30px 24px;
    }

    .career-list-container {
        padding: 15px;
    }

    .list-card h3 {
        font-size: 1.1rem;
    }

    .list-card p {
        font-size: 0.85rem;
    }

    .pagination-container {
        flex-direction: column; 
        align-items: center;
        gap: 15px;
    }

    .pagination-numbers {
        gap: 6px;
    }

    .page-number {
        font-size: 0.9rem;
    }

    .pagination-next {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .career-image{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .services-bottom{
        width: 100%;
    }

    .services-image-bottom{
        width: 100%;
        height: 100%;
    }

    .image-overlay-text {
        font-size: 28px;
    }

    /*About Us Page*/
    .about-top {
        flex-direction: column;
    }

    .about-top-image {
        height: 400px;
    }

    .about-section {
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-4xl) var(--spacing-3xl);
    }

    .about-content {
        align-items: flex-start;
        height: auto;
    }

    .about-image {
        height: 300px;
        width: 100%;
    }

    .section-title h2 {
        font-size: 32px;
    }

    .section-text p {
        font-size: 15px;
    }

    .vision-container {
        flex-direction: column;
        align-items: center;
        gap: 48px;
    }

    .vision-image {
        width: 100%;
        height: 260px;
    }

    .vision-text h2 {
        font-size: 32px;
    }

    .vision-text p {
        font-size: 16px;
    }

    .history-frame {
        gap: 10px;
    }

    .history-year {
        font-size: 36px;
        left: -40px;
        margin-left: 0;
        align-self: center;
        text-align: center;
        position: relative;
    }

    .history-content .history-frame:nth-child(3) .history-year,
    .history-content .history-frame:last-child .history-year {
        left: -40px;
    }

    .history-image img {
        width: 100%;
        height: auto;
    }

    .history-row {
        gap: 0;
    }

    .history-item {
        align-items: center;
    }

    .history-item h3,
    .history-item p,
    .history-item .category-list {
        width: 100%;
    }

    .history-item .category-list {
        padding-left: 0;
        list-style-position: inside;
    }

    .testimonial-section {
        padding: 50px 30px;
    }

    .testimonial-header {
        margin-bottom: 40px;
    }

    .testimonial-header h2 {
        font-size: 36px;
        margin-bottom: 12px;
    }

    .testimonial-header p {
        font-size: 16px;
    }

    .testimonial-container {
        flex-direction: column;
        gap: 0;
        margin-bottom: 40px;
        align-items: center;
    }

    .testimonial-column {
        max-width: 100%;
        width: 100%;
    }

    .testimonial-page {
        display: none;
    }

    .testimonial-page.active {
        display: block;
    }

    .testimonial-page .testimonial-column:nth-child(2) {
        display: none;
    }

    .testimonial-item {
        gap: 20px;
    }

    .quote {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .avatar {
        gap: 12px;
    }

    .avatar-image {
        width: 50px;
        height: 50px;
    }

    .divider {
        height: 51px;
    }

    .testimonial-company-logo {
        width: 70px;
        height: 35px;
    }

    .slider-buttons {
        gap: 12px;
    }

    .slider-button {
        width: 44px;
        height: 44px;
    }

    /*FOOTER*/
    .app-footer {
        padding: 48px 20px;
    }

    .footer-container {
        flex-direction: column;
    }

    .footer-right {
        min-width: 0;
    }

    .footer-logo-section {
        flex-direction: column;
        gap: 0;
    }

    .footer-logo {
        margin-bottom: 0.5rem;
    }

    .footer-tagline{
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid var(--white);
        max-width: 100%
    }

    .footer-email {
        padding-top: 0;
    }

    .footer-bottom{
        text-align: left;
        border: none;
    }

    /*Career Open*/
    .career-open-container {
        flex-direction: column;
        padding: 32px 24px;
        gap: 40px;
        align-items: center;
    }

    .job-details {
        width: 100%;
        max-width: 100%;
    }

    /* All Solutions Page */
    .allSolutions-hero-container {
        height: 500px;
    }

    .allSolutions-hero-title {
        font-size: 36px;
        max-width: 550px;
    }

    .allSolutions-hero-subtitle {
        font-size: 16px;
        max-width: 600px;
    }

    .solutions-section-title {
        font-size: 28px;
        text-align: center;
    }

    .project-section,
    .solutions-intro-section,
    .services-section,
    .product-section,
    .other-solutions-container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    .solutions-intro-description {
        font-size: 16px;
    }

    .project-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .project-card,
    .service-card {
        padding: var(--spacing-md);
    }

    .project-card-image,
    .service-card-image {
        height: 180px;
    }

    .project-card-title,
    .service-card-title {
        font-size: 18px;
    }

    .project-card-description,
    .service-card-description {
        font-size: 14px;
    }

    .product-card {
        height: 250px;
        padding: var(--spacing-xl);
    }

    .product-card-title {
        font-size: 22px;
    }

    .product-card-description {
        font-size: 14px;
    }

    /*Services Detail Page*/
    .servicesDetail-container {
        padding: 0 var(--spacing-3xl);
    }

    .service-detail-section {
        flex-direction: column;
        gap: var(--spacing-3xl);
    }

    .service-content h1 {
        font-size: 28px;
    }

    .service-content p {
        font-size: 14px;
    }

    .service-content .btn {
        font-size: 14px;
        align-self: center;
    }

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

    .side-by-side-container {
        flex-direction: column;
    }

    .other-explanation-section-white h2 {
        font-size: 28px;
    }

   .suite-section{
       padding: var(--spacing-xl);
   }

    .functionalities-grid {
        gap: var(--gap-2xl);
    }

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

    .business-areas-container {
        grid-template-columns: 1fr;
    }

    .partner-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-3xl);
    }

    .partner-card-title {
        font-size: 22px;
    }

    .partner-card-description {
        font-size: 16px;
    }
}

@media (min-width: 640px) {
    .button-group {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /*Home Page*/
    .solutions-main-title {
        font-size: 18px;
    }
    .human-body-section {
        flex: 0 0 100px;
        width: 100px;
        height: 240px;
    }
    .human-body-image {
        width: 180px;
        height: 260px;
        left: -46px;
        top: -10px;
    }
    .solution-label {
        font-size: 8px;
        height: 18px;
        padding: 2px 4px;
    }
    .label-think-tank { top: 15px; left: 19px; width: 55px; }
    .label-erp { top: 58px; left: 20px; width: 55px; }
    .label-front-end { top: 116px; left: 38px; width: 55px; }
    .label-specific { top: 193px; left: 12px; width: 82px; }

    .solution-card-header h3 {
        font-size: 12px;
    }

    .solution-card-body {
        grid-template-columns: repeat(3, 1fr);
    }
    .solution-item {
        font-size: 7px;
        min-height: 30px;
    }

   .hero-title {
       font-size: 2rem;
   }

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

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

    .trusted-by-container {
        padding: 40px 16px;
        gap: 32px;
    }
    .trusted-by-title {
        font-size: 24px;
    }
    .logo-track {
        gap: 30px;
    }
    .company-logo {
        height: 40px;
        flex: 0 0 calc(50% - 30px);
    }
    .our-values-title {
        font-size: 24px;
    }

    .value-title {
        font-size: 20px;
    }

    .value-description {
        font-size: 14px;
    }

    .value-icon {
        width: 100px;
        height: 104px;
    }

    .latest-news-title, .other-solutions-title {
        font-size: 22px;
    }

    .news-card, .solutions-card {
        min-height: 350px;
    }

    .news-image, .solutions.image {
        height: 150px;
    }

    .news-title, .solutions-title {
        font-size: 20px;
    }

    .news-description, .solutions-description {
        font-size: 12px;
    }

    /*About Us Page*/
    .about-top {
        flex-direction: column;
    }

    .about-top-image {
        height: 280px;
        border-radius: 0;
    }

    .about-section {
        padding: var(--spacing-3xl) var(--spacing-xl);
        gap: var(--gap-3xl);
    }

    .section-title h2 {
        font-size: 28px;
        line-height: 130%;
    }

    .section-text p {
        font-size: 14px;
        line-height: 145%;
    }

    .about-image {
        height: 240px;
    }

    .vision-section {
        padding: var(--spacing-3xl) var(--spacing-xl);
        gap: 64px;
    }

    .vision-container {
        gap: 32px;
    }

    .vision-image {
        height: 200px;
    }

    .vision-icon {
        width: 80px;
        height: 80px;
    }

    .vision-text h2 {
        font-size: 28px;
        line-height: 130%;
    }

    .vision-text p {
        font-size: 14px;
        line-height: 145%;
    }

    .history-section {
        padding: 40px var(--spacing-md) 64px;
        gap: 48px;
    }

    .history-section h2 {
        font-size: 28px;
    }

    .history-year {
        font-size: 32px;
        left: -40px;
    }

    .history-content .history-frame:nth-child(3) .history-year,
    .history-content .history-frame:last-child .history-year {
        left: -38px;
    }

    .history-item h3 {
        font-size: 20px;
    }

    .history-item p,
    .history-item .category-list {
        font-size: 14px;
    }

    .history-item .category-list li {
        margin-bottom: 6px;
    }

    .testimonial-section {
        padding: 40px 20px;
    }

    .testimonial-header h2 {
        font-size: 28px;
    }

    .testimonial-header p {
        font-size: 14px;
    }

    .testimonial-item {
        gap: 16px;
    }

    .stars {
        gap: 3px;
    }

    .star {
        width: 16px;
        height: 16px;
    }

    .quote {
        font-size: 14px;
        line-height: 140%;
    }

    .avatar {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .avatar-image {
        width: 60px;
        height: 60px;
    }

    .divider {
        display: none;
    }

    .testimonial-company-logo {
        width: 60px;
        height: 30px;
    }

    .avatar-name {
        font-size: 14px;
    }

    .avatar-title {
        font-size: 12px;
    }

    .slider-dot {
        width: 10px;
        height: 10px;
    }

    .slider-button {
        width: 40px;
        height: 40px;
    }

    .slider-button .icon {
        width: 16px;
        height: 16px;
    }

    /*Career Open*/
    .career-open-container {
        padding: 24px 16px;
        gap: 32px;
    }

    .job-details {
        gap: 20px;
    }

    .job-details h1 {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .job-details p {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .job-details h2 {
        font-size: 16px;
        margin-top: 24px;
        margin-bottom: 12px;
    }

    .job-details li {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .apply-form {
        padding: 20px 16px;
        gap: 24px;
        border-radius: 16px;
        min-width: 280px;
    }

    .apply-form h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .form-group {
        gap: 8px;
        margin-bottom: 16px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"] {
        height: 50px;
        font-size: 16px;
        padding: 0px 16px;
    }

    .form-group textarea {
        height: 120px;
        font-size: 16px;
        padding: 16px 16px 0px;
    }

    .upload-field {
        height: 110px;
        padding: 16px 16px 0px;
    }

    .upload-field .file-name {
        font-size: 16px;
    }

    .upload-button {
        font-size: 14px;
        width: 100px;
        height: 36px;
    }

    .submit-button {
        height: 55px;
        font-size: 16px;
    }

    /*News*/
    .news-image-hero {
        height: 150px;
    }

    .article-container {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .article-title {
        font-size: 1.75rem;
    }

    .article-subtitle {
        font-size: 1rem;
    }

    /* All Solutions Page */
    .allSolutions-hero-container {
        height: 400px;
    }

    .allSolutions-hero-title {
        font-size: 28px;
        max-width: 300px;
    }

    .allSolutions-hero-subtitle {
        font-size: 14px;
        max-width: 320px;
    }

    .solutions-section-title {
        font-size: 24px;
    }

    .project-section,
    .solutions-intro-section,
    .services-section,
    .product-section,
    .other-solutions-container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .solutions-intro-description {
        font-size: 14px;
    }

    .project-grid,
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .project-card-image,
    .service-card-image {
        height: 160px;
    }

    .product-card {
        height: 220px;
        padding: var(--spacing-lg);
    }

    .product-card-title {
        font-size: 15px;
    }

    .product-card-description {
        font-size: 10px;
        max-width: 280px;
    }

    .other-solutions-title {
        font-size: 24px;
    }

    .solutions-grid {
        flex-direction: column;
        gap: var(--spacing-4xl);
    }

    .solutions-card {
        width: 100%;
        max-width: 300px;
    }

    .solutions-title {
        font-size: 20px;
    }

    /*Services Detail Page*/
    .servicesDetail-container {
        padding: 0 var(--spacing-md);
    }

    .service-detail-section {
        padding: var(--spacing-4xl) var(--spacing-2xl);
    }

    .service-content h1 {
        font-size: 28px;
    }

    .service-content p {
        font-size: 12px;
    }

    .service-content .btn {
        font-size: 12px;
        padding: var(--spacing-sm);
    }

    .service-image {
        width: 100%;
        height: auto;
    }

    .suite-item {
        font-size: 12px;
        min-height: 70px;
    }

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

    .partner-icon {
        width: 64px;
        height: 64px;
    }

    .partner-card-title {
        font-size: 20px;
    }
}