.mega-toggle{
    display: none;
}

.services-section {
    padding: 5rem 0;
}

.service-card {
    min-height: 300px;   
    padding: 10px 10px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
}

.service-icon img,
.service-icon i {
    width: 70px;
    height: 70px;
    font-size: 70px;
}

.service-icon img {
    width: 70px;
    height: 70px;
    filter: brightness(0);
}


.service-icon {
    margin-bottom: 10px;
        filter: brightness(0) invert(1);
    
}

.service-card h4 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Card Colors */
.yellow-card {
    background: #f4c431;
    color: #111;
}

.yellow-card a {
    color: #111;
}

.navy-card {
    background: #5354a0;
}

.orange-card {
    background: #ff4a2f;
    
}

.blue-card {
    background: #119ddc;
}
.center-image img {
    width: 100%;
   height: 100%;
    object-fit: cover;
    display: block;
}
.center-content {
    padding: 60px 50px 68px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background-color:#f8f8f8;
}
.center-icon{
    background: #e71318;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 90px;
    height: 90px;
}
.center-icon img{
    height: 56px;
    width: 56px;
    filter: brightness(0) invert(1);
    
}
.center-content h3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 15px;
}
.center-content p {
    color: #666;
    line-height: 1.9;
    margin-bottom: 15px;
}
.center-content a {
    text-decoration: none;
    color: #111;
    font-weight: 700;
}

       /* ---------- Section spacing ---------- */
.company-intro-section,
.company-values-section,
.printing-solutions-section {
    padding: 90px 0;
}
    .company-values-section .row{
        row-gap:20px;
    }

.company-values-section,
.printing-solutions-section {
    background: #f8f8fa;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(231, 19, 24, 0.06), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(231, 19, 24, 0.05), transparent 45%);
}

.company-description-text {
    font-size: 16px;
    line-height: 1.8;
    color: #5c5c5c;
    margin-bottom: 16px;
}

/* ---------- Intro image frame ---------- */
.printing-image-frame {
    position: relative;
    padding: 30px 40px 50px 30px;
}

.printing-image-frame::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 72%;
    height: 78%;
    border-radius: 18px;
    background: linear-gradient(135deg, #e5232a, #e6007e);
}

