:root{--primary:#0F2C59;--primary-light:#1e4b8a;--accent:#334155;--highlight:#0ea5e9;--gold:#c56565;--text-dark:#1e293b;--text-gray:#64748b;--bg-body:#ffffff;--bg-section:#f8fafc;--border:#e2e8f0;--font-heading:'Montserrat',sans-serif;--font-body:'Inter',sans-serif;--container:1400px;--radius:2px;--dark:#0B1120;}html{box-sizing:border-box;}*,*:before,*:after{margin:0;padding:0;box-sizing:inherit;}img,video{max-width:100%;height:auto;}html,body{font-family:var(--font-body);color:var(--text-dark);background-color:var(--bg-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;position:relative;-ms-overflow-style:none;scrollbar-width:none;}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;}a{text-decoration:none;color:inherit;transition:0.3s;}.text-reveal-wrapper{overflow:hidden;display:inline-block;vertical-align:top;}.text-reveal{display:inline-block;transform:translateY(100%);opacity:1;transition:transform 1s cubic-bezier(0.16,1,0.3,1),opacity 1s ease;}.text-reveal.visible{transform:translateY(0);opacity:1;}.fade-up{opacity:0;transform:translateY(30px);transition:0.8s ease;}.fade-up.visible{opacity:1;transform:translateY(0);}.text-xl{font-size:clamp(2.5rem,5vw + 1rem,4.5rem);letter-spacing:-1px;line-height:1.1;font-weight:300;font-family:var(--font-heading);}.text-lg{font-size:clamp(1.8rem,4vw + 0.5rem,3rem);letter-spacing:-0.5px;line-height:1.2;font-weight:400;font-family:var(--font-heading);}.text-md{font-size:clamp(1.2rem,2vw + 0.5rem,1.5rem);font-weight:600;font-family:var(--font-heading);}.text-sm{font-size:0.875rem;color:var(--text-gray);}.text-gray{color:var(--text-gray);}.prod-name{font-size:1.1rem;font-weight:700;color:white;font-family:var(--font-heading);margin-bottom:0.5rem;display:block;}.prod-cat{font-size:0.75rem;color:var(--text-gray);text-transform:uppercase;font-weight:600;display:block;margin-bottom:0.5rem;}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.85rem 1.75rem;font-family:var(--font-heading);font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border-radius:50px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);}.btn-primary{background:#f8fafc;color:var(--text-dark);border:1px solid var(--primary);}.btn-primary:hover{background:var(--primary-light);border-color:var(--primary-light);}.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary);}.btn-outline:hover{background:#f8fafc;color:var(--text-dark);}.btn-link{padding:0;color:var(--primary);border-bottom:1px solid transparent;display:inline-flex;align-items:center;gap:0.25rem;font-weight:600;font-size:0.9rem;}.btn-link:hover{border-bottom-color:var(--primary);}.btn-sm{padding:.5rem 1rem;font-size:.75rem;text-transform:uppercase;font-weight:700;border-radius:2px;letter-spacing:.5px;}.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1rem,3vw,2rem);}.section{padding:clamp(3rem,5vw,6rem) 0;}.bg-light{background-color:var(--bg-section);}\.bg-dark {background-color:#f8fafc;color:var(--text-dark);}\.top-nav {background:#ffffff;color:var(--text-dark);padding:.4rem 0;font-size:.9rem;overflow:hidden;}.top-nav .marquee-container{width:100%;margin:0;padding:0 20px;display:flex;overflow:hidden;}@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}.mini-marquee-wrapper{width:100%;flex:1;overflow:hidden;position:relative;height:30px;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);display:flex;align-items:center;}.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee var(--marquee-speed,30s) linear infinite;}.marquee-set{display:flex;align-items:center;gap:8rem;padding-right:8rem;flex-shrink:0;}.marquee-set span{position:relative;}.marquee-set span::after{content:"";position:absolute;right:-4.5rem;color:var(--highlight);opacity:.5;}.site-header{border-bottom:1px solid var(--border);background:white;position:sticky;top:0;z-index:1000;}.header-inner{display:flex;justify-content:space-between;align-items:center;height:70px;flex-wrap:wrap;gap:1rem;}.logo{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;color:var(--primary);letter-spacing:-.5px;cursor:pointer;}.logo-img{height:45px;width:auto;}.nav-menu{display:flex;gap:clamp(1rem,2vw,3rem);align-items:center;flex-wrap:wrap;}.nav-link{display:inline-flex;align-items:center;gap:4px;font-size:.9rem;font-weight:500;color:var(--text-dark);position:relative;}.nav-link.active,.nav-link:hover{color:var(--primary);font-weight:700;}.nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--primary);transition:0.3s;}.nav-link:hover::after,.nav-link.active::after{width:100%;}.dropdown{position:relative;display:inline-block;}.dropdown-content{display:none;position:absolute;background-color:#fff;min-width:200px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.1);z-index:1001;border-radius:var(--radius);padding:.5rem 0;top:100%;left:0;border:1px solid var(--border);}.dropdown:hover .dropdown-content{display:block;animation:fadeIn 0.2s ease;}.dropdown-content a{color:var(--text-dark);padding:12px 20px;text-decoration:none;display:block;font-size:0.9rem;font-weight:500;border-bottom:1px solid rgba(0,0,0,0.03);}.dropdown-content a:hover{background-color:var(--bg-section);color:var(--primary);padding-left:25px;}.header-actions{display:flex;gap:1.5rem;align-items:center;}.mobile-toggle{display:none;background:none;border:none;cursor:pointer;}.hero-slider-container{position:relative;height:90vh;min-height:600px;background:#0f172a;overflow:hidden;}.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;z-index:1;}.hero-slide.active{opacity:1;z-index:2;}.hero-video{width:100%;height:100%;object-fit:cover;position:absolute;z-index:0;}.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:1;}.hero-content{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;justify-content:center;color:white;padding-left:5%;}.hero-number{font-size:clamp(3rem,10vw,8rem);font-family:var(--font-heading);font-weight:800;opacity:0.1;line-height:0.8;position:absolute;top:20%;left:4%;}.hero-overline{font-size:0.9rem;text-transform:uppercase;letter-spacing:3px;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;}.slider-nav{position:absolute;right:3rem;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:1rem;}.nav-dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);background:transparent;cursor:pointer;transition:0.3s;}.nav-dot.active{background:white;border-color:white;transform:scale(1.2);}.slider-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:4px;background:rgba(255,255,255,0.1);z-index:20;}.progress-fill{height:100%;background:var(--highlight);width:0%;}\.trust-strip {background:#f8fafc;color:var(--text-dark);padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,0.1);}.trust-grid{display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:1rem;color:white;}.trust-item{display:flex;align-items:center;gap:1rem;font-family:var(--font-heading);font-size:0.9rem;letter-spacing:0.5px;font-weight:500;}.product-showcase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}.prod-card{position:relative;height:400px;overflow:hidden;border-radius:8px;isolation:isolate;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);transition:0.3s ease;}.prod-card:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);transform:translateY(-4px);}.prod-card.featured{grid-column:span 2;grid-row:span 2;}.prod-img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(0.4,0,0.2,1);}.prod-card:hover .prod-img{transform:scale(1.05);}.prod-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.9);display:flex;align-items:flex-end;padding:2rem;}.prod-details{color:white;width:100%;transform:translateY(0);transition:0.4s ease;}.prod-card:hover .prod-details{transform:translateY(0);}.prod-badge{position:absolute;top:1.5rem;left:1.5rem;background:var(--gold);color:white;font-weight:700;font-size:0.7rem;padding:0.25rem 0.75rem;text-transform:uppercase;letter-spacing:1px;z-index:10;font-family:var(--font-heading);}.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;margin-top:4rem;text-align:center;}.cert-card{padding:2rem;border:1px solid var(--border);transition:0.3s;}.cert-card:hover{border-color:var(--gold);box-shadow:0 10px 30px rgba(0,0,0,0.05);}.cert-icon{width:64px;height:64px;margin:0 auto 1.5rem;color:var(--primary);}.arrivals-track-container{position:relative;overflow:hidden;padding:1rem 0;}.arrivals-track{display:flex;gap:2rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;}.arrivals-track::-webkit-scrollbar{display:none;}.arrival-slide{background:white;border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:0.3s;display:flex;flex-direction:column;overflow:hidden;min-width:280px;max-width:320px;height:400px;}.arrival-slide:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);transform:translateY(-2px);}.arrival-img-box{height:220px;overflow:hidden;position:relative;}.arrival-img-box img{width:100%;height:100%;object-fit:cover;transition:0.5s;}.arrival-slide:hover .arrival-img-box img{transform:scale(1.1);}.arrival-content-box{padding:1.25rem;flex:1;display:flex;flex-direction:column;}.slider-controls{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;}.slider-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.3s;color:var(--text-dark);}.slider-arrow:hover{background:#f8fafc;color:var(--text-dark);border-color:var(--primary);}.infra-section{background:url('https://images.unsplash.com/photo-1565515263728-90eec1163159?q=80&w=2070') center/cover fixed;height:600px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:white;}.infra-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.85);}.news-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;}.news-item{margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:2rem;display:flex;flex-direction:column;justify-content:space-between;height:100%;}html{scroll-behavior:smooth;}.floating-actions{position:fixed;bottom:90px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:1000;}.fab-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275),box-shadow 0.3s;}.fab-btn:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(0,0,0,0.2);}.fab-btn.whatsapp{background-color:#25D366;}.fab-btn.call{background-color:#3b82f6;}footer{background:white;padding-top:4rem;border-top:1px solid var(--border);}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;margin-bottom:3rem;}.footer-heading{font-family:var(--font-heading);font-weight:700;margin-bottom:1.5rem;color:var(--primary);}.product-detail-grid{display:grid;grid-template-columns:1fr;gap:3rem;}@media (min-width:768px){.product-detail-grid{grid-template-columns:1fr 1fr;gap:4rem;}}.product-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;}.prod-thumbs{display:flex;gap:1rem;margin-top:1rem;overflow-x:auto;}.prod-thumb{width:80px;height:80px;object-fit:cover;border:2px solid transparent;cursor:pointer;border-radius:var(--radius);transition:0.3s;}.prod-thumb.active,.prod-thumb:hover{border-color:var(--primary);}.spec-table{width:100%;border-collapse:collapse;}.spec-table td{padding:1rem;border-bottom:1px solid var(--border);}.spec-table td:first-child{font-weight:600;width:40%;}.footer-links{list-style:none;}.footer-links li{margin-bottom:0.75rem;}.footer-links a{color:var(--text-gray);font-size:0.95rem;}.footer-links a:hover{color:var(--primary);padding-left:5px;}.footer-btm{border-top:1px solid var(--border);padding:2rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:0.9rem;color:var(--text-gray);}.footer-legal{display:flex;gap:1.5rem;}.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s;}.popup-overlay.active{display:flex;opacity:1;}.popup-modal{background:white;width:90%;max-width:450px;border-radius:var(--radius);overflow:hidden;position:relative;animation:popupUp 0.4s cubic-bezier(0.175,0.885,0.32,1.275);}.popup-close{position:absolute;top:10px;right:10px;background:white;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;}.popup-close i,.popup-close svg{color:var(--text-dark) !important;}.popup-img{width:100%;height:200px;object-fit:cover;}.popup-body{padding:2rem;text-align:center;}@keyframes popupUp{from{transform:scale(0.8) translateY(20px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}@media (max-width:992px){.nav-menu,.header-actions{display:none;}.mobile-toggle{display:block;}}.mobile-menu-overlay{position:fixed;inset:0;background:white;z-index:10001;transform:translateX(-100%);visibility:hidden;transition:transform 0.3s ease-in-out,visibility 0s linear 0.3s;display:flex;flex-direction:column;}.mobile-menu-overlay.active{transform:translateX(0);visibility:visible;transition:transform 0.3s ease-in-out,visibility 0s linear 0s;}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid var(--border);}.mobile-links{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto;}.mobile-links a{font-size:1.1rem;font-weight:600;color:var(--text-dark);}.mobile-dropdown-content{display:none;padding-left:1.5rem;flex-direction:column;gap:1rem;margin-top:1rem;}.mobile-dropdown-content.active{display:flex;}.testimonial-carousel{display:flex;gap:2rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;padding:1rem 0;width:100%;max-width:100%;min-width:0;box-sizing:border-box;}.testimonial-carousel::-webkit-scrollbar{display:none;}.testimonial-slide{min-width:clamp(280px,80%,400px);background:white;padding:2rem;border-radius:var(--radius);border:1px solid var(--border);scroll-snap-align:start;display:flex;flex-direction:column;gap:1rem;}@media (min-width:1024px){.testimonial-slide{min-width:calc((100% - 4rem) / 3);flex:0 0 calc((100% - 4rem) / 3);}}.t-header{display:flex;align-items:center;gap:1rem;}.t-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;}.t-info h4{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:0.2rem;}.t-info p{font-size:0.85rem;color:var(--text-gray);}.t-quote{font-style:italic;color:var(--text-dark);line-height:1.6;font-size:0.95rem;}\.events-list {background:#f8fafc;color:var(--text-dark);padding:2rem;border-radius:var(--radius);}.event-row{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-start;}.event-date-box{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:0.5rem;text-align:center;border-radius:4px;min-width:60px;}.event-date-num{font-size:1.5rem;font-weight:700;display:block;line-height:1;}.event-title{font-weight:700;margin-bottom:0.2rem;line-height:1.2;}.news-meta{font-size:0.8rem;color:var(--text-gray);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}.news-link{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--primary);transition:0.3s;}.news-link:hover{color:var(--highlight);}.news-layout{display:grid;grid-template-columns:2fr 1fr;gap:4rem;padding-top:4rem;}.news-card{display:flex;gap:2rem;margin-bottom:3rem;align-items:flex-start;}.news-thumb{width:300px;height:200px;object-fit:cover;border-radius:var(--radius);background:#eee;flex-shrink:0;}@media(max-width:768px){.news-card{flex-direction:column;}.news-thumb{width:100%;height:250px;}}.news-main-title{font-size:1.5rem;line-height:1.3;margin-bottom:1rem;color:var(--primary);font-family:var(--font-heading);font-weight:700;}.news-excerpt{color:var(--text-gray);margin-bottom:1rem;}.sidebar-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;border-bottom:2px solid var(--primary);padding-bottom:0.5rem;display:inline-block;}.event-widget{background:var(--bg-section);padding:2rem;border-radius:var(--radius);}.event-item{display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}.event-item:last-child{border:none;margin:0;padding:0;}.event-date{text-align:center;background:white;padding:0.5rem;border-radius:4px;min-width:60px;height:fit-content;border:1px solid var(--border);}.date-day{display:block;font-size:1.5rem;font-weight:700;line-height:1;color:var(--primary);}.date-month{font-size:0.7rem;text-transform:uppercase;font-weight:600;color:var(--text-gray);}@media(max-width:1024px){.news-layout{grid-template-columns:1fr;}.news-card{flex-direction:column;}.news-thumb{width:100%;height:250px;}}.sus-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:6rem;}.sus-img{width:100%;border-radius:var(--radius);}.sus-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;margin-top:3rem;background:#f0fdf4;padding:4rem;border-radius:var(--radius);}.sus-stat-num{font-size:3rem;font-weight:700;color:#16a34a;font-family:var(--font-heading);margin-bottom:0.5rem;}@media(max-width:1024px){.sus-grid{grid-template-columns:1fr;}.sus-stat-grid{grid-template-columns:1fr;}}.page-hero{position:relative;padding:6rem 0;background:#0f172a;color:white;text-align:center;overflow:hidden;}.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.3;z-index:0;}.page-hero-content{position:relative;z-index:10;}.breadcrumb{color:rgba(255,255,255,0.7);font-size:0.9rem;margin-bottom:1.5rem;display:flex;justify-content:center;gap:0.5rem;}.products-layout{display:grid;grid-template-columns:250px 1fr;gap:3rem;padding-top:2rem;}.sidebar{position:sticky;top:100px;height:fit-content;}.filter-group{margin-bottom:2rem;}.filter-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);}.filter-list{list-style:none;}.filter-item{margin-bottom:0.5rem;}.filter-item a{display:flex;justify-content:space-between;color:var(--text-gray);padding:0.5rem;border-radius:var(--radius);transition:0.2s;font-size:0.95rem;}.filter-item a:hover,.filter-item a.active{background:var(--bg-section);color:var(--primary);font-weight:600;}.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}.prod-card{background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:0.3s;height:100%;display:flex;flex-direction:column;}.prod-card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.05);transform:translateY(-5px);}.prod-img-box{height:250px;overflow:hidden;position:relative;background:#f8fafc;}.prod-img{width:100%;height:100%;object-fit:cover;transition:0.5s;}.prod-card:hover .prod-img{transform:scale(1.05);}.prod-content{padding:1.5rem;flex:1;display:flex;flex-direction:column;}.prod-cat-label{font-size:0.75rem;color:var(--text-gray);text-transform:uppercase;font-weight:600;margin-bottom:0.5rem;display:block;}.prod-title{font-size:1.1rem;font-weight:700;margin-bottom:1.5rem;color:var(--text-dark);}.btn-full{margin-top:auto;width:100%;}@media(max-width:992px){.products-layout{grid-template-columns:1fr;}.sidebar{display:none;}}.home-news-card{display:flex;gap:1.5rem;margin-bottom:2rem;align-items:flex-start;padding-bottom:2rem;border-bottom:1px solid var(--border);}.home-news-card:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}.home-news-img{width:140px;height:100px;object-fit:cover;border-radius:var(--radius);background:#f1f5f9;flex-shrink:0;}.home-news-content{flex:1;}.home-news-date{font-size:0.75rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.5rem;display:block;}.home-news-title{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;line-height:1.3;margin-bottom:0.5rem;color:var(--text-dark);display:block;transition:0.2s;}.home-news-title:hover{color:var(--primary);}.home-news-excerpt{font-size:0.9rem;color:var(--text-gray);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}@media(max-width:600px){.home-news-card{flex-direction:column;gap:1rem;}.home-news-img{width:100%;height:180px;}}\.marquee-bg {background:#f8fafc;color:var(--text-dark);}\.marquee-static {background-color:#f8fafc;color:var(--text-dark);text-align:center;padding:0.5rem;font-size:0.9rem;font-weight:500;}.marquee-spacer{margin:0 2rem;}.footer-logo-img{height:60px;width:auto;margin-bottom:1rem;background:white;padding:5px;border-radius:4px;}.footer-desc{color:#94a3b8;font-size:0.9rem;margin-top:0.5rem;line-height:1.5;}.social-links{display:flex;gap:1rem;margin-top:1rem;}.social-icon{color:#94a3b8;transition:color 0.3s;}.social-icon:hover{color:white;}.footer-contact-info{margin-top:1.5rem;color:#94a3b8;font-size:0.9rem;}.footer-btm{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}.footer-legal{display:flex;gap:1.5rem;}.footer-legal a{color:#94a3b8;font-size:0.85rem;transition:color 0.3s;}.footer-legal a:hover{color:var(--gold);}.power-link{color:var(--text-gray);text-decoration:underline;}.power-link:hover{color:var(--primary);}.section-header-flex{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;}.section-header-center{text-align:center;margin-bottom:3rem;}.section-subtext{margin-top:1rem;color:var(--text-gray);max-width:600px;margin-inline:auto;}.text-primary{color:var(--primary);}.mb-half{margin-bottom:0.5rem;}.mb-3{margin-bottom:3rem;}.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}.split-layout.reverse{direction:rtl;}.split-layout.reverse>*{direction:ltr;}.split-image img{width:100%;border-radius:var(--radius);box-shadow:0 20px 40px rgba(0,0,0,0.1);}.sub-heading{display:inline-block;font-size:0.85rem;text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--primary);margin-bottom:1rem;padding-bottom:0.5rem;position:relative;}.sub-heading::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gold);}.text-justify{text-align:justify;}.cert-strip{background:#f8fafc;border-bottom:1px solid var(--border);padding:1.5rem 0;}.cert-flex{display:flex;justify-content:space-evenly;flex-wrap:wrap;gap:1.5rem;}.cert-flex span{display:flex;align-items:center;gap:0.5rem;font-weight:600;font-size:0.9rem;color:var(--primary);}.leader-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem;}.leader-card{background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:0.3s;}.leader-card:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(0,0,0,0.05);}.leader-img{height:320px;overflow:hidden;background:#f1f5f9;}.leader-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:0.5s;}.leader-card:hover .leader-img img{transform:scale(1.05);}.leader-info{padding:2rem;}.leader-info h3{font-size:1.25rem;font-weight:700;color:var(--primary);margin-bottom:0.25rem;}.leader-role{font-size:0.85rem;text-transform:uppercase;font-weight:600;color:var(--gold);display:block;margin-bottom:1rem;}.leader-bio{font-size:0.9rem;color:var(--text-gray);line-height:1.6;}.philosophy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;}.ph-card{text-align:center;padding:2rem;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);border-radius:var(--radius);transition:0.3s;}.ph-card:hover{background:rgba(255,255,255,0.08);transform:translateY(-5px);}.ph-icon{width:60px;height:60px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;background:var(--gold);color:white;border-radius:50%;}.divider-center{width:60px;height:3px;background:var(--gold);margin:1.5rem auto 0;}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center;}.stat-card{padding:2rem;background:#f8fafc;border-radius:var(--radius);}.stat-num{font-size:3.5rem;font-weight:800;color:var(--primary);line-height:1;margin-bottom:0.5rem;font-family:var(--font-heading);}@media(max-width:992px){.split-layout{grid-template-columns:1fr;gap:3rem;}.split-layout.reverse{direction:ltr;}.split-layout.reverse .split-image{order:-1;}}.pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:5rem;}.pillar-card{text-align:center;padding:2.5rem 2rem;background:white;box-shadow:0 10px 30px rgba(0,0,0,0.03);border-radius:var(--radius);border-top:4px solid var(--primary);transition:0.3s;}.pillar-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,0.08);}.pillar-icon{margin-bottom:1.5rem;color:#16a34a;}.air-quality-section{background:#f0fdf4;padding:5rem 0;margin-bottom:5rem;}.air-quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}.compliance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:6rem;}.compliance-card{display:flex;gap:1.5rem;padding:1.5rem;background:white;border:1px solid var(--border);border-radius:var(--radius);align-items:flex-start;}.comp-icon{width:50px;height:50px;background:var(--bg-section);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;}.csr-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;background:#fff7ed;border-radius:var(--radius);overflow:hidden;}.csr-img img{width:100%;height:100%;object-fit:cover;min-height:400px;}.csr-content{padding:4rem;}@media(max-width:992px){.air-quality-grid,.csr-grid{grid-template-columns:1fr;}.csr-img img{height:250px;}.csr-content{padding:2rem;}}.job-list{display:flex;flex-direction:column;gap:1.5rem;}.job-card{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:0.3s;}.job-card:hover{border-color:var(--primary);box-shadow:0 10px 30px rgba(0,0,0,0.05);}.job-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;flex-wrap:wrap;gap:1rem;}.job-meta{display:flex;gap:1rem;font-size:0.9rem;color:var(--text-gray);margin-top:0.5rem;flex-wrap:wrap;}.job-meta span{display:flex;align-items:center;gap:0.4rem;}.job-desc{color:var(--text-gray);font-size:0.95rem;line-height:1.6;}.vacancy-badge{background:#f8fafc;color:var(--text-dark);font-size:0.8rem;padding:0.2rem 0.6rem;border-radius:20px;vertical-align:middle;margin-left:0.5rem;}.tag-badge{font-size:0.75rem;padding:0.1rem 0.5rem;border-radius:4px;background:#f1f5f9;color:var(--text);border:1px solid var(--border);font-weight:600;}.tag-badge.active{background:#dcfce7;color:#166534;border-color:#bbf7d0;}.tag-badge.recent{background:#e0f2fe;color:#075985;border-color:#bae6fd;}.form-box{background:white;padding:3rem;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,0.05);max-width:700px;margin:0 auto;}.form-group{margin-bottom:1.5rem;}.form-label{display:block;margin-bottom:0.5rem;font-weight:500;font-size:0.95rem;}.form-control{width:100%;padding:0.8rem;border:1px solid var(--border);border-radius:6px;font-size:1rem;transition:0.3s;}.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(220,38,38,0.1);}@media(max-width:768px){.job-header{flex-direction:column;}.btn-block-mobile{width:100%;text-align:center;}.form-box{padding:1.5rem;}}.cert-display-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:5rem;}.cert-item{text-align:center;}.cert-frame{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem;transition:0.3s;}.cert-frame:hover{border-color:var(--primary);box-shadow:0 10px 30px rgba(0,0,0,0.05);}.cert-badge{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:#16a34a;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;box-shadow:0 2px 10px rgba(0,0,0,0.1);z-index:2;}\.quality-block {background:#f8fafc;color:var(--text-dark);border-radius:var(--radius);padding:4rem;display:grid;grid-template-columns:1fr 300px;gap:4rem;align-items:center;position:relative;overflow:hidden;}.quality-block::before{content:'';position:absolute;top:0;right:0;width:300px;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,0.05));transform:skewX(-20deg);}.quality-title{color:var(--gold);margin-bottom:1.5rem;}.quality-desc{font-size:1.2rem;line-height:1.6;font-weight:300;font-style:italic;margin-bottom:2rem;opacity:0.9;}.quality-features{list-style:none;padding:0;display:flex;gap:2rem;flex-wrap:wrap;}.quality-feature-item{display:flex;align-items:center;gap:0.8rem;font-size:0.95rem;font-weight:500;}.quality-feature-icon{color:var(--gold);}.btn-quality{background:white;color:var(--dark);border:none;font-weight:700;}.btn-quality:hover{background:var(--gold);color:white;}@media(max-width:992px){\.quality-block {grid-template-columns:1fr;padding:2rem;gap:2rem;text-align:center;}.quality-features{justify-content:center;}.quality-action{margin-top:1rem;}}.products-layout{display:grid;grid-template-columns:250px 1fr;gap:3rem;align-items:flex-start;}.sidebar{background:white;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);position:sticky;top:100px;}.filter-group{margin-bottom:2rem;}.filter-title{font-size:1rem;font-weight:700;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);color:var(--primary);}.filter-list{list-style:none;}.filter-item a{display:flex;justify-content:space-between;padding:0.5rem 0;color:var(--text-gray);font-size:0.95rem;transition:0.2s;}.filter-item a:hover,.filter-item a.active{color:var(--primary);font-weight:600;}.count{background:#f1f5f9;padding:0.1rem 0.5rem;border-radius:10px;font-size:0.75rem;color:var(--text-dark);}.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;}.prod-card{background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:0.3s;display:flex;flex-direction:column;}.prod-card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.05);border-color:var(--primary);transform:translateY(-5px);}.prod-img-box{height:250px;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1rem;}.prod-img{max-width:100%;max-height:100%;object-fit:contain;transition:0.5s;}.prod-card:hover .prod-img{transform:scale(1.05);}.prod-content{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column;}.prod-cat-label{font-size:0.8rem;text-transform:uppercase;color:var(--gold);font-weight:600;display:block;margin-bottom:0.5rem;}.prod-title{font-size:1.1rem;margin-bottom:1.5rem;color:var(--text-dark);font-weight:600;flex-grow:1;}.btn-full{display:block;width:100%;text-align:center;margin-top:auto;}@media(max-width:992px){.products-layout{grid-template-columns:1fr;}.sidebar{position:static;margin-bottom:2rem;}}.filter-tabs{display:flex;gap:1rem;margin-bottom:3rem;flex-wrap:wrap;}.filter-tab{background:white;border:1px solid var(--border);padding:0.6rem 1.5rem;border-radius:50px;font-size:0.9rem;font-weight:500;color:var(--text-gray);cursor:pointer;transition:0.3s;}.filter-tab:hover,.filter-tab.active{background:#f8fafc;color:var(--text-dark);border-color:var(--primary);}.news-grid{display:flex;flex-direction:column;gap:2rem;}.news-card{display:flex;gap:0;background:white;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:0.3s;align-items:stretch;}.news-card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.05);border-color:var(--primary);}.news-card-img{width:260px;height:210px;object-fit:cover;object-position:center;flex-shrink:0;display:block;}.news-card-body{padding:2rem;display:flex;flex-direction:column;justify-content:center;flex-grow:1;}.news-card-meta{display:flex;gap:1rem;font-size:0.85rem;margin-bottom:0.5rem;color:var(--text-gray);}.news-card h3{font-size:1.25rem;margin-bottom:1rem;color:var(--text-dark);}.news-card p{color:var(--text-gray);font-size:0.95rem;line-height:1.6;margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}@media(max-width:768px){.news-card{flex-direction:column;}.news-card-img{width:100%;height:220px;min-height:unset;}.news-card-body{padding:1.5rem;}}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;}.contact-card{background:white;padding:3rem;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,0.05);}.info-row{display:flex;gap:1.5rem;margin-bottom:2rem;align-items:flex-start;}.info-icon{width:50px;height:50px;background:#f1f5f9;color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.map-section{height:500px;background:#e2e8f0;margin-top:5rem;}.form-input{width:100%;padding:0.8rem;border:1px solid var(--border);border-radius:6px;font-size:1rem;background:#f8fafc;transition:0.3s;}.form-input:focus{outline:none;border-color:var(--primary);background:white;}@media(max-width:992px){.contact-grid{grid-template-columns:1fr;gap:2rem;}.contact-card{padding:2rem;}.map-section{height:350px;}}.mobile-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--primary);padding:0.5rem;}@media (max-width:1024px){.container{padding:0 1.5rem;width:100%;max-width:100%;}.trust-grid{flex-direction:column;gap:1rem;text-align:center;align-items:center;justify-content:center;}.hero-slider-container{height:60vh;min-height:500px;}.hero-number{font-size:4rem;top:15%;color:rgba(255,255,255,0.1);}.text-xl{font-size:2.5rem;}.nav-menu{display:none;position:fixed;top:90px;left:0;width:100%;background:white;flex-direction:column;padding:2rem;border-bottom:1px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,0.1);z-index:999;gap:1.5rem;align-items:flex-start;}.nav-menu.active{display:flex;animation:fadeIn 0.3s ease;}.mobile-toggle{display:block;}.header-actions{gap:1rem;}}@media (max-width:768px){.product-showcase-grid{grid-template-columns:1fr !important;grid-template-rows:auto !important;}.prod-card{height:300px;}.prod-card.featured{grid-column:auto !important;grid-row:auto !important;}\.top-nav {display:none;}.header-inner{height:70px;}.nav-menu{top:70px;}.btn-primary{padding:0.75rem 1.2rem;}.text-xl{font-size:2rem;}.hero-overline{font-size:0.75rem;}.footer-grid{grid-template-columns:1fr !important;gap:2rem;text-align:left;}.footer-btm{flex-direction:column;text-align:center;gap:1.5rem;word-break:break-word;}.footer-legal{justify-content:center;flex-wrap:wrap;gap:1rem;}.footer-legal a{margin-right:0 !important;}.trust-item{width:100%;justify-content:center;}.slider-nav{right:1rem;}.slider-controls{justify-content:center;}.arrival-slide{min-width:100%;width:100%;}}@media (max-width:480px){.header-actions .btn{display:none;}.logo{font-size:1.4rem;}}#preloader{position:fixed;inset:0;background-color:#f8fafc;z-index:9999;display:flex;justify-content:center;align-items:center;transition:transform 0.8s cubic-bezier(0.77,0,0.175,1);}#preloader.loaded{transform:translateY(-100%);}.preloader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}.preloader-row{display:flex;align-items:center;gap:1.5rem;margin-bottom:1rem;}.industrial-gears{position:relative;width:60px;height:60px;display:flex;justify-content:center;align-items:center;}.gear-svg{position:absolute;width:40px;height:40px;}.gear-larg{width:50px;height:50px;top:-10px;left:-10px;animation:spinGear 4s linear infinite;opacity:0.8;}.gear-small{width:30px;height:30px;bottom:-5px;right:-5px;animation:spinGearReverse 3s linear infinite;opacity:0.6;}@keyframes spinGear{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes spinGearReverse{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}.split-logo-container{position:relative;display:flex;align-items:center;justify-content:center;height:80px;}.logo-img-ref{height:60px;width:auto;max-width:none;}.logo-part-icon{width:50px;overflow:hidden;position:relative;z-index:2;opacity:0;transform:scale(3);animation:slamIcon 0.6s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}.logo-part-text{width:0px;overflow:hidden;position:relative;opacity:0;animation:revealText 1.0s cubic-bezier(0.23,1,0.32,1) forwards;animation-delay:0.6s;border-right:2px solid #e63946;}.logo-part-text .logo-img-ref{position:relative;left:-50px;margin-left:0;}@keyframes slamIcon{0%{opacity:0;transform:scale(3);}70%{opacity:1;transform:scale(0.9);}100%{opacity:1;transform:scale(1);}}@keyframes revealText{from{width:0px;opacity:1;border-right-width:2px;}to{width:200px;opacity:1;border-right-width:0px;}}.anim-tagline{font-family:'Courier New',monospace;font-size:0.8rem;font-weight:700;color:#334155;letter-spacing:1px;text-transform:uppercase;margin-top:1rem;margin-bottom:2rem;opacity:0;transition:opacity 0.5s;background:#e2e8f0;padding:2px 8px;border-radius:2px;}@keyframes popP{to{opacity:1;transform:scale(1);}}@keyframes slideArko{to{opacity:1;transform:translateX(0);}}@keyframes fadeTagline{to{opacity:1;transform:translateY(0);}}@keyframes fadeInTrack{to{opacity:1;}}@keyframes loadProgressFill{0%{width:0%;}100%{width:100%;}}.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}.split-layout.reverse .split-content{order:2;}.split-image img{width:100%;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,0.1);}@media (max-width:900px){.split-layout,.split-layout.reverse{display:flex !important;flex-direction:column !important;gap:2rem;}.split-content{order:1 !important;}.split-image{order:2 !important;margin-top:1rem;margin-bottom:3rem;}}.cert-strip{background:var(--bg-section);padding:1rem 0;border-bottom:1px solid var(--border);}.cert-flex{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;font-size:0.9rem;font-weight:500;color:var(--text-gray);}.cert-flex span{display:flex;align-items:center;gap:0.5rem;}.leader-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}.leader-card{background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:0.3s;}.leader-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.05);}.leader-img{height:350px;background:var(--bg-section);overflow:hidden;}.leader-img img{width:100%;height:100%;object-fit:cover;transition:0.3s;}.leader-card:hover .leader-img img{transform:scale(1.05);}.leader-info{padding:1.5rem;}.leader-info h3{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:0.25rem;}.leader-role{color:var(--primary);font-size:0.85rem;font-weight:600;text-transform:uppercase;display:block;margin-bottom:1rem;}.philosophy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}.ph-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);padding:2rem;border-radius:var(--radius);}.ph-icon{color:var(--highlight);margin-bottom:1rem;}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center;}.stat-num{font-size:3rem;font-weight:800;color:var(--primary);line-height:1;margin-bottom:0.5rem;}.reading-progress-container{position:fixed;top:0;left:0;width:100%;height:4px;background:transparent;z-index:1000;}.reading-progress-bar{height:100%;background:var(--primary);width:0%;transition:width 0.1s;}.blog-layout-grid{display:grid;grid-template-columns:1fr;gap:3rem;position:relative;}@media (min-width:992px){.blog-layout-grid{grid-template-columns:1fr 300px;}}.drop-cap-wrapper::first-letter{float:left;font-size:3.5rem;line-height:0.8;padding:0.1em 0.1em 0 0;color:var(--primary);font-family:var(--font-heading);font-weight:700;}.blog-main-content .content-body h2{font-family:var(--font-heading);font-size:1.8rem;margin-top:2.5rem;margin-bottom:1rem;color:var(--primary);font-weight:700;}.blog-main-content .content-body h3{font-family:var(--font-heading);font-size:1.4rem;margin-top:2rem;margin-bottom:0.8rem;color:var(--secondary);font-weight:600;}.blog-main-content .content-body blockquote{border-left:4px solid var(--highlight);background:var(--bg-section);padding:1.5rem;margin:2rem 0;font-style:italic;font-size:1.25rem;color:var(--text-dark);border-radius:0 var(--radius) var(--radius) 0;}.author-bio{display:flex;align-items:center;gap:1.5rem;padding:2rem;background:white;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);}.author-avatar{width:80px;height:80px;border-radius:50%;background:var(--bg-section);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.blog-sidebar{margin-top:0;}.sticky-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:2rem;}.sidebar-widget{background:white;padding:1.5rem;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);}.widget-title{font-size:1rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--primary);border-bottom:2px solid var(--border);padding-bottom:0.5rem;}.share-links-vertical{display:flex;flex-direction:row;gap:1rem;justify-content:center;}@media (min-width:992px){.share-links-vertical{flex-direction:column;}}.share-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:white;color:var(--text-gray);transition:all 0.2s;cursor:pointer;}.share-btn:hover{transform:translateY(-2px);border-color:var(--highlight);color:var(--highlight);box-shadow:0 4px 12px rgba(14,165,233,0.2);}.share-btn.whatsapp:hover{color:#25D366;border-color:#25D366;}.share-btn.email:hover{color:#EA4335;border-color:#EA4335;}\.newsletter-widget {background:#f8fafc;color:var(--text-dark);border:none;}.newsletter-widget .widget-title{color:var(--text-dark);border-color:var(--border);}.newsletter-widget .text-sm{color:var(--text-gray);}.toc-list{list-style:none;padding:0;margin:0;}.toc-list li{margin-bottom:0.5rem;}.toc-list a{font-size:0.9rem;color:var(--text-gray);text-decoration:none;transition:color 0.2s;display:block;padding-left:10px;border-left:2px solid transparent;}.toc-list a:hover{color:var(--primary);border-left-color:var(--primary);}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:4rem;}.feature-card{background:white;padding:2rem;border-radius:2px;border:1px solid #e2e8f0;transition:0.3s;text-align:center;}.feature-card:hover{border-color:#0F2C59;box-shadow:0 10px 30px rgba(0,0,0,0.05);transform:translateY(-5px);}#preloader{position:fixed;inset:0;z-index:9999;background:white;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease,visibility 0.5s ease;}#preloader.loaded{opacity:0;visibility:hidden;pointer-events:none;}.product-showcase-grid,.cert-grid,.news-section-grid,.footer-grid,.container{min-width:0;max-width:100%;}.product-showcase-grid>*,.cert-grid>*,.news-section-grid>*{min-width:0;}
/* Product Page Specific Styles */
/* Hero Section */
.page-hero {
position: relative;
height: 350px;
display: flex;
align-items: center;
color: white;
overflow: hidden;
}
.page-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.page-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.7);
/* Dark overlay */
}
.page-hero-content {
position: relative;
z-index: 10;
}
.breadcrumb {
font-size: 0.85rem;
opacity: 0.8;
margin-bottom: 0.5rem;
color: white;
}
.breadcrumb a:hover {
text-decoration: underline;
opacity: 1;
}
.breadcrumb span {
margin: 0 0.5rem;
opacity: 0.5;
}
/* Product Detail Layout */
.product-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
@media (max-width: 900px) {
.product-detail-grid {
grid-template-columns: 1fr;
/* Stack on smaller screens */
gap: 2rem;
}
}
.product-main-image {
width: 100%;
border-radius: var(--radius);
margin-bottom: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.prod-thumbs {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.prod-thumb {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: var(--radius);
cursor: pointer;
border: 1px solid var(--border);
transition: 0.3s;
}
.prod-thumb:hover,
.prod-thumb.active {
border-color: var(--primary);
transform: translateY(-2px);
}
/* Technical Specs Table */
.spec-caption {
margin-bottom: 1.5rem;
}
.spec-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
border: 1px solid var(--border);
}
.spec-table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.spec-table tr:last-child td {
border-bottom: none;
}
.spec-table td:first-child {
font-weight: 600;
color: var(--primary);
width: 40%;
background-color: var(--bg-section);
}
/* Call to Action Buttons */
.product-actions {
margin-top: 3rem;
display: flex;
gap: 1rem;
}
/* Category Grid (for index pages) */
.product-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
/* Technical Overview Grid (for index pages) */
.tech-overview-wrapper {
margin-top: 4rem;
}
.tech-overview-container {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.tech-table-header {
background: var(--bg-section);
}
.tech-table-header th {
padding: 1rem;
text-align: left;
border-bottom: 2px solid var(--border);
font-weight: 700;
color: var(--primary);
}
.tech-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
@media (max-width: 768px) {
.tech-grid-2col {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.tech-list-group h4 {
font-size: 1rem;
margin-bottom: 1rem;
color: var(--primary);
}
.tech-list-group ul {
list-style: disc;
padding-left: 1.5rem;
line-height: 1.8;
color: var(--text-dark);
}
.tech-list-group ul li {
margin-bottom: 0.5rem;
}
/* Badges */
.badge-upcoming {
background: #e63946;
color: white;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 700;
border-radius: 4px;
text-transform: uppercase;
}
.badge-new {
background: #2a9d8f;
color: white;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 700;
border-radius: 4px;
text-transform: uppercase;
}
/* Utility Classes for Hero & Buttons */
.hero-desc {
opacity: 0.9;
max-width: 600px;
margin: 1rem auto 0;
font-size: 1.1rem;
}
.btn-white-outline {
border-color: white !important;
color: white !important;
}
.btn-white-outline:hover {
background: white !important;
color: #333 !important;
}
/* Generic Technical Specs Table (Index Pages) */
.tech-specs-table {
width: 100%;
border-collapse: collapse;
}
.tech-specs-table th {
padding: 1rem;
text-align: left;
border-bottom: 2px solid var(--border);
font-weight: 700;
color: var(--primary);
background: var(--bg-section);
}
.tech-specs-table td {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.tech-specs-wrapper {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.mobile-toggle{display:none !important;}.mobile-menu-overlay{visibility:hidden !important;}@media screen and (max-width:1024px){.nav-menu{display:none !important;}.header-actions .btn{display:none !important;}.mobile-toggle{display:flex !important;align-items:center;justify-content:center;background:transparent;border:none;color:#d32f2f;cursor:pointer;padding:0.5rem;z-index:100;}.mobile-menu-overlay{visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100vh;background:white;z-index:2000;flex-direction:column;padding:1.5rem;transform:translateX(-100%);transition:transform 0.3s ease-in-out,visibility 0s linear 0.3s;display:flex;}.mobile-menu-overlay.active{visibility:visible;transform:translateX(0);transition:transform 0.3s ease-in-out,visibility 0s linear 0s;}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:1rem;}.close-menu{background:none;border:none;cursor:pointer;color:var(--text-dark);}.mobile-links{display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto;}.mobile-links a{font-size:1.1rem;font-weight:500;color:var(--text-dark);}.mobile-dropdown-content{display:none;flex-direction:column;gap:0.8rem;padding-left:1.5rem;margin-top:0.8rem;border-left:2px solid var(--border);}.mobile-dropdown-content.active{display:flex;}.mobile-dropdown-content a{font-size:1rem;color:var(--text-gray);}.js-dropdown-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;font-size:1.1rem;font-weight:500;}.container{padding:0 1.5rem;max-width:100%;}.trust-grid{flex-direction:column !important;gap:1.5rem !important;align-items:flex-start !important;padding-left:2rem !important;}.hero-slider-container{width:100% !important;height:70vh !important;min-height:500px !important;}.hero-number{display:none !important;}.text-xl{font-size:2rem !important;}}@media screen and (max-width:768px){.product-showcase-grid{grid-template-columns:1fr !important;display:grid !important;}.prod-card{min-height:auto;}.cert-grid,.news-section-grid,.footer-grid{grid-template-columns:1fr !important;}.footer-btm{flex-direction:column;}\.top-nav {display:none !important;}.slider-nav{display:none !important;}.container{padding:0 1rem !important;}.prod-card.featured{grid-column:span 1;grid-row:span 1;}}
:root {

    --primary: #0F2C59;

    --primary-light: #1e4b8a;

    --accent: #334155;

    --highlight: #0ea5e9;

    --gold: #c56565;

    --text-dark: #1e293b;

    --text-gray: #64748b;

    --bg-body: #ffffff;

    --bg-section: #f8fafc;

    --border: #e2e8f0;

    --font-heading: 'Montserrat', sans-serif;

    --font-body: 'Inter', sans-serif;

    --container: 1200px;

    --radius: 2px;

    --dark: #0B1120;

}



html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}



img,

video {

    max-width: 100%;

    height: auto;

}



html,
body {
    font-size: 16px;
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--bg-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    /* Hide scrollbar across all browsers — kills the flash-on-load effect */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE / Edge */
}

/* Global Overflow Fixes */
* {
    max-width: 100%;
}

img {
    height: auto;
    object-fit: cover;
}


/* Hide scrollbar for Chrome, Safari, Opera, Firefox & IE */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

a {

    text-decoration: none;

    color: inherit;

    transition: 0.3s;

}



/* Animations */

.text-reveal-wrapper {

    overflow: hidden;

    display: inline-block;

    vertical-align: top;

}



.text-reveal {

    display: inline-block;

    transform: translateY(100%);

    opacity: 1;

    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;

}



.text-reveal.visible {

    transform: translateY(0);

    opacity: 1;

}



.fade-up {

    opacity: 0;

    transform: translateY(30px);

    transition: 0.8s ease;

}



.fade-up.visible {

    opacity: 1;

    transform: translateY(0);

}



/* Typography - Fluid */

.text-xl,
h1,
.h1 {

    font-size: 36px;

    letter-spacing: -1px;

    line-height: 1.2;

    font-weight: 700;

    font-family: var(--font-heading);

}



.text-lg,
h2,
.h2 {

    font-size: 28px;

    letter-spacing: -0.5px;

    line-height: 1.3;

    font-weight: 700;

    font-family: var(--font-heading);

}



.text-md,
h3,
.h3 {

    font-size: 22px;

    font-weight: 600;

    line-height: 1.4;

    font-family: var(--font-heading);

}



.text-sm {

    font-size: 0.875rem;

    color: var(--text-gray);

}



/* Utility: Text Colors */

.text-gray {

    color: var(--text-gray);

}



/* Product Display Classes (Homepage variants) */

.prod-name {

    font-size: 1.1rem;

    font-weight: 700;

    color: white;

    font-family: var(--font-heading);

    margin-bottom: 0.5rem;

    display: block;

}



.prod-cat {

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.9);

    text-transform: uppercase;

    font-weight: 600;

    display: block;

    margin-bottom: 0.5rem;

}





/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 12px 24px;

    /* Standard padding */

    font-family: var(--font-heading);

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    /* Standard letter spacing */

    border-radius: 8px;

    /* Standard rounded corners */

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}



.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

}



.btn-primary {

    background: var(--primary);

    color: white;

    border: 1px solid var(--primary);

}



.btn-primary:hover {

    background: var(--primary-light);

    border-color: var(--primary-light);

}



.btn-outline {

    background: transparent;

    color: var(--primary);

    border: 1px solid var(--primary);

}



.btn-outline:hover {

    background: var(--primary);

    color: white;

}



.btn-link {

    padding: 0;

    color: var(--primary);

    border-bottom: 1px solid transparent;

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    font-weight: 600;

    font-size: 0.9rem;

}



.btn-link:hover {

    border-bottom-color: var(--primary);

}



.btn-sm {

    padding: .5rem 1rem;

    font-size: .75rem;

    text-transform: uppercase;

    font-weight: 700;

    border-radius: 2px;

    letter-spacing: .5px;

}



/* Layout */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.section {

    padding: 60px 0;

}



.bg-light {

    background-color: var(--bg-section);

}



\.bg-dark {

    background: #f8fafc;

    color: var(--text-dark);

}



/* Header */

\.top-nav {

    background: #f8fafc;

    color: var(--text-dark);

    padding: .4rem 0;

    font-size: .9rem;

    overflow: hidden;

}



.top-nav .marquee-container {

    width: 100%;

    margin: 0;

    padding: 0 20px;

    display: flex;

    overflow: hidden;

}



@keyframes marquee {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.mini-marquee-wrapper {

    width: 100%;

    flex: 1;

    overflow: hidden;

    position: relative;

    height: 30px;

    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);

    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);

    display: flex;

    align-items: center;

}



.marquee-track {
    display: flex !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    width: max-content !important;
    flex: 0 0 auto !important;
    animation: marquee var(--marquee-speed, 30s) linear infinite;
    will-change: transform;
}

.marquee-set {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10rem;
    padding-right: 10rem;
    flex: 0 0 auto !important;
    width: max-content !important;
}

.marquee-set span {
    display: inline-block !important;
    position: relative;
    padding: 0;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    width: max-content !important;
}



.marquee-set span::after {

    content: "";

    position: absolute;

    right: -4.5rem;

    color: var(--highlight);

    opacity: .5;

}



.site-header {

    border-bottom: 1px solid var(--border);

    background: white;

    position: sticky;

    top: 0;

    z-index: 1000;

}



.header-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 70px;

    flex-wrap: wrap;

    gap: 1rem;

}



.logo {

    font-family: var(--font-heading);

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--primary);

    letter-spacing: -.5px;

    cursor: pointer;

}



.logo-img {

    height: 45px;

    width: auto;

}



.nav-menu {

    display: flex;

    gap: clamp(1rem, 2vw, 3rem);

    align-items: center;

    flex-wrap: wrap;

}



.nav-link {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: .9rem;

    font-weight: 500;

    color: var(--text-dark);

    position: relative;

}



.nav-link.active,

.nav-link:hover {

    color: var(--primary);

    font-weight: 700;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 1px;

    background: var(--primary);

    transition: 0.3s;

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #fff;

    min-width: 200px;

    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);

    z-index: 1001;

    border-radius: var(--radius);

    padding: .5rem 0;

    top: 100%;

    left: 0;

    border: 1px solid var(--border);

}



