/* ========================================================== ABOUT PAGE Reuses variables, container, buttons, header/footer and card components already defined in home.css. Only new rules for About-page-specific sections live here. ========================================================== */ /* ===== ABOUT HERO ===== */ .about-hero{position:relative;padding:20px 0 90px;background:url('assets/banner_img/about.webp') center/cover no-repeat;overflow:hidden;} .about-hero .container{position:relative;z-index:2;} .about-hero-content{max-width:640px;} .about-breadcrumb{ display:flex;align-items:center;gap:8px; font-size:13px;font-weight:600;color:rgba(255,255,255,.7); margin-bottom:22px; } .about-breadcrumb a{color:rgba(255,255,255,.85);transition:.3s ease;} .about-breadcrumb a:hover{color:#fff;} .about-breadcrumb span:last-child{color:#fff;} .eyebrow-light{color:#2563eb;} .eyebrow-light::before{background:#cfe0ff;} .about-hero-content h1{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(32px,4vw,48px); line-height:1.18; letter-spacing:-0.02em; color:#0c0c0c; margin-bottom:18px; } .about-hero-content h1 .accent{ display:block; color:#2563eb; } .about-hero-content p{ font-size:16.5px; line-height:1.85; color:rgba(6, 6, 6, 0.85); max-width:540px; font-weight: bold; } /* ===== WHO WE ARE (badge addition on top of reused .about-v3 styles) ===== */ .about-v3-image{position:relative;} .about-v3-badge{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--radius-sm);padding:14px 18px;box-shadow:0 18px 40px rgba(15,23,42,.18);max-width:240px;} .about-v3-badge-ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;} .about-v3-badge-ic i{font-size:15px;color:var(--blue);display:block;} .about-v3-badge strong{display:block;font-size:14px;font-weight:800;color:var(--dark);margin:0;} .about-v3-badge > div > span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin:0;} /* ===== OUR MISSION ===== */ /* ========================================================== COMPACT MISSION SECTION ========================================================== */ .mission-section{padding:10px 0;background:var(--white);} .mission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch;} .mission-card{display:flex;align-items:center;gap:20px;background:var(--light-bg);border:1px solid var(--border);border-radius:16px;padding:26px 24px;min-height:190px;transition:.35s ease;} .mission-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(37,99,235,.10);border-color:#2563eb;} .mission-icon-card{flex-shrink:0;width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(37,99,235,.18);} .mission-icon-card i{font-size:23px;color:#fff;} .mission-content{max-width:100%;} .mission-content .eyebrow{display:inline-flex;margin-bottom:8px;font-size:11px;} .mission-content h2{font-size:18px !important;font-weight:800;line-height:1.25;color:#0f172a;margin-bottom:9px;} .mission-content h2 span{display:block;background:linear-gradient(135deg,#2563eb,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;} .mission-content p{font-size:14px;line-height:1.7;color:var(--muted);margin:0;} .mission-card{position:relative;overflow:hidden;} .mission-card::after{content:"";position:absolute;top:-60%;left:-120%;width:65%;height:220%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.15) 65%,transparent 100%);transform:skewX(-22deg);opacity:0;pointer-events:none;z-index:20;} .mission-card:hover::after{left:160%;opacity:1;transition:left 1s cubic-bezier(.22,.61,.36,1),opacity .15s ease;} .mission-card>*{position:relative;z-index:2;} @media(max-width:992px){ .mission-grid{grid-template-columns:1fr;} .mission-card{min-height:auto;} } @media(max-width:768px){ .mission-section{padding:60px 0;} .mission-grid{gap:18px;} .mission-card{padding:24px 20px;gap:16px;} .mission-icon-card{width:52px;height:52px;border-radius:14px;} .mission-icon-card i{font-size:21px;} .mission-content h2{font-size:19px;} .mission-content p{font-size:13px;line-height:1.7;} } @media(max-width:480px){ .mission-card{flex-direction:column;text-align:center;padding:24px 18px;} .mission-icon-card{width:50px;height:50px;} .mission-content h2{font-size:18px;} .mission-content p{font-size:13px;} } /* ===== INDUSTRIES (shares #industries styles from home.css automatically) ===== */ /* ===== CTA (reuses .cta-section / .cta-banner from home.css) ===== */ /* ===== OUR APPROACH — center the 7th step on the 3-column grid ===== */ @media(min-width:1101px){ #approach .process-track .process-card:nth-child(7){ grid-column:2 / span 1; } } /* ===== RESPONSIVE ===== */ @media(max-width:768px){ .about-hero{padding:90px 0 60px;} .about-v3-badge{ position:static; margin-top:16px; max-width:none; } .mission-grid{ flex-direction:column; text-align:center; padding:36px 28px; } .mission-content h2{font-size:28px;} } @media(max-width:480px){ .about-hero-content p{max-width:none;} } /* ================================================== GLOBAL MOBILE HEADING STANDARD Keep all page headings consistent on mobile ================================================== */ @media (max-width: 768px){ h1{font-size:32px !important;line-height:1.2 !important;} h2{font-size:25px !important;line-height:1.25 !important;} h3{font-size:22px !important;line-height:1.3 !important;} h4{font-size:18px !important;line-height:1.35 !important;} h5{font-size:16px !important;line-height:1.4 !important;} h6{font-size:14px !important;line-height:1.4 !important;} } /* ================================================== GLOBAL MOBILE SECTION SPACING Reduce excessive gaps between sections ================================================== */ @media (max-width:768px){ section{margin-top:0 !important;margin-bottom:0 !important;padding-top:35px !important;padding-bottom:35px !important;} section+section{margin-top:0 !important;} .container{padding-left:16px !important;padding-right:16px !important;} .section-heading{margin-bottom:25px !important;} .section-title{margin-bottom:10px !important;} .section-subtitle{margin-bottom:20px !important;} } /* ================================================== ABOUT HERO — MOBILE LEFT IMAGE + OVERLAY + CENTERED CONTENT ================================================== */ @media (max-width:576px){ /* ----------------------------------------------- ABOUT HERO ----------------------------------------------- */ .about-hero{ position:relative !important; overflow:hidden !important; /* Background image */ background-position:left center !important; background-size:cover !important; background-repeat:no-repeat !important; } /* ----------------------------------------------- BLUE / BLACK OVERLAY ----------------------------------------------- */ .about-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient( 180deg, rgba(0,35,85,.35) 0%, rgba(0,25,70,.45) 50%, rgba(0,0,0,.50) 100% ) !important; } /* ----------------------------------------------- HERO CONTENT ----------------------------------------------- */ .about-hero-inner{ position:relative !important; z-index:5 !important; width:100% !important; max-width:100% !important; margin:0 auto !important; text-align:center !important; padding-top:30px !important; padding-left:16px !important; padding-right:16px !important; } /* ----------------------------------------------- EYEBROW / TOP PILL ----------------------------------------------- */ .about-hero .eyebrow{ display:flex !important; align-items:center !important; justify-content:center !important; width:max-content !important; max-width:100% !important; margin:0 auto 18px !important; padding:9px 20px !important; background:#ffffff !important; border-radius:40px !important; color:#2563eb !important; font-size:10px !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:2px !important; text-align:center !important; white-space:nowrap !important; box-shadow: 0 4px 15px rgba(0,0,0,.10) !important; } /* ----------------------------------------------- EYEBROW LINE ----------------------------------------------- */ .about-hero .eyebrow::before{ content:"" !important; display:block !important; width:22px !important; height:2px !important; margin-right:10px !important; background:#2563eb !important; border-radius:10px !important; flex-shrink:0 !important; } /* ----------------------------------------------- MAIN HEADING ----------------------------------------------- */ .about-hero h1{ position:relative !important; z-index:5 !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; color:#ffffff !important; font-weight:800 !important; text-align:center !important; text-shadow: 0 2px 4px rgba(0,0,0,.90), 0 4px 12px rgba(0,0,0,.65) !important; } /* ----------------------------------------------- HEADING ACCENT / SPAN ----------------------------------------------- */ .about-hero h1 span, .about-hero h1 .accent{ color:#ffffff !important; text-shadow: 0 2px 5px rgba(0,0,0,.90) !important; } /* ----------------------------------------------- DESCRIPTION ----------------------------------------------- */ .about-hero p{ position:relative !important; z-index:5 !important; width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; color:#ffffff !important; font-weight:600 !important; line-height:1.7 !important; text-align:center !important; text-shadow: 0 2px 5px rgba(0,0,0,.90), 0 3px 10px rgba(0,0,0,.60) !important; } } @media (max-width:576px){ .about-hero{ background-position:right center !important; } } /* ========================================================= ABOUT HERO - MOBILE BANNER REMOVE ALL OVERLAYS + CONTENT ========================================================= */ @media screen and (max-width: 576px) { .about-hero { background-image: url("assets/mobile_banner/about.webp") !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; min-height: 650px !important; overflow: hidden !important; /* Remove possible background effects */ background-color: transparent !important; } /* Hide HTML overlay */ .about-hero-overlay, .about-hero .hero-overlay, .about-hero .overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; background: transparent !important; } /* Remove CSS pseudo-element overlays */ .about-hero::before, .about-hero::after { display: none !important; content: none !important; opacity: 0 !important; background: none !important; } /* Hide HTML hero content */ .about-hero-content { display: none !important; visibility: hidden !important; opacity: 0 !important; } }