.printing-image-frame-dots {
    position: absolute;
    top: 0;
    right: 10px;
    width: 140px;
    height: 140px;
    background-image: radial-gradient(#e5232a 2px, transparent 2.5px);
    background-size: 16px 16px;
    opacity: 0.45;
}

.printing-image-frame-photo {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 25px 50px rgba(17, 28, 46, 0.18);
    transition: transform 0.4s ease;
}
.printing-image-frame-photo img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.printing-image-frame:hover .printing-image-frame-photo {
    transform: translate(-6px, -6px);
}

/* crop marks */
.print-crop-mark {
    position: absolute;
    width: 26px;
    height: 26px;
    border-color: #111c2e;
    border-style: solid;
    border-width: 0;
}
.print-crop-mark-tl { top: -14px;    left: -14px;  border-top-width: 2px;    border-left-width: 2px; }
.print-crop-mark-tr { top: -14px;    right: -14px; border-top-width: 2px;    border-right-width: 2px; }
.print-crop-mark-bl { bottom: -14px; left: -14px;  border-bottom-width: 2px; border-left-width: 2px; }
.print-crop-mark-br { bottom: -14px; right: -14px; border-bottom-width: 2px; border-right-width: 2px; }

/* registration mark */
.printing-registration-mark {
    position: absolute;
    z-index: 2;
    top: 30px;
    left: 30px;
    width: 44px;
    height: 44px;
    color: #e6007e;
    animation: printingMarkSpin 14s linear infinite;
}
.printing-registration-mark svg {
    width: 100%;
    height: 100%;
}

/* floating badge */
.printing-image-badge {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 10px;
    gap: 14px;
    padding: 16px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(17, 28, 46, 0.15);
    animation: printingBadgeFloat 4s ease-in-out infinite;
}
.printing-image-badge strong {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    color: #111c2e;
}
.printing-image-badge small {
    font-size: 13px;
    color: #5c5c5c;
}

.printing-cmyk-bars {
    gap: 4px;
}
.printing-cmyk-bars i {
    width: 10px;
    height: 30px;
    border-radius: 5px;
}
.cmyk-cyan    { background: #00aeef; }
.cmyk-magenta { background: #e6007e; }
.cmyk-yellow  { background: #ffd200; }
.cmyk-black   { background: #1a1a1a; }

@keyframes printingBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes printingMarkSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .printing-registration-mark,
    .printing-image-badge {
        animation: none;
    }
}

/* ---------- Company values ---------- */

.company-value-card {
    height: 100%;
    padding: 34px 28px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #ccc;
    /*border-bottom: 3px solid transparent;*/
    transition: all 0.3s ease;
}
.company-value-card:hover {
    border-bottom-color: #e71318;
    box-shadow: 0 10px 30px rgba(17, 28, 46, 0.08);
    transform: translateY(-6px);
}
.company-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #f5f7fa;
}
.company-value-icon img{
        filter: invert(20%) sepia(28%) saturate(543%) hue-rotate(311deg) brightness(207%) contrast(300%);
}
.company-value-title {
    font-size: 20px;
    font-weight: 700;
    color: #111c2e;
    margin-bottom: 10px;
}
.company-value-text {
    font-size: 15px;
    line-height: 1.7;
    color: #5c5c5c;
    margin-bottom: 0;
}

/* ---------- Vision & mission ---------- */
.vision-mission-section {
    padding: 90px 0;
    background: #2a2a2a;
}
.vision-mission-section .row{
    row-gap:20px;
}

.vision-mission-card {
    position: relative;
    height: 100%;
    padding: 44px 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.vision-mission-card-accent {
    background: #e5232a;
}
.vision-mission-icon {
    position: absolute;
    right: 28px;
    top: 24px;
    width: 64px;
    height: 64px;
    color: rgba(255, 255, 255, 0.18);
}
.vision-mission-icon svg {
    width: 100%;
    height: 100%;
}
.vision-mission-card:hover .vision-mission-icon {
    color: rgba(255, 255, 255, 0.35);
}
.vision-mission-title {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
}
.vision-mission-text {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

/* ---------- Capabilities ---------- */
.capabilities-section{
    padding: 5rem 0;
    background: #fff;
}

.capabilities-section .capabilities-row{
    margin-top: 40px;
    row-gap: 24px;
}

/* equal height cards without h-100 */
.capabilities-col{
    display: flex;
}

/* card */
.capabilities-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f6f6f6;
    border-radius: 14px;
    overflow: hidden;
}

/* image */
.capabilities-card-image{
    overflow: hidden;
}
.capabilities-card-image img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s ease;
}
.capabilities-card:hover .capabilities-card-image img{
    transform: scale(1.05);
}

/* content */
.capabilities-card-content{
    flex: 1;
    padding: 24px 22px 28px;
}
.capabilities-card-title{
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    color: #161616;
}
.capabilities-card-text{
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #5c5c5c;
}

/* ---------- Solutions ---------- */
.solution-col {
    display: flex;
}
.solution-card {
    display: flex;
    width: 100%;
    gap: 18px;
    padding: 28px 24px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6e9ef;
    transition: all 0.3s ease;
}
.solution-card:hover {
    border-color: #e5232a;
    box-shadow: 0 10px 30px rgba(17, 28, 46, 0.08);
}
.solution-card-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    background: #f5f7fa;
    transition: all 0.3s ease;
}
.solution-card:hover .solution-card-icon {
    background: #e5232a;
}
.solution-card:hover .solution-card-icon img {
    filter: brightness(0) invert(1);
}

.solution-card .solution-card-icon img {
       filter: invert(20%) sepia(28%) saturate(543%) hue-rotate(311deg) brightness(207%) contrast(300%);
}

.solution-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #111c2e;
    margin-bottom: 8px;
}
.solution-card-text {
    font-size: 15px;
    line-height: 1.7;
    color: #5c5c5c;
    margin-bottom: 0;
}

/* ---------- Testimonials ---------- */
.testi-sec{
    padding: 5rem 0;
}

.testi-sec .testi-nav{
    justify-content: flex-start;
    margin-top: 28px;
}

.testi-sec .testi-swiper{
    padding: 10px;
    margin: -10px;
}
.testi-sec .swiper-slide{
    height: auto;
    display: flex;
}

/* card */
.testi-card{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 62px 32px 30px;
    background: #f6f6f6;
    border-radius: 16px;
    overflow: hidden;
}

/* CMYK print dots */
.testi-card::before{
    content: "";
    position: absolute;
    top: 30px;
    left: 32px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00aeef;
    box-shadow:
        16px 0 0 #ec008c,
        32px 0 0 #ffd400,
        48px 0 0 #231f20;
}

/* big faded quote mark */
.testi-quote{
    position: absolute;
    top: 14px;
    right: 26px;
    height: auto;
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: 1;
    color: rgba(231, 19, 24, 0.10);
    pointer-events: none;
}

.testi-card p{
    flex: 1;
    margin: 0 0 30px;
    font-size: 15.5px;
    line-height: 1.85;
    color: #3d3d3d;
}

/* author */
.testi-author{
    display: flex;
    align-items: center;
    gap: 14px;
}
.testi-avatar{
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #e71318;
    border-radius: 50%;
}
.testi-author h5{
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: #161616;
}
.testi-author small{
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b6b;
}

/* pagination */
.testi-sec .testi-pagination{
    justify-content: flex-start;
    margin-top: 30px;
    padding-left: 10px;
}


/*HOme*/
.offset-process{
  --op-ink:#1f2a44;          /* dark text / outlines */
  --op-muted:#5d6782;
  --op-bg:#f7f8fc;
  --op-line:#c9cfe0;
  --op-cyan:#00a8e8;
  --op-magenta:#e6007e;
  --op-yellow:#ffc20e;
  --op-orange:#ff7a1a;
  --op-green:#1fb57a;
  padding:90px 0;
 background: #f8f8f8;
  font-family:inherit;
  color:var(--op-ink);
  overflow:hidden;
}
.offset-process .container{max-width:1200px;margin:0 auto;padding:0 16px}
 
/* ---------- Heading ---------- */
.offset-process .op-head{text-align:center;max-width:680px;margin:0 auto 70px}
.offset-process .op-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--op-magenta);margin-bottom:14px;
}
.offset-process .op-cmyk{display:inline-flex;gap:4px}
.offset-process .op-cmyk i{width:9px;height:9px;border-radius:50%;display:block}
.offset-process .op-cmyk i:nth-child(1){background:var(--op-cyan)}
.offset-process .op-cmyk i:nth-child(2){background:var(--op-magenta)}
.offset-process .op-cmyk i:nth-child(3){background:var(--op-yellow)}
.offset-process .op-cmyk i:nth-child(4){background:var(--op-ink)}
.offset-process .op-head h2{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:0 0 14px;font-weight:800}
.offset-process .op-head h2 span{
  background:linear-gradient(90deg,var(--op-cyan),var(--op-magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.offset-process .op-head p{margin:0;color:var(--op-muted);font-size:16px;line-height:1.6}
 
/* ---------- Snake grid (desktop) ---------- */
.offset-process .op-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:64px 40px;list-style:none;margin:0;padding:0;
}
.offset-process .op-step:nth-child(1){grid-area:1/1}
.offset-process .op-step:nth-child(2){grid-area:1/2}
.offset-process .op-step:nth-child(3){grid-area:1/3}
.offset-process .op-step:nth-child(4){grid-area:1/4}
.offset-process .op-step:nth-child(5){grid-area:2/4}
.offset-process .op-step:nth-child(6){grid-area:2/3}
.offset-process .op-step:nth-child(7){grid-area:2/2}
.offset-process .op-cta{grid-area:2/1}
 
.offset-process .op-step{position:relative;text-align:center}
 
/* Ink-drop illustration holder */
.offset-process .op-art{
  position:relative;width:160px;height:160px;margin:0 auto 22px;
  border-radius:44% 56% 52% 48% / 52% 44% 56% 48%;
  background:linear-gradient(145deg,#fff 0%,var(--c-soft) 100%);
  box-shadow:0 14px 30px -12px var(--c-shadow), inset 0 0 0 3px #fff;
  display:grid;place-items:center;
  transition:transform .35s ease, border-radius .6s ease;
}
.offset-process .op-art::before{ /* registration-mark ring */
  content:"";position:absolute;inset:-9px;border-radius:inherit;
  border:2px dashed var(--c);opacity:.45;
}
.offset-process .op-art img,.offset-process .op-art svg{width:118px;height:118px;display:block}
.offset-process .op-step:hover .op-art{
  transform:translateY(-6px) rotate(-2deg);
  border-radius:52% 48% 46% 54% / 46% 54% 48% 52%;
}
.offset-process .op-num{
  position:absolute;top:-4px;left:-4px;z-index:2;
  min-width:44px;height:44px;padding:0 6px;border-radius:14px;
  background:var(--c);color:#fff;font-weight:800;font-size:15px;
  display:grid;place-items:center;box-shadow:0 6px 14px -4px var(--c-shadow);
  transform:rotate(-8deg);
}
.offset-process .op-step h3{font-size:18px;margin:0 0 8px;font-weight:700;line-height:1.3}
.offset-process .op-step p{font-size:14.5px;line-height:1.6;color:var(--op-muted);margin:0}
 
/* step colours (CMYK-inspired cycle) */
.offset-process .op-step:nth-child(1){--c:var(--op-cyan);--c-soft:#d8f2fc;--c-shadow:rgba(0,168,232,.45)}
.offset-process .op-step:nth-child(2){--c:var(--op-magenta);--c-soft:#fcdcee;--c-shadow:rgba(230,0,126,.4)}
.offset-process .op-step:nth-child(3){--c:#e0a500;--c-soft:#fff1c4;--c-shadow:rgba(255,194,14,.55)}
.offset-process .op-step:nth-child(4){--c:var(--op-ink);--c-soft:#dde1ec;--c-shadow:rgba(31,42,68,.4)}
.offset-process .op-step:nth-child(5){--c:var(--op-cyan);--c-soft:#d8f2fc;--c-shadow:rgba(0,168,232,.45)}
.offset-process .op-step:nth-child(6){--c:var(--op-magenta);--c-soft:#fcdcee;--c-shadow:rgba(230,0,126,.4)}
.offset-process .op-step:nth-child(7){--c:var(--op-green);--c-soft:#d5f4e7;--c-shadow:rgba(31,181,122,.45)}
 
/* ---------- Connectors ---------- */
.offset-process .op-step::after,
.offset-process .op-step::before{content:"";position:absolute;pointer-events:none}
/* right */
.offset-process .op-step.to-right::after{
  top:80px;left:calc(50% + 92px);width:calc(100% - 184px + 40px);
  border-top:3px dashed var(--op-line);
}
.offset-process .op-step.to-right::before{
  top:74px;left:calc(150% - 92px + 40px - 12px);
  border:7px solid transparent;border-left:11px solid var(--op-orange);border-right:0;
}
/* left */
.offset-process .op-step.to-left::after{
  top:80px;right:calc(50% + 92px);width:calc(100% - 184px + 40px);
  border-top:3px dashed var(--op-line);
}
.offset-process .op-step.to-left::before{
  top:74px;right:calc(150% - 92px + 40px - 12px);
  border:7px solid transparent;border-right:11px solid var(--op-orange);border-left:0;
}
/* down (step 4 -> 5) */
.offset-process .op-step.to-down::after{
  top:calc(100% + 8px);left:50%;height:40px;border-left:3px dashed var(--op-line);
}
.offset-process .op-step.to-down::before{
  top:calc(100% + 46px);left:calc(50% - 6px);
  border:7px solid transparent;border-top:11px solid var(--op-orange);border-bottom:0;
}
 
/* ---------- CTA card ---------- */
.offset-process .op-cta{
  align-self:center;border-radius:24px;padding:30px 24px;text-align:left;
  background:linear-gradient(150deg,var(--op-ink) 0%,#2f3d63 100%);
  color:#fff;position:relative;overflow:hidden;
}
.offset-process .op-cta::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:140px;height:140px;border-radius:50%;
  background:conic-gradient(var(--op-cyan) 0 25%,var(--op-magenta) 0 50%,var(--op-yellow) 0 75%,#fff 0);
  opacity:.18;
}
.offset-process .op-cta h3{font-size:20px;margin:0 0 8px;line-height:1.3}
.offset-process .op-cta p{font-size:14px;line-height:1.6;margin:0 0 20px;color:#c9d0e4}
.offset-process .op-btn{
  display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1;
  background:var(--op-yellow);color:var(--op-ink);font-weight:700;font-size:14.5px;
  padding:12px 20px;border-radius:999px;text-decoration:none;transition:transform .2s, box-shadow .2s;
}
.offset-process .op-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(255,194,14,.8)}
 
/* ---------- Tablet / mobile: vertical timeline ---------- */

@media (prefers-reduced-motion:reduce){
  .offset-process .op-art,.offset-process .op-btn{transition:none}
}