.dropdown:hover .dropdown-content {

    display: block;

    animation: fadeIn 0.2s ease;

}



.dropdown-content a {

    color: var(--text-dark);

    padding: 12px 20px;

    text-decoration: none;

    display: block;

    font-size: 0.9rem;

    font-weight: 500;

    border-bottom: 1px solid rgba(0, 0, 0, 0.03);

}



.dropdown-content a:hover {

    background-color: var(--bg-section);

    color: var(--primary);

    padding-left: 25px;

}



.header-actions {

    display: flex;

    gap: 1.5rem;

    align-items: center;

}



.mobile-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

}



/* Hero */

.hero-slider-container {

    position: relative;

    height: 90vh;

    min-height: 600px;

    background: #0f172a;

    overflow: hidden;

}



.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 1s ease;

    z-index: 1;

}



.hero-slide.active {

    opacity: 1;

    z-index: 2;

}



.hero-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    z-index: 0;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 44, 89, 0.95));

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 10;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: white;

    padding-left: 5%;

}



.hero-number {

    font-size: clamp(3rem, 10vw, 8rem);

    font-family: var(--font-heading);

    font-weight: 800;

    opacity: 0.1;

    line-height: 0.8;

    position: absolute;

    top: 20%;

    left: 4%;

}



.hero-overline {

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    gap: 1rem;

}



