/* =====================================================================
Mobile spacing, type scale and small-screen fixes
---------------------------------------------------------------------
Loaded after main.css on the pages that link it, so plain class
selectors are enough to win.
Two theme-wide problems this file solves below 992px:
1. .section-gap keeps 70px of padding on BOTH sides of every block,
so two stacked sections leave ~140px of dead space on a phone.
2. h1 stays at 45px and .sec-title at 48px all the way down to
320px, which pushes headings off a small screen.
Page-specific blocks are grouped at the bottom.
===================================================================== */
@media only screen and (max-width: 767px) {
/* ---------- Section rhythm ---------- */
.section-gap,
.client-section-gap {
padding-top: 44px;
padding-bottom: 44px;
}
.section-gap-2 {
padding-top: 40px;
padding-bottom: 40px;
}
/* The logo strip is a single row — it never needed a full section gap. */
.tj-client-section.section-gap {
padding-top: 28px;
padding-bottom: 28px;
}
/* Hero already carries its own inner padding; drop the double gap
between it and the strip below. */
.tj-banner-section-2.h10-hero+.tj-client-section.section-gap {
padding-top: 12px;
}
/* Inner page banner: 60 + 70 for a single title is too tall on a phone. */
.tj-page-header {
padding-top: 52px;
padding-bottom: 58px;
}
/* ---------- Headings ---------- */
h1,
.banner-content .banner-link {
font-size: 34px;
line-height: 1.16;
}
.sec-heading .sec-title,
.sec-heading-wrap .sec-title,
h2 {
font-size: 28px;
line-height: 1.22;
}
h3,
.sec-heading h3.sec-title {
font-size: 22px;
line-height: 1.3;
}
.sec-heading,
.sec-heading-wrap {
margin-bottom: 22px;
}
/* ---------- Stacked-column gaps ----------
Columns that sit side by side on desktop stack here, so the gap the
theme leaves under the first one reads as a second section gap. */
.tj-service-section .content-wrap,
.tj-working-process .content-wrap,
.about-content-area .sec-heading {
margin-bottom: 26px;
}
/* The blog CTA carries an inline margin-top:44px meant for desktop. */
.tj-blog-section-2 .text-center[style] {
margin-top: 26px !important;
}
}
@media only screen and (max-width: 575px) {
.section-gap,
.client-section-gap {
padding-top: 36px;
padding-bottom: 36px;
}
.section-gap-2 {
padding-top: 32px;
padding-bottom: 32px;
}
.tj-client-section.section-gap {
padding-top: 24px;
padding-bottom: 24px;
}
.tj-page-header {
padding-top: 44px;
padding-bottom: 50px;
}
.section-gap-x {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
h1,
.banner-content .banner-link {
font-size: 30px;
letter-spacing: -0.5px;
}
.sec-heading .sec-title,
.sec-heading-wrap .sec-title,
h2 {
font-size: 25px;
}
/* Long body copy at 16px inside 320–575px reads better a shade smaller. */
.sec-heading .desc,
.about-content-area p,
.content-wrap .desc {
font-size: 15px;
line-height: 1.6;
}
}
/* =====================================================================
Company profile — "Our Journey" timeline (mobile rebuild)
---------------------------------------------------------------------
On desktop the theme draws the rail by making every a 2px-wide
grey bar and then pulling .content out of it with position:relative,
top:-100px and left/right offsets — the content box is sized in vw
because a percentage would resolve against those 2px.
Below 700px that trick stops working: the content is 100vw-100px wide
but starts ~128px in from the viewport edge, so it runs past the right
edge; every paragraph is forced to min-height:110px, leaving holes
under the short entries; and the body text stays #666 on the dark
#27272c card the same breakpoint switches on.
Rather than patch those numbers, the rail is rebuilt the way a mobile
timeline is normally built: the becomes an ordinary block with a
left border, the dot sits on that border, and .content goes back into
normal flow — so nothing depends on viewport arithmetic any more.
===================================================================== */
@media screen and (max-width: 700px) {
.timeline__cover {
padding: 26px 18px;
border-radius: 14px;
}
.timeline__cover .timeline {
padding-top: 0;
}
.timeline__cover .timeline ul {
padding-top: 0;
margin: 0;
list-style: none;
}
/* The 2px bar becomes a full-width row with the rail as its border. */
.timeline__cover .timeline ul li,
.timeline__cover .timeline ul li:last-child {
width: auto;
height: auto;
background: none;
border-left: 2px solid rgba(255, 255, 255, 0.16);
margin: 0 !important;
padding: 0 0 26px 22px;
}
/* The rail stops at the last dot instead of running past it. */
.timeline__cover .timeline ul li:last-child {
border-left-color: transparent;
padding-bottom: 0;
}
/* Dot centred on the 2px rail (border-box: 16px total), level with the
year badge. The ring is the card colour so it punches through. */
.timeline__cover .timeline ul li:before {
top: 3px;
left: -9px;
-webkit-transform: none;
transform: none;
width: 16px;
height: 16px;
border: 3px solid #27272c;
}
/* Back into normal flow: no vw width, no negative offsets. */
.timeline__cover .timeline ul li .content,
.timeline__cover .timeline ul li:nth-child(odd) .content,
.timeline__cover .timeline ul li:nth-child(2n) .content {
position: static;
width: auto;
max-width: none;
top: auto;
left: auto;
}
.timeline__cover .timeline ul li .content .badge {
background: var(--primary-color);
}
.timeline__cover .timeline ul li .content h3 {
font-size: 19px;
line-height: 26px;
margin: 10px 0 6px;
}
/* min-height:110px padded short entries out; justify leaves ragged
word gaps at this width; #666 is unreadable on the dark card. */
.timeline__cover .timeline ul li .content p {
min-height: 0;
text-align: left;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.62;
margin-bottom: 0;
}
}
/* =====================================================================
Our clients — logo grid
---------------------------------------------------------------------
The theme shrinks .client-logo to a 70px-tall tile below 768px while
the markup's p-3 keeps 16px of padding on every side, so on a phone
only ~38px is left for the logo itself. Two tiles per row give each
one more width, so a little more height and less padding makes the
logos actually readable.
===================================================================== */
@media only screen and (max-width: 575px) {
.tj-contact-area .client-logo {
height: 78px;
padding: 10px !important;
/* beats the markup's p-3 */
}
}
/* =====================================================================
Company profile — team cards
===================================================================== */
@media only screen and (max-width: 575px) {
.tj-team-section-3 .row.leftSwipeWrap>[class*="col-"] {
margin-bottom: 26px;
}
.tj-team-section-3 .row.leftSwipeWrap>[class*="col-"]:last-child {
margin-bottom: 0;
}
}
/* =====================================================================
Service detail pages
---------------------------------------------------------------------
The ten service pages (sap-upgrade-migration, implementation-services,
integration-services, data-management, digital-transformation,
erp-audit-services, erp-selection-technology-assessment,
staff-augmentation, strategic-planning, training-empowerment) all share
the same five sections, so every rule below is scoped to one of them:
1 .tj-slider-section hero
2 .tj-blog-section "What is …" intro + three mini cards
3 .h6-project methodology list (.service-item.style-3)
4 .h5-strategy why-choose cards
5 .tj-contact-section closing copy + enquiry form
Two problems repeat across the set below 992px:
* Bootstrap rows here carry no --bs-gutter-y, so the columns that sit
side by side on desktop stack with zero space between them.
* The theme's desktop rhythm (170px hero padding, a 60px rule above
the counter, 106px above the tag list) is never scaled down.
===================================================================== */
/* ---------- 1. Hero — tablet and below ---------- */
@media only screen and (max-width: 991px) {
/* 92.5vh + 170px of padding for one headline is a screen and a half of
scrolling before the page starts. */
.tj-slider-section .tj-slider-item {
min-height: auto;
}
.tj-slider-section .tj-slider-item .slider-wrapper {
padding: 90px 0;
}
/* The theme's overlay is a 90deg wash that fades to 0.1 alpha past 80%.
On desktop the copy sits in the opaque left third; once it goes full
width the last lines end up on bare photo. */
.tj-slider-section .tj-slider-item::after {
background: linear-gradient(180deg,
rgba(12, 30, 33, .92) 0%,
rgba(12, 30, 33, .84) 55%,
rgba(12, 30, 33, .92) 100%);
}
}
@media only screen and (max-width: 767px) {
.tj-slider-section .tj-slider-item .slider-wrapper {
padding: 62px 0;
}
/* 40px type keeps the desktop -2.88px tracking, which is ~7% of the em
and closes the letters right up. */
.tj-slider-section .slider-content .slider-title {
font-size: 32px;
line-height: 1.14;
letter-spacing: -0.8px;
}
.tj-slider-section .slider-content .slider-desc {
font-size: 15px;
line-height: 1.6;
}
.tj-slider-section .slider-content .slider-btn {
margin-top: 20px;
}
}
@media only screen and (max-width: 575px) {
.tj-slider-section .tj-slider-item .slider-wrapper {
padding: 52px 0;
}
.tj-slider-section .slider-content .slider-title {
font-size: 28px;
}
/* The CTA label runs long ("Talk to SAP Migration Experts") and the
button is white-space:nowrap, so at 16px it pushes past a 360px
viewport. Smaller type keeps it on one line; the wrap is a fallback
for the longest labels on a 320px screen. */
.tj-slider-section .slider-btn .tj-primary-btn {
font-size: 14px;
padding-inline-start: 18px;
gap: 8px;
white-space: normal;
text-align: start;
}
.tj-slider-section .slider-btn .tj-primary-btn .btn-icon {
width: 36px;
height: 36px;
font-size: 17px;
}
}
/* ---------- 2. "What is …" intro ---------- */
@media only screen and (max-width: 991px) {
/* Heading column stacks straight onto the body copy. */
.tj-blog-section.slidebar-stickiy-container .col-lg-4 .sec-heading {
margin-bottom: 24px;
}
}
/* The three highlight cards are col-md-4, so below 768px they stack one per
row — and their row is a plain .row, which means --bs-gutter-y:0 and the
cards touch edge to edge with no gap at all.
The spacing has to go on the COLUMN, not the card. .erp-mini-card carries
height:100%, so a margin-bottom on the card itself produces no visible
gap: the column's height is derived from the card plus its margin, then
height:100% resolves back against that taller column and the card simply
grows into the margin. Measured at 390px, margin-bottom:16px on the card
still left a 0.0px gap between them.
--bs-gutter-y puts the space on .row > * as margin-top instead, which
height:100% cannot swallow. 24px clears the cards' own 16px of padding so
three white boxes on the #ecf0f0 page read as three, not one.
Note .mt-3 on this row is a Bootstrap utility (margin-top:1rem!important)
and so overrides the row's compensating negative margin. The group
therefore sits 16px + 24px below the intro copy, which is the separation
we want between the paragraphs and the cards anyway. */
@media only screen and (max-width: 767px) {
.tj-blog-section.slidebar-stickiy-container .col-lg-8>.row {
--bs-gutter-y: 24px;
}
/* Nothing to equalise once they are stacked, and dropping it keeps the
card's box the size of its content. */
.tj-blog-section.slidebar-stickiy-container .erp-mini-card {
height: auto;
}
}
/* ---------- 3. Methodology list ---------- */
@media only screen and (max-width: 991px) {
/* 40px of side padding inside a card that is already inside the
container's gutters leaves very little room for the text. */
.h6-project .service-item.style-3 {
padding: 24px 22px;
margin-bottom: 14px;
}
/* .service-content-wrap is a wrapping flex row with no gap: once the
title and the paragraph fall onto separate lines they touch. */
.h6-project .service-item.style-3 .service-content-wrap {
row-gap: 14px;
}
.h6-project .service-content-wrap .service-title {
max-width: 100%;
gap: 16px;
}
.h6-project .service-content-wrap .service-content .desc {
max-width: 100%;
}
}
@media only screen and (max-width: 575px) {
.h6-project .service-item.style-3 {
padding: 22px 18px;
}
.h6-project .service-content-wrap .service-title .service-icon {
width: 54px;
height: 54px;
font-size: 28px;
}
.h6-project .service-content-wrap .service-title .title {
font-size: 18px;
line-height: 1.35;
}
.h6-project .service-content-wrap .service-content .desc {
font-size: 15px;
line-height: 1.6;
}
}
/* ---------- 4. Why-choose cards ---------- */
/* The three cards stack below 768px, where .gap-30-30 drops the row to
--bs-gutter-y:20px. The heading block and cards 1 and 2 are all solid
#fff on the #ecf0f0 page and carry 20px of their own padding, so a 20px
outer gap is exactly as wide as the padding inside them and the stack
reads as one striped white panel instead of separate boxes. Widening the
gutter past the card padding is what separates them again. */
@media only screen and (max-width: 767px) {
.h5-strategy .gap-30-30 .row {
--bs-gutter-y: 30px;
}
/* The heading is a white block too — give it a touch more air than the
gap between the cards so it still reads as the section header. */
.h5-strategy .h5-strategy-heading {
margin-bottom: 12px;
}
}
@media only screen and (max-width: 991px) {
.h5-strategy .h5-strategy-heading {
padding: 36px 22px;
}
/* 60px above the counter and 106px above the tag list are there to line
the three desktop cards up with each other; stacked they are just
holes. */
.h5-strategy .h5-strategy-counter-inner {
margin-top: 26px;
}
.h5-strategy .h5-strategy-tag-wrapper {
margin-top: 22px;
}
.h5-strategy .h5-strategy-title {
font-size: 20px;
line-height: 1.35;
}
}
@media only screen and (max-width: 575px) {
/* A 55px odometer beside the caption leaves the caption ~170px of a
320px card, so it breaks after every second word. */
.h5-strategy .h5-strategy-counter-inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 6px;
}
.h5-strategy .h5-strategy-counter-inner .inline-content {
font-size: 46px;
letter-spacing: -1px;
margin-bottom: 0;
}
.h5-strategy .h5-strategy-desc {
font-size: 15px;
line-height: 1.6;
}
}
/* ---------- 5. Closing contact section ---------- */
@media only screen and (max-width: 991px) {
/* Copy column and form column stack with no space between them. */
.tj-contact-section.h4-contact-section .col-lg-6:first-child {
margin-bottom: 32px;
}
.tj-contact-section.h4-contact-section .sec-heading {
margin-bottom: 20px;
}
/* The theme adds 60px under the form for the desktop two-column layout;
stacked it lands on top of the section's own bottom padding. */
.tj-contact-section.h4-contact-section .contact-form.style-3 {
margin-bottom: 0;
}
}
@media only screen and (max-width: 767px) {
.tj-contact-section.h4-contact-section .desc {
font-size: 15px;
line-height: 1.6;
}
.tj-contact-section.h4-contact-section .contact-form.style-3 .form-input textarea {
height: 130px;
}
}