/* ========================================================== KENANTA FINAL PREMIUM UI ========================================================== */ :root { --k-dark:#041a3b; --k-dark2:#072f6d; --k-blue:#2492ef; --k-light:#68c4ff; --k-white:#ffffff; } /* ========================================================== UNIVERSAL HERO ========================================================== */ .kenanta-unified-hero, .hero, .pagehero, .services-hero { position:relative !important; width:100% !important; height:600px !important; min-height:600px !important; max-height:600px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; display:flex !important; align-items:center !important; isolation:isolate !important; background:#06275c !important; } /* actual banner image */ .kenanta-unified-hero::before, .hero::before, .pagehero::before, .services-hero::before { content:"" !important; position:absolute !important; inset:0 !important; z-index:-3 !important; opacity:1 !important; background-image: var(--kenanta-hero-image) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; transform: scale(1.015) !important; filter:none !important; } /* professional left dark overlay */ .kenanta-unified-hero::after, .hero::after, .pagehero::after, .services-hero::after { content:"" !important; position:absolute !important; inset:0 !important; z-index:-2 !important; background: linear-gradient( 90deg, rgba(2,20,54,.97) 0%, rgba(3,30,70,.92) 27%, rgba(5,47,103,.69) 48%, rgba(5,47,103,.24) 70%, rgba(3,25,55,.08) 100% ) !important; } /* remove old home globe */ .hero .globe, .hero .kenanta-half-globe { display:none !important; } /* remove old hero layout limitations */ .hero-grid, .pagehero > .wrap, .services-hero > .wrap { width:100% !important; max-width:none !important; min-height:0 !important; height:auto !important; padding:0 !important; margin:0 !important; display:block !important; } /* ========================================================== HERO CONTENT ========================================================== */ .kenanta-hero-container { width:min(1180px, calc(100% - 80px)); margin:0 auto; position:relative; z-index:5; } .kenanta-hero-copy-final { width:min(600px, 54%); color:#fff; } .kenanta-hero-eyebrow { display:inline-block; margin:0 0 17px; color:#67c6ff; font-size:13px; line-height:1.3; font-weight:800; letter-spacing:2px; text-transform:uppercase; } .kenanta-hero-title { margin:0 0 22px !important; padding:0 !important; max-width:620px; color:#fff !important; font-size:62px !important; line-height:1.02 !important; letter-spacing:-2.3px; font-weight:800 !important; text-shadow: 0 5px 20px rgba(0,0,0,.20); } .kenanta-hero-title .blue { color:#65bdff; } .kenanta-hero-description { max-width:555px; margin:0 0 30px !important; color:rgba(255,255,255,.87) !important; font-size:17px !important; line-height:1.72 !important; font-weight:400; } .kenanta-hero-actions { display:flex; align-items:center; gap:13px; flex-wrap:wrap; } .kenanta-hero-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 27px; border-radius:999px; font-size:14px; font-weight:700; text-decoration:none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .kenanta-hero-btn-primary { color:#fff !important; background: linear-gradient( 135deg, #198be7, #3aa7ff ); box-shadow: 0 10px 28px rgba(21,132,227,.28); } .kenanta-hero-btn-secondary { color:#fff !important; border: 1px solid rgba(255,255,255,.55); background: rgba(2,21,50,.16); backdrop-filter: blur(5px); } .kenanta-hero-btn:hover { transform: translateY(-3px); } /* ========================================================== HERO LOAD ANIMATION ========================================================== */ .kenanta-hero-copy-final { animation: kenantaFinalHeroIn .85s cubic-bezier(.2,.75,.2,1) both; } @keyframes kenantaFinalHeroIn { from { opacity:0; transform: translate3d( -35px, 18px, 0 ); } to { opacity:1; transform: translate3d( 0, 0, 0 ); } } /* subtle image animation */ .kenanta-unified-hero::before { animation: kenantaFinalBannerImage 1.5s ease both; } @keyframes kenantaFinalBannerImage { from { transform: scale(1.07); filter: brightness(.82); } to { transform: scale(1.015); filter: brightness(1); } } /* ========================================================== SCROLL REVEALS ONLY WHEN USER SCROLLS INTO SECTION ========================================================== */ .k-scroll-reveal { opacity:0; transform: translate3d( 0, 46px, 0 ); transition: opacity .7s ease var(--k-delay,0ms), transform .85s cubic-bezier(.2,.75,.2,1) var(--k-delay,0ms); } .k-scroll-reveal.k-visible { opacity:1; transform: translate3d( 0, 0, 0 ); } /* left */ .k-scroll-left { opacity:0; transform: translate3d( -60px, 0, 0 ); transition: opacity .7s ease, transform .85s cubic-bezier(.2,.75,.2,1); } .k-scroll-left.k-visible { opacity:1; transform:none; } /* right */ .k-scroll-right { opacity:0; transform: translate3d( 60px, 0, 0 ); transition: opacity .7s ease, transform .85s cubic-bezier(.2,.75,.2,1); } .k-scroll-right.k-visible { opacity:1; transform:none; } /* ========================================================== PREMIUM CARD FLIP ========================================================== */ .k-card-flip { opacity:0; transform: perspective(1200px) rotateY(28deg) translateY(35px); transform-origin:center; backface-visibility:hidden; transition: opacity .7s ease var(--k-delay,0ms), transform .9s cubic-bezier(.18,.78,.22,1) var(--k-delay,0ms); } .k-card-flip.k-visible { opacity:1; transform: perspective(1200px) rotateY(0) translateY(0); } .cards article, .service-feature { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } .cards article:hover, .service-feature:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 50px rgba(7,39,92,.14) !important; } /* ========================================================== WHATSAPP SAME ON EVERY PAGE ========================================================== */ a.kenanta-whatsapp { position:fixed !important; right:24px !important; bottom:22px !important; left:auto !important; top:auto !important; z-index:999999 !important; width:auto !important; min-width:220px !important; max-width:none !important; height:52px !important; min-height:52px !important; max-height:52px !important; padding: 0 20px 0 14px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; border-radius: 999px !important; background: #24d26f !important; color: #fff !important; border: 0 !important; overflow: visible !important; white-space: nowrap !important; text-decoration: none !important; box-shadow: 0 10px 30px rgba(0,0,0,.20) !important; } a.kenanta-whatsapp svg { width:26px !important; height:26px !important; min-width:26px !important; min-height:26px !important; max-width:26px !important; max-height:26px !important; flex: 0 0 26px !important; } a.kenanta-whatsapp .kenanta-wa-label { display:inline-block !important; width:auto !important; color:#fff !important; font-size:16px !important; line-height:1 !important; font-weight:700 !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width:1024px) { .kenanta-unified-hero, .hero, .pagehero, .services-hero { height:520px !important; min-height:520px !important; max-height:520px !important; } .kenanta-hero-container { width: calc(100% - 50px); } .kenanta-hero-copy-final { width:62%; } .kenanta-hero-title { font-size: 49px !important; letter-spacing: -1.8px; } .kenanta-hero-description { font-size: 16px !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:767px) { .kenanta-unified-hero, .hero, .pagehero, .services-hero { height:470px !important; min-height:470px !important; max-height:470px !important; } .kenanta-unified-hero::before, .hero::before, .pagehero::before, .services-hero::before { background-position: 64% center !important; } .kenanta-unified-hero::after, .hero::after, .pagehero::after, .services-hero::after { background: linear-gradient( 90deg, rgba(1,17,46,.94) 0%, rgba(2,31,73,.84) 62%, rgba(2,31,73,.40) 100% ) !important; } .kenanta-hero-container { width: calc(100% - 38px); } .kenanta-hero-copy-final { width: 88%; } .kenanta-hero-eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: 1.5px; } .kenanta-hero-title { margin-bottom: 16px !important; font-size: 39px !important; line-height: 1.02 !important; letter-spacing: -1.3px; } .kenanta-hero-description { margin-bottom: 22px !important; font-size: 14px !important; line-height: 1.55 !important; } .kenanta-hero-btn { min-height: 44px; padding: 0 18px; font-size: 12px; } a.kenanta-whatsapp { right: 12px !important; bottom: 12px !important; min-width: 176px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 13px 0 11px !important; } a.kenanta-whatsapp .kenanta-wa-label { font-size: 13px !important; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce) { .kenanta-hero-copy-final, .k-scroll-reveal, .k-scroll-left, .k-scroll-right, .k-card-flip { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; } } /* ========================================================== KENANTA HOME HERO FINAL OVERRIDE ========================================================== */ body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { position: relative !important; width: 100% !important; height: 600px !important; min-height: 600px !important; max-height: 600px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; isolation: isolate !important; background: #06275c !important; } /* REAL HOME IMAGE */ body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; z-index: -3 !important; background-image: url('banner-home.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; } /* LEFT DARK GRADIENT */ body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -2 !important; background: linear-gradient( 90deg, rgba(1,18,48,.97) 0%, rgba(3,31,72,.88) 28%, rgba(3,41,91,.60) 48%, rgba(4,46,98,.20) 68%, rgba(0,0,0,.02) 100% ) !important; } /* REMOVE OLD GLOBE COMPLETELY */ body.kenanta-page-home .hero .globe, body.kenanta-page-home .hero .kenanta-half-globe, body.kenanta-page-home .hero .kenanta-hero-globe { display: none !important; } /* HOME CONTENT ALIGNMENT */ body.kenanta-page-home .kenanta-hero-container { width: min(1180px, calc(100% - 80px)) !important; margin: 0 auto !important; padding: 0 !important; } body.kenanta-page-home .kenanta-hero-copy-final { width: 570px !important; max-width: 52% !important; margin: 0 !important; } /* ========================================================== WHATSAPP FINAL SHAPE ========================================================== */ a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { position: fixed !important; right: 24px !important; bottom: 24px !important; left: auto !important; top: auto !important; z-index: 999999 !important; width: auto !important; min-width: 220px !important; max-width: none !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding: 0 20px 0 14px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border: 0 !important; border-radius: 26px !important; background: #25D366 !important; color: #fff !important; overflow: hidden !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; transform: none !important; } a.kenanta-whatsapp:hover { transform: translateY(-3px) !important; background: #20c861 !important; box-shadow: 0 12px 30px rgba(0,0,0,.24) !important; } a.kenanta-whatsapp svg { display: block !important; width: 26px !important; height: 26px !important; min-width: 26px !important; max-width: 26px !important; min-height: 26px !important; max-height: 26px !important; flex: 0 0 26px !important; } a.kenanta-whatsapp .kenanta-wa-label { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } /* TABLET */ @media (max-width:1024px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { height: 520px !important; min-height: 520px !important; max-height: 520px !important; } } /* MOBILE */ @media (max-width:767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { height: 470px !important; min-height: 470px !important; max-height: 470px !important; } body.kenanta-page-home .hero::before { background-position: 64% center !important; } body.kenanta-page-home .kenanta-hero-container { width: calc(100% - 36px) !important; } body.kenanta-page-home .kenanta-hero-copy-final { width: 92% !important; max-width: 92% !important; } a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { right: 12px !important; bottom: 12px !important; min-width: 182px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 14px 0 11px !important; border-radius: 23px !important; } a.kenanta-whatsapp .kenanta-wa-label { font-size: 13px !important; } } /* ========================================================== KENANTA WHATSAPP BUTTON - BOX STYLE WITH 30PX RADIUS ========================================================== */ a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { position: fixed !important; right: 24px !important; bottom: 24px !important; left: auto !important; top: auto !important; z-index: 999999 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; min-width: 250px !important; height: 56px !important; padding: 0 20px 0 16px !important; background: #25D366 !important; color: #ffffff !important; text-decoration: none !important; border: 0 !important; border-radius: 30px !important; box-shadow: 0 10px 28px rgba(0,0,0,.20) !important; white-space: nowrap !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important; } a.kenanta-whatsapp:hover, a.kenanta-whatsapp.kenanta-whatsapp-pill:hover, a.kenanta-whatsapp.kenanta-wa-modern:hover { background: #1fbe5a !important; transform: translateY(-3px) !important; box-shadow: 0 14px 34px rgba(0,0,0,.24) !important; } a.kenanta-whatsapp svg, a.kenanta-whatsapp img { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; flex: 0 0 24px !important; display: block !important; margin: 0 !important; } a.kenanta-whatsapp .kenanta-wa-label, a.kenanta-whatsapp span { color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } /* Mobile */ @media (max-width: 767px) { a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { right: 14px !important; bottom: 14px !important; min-width: 215px !important; height: 50px !important; padding: 0 16px 0 13px !important; border-radius: 30px !important; } a.kenanta-whatsapp .kenanta-wa-label, a.kenanta-whatsapp span { font-size: 14px !important; } a.kenanta-whatsapp svg, a.kenanta-whatsapp img { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; } } /* ===== WHATSAPP BUTTON - EXACT PILL SHAPE ===== */ a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { position: fixed !important; right: 24px !important; bottom: 24px !important; left: auto !important; top: auto !important; z-index: 999999 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; height: 54px !important; min-height: 54px !important; padding: 0 24px 0 18px !important; min-width: 290px !important; background: #25D366 !important; color: #ffffff !important; text-decoration: none !important; border: none !important; border-radius: 999px !important; white-space: nowrap !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: 0 8px 18px rgba(0,0,0,.16) !important; transition: all .22s ease !important; } a.kenanta-whatsapp:hover, a.kenanta-whatsapp.kenanta-whatsapp-pill:hover, a.kenanta-whatsapp.kenanta-wa-modern:hover { background: #20c55a !important; transform: translateY(-2px) !important; box-shadow: 0 12px 24px rgba(0,0,0,.20) !important; } a.kenanta-whatsapp svg, a.kenanta-whatsapp img { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; display: block !important; margin: 0 !important; } a.kenanta-whatsapp .kenanta-wa-label, a.kenanta-whatsapp span { font-size: 16px !important; font-weight: 500 !important; line-height: 1 !important; color: #ffffff !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* mobile */ @media (max-width: 767px) { a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { right: 14px !important; bottom: 14px !important; min-width: 250px !important; height: 50px !important; min-height: 50px !important; padding: 0 18px 0 14px !important; border-radius: 999px !important; } a.kenanta-whatsapp svg, a.kenanta-whatsapp img { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } a.kenanta-whatsapp .kenanta-wa-label, a.kenanta-whatsapp span { font-size: 14px !important; } } /* ========================================================== WHATSAPP FINAL COMPACT ROUNDED RECTANGLE ========================================================== */ a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { position: fixed !important; right: 24px !important; bottom: 24px !important; left: auto !important; top: auto !important; z-index: 999999 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; padding: 0 22px 0 16px !important; background: #25D366 !important; color: #ffffff !important; border: none !important; /* NOT OVAL */ border-radius: 18px !important; overflow: hidden !important; box-sizing: border-box !important; white-space: nowrap !important; text-decoration: none !important; box-shadow: 0 8px 24px rgba(0,0,0,.16) !important; transform: none !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important; } /* hover */ a.kenanta-whatsapp:hover { background: #20c75f !important; transform: translateY(-2px) !important; box-shadow: 0 11px 27px rgba(0,0,0,.20) !important; } /* icon */ a.kenanta-whatsapp svg { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; flex: 0 0 26px !important; margin: 0 !important; display: block !important; } /* text */ a.kenanta-whatsapp .kenanta-wa-label { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; } /* MOBILE */ @media (max-width: 767px) { a.kenanta-whatsapp, a.kenanta-whatsapp.kenanta-whatsapp-pill, a.kenanta-whatsapp.kenanta-wa-modern { right: 14px !important; bottom: 14px !important; width: auto !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 18px 0 14px !important; border-radius: 17px !important; } a.kenanta-whatsapp svg { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } a.kenanta-whatsapp .kenanta-wa-label { font-size: 15px !important; } } /* ========================================================== KENANTA WHATSAPP FINAL FIX Prevent clipping / circle collapse ========================================================== */ html body a.kenanta-whatsapp, html body a.kenanta-whatsapp.kenanta-whatsapp-pill, html body a.kenanta-whatsapp.kenanta-wa-modern { position: fixed !important; right: 22px !important; bottom: 22px !important; left: auto !important; top: auto !important; z-index: 9999999 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 235px !important; min-width: 235px !important; max-width: 235px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding: 0 18px !important; margin: 0 !important; background: #25D366 !important; color: #ffffff !important; border: 0 !important; border-radius: 18px !important; box-sizing: border-box !important; overflow: visible !important; white-space: nowrap !important; text-decoration: none !important; transform: none !important; clip: auto !important; clip-path: none !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important; } /* icon */ html body a.kenanta-whatsapp svg, html body a.kenanta-whatsapp img { display: block !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: 26px !important; max-height: 26px !important; flex: 0 0 26px !important; margin: 0 !important; padding: 0 !important; } /* text */ html body a.kenanta-whatsapp .kenanta-wa-label { display: inline-block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; flex: 0 0 auto !important; } /* hover */ html body a.kenanta-whatsapp:hover { background: #20c75f !important; transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.22) !important; } /* MOBILE */ @media (max-width: 767px) { html body a.kenanta-whatsapp, html body a.kenanta-whatsapp.kenanta-whatsapp-pill, html body a.kenanta-whatsapp.kenanta-wa-modern { right: 12px !important; bottom: 12px !important; width: 210px !important; min-width: 210px !important; max-width: 210px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 15px !important; border-radius: 17px !important; } html body a.kenanta-whatsapp svg, html body a.kenanta-whatsapp img { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; } html body a.kenanta-whatsapp .kenanta-wa-label { font-size: 14px !important; } } /* ========================================================== WHATSAPP PERFECT FINAL SHAPE ========================================================== */ html body a.kenanta-whatsapp, html body a.kenanta-whatsapp.kenanta-whatsapp-pill, html body a.kenanta-whatsapp.kenanta-wa-modern { position: fixed !important; right: 20px !important; bottom: 20px !important; left: auto !important; top: auto !important; z-index: 9999999 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; /* natural compact width */ width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 40px) !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; padding: 0 20px 0 16px !important; margin: 0 !important; background: #25D366 !important; color: #ffffff !important; border: none !important; /* rounded rectangle, not oval */ border-radius: 18px !important; box-sizing: border-box !important; overflow: visible !important; white-space: nowrap !important; text-decoration: none !important; clip: auto !important; clip-path: none !important; transform: none !important; box-shadow: 0 8px 20px rgba(0,0,0,.16) !important; transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important; } /* icon */ html body a.kenanta-whatsapp svg, html body a.kenanta-whatsapp img { width: 25px !important; height: 25px !important; min-width: 25px !important; min-height: 25px !important; max-width: 25px !important; max-height: 25px !important; flex: 0 0 25px !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* exact text */ html body a.kenanta-whatsapp .kenanta-wa-label { display: inline-block !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; flex: 0 0 auto !important; } /* hover */ html body a.kenanta-whatsapp:hover { background: #20c65f !important; transform: translateY(-2px) !important; box-shadow: 0 11px 25px rgba(0,0,0,.20) !important; } /* mobile */ @media (max-width: 767px) { html body a.kenanta-whatsapp, html body a.kenanta-whatsapp.kenanta-whatsapp-pill, html body a.kenanta-whatsapp.kenanta-wa-modern { right: 12px !important; bottom: 12px !important; width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 17px 0 14px !important; border-radius: 17px !important; } html body a.kenanta-whatsapp svg, html body a.kenanta-whatsapp img { width: 23px !important; height: 23px !important; min-width: 23px !important; min-height: 23px !important; max-width: 23px !important; max-height: 23px !important; } html body a.kenanta-whatsapp .kenanta-wa-label { font-size: 14px !important; } } /* ========================================================== KENANTA PREMIUM BUTTON SYSTEM ========================================================== */ /* General button motion */ .btn, .kenanta-hero-btn, a.btn, button.btn { position: relative !important; overflow: hidden !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease !important; will-change: transform; } /* Primary buttons */ .btn:not(.outline), .kenanta-hero-btn-primary, button.btn.submit { background: linear-gradient( 135deg, #168CE8 0%, #32A8FF 100% ) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 8px 22px rgba(20,128,220,.20) !important; } .btn:not(.outline):hover, .kenanta-hero-btn-primary:hover, button.btn.submit:hover { background: linear-gradient( 135deg, #0D78D0 0%, #2498EE 100% ) !important; transform: translateY(-3px) !important; box-shadow: 0 13px 30px rgba(20,128,220,.28) !important; } /* ========================================================== SECONDARY / DARK BUTTONS Removes harsh black hover ========================================================== */ .btn.outline, .kenanta-hero-btn-secondary { background: rgba(255,255,255,.06) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.52) !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: 0 8px 22px rgba(0,0,0,.08) !important; } .btn.outline:hover, .kenanta-hero-btn-secondary:hover { background: rgba(29,147,232,.20) !important; color: #ffffff !important; border-color: #63C2FF !important; transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(11,92,160,.18) !important; } /* Secondary buttons on white/light sections */ .section .btn.outline, .services-final .btn.outline, .cards .btn.outline { background: #ffffff !important; color: #0B3D91 !important; border: 1px solid #B8D8F5 !important; box-shadow: 0 7px 20px rgba(9,61,132,.08) !important; } .section .btn.outline:hover, .services-final .btn.outline:hover, .cards .btn.outline:hover { background: #EDF8FF !important; color: #0876C9 !important; border-color: #54B8F5 !important; transform: translateY(-3px) !important; box-shadow: 0 12px 26px rgba(9,100,175,.15) !important; } /* ========================================================== SOFT SHINE MICRO-INTERACTION ========================================================== */ .btn::before, .kenanta-hero-btn::before { content: ""; position: absolute; top: -30%; left: -55%; width: 40%; height: 160%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.20), transparent ); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; } .btn:hover::before, .kenanta-hero-btn:hover::before { left: 125%; } /* Arrow / icon movement */ .btn:hover, .kenanta-hero-btn:hover { letter-spacing: .1px; } /* Click feel */ .btn:active, .kenanta-hero-btn:active { transform: translateY(-1px) scale(.985) !important; } /* Keyboard accessibility */ .btn:focus-visible, .kenanta-hero-btn:focus-visible { outline: 3px solid rgba(69,181,255,.34) !important; outline-offset: 3px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width:767px) { .btn, .kenanta-hero-btn { transition-duration: .18s !important; } .btn:hover, .kenanta-hero-btn:hover { transform: none !important; } } /* ========================================================== KENANTA MOTION POLISH ========================================================== */ .k-motion-up, .k-motion-left, .k-motion-right, .k-motion-flip { opacity: 0; will-change: transform, opacity; } /* fade upward */ .k-motion-up { transform: translate3d(0, 42px, 0); transition: opacity .68s ease var(--k-motion-delay,0ms), transform .82s cubic-bezier(.2,.72,.2,1) var(--k-motion-delay,0ms); } /* left */ .k-motion-left { transform: translate3d(-60px, 20px, 0); transition: opacity .72s ease var(--k-motion-delay,0ms), transform .88s cubic-bezier(.18,.78,.22,1) var(--k-motion-delay,0ms); } /* right */ .k-motion-right { transform: translate3d(60px, 20px, 0); transition: opacity .72s ease var(--k-motion-delay,0ms), transform .88s cubic-bezier(.18,.78,.22,1) var(--k-motion-delay,0ms); } /* subtle card flip */ .k-motion-flip { transform: perspective(1100px) rotateY(18deg) translate3d(0, 30px, 0); transform-origin: center; backface-visibility: hidden; transition: opacity .72s ease var(--k-motion-delay,0ms), transform .9s cubic-bezier(.18,.78,.22,1) var(--k-motion-delay,0ms); } /* visible state */ .k-motion-show { opacity: 1 !important; transform: none !important; } /* card hover polish */ .cards article, .service-feature, .metrics > div, .contact-tile { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important; } .cards article:hover, .service-feature:hover, .metrics > div:hover, .contact-tile:hover { transform: translateY(-7px) !important; box-shadow: 0 18px 42px rgba(7,52,112,.13) !important; } /* process cards stagger look */ .services-process > *, .cards > article { transform-style: preserve-3d; } /* tiny button arrow movement */ .btn, .kenanta-hero-btn { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease !important; } .btn:hover, .kenanta-hero-btn:hover { transform: translateY(-2px); } /* mobile: lighter motion */ @media (max-width:767px) { .k-motion-left, .k-motion-right, .k-motion-flip { transform: translate3d(0, 28px, 0); } } /* accessibility */ @media (prefers-reduced-motion: reduce) { .k-motion-up, .k-motion-left, .k-motion-right, .k-motion-flip { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================== ABOUT PAGE — DEDICATED 3D CARD FLIP ========================================================== */ .about-flip-container { perspective: 1400px !important; } .about-flip-card { transform-style: preserve-3d !important; backface-visibility: hidden !important; transform-origin: center center !important; opacity: 0 !important; transform: perspective(1200px) rotateY(68deg) translate3d(0, 32px, 0) scale(.94) !important; transition: opacity .72s ease var(--about-delay, 0ms), transform .95s cubic-bezier(.16,.78,.22,1) var(--about-delay, 0ms), box-shadow .3s ease !important; will-change: transform, opacity !important; } /* visible state */ .about-flip-card.about-flip-visible { opacity: 1 !important; transform: perspective(1200px) rotateY(0deg) translate3d(0,0,0) scale(1) !important; } /* Prevent the old generic motion class from cancelling the dedicated About flip before it becomes visible. */ .about-flip-card:not(.about-flip-visible), .about-flip-card.k-motion-show:not(.about-flip-visible) { opacity: 0 !important; transform: perspective(1200px) rotateY(68deg) translate3d(0,32px,0) scale(.94) !important; } .about-flip-card.about-flip-visible, .about-flip-card.about-flip-visible.k-motion-show { opacity: 1 !important; transform: perspective(1200px) rotateY(0deg) translate3d(0,0,0) scale(1) !important; } /* premium hover after animation */ .about-flip-card.about-flip-visible:hover { transform: perspective(1200px) rotateY(-3deg) translateY(-8px) scale(1.015) !important; box-shadow: 0 20px 44px rgba(8,61,127,.15) !important; } /* Mobile = softer flip */ @media (max-width:767px) { .about-flip-card { transform: perspective(900px) rotateY(42deg) translate3d(0,26px,0) scale(.96) !important; } .about-flip-card:not(.about-flip-visible), .about-flip-card.k-motion-show:not(.about-flip-visible) { transform: perspective(900px) rotateY(42deg) translate3d(0,26px,0) scale(.96) !important; } } /* accessibility */ @media (prefers-reduced-motion:reduce) { .about-flip-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================== HOME 01–04 + SERVICES MOTION POLISH ========================================================== */ /* HOME METRIC CARDS */ .metrics > div { position: relative !important; overflow: hidden !important; opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .6s ease var(--metric-delay,0ms), transform .78s cubic-bezier(.18,.78,.22,1) var(--metric-delay,0ms), box-shadow .28s ease, border-color .28s ease !important; } .metrics > div.metric-visible { opacity: 1 !important; transform: translateY(0) scale(1) !important; } .metrics > div::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: linear-gradient( 90deg, #168CE8, #61C7FF ); transition: width .35s ease; } .metrics > div:hover { transform: translateY(-7px) scale(1.015) !important; box-shadow: 0 18px 38px rgba(7,61,126,.13) !important; } .metrics > div:hover::after { width: 100%; } /* number accent */ .metrics > div b { transition: transform .28s ease, color .28s ease !important; display: inline-block; } .metrics > div:hover b { transform: translateY(-2px) scale(1.06); } /* ========================================================== SERVICES ========================================================== */ .service-feature { opacity: 0; transition: opacity .68s ease, transform .85s cubic-bezier(.18,.78,.22,1), box-shadow .28s ease !important; } .service-feature:nth-of-type(odd) { transform: translate3d(-72px,20px,0) scale(.97); } .service-feature:nth-of-type(even) { transform: translate3d(72px,20px,0) scale(.97); } .service-feature.service-visible { opacity: 1 !important; transform: translate3d(0,0,0) scale(1) !important; } .service-feature.service-visible:hover { transform: translateY(-6px) scale(1.008) !important; box-shadow: 0 20px 45px rgba(5,55,118,.12) !important; } /* headings inside service sections */ .service-feature h2, .service-feature h3 { transition: transform .3s ease, color .3s ease; } .service-feature:hover h2, .service-feature:hover h3 { transform: translateX(4px); } /* ========================================================== SERVICES PROCESS CARDS ========================================================== */ .services-process > * { opacity: 0; transform: translateY(28px) scale(.96); transition: opacity .58s ease var(--process-delay,0ms), transform .72s cubic-bezier(.18,.78,.22,1) var(--process-delay,0ms), box-shadow .25s ease !important; } .services-process > *.process-visible { opacity: 1 !important; transform: translateY(0) scale(1) !important; } .services-process > *.process-visible:hover { transform: translateY(-6px) scale(1.015) !important; box-shadow: 0 16px 36px rgba(4,48,105,.13) !important; } /* MOBILE */ @media (max-width:767px) { .metrics > div { transform: translateY(22px) scale(.98); } .service-feature:nth-of-type(odd), .service-feature:nth-of-type(even) { transform: translateY(26px) scale(.98); } .service-feature.service-visible { transform: translateY(0) scale(1) !important; } } /* ACCESSIBILITY */ @media (prefers-reduced-motion:reduce) { .metrics > div, .service-feature, .services-process > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================== KENANTA FINAL RESPONSIVE CLEANUP ========================================================== */ html, body { max-width: 100%; overflow-x: hidden; } /* safe spacing around page edges */ .wrap, .section { box-sizing: border-box; } /* ========================================================== HOME METRIC CARDS ========================================================== */ .metrics { gap: 16px !important; } .metrics > div { min-width: 0 !important; } /* ========================================================== FORMS ========================================================== */ .form-layout { align-items: start !important; } .form-layout form, .form-layout > div { min-width: 0 !important; } input, textarea, select, button { max-width: 100%; box-sizing: border-box; } /* ========================================================== BUTTON CONSISTENCY ========================================================== */ .actions { flex-wrap: wrap !important; } .actions .btn, .kenanta-hero-btn { text-align: center !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { body { padding-bottom: 72px; } .wrap, .section { width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; } /* hero */ .hero, .pagehero { min-height: auto !important; } .hero h1, .pagehero h1 { word-break: normal !important; overflow-wrap: normal !important; } /* CTA buttons */ .actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .actions .btn, .kenanta-hero-btn { width: 100% !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* 01–04 cards */ .metrics { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding-bottom: 18px !important; } .metrics > div { min-height: 105px !important; padding: 16px 13px !important; } .metrics > div b { font-size: 20px !important; } .metrics > div span { font-size: 13px !important; line-height: 1.4 !important; overflow-wrap: break-word !important; } /* cards */ .cards { grid-template-columns: 1fr !important; gap: 14px !important; } .cards article { width: 100% !important; box-sizing: border-box !important; } /* services */ .service-feature, .service-feature.reverse { display: block !important; } /* forms */ .form-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; } .form-layout form { width: 100% !important; } /* contact spacing */ body:has(.form-layout) .section { padding-top: 36px !important; padding-bottom: 42px !important; } /* WhatsApp safe area */ html body a.kenanta-whatsapp { right: 12px !important; bottom: 12px !important; max-width: calc(100vw - 24px) !important; } /* footer */ footer { padding-bottom: 34px !important; } } /* ========================================================== VERY SMALL PHONES ========================================================== */ @media (max-width: 420px) { .metrics { grid-template-columns: 1fr !important; } .metrics > div { min-height: auto !important; } html body a.kenanta-whatsapp .kenanta-wa-label { font-size: 13px !important; } } /* ========================================================== TABLET ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .wrap, .section { padding-left: 26px !important; padding-right: 26px !important; } .metrics { grid-template-columns: repeat(2,1fr) !important; } } /* ========================================================== KENANTA HOME MOBILE HERO — SHOW FULL BANNER IMAGE Desktop remains unchanged ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { position: relative !important; /* dark area below the full image */ background: #061b36 !important; min-height: 0 !important; height: auto !important; /* Desktop banner ratio is wide. This creates room for the full-width image before the text begins. */ padding-top: 56.25vw !important; padding-bottom: 42px !important; overflow: hidden !important; } /* ====================================================== FULL MOBILE IMAGE ====================================================== */ body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; /* 16:9 full image area */ height: 56.25vw !important; min-height: 0 !important; background-image: url('banner-home.webp') !important; /* IMPORTANT: 100% width + auto height = full banner visible, no left/right crop */ background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; opacity: 1 !important; transform: none !important; filter: none !important; z-index: 1 !important; } /* Remove the desktop dark overlay from covering/cropping the actual image. Add only a small bottom gradient so the transition from image to navy feels smooth. */ body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 56.25vw !important; background: linear-gradient( to bottom, rgba(3,24,50,0) 58%, rgba(3,24,50,.28) 78%, #061b36 100% ) !important; z-index: 2 !important; pointer-events: none !important; } /* ====================================================== HERO CONTENT BELOW IMAGE ====================================================== */ body.kenanta-page-home .kenanta-hero-container { position: relative !important; z-index: 5 !important; width: 100% !important; min-height: 0 !important; display: block !important; padding: 34px 22px 0 !important; box-sizing: border-box !important; } body.kenanta-page-home .kenanta-hero-copy-final { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; transform: none; } body.kenanta-page-home .kenanta-hero-eyebrow { margin-bottom: 18px !important; } body.kenanta-page-home .kenanta-hero-title { margin-top: 0 !important; margin-bottom: 20px !important; } body.kenanta-page-home .kenanta-hero-description { margin-bottom: 24px !important; max-width: 100% !important; } /* Keep mobile CTAs clean and full width */ body.kenanta-page-home .kenanta-hero-actions { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } body.kenanta-page-home .kenanta-hero-btn { width: 100% !important; min-height: 50px !important; box-sizing: border-box !important; justify-content: center !important; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width: 420px) { body.kenanta-page-home .kenanta-hero-container { padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================== HOME 01–04 METRICS — CLEAN DESKTOP + MOBILE LAYOUT ========================================================== */ .metrics { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; align-items: stretch !important; } .metrics > div { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 78px !important; padding: 14px 18px !important; text-align: left !important; box-sizing: border-box !important; } .metrics > div:not(:last-child) { border-right: 1px solid #dfe7f0 !important; } .metrics > div b { display: inline-block !important; margin: 0 !important; font-size: 24px !important; line-height: 1 !important; flex: 0 0 auto !important; } .metrics > div span { display: inline-block !important; margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; white-space: normal !important; flex: 0 1 auto !important; } /* ========================================================== MOBILE — 2 PER ROW ========================================================== */ @media (max-width: 767px) { .metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .metrics > div { min-height: 82px !important; padding: 14px 12px !important; gap: 8px !important; justify-content: flex-start !important; } .metrics > div:nth-child(odd) { border-right: 1px solid #dfe7f0 !important; } .metrics > div:nth-child(even) { border-right: 0 !important; } .metrics > div:nth-child(-n+2) { border-bottom: 1px solid #dfe7f0 !important; } .metrics > div b { font-size: 22px !important; } .metrics > div span { font-size: 12px !important; line-height: 1.3 !important; } } /* VERY SMALL PHONES */ @media (max-width: 380px) { .metrics > div { padding: 12px 9px !important; gap: 6px !important; } .metrics > div b { font-size: 20px !important; } .metrics > div span { font-size: 11px !important; } } /* ========================================================== KENANTA MOBILE HOME HERO — FINAL HEIGHT POLISH Desktop untouched ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { min-height: 0 !important; height: auto !important; /* Slightly shorter image area than before. Still shows full banner width. */ padding-top: 44vw !important; padding-bottom: 26px !important; background: #061b36 !important; } /* full banner */ body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { width: 100% !important; height: 44vw !important; background-image: url('banner-home.webp') !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; } body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { height: 44vw !important; background: linear-gradient( to bottom, rgba(4,24,50,0) 65%, rgba(4,24,50,.18) 82%, #061b36 100% ) !important; } /* content area */ body.kenanta-page-home .kenanta-hero-container { min-height: 0 !important; padding: 24px 20px 0 !important; } body.kenanta-page-home .kenanta-hero-copy-final { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* eyebrow */ body.kenanta-page-home .kenanta-hero-eyebrow { display: block !important; margin: 0 0 12px !important; font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 1.6px !important; } /* title */ body.kenanta-page-home .kenanta-hero-title { margin: 0 0 16px !important; font-size: clamp(38px, 12vw, 50px) !important; line-height: .96 !important; letter-spacing: -1.5px !important; } /* description */ body.kenanta-page-home .kenanta-hero-description { margin: 0 0 20px !important; font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; } /* buttons */ body.kenanta-page-home .kenanta-hero-actions { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 10px !important; margin: 0 !important; } body.kenanta-page-home .kenanta-hero-btn { width: 100% !important; min-height: 46px !important; height: 46px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; border-radius: 24px !important; box-sizing: border-box !important; } } /* extra-tight phones like 311px */ @media (max-width: 360px) { body.kenanta-page-home .kenanta-hero-container { padding-left: 18px !important; padding-right: 18px !important; } body.kenanta-page-home .kenanta-hero-title { font-size: 38px !important; line-height: .98 !important; } body.kenanta-page-home .kenanta-hero-description { font-size: 15px !important; line-height: 1.5 !important; } } /* ========================================================== MOBILE HOME BANNER — INCREASE IMAGE HEIGHT ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { /* make room for taller image */ padding-top: 58vw !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { height: 58vw !important; background-image: url('banner-home.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { height: 58vw !important; } } /* 311px–360px phones */ @media (max-width: 360px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { padding-top: 60vw !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before, body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { height: 60vw !important; } } /* ========================================================== KENANTA MOBILE HERO — FULL HEIGHT + CLEAR IMAGE ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { position: relative !important; min-height: 860px !important; height: auto !important; padding-top: 260px !important; /* space for full image */ padding-bottom: 34px !important; background: #061b36 !important; overflow: hidden !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 250px !important; /* bigger clear image */ background-image: url('banner-home.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; z-index: 0 !important; } body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 250px !important; background: linear-gradient( to bottom, rgba(6,27,54,0.05) 0%, rgba(6,27,54,0.18) 45%, rgba(6,27,54,0.72) 78%, #061b36 100% ) !important; z-index: 1 !important; } body.kenanta-page-home .kenanta-hero-container { position: relative !important; z-index: 2 !important; width: 100% !important; min-height: auto !important; padding: 0 22px !important; } body.kenanta-page-home .kenanta-hero-copy-final { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.kenanta-page-home .kenanta-hero-eyebrow { margin: 0 0 12px !important; font-size: 10px !important; line-height: 1.35 !important; letter-spacing: 1.8px !important; } body.kenanta-page-home .kenanta-hero-title { margin: 0 0 18px !important; font-size: 34px !important; line-height: 0.98 !important; letter-spacing: -1px !important; } body.kenanta-page-home .kenanta-hero-description { margin: 0 0 22px !important; font-size: 15px !important; line-height: 1.6 !important; max-width: 100% !important; } body.kenanta-page-home .kenanta-hero-actions { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; margin: 0 !important; } body.kenanta-page-home .kenanta-hero-btn { width: 100% !important; min-height: 52px !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; font-size: 14px !important; border-radius: 28px !important; box-sizing: border-box !important; } /* keep metrics below hero with breathing space */ body.kenanta-page-home .metrics { margin-top: 18px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } body.kenanta-page-home .metrics > div { min-height: 92px !important; padding: 14px 12px !important; } /* WhatsApp should not sit over hero buttons */ html body a.kenanta-whatsapp { right: 14px !important; bottom: 14px !important; z-index: 9999 !important; } } @media (max-width: 360px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { min-height: 830px !important; padding-top: 235px !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before, body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { height: 225px !important; } body.kenanta-page-home .kenanta-hero-title { font-size: 31px !important; line-height: 1 !important; } body.kenanta-page-home .kenanta-hero-description { font-size: 14px !important; } } /* ========================================================== KENANTA MOBILE HERO — PORTRAIT IMAGE FINAL Desktop stays unchanged ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { position: relative !important; min-height: 760px !important; height: auto !important; padding: 0 !important; background: #061b36 !important; overflow: hidden !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { content: "" !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-image: url('kenanta-mobile-hero.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 1 !important; transform: none !important; z-index: 0 !important; } body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient( to bottom, rgba(2,18,38,.05) 0%, rgba(2,18,38,.08) 28%, rgba(2,18,38,.28) 48%, rgba(2,18,38,.72) 68%, rgba(2,18,38,.94) 86%, #061b36 100% ) !important; z-index: 1 !important; pointer-events: none !important; } body.kenanta-page-home .kenanta-hero-container { position: relative !important; z-index: 2 !important; width: 100% !important; min-height: 760px !important; display: flex !important; align-items: flex-end !important; padding: 0 20px 28px !important; box-sizing: border-box !important; } body.kenanta-page-home .kenanta-hero-copy-final { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.kenanta-page-home .kenanta-hero-eyebrow { margin: 0 0 10px !important; font-size: 10px !important; line-height: 1.35 !important; letter-spacing: 1.5px !important; } body.kenanta-page-home .kenanta-hero-title { margin: 0 0 14px !important; font-size: 34px !important; line-height: .98 !important; letter-spacing: -1px !important; } body.kenanta-page-home .kenanta-hero-description { margin: 0 0 18px !important; max-width: 100% !important; font-size: 14px !important; line-height: 1.5 !important; } body.kenanta-page-home .kenanta-hero-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; margin: 0 !important; } body.kenanta-page-home .kenanta-hero-btn { width: 100% !important; min-height: 48px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; font-size: 14px !important; border-radius: 24px !important; box-sizing: border-box !important; } body.kenanta-page-home .metrics { position: relative !important; z-index: 3 !important; margin-top: 0 !important; } } /* 311px / smaller screens */ @media (max-width: 360px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero, body.kenanta-page-home .kenanta-hero-container { min-height: 720px !important; } body.kenanta-page-home .kenanta-hero-title { font-size: 31px !important; } body.kenanta-page-home .kenanta-hero-description { font-size: 13px !important; } } /* ========================================================== HOME MOBILE HERO — MATCH SERVICES HERO HEIGHT ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { min-height: 540px !important; height: 540px !important; padding: 0 !important; overflow: hidden !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { width: 100% !important; height: 100% !important; background-image: url('kenanta-mobile-hero.webp') !important; background-size: cover !important; background-position: center 42% !important; background-repeat: no-repeat !important; } body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { height: 100% !important; background: linear-gradient( to bottom, rgba(3,20,42,.06) 0%, rgba(3,20,42,.12) 30%, rgba(3,20,42,.55) 60%, rgba(3,20,42,.92) 100% ) !important; } body.kenanta-page-home .kenanta-hero-container { min-height: 540px !important; height: 540px !important; display: flex !important; align-items: flex-end !important; padding: 0 20px 24px !important; box-sizing: border-box !important; } body.kenanta-page-home .kenanta-hero-eyebrow { margin-bottom: 7px !important; font-size: 9px !important; } body.kenanta-page-home .kenanta-hero-title { margin-bottom: 10px !important; font-size: 30px !important; line-height: .96 !important; } body.kenanta-page-home .kenanta-hero-description { margin-bottom: 12px !important; font-size: 12px !important; line-height: 1.4 !important; } body.kenanta-page-home .kenanta-hero-actions { gap: 7px !important; } body.kenanta-page-home .kenanta-hero-btn { min-height: 42px !important; height: 42px !important; font-size: 12px !important; } } /* 311px phones */ @media (max-width: 360px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero, body.kenanta-page-home .kenanta-hero-container { min-height: 520px !important; height: 520px !important; } body.kenanta-page-home .kenanta-hero-title { font-size: 28px !important; } } /* ========================================================== HOME MOBILE SLIDER — SHORTER HEIGHT + TEXT UP ========================================================== */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero { min-height: 500px !important; height: 500px !important; padding: 0 !important; overflow: hidden !important; } body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { width: 100% !important; height: 100% !important; background-image: url('kenanta-mobile-hero.webp') !important; background-size: cover !important; background-position: center 42% !important; background-repeat: no-repeat !important; } body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after { width: 100% !important; height: 100% !important; background: linear-gradient( to bottom, rgba(3,20,42,.05) 0%, rgba(3,20,42,.14) 32%, rgba(3,20,42,.48) 58%, rgba(3,20,42,.86) 100% ) !important; } body.kenanta-page-home .kenanta-hero-container { min-height: 500px !important; height: 500px !important; display: flex !important; align-items: flex-end !important; padding: 0 18px 18px !important; box-sizing: border-box !important; } /* move complete text block upward */ body.kenanta-page-home .kenanta-hero-copy-final { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: translateY(-42px) !important; } body.kenanta-page-home .kenanta-hero-eyebrow { margin: 0 0 6px !important; font-size: 9px !important; line-height: 1.25 !important; letter-spacing: 1.3px !important; } body.kenanta-page-home .kenanta-hero-title { margin: 0 0 9px !important; font-size: 29px !important; line-height: .97 !important; letter-spacing: -.8px !important; } body.kenanta-page-home .kenanta-hero-description { margin: 0 0 12px !important; font-size: 12px !important; line-height: 1.4 !important; } body.kenanta-page-home .kenanta-hero-actions { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 7px !important; } body.kenanta-page-home .kenanta-hero-btn { width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 0 14px !important; font-size: 12px !important; border-radius: 22px !important; } } /* 311px / small phones */ @media (max-width: 360px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero, body.kenanta-page-home .kenanta-hero-container { min-height: 480px !important; height: 480px !important; } body.kenanta-page-home .kenanta-hero-copy-final { transform: translateY(-34px) !important; } body.kenanta-page-home .kenanta-hero-title { font-size: 27px !important; } } /* ========================================================== KENANTA MOBILE PAGE-SPECIFIC HERO IMAGES ========================================================== */ @media (max-width: 767px) { /* ABOUT */ body.kenanta-page-about .hero::before, body.kenanta-page-about .pagehero::before, body.kenanta-page-about .kenanta-unified-hero::before { background-image: url('about-mobile.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* SERVICES */ body.kenanta-page-services .hero::before, body.kenanta-page-services .pagehero::before, body.kenanta-page-services .services-hero::before, body.kenanta-page-services .kenanta-unified-hero::before { background-image: url('services-mobile.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* BUYER */ body.kenanta-page-buyer .hero::before, body.kenanta-page-buyer .pagehero::before, body.kenanta-page-buyer .kenanta-unified-hero::before { background-image: url('buyer-mobile.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* SUPPLIER */ body.kenanta-page-seller .hero::before, body.kenanta-page-seller .pagehero::before, body.kenanta-page-seller .kenanta-unified-hero::before { background-image: url('supplier-mobile.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* CONTACT */ body.kenanta-page-contact .hero::before, body.kenanta-page-contact .pagehero::before, body.kenanta-page-contact .kenanta-unified-hero::before { background-image: url('contact-mobile.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } } /* ========================================================== MOBILE SLIDERS — CLEAR IMAGE / REMOVE BLUE OVERLAY ========================================================== */ @media (max-width: 767px) { .kenanta-unified-hero::before, .hero::before, .pagehero::before, .services-hero::before { opacity: 1 !important; filter: none !important; } .kenanta-unified-hero::after, .hero::after, .pagehero::after, .services-hero::after { background: linear-gradient( to bottom, rgba(0,0,0,.03) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.22) 75%, rgba(0,0,0,.34) 100% ) !important; opacity: 1 !important; } .kenanta-hero-title, .kenanta-hero-description, .kenanta-hero-eyebrow { text-shadow: 0 2px 8px rgba(0,0,0,.65) !important; } } /* ========================================================== KENANTA FINAL CONVERSION + UI POLISH ========================================================== */ /* HOME — ONE CLEAR PRIMARY CTA */ body.kenanta-page-home .kenanta-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } body.kenanta-page-home .kenanta-hero-actions a:first-child { background: linear-gradient(135deg,#1299f4,#42b7ff) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: 0 12px 32px rgba(18,153,244,.28) !important; transform: translateY(0); } body.kenanta-page-home .kenanta-hero-actions a:first-child:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(18,153,244,.38) !important; } /* Supplier remains available in navigation. Hero secondary CTA is intentionally de-emphasized. */ body.kenanta-page-home .kenanta-hero-actions a:nth-child(2) { background: rgba(4,31,61,.28) !important; color: rgba(255,255,255,.88) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: none !important; } body.kenanta-page-home .kenanta-hero-actions a:nth-child(2):hover { background: rgba(255,255,255,.12) !important; color: #fff !important; } /* ========================================================== SERVICE / CONTENT CARDS — PREMIUM MICRO INTERACTIONS ========================================================== */ .cards article, .service-card, .services-grid article, .process-card, .feature-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important; will-change: transform; } .cards article:hover, .service-card:hover, .services-grid article:hover, .process-card:hover, .feature-card:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 45px rgba(4,31,61,.13) !important; border-color: rgba(27,160,238,.25) !important; } /* ========================================================== ACCESSIBILITY ========================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(41,169,244,.78) !important; outline-offset: 3px !important; } /* ========================================================== MOBILE HERO — KEEP IMAGE CLEAR ========================================================== */ @media (max-width:767px) { .kenanta-unified-hero::after, .hero::after, .pagehero::after, .services-hero::after { background: linear-gradient( to bottom, rgba(0,16,34,.02) 0%, rgba(0,16,34,.03) 35%, rgba(0,16,34,.14) 62%, rgba(0,16,34,.40) 100% ) !important; } .kenanta-hero-copy-final, .kenanta-unified-hero .container, .hero .container, .pagehero .container { position: relative; z-index: 3; } .kenanta-hero-title, .kenanta-hero-description, .kenanta-hero-eyebrow { text-shadow: 0 2px 5px rgba(0,0,0,.48), 0 5px 18px rgba(0,0,0,.22) !important; } body.kenanta-page-home .kenanta-hero-actions { width: 100%; } body.kenanta-page-home .kenanta-hero-actions a:first-child { width: 100%; justify-content: center; text-align: center; } /* Supplier already exists in mobile navigation. Keep only one conversion CTA in mobile hero. */ body.kenanta-page-home .kenanta-hero-actions a:nth-child(2) { display: none !important; } } /* ========================================================== WHATSAPP — DO NOT COVER MOBILE CTA ========================================================== */ @media (max-width:767px) { .whatsapp-float, .whatsapp-button, .kenanta-whatsapp, a[href*="wa.me"] { z-index: 999 !important; } body { padding-bottom: env(safe-area-inset-bottom); } } /* ========================================================== REDUCED MOTION ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================== KENANTA TRUST STRIP ========================================================== */ .kenanta-trust-strip { position: relative; background: #fff; padding: 18px 24px; border-bottom: 1px solid rgba(8,48,83,.08); } .kenanta-trust-inner { width: min(1180px,100%); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .kenanta-trust-inner > div { padding: 16px 18px; border: 1px solid rgba(8,48,83,.08); border-radius: 14px; background: linear-gradient(180deg,#fff,#f7fbff); transition: transform .25s ease, box-shadow .25s ease; } .kenanta-trust-inner > div:hover { transform: translateY(-3px); box-shadow: 0 13px 32px rgba(5,43,76,.09); } .kenanta-trust-inner strong { display: block; color: #082f54; font-size: 14px; margin-bottom: 5px; } .kenanta-trust-inner span { display: block; color: #607487; font-size: 12px; line-height: 1.55; } @media(max-width:767px) { .kenanta-trust-strip { padding: 14px; } .kenanta-trust-inner { grid-template-columns: repeat(2,1fr); gap: 8px; } .kenanta-trust-inner > div { padding: 12px; border-radius: 11px; } .kenanta-trust-inner strong { font-size: 12px; } .kenanta-trust-inner span { font-size: 10px; line-height: 1.45; } } @media(max-width:360px) { .kenanta-trust-inner { grid-template-columns: 1fr; } } /* ========================================================== SERVICES PAGE - FINAL CTA SECTION WHITE ========================================================== */ body.kenanta-page-services .kenanta-final-cta, body.kenanta-page-services .cta-section, body.kenanta-page-services .connect-section, body.kenanta-page-services section:last-of-type { background: #ffffff !important; color: #0b2d5c !important; border-top: 1px solid rgba(11,45,92,.08) !important; } body.kenanta-page-services .kenanta-final-cta .eyebrow, body.kenanta-page-services .cta-section .eyebrow, body.kenanta-page-services .connect-section .eyebrow, body.kenanta-page-services section:last-of-type .eyebrow, body.kenanta-page-services section:last-of-type .mini-title, body.kenanta-page-services section:last-of-type .overline { color: #2f8ee5 !important; } body.kenanta-page-services .kenanta-final-cta h2, body.kenanta-page-services .cta-section h2, body.kenanta-page-services .connect-section h2, body.kenanta-page-services section:last-of-type h2 { color: #0b2d5c !important; } body.kenanta-page-services .kenanta-final-cta p, body.kenanta-page-services .cta-section p, body.kenanta-page-services .connect-section p, body.kenanta-page-services section:last-of-type p { color: #5d6f86 !important; } body.kenanta-page-services .kenanta-final-cta .actions, body.kenanta-page-services .cta-section .actions, body.kenanta-page-services .connect-section .actions, body.kenanta-page-services section:last-of-type .actions { justify-content: center !important; gap: 16px !important; } /* Primary button */ body.kenanta-page-services .kenanta-final-cta .btn:first-child, body.kenanta-page-services .cta-section .btn:first-child, body.kenanta-page-services .connect-section .btn:first-child, body.kenanta-page-services section:last-of-type .btn:first-child { background: linear-gradient(135deg,#1e90ff,#48a8ff) !important; color: #ffffff !important; border: none !important; box-shadow: 0 10px 24px rgba(30,144,255,.18) !important; } /* Secondary button */ body.kenanta-page-services .kenanta-final-cta .btn:nth-child(2), body.kenanta-page-services .cta-section .btn:nth-child(2), body.kenanta-page-services .connect-section .btn:nth-child(2), body.kenanta-page-services section:last-of-type .btn:nth-child(2) { background: #ffffff !important; color: #0b2d5c !important; border: 1px solid rgba(11,45,92,.18) !important; box-shadow: none !important; } /* ========================================================== SITECRITIC POLISH - ACCESSIBILITY / CONVERSION / CLARITY ========================================================== */ /* 1. Better readable body text */ body, p, li, .card p, .cards article p, .section p, .lead { color: #2f3b46; } /* Keep muted secondary text readable, not washed out */ .muted, .meta, .small, small { color: #5b6875 !important; } /* 2. HOME - stronger positioning text */ body.kenanta-page-home .hero p, body.kenanta-page-home .kenanta-hero-description { max-width: 700px; color: rgba(255,255,255,.92) !important; font-weight: 500; line-height: 1.65; } /* 3. Remove duplicate homepage 01-04 strip The newer trust strip already communicates these ideas */ body.kenanta-page-home .metrics { display: none !important; } /* 4. Make Buyer path more visually dominant */ body.kenanta-page-home .actions .btn:first-child, body.kenanta-page-home .kenanta-hero-actions a:first-child { background: linear-gradient(135deg,#168fe8,#36adff) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(22,143,232,.28) !important; } body.kenanta-page-home .actions .btn:first-child:hover, body.kenanta-page-home .kenanta-hero-actions a:first-child:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(22,143,232,.38) !important; } /* 5. De-emphasize Supplier hero CTA on desktop */ body.kenanta-page-home .actions .btn:nth-child(2), body.kenanta-page-home .kenanta-hero-actions a:nth-child(2) { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.90) !important; border: 1px solid rgba(255,255,255,.30) !important; box-shadow: none !important; } /* 6. WhatsApp less visually dominant */ .whatsapp-float, .whatsapp-button, .kenanta-whatsapp, a[href*="wa.me"] { transform: scale(.92); transform-origin: bottom right; box-shadow: 0 8px 22px rgba(0,0,0,.14) !important; } /* 7. Stronger trust strip copy presentation */ .kenanta-trust-inner strong { font-weight: 700; letter-spacing: -.01em; } .kenanta-trust-inner span { color: #465565 !important; } /* 8. Mobile adjustments */ @media (max-width:767px) { body, p, li, .card p, .cards article p, .section p, .lead { color: #2f3b46; } body.kenanta-page-home .hero p, body.kenanta-page-home .kenanta-hero-description { color: rgba(255,255,255,.94) !important; } .whatsapp-float, .whatsapp-button, .kenanta-whatsapp, a[href*="wa.me"] { transform: scale(.86); transform-origin: bottom right; } } /* ========================================================== CLIENT BRANDING POLISH Mobile text visibility + cleaner images + logo alignment ========================================================== */ /* -------------------------- 1. HEADER / LOGO ALIGNMENT -------------------------- */ header .wrap, .site-header .wrap, .navbar .wrap, .kenanta-header .wrap { max-width: 1280px !important; padding-left: 28px !important; padding-right: 28px !important; } header .logo, .site-header .logo, .kenanta-header .logo, .navbar .logo { margin-left: 0 !important; padding-left: 0 !important; } header .wrap > *:first-child, .site-header .wrap > *:first-child, .kenanta-header .wrap > *:first-child { justify-self: start !important; } /* -------------------------- 2. CLEANER HERO IMAGES -------------------------- */ body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before, body.kenanta-page-about .hero::before, body.kenanta-page-about .pagehero::before, body.kenanta-page-about .kenanta-unified-hero::before, body.kenanta-page-services .hero::before, body.kenanta-page-services .pagehero::before, body.kenanta-page-services .services-hero::before, body.kenanta-page-services .kenanta-unified-hero::before, body.kenanta-page-buyer .hero::before, body.kenanta-page-buyer .pagehero::before, body.kenanta-page-buyer .kenanta-unified-hero::before, body.kenanta-page-seller .hero::before, body.kenanta-page-seller .pagehero::before, body.kenanta-page-seller .kenanta-unified-hero::before, body.kenanta-page-contact .hero::before, body.kenanta-page-contact .pagehero::before, body.kenanta-page-contact .kenanta-unified-hero::before { filter: brightness(.82) saturate(.92) contrast(1.03) !important; } /* darker professional overlay */ body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after, body.kenanta-page-about .hero::after, body.kenanta-page-about .pagehero::after, body.kenanta-page-about .kenanta-unified-hero::after, body.kenanta-page-services .hero::after, body.kenanta-page-services .pagehero::after, body.kenanta-page-services .services-hero::after, body.kenanta-page-services .kenanta-unified-hero::after, body.kenanta-page-buyer .hero::after, body.kenanta-page-buyer .pagehero::after, body.kenanta-page-buyer .kenanta-unified-hero::after, body.kenanta-page-seller .hero::after, body.kenanta-page-seller .pagehero::after, body.kenanta-page-seller .kenanta-unified-hero::after, body.kenanta-page-contact .hero::after, body.kenanta-page-contact .pagehero::after, body.kenanta-page-contact .kenanta-unified-hero::after { background: linear-gradient( 90deg, rgba(3,20,43,.76) 0%, rgba(3,20,43,.55) 35%, rgba(3,20,43,.20) 70%, rgba(3,20,43,.08) 100% ) !important; } /* -------------------------- 3. TYPOGRAPHY POLISH -------------------------- */ body, p, li, .section p, .card p, .cards article p, .lead { color: #344252 !important; line-height: 1.7 !important; letter-spacing: -.01em; } h1, h2, h3, h4, .kenanta-hero-title, .pagehero h1, .hero h1 { letter-spacing: -0.03em !important; line-height: 1.02 !important; font-weight: 800 !important; } .kenanta-hero-eyebrow, .pagehero .eyebrow, .hero .eyebrow { letter-spacing: 2px !important; font-weight: 700 !important; } /* -------------------------- 4. MOBILE HERO TEXT VISIBILITY -------------------------- */ @media (max-width: 767px) { body.kenanta-page-about .kenanta-hero-container, body.kenanta-page-services .kenanta-hero-container, body.kenanta-page-buyer .kenanta-hero-container, body.kenanta-page-seller .kenanta-hero-container, body.kenanta-page-contact .kenanta-hero-container, body.kenanta-page-home .kenanta-hero-container { align-items: flex-start !important; justify-content: flex-end !important; padding: 24px 18px 26px !important; } body.kenanta-page-about .kenanta-hero-copy-final, body.kenanta-page-services .kenanta-hero-copy-final, body.kenanta-page-buyer .kenanta-hero-copy-final, body.kenanta-page-seller .kenanta-hero-copy-final, body.kenanta-page-contact .kenanta-hero-copy-final, body.kenanta-page-home .kenanta-hero-copy-final { width: 100% !important; max-width: 100% !important; padding: 16px 14px !important; border-radius: 16px !important; background: linear-gradient( to bottom, rgba(4,22,46,.28), rgba(4,22,46,.58) ) !important; backdrop-filter: blur(2px); } body.kenanta-page-about .kenanta-hero-eyebrow, body.kenanta-page-services .kenanta-hero-eyebrow, body.kenanta-page-buyer .kenanta-hero-eyebrow, body.kenanta-page-seller .kenanta-hero-eyebrow, body.kenanta-page-contact .kenanta-hero-eyebrow, body.kenanta-page-home .kenanta-hero-eyebrow { color: #6ec1ff !important; font-size: 11px !important; margin-bottom: 10px !important; text-shadow: 0 1px 8px rgba(0,0,0,.25); } body.kenanta-page-about .kenanta-hero-title, body.kenanta-page-services .kenanta-hero-title, body.kenanta-page-buyer .kenanta-hero-title, body.kenanta-page-seller .kenanta-hero-title, body.kenanta-page-contact .kenanta-hero-title, body.kenanta-page-home .kenanta-hero-title { color: #ffffff !important; font-size: clamp(34px, 11vw, 48px) !important; line-height: .98 !important; margin: 0 0 12px !important; text-shadow: 0 3px 18px rgba(0,0,0,.35); } body.kenanta-page-about .kenanta-hero-description, body.kenanta-page-services .kenanta-hero-description, body.kenanta-page-buyer .kenanta-hero-description, body.kenanta-page-seller .kenanta-hero-description, body.kenanta-page-contact .kenanta-hero-description, body.kenanta-page-home .kenanta-hero-description { color: rgba(255,255,255,.96) !important; font-size: 15px !important; line-height: 1.6 !important; max-width: 100% !important; margin: 0 !important; text-shadow: 0 2px 14px rgba(0,0,0,.28); } /* better mobile image framing */ body.kenanta-page-about .hero::before, body.kenanta-page-about .pagehero::before, body.kenanta-page-about .kenanta-unified-hero::before, body.kenanta-page-services .hero::before, body.kenanta-page-services .pagehero::before, body.kenanta-page-services .services-hero::before, body.kenanta-page-services .kenanta-unified-hero::before, body.kenanta-page-buyer .hero::before, body.kenanta-page-buyer .pagehero::before, body.kenanta-page-buyer .kenanta-unified-hero::before, body.kenanta-page-seller .hero::before, body.kenanta-page-seller .pagehero::before, body.kenanta-page-seller .kenanta-unified-hero::before, body.kenanta-page-contact .hero::before, body.kenanta-page-contact .pagehero::before, body.kenanta-page-contact .kenanta-unified-hero::before { background-size: cover !important; background-position: center center !important; } /* fix big empty area around CTA buttons */ .cta-section, .contact-cta, .let-connect, .connect-strip { padding-top: 48px !important; padding-bottom: 48px !important; } .cta-section .btn, .contact-cta .btn, .let-connect .btn, .connect-strip .btn { width: auto !important; min-width: 210px !important; display: inline-flex !important; justify-content: center !important; padding-left: 24px !important; padding-right: 24px !important; } } /* -------------------------- 5. DESKTOP HERO COPY CLEANUP -------------------------- */ body.kenanta-page-home .kenanta-hero-copy-final, body.kenanta-page-about .kenanta-hero-copy-final, body.kenanta-page-services .kenanta-hero-copy-final, body.kenanta-page-buyer .kenanta-hero-copy-final, body.kenanta-page-seller .kenanta-hero-copy-final, body.kenanta-page-contact .kenanta-hero-copy-final { max-width: 640px !important; } body.kenanta-page-home .kenanta-hero-description, body.kenanta-page-about .kenanta-hero-description, body.kenanta-page-services .kenanta-hero-description, body.kenanta-page-buyer .kenanta-hero-description, body.kenanta-page-seller .kenanta-hero-description, body.kenanta-page-contact .kenanta-hero-description { font-size: 18px !important; line-height: 1.65 !important; } /* -------------------------- 6. REDUCE OVER-BRIGHT BLUE LOOK -------------------------- */ body.kenanta-page-about .hero, body.kenanta-page-about .pagehero, body.kenanta-page-services .hero, body.kenanta-page-services .pagehero, body.kenanta-page-buyer .hero, body.kenanta-page-buyer .pagehero, body.kenanta-page-seller .hero, body.kenanta-page-seller .pagehero, body.kenanta-page-contact .hero, body.kenanta-page-contact .pagehero, body.kenanta-page-home .hero { background-color: #051a35 !important; } /* ========================================================== KENANTA NEW UNIFIED BANNERS ========================================================== */ /* ---------- SAME DESKTOP HEIGHT ---------- */ body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero, body.kenanta-page-about .hero, body.kenanta-page-about .pagehero, body.kenanta-page-about .kenanta-unified-hero, body.kenanta-page-services .hero, body.kenanta-page-services .pagehero, body.kenanta-page-services .services-hero, body.kenanta-page-services .kenanta-unified-hero, body.kenanta-page-buyer .hero, body.kenanta-page-buyer .pagehero, body.kenanta-page-buyer .kenanta-unified-hero, body.kenanta-page-seller .hero, body.kenanta-page-seller .pagehero, body.kenanta-page-seller .kenanta-unified-hero, body.kenanta-page-contact .hero, body.kenanta-page-contact .pagehero, body.kenanta-page-contact .kenanta-unified-hero { height: 430px !important; min-height: 430px !important; position: relative !important; overflow: hidden !important; background: #052744 !important; } /* ---------- IMAGE COMMON SETTINGS ---------- */ body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before, body.kenanta-page-about .hero::before, body.kenanta-page-about .pagehero::before, body.kenanta-page-about .kenanta-unified-hero::before, body.kenanta-page-services .hero::before, body.kenanta-page-services .pagehero::before, body.kenanta-page-services .services-hero::before, body.kenanta-page-services .kenanta-unified-hero::before, body.kenanta-page-buyer .hero::before, body.kenanta-page-buyer .pagehero::before, body.kenanta-page-buyer .kenanta-unified-hero::before, body.kenanta-page-seller .hero::before, body.kenanta-page-seller .pagehero::before, body.kenanta-page-seller .kenanta-unified-hero::before, body.kenanta-page-contact .hero::before, body.kenanta-page-contact .pagehero::before, body.kenanta-page-contact .kenanta-unified-hero::before { content: "" !important; position: absolute !important; inset: 0 !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; opacity: 1 !important; filter: brightness(.74) saturate(.82) contrast(1.03) !important; } /* ---------- PAGE IMAGES ---------- */ /* HOME */ body.kenanta-page-home .hero::before, body.kenanta-page-home .kenanta-unified-hero::before { background-image: url('home-banner.webp') !important; } /* ABOUT */ body.kenanta-page-about .hero::before, body.kenanta-page-about .pagehero::before, body.kenanta-page-about .kenanta-unified-hero::before { background-image: url('about-banner.webp') !important; } /* SERVICES */ body.kenanta-page-services .hero::before, body.kenanta-page-services .pagehero::before, body.kenanta-page-services .services-hero::before, body.kenanta-page-services .kenanta-unified-hero::before { background-image: url('services-banner.webp') !important; } /* BUYER */ body.kenanta-page-buyer .hero::before, body.kenanta-page-buyer .pagehero::before, body.kenanta-page-buyer .kenanta-unified-hero::before { background-image: url('buyer-banner.webp') !important; } /* SUPPLIER */ body.kenanta-page-seller .hero::before, body.kenanta-page-seller .pagehero::before, body.kenanta-page-seller .kenanta-unified-hero::before { background-image: url('supplier-banner.webp') !important; } /* CONTACT */ body.kenanta-page-contact .hero::before, body.kenanta-page-contact .pagehero::before, body.kenanta-page-contact .kenanta-unified-hero::before { background-image: url('contact-banner.webp') !important; } /* ---------- PROFESSIONAL OVERLAY ---------- */ body.kenanta-page-home .hero::after, body.kenanta-page-home .kenanta-unified-hero::after, body.kenanta-page-about .hero::after, body.kenanta-page-about .pagehero::after, body.kenanta-page-about .kenanta-unified-hero::after, body.kenanta-page-services .hero::after, body.kenanta-page-services .pagehero::after, body.kenanta-page-services .services-hero::after, body.kenanta-page-services .kenanta-unified-hero::after, body.kenanta-page-buyer .hero::after, body.kenanta-page-buyer .pagehero::after, body.kenanta-page-buyer .kenanta-unified-hero::after, body.kenanta-page-seller .hero::after, body.kenanta-page-seller .pagehero::after, body.kenanta-page-seller .kenanta-unified-hero::after, body.kenanta-page-contact .hero::after, body.kenanta-page-contact .pagehero::after, body.kenanta-page-contact .kenanta-unified-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(3,24,46,.78) 0%, rgba(3,24,46,.58) 34%, rgba(3,24,46,.30) 62%, rgba(3,24,46,.14) 100% ) !important; } /* ---------- TEXT POSITION ---------- */ body.kenanta-page-home .kenanta-hero-container, body.kenanta-page-about .kenanta-hero-container, body.kenanta-page-services .kenanta-hero-container, body.kenanta-page-buyer .kenanta-hero-container, body.kenanta-page-seller .kenanta-hero-container, body.kenanta-page-contact .kenanta-hero-container { min-height: 430px !important; height: 430px !important; display: flex !important; align-items: center !important; position: relative !important; z-index: 3 !important; } /* ---------- MOBILE: SAME HEIGHT ---------- */ @media (max-width: 767px) { body.kenanta-page-home .hero, body.kenanta-page-home .kenanta-unified-hero, body.kenanta-page-about .hero, body.kenanta-page-about .pagehero, body.kenanta-page-about .kenanta-unified-hero, body.kenanta-page-services .hero, body.kenanta-page-services .pagehero, body.kenanta-page-services .services-hero, body.kenanta-page-services .kenanta-unified-hero, body.kenanta-page-buyer .hero, body.kenanta-page-buyer .pagehero, body.kenanta-page-buyer .kenanta-unified-hero, body.kenanta-page-seller .hero, body.kenanta-page-seller .pagehero, body.kenanta-page-seller .kenanta-unified-hero, body.kenanta-page-contact .hero, body.kenanta-page-contact .pagehero, body.kenanta-page-contact .kenanta-unified-hero { height: 360px !important; min-height: 360px !important; } body.kenanta-page-home .kenanta-hero-container, body.kenanta-page-about .kenanta-hero-container, body.kenanta-page-services .kenanta-hero-container, body.kenanta-page-buyer .kenanta-hero-container, body.kenanta-page-seller .kenanta-hero-container, body.kenanta-page-contact .kenanta-hero-container { height: 360px !important; min-height: 360px !important; padding: 24px 20px !important; align-items: flex-end !important; } body.kenanta-page-home .kenanta-hero-copy-final, body.kenanta-page-about .kenanta-hero-copy-final, body.kenanta-page-services .kenanta-hero-copy-final, body.kenanta-page-buyer .kenanta-hero-copy-final, body.kenanta-page-seller .kenanta-hero-copy-final, body.kenanta-page-contact .kenanta-hero-copy-final { width: 100% !important; max-width: 100% !important; padding: 0 !important; background: transparent !important; backdrop-filter: none !important; } body.kenanta-page-home .kenanta-hero-title, body.kenanta-page-about .kenanta-hero-title, body.kenanta-page-services .kenanta-hero-title, body.kenanta-page-buyer .kenanta-hero-title, body.kenanta-page-seller .kenanta-hero-title, body.kenanta-page-contact .kenanta-hero-title { color: #fff !important; font-size: clamp(32px,9vw,44px) !important; line-height: 1 !important; margin-bottom: 10px !important; text-shadow: 0 3px 14px rgba(0,0,0,.36) !important; } body.kenanta-page-home .kenanta-hero-description, body.kenanta-page-about .kenanta-hero-description, body.kenanta-page-services .kenanta-hero-description, body.kenanta-page-buyer .kenanta-hero-description, body.kenanta-page-seller .kenanta-hero-description, body.kenanta-page-contact .kenanta-hero-description { color: rgba(255,255,255,.96) !important; font-size: 14px !important; line-height: 1.55 !important; max-width: 100% !important; text-shadow: 0 2px 10px rgba(0,0,0,.38) !important; } } /* ========================================================== HERO LOGO FIX - REMOVE BLUE BOX / USE CLEAN STRUCTURE ========================================================== */ /* top navbar logo spacing */ .site-header .brand, .site-header .logo, .site-header .site-logo, .navbar-brand { margin-left: 0 !important; padding-left: 0 !important; } .site-header .brand img, .site-header .logo img, .site-header .site-logo img, .navbar-brand img { height: auto !important; max-height: 58px !important; width: auto !important; background: transparent !important; } /* right-side hero logo block */ body.kenanta-page-home .hero-brand, body.kenanta-page-home .hero-logo, body.kenanta-page-home .hero-logo-card, body.kenanta-page-home .hero-badge, body.kenanta-page-home .kenanta-hero-brand, body.kenanta-page-home .brand-plate, body.kenanta-page-home .hero-right-logo { position: absolute !important; right: 7% !important; top: 53% !important; transform: translateY(-50%) !important; z-index: 4 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; backdrop-filter: none !important; max-width: 420px !important; text-align: center !important; } /* remove fake blue layer / pseudo background */ body.kenanta-page-home .hero-brand::before, body.kenanta-page-home .hero-brand::after, body.kenanta-page-home .hero-logo::before, body.kenanta-page-home .hero-logo::after, body.kenanta-page-home .hero-logo-card::before, body.kenanta-page-home .hero-logo-card::after, body.kenanta-page-home .hero-badge::before, body.kenanta-page-home .hero-badge::after, body.kenanta-page-home .kenanta-hero-brand::before, body.kenanta-page-home .kenanta-hero-brand::after, body.kenanta-page-home .brand-plate::before, body.kenanta-page-home .brand-plate::after, body.kenanta-page-home .hero-right-logo::before, body.kenanta-page-home .hero-right-logo::after { display: none !important; content: none !important; } /* logo image itself */ body.kenanta-page-home .hero-brand img, body.kenanta-page-home .hero-logo img, body.kenanta-page-home .hero-logo-card img, body.kenanta-page-home .hero-badge img, body.kenanta-page-home .kenanta-hero-brand img, body.kenanta-page-home .brand-plate img, body.kenanta-page-home .hero-right-logo img { display: block !important; width: min(310px, 30vw) !important; max-width: 100% !important; height: auto !important; margin: 0 auto 14px !important; background: transparent !important; mix-blend-mode: normal !important; filter: none !important; box-shadow: none !important; } /* hero logo text */ body.kenanta-page-home .hero-brand h1, body.kenanta-page-home .hero-brand h2, body.kenanta-page-home .hero-brand h3, body.kenanta-page-home .hero-logo h1, body.kenanta-page-home .hero-logo h2, body.kenanta-page-home .hero-logo h3, body.kenanta-page-home .hero-logo-card h1, body.kenanta-page-home .hero-logo-card h2, body.kenanta-page-home .hero-logo-card h3, body.kenanta-page-home .hero-badge h1, body.kenanta-page-home .hero-badge h2, body.kenanta-page-home .hero-badge h3, body.kenanta-page-home .kenanta-hero-brand h1, body.kenanta-page-home .kenanta-hero-brand h2, body.kenanta-page-home .kenanta-hero-brand h3, body.kenanta-page-home .brand-plate h1, body.kenanta-page-home .brand-plate h2, body.kenanta-page-home .brand-plate h3, body.kenanta-page-home .hero-right-logo h1, body.kenanta-page-home .hero-right-logo h2, body.kenanta-page-home .hero-right-logo h3 { color: #ffffff !important; margin: 0 0 8px !important; font-size: 52px !important; line-height: 1.02 !important; letter-spacing: .08em !important; font-weight: 800 !important; } body.kenanta-page-home .hero-brand p, body.kenanta-page-home .hero-brand span, body.kenanta-page-home .hero-logo p, body.kenanta-page-home .hero-logo span, body.kenanta-page-home .hero-logo-card p, body.kenanta-page-home .hero-logo-card span, body.kenanta-page-home .hero-badge p, body.kenanta-page-home .hero-badge span, body.kenanta-page-home .kenanta-hero-brand p, body.kenanta-page-home .kenanta-hero-brand span, body.kenanta-page-home .brand-plate p, body.kenanta-page-home .brand-plate span, body.kenanta-page-home .hero-right-logo p, body.kenanta-page-home .hero-right-logo span { color: rgba(255,255,255,.88) !important; font-size: 12px !important; line-height: 1.45 !important; letter-spacing: .18em !important; text-transform: uppercase !important; margin: 0 !important; } /* mobile */ @media (max-width: 991px) { body.kenanta-page-home .hero-brand, body.kenanta-page-home .hero-logo, body.kenanta-page-home .hero-logo-card, body.kenanta-page-home .hero-badge, body.kenanta-page-home .kenanta-hero-brand, body.kenanta-page-home .brand-plate, body.kenanta-page-home .hero-right-logo { right: 50% !important; top: auto !important; bottom: 30px !important; transform: translateX(50%) !important; max-width: 260px !important; } body.kenanta-page-home .hero-brand img, body.kenanta-page-home .hero-logo img, body.kenanta-page-home .hero-logo-card img, body.kenanta-page-home .hero-badge img, body.kenanta-page-home .kenanta-hero-brand img, body.kenanta-page-home .brand-plate img, body.kenanta-page-home .hero-right-logo img { width: 150px !important; margin-bottom: 10px !important; } body.kenanta-page-home .hero-brand h1, body.kenanta-page-home .hero-brand h2, body.kenanta-page-home .hero-brand h3, body.kenanta-page-home .hero-logo h1, body.kenanta-page-home .hero-logo h2, body.kenanta-page-home .hero-logo h3, body.kenanta-page-home .hero-logo-card h1, body.kenanta-page-home .hero-logo-card h2, body.kenanta-page-home .hero-logo-card h3, body.kenanta-page-home .hero-badge h1, body.kenanta-page-home .hero-badge h2, body.kenanta-page-home .hero-badge h3, body.kenanta-page-home .kenanta-hero-brand h1, body.kenanta-page-home .kenanta-hero-brand h2, body.kenanta-page-home .kenanta-hero-brand h3, body.kenanta-page-home .brand-plate h1, body.kenanta-page-home .brand-plate h2, body.kenanta-page-home .brand-plate h3, body.kenanta-page-home .hero-right-logo h1, body.kenanta-page-home .hero-right-logo h2, body.kenanta-page-home .hero-right-logo h3 { font-size: 30px !important; } body.kenanta-page-home .hero-brand p, body.kenanta-page-home .hero-brand span, body.kenanta-page-home .hero-logo p, body.kenanta-page-home .hero-logo span, body.kenanta-page-home .hero-logo-card p, body.kenanta-page-home .hero-logo-card span, body.kenanta-page-home .hero-badge p, body.kenanta-page-home .hero-badge span, body.kenanta-page-home .kenanta-hero-brand p, body.kenanta-page-home .kenanta-hero-brand span, body.kenanta-page-home .brand-plate p, body.kenanta-page-home .brand-plate span, body.kenanta-page-home .hero-right-logo p, body.kenanta-page-home .hero-right-logo span { font-size: 9px !important; letter-spacing: .14em !important; } } /* ========================================================== LOGO SIZE INCREASE ========================================================== */ /* Header logo */ .site-header .brand img, .navbar-brand img, .site-logo img, .header-logo img, a.brand img { height: 64px !important; width: auto !important; max-height: 64px !important; } /* Header brand spacing */ .site-header .brand, .navbar-brand, .site-logo, .header-logo, a.brand { display: flex !important; align-items: center !important; } /* Hero center logo */ .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img { width: 260px !important; max-width: 260px !important; height: auto !important; } /* Mobile */ @media (max-width: 767px) { .site-header .brand img, .navbar-brand img, .site-logo img, .header-logo img, a.brand img { height: 54px !important; max-height: 54px !important; } .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img { width: 180px !important; max-width: 180px !important; } } /* ========================================================== LOGO SIZE INCREASE +30% ========================================================== */ /* Header logo */ .site-header .brand img, .navbar-brand img, .site-logo img, .header-logo img, a.brand img { height: 84px !important; width: auto !important; max-height: 84px !important; } /* Hero center logo */ .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img { width: 338px !important; max-width: 338px !important; height: auto !important; } /* Mobile */ @media (max-width: 767px) { .site-header .brand img, .navbar-brand img, .site-logo img, .header-logo img, a.brand img { height: 70px !important; max-height: 70px !important; } .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img { width: 234px !important; max-width: 234px !important; } } /* ========================================================== LOGO SIZE INCREASE +50% ========================================================== */ /* HEADER LOGO */ .site-header .brand img, .navbar-brand img, .site-logo img, .header-logo img, a.brand img { height: 126px !important; max-height: 126px !important; width: auto !important; } /* HERO LOGO */ .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img, .kenanta-hero-brand img, .hero-brand img { width: 507px !important; max-width: 507px !important; height: auto !important; } /* MOBILE */ @media (max-width: 767px) { .site-header .brand img, .navbar-brand img, .site-logo img, .header-logo img, a.brand img { height: 105px !important; max-height: 105px !important; } .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img, .kenanta-hero-brand img, .hero-brand img { width: 351px !important; max-width: 351px !important; } } /* ========================================================== HERO LOGO +50% MORE ========================================================== */ .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img, .kenanta-hero-brand img, .hero-brand img { width: 760px !important; max-width: 760px !important; height: auto !important; } @media (max-width: 767px) { .hero .hero-logo img, .hero-logo img, .home-hero-logo img, .kenanta-hero-logo img, .kenanta-hero-brand img, .hero-brand img { width: 525px !important; max-width: 525px !important; height: auto !important; } } /* ========================================================== KENANTA FOOTER SOCIAL MEDIA ========================================================== */ .footer-social-kenanta{ margin-top:20px; } .footer-social-kenanta a{ display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border: 1px solid rgba(255,255,255,.12); border-radius:30px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.76) !important; text-decoration:none !important; font-size:12px; font-weight:600; transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease; } .footer-social-kenanta svg{ width:21px; height:21px; fill:none; stroke:#27aaff; stroke-width:1.7; flex:0 0 21px; } .footer-social-kenanta .footer-insta-dot{ fill:#27aaff; stroke:none; } .footer-social-kenanta a:hover{ transform:translateY(-2px); color:#ffffff !important; border-color: rgba(39,170,255,.48); background: rgba(39,170,255,.09); } .footer-social-kenanta a:hover svg{ stroke:#48baff; } .footer-social-kenanta a:hover .footer-insta-dot{ fill:#48baff; } /* MOBILE */ @media(max-width:767px){ .footer-social-kenanta{ margin-top:16px; } .footer-social-kenanta a{ font-size:11px; padding:8px 12px; } }