.slider-nav {

    position: absolute;

    right: 3rem;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.nav-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.3);

    background: transparent;

    cursor: pointer;

    transition: 0.3s;

}



.nav-dot.active {

    background: white;

    border-color: white;

    transform: scale(1.2);

}



.slider-progress-bar {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: rgba(255, 255, 255, 0.1);

    z-index: 20;

}



.progress-fill {

    height: 100%;

    background: var(--highlight);

    width: 0%;

}



/* Trust Strip */

\.trust-strip {

    background: #f8fafc;

    color: var(--text-dark);

    padding: 2rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    position: relative;

    z-index: 10;

    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);

}



.trust-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-evenly;

    gap: 1rem;

    color: white;

}



.trust-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-family: var(--font-heading);

    font-size: 0.95rem;

    letter-spacing: 0.5px;

    font-weight: 600;

}



/* Products Grid - Responsive without Media Queries */

.product-showcase-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.5rem;

}



.prod-card {

    position: relative;

    height: 400px;

    /* Increased height */

    overflow: hidden;

    border-radius: 8px;

    /* Softer radius */

    isolation: isolate;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    transition: 0.3s ease;

}



.prod-card:hover {

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    transform: translateY(-4px);

}



.prod-card.featured {

    grid-column: span 2;

    grid-row: span 2;

}



