/* ========================================================================== AT Travel — front-end stylesheet Mobile-first. Brand tokens kept in sync with class-at-installer.php ========================================================================== */ :root{ --at-red:#B11A17; --at-red-dark:#7E1212; --at-navy:#1B1E27; --at-navy-2:#292C38; --at-yellow:#FCD227; --at-yellow-2:#F1C941; --at-cream:#FFF6D6; --at-blue:#2D6186; --at-ink:#1B1E27; --at-body:#5A5E68; --at-muted:#8A8F99; --at-line:#E6E7E7; --at-bg-soft:#FCFCFC; --at-bg:#FFFFFF; --at-radius-sm:8px; --at-radius:14px; --at-radius-lg:24px; --at-radius-pill:999px; --at-shadow-sm:0 4px 14px rgba(27,30,39,0.06); --at-shadow:0 10px 30px rgba(27,30,39,0.08); --at-shadow-lg:0 24px 60px rgba(27,30,39,0.12); --at-font-display:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --at-font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --at-font-arabic:'Tajawal','Cairo',system-ui,sans-serif; } /* ----- base ------------------------------------------------------------- */ .at-travel-body, body.at-travel-body{ font-family:var(--at-font-body); color:var(--at-ink); background:var(--at-bg); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Polylang adds .at-lang-en / .at-lang-ar via body_class so we can pin direction per-page even if a cached Elementor CSS file disagrees. */ body.at-lang-en{ direction:ltr !important; unicode-bidi:isolate; text-align:left; font-family:var(--at-font-body); } body.at-lang-en *{direction:ltr;} body.at-lang-en .elementor, body.at-lang-en .elementor *{ direction:ltr !important; text-align:inherit; } body.at-lang-ar{ direction:rtl; font-family:var(--at-font-arabic); } body[dir="rtl"]:not(.at-lang-en), html[dir="rtl"] body:not(.at-lang-en){ font-family:var(--at-font-arabic); } a{color:var(--at-red);text-decoration:none;} a:hover{color:var(--at-red-dark);} img{max-width:100%;height:auto;display:block;} /* ----- buttons ---------------------------------------------------------- */ .at-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; font-family:var(--at-font-body); font-weight:700; font-size:15px; line-height:1.2; border:0; border-radius:var(--at-radius-pill); cursor:pointer; text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background .2s ease; } .at-btn--primary{ background:var(--at-red); color:#fff; } .at-btn--primary:hover{ background:var(--at-red-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--at-shadow); } .at-btn--secondary{ background:var(--at-yellow); color:var(--at-ink); } .at-btn--secondary:hover{ background:var(--at-yellow-2); color:var(--at-ink); transform:translateY(-1px); box-shadow:var(--at-shadow); } .at-btn--ghost{ background:transparent; color:var(--at-ink); border:2px solid var(--at-ink); padding:10px 22px; } .at-btn--ghost:hover{ background:var(--at-ink); color:#fff; } /* ========================================================================== HERO (homepage) ========================================================================== */ .at-hero{ position:relative; background: radial-gradient(1100px 600px at 90% -10%,rgba(252,210,39,0.18),transparent 55%), radial-gradient(700px 500px at 0% 110%,rgba(177,26,23,0.30),transparent 60%), var(--at-navy); color:#fff; overflow:hidden; } .at-hero__inner{ max-width:1200px; margin:0 auto; padding:64px 20px 72px; display:grid; grid-template-columns:1fr; gap:32px; align-items:center; } .at-hero__eyebrow{ display:inline-block; font-family:var(--at-font-body); font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--at-yellow); margin-bottom:12px; } .at-hero__title{ font-family:var(--at-font-display); font-weight:800; font-size:40px; line-height:1.1; color:#fff; margin:0 0 16px; letter-spacing:-0.5px; } .at-hero__title em{ font-style:normal; color:var(--at-yellow); } .at-hero__sub{ font-size:17px; line-height:1.6; color:rgba(255,255,255,0.82); max-width:560px; margin:0 0 24px; } .at-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px; } .at-hero__stats{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; } .at-hero__stats li{display:flex;flex-direction:column;} .at-hero__stats strong{ font-family:var(--at-font-display); font-size:28px; font-weight:800; color:var(--at-yellow); } .at-hero__stats span{ font-size:12px; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:1px; margin-top:4px; } .at-hero__shape{ display:none; } @media (min-width:768px){ .at-hero__inner{padding:96px 32px 100px;grid-template-columns:1.4fr 1fr;gap:48px;} .at-hero__title{font-size:56px;} .at-hero__shape{ display:block; position:relative; height:360px; background: radial-gradient(circle at 30% 30%,rgba(252,210,39,0.95),rgba(241,201,65,0.6) 50%,transparent 70%), radial-gradient(circle at 70% 70%,rgba(177,26,23,0.95),rgba(177,26,23,0.4) 50%,transparent 70%); border-radius:50% 30% 50% 40% / 40% 50% 30% 50%; opacity:0.95; animation:at-blob 18s ease-in-out infinite alternate; } } @media (min-width:1100px){ .at-hero__title{font-size:68px;} } @keyframes at-blob{ 0%{border-radius:50% 30% 50% 40% / 40% 50% 30% 50%;} 50%{border-radius:30% 60% 40% 50% / 50% 40% 60% 30%;} 100%{border-radius:60% 40% 30% 50% / 30% 60% 40% 50%;} } /* ========================================================================== SUPERVISOR CALLOUT (dark band with quote) ========================================================================== */ .at-supervisor{ max-width:880px; margin:0 auto; color:#fff; text-align:center; } .at-supervisor__pill{ display:inline-block; background:var(--at-yellow); color:var(--at-ink); font-family:var(--at-font-body); font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:6px 14px; border-radius:var(--at-radius-pill); margin-bottom:20px; } .at-supervisor__quote{ font-family:var(--at-font-display); font-weight:600; font-size:22px; line-height:1.45; color:#fff; margin:0 0 16px; padding:0; border:0; quotes:none; } .at-supervisor__author{ color:rgba(255,255,255,0.72); font-size:13px; letter-spacing:1px; text-transform:uppercase; } @media (min-width:768px){ .at-supervisor__quote{font-size:28px;} } /* ========================================================================== VEHICLE CARDS ========================================================================== */ .at-vcard-wrap,.at-vcard-wrap > .elementor-widget-container{height:100%;} .at-vcard{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--at-line); border-radius:var(--at-radius); padding:22px 22px 18px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .at-vcard:hover{ transform:translateY(-3px); border-color:rgba(177,26,23,0.25); box-shadow:var(--at-shadow); } .at-vcard__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; } .at-vcard__cat{ font-family:var(--at-font-body); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; color:var(--at-red); padding:4px 10px; background:rgba(177,26,23,0.08); border-radius:var(--at-radius-pill); } .at-vcard__badge{ display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 10px; border-radius:var(--at-radius-pill); font-size:11px; font-weight:700; letter-spacing:1px; } .at-vcard__badge--ac{ background:var(--at-yellow); color:var(--at-ink); } .at-vcard__title{ font-family:var(--at-font-display); font-weight:700; font-size:20px; line-height:1.25; color:var(--at-ink); margin:0 0 8px; } .at-vcard__meta{ color:var(--at-body); font-size:14px; margin-bottom:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .at-vcard__sep{color:var(--at-muted);} .at-vcard__cta{ margin-top:auto; color:var(--at-red); font-weight:700; font-size:14px; text-decoration:none; } .at-vcard__cta:hover{color:var(--at-red-dark);} .at-vcard.is-hidden{display:none;} /* ========================================================================== FILTER CHIPS ========================================================================== */ .at-filter-bar{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; } .at-chip{ background:#fff; border:1px solid var(--at-line); color:var(--at-ink); padding:8px 16px; border-radius:var(--at-radius-pill); font-family:var(--at-font-body); font-weight:600; font-size:14px; cursor:pointer; transition:all .15s ease; } .at-chip:hover{border-color:var(--at-red);color:var(--at-red);} .at-chip.is-active{ background:var(--at-red); color:#fff; border-color:var(--at-red); } /* ========================================================================== CLIENTS — pill grid ========================================================================== */ .at-clients-block{margin-bottom:24px;} .at-clients-block h3{ font-family:var(--at-font-display); font-weight:700; font-size:18px; color:var(--at-ink); margin:0 0 12px; text-transform:uppercase; letter-spacing:1px; } .at-clients-grid{ display:flex; flex-wrap:wrap; gap:10px; } .at-pill{ display:inline-flex; align-items:center; padding:10px 18px; background:#fff; border:1px solid var(--at-line); border-radius:var(--at-radius-pill); font-family:var(--at-font-body); font-weight:600; font-size:14px; color:var(--at-ink); transition:all .15s ease; } .at-pill:hover{ border-color:var(--at-red); color:var(--at-red); transform:translateY(-1px); } /* ========================================================================== CONTACT CARD (sidebar) ========================================================================== */ .at-contact-card{ background:var(--at-navy); color:#fff; border-radius:var(--at-radius); padding:28px; } .at-contact-card h3{ font-family:var(--at-font-display); font-weight:700; font-size:22px; color:#fff; margin:0 0 18px; } .at-contact-card ul{ list-style:none; padding:0; margin:0 0 18px; } .at-contact-card li{ display:grid; grid-template-columns:100px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:14px; align-items:center; } .at-contact-card li:last-child{border-bottom:0;} .at-contact-card li > span:first-child{ color:rgba(255,255,255,0.55); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; } .at-contact-card a{ color:var(--at-yellow); word-break:break-word; } .at-contact-card a:hover{color:#fff;} .at-contact-card__foot{ background:rgba(255,255,255,0.06); border-radius:var(--at-radius-sm); padding:12px 14px; font-size:13px; color:rgba(255,255,255,0.78); line-height:1.5; } /* ========================================================================== QUOTE FORM ========================================================================== */ .at-quote-form{ background:#fff; border:1px solid var(--at-line); border-radius:var(--at-radius); padding:24px; box-shadow:var(--at-shadow-sm); } .at-quote-form__grid{ display:grid; grid-template-columns:1fr; gap:14px; } @media (min-width:640px){ .at-quote-form__grid{grid-template-columns:1fr 1fr;} } .at-field{ display:flex; flex-direction:column; gap:6px; } .at-field--full{grid-column:1 / -1;} .at-field > span{ font-family:var(--at-font-body); font-weight:600; font-size:13px; color:var(--at-ink); } .at-field input, .at-field select, .at-field textarea{ width:100%; padding:12px 14px; border:1px solid var(--at-line); border-radius:var(--at-radius-sm); font-family:var(--at-font-body); font-size:15px; color:var(--at-ink); background:#fff; transition:border-color .15s ease,box-shadow .15s ease; appearance:none; -webkit-appearance:none; } .at-field textarea{resize:vertical;min-height:96px;} .at-field input:focus, .at-field select:focus, .at-field textarea:focus{ outline:none; border-color:var(--at-red); box-shadow:0 0 0 3px rgba(177,26,23,0.12); } .at-honeypot{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none;} .at-quote-form__foot{ margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; } .at-quote-form__msg{ margin:14px 0 0; font-size:14px; min-height:22px; color:var(--at-body); } .at-quote-form__msg.is-success{color:#1e7d3a;} .at-quote-form__msg.is-error{color:var(--at-red);} .at-quote-form.is-loading button[type="submit"]{opacity:.6;pointer-events:none;} /* ========================================================================== STAT STACK (about page) ========================================================================== */ .at-stat-stack{ background:var(--at-cream); border:1px solid #F1E2A8; border-radius:var(--at-radius); padding:20px 24px; display:grid; grid-template-columns:1fr 1fr; gap:16px; } .at-stat{display:flex;flex-direction:column;} .at-stat strong{ font-family:var(--at-font-display); font-weight:800; font-size:32px; color:var(--at-red); line-height:1; } .at-stat span{ font-size:12px; color:var(--at-body); margin-top:6px; text-transform:uppercase; letter-spacing:1px; font-weight:600; } /* ========================================================================== ELEMENTOR ICON-BOX TWEAKS — make our brand show through ========================================================================== */ .elementor-widget-icon-box .elementor-icon-box-icon{ margin-bottom:16px; } .elementor-widget-icon-box .elementor-icon{ background:rgba(177,26,23,0.08) !important; color:var(--at-red) !important; transition:background .2s ease,color .2s ease; } .elementor-widget-icon-box:hover .elementor-icon{ background:var(--at-red) !important; color:#fff !important; } .elementor-widget-icon-box .elementor-icon-box-content{text-align:left;} body[dir="rtl"] .elementor-widget-icon-box .elementor-icon-box-content{text-align:right;} /* ========================================================================== RTL adjustments ========================================================================== */ body[dir="rtl"] .at-hero__sub, body[dir="rtl"] .at-hero__title{text-align:right;} body[dir="rtl"] .at-vcard__cta::after{content:'';} /* ========================================================================== Header / footer chrome (fallback for theme) ========================================================================== */ .at-site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--at-line); } .at-site-header__inner{ max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .at-brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--at-font-display); font-weight:800; color:var(--at-ink); text-decoration:none; font-size:18px; letter-spacing:-0.5px; } .at-brand__mark{ width:32px; height:32px; border-radius:8px; background:var(--at-red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; } .at-nav{display:none;} .at-nav ul, .at-nav .at-nav__list, .at-nav__list{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; align-items:center; gap:22px; } .at-nav li{margin:0;} .at-nav a{ color:var(--at-ink); font-weight:600; font-size:15px; text-decoration:none; transition:color .15s ease; white-space:nowrap; } .at-nav a:hover, .at-nav .current-menu-item > a{color:var(--at-red);} .at-header-right{ display:none; align-items:center; gap:14px; } .at-header-cta{display:none;} .at-lang-switch{ list-style:none; margin:0; padding:0; display:flex; gap:4px; background:#F4F5F7; border-radius:999px; padding:4px; } .at-lang-switch li{margin:0;} .at-lang-switch a, .at-lang-switch .lang-item a{ display:inline-block; padding:6px 12px; border-radius:999px; color:var(--at-body); font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; } .at-lang-switch .current-lang a, .at-lang-switch .lang-item-en.current-lang a, .at-lang-switch .lang-item-ar.current-lang a{ background:var(--at-ink); color:#fff; } .at-lang-switch--mobile{ margin:12px 20px 0; width:max-content; } .at-burger{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; border-radius:8px; cursor:pointer; } .at-burger span, .at-burger span::before, .at-burger span::after{ content:''; display:block; width:22px; height:2px; background:var(--at-ink); border-radius:2px; position:relative; transition:transform .2s ease,top .2s ease; } .at-burger span::before{position:absolute;top:-7px;} .at-burger span::after{position:absolute;top:7px;} .at-burger.is-active span{background:transparent;} .at-burger.is-active span::before{top:0;transform:rotate(45deg);} .at-burger.is-active span::after{top:0;transform:rotate(-45deg);} .at-mobile-nav{ display:none; border-top:1px solid var(--at-line); background:#fff; } .at-mobile-nav.is-open{display:block;} .at-mobile-nav ul{ list-style:none; margin:0; padding:8px 20px 20px; } .at-mobile-nav li{border-bottom:1px solid var(--at-line);} .at-mobile-nav li:last-child{border-bottom:0;} .at-mobile-nav a{ display:block; padding:14px 0; color:var(--at-ink); font-weight:600; text-decoration:none; } .at-mobile-nav .at-btn{ margin-top:14px; width:100%; max-width:100%; box-sizing:border-box; display:flex !important; align-items:center; justify-content:center; text-align:center; white-space:nowrap; padding:14px 20px !important; font-size:15px !important; line-height:1.2 !important; } /* The Get-a-quote <ul> wrapper inside the drawer (the inline-styled list) doesn't have border-bottoms or list dots,but the generic .at-mobile-nav li rule applies border + padding by default. Reset it for the CTA item. */ .at-mobile-nav > ul:last-of-type li{ border-bottom:0 !important; padding:0 !important; } /* Mobile language switcher inside the drawer — clean pill,no underlines, no list dots,neat spacing from the menu items above. */ .at-mobile-nav .at-lang-switch, .at-lang-switch--mobile{ list-style:none !important; display:inline-flex !important; width:auto !important; max-width:max-content; padding:4px !important; margin:16px 20px !important; background:#F4F5F7; border-radius:999px; gap:4px; } .at-mobile-nav .at-lang-switch li, .at-lang-switch--mobile li{ border-bottom:0 !important; padding:0 !important; margin:0 !important; list-style:none !important; } .at-mobile-nav .at-lang-switch a, .at-lang-switch--mobile a, .at-lang-switch a{ display:inline-block !important; padding:6px 14px !important; border-radius:999px !important; text-decoration:none !important; border:0 !important; background:transparent; color:var(--at-body,#5A5E68) !important; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; line-height:1.2; } .at-mobile-nav .at-lang-switch .current-lang a, .at-lang-switch--mobile .current-lang a, .at-lang-switch .current-lang a{ background:var(--at-ink,#1B1E27) !important; color:#FFFFFF !important; text-decoration:none !important; border:0 !important; } /* Defeat any stray underline / hr-style separator from theme defaults */ .at-lang-switch a::after, .at-lang-switch a::before, .at-lang-switch--mobile a::after, .at-lang-switch--mobile a::before{ display:none !important; content:none !important; } @media (min-width:900px){ .at-nav{display:flex;align-items:center;} .at-header-right{display:flex;} .at-header-cta{display:inline-flex;} .at-burger{display:none;} .at-mobile-nav{display:none !important;} } @media (min-width:900px) and (max-width:1099px){ /* On laptop widths,drop the gap a hair so menu + CTA fit. */ .at-nav__list{gap:16px;} .at-header-cta{padding:10px 18px;font-size:14px;} } .at-site-footer{ background:var(--at-navy); color:rgba(255,255,255,0.78); padding:56px 20px 28px; } .at-site-footer__inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:32px; } .at-site-footer h4{ font-family:var(--at-font-display); color:#fff; font-size:14px; letter-spacing:2px; text-transform:uppercase; margin:0 0 14px; } .at-site-footer a{ color:rgba(255,255,255,0.82); text-decoration:none; display:block; padding:4px 0; font-size:14px; } .at-site-footer a:hover{color:var(--at-yellow);} .at-site-footer__bottom{ margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.10); font-size:13px; color:rgba(255,255,255,0.55); text-align:center; } @media (min-width:768px){ .at-site-footer__inner{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;} } /* ========================================================================== Single vehicle template ========================================================================== */ .at-single-vehicle{ max-width:880px; margin:0 auto; padding:56px 20px; } .at-single-vehicle h1{ font-family:var(--at-font-display); font-size:36px; color:var(--at-ink); margin:0 0 12px; } .at-single-vehicle__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; } .at-single-vehicle__meta .at-vcard__cat, .at-single-vehicle__meta .at-vcard__badge{display:inline-flex;} /* ========================================================================== Utility:keep Elementor sections from going full-bleed on mobile ========================================================================== */ @media (max-width:767px){ .elementor-section.elementor-section-boxed > .elementor-container{ padding-left:20px; padding-right:20px; } } /* ========================================================================== HERO SLIDES (.at-hero-slides) — premium type rhythm + cleaner button -------------------------------------------------------------------------- Forces the heading to break naturally rather than per-word,tightens the description,and gives the CTA a real button look (no red-on-red border). ========================================================================== */ .at-hero-slides .elementor-slide-heading{ max-width:920px; margin-left:auto !important; margin-right:auto !important; text-shadow:0 2px 30px rgba(0,0,0,0.35); } .at-hero-slides .elementor-slide-description{ max-width:640px; margin:14px auto 28px !important; color:rgba(255,255,255,0.92) !important; font-weight:400; text-shadow:0 1px 10px rgba(0,0,0,0.35); } .at-hero-slides .elementor-slide-button{ border:none !important; background:#B11A17 !important; color:#FFFFFF !important; box-shadow:0 8px 24px rgba(177,26,23,0.38); transition:transform 0.35s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease !important; } .at-hero-slides .elementor-slide-button:hover{ background:#FFFFFF !important; color:#B11A17 !important; transform:translateY(-3px) scale(1.03); box-shadow:0 14px 32px rgba(0,0,0,0.25); } /* Slider arrows + dots — soft white with red highlight */ .at-hero-slides .elementor-swiper-button, .at-hero-slides .elementor-swiper-button-prev, .at-hero-slides .elementor-swiper-button-next{ color:rgba(255,255,255,0.7) !important; transition:color 0.3s ease,transform 0.3s ease; } .at-hero-slides .elementor-swiper-button:hover{ color:#FFFFFF !important; transform:scale(1.15); } .at-hero-slides .swiper-pagination-bullet{ background:rgba(255,255,255,0.5) !important; width:10px !important; height:10px !important; transition:width 0.3s ease,background 0.3s ease; } .at-hero-slides .swiper-pagination-bullet-active{ background:#B11A17 !important; width:32px !important; border-radius:5px !important; } @media (max-width:767px){ .at-hero-slides .elementor-slide-heading{ line-height:1.15 !important; font-size:28px !important; letter-spacing:0 !important; padding:0 8px; } .at-hero-slides .elementor-slide-description{ font-size:14px !important; line-height:1.5 !important; padding:0 12px; } .at-hero-slides .elementor-slide-button{ padding:12px 22px !important; font-size:13px !important; } } /* Hero slide button — force a real "button" shape regardless of slide width */ .at-hero-slides .elementor-slide-button{ display:inline-block !important; width:auto !important; max-width:none !important; min-width:0 !important; white-space:nowrap !important; line-height:1.2 !important; } /* Arabic hero — slightly tighter heading + RTL alignment for the slide content */ body.at-lang-ar .at-hero-slides .elementor-slide-heading{ line-height:1.3 !important; } body.at-lang-ar .at-hero-slides .elementor-slide-description{ line-height:1.7 !important; } @media (max-width:767px){ body.at-lang-ar .at-hero-slides .elementor-slide-heading{ font-size:24px !important; } body.at-lang-ar .at-hero-slides .elementor-slide-description{ font-size:13px !important; } } /* ========================================================================== SCROLL REVEAL — IntersectionObserver-driven (.is-visible toggled by JS) -------------------------------------------------------------------------- Three flavors: .at-anim-up — fades in + slides up 40px .at-anim-zoom — fades in + scales 0.92 → 1 .at-anim-fade — opacity-only fade Add `.at-anim-delay-{1..6}` to stagger sibling cards in a grid. ========================================================================== */ .at-anim-up, .at-anim-zoom, .at-anim-fade{ opacity:0; will-change:opacity,transform; transition:opacity 0.85s cubic-bezier(0.21,0.6,0.3,1), transform 0.85s cubic-bezier(0.21,0.6,0.3,1); } .at-anim-up{transform:translateY(40px);} .at-anim-zoom{transform:scale(0.92);} /* fade is opacity only */ .at-anim-up.is-visible, .at-anim-zoom.is-visible, .at-anim-fade.is-visible{ opacity:1; transform:none; } .at-anim-delay-1.is-visible{transition-delay:0.10s;} .at-anim-delay-2.is-visible{transition-delay:0.20s;} .at-anim-delay-3.is-visible{transition-delay:0.30s;} .at-anim-delay-4.is-visible{transition-delay:0.40s;} .at-anim-delay-5.is-visible{transition-delay:0.50s;} .at-anim-delay-6.is-visible{transition-delay:0.60s;} @media (prefers-reduced-motion:reduce){ .at-anim-up, .at-anim-zoom, .at-anim-fade{ opacity:1; transform:none; transition:none; } } /* ========================================================================== SCROLL REVEAL (legacy,on-load) — kept for components that pre-existed ========================================================================== */ -------------------------------------------------------------------------- Lightweight:no IntersectionObserver JS required. Triggers on first paint and pairs with Elementor's per-widget "Entrance Animation" for sections that need them. Safe with prefers-reduced-motion. ========================================================================== */ .at-reveal{ opacity:0; transform:translateY(24px); animation:at-reveal-up 0.85s cubic-bezier(0.21,0.6,0.3,1) forwards; animation-delay:0.1s; } .at-reveal--delay-1{animation-delay:0.18s;} .at-reveal--delay-2{animation-delay:0.26s;} .at-reveal--delay-3{animation-delay:0.34s;} .at-reveal--delay-4{animation-delay:0.42s;} .at-reveal--delay-5{animation-delay:0.50s;} @keyframes at-reveal-up{ to{opacity:1;transform:translateY(0);} } @media (prefers-reduced-motion:reduce){ .at-reveal, .at-reveal--delay-1,.at-reveal--delay-2,.at-reveal--delay-3, .at-reveal--delay-4,.at-reveal--delay-5{ animation:none; opacity:1; transform:none; } } /* ========================================================================== ICON-BOX HARMONIZATION -------------------------------------------------------------------------- Elementor's per-page CSS sometimes generates inconsistent rules for stacked icon-boxes,leaving one card with a faded/tinted icon background while siblings render the full red. Lock the look down at the global level — solid red circle,white icon,dark navy title — for every icon-box that isn't part of the brand-chip system. ========================================================================== */ .elementor .elementor-widget-icon-box:not(.at-chip-widget):not(.at-chip-widget--icon) .elementor-view-stacked .elementor-icon{ background-color:#B11A17 !important; color:#FFFFFF !important; border-color:#B11A17 !important; } .elementor .elementor-widget-icon-box:not(.at-chip-widget):not(.at-chip-widget--icon) .elementor-view-stacked .elementor-icon i, .elementor .elementor-widget-icon-box:not(.at-chip-widget):not(.at-chip-widget--icon) .elementor-view-stacked .elementor-icon svg{ color:#FFFFFF !important; fill:#FFFFFF !important; } .elementor .elementor-widget-icon-box:not(.at-chip-widget):not(.at-chip-widget--icon) .elementor-icon-box-title{ color:#1B1E27 !important; } .elementor .elementor-widget-icon-box:not(.at-chip-widget):not(.at-chip-widget--icon) .elementor-icon-box-title a{ color:inherit !important; } /* ========================================================================== SECTOR CARDS (Past clients page) — premium sector header + brand chips -------------------------------------------------------------------------- Each sector is a column with a header (icon + title + count + sub) and a flex-wrap grid of brand chips below. Chips fade in with a stagger. ========================================================================== */ /* The column itself becomes the white card. Its widget-wrap flexes so the sector head sits on its own row and the brand chips flow inline below it. */ .at-sector-card .elementor-widget-wrap{ background:#FFFFFF; border:1px solid var(--at-line,#E6E7E7); border-radius:20px; padding:28px 32px 28px 32px !important; box-shadow:0 4px 16px rgba(27,30,39,0.04); transition:box-shadow 0.4s ease,transform 0.4s ease; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-content:flex-start; gap:10px; } .at-sector-card .elementor-widget-wrap:hover{ box-shadow:0 12px 36px rgba(27,30,39,0.08); transform:translateY(-2px); } /* Sector head widget takes a full row inside the flex column. */ .at-sector-card .at-sector-head-widget{ flex:0 0 100% !important; width:100% !important; margin-bottom:8px; padding-bottom:18px; border-bottom:1px solid #F2F1EB; } .at-sector-card .at-sector-head-widget .elementor-icon-box-icon{ margin:0 18px 0 0 !important; flex-shrink:0; } .at-sector-card .at-sector-head-widget .elementor-icon-box-icon .elementor-icon{ background:linear-gradient(135deg,#B11A17 0%,#7E1212 100%) !important; color:#FFFFFF !important; border-radius:14px !important; width:56px !important; height:56px !important; min-width:56px !important; min-height:56px !important; box-shadow:0 6px 16px rgba(177,26,23,0.25) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; font-size:22px; } .at-sector-card .at-sector-head-widget .elementor-icon-box-icon .elementor-icon svg, .at-sector-card .at-sector-head-widget .elementor-icon-box-icon .elementor-icon i{ color:#FFFFFF !important; fill:#FFFFFF !important; font-size:22px !important; } .at-sector-card .at-sector-head-widget .elementor-icon-box-wrapper{ display:flex !important; flex-direction:row !important; align-items:center !important; text-align:left !important; } .at-sector-card .at-sector-head-widget .elementor-icon-box-content{ text-align:left !important; } .at-sector-card .at-sector-head-widget .elementor-icon-box-title{ margin-bottom:6px !important; line-height:1.25 !important; } .at-sector-card .at-sector-head-widget .at-shw-count{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.5px; padding:4px 10px; background:#FFF6D6; color:#1B1E27; border-radius:999px; border:1px solid rgba(252,210,39,0.4); margin-right:4px; } /* ----- BRAND CHIP — image-box variant (logo present) ----- */ /* High-specificity overrides because Elementor's per-widget inline styles are aggressive and we need to defeat them. */ .elementor .at-chip-widget.elementor-widget, .elementor-element.at-chip-widget{ flex:0 0 auto !important; width:auto !important; max-width:none !important; margin:0 !important; align-self:flex-start; } .elementor .at-chip-widget > .elementor-widget-container{ width:auto !important; padding:0 !important; margin:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; } .elementor .at-chip-widget .elementor-image-box-wrapper, .elementor .at-chip-widget .elementor-icon-box-wrapper{ display:inline-flex !important; flex-direction:row !important; align-items:center !important; gap:12px !important; padding:8px 18px 8px 8px !important; background:#FAFAF7 !important; border:1px solid #E6E7E7 !important; border-radius:999px !important; transition:transform 0.35s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.35s cubic-bezier(0.21,0.6,0.3,1), border-color 0.35s ease, background 0.35s ease !important; cursor:default; margin:0 !important; overflow:visible !important; text-align:left !important; width:auto !important; } .elementor .at-chip-widget:hover .elementor-image-box-wrapper, .elementor .at-chip-widget:hover .elementor-icon-box-wrapper{ border-color:rgba(177,26,23,0.4) !important; background:#FFFFFF !important; transform:translateY(-3px); box-shadow:0 10px 24px rgba(177,26,23,0.12); } /* The logo bubble (image-box variant) */ .elementor .at-chip-widget .elementor-image-box-img{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; max-width:38px !important; max-height:38px !important; flex-shrink:0 !important; flex-grow:0 !important; margin:0 !important; padding:0 !important; border-radius:50% !important; background:#FFFFFF !important; border:1px solid #F0F0EB !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important; float:none !important; } .elementor .at-chip-widget .elementor-image-box-img img{ width:32px !important; height:32px !important; max-width:32px !important; max-height:32px !important; object-fit:contain !important; object-position:center !important; margin:0 !important; padding:0 !important; transition:transform 0.35s ease; } .elementor .at-chip-widget:hover .elementor-image-box-img img{ transform:scale(1.08); } /* The icon avatar (icon-box variant for chips with no logo) */ .elementor .at-chip-widget--icon .elementor-icon-box-icon{ margin:0 !important; flex-shrink:0; } .elementor .at-chip-widget--icon .elementor-icon-box-icon .elementor-icon{ width:38px !important; height:38px !important; background:linear-gradient(135deg,#FFF6D6,#FCD227) !important; color:#B11A17 !important; border-radius:50% !important; display:inline-flex !important; align-items:center; justify-content:center; font-size:14px; } /* Chip text */ .elementor .at-chip-widget .elementor-image-box-content, .elementor .at-chip-widget .elementor-icon-box-content{ text-align:left !important; padding:0 !important; flex:1 1 auto; } .elementor .at-chip-widget .elementor-image-box-title, .elementor .at-chip-widget .elementor-icon-box-title{ margin:0 !important; padding:0 !important; line-height:1.3 !important; white-space:nowrap !important; font-size:14px !important; font-weight:600 !important; color:#1B1E27 !important; font-family:Inter,sans-serif !important; } .elementor .at-chip-widget .elementor-image-box-description, .elementor .at-chip-widget .elementor-icon-box-description{ display:none !important; } @media (max-width:600px){ .at-sector-card .elementor-widget-wrap{padding:22px 18px !important;} .at-sector-card .at-sector-head-widget .elementor-icon-box-title{font-size:18px !important;} .elementor .at-chip-widget .elementor-image-box-wrapper, .elementor .at-chip-widget .elementor-icon-box-wrapper{padding:6px 14px 6px 6px !important;gap:10px !important;} .elementor .at-chip-widget .elementor-image-box-img, .elementor .at-chip-widget--icon .elementor-icon-box-icon .elementor-icon{ width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;max-width:32px !important;max-height:32px !important; } .elementor .at-chip-widget .elementor-image-box-img img{width:26px !important;height:26px !important;max-width:26px !important;max-height:26px !important;} .elementor .at-chip-widget .elementor-image-box-title, .elementor .at-chip-widget .elementor-icon-box-title{font-size:13px !important;} } .at-sector-head{ display:flex; gap:18px; align-items:flex-start; padding-bottom:18px; margin-bottom:4px; border-bottom:1px solid #F2F1EB; } .at-sector-head__icon{ flex:0 0 56px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(135deg,#B11A17 0%,#7E1212 100%); color:#FFFFFF; font-size:22px; box-shadow:0 6px 16px rgba(177,26,23,0.25); } .at-sector-head__eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#B11A17; margin-bottom:4px; } .at-sector-head__title{ font-family:Montserrat,sans-serif; font-weight:800; font-size:22px; line-height:1.25; color:#1B1E27; margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .at-sector-head__count{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.5px; padding:4px 10px; background:#FFF6D6; color:#1B1E27; border-radius:999px; border:1px solid rgba(252,210,39,0.4); } .at-sector-head__sub{ margin:6px 0 0 !important; font-size:13px; color:#5A5E68; line-height:1.55; } /* Brand chips — flex-wrap grid of pill-shaped chips with logo + name */ .at-brand-chips{ display:flex; flex-wrap:wrap; gap:10px; padding:0; } .at-brand-chip{ display:inline-flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; background:#FAFAF7; border:1px solid var(--at-line,#E6E7E7); border-radius:999px; transition:transform 0.35s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.35s cubic-bezier(0.21,0.6,0.3,1), border-color 0.35s ease, background 0.35s ease; cursor:default; opacity:0; transform:translateY(8px); animation:at-chip-fade-in 0.6s cubic-bezier(0.21,0.6,0.3,1) forwards; } .at-brand-chip:hover{ border-color:rgba(177,26,23,0.4); background:#FFFFFF; transform:translateY(-3px); box-shadow:0 10px 24px rgba(177,26,23,0.12); } .at-brand-chip img{ width:38px !important; height:38px !important; object-fit:contain; border-radius:50%; background:#FFFFFF; padding:4px; border:1px solid #F0F0EB; flex-shrink:0; transition:transform 0.35s ease; } .at-brand-chip:hover img{ transform:scale(1.08); } .at-brand-chip__name{ font-family:Inter,sans-serif; font-weight:600; font-size:14px; color:#1B1E27; line-height:1.3; white-space:nowrap; } @keyframes at-chip-fade-in{ to{opacity:1;transform:translateY(0);} } @media (max-width:600px){ .at-sector-head__icon{flex:0 0 44px;width:44px;height:44px;font-size:18px;} .at-sector-head__title{font-size:18px;} .at-brand-chip{padding:6px 14px 6px 6px;gap:10px;} .at-brand-chip img{width:32px !important;height:32px !important;} .at-brand-chip__name{font-size:13px;} .at-sector-card .elementor-widget-wrap{padding:22px 18px !important;} } /* ========================================================================== ACTIVE-CLIENTS GRID (native widgets,.at-acc-grid-column wrapper) -------------------------------------------------------------------------- The 14 active client cards are now real Elementor image-box / icon-box widgets — same look as the previous HTML grid but fully editable in Elementor. The parent column's widget-wrap becomes a 4-col CSS grid. ========================================================================== */ .at-acc-grid-column .elementor-widget-wrap{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; } /* Each card widget */ .at-acc-card-widget.elementor-widget{ width:auto; max-width:none; margin:0 !important; background:#FFFFFF; border:1px solid var(--at-line,#E6E7E7); border-radius:16px; padding:26px 18px 22px; box-shadow:0 4px 12px rgba(27,30,39,0.04); transition:transform 0.4s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.4s cubic-bezier(0.21,0.6,0.3,1), border-color 0.35s ease; display:flex; flex-direction:column; align-items:center; text-align:center; } .at-acc-card-widget:hover{ transform:translateY(-6px); border-color:rgba(177,26,23,0.35) !important; box-shadow:0 18px 40px rgba(27,30,39,0.10) !important; } .at-acc-card-widget .elementor-widget-container{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; padding:0 !important; } /* Image-box variant — circular logo bubble */ .at-acc-card-widget .elementor-image-box-wrapper{ display:flex !important; flex-direction:column; align-items:center; text-align:center; margin:0 !important; padding:0 !important; width:100%; } .at-acc-card-widget .elementor-image-box-img{ width:86px !important; height:86px !important; border-radius:50%; background:linear-gradient(135deg,#FFFFFF 0%,#FFF6D6 100%); border:1px solid rgba(0,0,0,0.06); display:flex !important; align-items:center; justify-content:center; margin:0 0 16px 0 !important; overflow:hidden; transition:transform 0.4s cubic-bezier(0.21,0.6,0.3,1); flex-shrink:0; } .at-acc-card-widget:hover .elementor-image-box-img{ transform:scale(1.08) rotate(-3deg); } .at-acc-card-widget .elementor-image-box-img img{ max-width:65% !important; max-height:65% !important; width:auto !important; height:auto !important; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.08)); } .at-acc-card-widget .elementor-image-box-content{ width:100%; padding:0 !important; text-align:center !important; } .at-acc-card-widget .elementor-image-box-title{ margin:0 0 8px 0 !important; line-height:1.3 !important; color:#1B1E27 !important; } .at-acc-card-widget .elementor-image-box-description{ display:inline-block; background:rgba(177,26,23,0.08); padding:4px 10px; border-radius:999px; margin:0 !important; line-height:1.3 !important; } /* Icon-box variant (no logo) — same circular bubble with red icon inside */ .at-acc-card-widget--icon .elementor-icon-box-wrapper{ display:flex; flex-direction:column; align-items:center; text-align:center; } .at-acc-card-widget--icon .elementor-icon-box-icon{ margin:0 0 16px 0 !important; } .at-acc-card-widget--icon .elementor-icon-box-icon .elementor-icon{ width:86px !important; height:86px !important; background:linear-gradient(135deg,#FFFFFF 0%,#FFF6D6 100%) !important; border:1px solid rgba(0,0,0,0.06) !important; color:#B11A17 !important; transition:transform 0.4s cubic-bezier(0.21,0.6,0.3,1); } .at-acc-card-widget--icon:hover .elementor-icon-box-icon .elementor-icon{ transform:scale(1.08) rotate(-3deg); } .at-acc-card-widget--icon .elementor-icon-box-content{ text-align:center; } .at-acc-card-widget--icon .elementor-icon-box-title{ margin:0 0 8px 0 !important; line-height:1.3 !important; } .at-acc-card-widget--icon .elementor-icon-box-description{ display:inline-block; background:rgba(177,26,23,0.08); padding:4px 10px; border-radius:999px; line-height:1.3 !important; } @media (max-width:1100px){ .at-acc-grid-column .elementor-widget-wrap{grid-template-columns:repeat(3,1fr);} } @media (max-width:768px){ .at-acc-grid-column .elementor-widget-wrap{grid-template-columns:repeat(2,1fr);gap:12px;} .at-acc-card-widget.elementor-widget{padding:20px 12px 18px;} .at-acc-card-widget .elementor-image-box-img, .at-acc-card-widget--icon .elementor-icon-box-icon .elementor-icon{width:70px !important;height:70px !important;margin-bottom:12px !important;} } @media (max-width:420px){ .at-acc-grid-column .elementor-widget-wrap{grid-template-columns:1fr;} } /* ========================================================================== LEGACY ACTIVE-CLIENTS GRID (.at-acc-grid via html widget) — kept for any older Elementor JSON still referencing it. New pages use native widgets. ========================================================================== */ .at-acc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%; } .at-acc-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#FFFFFF; border:1px solid var(--at-line,#E6E7E7); border-radius:16px; padding:26px 18px 22px; box-shadow:0 4px 12px rgba(27,30,39,0.04); opacity:0; transform:translateY(20px); animation:at-acc-fadein 0.7s cubic-bezier(0.21,0.6,0.3,1) forwards; transition:transform 0.4s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.4s cubic-bezier(0.21,0.6,0.3,1), border-color 0.35s ease; } .at-acc-card:hover{ transform:translateY(-6px); border-color:rgba(177,26,23,0.35); box-shadow:0 18px 40px rgba(27,30,39,0.10); } .at-acc-card__logo{ width:86px; height:86px; border-radius:50%; background:linear-gradient(135deg,#FFFFFF 0%,#FFF6D6 100%); border:1px solid rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:center; margin-bottom:16px; overflow:hidden; transition:transform 0.4s cubic-bezier(0.21,0.6,0.3,1); flex-shrink:0; } .at-acc-card:hover .at-acc-card__logo{ transform:scale(1.08) rotate(-3deg); } .at-acc-card__logo img{ max-width:65%; max-height:65%; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.08)); } .at-acc-card__placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#B11A17; font-size:30px; } .at-acc-card__body{ width:100%; } .at-acc-card__name{ font-family:Montserrat,sans-serif; font-weight:700; font-size:15px; color:#1B1E27; margin:0 0 8px 0 !important; line-height:1.3; letter-spacing:-0.2px; } .at-acc-card__location{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#B11A17; background:rgba(177,26,23,0.08); padding:4px 10px; border-radius:999px; } @keyframes at-acc-fadein{ to{opacity:1;transform:translateY(0);} } @media (max-width:1100px){ .at-acc-grid{grid-template-columns:repeat(3,1fr);} } @media (max-width:768px){ .at-acc-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .at-acc-card{padding:20px 12px 18px;} .at-acc-card__logo{width:70px;height:70px;margin-bottom:12px;} .at-acc-card__name{font-size:13px;} .at-acc-card__location{font-size:10px;padding:3px 8px;} } @media (max-width:420px){ .at-acc-grid{grid-template-columns:1fr;} } @media (prefers-reduced-motion:reduce){ .at-acc-card{animation:none;opacity:1;transform:none;} .at-acc-card:hover{transform:none;} .at-acc-card:hover .at-acc-card__logo{transform:none;} } /* ========================================================================== ACTIVE-CLIENT CARDS (.at-active-client-card) -------------------------------------------------------------------------- Image-box variant for the "Currently moving with us" section. Logo sits in a soft cream gradient at the top,content below with eyebrow location, title,and one-line description. Hover lifts and rotates the logo slightly. ========================================================================== */ .at-active-client-card.elementor-widget{ height:100%; display:flex !important; flex-direction:column; } .at-active-client-card .elementor-widget-container{ height:100%; flex:1 1 auto; display:flex !important; flex-direction:column; } .at-active-client-card .elementor-image-box-wrapper{ display:flex !important; flex-direction:column; flex:1 1 auto; overflow:hidden; border-radius:16px; margin:0 !important; width:100%; transition:transform 0.4s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.4s cubic-bezier(0.21,0.6,0.3,1); } .at-active-client-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(27,30,39,0.12) !important; border-color:rgba(177,26,23,0.3) !important; } /* Logo area — soft cream gradient with subtle red glow on hover */ .at-active-client-card .elementor-image-box-img{ background:linear-gradient(135deg,#FFFFFF 0%,#FFF6D6 100%); aspect-ratio:16 / 10; display:flex !important; align-items:center; justify-content:center; border-radius:16px 16px 0 0; border-bottom:1px solid rgba(27,30,39,0.06); margin:0 !important; width:100% !important; position:relative; overflow:hidden; } .at-active-client-card .elementor-image-box-img::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(177,26,23,0.08),transparent 60%); opacity:0; transition:opacity 0.4s ease; pointer-events:none; } .at-active-client-card:hover .elementor-image-box-img::before{ opacity:1; } .at-active-client-card .elementor-image-box-img img{ max-width:60% !important; max-height:70% !important; width:auto !important; height:auto !important; object-fit:contain !important; transition:transform 0.5s cubic-bezier(0.21,0.6,0.3,1); filter:drop-shadow(0 4px 12px rgba(27,30,39,0.08)); } .at-active-client-card:hover .elementor-image-box-img img{ transform:scale(1.1) rotate(-2deg); } /* Icon variant (when no logo is available) */ .at-active-client-card--icon .elementor-icon-box-icon{ margin-bottom:18px !important; } .at-active-client-card--icon .elementor-icon-box-icon .elementor-icon{ width:80px; height:80px; transition:transform 0.5s cubic-bezier(0.21,0.6,0.3,1); } .at-active-client-card--icon:hover .elementor-icon-box-icon .elementor-icon{ transform:scale(1.08) rotate(-3deg); } /* Content area */ .at-active-client-card .elementor-image-box-content, .at-active-client-card--icon .elementor-icon-box-content{ padding:22px 24px 24px 24px !important; flex:1 1 auto; display:flex; flex-direction:column; text-align:left !important; } .at-active-client-card .elementor-image-box-title, .at-active-client-card--icon .elementor-icon-box-title{ margin:0 0 4px 0 !important; line-height:1.25 !important; color:#1B1E27 !important; } .at-acc-loc{ display:block !important; font-size:11px !important; font-weight:700 !important; letter-spacing:1px !important; text-transform:uppercase !important; color:#B11A17 !important; margin:0 0 10px 0 !important; } .at-acc-desc{ display:block; color:#5A5E68; font-size:14px; line-height:1.65; } /* ========================================================================== VEHICLE SHOWCASE CARD (.at-vehicle-card) -------------------------------------------------------------------------- Premium animated card with photo on top,name + capacity badge + feature pills + description below. Hover:photo scales up,card lifts,border blooms red. The Elementor image-box widget already provides the layout — we just style its anatomy. ========================================================================== */ .at-vehicle-card{ transition:transform 0.45s cubic-bezier(0.21,0.6,0.3,1), box-shadow 0.45s cubic-bezier(0.21,0.6,0.3,1), border-color 0.35s ease !important; overflow:hidden; position:relative; } .at-vehicle-card:hover{ transform:translateY(-10px); box-shadow:0 24px 56px rgba(27,30,39,0.14) !important; border-color:rgba(177,26,23,0.35) !important; } /* Make every card in a row stretch to the tallest card's height — turn the widget container + image-box wrapper into a vertical flex column so the image is fixed-aspect at the top and the content area grows to fill. */ .at-vehicle-card.elementor-widget{ height:100%; display:flex !important; flex-direction:column; } .at-vehicle-card .elementor-widget-container{ height:100%; flex:1 1 auto; display:flex !important; flex-direction:column; } .at-vehicle-card .elementor-image-box-wrapper{ display:flex !important; flex-direction:column; flex:1 1 auto; overflow:hidden; border-radius:16px; margin:0 !important; padding:0 !important; width:100%; } /* Photo area — pure white (matches the photo's white background so the vehicle floats cleanly) with a soft brand-colored separator stripe at the bottom that bridges into the card's content area. */ .at-vehicle-card .elementor-image-box-img{ overflow:hidden; background:#FFFFFF; border-radius:16px 16px 0 0; margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important; aspect-ratio:4 / 3; display:flex !important; align-items:center; justify-content:center; position:relative; float:none !important; border-bottom:1px solid rgba(27,30,39,0.06); } /* Soft drop-shadow under the vehicle — gives the photo a premium "lifted" feel */ .at-vehicle-card .elementor-image-box-img::after{ content:""; position:absolute; left:14%; right:14%; bottom:12%; height:18px; background:radial-gradient(ellipse at center, rgba(27,30,39,0.18) 0%, rgba(27,30,39,0) 75%); filter:blur(3px); z-index:0; pointer-events:none; } .at-vehicle-card .elementor-image-box-img img{ transition:transform 0.7s cubic-bezier(0.21,0.6,0.3,1); width:auto !important; height:auto !important; max-width:92% !important; max-height:90% !important; object-fit:contain; object-position:center; position:relative; z-index:1; display:block; } .at-vehicle-card:hover .elementor-image-box-img img{ transform:scale(1.08) translateY(-2px); } /* Content area — generous padding all around,AND grows to fill leftover vertical space so all sibling cards in a row reach the same bottom edge. */ .at-vehicle-card .elementor-image-box-content{ padding:26px 28px 0px 28px !important; width:100% !important; box-sizing:border-box; flex:1 1 auto; display:flex; flex-direction:column; } .at-vehicle-card .elementor-image-box-title{ margin:0 0 14px 0 !important; padding:0 !important; line-height:1.25 !important; } .at-vehicle-card .elementor-image-box-description{ padding:0 !important; margin:0 !important; } /* Capacity badge + feature pills */ .at-vehicle-card .at-vmeta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; align-items:center; } .at-vehicle-card .at-vpax{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#B11A17 0%,#7E1212 100%); color:#fff; font-weight:700; font-size:12px; padding:5px 12px; border-radius:999px; letter-spacing:0.4px; text-transform:uppercase; box-shadow:0 2px 6px rgba(177,26,23,0.25); } .at-vehicle-card .at-vpax i{ font-size:11px; opacity:0.9; } .at-vehicle-card .at-vfeature{ display:inline-flex; align-items:center; background:#FFF6D6; color:#1B1E27; font-weight:700; font-size:11px; padding:5px 11px; border-radius:999px; letter-spacing:0.5px; text-transform:uppercase; border:1px solid rgba(252,210,39,0.4); } .at-vehicle-card .elementor-image-box-description p{ margin:0 !important; } /* Subtle accent stripe that appears on hover (premium feel) */ .at-vehicle-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#B11A17 0%,#FCD227 100%); transform:scaleX(0); transform-origin:left center; transition:transform 0.5s cubic-bezier(0.21,0.6,0.3,1); z-index:2; } .at-vehicle-card:hover::before{ transform:scaleX(1); } @media (max-width:767px){ .at-vehicle-card .elementor-image-box-img{aspect-ratio:16 / 11;} .at-vehicle-card .elementor-image-box-title{font-size:19px !important;} } @media (prefers-reduced-motion:reduce){ .at-vehicle-card, .at-vehicle-card .elementor-image-box-img img, .at-vehicle-card::before{ transition:none !important; } .at-vehicle-card:hover{transform:none;} .at-vehicle-card:hover .elementor-image-box-img img{transform:none;} } /* ========================================================================== Pro Image Carousel — partner logos -------------------------------------------------------------------------- The carousel widget's slick slides crop tall images;force contain-mode and a fixed display height so big logos shrink and small ones don't blow up. ========================================================================== */ .at-partner-carousel .elementor-image-carousel-wrapper .swiper-slide, .at-partner-carousel .elementor-image-carousel-wrapper .slick-slide, .at-partner-carousel .elementor-image-carousel .swiper-slide, .at-partner-carousel .elementor-image-carousel .slick-slide{ display:flex !important; align-items:center; justify-content:center; height:110px; } .at-partner-carousel .elementor-image-carousel-wrapper img, .at-partner-carousel .elementor-image-carousel img, .at-partner-carousel .swiper-slide img, .at-partner-carousel .slick-slide img{ max-height:90px !important; max-width:200px !important; width:auto !important; height:auto !important; object-fit:contain !important; margin:0 auto; filter:grayscale(100%) opacity(0.75); transition:filter .35s ease; } .at-partner-carousel .swiper-slide:hover img, .at-partner-carousel .slick-slide:hover img{ filter:grayscale(0%) opacity(1); } @media (max-width:767px){ .at-partner-carousel .swiper-slide, .at-partner-carousel .slick-slide{height:70px;} .at-partner-carousel .swiper-slide img, .at-partner-carousel .slick-slide img{max-height:56px !important;max-width:140px !important;} } /* ========================================================================== Partners — animated marquee strip -------------------------------------------------------------------------- Two identical <ul> tracks scroll right-to-left,looped seamlessly with a 50% transform. Pauses on hover and respects prefers-reduced-motion. ========================================================================== */ .at-partners{ position:relative; width:100%; overflow:hidden; --at-partner-h:90px; --at-partner-w:200px; --at-partner-gap:48px; --at-marquee-duration:60s; /* Soft fade at left/right edges so logos don't pop in/out hard. */ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%); } .at-partners__viewport{ display:flex; width:max-content; will-change:transform; animation:at-marquee var(--at-marquee-duration) linear infinite; } .at-partners:hover .at-partners__viewport, .at-partners:focus-within .at-partners__viewport{animation-play-state:paused;} .at-partners__track{ display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:var(--at-partner-gap); padding-inline-end:var(--at-partner-gap); } .at-partner{ flex:0 0 var(--at-partner-w); height:var(--at-partner-h); display:flex; align-items:center; justify-content:center; position:relative; filter:grayscale(100%) opacity(0.7); transition:filter .35s ease,transform .35s ease; cursor:default; } .at-partner:hover{ filter:grayscale(0%) opacity(1); transform:translateY(-3px); } .at-partner img{ max-height:100%; max-width:100%; width:auto; height:auto; display:block; object-fit:contain; } .at-partner__name{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:500; color:var(--at-body,#5A5E68); white-space:nowrap; opacity:0; transition:opacity .25s ease; pointer-events:none; } .at-partner:hover .at-partner__name{opacity:1;} @keyframes at-marquee{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} } /* RTL — flip animation direction so it reads naturally. */ body.is-rtl .at-partners__viewport, body.at-lang-ar .at-partners__viewport{ animation-direction:reverse; } @media (prefers-reduced-motion:reduce){ .at-partners__viewport{animation:none;} .at-partners{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; scroll-snap-type:x mandatory; } .at-partner{scroll-snap-align:start;} } @media (max-width:767px){ .at-partners{ --at-partner-h:64px; --at-partner-w:140px; --at-partner-gap:32px; --at-marquee-duration:45s; } .at-partner__name{font-size:10px;bottom:-18px;} } /* ========================================================================== Partners — full grid on Clients page -------------------------------------------------------------------------- 21 tiles,fade-up on enter (staggered via inline animation-delay). Hover lifts + saturates the logo. ========================================================================== */ .at-partners-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; width:100%; } .at-partner-tile{ background:#fff; border:1px solid var(--at-line,#E6E7E7); border-radius:12px; padding:22px 16px 18px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; min-height:168px; box-shadow:0 1px 2px rgba(27,30,39,0.04); opacity:0; transform:translateY(14px); animation:at-tile-fade-in .55s cubic-bezier(.21,.6,.3,1) forwards; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; } .at-partner-tile:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(27,30,39,0.10); border-color:rgba(177,26,23,0.25); } .at-partner-tile__logo{ flex:1 0 auto; width:100%; height:86px; display:flex; align-items:center; justify-content:center; filter:grayscale(60%) opacity(0.85); transition:filter .35s ease; } .at-partner-tile:hover .at-partner-tile__logo{filter:grayscale(0%) opacity(1);} .at-partner-tile__logo img{ max-width:100%; max-height:100%; object-fit:contain; } .at-partner-tile__name{ font-size:13px; font-weight:600; color:var(--at-ink,#1B1E27); text-align:center; line-height:1.35; min-height:36px; display:flex; align-items:center; justify-content:center; } @keyframes at-tile-fade-in{ to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .at-partner-tile{ opacity:1; transform:none; animation:none; } } @media (max-width:600px){ .at-partners-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .at-partner-tile{ padding:16px 10px 12px; min-height:140px; } .at-partner-tile__logo{height:64px;} .at-partner-tile__name{font-size:11px;min-height:30px;} }