/* ========================================================================== SV Steels Chennai — global element styles (spec §2, §3) Loaded AFTER assets/css/style.css so it can override template defaults. Do not edit style.css — that file is compiled from SCSS (style.css.map). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Spacing utilities — add alongside .section-padding to drop one edge. Single-class selectors, and this file loads after style.css on every page, so they beat .section-padding's shorthand without needing !important. -------------------------------------------------------------------------- */ .sv-pt-0 { padding-top: 0; } .sv-pb-0 { padding-bottom: 0; } /* -------------------------------------------------------------------------- 0b. Floating WhatsApp button — present on every page. MUST be a direct child of , outside #smooth-wrapper: ScrollSmoother transforms #smooth-content, and a transformed ancestor makes position:fixed resolve against that ancestor instead of the viewport. Sits above the scroll-to-top control, which style.css pins at right:20px / bottom:20px at 46px square — 20 + 46 + 12 of clearance = 78px. -------------------------------------------------------------------------- */ .sv-whatsapp-float { position: fixed; right: 20px; bottom: 78px; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: var(--white-color); font-size: 30px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); transition: var(--transition); } .sv-whatsapp-float:hover, .sv-whatsapp-float:focus-visible { background: #1DA851; color: var(--white-color); transform: scale(1.08); } .sv-whatsapp-float:focus-visible { outline: 3px solid var(--white-color); outline-offset: 3px; } @media (max-width: 575.98px) { .sv-whatsapp-float { right: 16px; bottom: 72px; width: 50px; height: 50px; font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .sv-whatsapp-float { transition: none; } .sv-whatsapp-float:hover, .sv-whatsapp-float:focus-visible { transform: none; } } /* -------------------------------------------------------------------------- 0c. Scroll-to-top button — maroon disc with a white arrow. style.css paints it with background-color:black plus mix-blend-mode:exclusion, which inverts the disc against whatever is behind it — so setting a maroon background alone would still not read as maroon. The blend mode has to go back to normal first. The disc the user actually sees is the filled inside .progress-circle (backToTop.js animates its stroke-dashoffset, but style.css leaves the stroke transparent), so that fill has to change too, not just the wrapper. -------------------------------------------------------------------------- */ .progress-wrap.active-progress { mix-blend-mode: normal; background-color: #670D0F; } .progress-wrap svg.progress-circle path { fill: #670D0F; } /* arrow glyph — was gold, which is low contrast on maroon */ .progress-wrap::after { color: var(--white-color); } /* red-to-gold on hover, matching the primary buttons */ .progress-wrap:hover.active-progress { background-color: #AE8333; } .progress-wrap:hover svg.progress-circle path { fill: #AE8333; } /* -------------------------------------------------------------------------- 1. Skip link — keyboard/screen-reader access past the nav -------------------------------------------------------------------------- */ .sv-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 20px; background: var(--primary-color); color: var(--white-color); font-family: var(--title-font); font-weight: 600; border-radius: 0 0 var(--primary-radius) 0; } .sv-skip-link:focus { left: 0; color: var(--white-color); } /* -------------------------------------------------------------------------- 2. Header — Chennai locality strip + mobile call/WhatsApp shortcuts -------------------------------------------------------------------------- */ /* Phone number in the top bar reads as a tappable link, not body copy. */ .header-top__left-info .text[href^="tel:"] { font-weight: 600; letter-spacing: 0.02em; } /* logo.png is 210x40. The width/height attributes in the markup declare that ratio so there's no layout shift (spec §3), but .offset-logo img is sized by CSS (width:100%, and only 150px under 576px) — so height must stay auto or the declared height stretches it. max-width guards narrow headers. */ .header__logo img, .offset-logo img { height: auto; max-width: 100%; } /* svsteels-logo.webp is square (500x500), not the wide strip the template was built for. Size it by height so it centres in the 96px header band instead of being stretched to a 5:1 box. Scoped by filename so the remaining logo.png slots are unaffected. */ .header__logo img[src$="svsteels-logo.webp"], .offset-logo img[src$="svsteels-logo.webp"] { height: 96px; width: auto; max-width: none; } @media (max-width: 575.98px) { .header__logo img[src$="svsteels-logo.webp"], .offset-logo img[src$="svsteels-logo.webp"] { height: 67px; } } /* Centre the logo inside the angled dark band. The band is .header-layoutone .header-area__inner::before — 386x96 at left:0, clip-path polygon(0 0, 95% 0, 75% 100%, 0% 100%). The inner box sits 100px further left than its content (margin-left:-100px + padding-left:100px), so in content coordinates the band runs from -100 to 286. Its trapezoid centroid is x=165 in band space, i.e. x=65 in content space. The 64px logo starts at content x=0 so its centre is at 32 — hence a 33px nudge. transform, not margin, so the flex row and the nav beside it don't move. Vertical needs nothing: .header-layoutone .main-menu li a has 35px top/bottom padding, making the row 96px — exactly the band height — and the inner box is already align-items:center. */ .header-layoutone .header__logo img[src$="svsteels-logo.webp"] { transform: translateX(33px); } /* Band narrows to 330px under 576px: centroid x=141 -> 41 in content space, against a 52px logo whose centre is at 26. */ @media (max-width: 575.98px) { .header-layoutone .header__logo img[src$="svsteels-logo.webp"] { transform: translateX(15px); } } /* Call + WhatsApp icon buttons shown in the header on tablet/mobile, where the "GET A QUOTE" button is hidden. Tap target 44px (spec §3). */ .sv-header-actions { display: flex; align-items: center; gap: 8px; } .sv-header-actions__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; color: var(--white-color); background: var(--primary-color); transition: var(--transition); } .sv-header-actions__btn--whatsapp { background: #25D366; } .sv-header-actions__btn:hover, .sv-header-actions__btn:focus { color: var(--white-color); opacity: 0.88; } @media (min-width: 1200px) { .sv-header-actions { display: none; } } /* -------------------------------------------------------------------------- 2b. Hamburger Menu Icon — Visible on Tablet (768px) & Mobile (480px), Hidden ONLY on Desktop (1200px+) -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .header__navicon, .side-toggle, .header-right .header__navicon, .header-right .side-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; margin-left: 8px !important; } .bar-icon, .header-right .bar-icon { display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 32px !important; height: 22px !important; padding: 1px 0 !important; cursor: pointer !important; visibility: visible !important; opacity: 1 !important; } .bar-icon span, .header-right .bar-icon span { display: block !important; width: 100% !important; height: 3px !important; background-color: #670D0F !important; /* Maroon bars for 100% contrast on white header */ border-radius: 3px !important; visibility: visible !important; opacity: 1 !important; transition: background-color 0.2s ease !important; } .bar-icon:hover span { background-color: #AE8333 !important; } } @media (min-width: 1200px) { .header__navicon, .side-toggle, .bar-icon, .header-right .header__navicon, .header-right .side-toggle { display: none !important; } } /* -------------------------------------------------------------------------- 2c. Tablet View Card Centering — "What SV Steels Chennai Stocks" & "What We Offer" Centers the 3rd card horizontally when 2 cards sit on row 1 -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199.98px) { .serviceone .row>div:nth-child(3), .serviceone .tab-box .row>div:nth-child(3), .servicetwo .row>div:nth-child(3), .blog .row>div:nth-child(3) { margin-left: auto !important; margin-right: auto !important; float: none !important; } } /* -------------------------------------------------------------------------- 3. Sticky mobile call bar (spec §2) — steel buyers convert by phone. MUST be a direct child of , outside #smooth-wrapper: ScrollSmoother transforms #smooth-content, which breaks position:fixed for descendants. -------------------------------------------------------------------------- */ .sv-callbar { display: none !important; } /* -------------------------------------------------------------------------- 4. Footer — NAP block, business facts, entity name -------------------------------------------------------------------------- */ /* Full legal/entity name above the address. Must match the Google Business Profile name character-for-character (spec §8). */ .sv-footer-nap { margin-bottom: 8px; } .sv-footer-nap__name { display: block; font-family: var(--title-font); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--white-color); text-transform: uppercase; letter-spacing: 0.02em; } .sv-footer-nap__address { display: block; font-style: normal; } /* GST number / business hours / email row under the main footer columns. */ .sv-footer-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--secondary-border-color); } .sv-footer-facts__item { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--text-primary); font-size: 15px; line-height: 1.6; } .sv-footer-facts__item i { margin-top: 4px; color: var(--primary-color); } .sv-footer-facts__item strong { color: var(--white-color); font-weight: 600; } .sv-footer-facts__item a { color: var(--text-primary); transition: var(--transition); } .sv-footer-facts__item a:hover, .sv-footer-facts__item a:focus { color: var(--primary-color); } /* Google Map embed (contact page) — responsive, no layout shift (CLS < 0.1). */ .sv-map-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--primary-radius); } .sv-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* -------------------------------------------------------------------------- 5. Breadcrumbs — visual styling lives with the template's breadcumb block; this only ensures the current page is visually distinct. -------------------------------------------------------------------------- */ .breadcumb-content li[aria-current="page"] { opacity: 0.75; } /* -------------------------------------------------------------------------- 6. Blog article headings — black instead of the template's gold (all four resolve to --secondary-color, #AE8333, in style.css). Shared by steel-price-trends.html, steel-buying-guide.html and quality-steel.html, which all load this file. -------------------------------------------------------------------------- */ .blog-details__title, .blog-details__operation-title, .blog-details__final-title, .blog-details__comments-title { color: var(--black-color); } /* -------------------------------------------------------------------------- 7. SV Steels Chennai at a Glance — 2x2 grid layout on mobile/tablet (spec §2) -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .counterone__item { min-width: 0; border-left: 1px solid var(--border-color); border-right: none; } /* Even items get a right border to close the right edge of the grid */ .counterone .row>div:nth-child(even) .counterone__item { border-right: 1px solid var(--border-color); } /* Top row (first 2 items) gets a bottom border to act as a horizontal divider */ .counterone .row>div:nth-child(-n+2) .counterone__item { border-bottom: 1px solid var(--border-color); } } @media (max-width: 575.98px) { .counterone__number { font-size: 36px; line-height: 44px; } .counterone__text { font-size: 15px; line-height: 22px; } .counterone__item { padding: 24px 8px; } } /* ===================================================================== Blogs page — answer-first lead + FAQ block (AEO, spec §6) Content is plain visible HTML, not an accordion, so AI crawlers read the answers straight out of the DOM. ===================================================================== */ .sv-blog-lead { max-width: 900px; margin: 20px auto 0; font-family: var(--body-font); font-size: 16px; line-height: 30px; color: var(--text-secondary); text-align: center; } .sv-blog-faq { background: var(--white-color); padding-top: 0; } .sv-blog-faq__title { color: var(--black-color); font-family: var(--title-font); font-weight: 700; text-align: center; margin-bottom: 40px; } .sv-blog-faq__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .sv-blog-faq__item { background: var(--bg-color-primary); border-left: 4px solid var(--primary-color); padding: 28px 32px; } .sv-blog-faq__q { color: var(--black-color); font-family: var(--title-font); font-weight: 600; font-size: 20px; line-height: 28px; margin-bottom: 12px; } .sv-blog-faq__a { color: var(--text-secondary); font-family: var(--body-font); font-size: 16px; line-height: 28px; margin: 0; } .sv-blog-faq__a a { color: var(--primary-color); font-weight: 600; } .sv-blog-faq__a a:hover { text-decoration: underline; } @media (max-width: 991.98px) { .sv-blog-faq__list { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .sv-blog-faq__item { padding: 20px 22px; } .sv-blog-lead { font-size: 15px; line-height: 27px; } } /* Inline variant of the FAQ block, used inside a blog article body */ .sv-blog-faq--inline { margin: 48px 0; padding-top: 40px; border-top: 1px solid var(--secondary-border-color); } .sv-blog-faq--inline .sv-blog-faq__title { text-align: left; font-size: 32px; line-height: 40px; margin-bottom: 28px; } .sv-blog-faq--inline .sv-blog-faq__list { grid-template-columns: 1fr; gap: 20px; } /* the answer-first lead paragraph carries slightly more weight */ .sv-answer-first { font-weight: 500; } @media (max-width: 767.98px) { .sv-blog-faq--inline .sv-blog-faq__title { font-size: 26px; line-height: 34px; } } /* -------------------------------------------------------------------------- 8. Tab menu active/hover & Service card icon background overrides -------------------------------------------------------------------------- */ .tab-menu ul li a:hover, .tab-menu ul li a.active { background: #670D0F !important; color: var(--white-color) !important; } .service-cardone__icon, .service-cardone:hover .service-cardone__icon, .service-cardone.active .service-cardone__icon { background: #670D0F !important; } /* .servicetwo__card-icon rules live in home.css — index.html is the only page with that component and it loads home.css after this file. */ .blog-details__tags-share .blog-details__tags a { margin-right: 0; } @media (max-width: 1199.98px) { /* the template adds margin-bottom here for wrapping; row-gap now handles it */ .blog-details__tags-share .blog-details__tags a { margin-bottom: 0; } } /* -------------------------------------------------------------------------- Comment avatars — the shared placeholder image, cropped to a 96px circle. style.css sets height:96px on the wrapper but leaves the img at height:auto, so without this the placeholder renders at its own intrinsic size. -------------------------------------------------------------------------- */ .blog-details__comments .blog-details__comment-image { flex: 0 0 96px; width: 96px; height: 96px; overflow: hidden; } .blog-details__comments .blog-details__comment-image img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 575.98px) { /* the comment stacks vertically here, so the avatar shrinks with it */ .blog-details__comments .blog-details__comment-image { flex: 0 0 72px; width: 72px; height: 72px; } } /* -------------------------------------------------------------------------- Product pages — "Section Weight Chart" heading. The global h1-h6 reset in style.css sets margin:0 0 0 0 and no product stylesheet overrides it, so the title sat flush against the table box. .product-details__spec appears once per page (the weight chart), so this is scoped tightly enough not to affect other blocks. -------------------------------------------------------------------------- */ .product-details .product-details__spec h2 { margin-bottom: 28px; } @media (max-width: 991.98px) { .product-details .product-details__spec h2 { margin-bottom: 22px; } } @media (max-width: 575.98px) { .product-details .product-details__spec h2 { margin-bottom: 18px; } } /* -------------------------------------------------------------------------- Contact Page Form Send Button — Reduced Left & Right Padding Across Devices -------------------------------------------------------------------------- */ .sv-contact-btn, #contactForm #submitBtn.sv-contact-btn { width: auto !important; max-width: max-content !important; padding-left: 20px !important; padding-right: 20px !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } /* -------------------------------------------------------------------------- HOW IT WORKS Section — Centered Background Circles & Bottom Clearance The bottom padding only has to clear the decorative circles, which are absolutely positioned at top:-35px behind each card and hang 59px below the card's own box. 180px was leaving ~120px of dead white space under them before the dark MISSION GOALS band; 100px keeps a comfortable 41px below the circles and brings the gap back in line with the section's own top padding. Below 1200px the circles are display:none (see the media query further down), so there is nothing to clear and the padding simply matches .section-padding's own step for that width — 80px on tablet, 60px on phone. -------------------------------------------------------------------------- */ .wptwo, div.wptwo.section-padding { padding-bottom: 100px !important; margin-bottom: 0 !important; position: relative !important; z-index: 2 !important; overflow: visible !important; } /* Three cards over two rows at md, so the third sits alone on the second line. Bootstrap packs it to the left; centring the row leaves the full first line untouched (two col-md-6 fill it exactly) and centres the orphan. Above 1200px the cards are col-xl-4 and fill one row, below 768px they are full width — the rule is only needed in between. */ @media (min-width: 768px) and (max-width: 1199.98px) { .wptwo .row { justify-content: center; } } .wptwo .work-process, .wptwo .work-process__card { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .wptwo .work-process__shape { position: absolute !important; top: -35px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 323px !important; height: 323px !important; z-index: -1 !important; display: flex !important; justify-content: center !important; align-items: center !important; pointer-events: none !important; margin: 0 !important; } .wptwo .work-process__shape svg { display: block !important; width: 323px !important; height: 323px !important; margin: 0 auto !important; } @media (max-width: 1199.98px) { .wptwo, div.wptwo.section-padding { padding-bottom: 80px !important; } .wptwo .work-process__shape { display: none !important; } } @media (max-width: 767.98px) { .wptwo, div.wptwo.section-padding { padding-bottom: 60px !important; } } /* -------------------------------------------------------------------------- Products Page 4-Card Desktop Layout Styling -------------------------------------------------------------------------- */ .project-page .project-card { height: 100% !important; display: flex !important; flex-direction: column !important; } .project-page .project-card__content { padding: 16px 14px !important; } .project-page .project-card__title { font-size: 16px !important; line-height: 1.25 !important; } @media (min-width: 1200px) and (max-width: 1399.98px) { .project-page .project-card__title { font-size: 15px !important; } } /* -------------------------------------------------------------------------- Executive FAQ Component Styling (index.html & faq.html) -------------------------------------------------------------------------- */ .sv-faq-section { background-color: white !important; position: relative !important; } .sv-faq-card { background: #ffffff !important; border: 1px solid #eaeaea !important; border-radius: 12px !important; margin-bottom: 14px !important; overflow: hidden !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; } .sv-faq-card:hover { border-color: #dcdcdc !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important; } .sv-faq-card.active { border-left: 4px solid #670D0F !important; border-color: #e5d9ca !important; background: #ffffff !important; } .sv-faq-header { width: 100% !important; padding: 20px 24px !important; background: transparent !important; border: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; text-align: left !important; cursor: pointer !important; } .sv-faq-title { font-family: var(--title-font) !important; font-size: 18px !important; font-weight: 700 !important; color: #070707 !important; line-height: 1.35 !important; margin: 0 !important; flex: 1 !important; } .sv-faq-card.active .sv-faq-title { color: #670D0F !important; } .sv-faq-icon-box { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 50% !important; background: #f4efe9 !important; color: #670D0F !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important; } .sv-faq-card.active .sv-faq-icon-box { background: #670D0F !important; color: #ffffff !important; transform: rotate(180deg) !important; } .sv-faq-body { padding: 0 24px 22px 24px !important; font-family: var(--body-font) !important; font-size: 15px !important; color: #4C4F58 !important; line-height: 1.7 !important; } .sv-faq-cta-box { background:#ae8333; border-radius: 14px !important; padding: 32px 28px !important; color: #ffffff !important; border-left: 4px solid #AE8333 !important; margin-top: 24px !important; } .sv-faq-cta-box h4 { font-family: var(--title-font) !important; color: #ffffff !important; font-size: 22px !important; font-weight: 700 !important; margin-bottom: 10px !important; } .sv-faq-cta-box p { color: rgba(255, 255, 255, 0.78) !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 20px !important; } .sv-faq-section.section-padding { padding-top: 120px !important; padding-bottom: 0px !important; background-color: white; } @media (max-width: 1199.98px) { .sv-faq-section.section-padding { padding-top: 50px !important; padding-bottom: 50px !important; } } @media (max-width: 991.98px) { .sv-faq-section.section-padding { padding-top: 40px !important; padding-bottom: 40px !important; } } @media (max-width: 767.98px) { .sv-faq-header { padding: 16px 18px !important; } .sv-faq-title { font-size: 16px !important; } .sv-faq-body { padding: 0 18px 18px 18px !important; font-size: 14px !important; } .sv-faq-cta-box { padding: 24px 20px !important; } } @media (max-width: 575.98px) { .sv-faq-section.section-padding { padding-top: 30px !important; padding-bottom: 30px !important; } .sv-faq-header { padding: 14px 16px !important; } .sv-faq-title { font-size: 15px !important; } .sv-faq-body { padding: 0 16px 16px 16px !important; font-size: 13.5px !important; line-height: 1.6 !important; } .sv-faq-cta-box { padding: 20px 16px !important; } .sv-faq-cta-box h4 { font-size: 19px !important; } } /* -------------------------------------------------------------------------- Single blog pages (quality-steel, steel-buying-guide, steel-price-trends). Everything below is scoped to markup those three pages alone carry: .blog-details-page for the article body, and .breadcumb--blog on their banner. Listing and detail pages elsewhere on the site keep the template's own sizing. -------------------------------------------------------------------------- */ /* Banner heading. The template's 72px is pitched at two- or three-word page titles; these banners carry a full article headline, which ran to three and four lines. Scaled down across the same breakpoints the template uses. */ .breadcumb--blog .breadcumb__title { font-size: 44px; line-height: 1.2; } @media (max-width: 1199.98px) { .breadcumb--blog .breadcumb__title { font-size: 34px; line-height: 1.25; } } @media (max-width: 991.98px) { .breadcumb--blog .breadcumb__title { font-size: 30px; } } @media (max-width: 575.98px) { .breadcumb--blog .breadcumb__title { font-size: 26px; } } /* Lead image fills the article column. The template leaves the img at its intrinsic width, so a photo narrower than the column sat short of both edges. */ .blog-details-page .blog-details__thumb img { display: block; width: 100%; height: auto; } /* Share icons hidden, and the tag row's own column taken to full width so the pills use the space the icons gave up rather than leaving it blank. */ .blog-details-page .blog-details__tags-share .blog-details__share, .blog-details-page .blog-details__tags-share>.col-lg-4 { display: none; } .blog-details-page .blog-details__tags-share>.col-lg-8 { width: 100%; } @media (max-width: 1199.98px) { /* Below xl the conclusion text runs straight into the tag pills — the template's 32px was set against the desktop rhythm. */ .blog-details-page .blog-details__tags-share { margin-top: 40px; } /* The article and the sidebar stack here, and the row's gy-5 gutter (48px) lands on top of .sidebar__recent's own 2rem padding, so Recent Post sat a long way below the article. The gutter only has to separate the two columns now. */ .blog-details-page .row.gy-5 { --bs-gutter-y: 20px; } /* Same reason: the tag row is the last thing in the article column, and its .mb-5 stacked on top of that gutter. Bootstrap sets it !important. */ .blog-details-page .blog-details__tags-share.mb-5 { margin-bottom: 20px !important; } /* The pills wrap to two and three lines at these widths. The anchors are inline-block with their margins zeroed higher up in this file, so wrapped rows had only the line-height gap between them and read as one block. Laying the row out as a wrapping flex line gives a real gap in both directions. */ .blog-details-page .blog-details__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .blog-details-page .blog-details__tags span { margin-right: 0; } } /* -------------------------------------------------------------------------- Header — full-width bar. .header-layoutone .header-area__inner is a white bar inside .header-main's .container.container-xl, so it stopped at the container's right edge and left a strip of page showing beside it — ~44px at 1440px. Its left side already escapes the container (margin-left:-100px carries the angled logo band off the edge), so only the right was boxed in and the bar read as lopsided. Dropping the container's max-width and side padding lets the bar run the full viewport width. The inner keeps its own padding so the nav and the CONTACT US button never sit hard against the edge. -------------------------------------------------------------------------- */ .header-layoutone .header-main > .container, .header-layoutone .header-main > .container-xl { max-width: none; padding-left: 0; padding-right: 0; } /* Left padding is the 100px that pairs with the negative margin — untouched. */ .header-layoutone .header-area__inner { padding-right: 40px; } @media (max-width: 1199.98px) { .header-layoutone .header-area__inner { padding-right: 24px; } } @media (max-width: 575.98px) { .header-layoutone .header-area__inner { padding-right: 16px; } }