.prod-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}



.prod-card:hover .prod-img {

    transform: scale(1.05);

    /* Subtler zoom */

}



.prod-overlay {

    position: absolute;

    inset: 0;

    background: rgba(255,255,255,0.9) 0%, rgba(15, 23, 42, 0.6) 40%, transparent 100%);

    display: flex;

    align-items: flex-end;

    padding: 20px;

}



.prod-details {

    color: white;

    width: 100%;

    transform: translateY(0);

    /* Always visible */

    transition: 0.4s ease;

}



/* Remove hover transform for details to keep it cleaner */

.prod-card:hover .prod-details {

    transform: translateY(0);

}



.prod-badge {

    position: absolute;

    top: 1.5rem;

    left: 1.5rem;

    background: var(--gold);

    color: white;

    font-weight: 700;

    font-size: 0.7rem;

    padding: 0.25rem 0.75rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    z-index: 10;

    font-family: var(--font-heading);

}



/* Certifications */

.cert-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 3rem;

    margin-top: 4rem;

    text-align: center;

}



.cert-card {

    padding: 20px;

    border: 1px solid var(--border);

    transition: 0.3s;

}



.cert-card:hover {

    border-color: var(--gold);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.cert-icon {

    width: 64px;

    height: 64px;

    margin: 0 auto 1.5rem;

    color: var(--primary);

}



/* Slider Arrivals */

.arrivals-track-container {

    position: relative;

    overflow: hidden;

    padding: 1rem 0;

}



.arrivals-track {

    display: flex;

    gap: 2rem;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;

    scroll-snap-type: x mandatory;

}



.arrivals-track::-webkit-scrollbar {

    display: none;

}



.arrival-slide {

    background: white;

    border-radius: var(--radius);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    transition: 0.3s;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    min-width: 280px;

    max-width: 320px;

    /* Match product card height */

    height: 400px;

}



.arrival-slide:hover {

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    transform: translateY(-2px);

}



.arrival-img-box {

    height: 220px;

    /* Increased to match proportions */

    overflow: hidden;

    position: relative;

}



.arrival-img-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;

}



.arrival-slide:hover .arrival-img-box img {

    transform: scale(1.1);

}



.arrival-content-box {

    padding: 1.25rem;

    /* Balanced padding */

    flex: 1;

    display: flex;

    flex-direction: column;

}



.slider-controls {

    display: flex;

    justify-content: flex-end;

    gap: 1rem;

    margin-top: 2rem;

}



.slider-arrow {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid var(--border);

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: 0.3s;

    color: var(--text-dark);

}



.slider-arrow:hover {

    background: var(--primary);

    color: white;

    border-color: var(--primary);

}



/* Infrastructure */

.infra-section {

    background: url('https://images.unsplash.com/photo-1565515263728-90eec1163159?q=80&w=2070') center/cover fixed;

    height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

}



.infra-overlay {

    position: absolute;

    inset: 0;

    background: rgba(255,255,255,0.85);

}



/* News */

.news-section-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 3rem;

}



.news-item {

    margin-bottom: 2rem;

    border-bottom: 1px solid var(--border);

    padding-bottom: 2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

}



html {

    scroll-behavior: smooth;

}



/* Floating Icons (Fixed) */

.floating-actions {

    position: fixed;

    bottom: 90px;

    right: 24px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 1000;

    /* Proper Z-Index below popup modal */

}



.fab-btn {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;

}



.fab-btn:hover {

    transform: scale(1.1);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

}



.fab-btn.whatsapp {

    background-color: #25D366;

}



.fab-btn.call {

    background-color: #3b82f6;

}



/* Footer */

footer {

    background: white;

    padding-top: 4rem;

    border-top: 1px solid var(--border);

}



.footer-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 3rem;

    margin-bottom: 3rem;

}



.footer-heading {

    font-family: var(--font-heading);

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: var(--primary);

}



/* Product Page Details */

.product-detail-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 3rem;

}



@media (min-width: 768px) {

    .product-detail-grid {

        grid-template-columns: 1fr 1fr;

        gap: 4rem;

    }

}



.product-category-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 2rem;

}





.prod-thumbs {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

    overflow-x: auto;

}



.prod-thumb {

    width: 80px;

    height: 80px;

    object-fit: cover;

    border: 2px solid transparent;

    cursor: pointer;

    border-radius: var(--radius);

    transition: 0.3s;

}



.prod-thumb.active,

.prod-thumb:hover {

    border-color: var(--primary);

}



.spec-table {

    width: 100%;

    border-collapse: collapse;

}



.spec-table td {

    padding: 1rem;

    border-bottom: 1px solid var(--border);

}



.spec-table td:first-child {

    font-weight: 600;

    width: 40%;

}





.footer-links {

    list-style: none;

}



.footer-links li {

    margin-bottom: 0.75rem;

}



.footer-links a {

    color: var(--text-gray);

    font-size: 0.95rem;

}



.footer-links a:hover {

    color: var(--primary);

    padding-left: 5px;

}



.footer-btm {

    border-top: 1px solid var(--border);

    padding: 2rem 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 1rem;

    font-size: 0.9rem;

    color: var(--text-gray);

}



.footer-legal {

    display: flex;

    gap: 1.5rem;

}



/* Popup */

.popup-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    z-index: 10000;

    display: none;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s;

}



.popup-overlay.active {

    display: flex;

    opacity: 1;

}



.popup-modal {

    background: white;

    width: 90%;

    max-width: 450px;

    border-radius: var(--radius);

    overflow: hidden;

    position: relative;

    animation: popupUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.popup-close {

    position: absolute;

    top: 10px;

    right: 10px;

    background: white;

    border-radius: 50%;

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

}

.popup-close i,
.popup-close svg {
    color: var(--text-dark) !important;
}



.popup-img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.popup-body {

    padding: 2rem;

    text-align: center;

}



@keyframes popupUp {

    from {

        transform: scale(0.8) translateY(20px);

        opacity: 0;

    }



    to {

        transform: scale(1) translateY(0);

        opacity: 1;

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Mobile - Minimal overrides purely for layout shifts */

@media (max-width: 992px) {



    .nav-menu,

    .header-actions {

        display: none;

    }



    .mobile-toggle {

        display: block;

    }

}



/* Mobile Menu */

.mobile-menu-overlay {

    position: fixed;

    inset: 0;

    background: white;

    z-index: 10001;

    transform: translateX(-100%);

    visibility: hidden;

    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;

    display: flex;

    flex-direction: column;

}



.mobile-menu-overlay.active {

    transform: translateX(0);

    visibility: visible;

    transition: transform 0.3s ease-in-out, visibility 0s linear 0s;

}



.mobile-menu-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 2rem;

    border-bottom: 1px solid var(--border);

}



.mobile-links {

    padding: 2rem;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    overflow-y: auto;

}



.mobile-links a {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--text-dark);

}



.mobile-dropdown-content {

    display: none;

    padding-left: 1.5rem;

    flex-direction: column;

    gap: 1rem;

    margin-top: 1rem;

}



.mobile-dropdown-content.active {

    display: flex;

}



/* Testimonials - RESTORED */

.testimonial-carousel {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    padding: 1rem 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}



.testimonial-carousel::-webkit-scrollbar {

    display: none;

}



.testimonial-slide {

    min-width: clamp(280px, 80%, 400px);

    background: white;

    padding: 2rem;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    scroll-snap-align: start;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



@media (min-width: 1024px) {

    .testimonial-slide {

        min-width: calc((100% - 4rem) / 3);

        flex: 0 0 calc((100% - 4rem) / 3);

    }

}



.t-header {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.t-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    object-fit: cover;

}



.t-info h4 {

    font-size: 1rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 0.2rem;

}



.t-info p {

    font-size: 0.85rem;

    color: var(--text-gray);

}



.t-quote {

    font-style: italic;

    color: var(--text-dark);

    line-height: 1.6;

    font-size: 0.95rem;

}



/* Events (in footer/sidebar) - RESTORED */

\.events-list {

    background: #f8fafc;

    color: var(--text-dark);

    padding: 2rem;

    border-radius: var(--radius);

}



.event-row {

    display: flex;

    gap: 1rem;

    margin-bottom: 1.5rem;

    align-items: flex-start;

}



.event-date-box {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    padding: 0.5rem;

    text-align: center;

    border-radius: 4px;

    min-width: 60px;

}



.event-date-num {

    font-size: 1.5rem;

    font-weight: 700;

    display: block;

    line-height: 1;

}



.event-title {

    font-weight: 700;

    margin-bottom: 0.2rem;

    line-height: 1.2;

}



/* News Details - RESTORED */

.news-meta {

    font-size: 0.8rem;

    color: var(--text-gray);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 600;

}



.news-link {

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 1.1rem;

    color: var(--primary);

    transition: 0.3s;

}



.news-link:hover {

    color: var(--highlight);

}



/* ---------------- News Page Styles ---------------- */

.news-layout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 4rem;

    padding-top: 4rem;

}



.news-card {

    display: flex;

    gap: 2rem;

    margin-bottom: 3rem;

    align-items: flex-start;

}



.news-thumb {

    width: 300px;

    height: 200px;

    object-fit: cover;

    border-radius: var(--radius);

    background: #eee;

    flex-shrink: 0;

}



@media(max-width: 768px) {

    .news-card {

        flex-direction: column;

    }



    .news-thumb {

        width: 100%;

        height: 250px;

    }

}



.news-main-title {

    font-size: 1.5rem;

    line-height: 1.3;

    margin-bottom: 1rem;

    color: var(--primary);

    font-family: var(--font-heading);

    font-weight: 700;

}



.news-excerpt {

    color: var(--text-gray);

    margin-bottom: 1rem;

}



.sidebar-title {

    font-family: var(--font-heading);

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    border-bottom: 2px solid var(--primary);

    padding-bottom: 0.5rem;

    display: inline-block;

}



.event-widget {

    background: var(--bg-section);

    padding: 2rem;

    border-radius: var(--radius);

}



.event-item {

    display: flex;

    gap: 1rem;

    margin-bottom: 1.5rem;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--border);

}



.event-item:last-child {

    border: none;

    margin: 0;

    padding: 0;

}



.event-date {

    text-align: center;

    background: white;

    padding: 0.5rem;

    border-radius: 4px;

    min-width: 60px;

    height: fit-content;

    border: 1px solid var(--border);

}



.date-day {

    display: block;

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1;

    color: var(--primary);

}



.date-month {

    font-size: 0.7rem;

    text-transform: uppercase;

    font-weight: 600;

    color: var(--text-gray);

}



@media(max-width: 1024px) {

    .news-layout {

        grid-template-columns: 1fr;

    }



    .news-card {

        flex-direction: column;

    }



    .news-thumb {

        width: 100%;

        height: 250px;

    }

}



/* ---------------- Sustainability Page Styles ---------------- */

.sus-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    margin-bottom: 6rem;

}



.sus-img {

    width: 100%;

    border-radius: var(--radius);

}



.sus-stat-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

    text-align: center;

    margin-top: 3rem;

    background: #f0fdf4;

    padding: 4rem;

    border-radius: var(--radius);

}



.sus-stat-num {

    font-size: 3rem;

    font-weight: 700;

    color: #16a34a;

    /* Green */

    font-family: var(--font-heading);

    margin-bottom: 0.5rem;

}



@media(max-width: 1024px) {

    .sus-grid {

        grid-template-columns: 1fr;

    }



    .sus-stat-grid {

        grid-template-columns: 1fr;

    }

}



/* ---------------- Products Page Styles ---------------- */

.page-hero {

    position: relative;

    padding: 6rem 0;

    background: #0f172a;

    color: white;

    text-align: center;

    overflow: hidden;

}



.page-hero-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.3;

    z-index: 0;

}



.page-hero-content {

    position: relative;

    z-index: 10;

}



.breadcrumb {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    margin-bottom: 1.5rem;

    display: flex;

    justify-content: center;

    gap: 0.5rem;

}



.products-layout {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 3rem;

    padding-top: 2rem;

}



.sidebar {

    position: sticky;

    top: 100px;

    height: fit-content;

}



.filter-group {

    margin-bottom: 2rem;

}



.filter-title {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid var(--border);

}



.filter-list {

    list-style: none;

}



.filter-item {

    margin-bottom: 0.5rem;

}



.filter-item a {

    display: flex;

    justify-content: space-between;

    color: var(--text-gray);

    padding: 0.5rem;

    border-radius: var(--radius);

    transition: 0.2s;

    font-size: 0.95rem;

}



.filter-item a:hover,

.filter-item a.active {

    background: var(--bg-section);

    color: var(--primary);

    font-weight: 600;

}



