/* =====================================================================
AGOS Aviation — Mobile Responsive Fixes
=====================================================================
HOW THIS FILE WORKS (for developers):
1. This is a DROP-IN OVERLAY. Include it LAST in , after the
theme's own responsive.css:
It changes NOTHING about the desktop HTML — it only restyles the
existing theme markup at small screen widths.
2. BREAKPOINTS used, top to bottom:
@media (min-width: 768px) -> DESKTOP toggle (show .desktop art,
hide the .mobile-only art)
@media (max-width: 991px) -> tablet: fluid images, no h-scroll
@media (max-width: 767px) -> PHONE layout (the bulk of this file)
@media (max-width: 380px) -> small-phone tightening
Desktop (>=768px) is otherwise UNTOUCHED — the original theme shows.
3. .desktop / .mobile helper classes on ![]()
: the page ships BOTH a
desktop and a phone version of the hero image / plane. The rules
below pick which one is visible per breakpoint.
4. Each phone section is labelled with a /* ---------- NAME ---------- */
comment matching the theme's section (HERO, ABOUT, COUNTERS, …).
===================================================================== */
/* ---------- Footer: always keep its dark brand fill ----------
The theme sets .ltn__footer-area{ background:url(../img/bg/footer-bg.png) }
with no colour fallback, so if that image is missing the footer looks
colourless. Pin the brand navy underneath it at every width. */
.ltn__footer-area{ background-color:#191b40 !important; }
/* ---------- DESKTOP (>=768px): pick the desktop art ----------
Without this, both the .desktop and .mobile images render on desktop
because the theme CSS has no .desktop/.mobile toggle of its own. */
@media (min-width: 768px){
.mobile, img.mobile, .slider-image.mobile, .about-plane-mob{ display:none !important; }
.desktop, .slider-image.desktop{ display:block !important; }
/* the IATA badge is a MOBILE-ONLY header add-on; the original desktop
site has no badge here, so hide it above the phone breakpoint. */
.iata-badge{ display:none !important; }
}
/* ---------- Global fluid images & no horizontal scroll ---------- */
@media (max-width: 991px){
html,body{ overflow-x:hidden; }
img{ max-width:100%; height:auto; }
.container,.container-fluid{ padding-left:16px; padding-right:16px; }
}
/* =====================================================================
PHONES (<= 767px)
===================================================================== */
@media (max-width: 767px){
/* kill horizontal scroll from the off-canvas drawer / wide elements */
html, body{ overflow-x:hidden !important; max-width:100% !important; }
/* ---------- Type scale (readable, not cramped) ---------- */
body{ font-size:15px; line-height:1.65; }
/* About plane: continuous gentle left-to-right glide (like desktop) */
.about-plane-mob{ will-change:transform; animation:aboutPlaneGlide 5s ease-in-out infinite alternate; }
.about-plane-mob.armed{ }
.about-plane-mob.flew{ }
@keyframes aboutPlaneGlide{ 0%{ transform:translateX(-40px); } 100%{ transform:translateX(40px); } }
@media (prefers-reduced-motion:reduce){ .about-plane-mob{ animation:none; } }
/* never hyphenate or break words anywhere on the site */
body, h1,h2,h3,h4,h5,h6, p, a, span, li, div{
-webkit-hyphens:none !important; -ms-hyphens:none !important; hyphens:none !important;
word-break:normal !important; overflow-wrap:normal !important;
}
h1{ font-size:26px !important; line-height:1.25; }
h2{ font-size:22px !important; line-height:1.3; }
h3{ font-size:19px !important; }
h4{ font-size:17px !important; }
h5{ font-size:16px !important; }
h6{ font-size:14px !important; }
p{ font-size:14.5px !important; line-height:1.7; }
/* ---------- HERO / SLIDER ---------- */
/* show ONLY the mobile hero variant (the .desktop/.mobile toggle has no backing rule in the site CSS) */
.slider-image.desktop, .main-slider .desktop{ display:none !important; }
.slider-image.mobile, .main-slider .mobile{ display:block !important; }
/* kill the negative pull that overlapped the header */
.slider-section{ margin-top:0 !important; }
/* pin the hero (plane + text) while the rest of the page scrolls up over it */
.slider-section{ position:sticky !important; top:0; z-index:0 !important; }
.about-us, .counter-sec, .blog, .choose, .clinet-logos, .mobile,
.ltn__footer-area, section.container-fluid, .swiper{ position:relative; z-index:2; }
.about-us{ background:#fff !important; }
.about-us-content{ background:#fff !important; }
.main-slider{ position:relative; }
.slider-image{
width:100% !important;
height:78vh !important;
min-height:440px;
object-fit:cover !important;
object-position:center;
display:block;
}
/* hero copy: anchor to bottom, readable, full-width padding */
.main-slider-content-text2,
.main-slider-content-text{
position:absolute !important;
top:auto !important;
bottom:0 !important;
left:0 !important; right:0 !important;
padding:0 20px 34px !important;
text-align:center;
}
.main-slider-content-text2 h2,
.main-slider-content-text h2{
font-size:24px !important;
line-height:1.28 !important;
color:#fff !important;
text-shadow:0 2px 8px rgba(0,0,0,.45);
margin-bottom:18px;
}
/* readability scrim behind hero text */
.main-slider .overlay{
background:linear-gradient(180deg,rgba(20,22,52,.15) 0%,rgba(20,22,52,.35) 45%,rgba(20,22,52,.85) 100%) !important;
}
/* hero plane overlay on phones — opaque solid cutout, lands then holds visible */
.ltn__header-area, .ltn__header-area.ltn__header-transparent, header, .ltn__header-sticky{ z-index:60 !important; }
/* let the plane rise up behind the navbar instead of being clipped into a slice */
.ltn__slider-area, .slider-section, .main-slider, .main-slider-active, .ltn__slide-item, .slider-item{ overflow:visible !important; background:transparent !important; }
.main-slider-img{
position:absolute !important;
left:0 !important; right:0 !important;
top:14% !important;
bottom:auto !important;
z-index:5 !important;
pointer-events:none;
will-change:transform,opacity;
transition:transform .12s linear, opacity .12s linear;
}
.main-slider-img .row,
.main-slider-img .col-md-12{ margin:0 !important; padding:0 !important; }
.parallax-container{ display:block !important; text-align:center; }
.main-slider .parallax-container .parallax-image,
.parallax-image,.plan-image{
display:block !important;
position:static !important;
width:76% !important;
max-width:300px;
height:auto !important;
margin:0 auto !important;
top:auto !important; left:auto !important;
filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
will-change:transform;
animation:planeLand 2s cubic-bezier(.33,.7,.3,1) 0s both !important;
}
@keyframes planeLand{
0%{ opacity:1; transform:translateY(-200px) scale(.72); }
100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes planeBob{
0%,100%{ transform:translateY(0) rotate(0deg); }
50%{ transform:translateY(10px) rotate(-.6deg); }
}
@media (prefers-reduced-motion:reduce){
.parallax-image,.plan-image{ animation:none; opacity:1; }
}
/* lift hero copy above the plane so they don't overlap */
.main-slider-content-text2{ bottom:0 !important; z-index:6 !important; }
/* ---------- Buttons: real tap targets ---------- */
.btn-primary2,.btn-primary,.btn{
display:inline-flex; align-items:center; justify-content:center;
min-height:48px; padding:12px 26px !important;
font-size:15px !important; border-radius:6px;
}
/* ---------- Breadcrumb hero on inner pages ---------- */
.slider-section .main-slider-content-text h2{ font-size:26px !important; }
/* collapse the section's extra reserved height below the banner (keeps banner size intact) */
.slider-section, .slider-section .main-slider, .slider-section .row, .slider-section .col-lg-12{ min-height:0 !important; height:auto !important; }
/* ---------- ABOUT ---------- */
.about-us{ padding:36px 0 !important; }
/* kill inherited full-height / bottom-aligned container that leaves a big white gap */
.about-us-container, .about-us-container.row{ min-height:0 !important; height:auto !important; align-items:flex-start !important; }
.pt-70{ padding-top:24px !important; }
.about-us-content{ padding:18px 16px !important; }
.about-us-content h1{ margin-bottom:14px; }
/* Option 3 — alternating blocks: text, image card, then V/M/P cards */
.about-us-content-img-3{ margin:22px 0 !important; }
.about-us-content .ltn__feature-item,
.about-us-content .about-vmp-item,
.about-us-content .list-item-1 li,
.about-us-content ul.goal-list li{
background:#f4f6fa !important;
border:1px solid #e7ebf3 !important;
border-left:4px solid #1F4695 !important;
border-radius:0 12px 12px 0 !important;
padding:16px 16px !important;
margin:0 0 14px !important;
list-style:none !important;
}
.about-us-content .ltn__feature-item:nth-child(even),
.about-us-content ul.goal-list li:nth-child(even){ background:#eef2f8 !important; }
.about-us-content .ltn__feature-item h3,
.about-us-content .ltn__feature-item h4,
.about-us-content ul.goal-list li strong{ color:#222558 !important; font-size:16px !important; margin-bottom:4px !important; }
.about-us-content-img-3 img,
.about-us-img-halfplan img{ border-radius:12px; }
/* ---------- COUNTERS ---------- */
/* original site stats photo, enlarged to cover the section */
.counter-sec{
padding:48px 16px 24px !important;
background:linear-gradient(rgba(17,19,45,.68),rgba(17,19,45,.8)),url('../img/stats-bg-new.png') center/cover no-repeat !important;
}
.counter-sec .row{ row-gap:16px; margin:0 !important; }
.ltn__counterup-item{
margin-bottom:0 !important;
text-align:center;
background:rgba(20,22,52,.55) !important;
border:1px solid rgba(255,255,255,.18);
border-radius:16px;
padding:22px 14px !important;
height:100%;
}
.ltn__counterup-item .counter-icon{ display:flex; justify-content:center; }
.ltn__counterup-item .counter-icon img{ width:56px !important; height:56px !important; margin:0 auto 10px; }
.ltn__counterup-item h1{ font-size:30px !important; color:#fff !important; margin:0; }
.ltn__counterup-item h1 span{ color:#fff !important; }
.ltn__counterup-item h6{ font-size:13px !important; color:rgba(255,255,255,.8) !important; margin-top:4px; }
/* ---------- SERVICES ---------- */
.service-item,.service-item2{ margin-bottom:18px !important; }
.service-item .service-item-con,
.service-item2 .service-item-con2{ padding-left:8px !important; padding-right:8px !important; height:auto !important; }
/* un-shrink the tiny forced 12px headings */
.service-item2 .service-item-con2 h4{ font-size:17px !important; line-height:1.3; }
.service-item img,.service-item2 img{ max-width:78px; }
.main-head img,.main-head2 img{ width:55% !important; max-width:220px; } /* the headd.png divider */
/* ---------- WHY CHOOSE + FORM ---------- */
.choose{ padding:44px 20px !important; background-size:cover !important; }
.choose .container{ padding:0 !important; }
.choose-content{ margin-bottom:30px !important; }
.choose-content h2{ margin-bottom:14px; white-space:nowrap; font-size:26px !important; }
.choose-content > p{ margin-bottom:22px; }
.choose-content .point{
display:flex !important; align-items:center; gap:14px;
font-size:15px; line-height:1.4; margin:0 0 14px !important;
}
.choose-content .point img{ width:44px; height:44px; flex:0 0 44px; margin:0 !important; object-fit:contain; }
.choose-content .btn-primary2{ margin-top:8px; }
/* ---------- GET IN TOUCH FORM (mobile redesign) ---------- */
.contact-form-box{ padding:24px 18px !important; margin-top:6px; border-radius:14px; box-shadow:0 18px 40px -26px rgba(20,22,52,.5); }
.contact-form-box .title-2{ margin:0 0 18px !important; font-size:20px; }
.contact-form-box form .row{ margin:0 !important; row-gap:0 !important; }
.contact-form-box .row [class*="col-"]{ padding:0 !important; margin:0 !important; }
.contact-form-box .input-item{ margin:0 0 10px !important; padding:0 !important; }
.contact-form-box .input-item input,
.contact-form-box .input-item textarea{ margin:0 !important; }
.contact-form-box input,
.contact-form-box textarea,
.contact-form-box .nice-select,
.contact-form-box select{
width:100% !important; min-height:52px !important; font-size:14px !important;
border:1px solid #dfe4ee !important;
border-radius:10px !important;
background:#f6f8fc !important;
padding:0 46px 0 16px !important;
color:#222558 !important;
}
.contact-form-box textarea{ min-height:120px !important; padding:14px 46px 14px 16px !important; }
.contact-form-box .input-item{ position:relative; }
.contact-form-box .input-item i{ color:#1F4695 !important; opacity:.75; right:16px !important; }
.contact-form-box .btn-wrapper{ margin-top:6px !important; }
.contact-form-box .btn-primary2{ width:100% !important; min-height:52px; border-radius:10px; font-size:15px; }
/* ---------- ADVANTAGES (service inner pages) ---------- */
.advantage-service{ padding:36px 0 !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; background-attachment:scroll !important; }
.advantage-service-body{ padding:14px 0 !important; }
.advantage-service-body-img,
.advantage-service-body .col-1{ flex:0 0 54px; max-width:54px; }
.advantage-service-body-img img{ width:44px; height:44px; }
.advantage-service-body-content h4{ font-size:16px !important; }
.advantage-service-body-content p{ font-size:13.5px !important; line-height:1.6; }
/* ---------- BLOGS ---------- */
.blog .card{ margin-bottom:20px; }
.blog .card img{ width:100%; height:200px; object-fit:cover; border-radius:10px 10px 0 0; }
.blog .card h2{ font-size:16px !important; line-height:1.4; }
/* ---------- PARTNERS ---------- */
.clinet-logos{ padding:30px 0 !important; }
.ltn__brand-logo-item{ padding:10px; }
.ltn__brand-logo-item img{ max-height:144px !important; width:auto !important; max-width:100% !important; object-fit:contain; margin:0 auto; }
/* ---------- CONTACT ---------- */
.ltn__contact-message-area .main-head h2 label{ font-size:26px !important; } /* was inline 50px */
.contact-panel .col-lg-6{ margin-bottom:24px; }
.google-map iframe{ height:300px !important; }
.ltn__contact-address-item{ margin-bottom:16px; }
/* ---------- FOOTER ---------- */
.ltn__footer-area [class*="col-"]{ margin-bottom:26px; }
.site-logo a img{ width:120px !important; }
/* ---------- INNER: ADVANTAGE ROWS ---------- */
.advantage-service-body{ display:flex !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:14px; padding:14px !important; margin:0 0 12px !important; background:#fff; border:1px solid #eef1f6; border-radius:14px; }
.advantage-service-body-img{ flex:0 0 48px !important; max-width:48px !important; width:48px !important; padding:0 !important; }
.advantage-service-body-img img{ width:48px !important; height:48px !important; object-fit:contain; background:#222558; border-radius:11px; padding:10px; }
.advantage-service-body-content{ flex:1 1 auto !important; max-width:100% !important; padding:0 !important; }
.advantage-service-body-content h4{ font-size:16px !important; margin:0 0 4px !important; color:#222558 !important; }
.advantage-service-body-content p{ font-size:13.5px !important; line-height:1.55 !important; margin:0 !important; color:#54545f !important; }
.advantage-service .main-head2 h2{ margin-bottom:18px; color:#fff !important; }
/* inner service tiles */
.service-item2{ background:#fff; border:1px solid #eef1f6; border-radius:16px; padding:26px 18px; margin-bottom:16px; }
.service-item2 .service-item-con2 img{ width:70px !important; height:70px; object-fit:contain; margin-bottom:12px; }
.service-item2 h4{ font-size:17px !important; }
.service-item2 p{ font-size:13.5px !important; line-height:1.6 !important; }
.service-bolock{ display:none !important; }
/* ---------- MOBILE DRAWER (left slide-in, redesigned) ---------- */
.ltn__utilize-mobile-menu{ left:auto !important; right:0 !important; }
.ltn__utilize-mobile-menu:not(.ltn__utilize-open){ transform:translateX(100%) !important; }
.ltn__utilize-mobile-menu.ltn__utilize-open{ transform:translateX(0) !important; }
.ltn__utilize-menu-inner{ padding:6px 22px 24px !important; scrollbar-width:none !important; -ms-overflow-style:none !important; }
.ltn__utilize-menu-inner::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }
.ltn__utilize-menu-head{ display:flex !important; justify-content:flex-end !important; align-items:center; padding:0 0 10px !important; border:0 !important; margin:0 0 4px !important; }
.ltn__utilize-close{ font-size:24px !important; color:#222558 !important; width:40px; height:40px; border-radius:8px; background:#f4f6fa !important; display:flex; align-items:center; justify-content:center; }
/* AGOS + IATA logos at the bottom of the drawer */
.drawer-logo-bottom{ margin-top:18px; padding-top:18px; border-top:1px solid #eef1f6; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.drawer-logo-bottom .dl-agos{ width:150px !important; max-width:60%; height:auto; display:block; }
.drawer-logo-bottom .dl-iata{ width:64px !important; height:64px !important; object-fit:contain; display:block; }
.ltn__utilize-menu ul li a{ font-size:16px !important; font-weight:600 !important; color:#222558 !important; padding:12px 0 !important; border-bottom:1px solid #eef1f6 !important; text-transform:none !important; text-align:left !important; display:block !important; }
.ltn__utilize-menu ul li .sub-menu li a{ font-size:14px !important; font-weight:500 !important; color:#5b6b7a !important; padding:11px 0 11px 16px !important; text-align:left !important; line-height:1.4 !important; }
.ltn__utilize-menu ul li ul.sub-menu{ padding-left:4px; }
.ltn__utilize-menu .ltn__utilize-menu-toggle::before, .ltn__utilize-menu .ltn__utilize-menu-toggle::after{ background:#1F4695 !important; }
.ltn__social-media-2{ margin:14px 0 0 !important; padding:0 !important; }
.ltn__social-media-2 ul{ display:flex; gap:12px; padding:0 !important; }
.ltn__social-media-2 ul li a{ width:42px; height:42px; border-radius:10px; background:#f4f6fa; color:#1F4695 !important; display:flex; align-items:center; justify-content:center; font-size:16px; }
/* ---------- ABOUT intro (inner) ---------- */
.about-us-content{ position:static !important; display:block !important; }
.about-us-content-img-3{ position:static !important; float:none !important; width:100% !important; margin:20px 0 0 !important; border-radius:14px; overflow:hidden; }
.about-us-content-img-3 img{ width:100% !important; display:block; }
.about-us-content-img-3 img{ position:static !important; width:100% !important; height:auto !important; border-radius:12px; }
/* ---------- WHY CHOOSE (inner pages, choose2) ---------- */
.choose2{ padding:44px 0 !important; }
.choose2 .choose-content{ padding:0 22px !important; }
.choose2 .choose-content h2{ font-size:30px !important; margin-bottom:22px !important; }
.choose2 .point{ display:block !important; position:relative !important; padding:0 0 0 72px !important; min-height:48px !important; margin:0 0 24px !important; font-size:16px !important; font-weight:600 !important; color:#222558 !important; line-height:1.35 !important; text-align:left !important; word-spacing:normal !important; }
.choose2 .point::before{ content:'' !important; position:absolute !important; left:0 !important; top:0 !important; width:56px !important; height:56px !important; background:#1F4695 !important; border-radius:13px !important; }
.choose2 .point img{ position:absolute !important; left:0 !important; top:0 !important; width:56px !important; height:56px !important; padding:12px !important; background:transparent !important; object-fit:contain !important; margin:0 !important; filter:brightness(0) invert(1) !important; }
.choose2 .point .point-para{ display:block !important; font-weight:400 !important; font-size:14px !important; color:#54545f !important; line-height:1.6 !important; margin-top:6px !important; padding-left:0 !important; text-align:left !important; word-spacing:normal !important; }
.choose2 .choose-img{ margin-top:26px !important; }
/* ---------- HEADER (mobile app-bar) ---------- */
/* drop the cramped contact strip on phones — email/socials live in the drawer */
.ltn__header-top-area{ display:none !important; }
/* single clean app-bar: logo left, IATA badge + hamburger right */
.ltn__header-middle-area{ padding:12px 16px !important; }
.ltn__header-middle-area .container{ padding:0 !important; }
.ltn__header-middle-area .container > .row{ display:flex !important; align-items:center; justify-content:space-between; flex-wrap:nowrap !important; margin:0 !important; }
.ltn__header-middle-area .col{ flex:0 0 auto !important; width:auto !important; padding:0 !important; }
.ltn__header-middle-area .header-menu-column{ display:none !important; }
.site-logo a img{ width:126px !important; }
.ltn__header-options{ display:flex !important; align-items:center; gap:12px; margin:0 !important; }
/* Keep header-search-wrap visible as container for mobile toggle */
.header-search-wrap{ display:flex !important; align-items:center; justify-content:flex-end; padding:0 !important; }
/* Hide any search inputs/icons inside it, but NOT the mobile toggle */
.header-search-wrap > *:not(.mobile-menu-toggle):not(.mobile-header-iata){ display:none !important; }
.mobile-menu-toggle{ display:flex !important; align-items:center; }
/* real IATA strategic-partner badge */
.iata-badge{ display:flex; align-items:center; justify-content:center; height:46px; width:46px; background:transparent; border-radius:50%; overflow:hidden; }
.iata-badge img{ width:46px; height:46px; object-fit:contain; display:block; }
/* clean hamburger icon button */
.mobile-menu-toggle{ margin:0 !important; }
.mobile-menu-toggle .ltn__utilize-toggle{ width:44px !important; height:44px !important; display:flex !important; align-items:center; justify-content:center; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.35) !important; border-radius:8px !important; }
.mobile-menu-toggle .ltn__utilize-toggle svg{ width:26px !important; height:26px !important; }
.mobile-menu-toggle .ltn__utilize-toggle svg path{ stroke:#fff !important; fill:none !important; stroke-width:44px; }
}
/* =====================================================================
SMALL PHONES (<= 380px) — tighten a touch more
===================================================================== */
@media (max-width: 380px){
.main-slider-content-text2 h2,
.main-slider-content-text h2{ font-size:21px !important; }
.ltn__counterup-item h1{ font-size:26px !important; }
h1{ font-size:23px !important; }
}
/* =====================================================================
CONTACT PAGE — big heading label fix
===================================================================== */
.contact-big-label {
font-size: clamp(22px, 4vw, 50px);
display: block;
line-height: 1.2;
}
/* =====================================================================
TABLET (768px – 991px) — fills the gap between phone and desktop
===================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
/* ---------- HEADER ---------- */
.ltn__header-top-area { font-size: 13px; }
.ltn__header-middle-area { padding: 12px 0; }
.site-logo a img { width: 110px !important; }
/* hide desktop nav, show hamburger on tablets too */
.header-menu.d-none.d-xl-block { display: none !important; }
.mobile-menu-toggle.d-xl-none { display: flex !important; }
/* ---------- HERO / SLIDER ---------- */
.slider-image { width: 100% !important; height: 55vw !important; object-fit: cover !important; min-height: 320px; }
.main-slider-content-text2 { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 0 30px 30px !important; }
.main-slider-content-text2 h2 { font-size: 26px !important; color: #fff !important; line-height: 1.3; }
.main-slider-content-text { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 0 30px 30px !important; }
.main-slider-content-text h2 { font-size: 28px !important; color: #fff !important; }
.parallax-image, .plan-image { width: 60% !important; max-width: 340px; }
/* ---------- ABOUT ---------- */
.about-us { padding: 36px 0 !important; }
.about-us-content { padding: 20px !important; }
.about-us-img-cargobg, .about-us-img-halfplan, .about-us-img-cargo, .about-us-img-cargoman { display: none !important; }
/* ---------- COUNTERS ---------- */
.ltn__counterup-item { margin-bottom: 40px !important; }
.ltn__counterup-item h1 { font-size: 28px !important; }
.ltn__counterup-item h6 { font-size: 13px !important; }
/* ---------- SERVICES ---------- */
.service-item { margin-bottom: 24px !important; }
.service-item-con { padding: 0 12px !important; height: auto !important; }
.main-head img { width: 40% !important; }
/* ---------- WHY CHOOSE + FORM ---------- */
.choose-content { margin-bottom: 34px !important; }
.choose-content h2 { font-size: 26px !important; }
.contact-form-box { padding: 28px 20px !important; }
/* ---------- BLOGS ---------- */
.blog .card { margin-bottom: 24px; }
.blog .card img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px 10px 0 0; }
/* ---------- ADVANTAGE ROWS (inner pages) ---------- */
.advantage-service-body { padding: 14px !important; }
.advantage-service-body-content h4 { font-size: 16px !important; }
.advantage-service-body-content p { font-size: 14px !important; }
/* ---------- FOOTER ---------- */
.footer-widget { margin-bottom: 28px; }
.ltn__footer-area [class*="col-md-6"] { margin-bottom: 22px; }
/* ---------- CONTACT PAGE ---------- */
.contact-big-label { font-size: clamp(20px, 3.5vw, 36px); }
.ltn__contact-address-item { margin-bottom: 16px; }
.google-map iframe { height: 320px !important; }
/* ---------- CAREERS PAGE ---------- */
.post-panel .col-md-4 { margin-bottom: 24px; }
/* ---------- POPUP FORM ---------- */
.popup-form { width: 90% !important; max-width: 520px; }
/* ---------- BLOG DETAIL ---------- */
.blog .col-lg-8, .blog .col-lg-4 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
/* ---------- INNER BANNER ---------- */
.slider-section .main-slider-content-text h2 { font-size: 28px !important; }
.slider-section .main-slider-content-text { padding: 0 30px 24px !important; }
/* ---------- GENERAL SPACING ---------- */
.pt-70 { padding-top: 40px !important; }
.pt-50 { padding-top: 30px !important; }
.mb-5 { margin-bottom: 32px !important; }
}
/* =====================================================================
IATA badge inside mobile drawer menu
===================================================================== */
/* Hide it from the desktop nav's on mobile */
@media (max-width: 991px) {
.ltn__main-menu ul > img[src*="IATA"] {
display: none !important;
}
}
/* Style the mobile drawer IATA badge properly */
.mobile-iata-li {
border-bottom: none !important;
padding: 16px 0 0 !important;
list-style: none !important;
}
.mobile-iata-badge {
width: 72px !important;
height: 72px !important;
object-fit: contain !important;
display: block !important;
}
/* Also hide on phone via the existing phone block */
@media (max-width: 767px) {
.ltn__utilize-menu ul li.mobile-iata-li a { display: none !important; }
.mobile-iata-li { padding: 12px 0 0 !important; }
.mobile-iata-badge { width: 64px !important; height: 64px !important; }
}
/* =====================================================================
FIX: .about-us-container has padding-top:200px in style.css
.about-us-content2 has padding-bottom:150px — both removed on mobile
===================================================================== */
@media (max-width: 991px) {
.about-us-container { padding-top: 0 !important; }
.about-us-content2 { padding-bottom: 0 !important; position: static !important; }
.about-us-content2 img { position: static !important; bottom: auto !important; left: auto !important; width: 100% !important; margin-top: 20px; border-radius: 12px; }
section.about-us.pt-50 { padding-top: 20px !important; }
section.about-us.pt-70 { padding-top: 20px !important; }
/* inner pages: cancel sticky slider so no extra scroll space */
.slider-section { position: relative !important; z-index: 1 !important; }
/* home page: re-enable sticky — home slider has .slider-image.mobile child */
.slider-section:has(.slider-image.mobile) { position: sticky !important; top: 0 !important; z-index: 0 !important; }
}
@media (max-width: 767px) {
.about-us-container { padding-top: 0 !important; }
.about-us-content2 { padding-bottom: 0 !important; position: static !important; }
section.about-us.pt-50 { padding-top: 16px !important; }
}
/* =====================================================================
Remove scroll-to-top button (scrollUp plugin)
===================================================================== */
#scrollUp { display: none !important; }
/* =====================================================================
TASK 5: planImage2 — let JS scroll handler drive transform on mobile
(override CSS animation so JS translateY is not overwritten)
===================================================================== */
@media (max-width: 767px) {
#planImage2 {
animation: none !important;
will-change: transform;
}
}
/* =====================================================================
TASK 6: Counter section — fix background image + layout on mobile
===================================================================== */
@media (max-width: 767px) {
.counter-sec {
background: linear-gradient(rgba(17,19,45,.65),rgba(17,19,45,.78)), url('../img/stats-bg-new.png') center/cover no-repeat !important;
padding: 60px 16px 30px !important;
}
.counter-sec .row {
row-gap: 20px !important;
margin: 0 !important;
}
.ltn__counterup-item {
padding: 16px !important;
background: rgba(20, 22, 52, 0.7) !important;
border-radius: 10px !important;
}
.ltn__counterup-item .counter-icon img {
width: 56px !important;
height: 56px !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
}
.ltn__counterup-item h1 {
color: #fff !important;
font-size: 28px !important;
}
.ltn__counterup-item h1 span { color: #fff !important; }
.ltn__counterup-item h6 {
color: rgba(255,255,255,0.85) !important;
font-size: 13px !important;
}
}
/* =====================================================================
TASK 7: Why Choose — remove justify from .point text
===================================================================== */
.choose-content .point,
.choose2 .choose-content .point {
text-align: left !important;
}
/* =====================================================================
TASK 8: Aviation Partners — 2 logos per row, bigger on mobile
===================================================================== */
@media (max-width: 767px) {
.ltn__brand-logo-active .col-lg-12 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
.ltn__brand-logo-item img {
max-height: 80px !important;
width: auto !important;
margin: 0 auto !important;
display: block !important;
object-fit: contain !important;
}
.ltn__brand-logo-area {
padding: 30px 0 !important;
}
}
/* =====================================================================
TASK 11: Careers form — fix input overflow on mobile
===================================================================== */
@media (max-width: 767px) {
.ltn__form-box .input-item input,
.ltn__form-box .input-item select,
.ltn__form-box .input-item textarea,
.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.nice-select {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* =====================================================================
Aviation Partner section — bigger background image on mobile
===================================================================== */
@media (max-width: 767px) {
.clinet-logos {
background-size: cover !important;
background-position: center !important;
padding: 60px 0 !important;
min-height: 260px;
}
.clinet-logos .main-head2 h2 {
font-size: clamp(22px, 6vw, 32px) !important;
color: #fff !important;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ltn__brand-logo-item img {
max-height: 110px !important;
padding: 8px !important;
}
}
/* =====================================================================
Fix: Backend Support Service sub-menu toggle — + / – icon
The default CSS only targets top-level li; nested sub-menu li need same styles
===================================================================== */
.ltn__utilize-menu .sub-menu > li {
position: relative !important;
display: block !important;
}
/* Hide the JS-prepended menu-expand for simple links (no nested sub-menu) */
.ltn__utilize-menu .sub-menu > li:not(:has(> ul)) .menu-expand {
display: none !important;
}
/* Style the toggle ONLY for sub-menu li that actually have a nested sub-menu */
.ltn__utilize-menu .sub-menu > li:has(> ul) .menu-expand {
position: absolute !important;
z-index: 9;
top: 0 !important;
right: 0 !important;
width: 36px !important;
height: 44px !important;
cursor: pointer;
background-color: transparent !important;
display: block !important;
}
.ltn__utilize-menu .sub-menu > li:has(> ul) .menu-expand::before,
.ltn__utilize-menu .sub-menu > li:has(> ul) .menu-expand::after {
position: absolute !important;
top: calc(50% - 1px) !important;
left: calc(50% - 7px) !important;
width: 14px !important;
height: 2px !important;
content: "" !important;
transition: all .3s ease;
transform: scale(0.85) !important;
background-color: #7e7e7e !important;
}
.ltn__utilize-menu .sub-menu > li:has(> ul) .menu-expand::after {
transform: rotate(90deg) scale(0.85) !important;
}
.ltn__utilize-menu .sub-menu > li.active:has(> ul) .menu-expand::after {
transform: scale(0.85) !important;
}
/* =====================================================================
Fix: When parent "Services" li is active, nested sub-items should
still show + (not −) unless THEY themselves are active
===================================================================== */
/* When Services is open, reset nested items back to + */
.ltn__utilize-menu > ul > li.active .sub-menu li .menu-expand::after {
-webkit-transform: rotate(90deg) scale(0.75) !important;
-ms-transform: rotate(90deg) scale(0.75) !important;
transform: rotate(90deg) scale(0.75) !important;
}
/* Only show − when the nested item itself is active (clicked) */
.ltn__utilize-menu > ul > li.active .sub-menu li.active .menu-expand::after {
-webkit-transform: scale(0.75) !important;
-ms-transform: scale(0.75) !important;
transform: scale(0.75) !important;
}
/* =====================================================================
INNER PAGE BANNERS — mobile-specific background images
Hide the desktop ![]()
and replace with CSS background per page
===================================================================== */
@media (max-width: 767px) {
/* Common rule: hide the desktop slider-image and use bg instead */
.pg-aboutus .slider-image,
.pg-loadmaster .slider-image,
.pg-trip .slider-image,
.pg-gclc .slider-image,
.pg-catering .slider-image,
.pg-customs .slider-image,
.pg-blog .slider-image,
.pg-lm-sched .slider-image,
.pg-invoice .slider-image {
display: none !important;
}
/* Each page's mobile banner — !important to override background:transparent !important on .main-slider */
.pg-aboutus .main-slider {
background: url('../img/aboutus-responsivebg.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-loadmaster .main-slider {
background: url('../img/LoadmasterScheduling.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-trip .main-slider {
background: url('../img/trip-support-and-station-representation-responsive.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-gclc .main-slider {
background: url('../img/global-centralised-load-control-responsive.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-catering .main-slider {
background: url('../img/global-catering-services-responsive.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-customs .main-slider {
background: url('../img/Global-Customs-Support-responsive.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-blog .main-slider {
background: url('../img/blogbannerres.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-lm-sched .main-slider {
background: url('../img/LoadmasterScheduling.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
.pg-invoice .main-slider {
background: url('../img/InvoiceProc.jpg') center/cover no-repeat !important;
min-height: 150vw !important;
}
/* Keep text content visible above the bg */
.pg-aboutus .main-slider-content-text,
.pg-loadmaster .main-slider-content-text,
.pg-trip .main-slider-content-text,
.pg-gclc .main-slider-content-text,
.pg-catering .main-slider-content-text,
.pg-customs .main-slider-content-text,
.pg-blog .main-slider-content-text {
position: absolute !important;
bottom: 20px;
left: 0;
right: 0;
z-index: 3;
}
}
/* =====================================================================
Hide desktop nav IATA badge on mobile
===================================================================== */
@media (max-width: 991px) {
.desktop-iata-nav { display: none !important; }
}
/* =====================================================================
Mobile header: IATA badge inline beside hamburger (300px–1199px)
===================================================================== */
@media (min-width: 300px) and (max-width: 1199px) {
.mobile-header-iata {
display: inline-flex !important;
height: 44px !important;
width: 44px !important;
object-fit: contain !important;
margin-right: 10px;
vertical-align: middle;
flex-shrink: 0;
}
.header-search-wrap {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px;
}
.mobile-menu-toggle {
display: flex !important;
align-items: center !important;
}
}