:root{--red:#b30d17;--red-dark:#7d0710;--blue:#0b4f83;--navy:#081d33;--gold:#d79013;--green:#16795a;--purple:#6843a5;--light:#f6f8fb;--text:#243447;--muted:#6b7785;--white:#fff;--shadow:0 22px 55px rgba(14,38,64,.13)} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:120px}body{font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}h1,h2,h3,h4,.navbar-brand{font-family:"Segoe UI",Arial,Helvetica,sans-serif}a{text-decoration:none}.container-xxl{max-width:1500px}.topbar{background:linear-gradient(90deg,var(--navy),#103d63);color:#dce9f3;font-size:.88rem}.topbar .container-xxl{min-height:42px}.topbar-left,.topbar-right{display:flex;gap:22px;align-items:center}.topbar a{color:#dce9f3;transition:.25s}.topbar a:hover{color:#fff}.topbar i{color:#ffb3b8;margin-right:5px}.topbar-right{gap:12px}.site-header{background:rgba(255,255,255,.96);box-shadow:0 8px 30px rgba(4,30,51,.08);backdrop-filter:blur(16px);z-index:1040}.navbar{padding:.45rem 0}.brand-logo{width:255px;max-height:108px;object-fit:contain;display:block}.navbar-nav{gap:.1rem}.nav-link{font-weight:700;color:#1d2d3d!important;padding:.9rem .72rem!important;border-radius:10px;white-space:nowrap}.nav-link:hover,.nav-link.active{color:var(--red)!important;background:#fff3f4}.dropdown-menu{border:0;border-radius:14px;padding:.7rem;box-shadow:0 18px 50px rgba(10,33,54,.16);min-width:max-content}.dropdown-item{font-weight:600;padding:.7rem .9rem;border-radius:9px}.dropdown-item:hover{background:#fff0f1;color:var(--red)}.btn{font-weight:800;border-radius:12px;padding:.82rem 1.25rem;transition:.3s}.btn-brand{background:linear-gradient(135deg,var(--red),#e03a43);border:0;color:#fff;box-shadow:0 10px 25px rgba(179,13,23,.26)}.btn-brand:hover{background:linear-gradient(135deg,#960a13,var(--red));color:#fff;transform:translateY(-2px)}.hero-section{position:relative}.hero-image{width:100%;height:760px;object-fit:cover;display:block}.hero-overlay{position:absolute;inset:0}.hero-overlay-red{background:linear-gradient(90deg,rgba(91,2,9,.93) 0%,rgba(139,10,19,.72) 48%,rgba(5,20,33,.23) 100%)}.hero-overlay-blue{background:linear-gradient(90deg,rgba(4,37,66,.94),rgba(8,76,124,.72) 52%,rgba(3,20,32,.22))}.hero-overlay-gold{background:linear-gradient(90deg,rgba(67,37,0,.94),rgba(154,95,0,.7) 52%,rgba(20,13,3,.2))}.hero-overlay-dark{background:linear-gradient(90deg,rgba(4,17,28,.96),rgba(24,43,58,.75) 52%,rgba(1,5,8,.2))}.hero-overlay-green{background:linear-gradient(90deg,rgba(7,58,43,.94),rgba(22,121,90,.73) 52%,rgba(2,16,12,.2))}.hero-content{position:absolute;inset:0;z-index:2}.min-vh-hero{min-height:760px}.hero-kicker{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.15em;font-size:.8rem;margin-bottom:1.25rem}.hero-kicker:before{content:"";width:48px;height:3px;background:#fff}.hero-content h1,.hero-content h2{font-size:clamp(2.7rem,5vw,5.4rem);line-height:1.03;color:#fff;font-weight:900;max-width:1000px;margin-bottom:1.35rem;text-shadow:0 8px 30px rgba(0,0,0,.22)}.hero-content p{font-size:1.18rem;line-height:1.8;color:rgba(255,255,255,.9);max-width:780px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}.hero-actions .btn{padding:1rem 1.45rem}.hero-actions .btn-outline-light:hover{color:var(--navy)}.carousel-indicators{bottom:118px}.carousel-indicators [data-bs-target]{width:42px;height:4px;border:0;border-radius:5px}.carousel-control-prev,.carousel-control-next{width:64px;height:64px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:50%;opacity:1}.carousel-control-prev{left:0px}.carousel-control-next{right:0px}.hero-content>*{animation:heroIn .9s both}.carousel-item.active .hero-kicker{animation-delay:.2s}.carousel-item.active h1,.carousel-item.active h2{animation:heroIn .85s .35s both}.carousel-item.active p{animation:heroIn .85s .5s both}.carousel-item.active .hero-actions{animation:heroIn .85s .65s both}@keyframes heroIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}.hero-quick-panel{position:absolute;left:0;right:0;bottom:-48px;z-index:5}.quick-card{display:flex;align-items:center;gap:16px;color:#fff;padding:1.5rem}.quick-card i{font-size:2.2rem}.quick-card strong{display:block;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:1.05rem}.quick-card span{display:block;font-size:.82rem;opacity:.85;margin-top:3px}.quick-red{background:linear-gradient(135deg,#8c0811,#c71c27)}.quick-blue{background:linear-gradient(135deg,#083a62,#0a67a8)}.quick-gold{background:linear-gradient(135deg,#9f6505,#d9951e)}.quick-dark{background:linear-gradient(135deg,#0a1c2c,#173a56)}.section-pad{padding:110px 0}.about-section{padding-top:165px;background:linear-gradient(180deg,#fff,#f8fafc)}.section-heading{max-width:830px;margin-bottom:2rem}.section-heading.text-center{margin-left:auto;margin-right:auto}.eyebrow{display:inline-block;color:var(--red);font-weight:900;letter-spacing:.14em;font-size:.78rem;margin-bottom:.8rem}.eyebrow.light{color:#ffd3d6}.section-heading h2{font-size:clamp(2rem,3.2vw,3.6rem);font-weight:900;line-height:1.15;color:#10263a}.section-heading p{font-size:1.05rem;color:var(--muted);line-height:1.8}.about-visual{position:relative;padding:25px 40px 45px 0}.main-about-img{border-radius:28px;box-shadow:var(--shadow);min-height:520px;object-fit:cover}.about-badge{position:absolute;right:0;bottom:0;background:linear-gradient(135deg,var(--red),#e53d46);color:#fff;border-radius:22px;padding:1.5rem 1.8rem;box-shadow:0 18px 42px rgba(179,13,23,.28)}.about-badge strong{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:1.5rem;display:block}.about-badge span{font-size:.85rem}.about-pattern{position:absolute;left:-30px;top:-18px;width:130px;height:130px;background-image:radial-gradient(var(--gold) 1.7px,transparent 1.7px);background-size:13px 13px;z-index:-1}.lead-copy{font-size:1.15rem;font-weight:700;line-height:1.8;color:#31485c}.feature-tick{display:flex;gap:10px;align-items:center;font-weight:700}.feature-tick i{color:var(--green)}.stats-section{background:linear-gradient(135deg,var(--navy),#124b76);padding:70px 0;color:#fff}.stat-card .counter,.stat-card .stat-plus{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:3rem;font-weight:900}.stat-card p{margin:6px 0 0;color:#c9d8e5}.products-section{background:#f6f8fb}.product-card{height:100%;background:#fff;border-radius:22px;padding:2rem;border:1px solid #e7edf2;box-shadow:0 14px 35px rgba(12,35,55,.07);transition:.35s;position:relative;overflow:hidden}.product-card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--card-color)}.product-card:hover{transform:translateY(-10px);box-shadow:var(--shadow)}.product-icon{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--card-color) 12%,white);color:var(--card-color);font-size:1.9rem;margin-bottom:1.35rem}.product-card h3{font-size:1.35rem;font-weight:800}.product-card p{color:var(--muted);line-height:1.7}.product-card ul{padding-left:1.1rem;color:#46596b;line-height:1.9}.product-card a{color:var(--card-color);font-weight:900}.product-red{--card-color:var(--red)}.product-blue{--card-color:var(--blue)}.product-purple{--card-color:var(--purple)}.product-gold{--card-color:var(--gold)}.product-green{--card-color:var(--green)}.product-dark{--card-color:var(--navy)}.services-section{background:linear-gradient(135deg,#071b2e,#123d5d);position:relative;overflow:hidden}.services-section:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(179,13,23,.28),transparent 65%);right:-130px;top:-170px}.service-card{height:100%;position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:2rem;color:#fff;backdrop-filter:blur(8px);transition:.35s}.service-card:hover{background:rgba(255,255,255,.12);transform:translateY(-8px)}.service-card>span{position:absolute;right:18px;top:12px;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:2.6rem;font-weight:900;color:rgba(255,255,255,.08)}.service-card i{font-size:2rem;color:#ff6c74}.service-card h3{font-size:1.2rem;margin:1rem 0 .7rem}.service-card p{color:#b8c9d7;line-height:1.7;margin:0}.timeline-section{background:#fff}.timeline{position:relative;max-width:1000px;margin:auto}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(var(--red),var(--blue));transform:translateX(-50%)}.timeline-item{width:50%;position:relative;padding:0 55px 55px}.timeline-item:nth-child(even){margin-left:50%}.timeline-dot{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--red);border:5px solid #fff;box-shadow:0 0 0 4px rgba(179,13,23,.18);right:-11px;top:10px}.timeline-item:nth-child(even) .timeline-dot{left:-11px}.timeline-content{background:#f6f8fb;border-radius:20px;padding:1.7rem;box-shadow:0 10px 28px rgba(14,38,64,.08)}.timeline-content span{color:var(--red);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}.timeline-content h3{font-size:1.25rem;margin:.5rem 0}.timeline-content p{margin:0;color:var(--muted);line-height:1.7}.vision-section{background:linear-gradient(180deg,#f8fafc,#fff)}.vision-card{height:100%;border-radius:24px;padding:2.2rem;color:#fff;box-shadow:var(--shadow);transition:.35s}.vision-card:hover{transform:translateY(-8px) rotate(-.5deg)}.vision-card i{font-size:2.4rem}.vision-card h3{font-size:1.55rem;margin:1.2rem 0}.vision-card p{margin:0;line-height:1.8;color:rgba(255,255,255,.88)}.vision-red{background:linear-gradient(135deg,#8b0811,#db2b35)}.vision-blue{background:linear-gradient(135deg,#07395e,#0c6cae)}.vision-gold{background:linear-gradient(135deg,#9b5d00,#d8941a)}.projects-section{background:#f5f7fa}.project-card{position:relative;border-radius:22px;overflow:hidden;height:430px;box-shadow:var(--shadow)}.project-card img{width:100%;height:100%;object-fit:cover;transition:.6s}.project-card:hover img{transform:scale(1.08)}.project-overlay{position:absolute;inset:auto 0 0;padding:2rem;background:linear-gradient(transparent,rgba(5,18,30,.93));color:#fff}.project-overlay span{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:#ffb2b7;font-weight:800}.project-overlay h3{font-size:1.25rem;margin:.45rem 45px 0 0}.project-overlay a{position:absolute;right:22px;bottom:25px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--red)}.process-section{background:linear-gradient(135deg,#8b0710,#c71a24);position:relative}.process-card{text-align:center;color:#fff;padding:1.7rem;position:relative}.process-card>span{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:4rem;font-weight:900;color:rgba(255,255,255,.1);position:absolute;top:-20px;left:50%;transform:translateX(-50%)}.process-card i{font-size:2.4rem;display:block;margin-top:1.5rem}.process-card h3{margin:1rem 0 .55rem}.process-card p{color:rgba(255,255,255,.78)}.testimonials-section{background:#fff}.testimonial-wrap{max-width:900px;margin:auto;text-align:center;padding:2.5rem}.testimonial-wrap>i{font-size:4rem;color:#f1c4c7}.testimonial-wrap p{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:1.5rem;line-height:1.7;color:#1c3042}.testimonial-wrap h4{font-size:1rem;margin-top:1.5rem}.testimonial-wrap span{color:var(--muted);font-size:.9rem}.testimonial-controls{text-align:center;margin-top:1rem}.testimonial-controls button{border:0;width:46px;height:46px;border-radius:50%;margin:0 5px;background:#f2f4f7;color:var(--navy)}.testimonial-controls button:hover{background:var(--red);color:#fff}.blog-section{background:#f7f9fb}.blog-card{height:100%;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 14px 35px rgba(10,34,54,.08);transition:.35s}.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.blog-card img{width:100%;height:240px;object-fit:cover}.blog-body{padding:1.7rem}.blog-body>span{color:var(--red);font-weight:900;text-transform:uppercase;font-size:.75rem;letter-spacing:.1em}.blog-body h3{font-size:1.25rem;line-height:1.45;margin:.7rem 0}.blog-body p{color:var(--muted);line-height:1.7}.blog-body a{font-weight:900;color:var(--navy)}.careers-cta{background:linear-gradient(90deg,#071d31,#0a568f);color:#fff;padding:70px 0}.careers-cta h2{font-size:clamp(1.8rem,3vw,3rem);font-weight:900}.careers-cta p{color:#c4d5e3;margin:0;line-height:1.8}.faq-section{background:#fff}.accordion-item{border:1px solid #e5ebf0!important;border-radius:14px!important;margin-bottom:12px;overflow:hidden}.accordion-button{font-weight:800;padding:1.2rem 1.3rem}.accordion-button:not(.collapsed){background:#fff3f4;color:var(--red);box-shadow:none}.accordion-button:focus{box-shadow:none}.accordion-body{color:var(--muted);line-height:1.8}.newsletter-section{background:#f5f7fa;padding:0 0 110px}.newsletter-box{background:linear-gradient(135deg,#081d33,#143f62 62%,#7e0710);border-radius:28px;padding:3.4rem;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.newsletter-box:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;border:45px solid rgba(255,255,255,.05);right:-45px;top:-70px}.newsletter-box h2{font-size:clamp(1.8rem,3vw,3rem)}.newsletter-box p,.form-check-label{color:#cfdae4}.newsletter-form{position:relative;z-index:2}.newsletter-form .form-control{min-height:58px;border:0;padding-left:1.2rem}.newsletter-form .btn{min-width:155px}.newsletter-message,.form-message{margin-top:12px;font-weight:700}.contact-section{background:linear-gradient(180deg,#fff,#f7f9fb)}.contact-info-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e8edf1;border-radius:16px;padding:1.1rem 1.25rem;margin-bottom:14px}.contact-info-card>i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff0f1;color:var(--red);font-size:1.25rem}.contact-info-card span{display:block;color:var(--muted);font-size:.8rem}.contact-info-card a,.contact-info-card strong{color:#1b3043;font-weight:800}.enquiry-form{background:#fff;border-radius:24px;padding:2.3rem;box-shadow:var(--shadow)}.form-label{font-weight:800;font-size:.88rem}.form-control,.form-select{min-height:52px;border:1px solid #dce4ea;border-radius:11px}.form-control:focus,.form-select:focus{border-color:#e06b72;box-shadow:0 0 0 .2rem rgba(179,13,23,.09)}textarea.form-control{min-height:auto}.branches-section{padding:0 0 110px;background:#f7f9fb}.branch-card{height:100%;display:flex;justify-content:space-between;align-items:end;gap:25px;background:linear-gradient(135deg,#8b0710,#c71d27);border-radius:22px;padding:2rem;color:#fff;box-shadow:var(--shadow)}.branch-card.branch-blue{background:linear-gradient(135deg,#073b62,#0d6da9)}.branch-card span{font-size:.74rem;letter-spacing:.12em;font-weight:900;color:#ffd2d5}.branch-card h3{font-size:1.7rem;margin:.4rem 0}.branch-card p{margin:0;color:rgba(255,255,255,.82);line-height:1.7}.site-footer{background:#061725;color:#b8c8d4}.footer-main{padding:85px 0 60px}.footer-logo{width:250px;background:#fff;border-radius:12px;padding:7px;margin-bottom:1.4rem}.site-footer h3{font-size:1rem;color:#fff;margin-bottom:1.2rem}.site-footer p{line-height:1.75}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin-bottom:.75rem}.site-footer a{color:#b8c8d4}.site-footer a:hover{color:#fff}.footer-social{display:flex;gap:10px}.footer-social a{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.08)}.footer-address{display:flex;gap:12px}.footer-address i{color:#ff6f76;margin-top:2px}.footer-address strong{color:#fff}.footer-address p{margin-top:5px}.footer-contact-row{display:flex;flex-wrap:wrap;gap:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}.footer-contact-row i{color:#ff6f76}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:20px}.footer-bottom p{margin:0}.footer-bottom div{display:flex;gap:20px}.whatsapp-float{position:fixed;right:22px;bottom:24px;z-index:1030;background:#1ebd68;color:#fff;border-radius:999px;padding:12px 18px;display:flex;align-items:center;gap:8px;font-weight:900;box-shadow:0 12px 30px rgba(21,154,83,.32)}.whatsapp-float i{font-size:1.35rem}.whatsapp-float:hover{color:#fff;transform:translateY(-3px)}.back-to-top{position:fixed;right:26px;bottom:86px;width:45px;height:45px;border:0;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s;z-index:1029}.back-to-top.show{opacity:1;visibility:visible} @media(min-width:1200px){.navbar .dropdown:hover>.dropdown-menu{display:block}.dropend:hover>.dropdown-menu{display:block;left:100%;top:-8px;margin-left:8px}} @media(max-width:1199.98px){.brand-logo{width:220px}.navbar-collapse{max-height:calc(100vh - 115px);overflow-y:auto;padding:1rem 0 1.5rem}.navbar-nav{align-items:stretch!important}.nav-link{padding:.85rem 1rem!important}.dropdown-menu{position:static!important;transform:none!important;min-width:100%;box-shadow:none;border-left:3px solid #f0c4c7;margin:.3rem 0 .6rem 1rem}.dropend .dropdown-menu{margin-left:1rem}.site-header .btn-brand{margin-left:1rem!important;margin-right:1rem}} @media(max-width:991.98px){.hero-image,.min-vh-hero{height:650px;min-height:650px}.hero-content h1,.hero-content h2{font-size:3.2rem}.carousel-control-prev,.carousel-control-next{display:none}.carousel-indicators{bottom:25px}.about-section{padding-top:100px}.timeline:before{left:12px}.timeline-item,.timeline-item:nth-child(even){width:100%;margin-left:0;padding:0 0 36px 45px}.timeline-dot,.timeline-item:nth-child(even) .timeline-dot{left:1px;right:auto}.branch-card{align-items:flex-start;flex-direction:column}.footer-bottom{flex-direction:column}} @media(max-width:767.98px){ .section-pad{padding:78px 0} .brand-logo{width:190px} /*.hero-image,.min-vh-hero{height:610px;min-height:610px}*/ .hero-image,.min-vh-hero{height:auto;min-height:auto; object-fit: contain; margin-top: 0px;} .hero-content h1,.hero-content h2{font-size:2.35rem} .hero-content p{font-size:1rem;line-height:1.65} .hero-actions .btn{width:100%}.about-visual{padding:0 0 35px} .main-about-img{min-height:390px}.about-badge{right:12px}.newsletter-box{padding:2rem 1.35rem} .newsletter-form .input-group{display:block} .newsletter-form .form-control,.newsletter-form .btn{width:100%;border-radius:10px!important} .newsletter-form .btn{margin-top:10px}.enquiry-form{padding:1.4rem}.footer-logo{width:220px} .whatsapp-float{width:52px;height:52px;padding:0;justify-content:center} .project-card{height:360px} .content-feature-list div{display: block !important;} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}} /* ===== 2026 INTERACTION & CORPORATE UI ENHANCEMENTS ===== */ :root{--cursor-x:50%;--cursor-y:50%;--accent-red:#c91520;--accent-cyan:#25b9d7;--accent-violet:#7553e7} html{scroll-padding-top:110px} body{overflow-x:hidden} body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;background:radial-gradient(420px circle at var(--cursor-x) var(--cursor-y),rgba(201,21,32,.045),transparent 72%);opacity:.9} .page-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#c91520,#ff6a4d,#25b9d7,#7553e7);z-index:10050;box-shadow:0 0 18px rgba(201,21,32,.5);transition:width .08s linear} .cursor-dot,.cursor-ring,.cursor-label{position:fixed;left:0;top:0;pointer-events:none;z-index:10060;opacity:0;will-change:transform} .cursor-dot{width:7px;height:7px;border-radius:50%;background:#c91520;box-shadow:0 0 14px rgba(201,21,32,.65)} .cursor-ring{width:38px;height:38px;border:1.5px solid rgba(201,21,32,.65);border-radius:50%;background:rgba(255,255,255,.07);backdrop-filter:blur(2px);transition:width .25s,height .25s,border-color .25s,background .25s} .cursor-label{font-size:9px;font-weight:900;letter-spacing:.12em;color:#fff;background:#0b2235;border-radius:999px;padding:6px 8px;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .2s} .cursor-active .cursor-ring{width:58px;height:58px;border-color:rgba(201,21,32,.9);background:rgba(201,21,32,.08)} .cursor-view .cursor-ring{width:76px;height:76px;border-color:rgba(255,255,255,.72);background:rgba(8,29,51,.44);backdrop-filter:blur(8px)} .cursor-view .cursor-label{opacity:1!important;transform:translate(-50%,-50%) scale(1)} .site-header{transition:box-shadow .35s,background .35s,transform .35s} .site-header.header-scrolled{background:rgba(255,255,255,.93);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 14px 45px rgba(6,23,37,.12)} .navbar-brand{position:relative} .navbar-brand:after{content:"";position:absolute;left:6%;right:6%;bottom:-8px;height:2px;background:linear-gradient(90deg,transparent,#c91520,transparent);transform:scaleX(0);transition:transform .35s} .navbar-brand:hover:after{transform:scaleX(1)} .nav-link{position:relative} .nav-link:after{content:"";position:absolute;left:1rem;right:1rem;bottom:.55rem;height:2px;border-radius:5px;background:linear-gradient(90deg,#c91520,#ff6a4d);transform:scaleX(0);transform-origin:right;transition:transform .3s ease} .nav-link:hover:after,.nav-link.active:after{transform:scaleX(1);transform-origin:left} .dropdown-menu{transform-origin:top center;animation:dropdownReveal .28s ease both} @keyframes dropdownReveal{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .hero-section:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.04) 48%,transparent 56%);transform:translateX(-100%);animation:heroSheen 9s ease-in-out infinite;z-index:2} /*@keyframes heroSheen{0%,60%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}} .hero-image{animation:heroKenBurns 9s ease-out both} .carousel-item.active .hero-image{animation:heroKenBurns 8s ease-out both}*/ @keyframes heroKenBurns{from{transform:scale(1.02)}to{transform:scale(1.11) translate3d(-1.2%,0,0)}} .hero-content .hero-kicker,.hero-content h1,.hero-content h2,.hero-content p,.hero-actions{opacity:0;transform:translateY(28px)} .carousel-item.active .hero-kicker{animation:heroText .7s .15s forwards} .carousel-item.active h1,.carousel-item.active h2{animation:heroText .8s .28s forwards} .carousel-item.active p{animation:heroText .8s .42s forwards} .carousel-item.active .hero-actions{animation:heroText .8s .56s forwards} @keyframes heroText{to{opacity:1;transform:translateY(0)}} .hero-overlay-violet{background:linear-gradient(90deg,rgba(35,19,72,.92),rgba(94,45,145,.55),rgba(10,24,45,.12))} .carousel-indicators button{position:relative;overflow:hidden} .carousel-indicators button:after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left} .carousel-indicators .active:after{animation:indicatorFill 6.5s linear forwards} @keyframes indicatorFill{to{transform:scaleX(1)}} .js-magnetic{will-change:transform;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,color .25s ease} .js-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease,box-shadow .3s ease} .js-tilt>*{transform:translateZ(8px)} .product-card:before,.service-card:before,.blog-card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(130deg,rgba(255,255,255,.55),transparent 45%,rgba(201,21,32,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .35s} .product-card:hover:before,.service-card:hover:before,.blog-card:hover:before{opacity:1} .section-pad{position:relative} .section-pad .container,.section-pad .container-fluid{position:relative;z-index:2} .section-pad:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;filter:blur(90px);opacity:.08;right:-140px;top:10%;background:linear-gradient(135deg,#c91520,#25b9d7);pointer-events:none} .whatsapp-float{right:18px;bottom:auto;top:50%;transform:translateY(-50%);padding:0;border-radius:18px 0 0 18px;overflow:visible;min-width:64px;min-height:64px;background:linear-gradient(135deg,#1fc870,#13a95a);box-shadow:0 18px 45px rgba(17,153,80,.35);border:1px solid rgba(255,255,255,.35)} .whatsapp-float:hover{transform:translateY(-50%) translateX(-5px);color:#fff} .whatsapp-icon{width:64px;height:64px;display:grid;place-items:center;font-size:1.9rem;position:relative;z-index:2} .whatsapp-copy{display:flex;flex-direction:column;justify-content:center;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .35s ease,opacity .3s ease,padding .35s ease;padding:0} .whatsapp-copy small{font-weight:600;opacity:.85;font-size:.7rem}.whatsapp-copy strong{font-size:.84rem} .whatsapp-float:hover .whatsapp-copy,.whatsapp-float:focus .whatsapp-copy{max-width:150px;opacity:1;padding-right:18px} .whatsapp-pulse{position:absolute;width:64px;height:64px;border-radius:18px;inset:0;border:2px solid rgba(31,200,112,.55);animation:waPulse 2.2s infinite;pointer-events:none} @keyframes waPulse{0%{transform:scale(.82);opacity:.8}70%,100%{transform:scale(1.45);opacity:0}} .floating-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;opacity:.45;animation:orbFloat 7s ease-in-out infinite alternate} @keyframes orbFloat{to{transform:translate3d(20px,-28px,0) scale(1.08)}} @media(pointer:coarse),(max-width:991.98px){.cursor-dot,.cursor-ring,.cursor-label{display:none}.whatsapp-float{right:14px;top:50%;min-width:56px;min-height:56px;border-radius:16px}.whatsapp-icon{width:56px;height:56px}.whatsapp-copy{display:none}.whatsapp-pulse{width:56px;height:56px;border-radius:16px}} @media(prefers-reduced-motion:reduce){.hero-section:after,.hero-image,.whatsapp-pulse{animation:none!important}.cursor-dot,.cursor-ring,.cursor-label{display:none!important}} /* ===== CORPORATE PRODUCTS MEGA MENU ===== */ .mega-menu-item{position:static!important} .products-mega-menu{ left:50%!important;right:auto!important;top:calc(100% + 2px)!important; width:min(1240px,calc(100vw - 36px));padding:0!important;margin:0!important; transform:translateX(-50%)!important;border-radius:0 0 24px 24px!important; overflow:hidden;background:rgba(255,255,255,.985);border:1px solid rgba(13,41,65,.08)!important; box-shadow:0 28px 80px rgba(4,25,43,.2)!important;backdrop-filter:blur(20px); } .products-mega-menu.show{display:block} .mega-menu-header{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 28px 20px;background:linear-gradient(135deg,#071c30 0%,#0d3f64 65%,#7e0711 145%);color:#fff} .mega-menu-header h3{font-size:1.45rem;margin:.25rem 0 .3rem;font-weight:900} .mega-menu-header p{margin:0;max-width:720px;color:#c9d8e5;font-size:.88rem;line-height:1.6} .mega-eyebrow{font-size:.68rem;letter-spacing:.16em;font-weight:900;color:#ff9da4} .mega-all-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:800;border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:.75rem 1rem;transition:.25s} .mega-all-link:hover{background:#fff;color:var(--navy);transform:translateY(-2px)} .mega-menu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:20px 22px 18px;background:linear-gradient(180deg,#fff,#f6f9fb)} .mega-product-card{--mega-accent:var(--red);min-width:0;background:#fff;border:1px solid #e5ebf0;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(8,35,57,.06);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease} .mega-product-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(7,30,49,.14);border-color:color-mix(in srgb,var(--mega-accent) 35%,#e5ebf0)} .mega-card-red{--mega-accent:#b30d17}.mega-card-blue{--mega-accent:#0879ba}.mega-card-green{--mega-accent:#15966a}.mega-card-gold{--mega-accent:#d08a0b}.mega-card-purple{--mega-accent:#7850d8} .mega-image-link{display:block;height:104px;position:relative;overflow:hidden;background:#dfe7ed} .mega-image-link:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,20,33,.52),transparent 70%)} .mega-image-link img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease,filter .4s ease} .mega-product-card:hover .mega-image-link img{transform:scale(1.09);filter:saturate(1.12)} .mega-icon{position:absolute;right:11px;bottom:10px;z-index:2;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--mega-accent);color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.2)} .mega-card-body{padding:13px 14px 15px;border-top:3px solid var(--mega-accent)} .mega-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#12293c;font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:.84rem;font-weight:900;line-height:1.35;margin-bottom:9px} .mega-card-title i{color:var(--mega-accent);font-size:.75rem;transition:transform .2s} .mega-product-card:hover .mega-card-title i{transform:translateX(3px)} .mega-card-body ul{list-style:none;padding:0;margin:0} .mega-card-body li{margin:0;border-top:1px dashed #e4e9ee} .mega-card-body li:first-child{border-top:0} .mega-card-body li a{display:block;padding:5px 0;color:#617284;font-size:.7rem;line-height:1.35;transition:.2s} .mega-card-body li a:hover{color:var(--mega-accent);padding-left:4px} .mega-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;background:#fff;border-top:1px solid #e6ecf1} .mega-support-card{display:flex;align-items:center;gap:13px;min-width:0} .mega-support-icon{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;background:#fff0f1;color:var(--red);font-size:1.25rem} .mega-support-card strong,.mega-support-card small{display:block}.mega-support-card strong{color:#183044;font-size:.86rem}.mega-support-card small{color:#6d7c89;font-size:.72rem;margin-top:3px} @media(min-width:1200px){ .mega-menu-item:hover>.products-mega-menu{display:block;animation:megaMenuReveal .3s cubic-bezier(.2,.8,.2,1) both} .products-mega-menu{animation:megaMenuReveal .3s cubic-bezier(.2,.8,.2,1) both} @keyframes megaMenuReveal{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}} } @media(max-width:1199.98px){ .mega-menu-item{position:relative!important} .products-mega-menu{position:static!important;width:100%!important;transform:none!important;border-radius:14px!important;margin:.35rem 0 .8rem!important;box-shadow:none!important;border-left:3px solid #efb8bc!important;max-height:none!important;overflow:visible!important} .mega-menu-header{padding:18px;display:block}.mega-menu-header p{font-size:.8rem}.mega-all-link{margin-top:12px} .mega-menu-grid{grid-template-columns:1fr;padding:12px;gap:10px} .mega-product-card{display:grid;grid-template-columns:104px 1fr;align-items:stretch} .mega-image-link{height:100%;min-height:116px}.mega-card-body{border-top:0;border-left:3px solid var(--mega-accent)} .mega-card-title{font-size:.82rem}.mega-card-body li a{font-size:.72rem;padding:4px 0} .mega-menu-footer{align-items:stretch;flex-direction:column;padding:15px}.mega-menu-footer .btn{width:100%} } @media(max-width:575.98px){ .mega-menu-header h3{font-size:1.15rem}.mega-menu-header p{display:none} .mega-product-card{grid-template-columns:82px 1fr}.mega-image-link{min-height:112px} .mega-card-body{padding:11px 12px}.mega-card-body li:nth-child(n+4){display:none} .mega-support-card small{display:none} } /* ===== PRODUCTS MEGA MENU HOVER-STABILITY FIX ===== */ @media (min-width:1200px){ /* Remove the visual hover gap between the navigation item and mega panel. */ .products-mega-menu{ top:100%!important; } /* Keep the panel rendered while JavaScript hover-intent is active. */ .mega-menu-item.mega-hover-open>.products-mega-menu, .products-mega-menu.mega-hover-open{ display:block!important; opacity:1; visibility:visible; pointer-events:auto; } /* Transparent interaction bridge protects against tiny pointer gaps. */ .products-mega-menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; background:transparent; } } /* ===== Module-aligned navigation and inner pages ===== */ .about-mega-menu{width:min(980px,calc(100vw - 48px));padding:0;border:0;border-radius:22px;overflow:hidden;box-shadow:0 28px 70px rgba(14,23,38,.22)} .about-mega-intro{background:linear-gradient(135deg,#151c29,#303d52);color:#fff;padding:28px 32px}.about-mega-intro h3{font-size:1.5rem;margin:.25rem 0}.about-mega-intro p{max-width:760px;color:rgba(255,255,255,.72);margin:0 0 .8rem}.about-mega-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 32px;background:#fff}.about-mega-links h4{font-size:.78rem;color:#b20f17;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}.about-mega-links a{display:block;color:#2b3443;padding:7px 0;border-bottom:1px solid #eef1f5;font-size:.9rem}.about-mega-links a:hover{color:#b20f17;padding-left:5px} .module-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.module-products-menu{width:min(1180px,calc(100vw - 40px))}.module-link-card,.inner-link-card{height:100%;display:block;background:#fff;border:1px solid rgba(26,40,60,.09);border-radius:22px;padding:28px;color:#172132;box-shadow:0 16px 40px rgba(25,39,63,.08);transition:.35s}.module-link-card:hover,.inner-link-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(25,39,63,.16);color:#b20f17}.module-link-card i,.inner-link-card i{font-size:2rem;color:#b20f17}.module-link-card h3,.inner-link-card h3{font-size:1.15rem;margin:18px 0 8px}.module-link-card p,.inner-link-card p{color:#667085;margin:0}.exports-home-section{background:linear-gradient(180deg,#f7f9fc,#fff)} .inner-hero{position:relative;padding:120px 0 90px;color:#fff;background:url('../images/section-bg/about-bg.png') center/cover}.inner-hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(12,20,32,.95),rgba(178,15,23,.72))}.inner-hero h1{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:clamp(2.5rem,5vw,4.8rem);font-weight:900;max-width:930px}.inner-hero p{font-size:1.15rem;max-width:800px;color:rgba(255,255,255,.82)}.inner-hero .breadcrumb a{color:#fff}.inner-hero .breadcrumb-item.active{color:rgba(255,255,255,.7)}.inner-hero .breadcrumb-item+.breadcrumb-item:before{color:rgba(255,255,255,.55)} .inner-content-section h2{font-size:clamp(2rem,4vw,3.4rem)} .content-feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px} .content-feature-list div{display:flex;gap:10px;align-items:center;background:#f7f9fc;padding:14px;border-radius:12px} .content-feature-list i{color:#b20f17} .inner-side-panel{background:#fff;border-radius:24px;padding:24px;box-shadow:0 20px 55px rgba(24,38,60,.12);position:sticky;top:130px}.inner-side-panel img{width:100%;height:240px;object-fit:cover;border-radius:17px;margin-bottom:22px}.related-pages-section{background:#f6f8fb}.captcha-placeholder{border:1px dashed #adb5bd;border-radius:12px;padding:16px;background:#f7f9fb;color:#667085}.map-frame{height:420px;border-radius:22px;overflow:hidden;box-shadow:0 18px 45px rgba(22,34,52,.12)}.map-frame iframe{width:100%;height:100%;border:0}.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sitemap-grid a{background:#fff;padding:14px 16px;border-radius:10px;box-shadow:0 8px 22px rgba(22,34,52,.07);color:#253044}.sitemap-grid a:hover{background:#b20f17;color:#fff} @media(min-width:1200px){.corporate-dropdown:hover>.dropdown-menu{display:block;margin-top:0}.corporate-dropdown>.dropdown-menu:before,.mega-menu-item>.dropdown-menu:before{content:'';position:absolute;left:0;right:0;top:-18px;height:20px}.navbar .nav-link{font-size:.84rem;padding-left:.6rem!important;padding-right:.6rem!important}} @media(max-width:1199.98px){.about-mega-menu,.module-products-menu{width:100%;max-width:none;border-radius:14px;max-height:none}.about-mega-links{grid-template-columns:1fr;padding:18px}.about-mega-intro{padding:20px}.module-product-grid{grid-template-columns:1fr}.navbar-collapse{max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:40px}} @media(max-width:767.98px){.content-feature-list,.sitemap-grid{grid-template-columns:1fr}.inner-hero{padding:90px 0 65px}.inner-side-panel{position:static}.about-mega-intro p{font-size:.9rem}} /* ===== IMAGE-LED ABOUT US MEGA MENU ===== */ .about-image-mega-menu{ left:50%!important; right:auto!important; top:100%!important; width:min(1180px,calc(100vw - 40px))!important; padding:0!important; margin:0!important; transform:translateX(-50%)!important; border-radius:0 0 24px 24px!important; overflow:hidden; background:rgba(255,255,255,.99); border:1px solid rgba(13,41,65,.08)!important; box-shadow:0 28px 80px rgba(4,25,43,.2)!important; } .about-menu-header{background:linear-gradient(135deg,#111b2b 0%,#243b55 58%,#8d0d16 145%)} .about-image-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:20px 22px 18px;background:linear-gradient(180deg,#fff,#f6f9fb)} .about-image-card .mega-image-link{height:118px} .about-image-card .mega-card-body li a{font-size:.72rem} .about-menu-footer{background:linear-gradient(180deg,#fff,#fbfcfd)} @media(min-width:1200px){ .corporate-dropdown{position:static!important} .corporate-dropdown:hover>.about-image-mega-menu{display:block;animation:aboutMenuReveal .3s cubic-bezier(.2,.8,.2,1) both} @keyframes aboutMenuReveal{from{opacity:0;transform:translateX(-50%) translateY(12px) scale(.986)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}} .about-image-mega-menu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:transparent} } @media(max-width:1199.98px){ .corporate-dropdown{position:relative!important} .about-image-mega-menu{position:static!important;width:100%!important;transform:none!important;border-radius:14px!important;margin:.35rem 0 .8rem!important;box-shadow:none!important;max-height:none!important;overflow:visible!important} .about-image-grid{grid-template-columns:1fr;padding:12px;gap:10px} .about-image-card{display:grid;grid-template-columns:104px 1fr;align-items:stretch} .about-image-card .mega-image-link{height:100%;min-height:118px} .about-image-card .mega-card-body{border-top:0;border-left:3px solid var(--mega-accent)} } @media(max-width:575.98px){ .about-image-card{grid-template-columns:82px 1fr} .about-image-card .mega-image-link{min-height:112px} .about-image-card .mega-card-body li:nth-child(n+5){display:none} } /* ========================================================= 2026 CORPORATE TWO-TIER HEADER — PROMPT-STYLE REFINEMENT ========================================================= */ .topbar{ background:#ffffff!important; color:#1d2632!important; border-top:3px solid var(--red); border-bottom:1px solid #edf0f3; font-size:.88rem; position:relative; z-index:2105; } .topbar .container-xxl{ min-height:54px!important; padding-left:340px; } .topbar-left{ flex:1; display:grid!important; grid-template-columns:minmax(260px,1.35fr) minmax(190px,.8fr) minmax(260px,1fr); gap:22px!important; align-items:center; } .topbar-left span,.topbar-left a{ color:#202936!important; font-weight:700; white-space:nowrap; } .topbar i{ color:#e6343d!important; margin-right:8px!important; font-size:1rem; } .topbar-right{ gap:8px!important; margin-left:24px; } .topbar-right>span{display:none} .topbar-right a{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:#fff!important; background:#112238; box-shadow:0 7px 16px rgba(13,33,53,.12); transition:transform .25s ease,background .25s ease; } .topbar-right a:nth-of-type(2){background:#df2632} .topbar-right a:nth-of-type(3){background:#1268a4} .topbar-right a:nth-of-type(4){background:#e43732} .topbar-right a:hover{transform:translateY(-3px)} .topbar-right a i{color:#fff!important;margin:0!important} .site-header{ background:#fff!important; border-bottom:1px solid #e9edf1; box-shadow:0 11px 30px rgba(12,33,53,.08)!important; backdrop-filter:none!important; z-index:2100!important; overflow:visible!important; } .site-header .navbar{ min-height:106px; padding:0!important; position:relative; overflow:visible!important; } .site-header .navbar>.container-xxl{ min-height:106px; padding-left:340px; position:relative; overflow:visible!important; } .navbar-brand{ position:absolute; left:12px; top:-55px; width:300px; height:158px; margin:0!important; padding:14px 22px!important; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:0 0 4px 4px; border-left:1px solid #edf0f3; border-right:1px solid #edf0f3; border-bottom:3px solid #e6343d; box-shadow:0 13px 30px rgba(9,31,50,.10); z-index:2125; } .brand-logo{ width:270px!important; max-width:100%!important; max-height:132px!important; object-fit:contain!important; } .navbar-collapse{overflow:visible!important} .navbar-nav{ margin-left:auto!important; gap:.16rem!important; align-items:center; } .navbar .nav-link{ position:relative; padding:1.05rem .67rem!important; border-radius:0!important; background:transparent!important; font-size:.82rem!important; font-weight:800!important; color:#232b35!important; letter-spacing:.01em; } .navbar .nav-link::after{ transition:transform .25s ease; } .navbar .nav-link:not(.dropdown-toggle)::before, .navbar .dropdown-toggle::before{ content:""; position:absolute; left:50%; right:50%; bottom:8px; height:2px; background:linear-gradient(90deg,var(--red),#ff6d45); transition:left .28s ease,right .28s ease; } .navbar .nav-link:hover::before, .navbar .nav-link.active::before, .navbar .dropdown.show>.nav-link::before{ left:12px; right:12px; } .navbar .nav-link:hover,.navbar .nav-link.active, .navbar .dropdown.show>.nav-link{ color:var(--red)!important; } .site-header .btn-brand{ border-radius:8px!important; padding:.78rem 1rem!important; white-space:nowrap; } /* Keep all mega menus in a dedicated layer above the banner. */ .site-header .dropdown-menu{ z-index:2200!important; } .hero-section,.hero-section .carousel,.hero-section .carousel-inner, .hero-section .carousel-item{ z-index:1!important; } @media (min-width:1200px) and (max-width:1399.98px){ .topbar .container-xxl,.site-header .navbar>.container-xxl{padding-left:280px} .navbar-brand{width:250px} .brand-logo{width:225px!important} .navbar .nav-link{font-size:.75rem!important;padding-left:.47rem!important;padding-right:.47rem!important} .site-header .btn-brand{font-size:.75rem;padding:.7rem .72rem!important} } @media (max-width:1199.98px){ .site-header .navbar{min-height:84px;padding:.35rem 0!important} .site-header .navbar>.container-xxl{min-height:76px;padding-left:12px!important} .navbar-brand{ position:static; width:auto; height:auto; padding:4px 0!important; border:0; box-shadow:none; background:transparent; } .brand-logo{width:220px!important;max-height:76px!important} .navbar-toggler{border:1px solid #d8dee4;border-radius:9px;padding:.55rem .7rem} .navbar-collapse{ margin-top:9px; padding:12px 14px 32px; background:#fff; border-top:1px solid #edf0f3; box-shadow:0 20px 35px rgba(9,30,49,.10); } .navbar .nav-link{padding:.85rem .7rem!important;font-size:.88rem!important} .navbar .nav-link::before{display:none!important} } @media (max-width:575.98px){ .brand-logo{width:185px!important;max-height:66px!important} .site-header .navbar,.site-header .navbar>.container-xxl{min-height:72px} } /* ========================================================= 2026 FRONTPAGE ENHANCEMENT — HEADER + SECTION BACKGROUNDS ========================================================= */ :root{ --section-overlay-light: rgba(255,255,255,.86); --section-overlay-dark: rgba(7,27,46,.84); } /* Desktop logo sizing refinement */ /*.site-header .navbar>.container-xxl{padding-left:370px!important}*/ .topbar .container-xxl{padding-left:370px!important} .navbar-brand{ top:-50px!important; width:325px!important; height:142px!important; padding:10px 18px!important; border-radius:0 0 16px 16px!important; } .brand-logo{ width:292px!important; max-height:112px!important; } .navbar-brand:after{display:none!important} /* Section background-image treatment */ .about-section, .module-highlights-section, .products-section, .services-section, .timeline-section, .vision-section, .projects-section, .exports-home-section, .blog-section, .faq-section, .contact-section, .branches-section{ position:relative; overflow:hidden; isolation:isolate; } .about-section > .container-fluid, .module-highlights-section > .container-fluid, .products-section > .container-fluid, .services-section > .container-fluid, .timeline-section > .container-fluid, .vision-section > .container-fluid, .projects-section > .container-fluid, .exports-home-section > .container-fluid, .blog-section > .container-fluid, .faq-section > .container-fluid, .contact-section > .container-fluid, .branches-section > .container-fluid{ position:relative; z-index:2; } .about-section::before, .module-highlights-section::before, .products-section::before, .services-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before{ content:""; position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:.20; transform:scale(1.06); animation:sectionPan 18s ease-in-out infinite alternate; z-index:0; } .about-section::after, .module-highlights-section::after, .products-section::after, .timeline-section::after, .vision-section::after, .projects-section::after, .exports-home-section::after, .blog-section::after, .faq-section::after, .contact-section::after, .branches-section::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--section-overlay-light),rgba(255,255,255,.92)); z-index:1; } .services-section::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(7,27,46,.92),rgba(18,61,93,.88)); z-index:1; } .about-section::before{background-image:url('../images/section-bg/about-bg.png')} .module-highlights-section::before{background-image:url('../images/section-bg/modules-bg.png')} .products-section::before{background-image:url('../images/section-bg/products-bg.png')} .services-section::before{background-image:url('../images/section-bg/services-bg.png'); opacity:.28} .timeline-section::before{background-image:url('../images/section-bg/history-bg.png')} .vision-section::before{background-image:url('../images/section-bg/mission-bg.png')} .projects-section::before{background-image:url('../images/section-bg/projects-bg.png')} .exports-home-section::before{background-image:url('../images/section-bg/exports-bg.png')} .blog-section::before{background-image:url('../images/section-bg/blog-bg.png')} .faq-section::before{background-image:url('../images/section-bg/faq-bg.png')} .contact-section::before, .branches-section::before{background-image:url('../images/section-bg/contact-bg.png')} @keyframes sectionPan{ 0%{transform:scale(1.05) translate3d(0,0,0)} 50%{transform:scale(1.10) translate3d(0,-10px,0)} 100%{transform:scale(1.07) translate3d(-14px,10px,0)} } @keyframes floatGlow{ 0%,100%{transform:translateY(0) translateX(0); opacity:.22} 50%{transform:translateY(-14px) translateX(10px); opacity:.36} } .about-section .about-pattern, .products-section .section-heading::after, .blog-section .section-heading::after, .contact-section .section-heading::after{ animation:floatGlow 8s ease-in-out infinite; } .products-section .section-heading::after, .blog-section .section-heading::after, .contact-section .section-heading::after{ content:""; display:block; width:120px; height:4px; border-radius:999px; margin:18px auto 0; background:linear-gradient(90deg,var(--red),var(--blue),var(--gold)); } .contact-section .section-heading.text-start::after{margin-left:0;margin-right:0} /* Slight richness on cards so they stand out over image backgrounds */ .product-card, .blog-card, .enquiry-form, .contact-info-card, .timeline-content, .accordion-item, .module-link-card{ backdrop-filter:saturate(140%) blur(2px); } /* Mobile adjustments */ @media (min-width:1200px) and (max-width:1399.98px){ .topbar .container-xxl,.site-header .navbar>.container-xxl{padding-left:320px!important} .navbar-brand{width:280px!important;height:130px!important;top:-44px!important} .brand-logo{width:248px!important;max-height:100px!important} } @media (max-width:1199.98px){ .topbar .container-xxl{padding-left:12px!important} .brand-logo{width:230px!important;max-height:84px!important} } @media (max-width:767.98px){ .brand-logo{width:205px!important;max-height:76px!important} .about-section::before, .module-highlights-section::before, .products-section::before, .services-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before{opacity:.16} } @media (prefers-reduced-motion:reduce){ .about-section::before, .module-highlights-section::before, .products-section::before, .services-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before, .products-section .section-heading::after, .blog-section .section-heading::after, .contact-section .section-heading::after, .about-pattern{animation:none!important} } /* ========================================================= FINAL HEADER SCALE + PHOTOGRAPHIC SECTION BACKGROUNDS ========================================================= */ @media (min-width:1400px){ .topbar .container-xxl, .site-header .navbar>.container-xxl{padding-left:315px!important} .navbar-brand{ width:270px!important; height:128px!important; top:-44px!important; padding:10px 16px!important; } .brand-logo{ width:238px!important; max-height:98px!important; } } @media (min-width:1200px) and (max-width:1399.98px){ .topbar .container-xxl, .site-header .navbar>.container-xxl{padding-left:270px!important} .navbar-brand{ width:232px!important; height:116px!important; top:-38px!important; } .brand-logo{ width:205px!important; max-height:88px!important; } } @media (max-width:1199.98px){ .brand-logo{width:205px!important;max-height:76px!important} } @media (max-width:575.98px){ .brand-logo{width:178px!important;max-height:66px!important} } .about-section::before{background-image:url('../images/section-bg/about-photo.jpg')!important} .module-highlights-section::before{background-image:url('../images/section-bg/modules-photo.jpg')!important} .products-section::before{background-image:url('../images/section-bg/products-photo.jpg')!important} .services-section::before{background-image:url('../images/section-bg/services-photo.jpg')!important} .timeline-section::before{background-image:url('../images/section-bg/history-photo.jpg')!important} .vision-section::before{background-image:url('../images/section-bg/mission-photo.jpg')!important} .projects-section::before{background-image:url('../images/section-bg/projects-photo.jpg')!important} .exports-home-section::before{background-image:url('../images/section-bg/exports-photo.jpg')!important} .blog-section::before{background-image:url('../images/section-bg/blog-photo.jpg')!important} .faq-section::before{background-image:url('../images/section-bg/faq-photo.jpg')!important} .contact-section::before, .branches-section::before{background-image:url('../images/section-bg/contact-photo.jpg')!important} .about-section::before, .module-highlights-section::before, .products-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before{ opacity:.17!important; background-attachment:scroll; filter:saturate(.82) contrast(.96); animation:softSectionZoom 24s ease-in-out infinite alternate!important; } .services-section::before{ opacity:.25!important; filter:saturate(.75) contrast(.95); animation:softSectionZoom 26s ease-in-out infinite alternate!important; } @keyframes softSectionZoom{ from{transform:scale(1.03) translate3d(0,0,0)} to{transform:scale(1.09) translate3d(-12px,-8px,0)} } .about-section::after, .module-highlights-section::after, .products-section::after, .timeline-section::after, .vision-section::after, .projects-section::after, .exports-home-section::after, .blog-section::after, .faq-section::after, .contact-section::after, .branches-section::after{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.94))!important; } .services-section::after{ background:linear-gradient(135deg,rgba(7,27,46,.91),rgba(18,61,93,.87))!important; } /* Soft glass treatment over photographic section backgrounds */ .product-card, .blog-card, .enquiry-form, .contact-info-card, .timeline-content, .module-link-card, .accordion-item{ background-color:rgba(255,255,255,.92)!important; box-shadow:0 16px 38px rgba(8,30,48,.09)!important; } @media (prefers-reduced-motion:reduce){ .about-section::before, .module-highlights-section::before, .products-section::before, .services-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before{animation:none!important} } /* ========================================================= SECTION PHOTO VISIBILITY INCREASE ========================================================= */ .about-section::before, .module-highlights-section::before, .products-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before{ opacity:.34!important; filter:saturate(1.02) contrast(1.03) brightness(.96)!important; } .services-section::before{ opacity:.46!important; filter:saturate(1.05) contrast(1.05) brightness(.82)!important; } .about-section::after, .module-highlights-section::after, .products-section::after, .timeline-section::after, .vision-section::after, .projects-section::after, .exports-home-section::after, .blog-section::after, .faq-section::after, .contact-section::after, .branches-section::after{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.84))!important; } .services-section::after{ background:linear-gradient(135deg,rgba(7,27,46,.76),rgba(18,61,93,.72))!important; } @media (max-width:767.98px){ .about-section::before, .module-highlights-section::before, .products-section::before, .timeline-section::before, .vision-section::before, .projects-section::before, .exports-home-section::before, .blog-section::before, .faq-section::before, .contact-section::before, .branches-section::before{opacity:.29!important} .services-section::before{opacity:.40!important} } /* ========================================================= FINAL LOGO PROPORTION CORRECTION ========================================================= */ @media (min-width:1400px){ .topbar .container-xxl, .site-header .navbar>.container-xxl{padding-left:285px!important} .navbar-brand{ width:238px!important; height:108px!important; top:-34px!important; padding:8px 14px!important; } .brand-logo{ width:206px!important; max-height:78px!important; } } @media (min-width:1200px) and (max-width:1399.98px){ .topbar .container-xxl, .site-header .navbar>.container-xxl{padding-left:255px!important} .navbar-brand{ width:214px!important; height:100px!important; top:-30px!important; padding:8px 12px!important; } .brand-logo{ width:184px!important; max-height:72px!important; } } @media (max-width:1199.98px){ .brand-logo{ width:195px!important; max-height:72px!important; } } @media (max-width:575.98px){ .brand-logo{ width:170px!important; max-height:60px!important; } } /* ========================================================= HEADER LOGO ALIGNMENT FIX — KEEP LOGO FULLY INSIDE HEADER ========================================================= */ @media (min-width:1400px){ .topbar .container-xxl{ min-height:64px!important; padding-left:320px!important; } .site-header .navbar, .site-header .navbar>.container-xxl{ min-height:132px!important; } .site-header .navbar>.container-xxl{ padding-left:320px!important; } .navbar-brand{ width:258px!important; height:126px!important; top:-12px!important; left:18px!important; padding:10px 16px!important; display:flex!important; align-items:center!important; justify-content:center!important; } .brand-logo{ width:222px!important; max-height:84px!important; margin:0 auto!important; } } @media (min-width:1200px) and (max-width:1399.98px){ .topbar .container-xxl{ min-height:60px!important; padding-left:290px!important; } .site-header .navbar, .site-header .navbar>.container-xxl{ min-height:122px!important; } .site-header .navbar>.container-xxl{ padding-left:290px!important; } .navbar-brand{ width:236px!important; height:116px!important; top:-10px!important; left:16px!important; padding:8px 14px!important; } .brand-logo{ width:204px!important; max-height:78px!important; margin:0 auto!important; } } @media (max-width:1199.98px){ .topbar .container-xxl{min-height:54px!important} .site-header .navbar, .site-header .navbar>.container-xxl{min-height:84px!important} .navbar-brand{ position:static!important; width:auto!important; height:auto!important; padding:6px 0!important; } .brand-logo{ width:195px!important; max-height:72px!important; margin:0!important; } } @media (max-width:575.98px){ .brand-logo{ width:170px!important; max-height:62px!important; } } /* ========================================================= FINAL MODERN CORPORATE COLOUR SYSTEM Built around Shelter Care red, charcoal and white branding ========================================================= */ :root{ --brand-red:#c91422; --brand-red-deep:#850914; --brand-charcoal:#151b24; --brand-navy:#071e33; --brand-blue:#1478bd; --brand-cyan:#22b8cf; --brand-teal:#119b82; --brand-gold:#e4a11b; --brand-violet:#7759d6; --brand-coral:#f05c50; --brand-ice:#eef8fc; --brand-rose:#fff1f3; --brand-shadow:0 20px 55px rgba(7,30,51,.14); } body{ background: radial-gradient(circle at 5% 15%,rgba(201,20,34,.035),transparent 28%), radial-gradient(circle at 95% 30%,rgba(34,184,207,.04),transparent 30%), #fff; } /* Top strip and main header */ .topbar{ border-top-color:var(--brand-red)!important; background:linear-gradient(90deg,#fff 0%,#fff8f8 38%,#f3fbff 100%)!important; } .topbar:after{ content:""; position:absolute; left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--brand-red),var(--brand-coral),var(--brand-gold),var(--brand-cyan),var(--brand-blue)); opacity:.6; } .site-header{ background:linear-gradient(115deg,rgba(255,255,255,.98),rgba(250,252,255,.98))!important; box-shadow:0 14px 42px rgba(7,30,51,.10)!important; } .navbar-brand{ background:linear-gradient(145deg,#fff,#fff8f8)!important; border-bottom-color:var(--brand-red)!important; box-shadow:0 14px 34px rgba(201,20,34,.12)!important; } .navbar .nav-link:hover,.navbar .nav-link.active,.navbar .dropdown.show>.nav-link{ color:var(--brand-red)!important; } .navbar .nav-link:not(.dropdown-toggle)::before,.navbar .dropdown-toggle::before{ background:linear-gradient(90deg,var(--brand-red),var(--brand-coral),var(--brand-gold))!important; height:3px!important; border-radius:99px; } .site-header .btn-brand,.btn-brand{ background:linear-gradient(135deg,var(--brand-red),#ed3845 58%,var(--brand-coral))!important; box-shadow:0 14px 32px rgba(201,20,34,.25)!important; } .site-header .btn-brand:hover,.btn-brand:hover{ background:linear-gradient(135deg,var(--brand-red-deep),var(--brand-red))!important; box-shadow:0 18px 38px rgba(201,20,34,.32)!important; } /* Hero colour polish */ .hero-section{ background:var(--brand-navy); } .hero-section:before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background: radial-gradient(circle at 80% 18%,rgba(34,184,207,.16),transparent 28%), radial-gradient(circle at 18% 78%,rgba(228,161,27,.13),transparent 24%); mix-blend-mode:screen; } .hero-kicker{ padding:.6rem .9rem; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.09); backdrop-filter:blur(8px); } .hero-kicker:before{ background:linear-gradient(90deg,#fff,var(--brand-gold))!important; } .hero-actions .btn-light{ color:var(--brand-red-deep)!important; box-shadow:0 14px 35px rgba(0,0,0,.18); } .hero-actions .btn-light:hover{ background:linear-gradient(135deg,#fff,var(--brand-rose))!important; } .carousel-indicators [data-bs-target]{ background:linear-gradient(90deg,#fff,var(--brand-gold))!important; } .quick-red{background:linear-gradient(135deg,var(--brand-red-deep),var(--brand-red),var(--brand-coral))!important} .quick-blue{background:linear-gradient(135deg,#07385f,var(--brand-blue),var(--brand-cyan))!important} .quick-gold{background:linear-gradient(135deg,#9b6200,var(--brand-gold),#ffc14a)!important} .quick-dark{background:linear-gradient(135deg,var(--brand-charcoal),#143c59,var(--brand-teal))!important} /* Colourful section separators */ .section-pad:after{ content:""; position:absolute; left:50%;bottom:0; width:min(1160px,82%);height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(201,20,34,.28),rgba(34,184,207,.26),transparent); z-index:4; } .section-heading .eyebrow,.eyebrow{ color:var(--brand-red)!important; background:linear-gradient(90deg,var(--brand-red),var(--brand-coral),var(--brand-gold)); -webkit-background-clip:text;background-clip:text;color:transparent!important; } .section-heading h2{ color:var(--brand-navy); } .section-heading h2:after{ content:""; display:block; width:78px;height:4px; margin-top:16px; border-radius:99px; background:linear-gradient(90deg,var(--brand-red),var(--brand-gold),var(--brand-cyan)); } .section-heading.text-center h2:after{margin-left:auto;margin-right:auto} /* About */ .about-badge{ background:linear-gradient(135deg,var(--brand-red),var(--brand-coral),#f47c53)!important; box-shadow:0 22px 48px rgba(201,20,34,.28)!important; } .feature-tick i{color:var(--brand-teal)!important} .main-about-img{ border:5px solid rgba(255,255,255,.85); box-shadow:0 25px 65px rgba(7,30,51,.18)!important; } /* Stats */ .stats-section{ background: linear-gradient(120deg,rgba(7,30,51,.97),rgba(12,68,105,.94) 50%,rgba(128,10,20,.92)), radial-gradient(circle at 70% 30%,rgba(34,184,207,.25),transparent 30%)!important; position:relative;overflow:hidden; } .stats-section:before{ content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%); animation:statsShine 8s linear infinite; } @keyframes statsShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}} .stat-card:nth-child(1) .counter,.stat-card:nth-child(1) .stat-plus{color:#ffb0b7} .stat-card:nth-child(2) .counter,.stat-card:nth-child(2) .stat-plus{color:#72d5ff} .stat-card:nth-child(3) .counter,.stat-card:nth-child(3) .stat-plus{color:#ffd66b} .stat-card:nth-child(4) .counter,.stat-card:nth-child(4) .stat-plus{color:#70e2c2} /* Product cards */ .product-card{ border:1px solid rgba(12,48,75,.08)!important; background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(248,251,254,.93))!important; box-shadow:0 16px 38px rgba(7,30,51,.09)!important; } .product-card:after{ content:"";position:absolute;right:-50px;bottom:-55px;width:130px;height:130px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--card-color) 22%,transparent),transparent 68%); transition:.4s; } .product-card:hover:after{transform:scale(1.35)} .product-icon{ box-shadow:0 12px 28px color-mix(in srgb,var(--card-color) 20%,transparent); } .product-red{--card-color:var(--brand-red)} .product-blue{--card-color:var(--brand-blue)} .product-purple{--card-color:var(--brand-violet)} .product-gold{--card-color:var(--brand-gold)} .product-green{--card-color:var(--brand-teal)} .product-dark{--card-color:var(--brand-navy)} /* Services */ .services-section{ background:linear-gradient(135deg,var(--brand-navy),#0e436b 54%,#66101a)!important; } .service-card{ background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055))!important; border-color:rgba(255,255,255,.18)!important; } .service-card:nth-child(3n+1) i{color:#ff6975!important} .service-card:nth-child(3n+2) i{color:#55d4ef!important} .service-card:nth-child(3n) i{color:#ffd05a!important} /* Timeline, mission and process */ .timeline:before{background:linear-gradient(var(--brand-red),var(--brand-gold),var(--brand-blue),var(--brand-teal))!important} .timeline-dot{background:linear-gradient(135deg,var(--brand-red),var(--brand-coral))!important} .timeline-item:nth-child(even) .timeline-dot{background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan))!important} .timeline-content{ border-left:4px solid transparent; border-image:linear-gradient(var(--brand-red),var(--brand-gold)) 1; } .vision-red{background:linear-gradient(135deg,#8c0813,var(--brand-red),var(--brand-coral))!important} .vision-blue{background:linear-gradient(135deg,#07395f,var(--brand-blue),var(--brand-cyan))!important} .vision-gold{background:linear-gradient(135deg,#9c6200,var(--brand-gold),#f5bd42)!important} .process-section{ background:linear-gradient(120deg,var(--brand-red-deep),var(--brand-red) 38%,#923448 65%,var(--brand-navy))!important; } /* Projects and blog */ .project-card{border:4px solid rgba(255,255,255,.8)} .project-overlay{background:linear-gradient(transparent,rgba(5,24,41,.95))!important} .project-overlay a{ background:linear-gradient(135deg,#fff,var(--brand-rose))!important; box-shadow:0 10px 25px rgba(0,0,0,.18); } .blog-card{ border-top:4px solid transparent; border-image:linear-gradient(90deg,var(--brand-red),var(--brand-gold),var(--brand-cyan)) 1; } .blog-card:hover{box-shadow:0 24px 58px rgba(7,30,51,.17)!important} /* Testimonials, newsletter and forms */ .testimonial-wrap{ background:linear-gradient(145deg,#fff,#f8fbfd); border:1px solid rgba(15,54,83,.08); border-radius:28px; box-shadow:0 18px 48px rgba(7,30,51,.09); } .testimonial-wrap>i{color:var(--brand-red)!important} .newsletter-box{ background: radial-gradient(circle at 86% 20%,rgba(34,184,207,.2),transparent 27%), linear-gradient(125deg,var(--brand-navy),#134a72 56%,var(--brand-red-deep))!important; border:1px solid rgba(255,255,255,.16); } .enquiry-form{ border-top:5px solid transparent; border-image:linear-gradient(90deg,var(--brand-red),var(--brand-gold),var(--brand-cyan)) 1; } .contact-info-card:nth-of-type(1)>i{background:#fff0f2!important;color:var(--brand-red)!important} .contact-info-card:nth-of-type(2)>i{background:#eef9ff!important;color:var(--brand-blue)!important} .contact-info-card:nth-of-type(3)>i{background:#effcf8!important;color:var(--brand-teal)!important} /* Accordion */ .accordion-button:not(.collapsed){ background:linear-gradient(90deg,#fff1f3,#eef9ff)!important; color:var(--brand-red)!important; } .accordion-item{ border-left:4px solid var(--brand-red)!important; } .accordion-item:nth-child(even){border-left-color:var(--brand-blue)!important} /* Footer */ .site-footer{ background: radial-gradient(circle at 90% 10%,rgba(34,184,207,.10),transparent 26%), linear-gradient(135deg,#061725,#0a2c48 58%,#28070c)!important; } .footer-main{position:relative} .footer-main:before{ content:"";position:absolute;left:0;right:0;top:0;height:4px; background:linear-gradient(90deg,var(--brand-red),var(--brand-coral),var(--brand-gold),var(--brand-cyan),var(--brand-blue)); } .footer-social a:nth-child(1){background:#16375f} .footer-social a:nth-child(2){background:#1d76ad} .footer-social a:nth-child(3){background:linear-gradient(135deg,#df2b52,#f49c39)} .footer-social a:nth-child(4){background:#dc2935} .whatsapp-float{ background:linear-gradient(135deg,#23d476,#0caa58)!important; box-shadow:0 18px 44px rgba(18,173,88,.40)!important; } .back-to-top{ background:linear-gradient(135deg,var(--brand-red),var(--brand-coral))!important; } /* Mega menus */ .mega-menu-header,.about-menu-header{ background:linear-gradient(120deg,var(--brand-navy),#0c4d77 55%,var(--brand-red-deep))!important; } .mega-product-card{ box-shadow:0 14px 34px rgba(7,30,51,.08); } .mega-product-card:hover{ box-shadow:0 22px 50px rgba(7,30,51,.16)!important; } .mega-menu-footer{ background:linear-gradient(90deg,#f9fbfd,#fff3f4)!important; } /* Subtle animated colour orbs */ .about-section:before,.products-section:before,.projects-section:before,.blog-section:before,.contact-section:before{ filter:saturate(1.15) contrast(1.02) brightness(.98)!important; } @keyframes chromaPulse{ 0%,100%{filter:hue-rotate(0deg) saturate(1)} 50%{filter:hue-rotate(8deg) saturate(1.12)} } .section-heading h2:after,.page-progress{animation:chromaPulse 7s ease-in-out infinite} @media(max-width:767.98px){ .section-heading h2:after{width:62px} .hero-kicker{padding:.48rem .7rem} .topbar{background:#fff!important} } @media(prefers-reduced-motion:reduce){ .stats-section:before,.section-heading h2:after,.page-progress{animation:none!important} } /* ========================================================= MOBILE HEADER — CENTRE-ALIGNED LOGO ========================================================= */ @media (max-width: 991.98px){ .site-header .navbar > .container-xxl{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; min-height:88px!important; padding-left:64px!important; padding-right:64px!important; } .site-header .navbar-brand{ position:static!important; display:flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:auto!important; margin:0 auto!important; padding:6px 0!important; border:0!important; box-shadow:none!important; background:transparent!important; transform:none!important; } .site-header .brand-logo{ display:block!important; width:190px!important; max-width:100%!important; max-height:70px!important; margin:0 auto!important; object-fit:contain!important; } .site-header .navbar-toggler{ position:absolute!important; right:14px!important; top:50%!important; transform:translateY(-50%)!important; margin:0!important; z-index:5!important; } .site-header .navbar-collapse{ position:absolute!important; top:100%!important; left:0!important; right:0!important; width:100%!important; margin-top:0!important; z-index:2200!important; } } @media (max-width: 575.98px){ .site-header .navbar > .container-xxl{ min-height:80px!important; padding-left:58px!important; padding-right:58px!important; } .site-header .brand-logo{ width:170px!important; max-height:62px!important; } .site-header .navbar-toggler{ right:10px!important; } } /* ===== STANDALONE ABOUT US PAGE ===== */ .about-page-hero{min-height:690px;padding:132px 0 105px;background:url('../images/section-bg/about-bg.png') center/cover no-repeat;display:flex;align-items:center} .about-page-hero .inner-hero-overlay{background:linear-gradient(110deg,rgba(5,24,41,.97) 0%,rgba(12,56,88,.88) 48%,rgba(147,9,18,.72) 100%)} .about-page-hero .container-xxl{z-index:2} .about-page-hero h1{font-size:clamp(2.65rem,5vw,5.15rem);line-height:1.04;margin-bottom:1.35rem} .about-page-hero p{font-size:1.13rem;line-height:1.8;max-width:850px} .about-page-hero .hero-kicker{margin-bottom:1rem} .about-hero-facts{display:grid;gap:12px;padding:18px;border-radius:24px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px)} .about-hero-facts div{display:flex;align-items:center;gap:18px;padding:18px;border-radius:16px;background:rgba(255,255,255,.08)} .about-hero-facts strong{min-width:90px;color:#fff;font:900 1.5rem "Segoe UI",Arial,Helvetica,sans-serif} .about-hero-facts span{color:rgba(255,255,255,.78);font-size:.9rem} .about-display-title{font-size:clamp(2rem,3.6vw,3.75rem);font-weight:900;line-height:1.13;color:#10263a} .about-profile-section{background:linear-gradient(180deg,#fff,#f5f8fb)} .about-profile-visual{position:relative;padding:0 48px 50px 0} .about-profile-visual>img{width:100%;min-height:590px;object-fit:cover;border-radius:28px;box-shadow:0 28px 70px rgba(12,35,55,.18)} .profile-year-card{position:absolute;right:0;bottom:0;min-width:190px;padding:22px 26px;border-radius:22px;background:linear-gradient(135deg,var(--red),#e33c45);color:#fff;box-shadow:0 20px 45px rgba(179,13,23,.3)} .profile-year-card small,.profile-year-card strong{display:block}.profile-year-card small{opacity:.8}.profile-year-card strong{font:900 2.8rem "Segoe UI",Arial,Helvetica,sans-serif;line-height:1.1;margin-top:4px} .profile-trust-card{position:absolute;left:-24px;top:34px;display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:14px;background:#fff;color:#183044;font-weight:800;box-shadow:0 16px 40px rgba(9,31,50,.14)} .profile-trust-card i{color:var(--green);font-size:1.45rem} .about-service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .about-service-list div{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:#fff;border:1px solid #e6edf2;border-radius:13px;font-weight:700;box-shadow:0 8px 22px rgba(12,35,55,.04)} .about-service-list i{color:var(--red);font-size:1.15rem;margin-top:1px} .certification-band{padding:105px 0;background:linear-gradient(135deg,#071b2e,#123e60);position:relative;overflow:hidden} .certification-band:before{content:"";position:absolute;inset:0;background:url('../images/section-bg/modules-bg.png') center/cover;opacity:.08} .certification-band .container-xxl{position:relative;z-index:1} .certification-band .section-heading p{color:rgba(255,255,255,.62)} .certification-card{height:100%;padding:28px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(10px);transition:.35s} .certification-card:hover{background:rgba(255,255,255,.13);transform:translateY(-7px)} .certification-card span{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(236,55,65,.22);color:#ffb3b8;font-weight:900;letter-spacing:.12em;font-size:.75rem} .certification-card h3{font-size:1.8rem;font-weight:900;margin:16px 0 8px}.certification-card p{margin:0;color:#bfcfdb} .company-story-section{background:#fff}.story-image{width:100%;min-height:510px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)} .story-timeline{display:grid;gap:20px;position:relative}.story-timeline:before{content:"";position:absolute;left:54px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--red),var(--blue))} .story-timeline>div{display:grid;grid-template-columns:110px 1fr;gap:22px;position:relative} .story-timeline>div>span{position:relative;z-index:1;width:108px;height:48px;display:grid;place-items:center;border-radius:13px;background:#fff0f1;color:var(--red);font:900 1rem "Segoe UI",Arial,Helvetica,sans-serif;border:1px solid #f2c9cc} .story-timeline section{padding:2px 0 18px}.story-timeline h3{font-size:1.2rem;margin:0 0 7px}.story-timeline p{margin:0;color:var(--muted);line-height:1.7} .purpose-section{background:linear-gradient(180deg,#f5f8fb,#fff)} .purpose-card{height:100%;padding:34px;border-radius:25px;color:#fff;box-shadow:var(--shadow);transition:.35s}.purpose-card:hover{transform:translateY(-8px)} .purpose-card i{font-size:2.45rem}.purpose-card h3{font-size:1.45rem;margin:20px 0 12px}.purpose-card p{margin:0;color:rgba(255,255,255,.85);line-height:1.8} .purpose-red{background:linear-gradient(135deg,#820711,#d52a35)}.purpose-blue{background:linear-gradient(135deg,#073557,#0b6cae)}.purpose-gold{background:linear-gradient(135deg,#8b5500,#d58d13)} .expertise-section{background:linear-gradient(135deg,#081d33,#103f64);position:relative;overflow:hidden} .expertise-section:before{content:"";position:absolute;inset:0;background:url('../images/section-bg/products-bg.png') center/cover;opacity:.065} .expertise-section>.container-xxl{position:relative;z-index:1} .about-system-card{height:100%;position:relative;padding:34px;border-radius:24px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.15);overflow:hidden;transition:.35s} .about-system-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--red),#e8424c)} .about-system-card .system-number{position:absolute;right:22px;top:10px;color:#eef2f5;font:900 4.4rem "Segoe UI",Arial,Helvetica,sans-serif;line-height:1} .about-system-card .system-icon{position:relative;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:#fff0f1;color:var(--red);font-size:1.7rem;margin-bottom:20px} .about-system-card h3{position:relative;font-size:1.35rem;font-weight:900;margin-bottom:14px}.about-system-card p{position:relative;color:var(--muted);line-height:1.78}.about-system-card a{position:relative;color:var(--red);font-weight:900} .advantages-section{background:#fff}.advantage-card{height:100%;padding:25px;border-radius:19px;background:#f7f9fb;border:1px solid #e5ebf0;transition:.3s}.advantage-card:hover{transform:translateY(-6px);background:#fff;box-shadow:0 16px 40px rgba(12,35,55,.1)} .advantage-card i{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#fff0f1;color:var(--red);font-size:1.45rem}.advantage-card h3{font-size:1.08rem;margin:16px 0 8px}.advantage-card p{color:var(--muted);line-height:1.65;margin:0;font-size:.92rem} .about-process-section{background:linear-gradient(135deg,#870811,#c51d28);position:relative;overflow:hidden} .about-process-section:before{content:"";position:absolute;inset:0;background:url('../images/section-bg/services-bg.png') center/cover;opacity:.08} .about-process-section>.container-xxl{position:relative;z-index:1} .about-process-card{height:100%;padding:28px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;position:relative;backdrop-filter:blur(8px)} .about-process-card>span{position:absolute;right:18px;top:10px;font:900 2.6rem "Segoe UI",Arial,Helvetica,sans-serif;color:rgba(255,255,255,.1)} .about-process-card i{font-size:2rem;color:#fff}.about-process-card h3{font-size:1.25rem;margin:17px 0 9px}.about-process-card p{margin:0;color:rgba(255,255,255,.72);line-height:1.7} .about-cta-section{padding:80px 0;background:#f4f7fa}.about-cta-box{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:48px;border-radius:28px;background:linear-gradient(120deg,#071d31,#144f79);color:#fff;box-shadow:0 26px 65px rgba(12,35,55,.2)} .about-cta-box h2{font-size:clamp(1.8rem,3vw,3rem);font-weight:900;max-width:820px}.about-cta-box p{color:rgba(255,255,255,.7);margin:0} @media(max-width:1199.98px){.about-page-hero{padding-top:100px;min-height:auto}.about-hero-facts{grid-template-columns:repeat(3,1fr);margin-top:15px}.about-hero-facts div{display:block}.about-hero-facts strong{display:block;margin-bottom:5px}.about-cta-box{display:block}.about-cta-box>div:last-child{margin-top:28px}} @media(max-width:767.98px){.about-page-hero{padding:82px 0 70px}.about-page-hero h1{font-size:2.45rem}.about-hero-facts{grid-template-columns:1fr}.about-hero-facts div{display:flex}.about-profile-visual{padding:0 0 82px}.about-profile-visual>img{min-height:420px}.profile-year-card{right:12px}.profile-trust-card{left:12px;top:18px}.about-service-list{grid-template-columns:1fr}.story-timeline>div{grid-template-columns:86px 1fr;gap:15px}.story-timeline:before{left:43px}.story-timeline>div>span{width:86px}.about-cta-box{padding:32px 24px}.section-pad{padding:82px 0}} @media(max-width:575.98px){.about-profile-visual>img{min-height:360px}.profile-trust-card{font-size:.78rem}.profile-year-card{min-width:160px}.about-system-card{padding:27px}.about-system-card .system-number{font-size:3.4rem}.about-cta-box .btn{width:100%}} /* ===== COMPLETE MULTI-PAGE WEBSITE ===== */ .standard-dropdown{min-width:290px;padding:12px;border:0;border-radius:16px;box-shadow:0 22px 55px rgba(6,28,47,.18)} .standard-dropdown .dropdown-item{padding:10px 14px;border-radius:10px;font-weight:700;color:#173149}.standard-dropdown .dropdown-item:hover{background:#fff0f1;color:var(--red)} .subpage-hero{min-height:600px;padding:130px 0 105px;position:relative;display:flex;align-items:center;color:#fff;background-color:#081d33;background-size:cover !important; background-position:center;overflow:hidden} .subpage-hero-overlay{ position:absolute;inset:0; /*background:linear-gradient(105deg,rgba(4,22,38,.97),rgba(8,53,84,.9) 55%,rgba(164,9,20,.73))*/ } .subpage-hero .container-xxl{z-index:2}.subpage-hero h1{font-size:clamp(2.55rem,5vw,5.1rem);max-width:1020px;line-height:1.04;margin:15px 0 22px}.subpage-hero p{max-width:880px;font-size:1.12rem;line-height:1.8;color:rgba(255,255,255,.8)} .subpage-breadcrumb{margin-bottom:28px}.subpage-breadcrumb a,.subpage-breadcrumb .active{color:rgba(255,255,255,.72)}.subpage-breadcrumb .breadcrumb-item+.breadcrumb-item:before{color:rgba(255,255,255,.5)} .inner-content-section{background:linear-gradient(180deg,#fff,#f6f8fa)}.inner-lead{font-size:1.13rem;line-height:1.9;color:#526778} .content-feature-list{display:grid;gap:18px;margin-top:38px}.content-feature-block{display:grid;grid-template-columns:72px 1fr;gap:20px;padding:25px;border:1px solid #e2e9ee;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(10,35,55,.05)}.content-feature-block>span{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#fff0f1;color:var(--red);font:900 1rem "Segoe UI",Arial,Helvetica,sans-serif}.content-feature-block h2{font-size:1.25rem;margin:0 0 8px}.content-feature-block p{margin:0;color:var(--muted);line-height:1.75} .inner-sticky-card{position:sticky;top:135px;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 24px 60px rgba(7,31,50,.14)}.inner-sticky-card>img{width:100%;height:320px;object-fit:cover}.inner-check-list{list-style:none;padding:0;margin:18px 0;display:grid;gap:13px}.inner-check-list li{display:flex;gap:10px;align-items:flex-start;font-weight:700;color:#344c60}.inner-check-list i{color:var(--red);margin-top:2px} .related-pages-section{background:#fff}.related-page-card{display:block;height:100%;padding:30px;border:1px solid #e3e9ed;border-radius:22px;color:inherit;box-shadow:0 12px 35px rgba(9,34,54,.05);transition:.35s}.related-page-card:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(9,34,54,.12)}.related-page-card>i{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:#fff0f1;color:var(--red);font-size:1.55rem}.related-page-card span{display:block;margin-top:20px;color:var(--red);font-weight:900;font-size:.74rem;letter-spacing:.14em}.related-page-card h3{font-size:1.2rem;margin:8px 0}.related-page-card p{color:var(--muted);min-height:48px}.related-page-card strong{color:var(--red)} .content-panel{padding:30px;border-radius:22px;background:#fff;border:1px solid #e2e9ed}.content-panel h3{margin-bottom:20px}.application-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.application-list li{padding:14px;border-radius:13px;background:#f5f8fa;display:flex;gap:10px;font-weight:700}.application-list i{color:var(--red)} .process-stack{display:grid;gap:14px;margin-top:20px}.process-step{display:grid;grid-template-columns:65px 1fr;gap:18px;padding:22px;border-radius:18px;background:#fff;border:1px solid #e3e9ed}.process-step>span{width:54px;height:54px;border-radius:15px;background:#102f49;color:#fff;display:grid;place-items:center;font-weight:900}.process-step h3{font-size:1.05rem;margin:0 0 5px}.process-step p{margin:0;color:var(--muted);font-size:.92rem}.benefit-tile{height:100%;padding:16px;border-radius:15px;background:#f6f8fa}.benefit-tile i{color:var(--red);font-size:1.3rem}.benefit-tile h3{font-size:.95rem;margin:9px 0 0}.spec-note{display:flex;gap:12px;padding:16px;margin:20px 0;border-radius:14px;background:#fff8e8;color:#69521b}.spec-note p{margin:0;font-size:.87rem;line-height:1.55}.spec-note i{color:#d18b00} .directory-section{background:linear-gradient(180deg,#f4f7f9,#fff)}.directory-card{height:100%;padding:30px;border-radius:23px;background:#fff;border:1px solid #e0e7ec;box-shadow:0 14px 38px rgba(8,31,50,.06);position:relative;overflow:hidden;transition:.35s}.directory-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(8,31,50,.13)}.directory-card>span{display:inline-block;color:var(--red);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.directory-card>i{position:absolute;right:22px;top:22px;font-size:2.2rem;color:#e9eef2}.directory-card h3{font-size:1.25rem;margin:21px 0 12px}.directory-card p{color:var(--muted);line-height:1.72;min-height:88px}.directory-card a{color:var(--red);font-weight:900} .service-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.service-method-card{padding:25px;border-radius:20px;background:#fff;border:1px solid #e2e8ec}.service-method-card>span{color:var(--red);font-weight:900}.service-method-card h3{font-size:1.1rem;margin:12px 0 7px}.service-method-card p{color:var(--muted);font-size:.9rem;margin:0}.inner-side-panel{position:sticky;top:135px;padding:30px;border-radius:24px;background:#fff;box-shadow:0 20px 50px rgba(8,31,50,.11)}.inner-side-panel img{width:100%;height:230px;object-fit:cover}.inner-side-panel h3{font-size:1.2rem}.inner-side-panel p{color:var(--muted);line-height:1.7} .case-section{display:grid;grid-template-columns:70px 1fr;gap:22px;padding:28px 0;border-bottom:1px solid #e1e7eb}.case-section>span{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#fff0f1;color:var(--red);font-weight:900}.case-section h3{margin:0 0 10px}.case-section p{color:var(--muted);line-height:1.85;margin:0} .article-layout{background:#fff}.article-intro{font-size:1.18rem;line-height:1.9;color:#425b6e;padding-bottom:25px;border-bottom:1px solid #e3e8eb}.article-section{padding:25px 0;border-bottom:1px solid #e6ebee}.article-section h2{font-size:1.45rem;margin-bottom:12px}.article-section p{color:var(--muted);font-size:1.02rem;line-height:1.88}.article-side a{display:block;padding:9px 0;color:var(--red);font-weight:800;border-bottom:1px solid #eef1f3} .career-application-box{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:45px;border-radius:27px;color:#fff;background:linear-gradient(120deg,#820711,#c51d28)}.career-application-box h2{font-size:clamp(1.7rem,3vw,2.8rem)}.career-application-box p{max-width:780px;color:rgba(255,255,255,.75);margin:0}.career-application-box .eyebrow{color:#ffd0d3} .legal-article{max-width:960px;margin:auto;padding:45px;border-radius:24px;background:#fff;box-shadow:0 15px 45px rgba(8,31,50,.08)}.legal-article ol{display:grid;gap:18px;color:#526779;line-height:1.8}.legal-article h2{margin-top:35px} .sitemap-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.sitemap-grid a{display:block;padding:15px 17px;border:1px solid #e0e7eb;border-radius:13px;background:#fff;color:#213b50;font-weight:750}.sitemap-grid a:hover{color:var(--red);transform:translateX(4px)} @media(max-width:1199.98px){.subpage-hero{min-height:auto;padding:95px 0 85px}.inner-sticky-card,.inner-side-panel{position:static}.career-application-box{display:block}.career-application-box .btn{margin-top:25px}.sitemap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767.98px){.subpage-hero{padding:75px 0 65px}.subpage-hero h1{font-size:2.45rem}.content-feature-block,.case-section{grid-template-columns:1fr}.application-list,.service-method-grid{grid-template-columns:1fr}.directory-card p{min-height:auto}.sitemap-grid{grid-template-columns:1fr}.career-application-box,.legal-article{padding:28px 22px}} /* ========================================================= MOBILE RESPONSIVE HARDENING — v2.1.0 Shared correction for the complete multi-page website. ========================================================= */ html, body{ width:100%; max-width:100%; overflow-x:clip; } img, picture, svg, video, canvas, iframe{ max-width:100%; } .hero-picture{ display:block; width:100%; } body.mobile-nav-open{ overflow:hidden!important; touch-action:none; } @media (max-width:1199.98px){ html{scroll-padding-top:88px} .site-header{ position:sticky!important; top:0!important; z-index:5000!important; overflow:visible!important; } .site-header .navbar, .site-header .navbar>.container-xxl{ min-height:82px!important; } .site-header .navbar{ padding:4px 0!important; } .site-header .navbar>.container-xxl{ padding-left:16px!important; padding-right:16px!important; flex-wrap:wrap; } .navbar-brand{ position:static!important; width:auto!important; height:auto!important; max-width:calc(100% - 64px)!important; margin:0!important; padding:4px 0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } .brand-logo{ display:block!important; width:194px!important; max-width:100%!important; height:auto!important; max-height:none!important; object-fit:contain!important; } .navbar-toggler{ width:48px; height:46px; flex:0 0 48px; display:grid; place-items:center; padding:0!important; border:1px solid #d7dee4!important; border-radius:11px!important; background:#fff!important; box-shadow:0 8px 20px rgba(7,30,51,.08); } .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(201,20,34,.12)!important; } .navbar-collapse{ position:absolute!important; top:100%!important; left:0!important; right:0!important; width:100%!important; max-width:100vw!important; max-height:calc(100vh - 82px)!important; max-height:calc(100dvh - 82px)!important; margin:0!important; padding:12px 16px 28px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; background:#fff!important; border-top:1px solid #e7edf1!important; box-shadow:0 22px 42px rgba(7,30,51,.16)!important; z-index:5050!important; } .navbar-collapse.collapsing{ overflow-y:hidden!important; } .navbar-nav{ width:100%!important; margin:0!important; gap:0!important; align-items:stretch!important; } .navbar-nav>.nav-item{ width:100%; border-bottom:1px solid #edf1f4; } .navbar .nav-link{ width:100%!important; min-height:48px; display:flex!important; align-items:center; justify-content:space-between; gap:12px; padding:12px 8px!important; border-radius:0!important; white-space:normal!important; line-height:1.35; font-size:.92rem!important; } .navbar .dropdown-toggle::after{ flex:0 0 auto; margin-left:auto; } .navbar .nav-link::before{ display:none!important; } .site-header .dropdown-menu, .standard-dropdown, .products-mega-menu, .module-products-menu, .about-mega-menu, .about-image-mega-menu{ position:static!important; inset:auto!important; width:100%!important; min-width:0!important; max-width:100%!important; max-height:none!important; margin:2px 0 10px!important; padding:8px!important; transform:none!important; overflow:visible!important; border:0!important; border-left:3px solid #e7aeb3!important; border-radius:10px!important; background:#f8fafb!important; box-shadow:none!important; } .standard-dropdown .dropdown-item{ width:100%; padding:10px 11px!important; white-space:normal!important; line-height:1.4; } .mega-menu-header, .about-menu-header{ display:block!important; padding:16px!important; border-radius:8px 8px 0 0; } .mega-menu-header h3, .about-menu-header h3{ font-size:1.18rem!important; line-height:1.3; } .mega-menu-header p, .about-menu-header p{ max-width:none!important; font-size:.82rem!important; line-height:1.55; } .mega-all-link{ display:inline-flex!important; margin-top:10px!important; } .mega-menu-grid, .module-product-grid, .about-image-grid, .about-mega-links{ width:100%!important; grid-template-columns:1fr!important; gap:9px!important; padding:9px!important; } .mega-product-card, .about-image-card{ min-width:0!important; grid-template-columns:96px minmax(0,1fr)!important; } .mega-image-link, .about-image-card .mega-image-link{ min-width:0!important; min-height:110px!important; height:100%!important; } .mega-card-body{ min-width:0!important; padding:12px 13px!important; } .mega-card-title, .mega-card-body li a{ white-space:normal!important; overflow-wrap:anywhere; } .mega-menu-footer, .about-menu-footer{ flex-direction:column!important; align-items:stretch!important; gap:12px!important; padding:14px!important; } .mega-menu-footer .btn, .about-menu-footer .btn, .site-header .btn-brand{ width:100%!important; margin:10px 0 0!important; justify-content:center; } .inner-sticky-card, .inner-side-panel{ position:static!important; top:auto!important; } } @media (max-width:767.98px){ html{scroll-padding-top:76px} .site-header .navbar, .site-header .navbar>.container-xxl{ min-height:74px!important; } .site-header .navbar>.container-xxl{ padding-left:13px!important; padding-right:13px!important; } .brand-logo{ width:166px!important; } .navbar-toggler{ width:44px; height:42px; flex-basis:44px; } .navbar-collapse{ max-height:calc(100vh - 74px)!important; max-height:calc(100dvh - 74px)!important; padding:9px 13px 24px!important; } /* Mobile-first portrait banners keep embedded headings legible. */ .hero-section, .hero-section .carousel, .hero-section .carousel-inner, .hero-section .carousel-item{ min-height:0!important; height:auto!important; background:#fff; } .hero-picture, .hero-image{ display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; object-fit:contain!important; object-position:center!important; } .carousel-indicators{ bottom:9px!important; margin-bottom:0!important; } .carousel-indicators [data-bs-target]{ width:25px!important; height:3px!important; } .section-pad{ padding:62px 0!important; } .about-section{ padding-top:62px!important; } .container-fluid.container-xxl, .container-xxl{ padding-left:18px; padding-right:18px; } .section-heading{ margin-bottom:1.55rem; } .section-heading h2, .inner-content-section h2{ font-size:clamp(1.82rem,8vw,2.35rem)!important; line-height:1.2!important; overflow-wrap:anywhere; } .section-heading p, .inner-lead{ font-size:.98rem!important; line-height:1.72!important; } .eyebrow{ letter-spacing:.1em!important; font-size:.72rem!important; } .about-visual{ padding:0!important; } .main-about-img{ width:100%; height:auto!important; min-height:0!important; aspect-ratio:4/3; object-fit:cover; border-radius:18px!important; } .about-badge{ position:static!important; width:100%; margin-top:12px; padding:17px 19px!important; border-radius:16px!important; } .about-pattern{ display:none; } .lead-copy{ font-size:1.02rem!important; } .product-card, .service-card, .vision-card, .module-link-card, .inner-link-card, .related-page-card, .directory-card, .content-panel, .service-method-card, .timeline-content, .legal-article{ padding:22px!important; border-radius:18px!important; } .product-card:hover, .service-card:hover, .vision-card:hover, .module-link-card:hover, .inner-link-card:hover, .related-page-card:hover, .directory-card:hover{ transform:none!important; } .project-card{ height:315px!important; border-radius:18px!important; } .project-overlay{ padding:1.35rem!important; } .blog-card img{ height:205px!important; } .blog-body{ padding:1.35rem!important; } .stat-card .counter, .stat-card .stat-plus{ font-size:2.15rem!important; } .stat-card p{ font-size:.82rem; } .stats-section{ padding:52px 0!important; } .timeline:before{ left:9px!important; } .timeline-item, .timeline-item:nth-child(even){ padding:0 0 28px 33px!important; } .timeline-dot, .timeline-item:nth-child(even) .timeline-dot{ left:-1px!important; } .newsletter-section{ padding-bottom:62px!important; } .newsletter-box{ padding:25px 20px!important; border-radius:20px!important; } .newsletter-form .input-group{ display:block!important; } .newsletter-form .form-control, .newsletter-form .btn{ width:100%!important; border-radius:10px!important; } .newsletter-form .btn{ margin-top:10px!important; } .enquiry-form{ padding:22px!important; border-radius:18px!important; } .form-control, .form-select, textarea.form-control{ font-size:16px!important; } .contact-info-card{ align-items:flex-start!important; padding:16px!important; } .contact-info-card a, .footer-contact-row a{ overflow-wrap:anywhere; } .branches-section{ padding-bottom:62px!important; } .branch-card{ padding:22px!important; border-radius:18px!important; } .subpage-hero, .about-page-hero, .inner-hero{ min-height:auto!important; padding:58px 0 54px!important; background-position:center!important; } .subpage-hero h1, .about-page-hero h1, .inner-hero h1{ font-size:clamp(2rem,10vw,2.65rem)!important; line-height:1.08!important; overflow-wrap:anywhere; } .subpage-hero p, .about-page-hero p, .inner-hero p{ font-size:.98rem!important; line-height:1.7!important; } .subpage-breadcrumb, .breadcrumb{ flex-wrap:wrap!important; row-gap:4px; font-size:.83rem; } .content-feature-block, .case-section{ grid-template-columns:1fr!important; gap:14px!important; padding:21px!important; } .content-feature-block>span, .case-section>span{ width:50px!important; height:50px!important; } .process-step{ grid-template-columns:52px minmax(0,1fr)!important; gap:14px!important; padding:18px!important; } .process-step>span{ width:46px!important; height:46px!important; } .application-list, .service-method-grid, .sitemap-grid, .content-feature-list{ grid-template-columns:1fr!important; } .inner-sticky-card>img, .inner-side-panel img{ height:220px!important; } .career-application-box, .about-cta-box{ display:block!important; padding:27px 21px!important; border-radius:20px!important; } .career-application-box .btn, .about-cta-box .btn, .hero-actions .btn{ width:100%!important; margin-top:10px!important; } .about-profile-visual{ padding:0 0 72px!important; } .about-profile-visual>img{ min-height:340px!important; } .profile-trust-card{ left:8px!important; top:12px!important; max-width:calc(100% - 16px); } .profile-year-card{ right:8px!important; bottom:10px!important; } .footer-main{ padding:60px 0 40px!important; } .footer-logo{ width:220px!important; max-width:100%!important; height:auto!important; padding:10px!important; } .footer-bottom, .footer-bottom>div{ flex-direction:column!important; align-items:flex-start!important; gap:10px!important; } .footer-bottom>div{ width:100%; } /* Resolve conflicting coarse-pointer positioning. */ .whatsapp-float{ top:auto!important; right:13px!important; bottom:14px!important; left:auto!important; width:56px!important; min-width:56px!important; height:56px!important; min-height:56px!important; padding:0!important; border-radius:16px!important; justify-content:center!important; } .whatsapp-icon{ width:56px!important; height:56px!important; } .whatsapp-copy{ display:none!important; } .whatsapp-pulse{ width:56px!important; height:56px!important; border-radius:16px!important; } .back-to-top{ right:18px!important; bottom:82px!important; } } @media (max-width:575.98px){ .brand-logo{ width:154px!important; } .navbar-brand{ max-width:calc(100% - 58px)!important; } .navbar-collapse{ padding-left:11px!important; padding-right:11px!important; } .mega-product-card, .about-image-card{ display:block!important; } .mega-image-link, .about-image-card .mega-image-link{ display:none!important; } .mega-card-body, .about-image-card .mega-card-body{ border-top:0!important; border-left:3px solid var(--mega-accent)!important; padding:12px!important; } .mega-card-body li:nth-child(n+4){ display:list-item!important; } .mega-menu-header p, .about-menu-header p, .mega-support-card small{ display:none!important; } .mega-support-card{ align-items:flex-start!important; } .mega-menu-footer, .about-menu-footer{ padding:11px!important; } .section-pad{ padding:54px 0!important; } .container-fluid.container-xxl, .container-xxl{ padding-left:15px; padding-right:15px; } .product-card, .service-card, .vision-card, .module-link-card, .inner-link-card, .related-page-card, .directory-card, .content-panel, .service-method-card, .timeline-content, .legal-article{ padding:20px!important; } .hero-actions{ gap:8px!important; } .project-card{ height:290px!important; } .testimonial-wrap{ padding:1.5rem .35rem!important; } .testimonial-wrap p{ font-size:1.12rem!important; line-height:1.65!important; } .story-timeline>div{ grid-template-columns:72px minmax(0,1fr)!important; gap:12px!important; } .story-timeline:before{ left:36px!important; } .story-timeline>div>span{ width:72px!important; font-size:.82rem!important; } .about-system-card{ padding:22px!important; } .profile-year-card{ min-width:145px!important; padding:17px 18px!important; } .profile-trust-card{ font-size:.72rem!important; padding:11px 12px!important; } .footer-main .col-6{ width:100%; } } @supports not (overflow:clip){ html, body{overflow-x:hidden} } /* Tablet navigation accounts for the visible desktop contact strip. */ @media (min-width:992px) and (max-width:1199.98px){ .navbar-collapse{ max-height:calc(100vh - 136px)!important; max-height:calc(100dvh - 136px)!important; } } /* ========================================================= BOOTSTRAP 5.3.8 STANDARDISED BUILD — v3.0.0 Structural layout is handled by Bootstrap grid, navbar, offcanvas, dropdown, carousel, accordion, form and utility APIs. This section scopes brand-specific integration only. ========================================================= */ .bootstrap-build .site-header .offcanvas-logo{ display:block; width:190px; max-width:calc(100vw - 110px); height:auto; object-fit:contain; } .bootstrap-build .site-header .offcanvas-brand{ display:inline-flex; align-items:center; text-decoration:none; } .bootstrap-build .site-header .offcanvas-header{ min-height:82px; padding:12px 18px; border-bottom:1px solid rgba(25,39,63,.10); background:#fff; } .bootstrap-build .site-header .offcanvas-header .btn-close{ width:1rem; height:1rem; padding:.7rem; margin:0; border:1px solid rgba(25,39,63,.14); border-radius:10px; opacity:.75; } .bootstrap-build .site-header .offcanvas-header .btn-close:focus, .bootstrap-build .navbar-toggler:focus{ box-shadow:0 0 0 .25rem rgba(178,15,23,.16); } @media (min-width:1200px){ .bootstrap-build .site-header .offcanvas-xl{ position:static; z-index:auto; display:flex!important; flex-grow:1; width:auto!important; height:auto!important; visibility:visible!important; background:transparent; border:0; transform:none!important; transition:none; } .bootstrap-build .site-header .offcanvas-body{ display:flex; flex-grow:1; align-items:center; overflow:visible; padding:0; } .bootstrap-build .site-header .navbar-nav.w-100{ width:auto!important; } .bootstrap-build .w-xl-auto{ width:auto!important; } } @media (max-width:1199.98px){ .bootstrap-build .site-header .offcanvas-xl{ width:min(92vw,430px); max-width:100%; color:#1d2632; background:#fff; border-left:0; box-shadow:-22px 0 60px rgba(7,27,46,.20); } .bootstrap-build .site-header .offcanvas-body{ display:block; padding:14px 16px 40px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } .bootstrap-build .site-header .navbar-nav{ width:100%!important; align-items:stretch!important; } .bootstrap-build .site-header .navbar-nav>.nav-item{ width:100%; border-bottom:1px solid rgba(25,39,63,.08); } .bootstrap-build .site-header .navbar .nav-link{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:.92rem .35rem!important; font-size:.93rem!important; } .bootstrap-build .site-header .dropdown-menu{ position:static!important; inset:auto!important; float:none; width:100%!important; max-width:100%!important; margin:.1rem 0 .75rem!important; transform:none!important; box-shadow:none!important; border:1px solid rgba(25,39,63,.09)!important; } .bootstrap-build .site-header .standard-dropdown{ padding:.45rem; border-radius:12px; background:#f7f9fb; } .bootstrap-build .site-header .standard-dropdown .dropdown-item{ white-space:normal; padding:.68rem .75rem; border-radius:8px; } .bootstrap-build .site-header .offcanvas-body>.btn-brand{ width:100%; margin:18px 0 0!important; } .bootstrap-build.mobile-nav-open{ overflow:hidden; } .bootstrap-build .offcanvas-backdrop.show{ opacity:.58; } } @media (max-width:575.98px){ .bootstrap-build .site-header .offcanvas-xl{ width:94vw; } .bootstrap-build .site-header .offcanvas-header{ min-height:74px; padding:10px 14px; } .bootstrap-build .site-header .offcanvas-logo{ width:165px; } .bootstrap-build .site-header .offcanvas-body{ padding-left:12px; padding-right:12px; } } /* ========================================================= MOBILE OFFCANVAS + LOGO REPAIR — v3.1.0 Removes legacy collapse conflicts and provides explicit, self-contained open/close controls for every mobile viewport. ========================================================= */ .bootstrap-build .site-header .navbar-brand, .bootstrap-build .site-header .offcanvas-brand{ min-width:0; } .bootstrap-build .site-header .brand-logo, .bootstrap-build .site-header .offcanvas-logo{ display:block; height:auto!important; object-fit:contain!important; object-position:left center; } .bootstrap-build .site-header .brand-logo{ width:218px!important; max-width:100%!important; max-height:100px!important; } /* Explicit hamburger button — independent of Bootstrap's SVG icon. */ .bootstrap-build .site-header .navbar-toggler{ display:none; align-items:center; justify-content:center; gap:9px; width:auto; min-width:82px; height:46px; padding:0 13px!important; border:1px solid rgba(25,39,63,.14)!important; border-radius:12px!important; background:#fff!important; color:#172a3b; box-shadow:0 8px 22px rgba(7,30,51,.09); transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease; } .bootstrap-build .site-header .navbar-toggler:hover{ color:#fff; background:var(--red)!important; border-color:var(--red)!important; transform:translateY(-1px); } .bootstrap-build .site-header .navbar-toggler:focus-visible{ outline:0; box-shadow:0 0 0 .25rem rgba(178,15,23,.18),0 8px 22px rgba(7,30,51,.09)!important; } .bootstrap-build .menu-toggle-lines{ width:22px; height:16px; display:flex; flex-direction:column; justify-content:space-between; flex:0 0 22px; } .bootstrap-build .menu-toggle-lines>span{ display:block; width:100%; height:2px; border-radius:999px; background:currentColor; transform-origin:center; transition:transform .22s ease,opacity .18s ease,width .22s ease; } .bootstrap-build .menu-toggle-lines>span:nth-child(2){width:16px;align-self:flex-end} .bootstrap-build .menu-toggle-text{ font:800 .72rem/1 "Segoe UI",Arial,Helvetica,sans-serif; letter-spacing:.08em; text-transform:uppercase; } .bootstrap-build .site-header .navbar-toggler.is-open .menu-toggle-lines>span:nth-child(1){transform:translateY(7px) rotate(45deg)} .bootstrap-build .site-header .navbar-toggler.is-open .menu-toggle-lines>span:nth-child(2){opacity:0;width:0} .bootstrap-build .site-header .navbar-toggler.is-open .menu-toggle-lines>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Explicit close button — remains visible even when icon fonts/CDNs fail. */ .bootstrap-build .site-header .offcanvas-close{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:82px; height:44px; padding:0 12px; margin:0; border:1px solid rgba(178,15,23,.2); border-radius:12px; background:#fff3f4; color:var(--red); font:800 .72rem/1 "Segoe UI",Arial,Helvetica,sans-serif; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; } .bootstrap-build .site-header .offcanvas-close:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-1px); } .bootstrap-build .site-header .offcanvas-close:focus-visible{ outline:0; box-shadow:0 0 0 .25rem rgba(178,15,23,.18); } .bootstrap-build .offcanvas-close-icon{ position:relative; width:18px; height:18px; flex:0 0 18px; } .bootstrap-build .offcanvas-close-icon::before, .bootstrap-build .offcanvas-close-icon::after{ content:""; position:absolute; left:8px; top:1px; width:2px; height:16px; border-radius:999px; background:currentColor; } .bootstrap-build .offcanvas-close-icon::before{transform:rotate(45deg)} .bootstrap-build .offcanvas-close-icon::after{transform:rotate(-45deg)} @media (max-width:1199.98px){ .bootstrap-build .site-header{ overflow:visible!important; } .bootstrap-build .site-header .navbar{ min-height:88px!important; padding:4px 0!important; } .bootstrap-build .site-header .navbar>.container-xxl{ display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center!important; justify-content:initial!important; gap:14px; min-height:80px!important; padding-left:16px!important; padding-right:16px!important; flex-wrap:nowrap!important; } .bootstrap-build .site-header .navbar-brand{ position:static!important; justify-self:start!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; width:auto!important; max-width:100%!important; min-width:0; margin:0!important; padding:3px 0!important; transform:none!important; } .bootstrap-build .site-header .brand-logo{ width:188px!important; max-width:min(100%,188px)!important; max-height:78px!important; margin:0!important; } .bootstrap-build .site-header .navbar-toggler{ position:static!important; right:auto!important; top:auto!important; display:inline-flex!important; justify-self:end!important; transform:none!important; z-index:2!important; margin:0!important; } .bootstrap-build .site-header .offcanvas-xl{ z-index:5055; width:min(94vw,430px)!important; max-width:100%!important; height:100dvh; visibility:hidden; } .bootstrap-build .site-header .offcanvas-xl.show, .bootstrap-build .site-header .offcanvas-xl.showing{ visibility:visible; } .bootstrap-build .site-header .offcanvas-header{ display:flex!important; align-items:center; justify-content:space-between; gap:12px; min-height:94px!important; padding:10px 14px!important; background:#fff; } .bootstrap-build .site-header .offcanvas-brand{ flex:1 1 auto; max-width:calc(100% - 94px); } .bootstrap-build .site-header .offcanvas-logo{ width:158px!important; max-width:100%!important; max-height:73px!important; margin:0; } .bootstrap-build .site-header .offcanvas-body{ height:calc(100dvh - 94px); padding:12px 14px 32px!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; } .bootstrap-build.mobile-nav-open .site-header .navbar-brand, .bootstrap-build.mobile-nav-open .site-header>.navbar>.container-xxl>.navbar-toggler{ opacity:0; pointer-events:none; } .bootstrap-build .offcanvas-backdrop{ z-index:4990; } } @media (max-width:575.98px){ .bootstrap-build .site-header .navbar{ min-height:84px!important; } .bootstrap-build .site-header .navbar>.container-xxl{ min-height:76px!important; gap:9px; padding-left:12px!important; padding-right:12px!important; } .bootstrap-build .site-header .brand-logo{ width:156px!important; max-width:min(100%,156px)!important; max-height:72px!important; } .bootstrap-build .site-header .navbar-toggler{ min-width:74px; height:44px; gap:7px; padding:0 10px!important; } .bootstrap-build .menu-toggle-lines{width:20px;flex-basis:20px} .bootstrap-build .menu-toggle-text{font-size:.67rem} .bootstrap-build .site-header .offcanvas-xl{ width:100vw!important; max-width:100%!important; } .bootstrap-build .site-header .offcanvas-header{ min-height:88px!important; padding:9px 12px!important; } .bootstrap-build .site-header .offcanvas-logo{ width:150px!important; max-height:69px!important; } .bootstrap-build .site-header .offcanvas-close{ min-width:78px; height:42px; padding:0 10px; gap:7px; font-size:.67rem; } .bootstrap-build .site-header .offcanvas-body{ height:calc(100dvh - 88px); padding-left:12px!important; padding-right:12px!important; } } @media (max-width:359.98px){ .bootstrap-build .site-header .brand-logo{width:142px!important} .bootstrap-build .site-header .navbar-toggler{min-width:48px;width:48px;padding:0!important} .bootstrap-build .menu-toggle-text{display:none} .bootstrap-build .site-header .offcanvas-logo{width:138px!important} .bootstrap-build .offcanvas-close-text{display:none} .bootstrap-build .site-header .offcanvas-close{min-width:44px;width:44px;padding:0} } /* ========================================================= MOBILE LOGO TRUE-CENTRE REPAIR — v3.2.0 Centres the logo against the viewport/header, not against the remaining space beside the mobile menu control. ========================================================= */ @media (max-width:1199.98px){ .bootstrap-build .site-header .navbar>.container-xxl{ position:relative!important; } .bootstrap-build .site-header .navbar-brand{ position:absolute!important; left:50%!important; top:50%!important; right:auto!important; justify-self:auto!important; transform:translate(-50%,-50%)!important; z-index:1!important; } .bootstrap-build .site-header .brand-logo{ object-position:center center!important; } .bootstrap-build .site-header .navbar-toggler{ margin-left:auto!important; position:relative!important; z-index:3!important; } .bootstrap-build .site-header .offcanvas-header{ position:relative!important; } .bootstrap-build .site-header .offcanvas-brand{ position:absolute!important; left:50%!important; top:50%!important; right:auto!important; width:auto!important; max-width:none!important; transform:translate(-50%,-50%)!important; z-index:1!important; } .bootstrap-build .site-header .offcanvas-logo{ object-position:center center!important; } .bootstrap-build .site-header .offcanvas-close{ position:relative!important; z-index:3!important; margin-left:auto!important; } } /* Standalone deployment hardening */ .subpage-hero{ background-repeat:no-repeat!important; background-position:center center!important; background-attachment:scroll!important; } .subpage-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; /*background:linear-gradient(90deg,rgba(5,20,34,.95) 0%,rgba(5,20,34,.79) 48%,rgba(5,20,34,.34) 100%);*/ z-index:0; } .subpage-hero-overlay{z-index:1} .subpage-hero .container-fluid,.subpage-hero .container-xxl{position:relative;z-index:2} @media(max-width:767.98px){ .subpage-hero{background-position:62% center!important} .subpage-hero::before{background:linear-gradient(90deg,rgba(5,20,34,.96),rgba(5,20,34,.72))} } /* Project register page */ .project-register-section { background: radial-gradient(circle at 8% 5%, rgba(178, 15, 23, .055), transparent 27rem), linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%); } .project-register-heading { max-width: 860px; margin-inline: auto; } .project-summary-row { margin: 2rem 0 1.5rem; } .project-summary-card { height: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; box-shadow: 0 10px 30px rgba(16, 24, 40, .06); } .project-summary-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(178, 15, 23, .10); color: #b20f17; font-size: 1.3rem; } .project-summary-icon-completed { background: rgba(24, 135, 84, .11); color: #147346; } .project-summary-icon-ongoing { background: rgba(214, 133, 0, .13); color: #a36000; } .project-summary-icon-upcoming { background: rgba(44, 82, 130, .12); color: #2c5282; } .project-summary-card strong { display: block; color: #172033; font-size: 1.55rem; line-height: 1; } .project-summary-card small { display: block; margin-top: .35rem; color: #697386; font-weight: 700; } .project-register-panel { overflow: hidden; background: #fff; border: 1px solid #e4e8ef; border-radius: 20px; box-shadow: 0 20px 55px rgba(16, 24, 40, .08); } .project-register-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; gap: 1rem; align-items: end; padding: 1.2rem; border-bottom: 1px solid #e9ecf2; background: #fbfcfe; } .project-search-wrap { position: relative; } .project-search-wrap i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #7a8495; pointer-events: none; } .project-search-wrap input, .project-filter-wrap select { width: 100%; min-height: 46px; border: 1px solid #d8dde7; border-radius: 11px; background: #fff; color: #172033; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .project-search-wrap input { padding: .7rem 1rem .7rem 2.8rem; } .project-filter-wrap select { min-width: 170px; padding: .7rem 2.4rem .7rem .9rem; } .project-search-wrap input:focus, .project-filter-wrap select:focus { border-color: #b20f17; box-shadow: 0 0 0 3px rgba(178, 15, 23, .11); } .project-filter-wrap label { display: block; margin: 0 0 .35rem .15rem; color: #606b7d; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .project-result-count { min-width: 112px; padding-bottom: .25rem; text-align: right; } .project-result-count strong { display: block; color: #b20f17; font-size: 1.35rem; line-height: 1; } .project-result-count span { display: block; margin-top: .3rem; color: #727d8e; font-size: .78rem; font-weight: 700; } .project-table-note { display: none; gap: .45rem; align-items: center; padding: .7rem 1rem; background: #fff8e7; color: #76550b; font-size: .78rem; font-weight: 700; border-bottom: 1px solid #f0e1b7; } .project-table-wrap { max-height: 790px; overflow: auto; } .project-register-table { min-width: 1260px; margin: 0; border-collapse: separate; border-spacing: 0; } .project-register-table thead th { position: sticky; top: 0; z-index: 4; padding: 1rem; background: #182436; color: #fff; border: 0; font-size: .74rem; letter-spacing: .055em; line-height: 1.35; text-transform: uppercase; white-space: nowrap; } .project-register-table thead th:nth-child(1) { width: 64px; text-align: center; } .project-register-table thead th:nth-child(2) { width: 31%; } .project-register-table thead th:nth-child(3) { width: 24%; } .project-register-table thead th:nth-child(4) { width: 25%; } .project-register-table thead th:nth-child(5) { width: 190px; } .project-register-table tbody td { padding: 1rem; vertical-align: middle; background: #fff; color: #374151; border-color: #e9ecf1; font-size: .84rem; font-weight: 600; line-height: 1.5; } .project-register-table tbody tr:nth-child(even) td { background: #f9fafc; } .project-register-table tbody tr:hover td { background: #fff8f8; } .project-register-table .project-sn { position: sticky; left: 0; z-index: 2; text-align: center; color: #b20f17; font-size: .9rem; font-weight: 900; box-shadow: 1px 0 0 #e4e8ef; } .project-register-table thead th:first-child { left: 0; z-index: 6; } .project-register-table .project-name { color: #172033; font-weight: 800; } .project-status-cell { min-width: 178px; } .project-completion-date { display: block; margin-bottom: .42rem; color: #596579; font-size: .72rem; font-weight: 800; letter-spacing: .035em; } .project-status { display: inline-flex; align-items: center; min-height: 27px; padding: .32rem .62rem; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .045em; line-height: 1; white-space: nowrap; } .project-status-completed { background: #e7f6ed; color: #176c42; border: 1px solid #c5e7d3; } .project-status-ongoing { background: #fff3d8; color: #8b5900; border: 1px solid #f1d99e; } .project-status-yet-to-start { background: #eaf0f8; color: #2c5282; border: 1px solid #cedaec; } .project-empty-state { padding: 4rem 1rem; text-align: center; } .project-empty-state i { display: block; margin-bottom: .7rem; color: #b20f17; font-size: 2rem; } .project-empty-state h3 { margin-bottom: .35rem; color: #172033; font-size: 1.25rem; } .project-empty-state p { margin: 0; color: #6d7788; } @media (max-width: 991.98px) { .project-register-toolbar { grid-template-columns: 1fr 190px; } .project-result-count { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: .45rem; padding: 0; } .project-result-count strong, .project-result-count span { display: inline; margin: 0; } .project-table-note { display: flex; } } @media (max-width: 575.98px) { .project-summary-row { margin-top: 1.4rem; } .project-summary-card { padding: .9rem; gap: .75rem; border-radius: 13px; } .project-summary-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 11px; font-size: 1.05rem; } .project-summary-card strong { font-size: 1.3rem; } .project-summary-card small { font-size: .7rem; } .project-register-panel { border-radius: 14px; } .project-register-toolbar { grid-template-columns: 1fr; padding: .9rem; } .project-filter-wrap select { min-width: 0; } .project-result-count { grid-column: auto; justify-content: flex-start; } .project-table-wrap { max-height: 680px; } } /* ===== TESTIMONIALS PAGE V3.2.2 ===== */ .testimonials-subpage-hero::before{ background:linear-gradient(90deg,rgba(5,20,34,.97) 0%,rgba(5,20,34,.84) 48%,rgba(125,7,16,.35) 100%); } .testimonial-intro-section{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)} .testimonial-intro-copy{max-width:930px;margin:1.55rem 0 0;color:#536375;font-size:1.13rem;line-height:1.95} .testimonial-trust-panel{position:relative;overflow:hidden;padding:2rem;border-radius:24px;background:linear-gradient(145deg,#081d33 0%,#103f63 72%,#7d0710 150%);color:#fff;box-shadow:0 24px 55px rgba(8,29,51,.2)} .testimonial-trust-panel::after{content:"";position:absolute;right:-60px;bottom:-75px;width:190px;height:190px;border:35px solid rgba(255,255,255,.055);border-radius:50%} .testimonial-trust-kicker{display:block;margin-bottom:1.25rem;color:#ffb7bc;font-size:.73rem;font-weight:900;letter-spacing:.12em} .testimonial-trust-item{position:relative;z-index:1;display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.12)} .testimonial-trust-item:first-of-type{border-top:0} .testimonial-trust-item>i{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-size:1.25rem} .testimonial-trust-item strong{display:block;margin-bottom:.3rem;color:#fff;font-size:.98rem} .testimonial-trust-item span{display:block;color:rgba(255,255,255,.72);font-size:.82rem;line-height:1.55} .client-testimonials-grid-section{background:#f5f7fa} .client-testimonials-grid-section .section-heading{max-width:850px} .client-testimonial-card{position:relative;display:flex;flex-direction:column;height:100%;min-height:385px;padding:1.8rem;border:1px solid #e3e8ee;border-radius:22px;background:#fff;box-shadow:0 15px 38px rgba(10,34,54,.07);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .client-testimonial-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--red),#e34a53);transform:scaleY(.28);transform-origin:top;transition:transform .35s ease} .client-testimonial-card:hover{transform:translateY(-7px);border-color:#f0c9cc;box-shadow:0 24px 55px rgba(10,34,54,.13)} .client-testimonial-card:hover::before{transform:scaleY(1)} .client-testimonial-card-featured{background:linear-gradient(145deg,#fff 0%,#fff8f8 100%)} .testimonial-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem} .testimonial-quote-mark{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#fff0f1;color:var(--red);font-size:1.7rem} .testimonial-number{color:#c4cbd4;font-size:.77rem;font-weight:900;letter-spacing:.12em} .client-testimonial-card blockquote{flex:1;margin:0;color:#33475b;font-size:1rem;font-style:normal;font-weight:600;line-height:1.82} .testimonial-author{display:flex;align-items:center;gap:.85rem;margin-top:1.65rem;padding-top:1.25rem;border-top:1px solid #e8edf2} .testimonial-avatar{flex:0 0 47px;width:47px;height:47px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--navy),#195b8c);color:#fff;font-size:.82rem;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 20px rgba(8,29,51,.18)} .testimonial-author h3{margin:0 0 .2rem;color:#152b3e;font-size:1rem;font-weight:900} .testimonial-author div>span{color:#7b8795;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em} .testimonial-confidence-strip{background:linear-gradient(135deg,#8b0710 0%,#bd1721 55%,#071d31 155%);color:#fff} .confidence-strip-item{display:flex;align-items:center;gap:1rem;min-height:145px;padding:2rem;border-right:1px solid rgba(255,255,255,.14)} .testimonial-confidence-strip .col-md-4:last-child .confidence-strip-item{border-right:0} .confidence-strip-item>i{font-size:2rem;color:#ffd9dc} .confidence-strip-item strong{display:block;margin-bottom:.28rem;color:#fff;font-size:1rem} .confidence-strip-item span{display:block;color:rgba(255,255,255,.73);font-size:.82rem;line-height:1.5} @media(max-width:991.98px){ .client-testimonial-card{min-height:350px} .testimonial-trust-panel{margin-top:.5rem} } @media(max-width:767.98px){ .testimonial-intro-copy{font-size:1.02rem;line-height:1.8} .client-testimonial-card{min-height:auto;padding:1.45rem;border-radius:18px} .confidence-strip-item{min-height:auto;padding:1.4rem 1.2rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)} .testimonial-confidence-strip .col-md-4:last-child .confidence-strip-item{border-bottom:0} } /* ===== END TESTIMONIALS PAGE V3.2.2 ===== */ /* ===== TESTIMONIALS SLIDER V3.2.3 ===== */ .testimonial-slider-section{overflow:hidden} .testimonial-slider-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem} .testimonial-slider-heading .section-heading{max-width:850px;text-align:left} .testimonial-slider-heading .section-heading p{margin-left:0;margin-right:0} .testimonial-slider-actions{display:flex;gap:.75rem;flex:0 0 auto;padding-bottom:.25rem} .testimonial-slider-button{width:52px;height:52px;display:grid;place-items:center;border:1px solid #dce2e9;border-radius:50%;background:#fff;color:#142d44;font-size:1.15rem;box-shadow:0 10px 25px rgba(8,29,51,.08);transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease} .testimonial-slider-button:hover,.testimonial-slider-button:focus-visible{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-2px);box-shadow:0 14px 30px rgba(178,15,23,.22);outline:0} .testimonial-slider-button:disabled{opacity:.4;cursor:not-allowed;transform:none} .testimonial-slider{--slides-per-view:3;--slide-gap:24px;position:relative} .testimonial-slider-viewport{overflow:hidden;margin:-10px;padding:10px;touch-action:pan-y pinch-zoom} .testimonial-slider-track{display:flex;gap:var(--slide-gap);will-change:transform;transition:transform .65s cubic-bezier(.22,.61,.36,1)} .testimonial-slider.is-dragging .testimonial-slider-track{transition:none;cursor:grabbing} .testimonial-slide{flex:0 0 calc((100% - (var(--slides-per-view) - 1) * var(--slide-gap))/var(--slides-per-view));min-width:0} .testimonial-slide .client-testimonial-card{min-height:390px;transform:none} .testimonial-slide .client-testimonial-card:hover{transform:translateY(-5px)} .testimonial-slider-footer{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-top:1.75rem} .testimonial-slider-dots{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap} .testimonial-slider-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#bbc4cf;transition:width .3s ease,background .3s ease,transform .3s ease} .testimonial-slider-dot:hover{transform:scale(1.15);background:#8290a0} .testimonial-slider-dot.active{width:30px;background:var(--red)} .testimonial-slider-dot:focus-visible{outline:3px solid rgba(178,15,23,.18);outline-offset:3px} .testimonial-slider-progress{position:relative;flex:0 1 230px;height:3px;overflow:hidden;border-radius:99px;background:#dfe4e9} .testimonial-slider-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),#ec5b63)} .testimonial-slider.is-playing .testimonial-slider-progress span{animation:testimonialSliderProgress var(--testimonial-interval,5200ms) linear forwards} .testimonial-slider-hint{display:none;margin:.9rem 0 0;color:#7a8795;font-size:.77rem;font-weight:700;text-align:center} .testimonial-slider-hint i{margin-right:.3rem;color:var(--red)} @keyframes testimonialSliderProgress{from{width:0}to{width:100%}} @media(max-width:991.98px){ .testimonial-slider{--slides-per-view:2;--slide-gap:20px} .testimonial-slider-heading{align-items:center} .testimonial-slide .client-testimonial-card{min-height:370px} .testimonial-slider-hint{display:block} } @media(max-width:767.98px){ .testimonial-slider-heading{display:block;margin-bottom:1.45rem} .testimonial-slider-actions{justify-content:flex-end;margin-top:1.25rem;padding:0} .testimonial-slider-button{width:47px;height:47px} .testimonial-slider{--slides-per-view:1;--slide-gap:16px} .testimonial-slider-viewport{margin:-8px;padding:8px} .testimonial-slide .client-testimonial-card{min-height:350px} .testimonial-slider-footer{margin-top:1.25rem} .testimonial-slider-progress{display:none} .testimonial-slider-dots{justify-content:center;width:100%} } @media(max-width:420px){ .testimonial-slide .client-testimonial-card{min-height:390px} } @media(prefers-reduced-motion:reduce){ .testimonial-slider-track{transition:none} .testimonial-slider.is-playing .testimonial-slider-progress span{animation:none} } /* ===== END TESTIMONIALS SLIDER V3.2.3 ===== */ /* ===== CAREERS APPLICATION PAGE V3.2.4 ===== */ .careers-subpage-hero::before{ /*background:linear-gradient(90deg,rgba(5,20,34,.97) 0%,rgba(5,20,34,.84) 48%,rgba(125,7,16,.34) 100%);*/ } .career-intro-section{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)} .career-intro-copy{margin:1.3rem 0 0;color:#536375;font-size:1.03rem;line-height:1.85} .career-contact-panel{position:relative;overflow:hidden;height:100%;padding:2rem;border-radius:24px;background:linear-gradient(145deg,#081d33 0%,#103f63 72%,#7d0710 150%);color:#fff;box-shadow:0 24px 55px rgba(8,29,51,.18)} .career-contact-panel::after{content:"";position:absolute;right:-62px;bottom:-74px;width:190px;height:190px;border:35px solid rgba(255,255,255,.055);border-radius:50%} .career-contact-icon{position:relative;z-index:1;width:58px;height:58px;display:grid;place-items:center;margin-bottom:1.4rem;border-radius:18px;background:rgba(255,255,255,.1);font-size:1.55rem} .career-contact-kicker{position:relative;z-index:1;display:block;margin-bottom:.75rem;color:#ffb7bc;font-size:.72rem;font-weight:900;letter-spacing:.13em} .career-contact-panel h3{position:relative;z-index:1;margin-bottom:.8rem;color:#fff;font-size:1.42rem;font-weight:900} .career-contact-panel p{position:relative;z-index:1;margin-bottom:1.2rem;color:rgba(255,255,255,.74);line-height:1.7} .career-contact-panel a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-weight:800;text-decoration:none} .career-contact-panel a:hover{color:#ffd8da} .career-application-section{background:#f4f6f8} .career-form-shell{overflow:hidden;border:1px solid #e1e7ed;border-radius:24px;background:#fff;box-shadow:0 25px 65px rgba(8,29,51,.1)} .career-form-header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 2.2rem;border-bottom:1px solid #e7ebef;background:linear-gradient(135deg,#fff 0%,#fbfcfd 100%)} .career-form-header h2{margin:.4rem 0 .5rem;color:#102a41;font-size:clamp(1.7rem,2.3vw,2.35rem);font-weight:900} .career-form-header p{max-width:720px;margin:0;color:#687789;line-height:1.65} .career-form-security{flex:0 0 auto;display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem;border:1px solid #dfe6ec;border-radius:16px;background:#fff} .career-form-security>i{font-size:1.65rem;color:var(--red)} .career-form-security span{display:block} .career-form-security strong{display:block;color:#19344d;font-size:.86rem} .career-form-security small{display:block;margin-top:.15rem;color:#84909c;font-size:.72rem} .career-application-form{position:relative;padding:2.2rem} .career-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important} .career-field{position:relative} .career-field label{display:block;margin-bottom:.55rem;color:#283e53;font-size:.83rem;font-weight:800;letter-spacing:.01em} .career-field label span{color:var(--red)} .career-field input,.career-field select,.career-field textarea{width:100%;border:1px solid #d9e0e7;border-radius:12px;background:#fbfcfd;color:#1c3449;font:inherit;outline:0;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease} .career-field input,.career-field select{height:52px;padding:0 1rem} .career-field textarea{min-height:132px;padding:.9rem 1rem;resize:vertical} .career-field input::placeholder,.career-field textarea::placeholder{color:#9aa5b1} .career-field input:focus,.career-field select:focus,.career-field textarea:focus{border-color:rgba(178,15,23,.65);background:#fff;box-shadow:0 0 0 4px rgba(178,15,23,.09)} .career-select-field select{appearance:none;padding-right:2.7rem} .career-select-field>i{position:absolute;right:1rem;bottom:17px;pointer-events:none;color:#6f7d8a;font-size:.83rem} .career-field .invalid-feedback,.career-upload-field .invalid-feedback{display:none;margin-top:.45rem;color:#b20f17;font-size:.75rem;font-weight:700} .career-application-form.was-validated input:invalid,.career-application-form.was-validated select:invalid,.career-application-form.was-validated textarea:invalid{border-color:#c82333;background:#fff8f8} .career-application-form.was-validated input:invalid~.invalid-feedback,.career-application-form.was-validated select:invalid~.invalid-feedback,.career-application-form.was-validated textarea:invalid~.invalid-feedback{display:block} .career-upload-field{position:relative} .career-upload-field input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .career-upload-field label{display:flex;align-items:center;gap:1rem;min-height:98px;padding:1rem 1.1rem;border:2px dashed #ccd5de;border-radius:16px;background:#fafbfd;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s ease} .career-upload-field label:hover{border-color:rgba(178,15,23,.55);background:#fff9f9;transform:translateY(-1px)} .career-upload-field.has-file label{border-color:#739a83;background:#f7fcf8} .career-upload-field.is-invalid label{border-color:#c82333;background:#fff8f8} .career-upload-icon{flex:0 0 54px;width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:#fff0f1;color:var(--red);font-size:1.5rem} .career-upload-copy{min-width:0;flex:1} .career-upload-copy strong{display:block;overflow:hidden;color:#19344d;font-size:.95rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap} .career-upload-copy small{display:block;margin-top:.3rem;color:#7d8997;font-size:.76rem} .career-upload-button{flex:0 0 auto;padding:.72rem 1rem;border-radius:10px;background:#102e48;color:#fff;font-size:.78rem;font-weight:900} .career-form-footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid #e6ebef} .career-consent{display:flex;align-items:flex-start;gap:.75rem;max-width:770px;color:#667789;font-size:.8rem;line-height:1.55;cursor:pointer} .career-consent input{flex:0 0 18px;width:18px;height:18px;margin-top:.1rem;accent-color:var(--red)} .career-consent b{color:var(--red)} .career-submit-button{min-width:170px;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;box-shadow:0 14px 30px rgba(178,15,23,.22)} .career-submit-loading{display:none;align-items:center;gap:.55rem} .career-application-form.is-submitting .career-submit-default{display:none} .career-application-form.is-submitting .career-submit-loading{display:inline-flex} .career-application-form.is-submitting .career-submit-button{pointer-events:none;opacity:.8} .career-form-alert{margin:1.5rem 2.2rem 0;padding:1rem 1.15rem;border-radius:13px;font-size:.9rem;font-weight:700} .career-form-alert.is-success{border:1px solid #bad8c5;background:#eefaf2;color:#21633a} .career-form-alert.is-error{border:1px solid #edc0c5;background:#fff1f2;color:#8c1722} .career-values-strip{background:linear-gradient(135deg,#8b0710 0%,#bd1721 55%,#071d31 155%);color:#fff} .career-value-item{display:flex;align-items:center;gap:1rem;min-height:138px;padding:1.8rem 2rem;border-right:1px solid rgba(255,255,255,.14)} .career-values-strip .col-md-4:last-child .career-value-item{border-right:0} .career-value-item>i{font-size:1.9rem;color:#ffd9dc} .career-value-item strong{display:block;margin-bottom:.25rem;color:#fff;font-size:.98rem} .career-value-item span{display:block;color:rgba(255,255,255,.74);font-size:.8rem;line-height:1.45} @media(max-width:991.98px){ .career-form-header{align-items:flex-start} .career-form-security{display:none} .career-application-form{padding:1.7rem} .career-form-header{padding:1.7rem} .career-form-alert{margin:1.25rem 1.7rem 0} } @media(max-width:767.98px){ .career-intro-copy{font-size:.98rem;line-height:1.75} .career-contact-panel{padding:1.5rem;border-radius:19px} .career-form-shell{border-radius:18px} .career-form-header{padding:1.35rem} .career-application-form{padding:1.35rem} .career-form-alert{margin:1rem 1.35rem 0} .career-form-footer{align-items:stretch;flex-direction:column} .career-submit-button{width:100%} .career-upload-field label{align-items:flex-start;flex-wrap:wrap} .career-upload-copy{min-width:calc(100% - 70px)} .career-upload-button{margin-left:70px} .career-value-item{min-height:auto;padding:1.35rem 1.2rem;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)} .career-values-strip .col-md-4:last-child .career-value-item{border-bottom:0} } @media(max-width:420px){ .career-upload-icon{flex-basis:46px;width:46px;height:46px} .career-upload-copy{min-width:calc(100% - 62px)} .career-upload-button{width:100%;margin-left:0;text-align:center} } /* ===== END CAREERS APPLICATION PAGE V3.2.4 ===== */ /* ===== MEGA-MENU EXCLUSIVE SWITCHING FIX — v3.2.2 ===== */ @media (min-width:1200px){ /* Legacy hover-only rules could leave About and Products visible together. Visibility is now controlled exclusively by Bootstrap + main.js. */ .corporate-dropdown:hover > .dropdown-menu:not(.show), .corporate-dropdown:hover > .about-image-mega-menu:not(.show), .mega-menu-item:hover > .products-mega-menu:not(.show){ display:none!important; } .corporate-dropdown.mega-menu-active > .about-image-mega-menu, .mega-menu-item.mega-menu-active > .products-mega-menu{ display:block!important; } } .nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 0 rgba(13, 110, 253, .25) !important; } /* Project listing image-card layout v1.0 */ .project-listing-section{background:linear-gradient(180deg,#f4f7f9 0%,#fff 100%);position:relative;overflow:hidden}.project-listing-section:before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(179,13,23,.08),transparent 68%);right:-150px;top:80px;pointer-events:none}.project-listing-heading{max-width:940px}.project-listing-grid{position:relative;z-index:1}.project-listing-card{height:100%;background:#fff;border:1px solid #e1e8ed;border-radius:24px;overflow:hidden;box-shadow:0 16px 42px rgba(8,31,50,.08);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.project-listing-card:hover{transform:translateY(-8px);border-color:rgba(179,13,23,.22);box-shadow:0 26px 65px rgba(8,31,50,.15)}.project-listing-image{display:block;position:relative;height:320px;overflow:hidden;background:#dfe6eb}.project-listing-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,40,.04) 35%,rgba(4,24,40,.78) 100%);pointer-events:none}.project-listing-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s ease}.project-listing-card:hover .project-listing-image img{transform:scale(1.055);filter:saturate(1.04)}.project-listing-category{position:absolute;left:22px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.94);color:#10263a;font-size:.75rem;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 24px rgba(4,24,40,.16);backdrop-filter:blur(8px)}.project-listing-category i{color:var(--red);font-size:.92rem}.project-listing-arrow{position:absolute;right:20px;top:20px;z-index:2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--red);font-size:1.15rem;box-shadow:0 8px 24px rgba(4,24,40,.14);transition:.3s}.project-listing-card:hover .project-listing-arrow{background:var(--red);color:#fff;transform:rotate(45deg)}.project-listing-body{padding:28px 29px 30px}.project-listing-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;color:#758797;font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.project-listing-topline span:first-child{color:var(--red)}.project-listing-topline i{color:var(--red);margin-right:3px}.project-listing-body h3{font-size:1.55rem;line-height:1.25;font-weight:900;margin:0 0 12px}.project-listing-body h3 a{color:#10263a;transition:.25s}.project-listing-body h3 a:hover{color:var(--red)}.project-listing-body p{color:var(--muted);line-height:1.75;margin:0 0 21px;min-height:84px}.project-listing-meta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}.project-listing-meta span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:9px;background:#f3f6f8;color:#42576a;font-size:.78rem;font-weight:800}.project-listing-meta i{color:var(--red)}.project-listing-link{display:inline-flex;align-items:center;gap:9px;color:var(--red);font-weight:900}.project-listing-link i{transition:transform .25s}.project-listing-link:hover{color:#8f0811}.project-listing-link:hover i{transform:translateX(5px)}.project-listing-note{position:relative;z-index:1;margin-top:42px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:24px 26px;border-radius:20px;background:linear-gradient(135deg,#0a2d49,#124e78);color:#fff;box-shadow:0 20px 46px rgba(7,39,65,.18)}.project-listing-note-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.11);color:#ffbdc1;font-size:1.45rem}.project-listing-note strong{font-size:1.05rem}.project-listing-note p{margin:4px 0 0;color:#c8d8e4;line-height:1.55}.project-listing-note .btn{white-space:nowrap} @media(max-width:991.98px){.project-listing-image{height:270px}.project-listing-body{padding:24px}.project-listing-body p{min-height:108px}.project-listing-note{grid-template-columns:auto 1fr}.project-listing-note .btn{grid-column:1/-1;width:100%;justify-content:center}} @media(max-width:767.98px){.project-listing-section{padding-top:78px;padding-bottom:78px}.project-listing-image{height:235px}.project-listing-body{padding:23px 21px 25px}.project-listing-body h3{font-size:1.35rem}.project-listing-body p{min-height:auto}.project-listing-category{left:14px;bottom:14px;max-width:calc(100% - 78px);white-space:normal;line-height:1.25}.project-listing-arrow{width:42px;height:42px;right:14px;top:14px}.project-listing-topline{font-size:.66rem;align-items:flex-start}.project-listing-note{grid-template-columns:1fr;text-align:center;padding:24px 20px}.project-listing-note-icon{margin:auto}.project-listing-note .btn{grid-column:auto}} /* Blog image-led listing layout v1.0 */ .blog-listing-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f4f7f9 0%,#fff 100%)} .blog-listing-section:before{content:"";position:absolute;top:100px;left:-180px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(11,79,131,.08),transparent 68%);pointer-events:none} .blog-listing-section:after{content:"";position:absolute;right:-170px;bottom:120px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(179,13,23,.08),transparent 68%);pointer-events:none} .blog-listing-heading{position:relative;z-index:1;max-width:940px} .blog-featured-card{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.13fr) minmax(360px,.87fr);overflow:hidden;background:#fff;border:1px solid #e1e8ed;border-radius:28px;box-shadow:0 22px 58px rgba(8,31,50,.1)} .blog-featured-media,.blog-card-image{position:relative;display:block;overflow:hidden;background:#dfe7ec} .blog-featured-media{min-height:500px} .blog-featured-media:after,.blog-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,24,40,.02) 40%,rgba(4,24,40,.7) 100%);pointer-events:none} .blog-featured-media img,.blog-card-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .35s ease} .blog-featured-media img{position:absolute;inset:0;object-position:78% center} .blog-featured-card:hover .blog-featured-media img,.blog-image-card:hover .blog-card-image img{transform:scale(1.055);filter:saturate(1.04)} .blog-image-label,.blog-image-category{position:absolute;left:22px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.95);color:#10263a;font-size:.75rem;font-weight:900;letter-spacing:.035em;box-shadow:0 8px 24px rgba(4,24,40,.17);backdrop-filter:blur(8px)} .blog-image-label i{color:var(--red)} .blog-image-arrow{position:absolute;right:20px;top:20px;z-index:2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--red);font-size:1.15rem;box-shadow:0 8px 24px rgba(4,24,40,.14);transition:.3s} .blog-featured-card:hover .blog-image-arrow,.blog-image-card:hover .blog-image-arrow{background:var(--red);color:#fff;transform:rotate(45deg)} .blog-featured-content{display:flex;flex-direction:column;justify-content:center;padding:52px 48px} .blog-card-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:16px;color:#6d7f8f;font-size:.74rem;font-weight:900;letter-spacing:.075em;text-transform:uppercase} .blog-card-meta span{display:inline-flex;align-items:center;gap:7px} .blog-card-meta i{color:var(--red);font-size:.92rem} .blog-featured-content h3{margin:0 0 16px;font-size:clamp(2rem,3vw,3rem);font-weight:900;line-height:1.15} .blog-featured-content h3 a,.blog-card-content h3 a{color:#10263a;transition:.25s} .blog-featured-content h3 a:hover,.blog-card-content h3 a:hover{color:var(--red)} .blog-featured-content>p{margin:0 0 22px;color:var(--muted);font-size:1.02rem;line-height:1.8} .blog-key-points{display:grid;gap:10px;margin:0 0 28px;padding:0;list-style:none;color:#405568;font-weight:700} .blog-key-points li{display:flex;align-items:flex-start;gap:10px} .blog-key-points i{margin-top:2px;color:var(--green)} .blog-featured-content .btn{align-self:flex-start} .blog-card-grid{position:relative;z-index:1} .blog-image-card{height:100%;overflow:hidden;background:#fff;border:1px solid #e1e8ed;border-radius:24px;box-shadow:0 16px 42px rgba(8,31,50,.08);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease} .blog-image-card:hover{transform:translateY(-8px);border-color:rgba(179,13,23,.22);box-shadow:0 26px 65px rgba(8,31,50,.15)} .blog-card-image{height:320px} .blog-card-image img{object-position:76% center} .blog-card-image .blog-flooring-image{object-position:73% center} .blog-card-content{padding:29px 30px 31px} .blog-card-content h3{margin:0 0 13px;font-size:1.55rem;font-weight:900;line-height:1.28} .blog-card-content p{min-height:84px;margin:0 0 22px;color:var(--muted);line-height:1.75} .blog-read-link{display:inline-flex;align-items:center;gap:9px;color:var(--red);font-weight:900} .blog-read-link i{transition:transform .25s} .blog-read-link:hover{color:#8f0811} .blog-read-link:hover i{transform:translateX(5px)} .blog-guidance-strip{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:42px;padding:24px 26px;border-radius:20px;background:linear-gradient(135deg,#0a2d49,#124e78);color:#fff;box-shadow:0 20px 46px rgba(7,39,65,.18)} .blog-guidance-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.11);color:#ffbdc1;font-size:1.45rem} .blog-guidance-strip strong{font-size:1.05rem} .blog-guidance-strip p{margin:4px 0 0;color:#c8d8e4;line-height:1.55} .blog-guidance-strip .btn{white-space:nowrap} @media(max-width:1199.98px){.blog-featured-card{grid-template-columns:1fr 1fr}.blog-featured-content{padding:40px 36px}.blog-featured-media{min-height:470px}} @media(max-width:991.98px){.blog-featured-card{grid-template-columns:1fr}.blog-featured-media{min-height:420px}.blog-featured-content{padding:38px 34px}.blog-card-image{height:300px}.blog-card-content p{min-height:auto}.blog-guidance-strip{grid-template-columns:auto 1fr}.blog-guidance-strip .btn{grid-column:1/-1;width:100%;justify-content:center}} @media(max-width:767.98px){.blog-listing-section{padding-top:78px;padding-bottom:78px}.blog-featured-card,.blog-image-card{border-radius:20px}.blog-featured-media{min-height:275px}.blog-featured-content{padding:29px 23px 30px}.blog-featured-content h3{font-size:1.75rem}.blog-featured-content .btn{width:100%;justify-content:center}.blog-card-image{height:245px}.blog-card-content{padding:24px 22px 26px}.blog-card-content h3{font-size:1.35rem}.blog-image-label,.blog-image-category{left:14px;bottom:14px;max-width:calc(100% - 78px);white-space:normal;line-height:1.25}.blog-image-arrow{width:42px;height:42px;right:14px;top:14px}.blog-guidance-strip{grid-template-columns:1fr;text-align:center;padding:24px 20px}.blog-guidance-icon{margin:auto}.blog-guidance-strip .btn{grid-column:auto}} /* End blog image-led listing layout v1.0 */ /* Contact page: embedded Google Maps for Dubai and Umm Al Quwain */ .branch-maps-section{ position:relative; padding:0 0 110px; background:#f7f9fb; overflow:hidden; } .branch-maps-section::before{ content:""; position:absolute; left:-120px; bottom:-160px; width:390px; height:390px; border-radius:50%; background:radial-gradient(circle,rgba(179,13,23,.09),transparent 68%); pointer-events:none; } .branch-maps-section::after{ content:""; position:absolute; right:-150px; top:10px; width:410px; height:410px; border-radius:50%; background:radial-gradient(circle,rgba(13,109,169,.1),transparent 68%); pointer-events:none; } .branch-maps-section>.container-fluid{position:relative;z-index:1} .branch-maps-heading{margin-bottom:2.6rem} .branch-map-card{ height:100%; overflow:hidden; border:1px solid #e3eaf0; border-radius:24px; background:#fff; box-shadow:0 20px 50px rgba(8,34,55,.11); transition:transform .35s ease,box-shadow .35s ease; } .branch-map-card:hover{ transform:translateY(-6px); box-shadow:0 28px 65px rgba(8,34,55,.16); } .branch-map-header{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:1.45rem 1.55rem; color:#fff; } .branch-map-red .branch-map-header{background:linear-gradient(135deg,#8b0710,#c71d27)} .branch-map-blue .branch-map-header{background:linear-gradient(135deg,#073b62,#0d6da9)} .branch-map-icon{ width:52px; height:52px; display:grid; place-items:center; flex:0 0 52px; border:1px solid rgba(255,255,255,.27); border-radius:16px; background:rgba(255,255,255,.12); font-size:1.35rem; } .branch-map-header span{ display:block; margin-bottom:3px; color:rgba(255,255,255,.75); font-size:.7rem; font-weight:900; letter-spacing:.12em; } .branch-map-header h3{ margin:0; color:#fff; font-size:1.42rem; font-weight:900; } .branch-map-header p{ margin:.25rem 0 0; color:rgba(255,255,255,.8); font-size:.88rem; } .branch-map-link{ display:inline-flex; align-items:center; gap:7px; padding:.68rem .9rem; border:1px solid rgba(255,255,255,.65); border-radius:10px; color:#fff; font-size:.82rem; font-weight:900; white-space:nowrap; transition:.25s ease; } .branch-map-link:hover{ border-color:#fff; background:#fff; color:#11283c; } .branch-map-frame{position:relative;height:430px;background:#e8edf1} .branch-map-frame iframe{display:block;width:100%;height:100%;border:0} @media(max-width:767.98px){ .branch-maps-section{padding-bottom:78px} .branch-maps-heading{margin-bottom:2rem} .branch-map-header{grid-template-columns:auto minmax(0,1fr);padding:1.2rem} .branch-map-link{grid-column:1/-1;justify-content:center;width:100%} .branch-map-frame{height:340px} } @media(max-width:419.98px){ .branch-map-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px} .branch-map-header h3{font-size:1.2rem} .branch-map-frame{height:300px} }