.prod-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



.prod-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: 0.3s;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.prod-card:hover {

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    transform: translateY(-5px);

}



.prod-img-box {

    height: 250px;

    overflow: hidden;

    position: relative;

    background: #f8fafc;

}



.prod-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;

}



.prod-card:hover .prod-img {

    transform: scale(1.05);

}



.prod-content {

    padding: 1.5rem;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.prod-cat-label {

    font-size: 0.75rem;

    color: var(--text-gray);

    text-transform: uppercase;

    font-weight: 600;

    margin-bottom: 0.5rem;

    display: block;

}



.prod-title {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    color: var(--text-dark);

}



.btn-full {

    margin-top: auto;

    width: 100%;

}



@media(max-width: 992px) {

    .products-layout {

        grid-template-columns: 1fr;

    }



    .sidebar {

        display: none;

        /* simple mobile hide for now, or could change to top */

    }

}



/* Homepage News Redesign */

.home-news-card {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 2rem;

    align-items: flex-start;

    padding-bottom: 2rem;

    border-bottom: 1px solid var(--border);

}



.home-news-card:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}



.home-news-img {

    width: 140px;

    height: 100px;

    object-fit: cover;

    border-radius: var(--radius);

    background: #f1f5f9;

    flex-shrink: 0;

}



.home-news-content {

    flex: 1;

}



.home-news-date {

    font-size: 0.75rem;

    color: var(--gold);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 0.5rem;

    display: block;

}



.home-news-title {

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 1.1rem;

    line-height: 1.3;

    margin-bottom: 0.5rem;

    color: var(--text-dark);

    display: block;

    transition: 0.2s;

}



.home-news-title:hover {

    color: var(--primary);

}



.home-news-excerpt {

    font-size: 0.9rem;

    color: var(--text-gray);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



@media(max-width: 600px) {

    .home-news-card {

        flex-direction: column;

        gap: 1rem;

    }



    .home-news-img {

        width: 100%;

        height: 180px;

    }





}



/* --- RESTORED UTILITIES --- */



/* Header & Marquee Utilities */

\.marquee-bg {

    background: #f8fafc;

    color: var(--text-dark);

}



\.marquee-static {

    background: #f8fafc;

    color: var(--text-dark);

    text-align: center;

    padding: 0.5rem;

    font-size: 0.9rem;

    font-weight: 500;

}



/* Marquee spacer removed in favor of set gap */
.marquee-spacer {
    display: inline-block !important;
    margin: 0;
}



/* Footer Utilities */

.footer-logo-img {

    height: 60px;

    width: auto;

    margin-bottom: 1rem;

    background: white;

    padding: 5px;

    border-radius: 4px;

}



.footer-desc {

    color: #94a3b8;

    font-size: 0.9rem;

    margin-top: 0.5rem;

    line-height: 1.5;

}



.social-links {

    display: flex;

    gap: 1rem;

    margin-top: 1rem;

}



.social-icon {

    color: #94a3b8;

    transition: color 0.3s;

}



.social-icon:hover {

    color: white;

}



.footer-contact-info {

    margin-top: 1.5rem;

    color: #94a3b8;

    font-size: 0.9rem;

}



.footer-btm {

    margin-top: 3rem;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

}



.footer-legal {

    display: flex;

    gap: 1.5rem;

}



.footer-legal a {

    color: #94a3b8;

    font-size: 0.85rem;

    transition: color 0.3s;

}



.footer-legal a:hover {

    color: var(--gold);

}



.power-link {

    color: var(--text-gray);

    text-decoration: underline;

}



.power-link:hover {

    color: var(--primary);

}



/* Index Page Utilities */

.section-header-flex {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 2rem;

}



.section-header-center {

    text-align: center;

    margin-bottom: 3rem;

}



.section-subtext {

    margin-top: 1rem;

    color: var(--text-gray);

    max-width: 600px;

    margin-inline: auto;

}



.text-primary {

    color: var(--primary);

}



.mb-half {

    margin-bottom: 0.5rem;

}



.mb-3 {

    margin-bottom: 3rem;



}



/* --- RESTORED COMPANY PAGE STYLES --- */



/* Split Layout */

.split-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.split-layout.reverse {

    direction: rtl;

    /* simple way to reverse grid */

}



.split-layout.reverse>* {

    direction: ltr;

    /* reset content direction */

}



.split-image img {

    width: 100%;

    border-radius: var(--radius);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}



.sub-heading {

    display: inline-block;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    position: relative;

}



.sub-heading::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 2px;

    background: var(--gold);

}



.text-justify {

    text-align: justify;

}



/* Cert Strip */

.cert-strip {

    background: #f8fafc;

    border-bottom: 1px solid var(--border);

    padding: 1.5rem 0;

}



.cert-flex {

    display: flex;

    justify-content: space-evenly;

    flex-wrap: wrap;

    gap: 1.5rem;

}



.cert-flex span {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--primary);

}



/* Leadership Grid */

.leader-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.leader-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: 0.3s;

}



.leader-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);

}



.leader-img {

    height: 320px;

    overflow: hidden;

    background: #f1f5f9;

}



.leader-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top;

    transition: 0.5s;

}



.leader-card:hover .leader-img img {

    transform: scale(1.05);

}



.leader-info {

    padding: 2rem;

}



.leader-info h3 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 0.25rem;

}



.leader-role {

    font-size: 0.85rem;

    text-transform: uppercase;

    font-weight: 600;

    color: var(--gold);

    display: block;

    margin-bottom: 1rem;

}



.leader-bio {

    font-size: 0.9rem;

    color: var(--text-gray);

    line-height: 1.6;

}



/* Philosophy */

.philosophy-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 3rem;

}



.ph-card {

    text-align: center;

    padding: 2rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.03);

    border-radius: var(--radius);

    transition: 0.3s;

}



.ph-card:hover {

    background: rgba(255, 255, 255, 0.08);

    transform: translateY(-5px);

}



.ph-icon {

    width: 60px;

    height: 60px;

    margin: 0 auto 1.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--gold);

    color: white;

    border-radius: 50%;

}



.divider-center {

    width: 60px;

    height: 3px;

    background: var(--gold);

    margin: 1.5rem auto 0;

}



/* Stats */

.stat-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    text-align: center;

}



.stat-card {

    padding: 2rem;

    background: #f8fafc;

    border-radius: var(--radius);

}



.stat-num {

    font-size: 3.5rem;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

    margin-bottom: 0.5rem;

    font-family: var(--font-heading);

}



@media(max-width: 992px) {

    .split-layout {

        grid-template-columns: 1fr;

        gap: 3rem;

    }



    .split-layout.reverse {

        direction: ltr;

        /* reset for mobile */

    }



    .split-layout.reverse .split-image {

        order: -1;

        /* image top on mobile */

    }

}



/* --- RESTORED SUSTAINABILITY PAGE STYLES --- */



/* Pillars Grid */

.pillars-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    margin-bottom: 5rem;

}



.pillar-card {

    text-align: center;

    padding: 2.5rem 2rem;

    background: white;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

    border-radius: var(--radius);

    border-top: 4px solid var(--primary);

    transition: 0.3s;

}



.pillar-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

}



.pillar-icon {

    margin-bottom: 1.5rem;

    color: #16a34a;

    /* green */

}



/* Air Quality Section */

.air-quality-section {

    background: #f0fdf4;

    /* Light green bg */

    padding: 5rem 0;

    margin-bottom: 5rem;

}



.air-quality-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



/* Compliance Grid */

.compliance-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.5rem;

    margin-bottom: 6rem;

}



.compliance-card {

    display: flex;

    gap: 1.5rem;

    padding: 1.5rem;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    align-items: flex-start;

}



.comp-icon {

    width: 50px;

    height: 50px;

    background: var(--bg-section);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    flex-shrink: 0;

}



/* CSR Grid */

.csr-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    background: #fff7ed;

    /* Light orange/warm bg */

    border-radius: var(--radius);

    overflow: hidden;

}



.csr-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    min-height: 400px;

}



.csr-content {

    padding: 4rem;

}



@media(max-width: 992px) {



    .air-quality-grid,

    .csr-grid {

        grid-template-columns: 1fr;

    }



    .csr-img img {

        height: 250px;

    }



    .csr-content {

        padding: 2rem;

    }

}



/* --- RESTORED CAREERS PAGE STYLES --- */



/* Job List */

.job-list {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.job-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 2rem;

    transition: 0.3s;

}



.job-card:hover {

    border-color: var(--primary);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.job-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 1rem;

    flex-wrap: wrap;

    gap: 1rem;

}



.job-meta {

    display: flex;

    gap: 1rem;

    font-size: 0.9rem;

    color: var(--text-gray);

    margin-top: 0.5rem;

    flex-wrap: wrap;

}



.job-meta span {

    display: flex;

    align-items: center;

    gap: 0.4rem;

}



.job-desc {

    color: var(--text-gray);

    font-size: 0.95rem;

    line-height: 1.6;

}



/* Badges */

.vacancy-badge {

    background: var(--primary);

    color: white;

    font-size: 0.8rem;

    padding: 0.2rem 0.6rem;

    border-radius: 20px;

    vertical-align: middle;

    margin-left: 0.5rem;

}



.tag-badge {

    font-size: 0.75rem;

    padding: 0.1rem 0.5rem;

    border-radius: 4px;

    background: #f1f5f9;

    color: var(--text);

    border: 1px solid var(--border);

    font-weight: 600;

}



.tag-badge.active {

    background: #dcfce7;

    color: #166534;

    border-color: #bbf7d0;

}



.tag-badge.recent {

    background: #e0f2fe;

    color: #075985;

    border-color: #bae6fd;

}



/* Application Form */

.form-box {

    background: white;

    padding: 3rem;

    border-radius: var(--radius);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);

    max-width: 700px;

    margin: 0 auto;

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    font-size: 0.95rem;

}



.form-control {

    width: 100%;

    padding: 0.8rem;

    border: 1px solid var(--border);

    border-radius: 6px;

    font-size: 1rem;

    transition: 0.3s;

}



.form-control:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);

}



@media(max-width: 768px) {

    .job-header {

        flex-direction: column;

    }



    .btn-block-mobile {

        width: 100%;

        text-align: center;

    }



    .form-box {

        padding: 1.5rem;

    }

}



/* --- RESTORED CERTIFICATIONS PAGE STYLES --- */



/* Cert Grid */

.cert-display-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

    margin-bottom: 5rem;

}



.cert-item {

    text-align: center;

}



.cert-frame {

    position: relative;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    margin-bottom: 1.5rem;

    transition: 0.3s;

}



.cert-frame:hover {

    border-color: var(--primary);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.cert-badge {

    position: absolute;

    top: 1rem;

    right: 1rem;

    width: 32px;

    height: 32px;

    background: #16a34a;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.8rem;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    z-index: 2;

}



/* Quality Block */

\.quality-block {

    background: #f8fafc;

    color: var(--text-dark);

    border-radius: var(--radius);

    padding: 4rem;

    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 4rem;

    align-items: center;

    position: relative;

    overflow: hidden;

}



.quality-block::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 300px;

    height: 100%;

    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05));

    transform: skewX(-20deg);

}



.quality-title {

    color: var(--gold);

    margin-bottom: 1.5rem;

}



.quality-desc {

    font-size: 1.2rem;

    line-height: 1.6;

    font-weight: 300;

    font-style: italic;

    margin-bottom: 2rem;

    opacity: 0.9;

}



.quality-features {

    list-style: none;

    padding: 0;

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;

}



.quality-feature-item {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    font-size: 0.95rem;

    font-weight: 500;

}



.quality-feature-icon {

    color: var(--gold);

}



.btn-quality {

    background: white;

    color: var(--dark);

    border: none;

    font-weight: 700;

}



.btn-quality:hover {

    background: var(--gold);

    color: white;

}



@media(max-width: 992px) {

    \.quality-block {

        grid-template-columns: 1fr;

        padding: 2rem;

        gap: 2rem;

        text-align: center;

    }



    .quality-features {

        justify-content: center;

    }



    .quality-action {

        margin-top: 1rem;

    }

}



/* --- RESTORED PRODUCT PAGE STYLES --- */



/* Layout */

.products-layout {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 3rem;

    align-items: flex-start;

}



/* Sidebar */

.sidebar {

    background: white;

    padding: 1.5rem;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    position: sticky;

    top: 100px;

}



.filter-group {

    margin-bottom: 2rem;

}



.filter-title {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid var(--border);

    color: var(--primary);

}



.filter-list {

    list-style: none;

}



.filter-item a {

    display: flex;

    justify-content: space-between;

    padding: 0.5rem 0;

    color: var(--text-gray);

    font-size: 0.95rem;

    transition: 0.2s;

}



.filter-item a:hover,

.filter-item a.active {

    color: var(--primary);

    font-weight: 600;

}



.count {

    background: #f1f5f9;

    padding: 0.1rem 0.5rem;

    border-radius: 10px;

    font-size: 0.75rem;

    color: var(--text-dark);

}



/* Product Grid */

.prod-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 2rem;

}



.prod-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: 0.3s;

    display: flex;

    flex-direction: column;

}



.prod-card:hover {

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    border-color: var(--primary);

    transform: translateY(-5px);

}



.prod-img-box {

    height: 250px;

    background: #f8fafc;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 1rem;

}



.prod-img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    transition: 0.5s;

}



.prod-card:hover .prod-img {

    transform: scale(1.05);

}



.prod-content {

    padding: 1.5rem;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.prod-cat-label {

    font-size: 0.8rem;

    text-transform: uppercase;

    color: var(--gold);

    font-weight: 600;

    display: block;

    margin-bottom: 0.5rem;

}



.prod-title {

    font-size: 1.1rem;

    margin-bottom: 1.5rem;

    color: var(--text-dark);

    font-weight: 600;

    flex-grow: 1;

}



.btn-full {

    display: block;

    width: 100%;

    text-align: center;

    margin-top: auto;

}



@media(max-width: 992px) {

    .products-layout {

        grid-template-columns: 1fr;

    }



    .sidebar {

        position: static;

        margin-bottom: 2rem;

    }

}





/* --- RESTORED BLOG/NEWS PAGE STYLES --- */



/* Filter Tabs */

.filter-tabs {

    display: flex;

    gap: 1rem;

    margin-bottom: 3rem;

    flex-wrap: wrap;

}



.filter-tab {

    background: white;

    border: 1px solid var(--border);

    padding: 0.6rem 1.5rem;

    border-radius: 50px;

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text-gray);

    cursor: pointer;

    transition: 0.3s;

}



.filter-tab:hover,

.filter-tab.active {

    background: var(--primary);

    color: white;

    border-color: var(--primary);

}



/* News Grid */

.news-grid {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.news-card {

    display: flex;

    gap: 0;

    background: white;

    border-radius: var(--radius);

    overflow: hidden;

    border: 1px solid var(--border);

    transition: 0.3s;

    align-items: stretch;

}



.news-card:hover {

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    border-color: var(--primary);

}



.news-card-img {

    width: 260px;

    height: 210px;

    object-fit: cover;

    object-position: center;

    flex-shrink: 0;

    display: block;

}



.news-card-body {

    padding: 2rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    flex-grow: 1;

}



.news-card-meta {

    display: flex;

    gap: 1rem;

    font-size: 0.85rem;

    margin-bottom: 0.5rem;

    color: var(--text-gray);

}



.news-card h3 {

    font-size: 1.25rem;

    margin-bottom: 1rem;

    color: var(--text-dark);

}



.news-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



@media(max-width: 768px) {

    .news-card {

        flex-direction: column;

    }



    .news-card-img {

        width: 100%;

        height: 220px;

        min-height: unset;

    }



    .news-card-body {

        padding: 1.5rem;

    }

}





/* --- RESTORED CONTACT PAGE STYLES --- */



/* Contact Grid */

.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

}



.contact-card {

    background: white;

    padding: 3rem;

    border-radius: var(--radius);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);

}



.info-row {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 2rem;

    align-items: flex-start;

}



.info-icon {

    width: 50px;

    height: 50px;

    background: #f1f5f9;

    color: var(--primary);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



/* Map Section */

.map-section {

    height: 500px;

    background: #e2e8f0;

    margin-top: 5rem;

}



/* Form Styles Override (if needed) */

.form-input {

    width: 100%;

    padding: 0.8rem;

    border: 1px solid var(--border);

    border-radius: 6px;

    font-size: 1rem;

    background: #f8fafc;

    transition: 0.3s;

}



.form-input:focus {

    outline: none;

    border-color: var(--primary);

    background: white;

}



@media(max-width: 992px) {

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .contact-card {

        padding: 2rem;

    }



    .map-section {

        height: 350px;

        /* Smaller map on mobile */

    }

}



/* --- RESPONSIVE FIXES --- */



/* Mobile Menu Toggle */

.mobile-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    color: var(--primary);

    padding: 0.5rem;

}



@media (max-width: 1024px) {



    /* Layout Adjustments */

    .container {

        padding: 0 1.5rem;

        width: 100%;

        max-width: 100%;

    }



    /* Trust Strip Stacking */

    .trust-grid {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

        align-items: center;

        justify-content: center;

    }



    /* Hero Adjustments */

    .hero-slider-container {

        height: 60vh;

        min-height: 500px;

    }



    .hero-number {

        font-size: 4rem;

        top: 15%;

        color: rgba(255, 255, 255, 0.1);

    }



    .text-xl {

        font-size: 2.5rem;

        /* Force smaller size */

    }



    /* Navigation - Mobile Menu */

    .nav-menu {

        display: none;

        /* Hidden by default */

        position: fixed;

        top: 90px;

        left: 0;

        width: 100%;

        background: white;

        flex-direction: column;

        padding: 2rem;

        border-bottom: 1px solid var(--border);

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

        z-index: 999;

        gap: 1.5rem;

        align-items: flex-start;

    }



    .nav-menu.active {

        display: flex;

        animation: fadeIn 0.3s ease;

    }



    .mobile-toggle {

        display: block;

    }



    .header-actions {

        gap: 1rem;

    }

}



@media (max-width: 768px) {



    /* Product Grid - Force 1 Column */

    /* Use !important to override any specific inline-like specificity if present */

    .product-showcase-grid {

        grid-template-columns: 1fr !important;

        grid-template-rows: auto !important;

    }



    .prod-card {

        height: 300px;

        /* Smaller cards */

    }



    .prod-card.featured {

        grid-column: auto !important;

        /* Remove span */

        grid-row: auto !important;

    }



    /* Hide top nav on small screens */

    \.top-nav {

        display: none;

    }



    /* Adjust header elements */

    .header-inner {

        height: 70px;

    }



    .nav-menu {

        top: 70px;

        /* Adjust for shorter header */

    }



    .btn-primary {

        padding: 0.75rem 1.2rem;

        /* Smaller button */

    }



    /* Hero Text */

    .text-xl {

        font-size: 2rem;

    }



    .hero-overline {

        font-size: 0.75rem;

    }



    /* Footer Stacking */

    .footer-grid {

        grid-template-columns: 1fr !important;

        gap: 2rem;

        text-align: left;

    }



    .footer-btm {

        flex-direction: column;

        text-align: center;

        gap: 1.5rem;

        word-break: break-word;
        /* Ensure super long URLs or text can break */

    }



    .footer-legal {

        justify-content: center;

        flex-wrap: wrap;

        gap: 1rem;
        /* Added gap to prevent squishing */

    }

    .footer-legal a {

        margin-right: 0 !important;
        /* Disabling inline margin for flex gap spacing on mobile */

    }



    /* Remove horizontal overflows */

    .trust-item {

        width: 100%;

        justify-content: center;

    }



    /* Slider Controls */

    .slider-nav {

        right: 1rem;

    }



    .slider-controls {

        justify-content: center;

    }



    /* Fix Arrivals Slider width */
    .arrival-slide {
        min-width: 100%;
        width: 100%;
    }

}



@media (max-width: 480px) {



    /* Very small screens */

    .header-actions .btn {

        display: none;

        /* Hide 'Partner' button, keep only menu/search */

    }



    .logo {

        font-size: 1.4rem;

    }

}



/* --- PRELOADER --- */

/* --- PRELOADER --- */

#preloader {
    position: fixed;
    inset: 0;
    background-color: #f8fafc;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}



.preloader-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    /* Clean layout without the heavy card */

}



/* Preloader Layout */

.preloader-row {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    margin-bottom: 1rem;

}



/* Industrial Gears */

.industrial-gears {

    position: relative;

    width: 60px;

    height: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.gear-svg {

    position: absolute;

    width: 40px;

    height: 40px;

}



.gear-larg {

    width: 50px;

    height: 50px;

    top: -10px;

    left: -10px;

    animation: spinGear 4s linear infinite;

    opacity: 0.8;

}



.gear-small {

    width: 30px;

    height: 30px;

    bottom: -5px;

    right: -5px;

    animation: spinGearReverse 3s linear infinite;

    opacity: 0.6;

}



@keyframes spinGear {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}



@keyframes spinGearReverse {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(-360deg);

    }

}



/* Logo Split Container */

.split-logo-container {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 80px;

    /* Margin handled by row gap now */

}



/* Common Image Styles */

.logo-img-ref {

    height: 60px;

    width: auto;

    max-width: none;

}



/* Part 1: Icon - HYDRAULIC PRESS EFFECT */

.logo-part-icon {

    width: 50px;

    overflow: hidden;

    position: relative;

    z-index: 2;

    opacity: 0;

    /* Start large and slam down */

    transform: scale(3);

    animation: slamIcon 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}



/* Part 2: Text - TELESCOPIC SLIDE */

.logo-part-text {
    width: 0px;
    overflow: hidden;
    position: relative;
    /* Removed margin-left to prevent overflow */
    opacity: 0;
    animation: revealText 1.0s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.6s;
    /* Wait for slam */
    border-right: 2px solid #e63946;
    /* Laser edge */
}



/* Shift left matching the Icon width to align perfectly */
.logo-part-text .logo-img-ref {
    position: relative;
    left: -50px;
    margin-left: 0;
}



/* Keyframes */

@keyframes slamIcon {

    0% {

        opacity: 0;

        transform: scale(3);

    }



    70% {

        opacity: 1;

        transform: scale(0.9);

    }



    /* Over-compress */

    100% {

        opacity: 1;

        transform: scale(1);

    }



    /* Rebound */

}



@keyframes revealText {

    from {

        width: 0px;

        opacity: 1;

        border-right-width: 2px;

    }



    to {

        width: 200px;

        opacity: 1;

        border-right-width: 0px;

    }

}



/* Tagline - MACHINE READOUT */

.anim-tagline {

    font-family: 'Courier New', monospace;

    /* Monospace is key for manufacturing */

    font-size: 0.8rem;

    font-weight: 700;

    color: #334155;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-top: 1rem;

    margin-bottom: 2rem;

    opacity: 0;

    transition: opacity 0.5s;

    background: #e2e8f0;

    padding: 2px 8px;

    border-radius: 2px;

}



/* Manufacturing Process Styles Removed */



@keyframes popP {

    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes slideArko {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeTagline {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInTrack {

    to {

        opacity: 1;

    }

}



@keyframes loadProgressFill {

    0% {

        width: 0%;

    }



    100% {

        width: 100%;

    }

}



/* --- COMPANY PAGE STYLES (Added Fix) --- */



/* Split Layout */

.split-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.split-layout.reverse .split-content {

    order: 2;

    /* Switch order on desktop */

}



.split-image img {

    width: 100%;

    border-radius: var(--radius);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



@media (max-width: 900px) {



    .split-layout,

    .split-layout.reverse {

        display: flex !important;

        flex-direction: column !important;

        gap: 2rem;

    }



    .split-content {

        order: 1 !important;

    }



    .split-image {

        order: 2 !important;

        margin-top: 1rem;

        margin-bottom: 3rem;

        /* Extra space after image */

    }

}



/* Cert Strip */

.cert-strip {

    background: var(--bg-section);

    padding: 1rem 0;

    border-bottom: 1px solid var(--border);

}



.cert-flex {

    display: flex;

    justify-content: center;

    gap: 2rem;

    flex-wrap: wrap;

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text-gray);

}



.cert-flex span {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



/* Leader Grid */

.leader-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.leader-card {

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: 0.3s;

}



.leader-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}



.leader-img {

    height: 350px;

    background: var(--bg-section);

    overflow: hidden;

}



.leader-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.3s;

}



.leader-card:hover .leader-img img {

    transform: scale(1.05);

}



.leader-info {

    padding: 1.5rem;

}



.leader-info h3 {

    font-family: var(--font-heading);

    font-size: 1.2rem;

    margin-bottom: 0.25rem;

}



.leader-role {

    color: var(--primary);

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    display: block;

    margin-bottom: 1rem;

}



/* Philosophy */

.philosophy-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



.ph-card {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 2rem;

    border-radius: var(--radius);

}



.ph-icon {

    color: var(--highlight);

    margin-bottom: 1rem;

}



/* Stats */

.stat-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    text-align: center;

}



.stat-num {

    font-size: 3rem;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

    margin-bottom: 0.5rem;

}

/* -------------------------------------------

   BLOG DETAIL UI ENHANCEMENTS

------------------------------------------- */



/* Reading Progress Bar */

.reading-progress-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: transparent;

    z-index: 1000;

}



.reading-progress-bar {

    height: 100%;

    background: var(--primary);

    width: 0%;

    transition: width 0.1s;

}



/* Blog Layout Grid */

.blog-layout-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 3rem;

    position: relative;

}



@media (min-width: 992px) {

    .blog-layout-grid {

        grid-template-columns: 1fr 300px;

        /* Content + Sidebar */

    }

}



/* Typography Enhancements */

.drop-cap-wrapper::first-letter {

    float: left;

    font-size: 3.5rem;

    line-height: 0.8;

    padding: 0.1em 0.1em 0 0;

    color: var(--primary);

    font-family: var(--font-heading);

    font-weight: 700;

}



.blog-main-content .content-body h2 {

    font-family: var(--font-heading);

    font-size: 1.8rem;

    margin-top: 2.5rem;

    margin-bottom: 1rem;

    color: var(--primary);

    font-weight: 700;

}



.blog-main-content .content-body h3 {

    font-family: var(--font-heading);

    font-size: 1.4rem;

    margin-top: 2rem;

    margin-bottom: 0.8rem;

    color: var(--secondary);

    font-weight: 600;

}



.blog-main-content .content-body blockquote {

    border-left: 4px solid var(--highlight);

    background: var(--bg-section);

    padding: 1.5rem;

    margin: 2rem 0;

    font-style: italic;

    font-size: 1.25rem;

    color: var(--text-dark);

    border-radius: 0 var(--radius) var(--radius) 0;

}



/* Author Bio */

.author-bio {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    padding: 2rem;

    background: white;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

}



.author-avatar {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: var(--bg-section);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



/* Sidebar & Sticky Widget */

.blog-sidebar {

    margin-top: 0;

}



.sticky-sidebar {

    position: sticky;

    top: 100px;

    /* Adjust based on header height */

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.sidebar-widget {

    background: white;

    padding: 1.5rem;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

}



.widget-title {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--primary);

    border-bottom: 2px solid var(--border);

    padding-bottom: 0.5rem;

}



.share-links-vertical {

    display: flex;

    flex-direction: row;

    /* Default layout for mobile/widget */

    gap: 1rem;

    justify-content: center;

}



@media (min-width: 992px) {

    .share-links-vertical {

        flex-direction: column;

        /* Stack vertically if desired, or keep grid */

    }

}



.share-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid var(--border);

    background: white;

    color: var(--text-gray);

    transition: all 0.2s;

    cursor: pointer;

}



.share-btn:hover {

    transform: translateY(-2px);

    border-color: var(--highlight);

    color: var(--highlight);

    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);

}



.share-btn.whatsapp:hover {

    color: #25D366;

    border-color: #25D366;

}



.share-btn.email:hover {

    color: #EA4335;

    border-color: #EA4335;

}



/* Newsletter Widget */

\.newsletter-widget {

    background: #f8fafc;

    color: var(--text-dark);

    border: none;

}



.newsletter-widget .widget-title {

    color: white;

    border-color: rgba(255, 255, 255, 0.2);

}



.newsletter-widget .text-sm {

    color: rgba(255, 255, 255, 0.8);

}



/* Table of Contents */

.toc-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.toc-list li {

    margin-bottom: 0.5rem;

}



.toc-list a {

    font-size: 0.9rem;

    color: var(--text-gray);

    text-decoration: none;

    transition: color 0.2s;

    display: block;

    padding-left: 10px;

    border-left: 2px solid transparent;

}



.toc-list a:hover {

    color: var(--primary);

    border-left-color: var(--primary);

}



/* Feature Grid */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 2px;
    border: 1px solid #e2e8f0;
    transition: 0.3s;
    text-align: center;
}

.feature-card:hover {
    border-color: #0F2C59;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}


/* Fix CSS Grids Overflow */
.product-showcase-grid,
.cert-grid,
.news-section-grid,
.footer-grid,
.container {
    min-width: 0;
    max-width: 100%;
}

.product-showcase-grid>*,
.cert-grid>*,
.news-section-grid>* {
    min-width: 0;
}

/* Floating Actions Mobile Overlay Fix */
@media (max-width: 768px) {
    .floating-actions {
        bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
    }
}

/* ===== PREMIUM HEADER OVERRIDES ===== */
.site-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px !important;
    gap: 1rem;
}

.header-logo-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-menu {
    flex: 2;
    display: flex !important;
    justify-content: center !important;
    gap: clamp(1.5rem, 2vw, 2.5rem) !important;
    align-items: center;
}

.header-actions {
    flex: 1;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1.25rem !important;
    align-items: center;
}

/* Nav Polish */
.nav-menu .nav-link {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    padding: 0.5rem 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color 0.3s ease;
}

.nav-menu .nav-link:hover {
    color: var(--primary) !important;
}

.nav-menu .nav-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after,
.nav-item-dropdown:hover .nav-link::after {
    width: 100%;
}

/* Modern Dropdown */
.nav-item-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(15, 44, 89, 0.08) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0 !important;
    top: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10000;
}

.nav-item-dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    top: 100%;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
    color: var(--text-dark) !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border-bottom: none !important;
}

.dropdown-menu a:hover {
    background-color: rgba(15, 44, 89, 0.03) !important;
    color: var(--primary) !important;
    padding-left: 2rem !important;
}

/* Search Icon Button */
.action-search {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    transition: all 0.3s ease;
    cursor: pointer;
}

.action-search:hover {
    background: var(--bg-section);
    border-color: var(--text-gray);
    color: var(--primary);
    transform: scale(1.05);
}

/* Premium CTA */
.premium-cta {
    padding: 0.75rem 1.75rem;
    font-size: 0.85rem;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 50px;
    background: var(--primary);
    color: white !important;
    border: none;
    box-shadow: 0 4px 15px rgba(15, 44, 89, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.premium-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    transition: all 0.6s ease;
}

.premium-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 44, 89, 0.3);
}

.premium-cta:hover::before {
    left: 150%;
}



/* ================================================
   GLOBAL UTILITY ADDITIONS
   Added during Site Audit
   ================================================ */

/* Hover-lift card effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Section subtitle / sub-description */
.section-subtext {
    font-size: 1.05rem;
    color: var(--text-gray);
    max-width: 700px;
    margin: 1rem auto 0;
    line-height: 1.7;
}

/* Centered section header */
.section-header-center {
    text-align: center;
}

/* Light background section */
.bg-light {
    background-color: var(--bg-section);
}

/* Text accent color */
.text-primary {
    color: var(--primary);
}

/* Inline link style */
.hover-link {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.hover-link:hover {
    border-color: var(--primary);
}

/* Filter tabs (used in news/blog) */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.filter-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-gray);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font-body);
}

.filter-tab:hover,
.filter-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* News grid — used in resources/news.php */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.news-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.news-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.news-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 0.75rem;
}

.news-card h3 {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    flex: 1;
}

.news-card-footer {
    margin-top: auto;
    padding-top: 1rem;
}

/* Scroll animation: base state */
.scroll-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade-up base (for JS-driven reveal) */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.is-visible {
    opacity: 1;
    transform: none;
}


/* ================================================
   FOOTER GRID
   ================================================ */

footer {
    background: #0B1120;
    color: #c0c0c0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding: 4rem 0 2rem;
}

.footer-logo-img {
    height: 52px;
    width: auto;
    margin-bottom: 1rem;
    filter: brightness(1.1);
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: #b0b0b0;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #b0b0b0;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.social-icon:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.footer-heading {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.6rem;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-legal a {
    font-size: 0.8rem;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: #fff;
}

/* Footer tablet: 2-column */
@media (max-width: 960px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Footer mobile: single column */
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 3rem 0 1.5rem;
    }

    .footer-btm {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal {
        gap: 1rem;
    }
}


/* ================================================
   PRODUCT SIDEBAR — Mobile Drawer 
   ================================================ */

.product-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

.product-sidebar-mobile-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--primary);
    width: 100%;
    margin-bottom: 1rem;
    transition: background 0.2s;
}

.product-sidebar-mobile-toggle:hover {
    background: rgba(15, 44, 89, 0.04);
}

@media (max-width: 900px) {
    .product-sidebar-mobile-toggle {
        display: flex !important;
    }

    .product-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        height: 100vh;
        width: 300px;
        border-radius: 0;
        z-index: 1500;
        overflow-y: auto;
        padding-top: 1.5rem;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .product-sidebar.mobile-open {
        left: 0;
    }
}


/* ================================================
   HERO — Mobile Text Sizes
   ================================================ */

.hero-content h1,
.slide-title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.1;
}

.page-hero-content h1 {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
}

@media (max-width: 768px) {

    .hero-content h1,
    .slide-title {
        font-size: clamp(1.6rem, 7vw, 3rem);
    }

    .page-hero-content h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .hero-content p {
        font-size: 0.95rem !important;
    }
}


/* ================================================
   FLOATING ACTION BUTTONS
   ================================================ */

.floating-actions {
    position: fixed;
    bottom: 24px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1200;
}

.fab-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.fab-btn.whatsapp {
    background: #25D366;
}

.fab-btn.call {
    background: var(--primary);
}

@media (max-width: 480px) {
    .fab-btn {
        width: 44px;
        height: 44px;
    }
}

/* ================================================
   TIMELINE SECTION
   ================================================ */

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: var(--border);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background: inherit;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 2rem;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: white;
    border: 4px solid var(--primary);
    top: 24px;
    border-radius: 50%;
    z-index: 1;
    transition: 0.3s ease;
}

.timeline-item:hover::after {
    background-color: var(--primary);
    box-shadow: 0 0 0 5px rgba(15, 44, 89, 0.2);
}

.timeline-item:nth-child(even)::after {
    left: -10px;
}

.timeline-content {
    background-color: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.timeline-content h3 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

.timeline-year {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    display: inline-block;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--gold);
}

@media (max-width: 768px) {
    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item:nth-child(even) {
        left: 0%;
    }

    .timeline-item::after {
        left: 21px;
    }

    .timeline-item:nth-child(even)::after {
        left: 21px;
    }
}

/* Floating Menu CSS */
.floating-menu {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
}

.fab {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    text-decoration: none;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.fab.main {
    background: #0d2b5c;
    cursor: pointer;
    font-size: 28px;
}

.menu-options {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s;
    pointer-events: none;
}

.floating-menu:hover .menu-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fab.chat {
    background: #22c55e;
}

.fab.call {
    background: #1e3a8a;
}

/* Disable hover effects on mobile for better UX */
@media (max-width: 768px) {
    .menu-options {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        margin-bottom: 5px;
    }

    .fab.main {
        display: none;
    }
}
/* 
   BLOG DETAIL UI ENHANCEMENTS - CLEAN & PROFESSIONAL 
*/

/* Reading Progress Bar */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
}

.reading-progress-bar {
    height: 100%;
    background: var(--highlight);
    /* Highlights use the blue accent */
    width: 0%;
    transition: width 0.1s ease-out;
}

/* Blog Layout Grid */
.blog-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    position: relative;
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .blog-layout-grid {
        grid-template-columns: 1fr 320px;
        /* Content + Sidebar */
    }
}

/* Typography Enhancements */
.drop-cap-wrapper::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 0.8;
    padding: 0.15em 0.15em 0 0;
    color: var(--primary, #0F2C59);
    font-family: var(--font-heading);
    font-weight: 800;
    margin-right: 0.5rem;
    text-shadow: 2px 2px 0px rgba(15, 44, 89, 0.1);
}

.blog-main-content .content-body h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary, #0F2C59);
    font-weight: 800;
    line-height: 1.3;
    position: relative;
    padding-bottom: 0.75rem;
}

.blog-main-content .content-body h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.blog-main-content .content-body h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: #1e293b;
    font-weight: 700;
    line-height: 1.4;
}

.blog-main-content .content-body h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #334155;
    font-weight: 600;
    line-height: 1.5;
}

.blog-main-content .content-body p {
    margin-bottom: 1.85rem;
    font-size: 1.15rem;
    line-height: 1.85;
    color: #444;
}

.blog-main-content .content-body ul,
.blog-main-content .content-body ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.blog-main-content .content-body li {
    margin-bottom: 0.85rem;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
}

.blog-main-content .content-body img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    margin: 2.5rem 0;
    transition: transform 0.4s ease;
}

.blog-main-content .content-body img:hover {
    transform: scale(1.02);
}

.blog-main-content .content-body blockquote {
    border-left: 4px solid #3b82f6;
    background: #f8fafc;
    padding: 2rem 2.5rem;
    margin: 3rem 0;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--primary, #0F2C59);
    border-radius: 0 12px 12px 0;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* Author Bio - Clean */
.author-bio {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(to right, #f8fafc, white);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    margin-top: 4rem;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 2px solid #e2e8f0;
}

.author-info h4 {
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.author-info p {
    color: var(--text-gray);
    font-size: 0.95rem;
    margin: 0;
}

/* Sidebar & Sticky Widget */
.blog-sidebar {
    margin-top: 0;
}

.sticky-sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;
}

.sidebar-widget {
    background: white;
    padding: 1.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.01);
    transition: box-shadow 0.2s;
}

.sidebar-widget:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
}

.widget-title {
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-gray);
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
}

/* Share Links */
.share-links-vertical {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 992px) {
    .share-links-vertical {
        flex-direction: column;
    }
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: white;
    color: var(--text-gray);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 1.1rem;
}

.share-btn:hover {
    transform: translateY(-2px);
    border-color: var(--highlight);
    color: var(--highlight);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

.share-btn.whatsapp:hover {
    color: #25D366;
    border-color: #25D366;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}

.share-btn.email:hover {
    color: #EA4335;
    border-color: #EA4335;
    box-shadow: 0 4px 12px rgba(234, 67, 53, 0.2);
}

/* Newsletter Widget */
\.newsletter-widget {
    background: #f8fafc;
    color: var(--text-dark);
    border: none;
    background: linear-gradient(135deg, var(--primary), #1e3a8a);
}

.newsletter-widget .widget-title {
    color: white;
    border-color: rgba(255, 255, 255, 0.15);
}

.newsletter-widget .text-sm {
    color: blue;
    /* Changed from text-gray to blue-100/white mixture for visibility */
    color: rgba(255, 255, 255, 0.85);
}

.form-input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid white;
    color: #333;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.form-input:focus {
    background: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.form-input::placeholder {
    color: #666;
}

.newsletter-widget .btn {
    background: white !important;
    color: var(--primary) !important;
    border: none !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
    transition: all 0.2s;
}

.newsletter-widget .btn:hover {
    background: #f1f5f9 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Share Links */
.share-links-vertical {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .share-links-vertical {
        flex-direction: row;
        /* Changed to row for better look in sidebar */
        justify-content: space-between;
    }
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    /* Slightly larger */
    height: 50px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    /* Thicker border */
    background: white;
    color: var(--text-gray);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Table of Contents */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 0.75rem;
}

.toc-list a {
    font-size: 0.9rem;
    color: var(--text-gray);
    text-decoration: none;
    transition: all 0.2s;
    display: block;
    padding-left: 12px;
    border-left: 2px solid transparent;
    line-height: 1.4;
}

.toc-list a:hover,
.toc-list a.active {
    color: var(--primary);
    border-left-color: var(--highlight);
    background: linear-gradient(to right, rgba(14, 165, 233, 0.05), transparent);
    font-weight: 500;
}

/* Community Widget */
.community-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.community-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
    border: 1px solid transparent;
    color: white !important;
    /* Force white text */
}

.community-btn span {
    flex: 1;
}

/* YouTube */
.community-btn.youtube {
    background: #FF0000;
    border-color: #FF0000;
}

.community-btn.youtube:hover {
    background: #CC0000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25);
}

/* Facebook Group */
.community-btn.facebook {
    background: #1877F2;
    border-color: #1877F2;
}

.community-btn.facebook:hover {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25);
}

/* WhatsApp Community */
.community-btn.whatsapp-group {
    background: #25D366;
    border-color: #25D366;
}

.community-btn.whatsapp-group:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}
/* public/css/optimizations.css - Refined Global Styles for Parko Hardware */

:root {
    --primary: #0F2C59;
    --secondary: #3b82f6;
    --text-dark: #1e293b;
    --text-gray: #64748b;
    --light-bg: #f8fafc;
    --section-spacing-y: clamp(5rem, 10vw, 9rem);
    --container-padding: clamp(1.5rem, 5vw, 4rem);
    --premium-shadow: 0 4px 20px rgba(15, 44, 89, 0.06);
    --hover-shadow: 0 12px 30px rgba(15, 44, 89, 0.12);
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Section Utility */
.section { padding: var(--section-spacing-y) 0; background: #ffffff !important; position: relative; }
.section-alt { padding: var(--section-spacing-y) 0; background: var(--light-bg) !important; position: relative; }

/* Unified Component Styles */
.shared-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--premium-shadow);
    border: 1px solid rgba(0,0,0,0.05);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.shared-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hover-shadow);
}

/* Card Button Animations */
.cat-btn, .arrival-btn, .read-btn { border-bottom: 2px solid transparent; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }
.cat-btn { opacity: 0; transform: translateY(15px); transition: all 0.4s ease 0.1s; font-size: 0.85rem; color: white; display: inline-block; font-weight: 700; }
.shared-card:hover .cat-btn { opacity: 1; transform: translateY(0); border-bottom-color: var(--secondary); }

/* Visibility & Overlay Overrides */
.prod-card .prod-overlay {
    background: linear-gradient(to top, rgba(15, 44, 89, 0.95) 0%, rgba(15, 44, 89, 0.3) 70%, transparent 100%) !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: center !important;
}
.prod-card:hover .prod-overlay { opacity: 1 !important; }
.prod-card .prod-details { transform: translateY(20px) !important; transition: all 0.4s ease !important; width: 100% !important; }
.prod-card:hover .prod-details { transform: translateY(0) !important; }

.infra-overlay { background: rgba(15, 44, 89, 0.35) !important; }
.prod-img, .cat-img, .arrival-img, .featured-img, .article-img, .home-news-img {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
}

/* Typography Polish */
.home-section-title { margin-bottom: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; font-size: clamp(2rem, 4vw, 2.75rem); color: var(--primary); }
.home-section-desc { max-width: 850px; margin: 0 auto 2.5rem; line-height: 1.7; font-size: 1.05rem; color: #64748b; }
.section-subtext { max-width: 800px; margin: 0 auto; line-height: 1.8; color: var(--text-gray); font-size: 1.15rem; font-weight: 400; opacity: 0.85; }

/* Global Icon Styling */
i {
  display: inline-block;
  font-size: 18px;
  color: inherit;
  vertical-align: middle;
}
/* 
    Outbond Premium Overrides 
    Cohesive Design System for Buttons & Sections
*/

:root {
    /* Colors & Shadows */
    --primary-navy: #0F2C59;
    --accent-blue: #3b82f6;
    --text-slate-600: #475569;
    --premium-shadow-sm: 0 4px 12px rgba(15, 44, 89, 0.08);
    --premium-shadow-md: 0 12px 24px -6px rgba(15, 44, 89, 0.12);
    --premium-shadow-lg: 0 20px 40px -12px rgba(15, 44, 89, 0.18);
    --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography System */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    /* Responsive Font Scale (Fluid Typography) */
    --fs-h1: clamp(2.5rem, 5vw, 4rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
    --fs-body: clamp(1rem, 1.2vw, 1.125rem);
    --fs-small: clamp(0.75rem, 1vw, 0.875rem);

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Line Heights */
    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-body: 1.6;
    --lh-relaxed: 1.8;
}

/* Base Global Typography */
body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-slate-600);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--primary-navy);
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -1.5px; margin-bottom: 1.5rem; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -1px; margin-bottom: 1rem; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: -0.5px; margin-bottom: 1rem; }
p, .body-text { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 1.5rem; }
small, .small { font-size: var(--fs-small); line-height: var(--lh-body); }

/* Universal Section Typography */
.section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--primary-navy);
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--text-slate-600);
    max-width: 650px;
    margin-bottom: 2rem;
}

/* Base Button System */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-navy);
    color: #ffffff !important;
    padding: 0.9rem 2.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition-premium);
    box-shadow: var(--premium-shadow-md);
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}

.btn-premium:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--premium-shadow-lg);
    background: var(--accent-blue);
}

.btn-premium-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--primary-navy) !important;
    padding: 0.9rem 2.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition-premium);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border: none;
    cursor: pointer;
    text-decoration: none !important;
}

.btn-premium-light:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    background: #f8fafc;
}

.btn-premium-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--primary-navy) !important;
    padding: 0.8rem 2.1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition-premium);
    border: 2.5px solid var(--primary-navy);
    cursor: pointer;
    text-decoration: none !important;
}

.btn-premium-outline:hover {
    background: var(--primary-navy);
    color: #ffffff !important;
    transform: translateY(-3px);
}

/* Section Uniformity Helpers */
.premium-card-box {
    background: #ffffff;
    padding: 4rem 3rem;
    border-radius: 32px;
    box-shadow: var(--premium-shadow-lg);
    border: 1px solid rgba(15, 44, 89, 0.05);
    text-align: center;
    transition: var(--transition-premium);
}

.premium-card-box:hover {
    box-shadow: 0 30px 60px -15px rgba(15, 44, 89, 0.15);
}

/* Unique Pro Integrated Section (Dark Theme) */
.pro-integrated-section {
    background: #f8fafc !important; /* Clean Light Grey */
    background-image:
        radial-gradient(circle at 20% 40%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(59, 130, 246, 0.03) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
    background-blend-mode: overlay !important;
    padding: 6rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
    color: #061121 !important; /* High-Contrast Navy */
    z-index: 1;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* HORIZONTAL MARQUEE CORE */
.partners-marquee-viewport {
    width: 100% !important;
    overflow: hidden !important;
    padding: 1rem 0 !important;
    position: relative !important;
    margin-bottom: 4rem !important;
}

.partners-marquee-track {
    display: flex !important;
    width: max-content !important;
    animation: partnersScroll var(--partners-duration, 30s) linear infinite !important;
}

.partners-marquee-group {
    display: flex !important;
    flex-wrap: nowrap !important; /* Critical: Prevent stacking/overlapping */
    align-items: center !important;
    gap: 0 !important; /* Spacing handled by item margin-right */
    padding-right: 0 !important; 
    flex-shrink: 0 !important;
    width: max-content !important; /* Force growth to fit items */
    min-width: max-content !important; /* Ultra-redundant to prevent compression */
}

@keyframes partnersScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--partners-dist, -50%)); }
}

.partners-marquee-track:hover {
    animation-play-state: paused !important;
}

/* Light Aurora Accent */
.pro-integrated-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03), transparent 60%);
    animation: pro-aurora-light 25s infinite alternate linear;
    pointer-events: none;
    z-index: -1;
}

@keyframes pro-aurora-light {
    0% { transform: translate(-3%, -3%) rotate(0deg); }
    100% { transform: translate(3%, 3%) rotate(3deg); }
}

.pro-integrated-section .section-header-center {
    width: 100% !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 2.5rem !important; /* ELITE: Reduced margin for better coherence */
    position: relative;
    z-index: 2;
}

.pro-integrated-section .pro-badge {
    margin: 0 auto 1.5rem !important;
    display: table !important; /* Forces centering with margin auto */
}

/* Blurred Edge Marquee Mask (Light Mode) */
.partners-marquee-viewport {
    width: 100% !important;
    overflow: hidden !important;
    padding: 2rem 0 !important;
    position: relative !important;
    margin-bottom: 4rem !important;
    min-height: 150px !important; /* Ensure visibility */
}

.partners-marquee-track {
    display: flex !important;
    width: max-content !important;
    align-items: center !important;
    animation: partnersScroll var(--partners-duration, 30s) linear infinite !important;
}

.pro-integrated-section .partner-logo-item {
    width: 220px !important; /* Standardize Box Size */
    min-width: 220px !important; /* Prevent narrowing */
    max-width: 220px !important;
    height: 110px !important;
    flex: 0 0 220px !important; /* Static non-flexible box size */
    background: #ffffff !important; /* Force Clear High-Quality Box */
    border: 1px solid rgba(15, 44, 89, 0.05) !important;
    border-radius: 12px !important; /* Modern Smooth Edges */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: grayscale(100%) !important;
    opacity: 0.7 !important;
    padding: 1.25rem !important; /* Internal Safety Space for Branding */
    transition: all 0.5s var(--transition-premium) !important;
    box-shadow: 0 4px 15px rgba(15, 44, 89, 0.05) !important;
    margin-right: 120px !important; /* Precise 120px gap between all boxes */
}

.pro-integrated-section .partner-logo-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 180px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    display: block !important;
}

.pro-integrated-section .partner-logo-item:hover {
    opacity: 1 !important;
    filter: grayscale(0%) !important; /* Full brand colors on hover */
    transform: translateY(-8px) scale(1.15) !important;
}

.pro-cta-card {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(25px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 4rem 3rem !important;
    border-radius: 30px !important;
    max-width: 900px !important;
    margin: 4rem auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* ELITE: Centers all card content - Title, Subtext, Button */
    justify-content: center !important;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.02) !important;
}

/* Premium Shimmer Effect */
.pro-cta-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    transform: rotate(45deg);
    animation: pro-shimmer 6s infinite linear;
    pointer-events: none;
}

@keyframes pro-shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.pro-cta-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-12px) scale(1.01) !important;
    box-shadow: 
        0 60px 120px rgba(0,0,0,0.5),
        inset 0 0 30px rgba(255,255,255,0.05) !important;
}

.pro-cta-title {
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 850 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.1 !important;
    color: #061121 !important; /* High-Contrast Navy */
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Luxury Background Text (Light Mode) */
.pro-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.01) !important;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    letter-spacing: -1vw;
    text-transform: uppercase;
}

/* Elite Pro Badge (Light Mode) */
.pro-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(5px);
}

/* Luxury Separator */
.pro-luxury-separator {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5), transparent);
    margin: 2rem auto;
}

/* MOBILE RESPONSIVE GAP REDUCTION */
@media (max-width: 768px) {
    .pro-integrated-section {
        padding: 2.5rem 0 !important;
    }
    .pro-integrated-section .section-header-center {
        margin-bottom: 1.5rem !important;
    }
    .partners-marquee-viewport {
        margin-bottom: 1.5rem !important;
        padding: 0.5rem 0 !important;
    }
    .pro-cta-card {
        padding: 2.5rem 1.5rem !important;
        margin-top: 1rem !important;
    }
    .pro-cta-title {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }
    .pro-badge {
        margin-bottom: 1rem !important;
    }
    .pro-integrated-section h2 {
        margin-bottom: 0.75rem !important;
    }
    .pro-luxury-separator {
        margin: 1rem auto !important;
    }
    .pro-bg-text {
        display: none !important;
    }
}

/* ========================================================================= */
/* UNIVERSAL HERO DESIGN SYSTEM */
/* ========================================================================= */

/* 1. Consistent Dark Gradient Overlay */
.ab-hero::before,
.oem-hero::before,
.dist-hero::before,
.catalog-hero::before,
.blog-hero::before,
.contact-hero::before,
.hero-slider-container::before,
.hero-overlay,
.ab-hero-overlay {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.35) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* 2. Elevated Content Layer - Maintains Spacing Structure */
.ab-hero > .container,
.ab-hero-content,
.oem-hero > .container-custom,
.products-hero > .container,
.products-hero-content,
.dist-hero > .container-custom,
.catalog-hero > .container,
.blog-hero > .container,
.contact-hero > .container,
.hero-slider-container > .hero-content,
.hero-content {
    position: relative !important;
    z-index: 3 !important;
}

/* 3. Universal Readability & Typography Synchronization */
.ab-hero h1, .oem-hero h1, .products-hero h1, .partner-hero h1, 
.req-hero h1, .hero-section h1, .contact-hero h1, .hero-slider-container h1, .page-hero h1, .page-hero .text-xl,
.ab-hero h2, .oem-hero h2, .products-hero h2, .partner-hero h2, 
.req-hero h2, .hero-section h2, .contact-hero h2, .hero-slider-container h2, .page-hero h2 {
    color: #ffffff !important;
    font-family: var(--font-heading, 'Montserrat', sans-serif) !important;
    font-size: var(--fs-h1, clamp(2.5rem, 5vw, 4.2rem)) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
    margin-bottom: 1.5rem !important;
}

/* Force purely white text on highlighted spans within headings */
.ab-hero h1 span, .oem-hero h1 span, .products-hero h1 span, .partner-hero h1 span,
.req-hero h1 span, .hero-section h1 span, .contact-hero h1 span, .hero-slider-container h1 span, .page-hero h1 span, .page-hero .text-xl span,
.ab-hero h2 span, .oem-hero h2 span, .products-hero h2 span, .partner-hero h2 span,
.req-hero h2 span, .hero-section h2 span, .contact-hero h2 span, .hero-slider-container h2 span, .page-hero h2 span {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Base text contrast & readability within heros */
.ab-hero p, .oem-hero p, .oem-hero li, .products-hero p,
.dist-hero p, .catalog-hero p, .blog-hero p, .contact-hero p,
.partner-hero p, .partner-hero li,
.hero-slider-container p {
    color: #ffffff !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    opacity: 0.9 !important;
}

/* Featured Insights Feature Cards Optimization */
.f-card-premium .f-card-title, .f-card-premium h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
.f-card-premium .f-card-overlay {
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.5) 50%, transparent 100%) !important;
    z-index: 1 !important;
}
.f-card-premium .f-card-content {
    position: relative !important;
    z-index: 2 !important;
}

/* OEM 2-Column Desktop Split Layout */
.oem-two-column-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 992px) {
    .oem-two-column-wrapper {
        max-width: 1250px;
        margin: 0 auto;
        padding: 40px 20px;
        grid-template-columns: 1.1fr 450px;
        grid-template-areas: 
            "process form"
            "qa form"
            "faq form";
        gap: 50px;
        align-items: start;
    }
    
    .oem-two-column-wrapper .process-section { grid-area: process; padding: 0 !important; margin: 0 !important; }
    .oem-two-column-wrapper .qa-section { grid-area: qa; padding: 40px 0 !important; margin: 0 !important; }
    .oem-two-column-wrapper .faq-section { grid-area: faq; padding: 0 0 40px 0 !important; margin: 0 !important; }
    .oem-two-column-wrapper .faq-section .container-custom { margin-top: 0 !important; }
    
    .oem-two-column-wrapper .form-section { 
        grid-area: form; 
        padding: 0 !important;
        position: sticky;
        top: 100px;
        z-index: 10;
        height: auto;
    }

    /* Strip internal container widths when inside grid to maximize space */
    .oem-two-column-wrapper .process-section .container-custom,
    .oem-two-column-wrapper .qa-section .container-custom,
    .oem-two-column-wrapper .faq-section .container-custom,
    .oem-two-column-wrapper .form-section .container-custom {
        padding: 0 !important;
        width: 100% !important;
    }
}

/* Homepage Trust Strip Premium Redesign */
.trust-strip {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 44, 89, 0.08) !important;
    padding: 1.25rem 0 !important;
    position: relative;
    z-index: 10;
}

.trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
}

.trust-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 1rem !important;
    border-right: 1px solid rgba(15, 44, 89, 0.1) !important;
    white-space: nowrap !important;
}

.trust-item:last-child {
    border-right: none !important;
}

.trust-icon {
    width: 22px !important;
    height: 22px !important;
    color: #2563eb !important; /* Modern focus blue */
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Responsive Overrides for Trust Strip */
@media (max-width: 1024px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: 1.25rem !important;
    }
    .trust-item:nth-child(2n) {
        border-right: none !important;
    }
}

@media (max-width: 640px) {
    .trust-grid {
        grid-template-columns: 1fr !important;
        row-gap: 1rem !important;
    }
    .trust-item {
        border-right: none !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}

/* Premium Mobile UI/UX Optimization (Apple-style Refinement) */
@media (max-width: 1024px) {
    /* NAVIGATION: Modern refined menu (18px Semi-Bold) */
    .mobile-links a, .js-dropdown-trigger {
        font-size: 1.125rem !important; /* 18px */
        font-weight: 600 !important;
        color: var(--primary) !important;
        letter-spacing: -0.01em !important;
        padding: 14px 0 !important; /* Clean tap targets */
        border-bottom: 1px solid rgba(15, 44, 89, 0.04) !important;
    }

    .mobile-dropdown-content a {
        font-size: 1rem !important; /* 16px */
        font-weight: 500 !important;
        padding: 12px 0 !important;
    }

    /* HAMBURGER REFINEMENT: Premium accessibility & clarity */
    .js-mobile-toggle {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(15, 44, 89, 0.05) !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        border-radius: 10px !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .js-mobile-toggle:active {
        transform: scale(0.9) !important;
        background: rgba(15, 44, 89, 0.1) !important;
    }
}

/* HEADER: Precise mobile layout balancing */
@media (max-width: 768px) {
    .site-header {
        height: 68px !important;
        min-height: 68px !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-inner {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        padding: 0 16px !important; /* Standardized 16px padding from edges */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Ensure desktop elements don't take space on mobile */
    .nav-menu, .header-actions {
        display: none !important;
    }

    .header-logo-col {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .logo-img {
        height: 34px !important; /* Perfect balance */
        width: auto !important;
        display: block !important;
    }

    .js-mobile-toggle {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* MOBILE MENU HEADER: Seamless transition */
    .mobile-menu-header {
        height: 68px !important;
        margin-bottom: 30px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(15, 44, 89, 0.05) !important;
    }

    .mobile-menu-header img {
        height: 32px !important;
    }

    .js-close-menu {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(15, 44, 89, 0.05) !important;
        border: none !important;
        border-radius: 10px !important;
        color: var(--primary) !important;
    }
}

/* HERO SECTION: Precise mobile layout and typography */
@media (max-width: 768px) {
    .hero-section {
        min-height: auto !important;
        height: min-content !important;
        display: block !important;
        background-color: #0f172a !important; /* Premium dark base */
    }

    .hero-slider-container {
        height: auto !important;
        min-height: 80vh !important;
    }

    .hero-slide {
        height: auto !important;
        min-height: 80vh !important;
    }

    .hero-content {
        padding: 85px 24px 60px 24px !important; /* Optimized top-clearance */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .hero-overline {
        font-size: 0.72rem !important; /* ~11px */
        font-weight: 700 !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
        color: #ffffff !important;
        opacity: 0.9 !important;
        margin-bottom: 0.85rem !important;
        display: block !important;
    }

    .hero-title {
        font-size: 28px !important; /* Standardized premium size */
        line-height: 1.2 !important;
        font-weight: 800 !important;
        margin-bottom: 1.5rem !important;
        letter-spacing: -0.03em !important;
        max-width: 100% !important;
        color: #ffffff !important;
    }

    .hero-desc-text {
        font-size: 0.95rem !important; /* ~15px */
        line-height: 1.6 !important;
        margin-bottom: 2.25rem !important;
        opacity: 0.8 !important;
        max-width: 100% !important;
        text-shadow: none !important;
        color: #ffffff !important;
        /* Reset any truncation */
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        line-clamp: unset !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
    }

    /* CTA ACTION BUTTONS: Modern stacking for thumb reach */
    .hero-cta-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .hero-cta-wrapper a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important; /* Refined sleek height */
        padding: 12px 16px !important;
        font-size: 14px !important; /* Premium minimal size */
        border-radius: 100px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        transition: transform 0.15s ease !important;
    }

    .hero-cta-wrapper a:active {
        transform: scale(0.97) !important;
    }

    .btn-premium-light {
        background: #ffffff !important;
        color: #0f172a !important;
        border: none !important;
    }

    .btn-premium-outline-light {
        background: transparent !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
    }

    /* OVERLAY REFINEMENT: Enhanced readability */
    .hero-overlay {
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    }

    /* SLIDER DOTS: Modern pill-style navigation */
    .hero-dots-nav {
        gap: 8px !important;
        bottom: 20px !important;
    }

    .nav-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 6px !important;
        background-color: rgba(255,255,255,0.4) !important;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        border: none !important;
    }

    .nav-dot.active {
        width: 24px !important;
        background-color: #ffffff !important;
        opacity: 1 !important;
    }

    /* FLOATING CHAT: Optimized scale and position */
    .contact-float {
        transform: scale(0.85) !important;
        bottom: 24px !important;
        right: 20px !important;
        transform-origin: bottom right !important;
        z-index: 1000 !important;
    }
}

/* ━━━ GLOBAL FAQ ICONS & SPACING REFINEMENT ━━━ */

/* 1. FAQ Global Reset */
.faq-question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.faq-icon {
    font-size: 20px !important;
    color: #0d6efd !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-item.active .faq-icon {
    color: #16a34a !important;
}

/* 2. Global Footer Spacing Fix */
footer.premium-footer {
    margin-top: 0 !important;
}

main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure the last content section has consistent padding and no extra margin */
section:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 80px !important; /* Standard padding for last section */
}

/* Specific fix for pages with high bottom padding in components */
.faq-wrapper, .cert-section, .contact-section {
    padding-bottom: 60px !important;
}

@media (max-width: 768px) {
    section:last-of-type {
        padding-bottom: 40px !important;
    }
}

/* ━━━ GLOBAL ICON SYSTEM ━━━ */

.icon-box {
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
}

.icon-box i {
    font-family: 'bootstrap-icons' !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 24px !important;
    color: #0d6efd !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-block !important; /* Standard for icon fonts */
    width: auto !important;
    height: auto !important;
}

/* Hover Micro-Interactions */
.p-feature-card:hover .icon-box,
.cert-card:hover .icon-box,
.vision-card:hover .icon-box,
.compliance-item:hover .icon-box,
.criteria-item:hover .icon-box,
.card:hover .icon-box {
    background: #0d6efd !important;
    transform: scale(1.05) !important;
}

.p-feature-card:hover .icon-box i,
.cert-card:hover .icon-box i,
.vision-card:hover .icon-box i,
.compliance-item:hover .icon-box i,
.criteria-item:hover .icon-box i,
.card:hover .icon-box i {
    color: #fff !important;
}

/* ========================================================================= */
/* UNIVERSAL BREADCRUMB SYSTEM */
/* ========================================================================= */
.pd-breadcrumb, .ab-breadcrumb, .products-breadcrumb, .breadcrumb {
    background: #f8fafc !important;
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    position: relative;
    z-index: 10;
}

.pd-breadcrumb ol, .ab-breadcrumb ol, .products-breadcrumb ol, .breadcrumb ol,
.pd-breadcrumb ul, .ab-breadcrumb ul, .products-breadcrumb ul, .breadcrumb ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* Specific centering for About Page Hero Breadcrumb */
.ab-hero .ab-breadcrumb {
    background: transparent !important;
    border-bottom: none !important;
    justify-content: center !important;
    margin-bottom: 3rem !important;
}

.pd-breadcrumb li, .ab-breadcrumb li, .products-breadcrumb li, .breadcrumb li,
.pd-breadcrumb span, .ab-breadcrumb span, .products-breadcrumb span, .breadcrumb span {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
}

.pd-breadcrumb li a, .ab-breadcrumb li a, .products-breadcrumb li a, .breadcrumb li a,
.pd-breadcrumb a, .ab-breadcrumb a, .products-breadcrumb a, .breadcrumb a {
    color: var(--primary-navy, #0F2C59) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.pd-breadcrumb li a:hover, .ab-breadcrumb li a:hover, .products-breadcrumb li a:hover {
    color: var(--accent-blue, #3b82f6) !important;
}

.pd-breadcrumb li.sep, .ab-breadcrumb .sep, .pd-breadcrumb .sep {
    color: #cbd5e1 !important;
    font-size: 0.75rem !important;
    margin: 0 2px !important;
}

.pd-breadcrumb li.current, .ab-breadcrumb .current, .pd-breadcrumb .current {
    color: var(--primary-navy) !important;
    font-weight: 700 !important;
}