/* Theme Name: Gotche Middle East Theme URI: https://gotcheme.com Author: Devs In House Author URI: https://devsinhouse.com Description: Custom industrial website theme for Gotche Middle East. Built from Figma design with 9 sections - hero, services, testimonials, FAQ and more. Version: 1.0 License: GNU General Public License v2 or later Text Domain: gotche */ /* =================================================== GLOBAL / RESET =================================================== */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/barlow-condensed-500.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/barlow-condensed-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/manrope-400.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/manrope-500.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/manrope-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/manrope-800.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/public-sans-700.woff2') format('woff2'); } * { margin: 0; padding: 0; box-sizing: border-box; } .gotche-breadcrumbs { display: none; } /* NOTE: overflow-x must be "clip", not "hidden". "hidden" makes a scroll container and position:sticky stops working. */ html { overflow-x: hidden; overflow-x: clip; max-width: 100%; } body { font-family: 'Manrope', sans-serif; overflow-x: hidden; overflow-x: clip; max-width: 100%; } img { max-width: 100%; } a { text-decoration: none; } ul { list-style: none; } /* section wrapper - full width */ .section-pad { padding-top: 100px; padding-bottom: 100px; } /* =================================================== FULL-WIDTH SECTIONS, CONTENT CENTERED AT 1920px Background spans full width, content stays centered up to 1920px. Once the screen is wider than 1920px, extra left/right padding kicks in. =================================================== */ .hero, .feat-sec, .core, .stats, .services, .strength, .why, .faq, .testi, .story, .values, .wwd, .help, .trade, .gsrc, .licensed, .qual, .range, .rcat, .tpe, .srep, .connect, .beyond, .geoprod, .cinfo, .ctouch, .soverview, .offerings, .wchoose, .industries, .process, .committed, .cta { padding-left: calc((100% - 1920px) / 2 + 60px); padding-right: calc((100% - 1920px) / 2 + 60px); } /* when screen is smaller than 1920px, use normal 60px padding */ @media (max-width: 2040px) { .hero, .feat-sec, .core, .stats, .services, .strength, .why, .faq, .testi, .story, .values, .wwd, .help, .trade, .gsrc, .licensed, .qual, .range, .rcat, .tpe, .srep, .connect, .beyond, .geoprod, .cinfo, .ctouch, .soverview, .offerings, .wchoose, .industries, .process, .committed, .cta { padding-left: 60px; padding-right: 60px; } } /* footer main content centered up to 1920px */ .footer__main { max-width: 1920px; margin-left: auto; margin-right: auto; } /* hero__inner now takes full width (since hero itself handles centering) */ .hero__inner { max-width: 100%; } /* =================================================== HERO SECTION =================================================== */ .hero { position: relative; min-height: 660px; background-size: cover; background-position: center; background-color: #1a1a1a; padding-top: 22px; padding-bottom: 100px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%); z-index: 1; } .hero__inner { position: relative; z-index: 2; max-width: 1800px; margin: 0 auto; } .navbar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; background: #FFFFFF1A; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 14px 24px; backdrop-filter: blur(6px); } .navbar__logo { display: flex; align-items: center; } .navbar__logo img { height: 44px; width: auto; } .navbar__menu { display: flex; align-items: center; gap: 32px; } .navbar__menu li { list-style: none; } .navbar__menu a { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: 0%; color: #FFF; text-transform: uppercase; display: inline-block; transition: color 0.2s ease; } .navbar__menu a:hover { color: #D41022; } /* Active/current page link highlight (is-highlight item excluded — it always stays white/bold) */ .navbar__menu li.current-menu-item:not(.is-highlight) > a, .navbar__menu li.current_page_item:not(.is-highlight) > a, .navbar__menu li.current-menu-parent:not(.is-highlight) > a, .navbar__menu li.current_page_parent:not(.is-highlight) > a { color: #D41022; position: relative; } .navbar__menu li.current-menu-item:not(.is-highlight) > a::before, .navbar__menu li.current_page_item:not(.is-highlight) > a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #D41022; } /* Dropdown - for items that have sub-items */ .navbar__menu li { position: relative; } .navbar__menu li.menu-item-has-children > a { display: flex !important; align-items: center; } .navbar__menu li.menu-item-has-children > a::after { content: "\25BE"; /* down arrow */ font-size: 25px; line-height: 1; display: inline-flex; align-items: center; } .navbar__menu .sub-menu { position: absolute; top: 100%; left: 0; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 0; min-width: 220px; display: flex; flex-direction: column; gap: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s ease; z-index: 100; } .navbar__menu li.menu-item-has-children:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(6px); } .navbar__menu .sub-menu li { width: 100%; } .navbar__menu .sub-menu a { display: block; padding: 10px 20px; white-space: nowrap; font-size: 14px; font-weight: 500; transition: font-weight 0.15s ease; } .navbar__menu .sub-menu a:hover { color: #FFF; font-weight: 700; } /* Dropdown active-item underline — an ::after line matching the text's own width exactly (padding excluded on both sides), positioned just under the label, regardless of the anchor's own padding/box model */ .navbar__menu .sub-menu li.current-menu-item > a, .navbar__menu .sub-menu li.current_page_item > a, .navbar__menu .sub-menu li.current-menu-parent > a, .navbar__menu .sub-menu li.current_page_parent > a { position: relative; } .navbar__menu .sub-menu li.current-menu-item > a::after, .navbar__menu .sub-menu li.current_page_item > a::after, .navbar__menu .sub-menu li.current-menu-parent > a::after, .navbar__menu .sub-menu li.current_page_parent > a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 5px; border-bottom: 2px solid #D41022; } .navbar__menu .sub-menu li.current-menu-item > a::before, .navbar__menu .sub-menu li.current_page_item > a::before { display: none; }/* Mobile-only toggle button (added via JS) — hidden on desktop */ .submenu-toggle { display: none; } /* BARRELYENE INTERNATIONAL - ExtraBold white text (no box) */ .navbar__menu li.is-highlight a { font-weight: 800; color: #FFFFFF; } .navbar__menu li.is-highlight a:hover { color: #D41022; } .navbar__cta { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; background: #E10E17; border: none; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } /* desktop: collapse takes full space - menu centered, button right */ .navbar__collapse { display: flex; align-items: center; justify-content: space-between; flex: 1; margin-left: 40px; } .navbar__menu { margin: 0 auto; } .navbar__toggle { display: none; } .navbar__close { display: none; } /* =================================================== NAVBAR - SMALL LAPTOP (1024px - 1366px) compact =================================================== */ @media (min-width: 1024px) and (max-width: 1366px) { .navbar { padding: 12px 18px; } .navbar__logo img { height: 36px; } .navbar__collapse { margin-left: 24px; } .navbar__menu { gap: 20px; } .navbar__menu a { font-size: 13px; white-space: nowrap; } .navbar__cta { padding: 12px 16px; font-size: 14px; white-space: nowrap; } /* About section - laptop */ .about { gap: 45px; } .about__title { font-size: 46px; } .about__text { font-size: 15px; } /* Strength section - laptop */ .strength__inner { gap: 45px; } .strength__title { font-size: 46px; } .strength__text { font-size: 15px; } /* Footer - laptop */ .footer__col-title { font-size: 24px !important; } .footer__input .wpcf7-submit { width: 28px !important; height: 28px !important; } .footer__input .wpcf7-submit .btn-arrow { width: 14px !important; height: 14px !important; } } .hero__content { margin-top: 120px; max-width: 60%; } .hero__eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 30px; color: #FFF; text-transform: uppercase; margin-bottom: 16px; } .hero__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 70px; line-height: 70px; color: #FFF; text-transform: uppercase; margin-bottom: 24px; } .hero__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; max-width: 100%; margin-bottom: 56px; } .hero__buttons { display: flex; gap: 20px; flex-wrap: wrap; } .btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; } .btn--solid { background: #E10E17; border: 1px solid #E10E17; } .btn--outline { background: transparent; border: 1px solid #FFF; } /* ===== BUTTON ARROW ICON (one shared SVG for all buttons/cards/header/footer) ===== */ /* The old text-character arrow (↗) is hidden and an SVG arrow is shown instead. Using 'currentColor' means it automatically matches each button's text color (white or black) on its own. */ .btn-arrow { display: inline-block; width: 16px; height: 16px; font-size: 0; line-height: 0; color-scheme: normal; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.496477 0.00611268C0.784988 -0.00530029 1.11267 0.00275693 1.40492 0.0028158L3.05681 0.00288305L8.09762 0.00293361L11.7238 0.00292514L12.8776 0.00248778C13.0816 0.0024205 13.2931 -0.000901645 13.4959 0.00719761C13.614 0.0119075 13.7388 0.0674837 13.8241 0.147568C13.9417 0.258073 13.9953 0.390478 13.9974 0.551387C14.0011 0.842456 13.9988 1.13577 13.9987 1.42696L13.9987 3.08232L13.9987 8.17377V11.7665L13.9992 12.8925C13.9993 13.0914 14.0027 13.2987 13.9947 13.4968C13.9849 13.629 13.9385 13.7284 13.8497 13.8271C13.552 14.158 12.9902 13.9789 12.9296 13.5439C12.9129 13.4236 12.9216 13.2659 12.9216 13.1387L12.9216 12.491L12.9221 10.3321L12.922 4.72195L12.9222 2.84879C12.9222 2.5218 12.9288 2.16831 12.92 1.84288L7.13089 7.63062C6.96526 7.78907 6.79033 7.97099 6.627 8.13424L5.61629 9.14475L2.57497 12.1854L1.40947 13.3501L1.0833 13.6771C0.895667 13.8658 0.749211 14.039 0.453423 13.9923C0.308263 13.968 0.179028 13.8861 0.0949651 13.7654C-0.073732 13.5268 -0.00346544 13.2331 0.194052 13.0369C0.49556 12.7374 0.79547 12.436 1.09597 12.1355L2.94333 10.2883L8.48256 4.75016L11.0734 2.1597L11.7843 1.4482C11.87 1.36243 12.0731 1.14919 12.1614 1.08595C12.0511 1.07902 11.9127 1.08256 11.8008 1.08252L11.1638 1.08251L9.23712 1.08252L3.22184 1.08257L1.39499 1.08287L0.824946 1.08305C0.73375 1.08305 0.58043 1.08685 0.492725 1.07823C0.3949 1.06947 0.301416 1.03383 0.222594 0.97524C0.10665 0.888865 0.0282484 0.772716 0.00744512 0.62804C-0.0151667 0.478603 0.0240002 0.326408 0.115937 0.206433C0.217017 0.0760624 0.337546 0.026979 0.496477 0.00611268Z' fill='white'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.496477 0.00611268C0.784988 -0.00530029 1.11267 0.00275693 1.40492 0.0028158L3.05681 0.00288305L8.09762 0.00293361L11.7238 0.00292514L12.8776 0.00248778C13.0816 0.0024205 13.2931 -0.000901645 13.4959 0.00719761C13.614 0.0119075 13.7388 0.0674837 13.8241 0.147568C13.9417 0.258073 13.9953 0.390478 13.9974 0.551387C14.0011 0.842456 13.9988 1.13577 13.9987 1.42696L13.9987 3.08232L13.9987 8.17377V11.7665L13.9992 12.8925C13.9993 13.0914 14.0027 13.2987 13.9947 13.4968C13.9849 13.629 13.9385 13.7284 13.8497 13.8271C13.552 14.158 12.9902 13.9789 12.9296 13.5439C12.9129 13.4236 12.9216 13.2659 12.9216 13.1387L12.9216 12.491L12.9221 10.3321L12.922 4.72195L12.9222 2.84879C12.9222 2.5218 12.9288 2.16831 12.92 1.84288L7.13089 7.63062C6.96526 7.78907 6.79033 7.97099 6.627 8.13424L5.61629 9.14475L2.57497 12.1854L1.40947 13.3501L1.0833 13.6771C0.895667 13.8658 0.749211 14.039 0.453423 13.9923C0.308263 13.968 0.179028 13.8861 0.0949651 13.7654C-0.073732 13.5268 -0.00346544 13.2331 0.194052 13.0369C0.49556 12.7374 0.79547 12.436 1.09597 12.1355L2.94333 10.2883L8.48256 4.75016L11.0734 2.1597L11.7843 1.4482C11.87 1.36243 12.0731 1.14919 12.1614 1.08595C12.0511 1.07902 11.9127 1.08256 11.8008 1.08252L11.1638 1.08251L9.23712 1.08252L3.22184 1.08257L1.39499 1.08287L0.824946 1.08305C0.73375 1.08305 0.58043 1.08685 0.492725 1.07823C0.3949 1.06947 0.301416 1.03383 0.222594 0.97524C0.10665 0.888865 0.0282484 0.772716 0.00744512 0.62804C-0.0151667 0.478603 0.0240002 0.326408 0.115937 0.206433C0.217017 0.0760624 0.337546 0.026979 0.496477 0.00611268Z' fill='white'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; transition: transform 0.25s ease; } /* on hover, arrow rotates to point straight right (->) */ .btn:hover .btn-arrow, .navbar__cta:hover .btn-arrow, .about__btn:hover .btn-arrow, .why__btn:hover .btn-arrow, .wwd__btn:hover .btn-arrow, .red-card__btn:hover .btn-arrow, .service-card__btn:hover .btn-arrow, .strength__btn:hover .btn-arrow, .why-card__btn:hover .btn-arrow, .story__btn:hover .btn-arrow, .ctouch__btn:hover .btn-arrow, .soverview__btn:hover .btn-arrow, .process__btn:hover .btn-arrow, .committed__btn:hover .btn-arrow, .offer-card__btn:hover .btn-arrow, .wchoose-card__btn:hover .btn-arrow { transform: rotate(45deg); } /* =================================================== SECTION 2 - FEATURES + RED CARD =================================================== */ .feat-sec { position: relative; padding-top: 100px; padding-bottom: 100px; } /* wrapper centered up to 1920px — the Red Card is positioned inside this, so it will never overflow outside */ .feat-sec__inner { max-width: 1920px; margin-left: auto; margin-right: auto; position: relative; } .features { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; padding-right: 400px; } /* icon left, text right */ .feature { display: flex; align-items: flex-start; gap: 16px; text-decoration: none; color: inherit; } .feature__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 12px; } .feature__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #3B3B3B; } .red-card { position: absolute; top: -95px; right: 60px; width: 300px; min-height: 320px; background: #D41022; border-radius: 20px; padding: 26px; overflow: hidden; z-index: 5; } .red-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 36px; color: #F7F9FB; text-transform: uppercase; position: relative; z-index: 2; } .red-card__title small { display: block; font-size: 20px; } .red-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px; color: #FFF; margin: 12px 0 18px; max-width: 160px; position: relative; z-index: 2; } .red-card__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; color: #FFF; background: #D41022; border: 1px solid #FFF; padding: 9px 18px; border-radius: 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 3; } .red-card__img { position: absolute; right: -6px; bottom: 0; height: 230px; z-index: 1; } /* image left (narrow) + text right (wide), top aligned */ .about { display: grid; grid-template-columns: 42fr 58fr; gap: 60px; align-items: start; margin-top: 0; } /* image wrapper - for the red corner accent */.about__imgwrap { position: relative; padding-top: 30px; padding-left: 30px; } .about__corner { position: absolute; top: 0; left: 0; width: 120px; height: 120px; z-index: 2; border-top: 26px solid #D41022; border-left: 26px solid #D41022; border-top-left-radius: 10px; } .about__imgwrap { aspect-ratio: 1 / 1; } .about__image { width: 100%; height: 100%; display: block; position: relative; z-index: 1; border-radius: 14px; object-fit: cover; } /* text column */ .about__content { padding-top: 20px; } .about__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 58px; line-height: 1.05; letter-spacing: -0.5px; color: #202020; text-transform: uppercase; margin-bottom: 28px; max-width: 100%; } .about__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75; color: #3B3B3B; margin-bottom: 22px; } .about__text:last-child { margin-bottom: 0; } /* =================================================== SECTION 3 - CORE DRIVING (dark) =================================================== */ .core { position: relative; background-color: #111; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .core__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .core__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .core__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 24px; } .core__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; max-width: 560px; margin-bottom: 40px; } .info-card { display: flex; align-items: flex-start; gap: 22px; border-radius: 16px; padding: 26px 28px; margin-bottom: 20px; } .info-card--solid { background: #332D2D; } .info-card--outline { background: transparent; border: 3px solid #222222; } .info-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 8px; } .info-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #FFF; } .core__image { width: 100%; border-radius: 24px; display: block; } /* =================================================== SECTION 4 - STATS =================================================== */ .stats { background: #FFF; padding-top: 50px; padding-bottom: 50px; } /* slider viewport */ .stats__slider { overflow: hidden; position: relative; } /* left aur right pe white fade (solid, no blur patch) */ .stats__slider::before, .stats__slider::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; } .stats__slider::before { left: 0; background: linear-gradient(90deg, #FFFFFF 40%, rgba(255,255,255,0) 100%); } .stats__slider::after { right: 0; background: linear-gradient(270deg, #FFFFFF 40%, rgba(255,255,255,0) 100%); } .stats__track { display: flex; width: max-content; animation: statsSlide 25s linear infinite; } .stats__track:hover { animation-play-state: paused; } .stat { flex: 0 0 auto; width: 320px; text-align: center; } @keyframes statsSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .stat__number { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 70px; color: #202020; margin-bottom: 4px; } .stat__number--red { color: #D41022; } .stat__label { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: #202020; } /* =================================================== SECTION 5 - OUR SERVICES (dark) =================================================== */ .services { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .services__head { text-align: center; max-width: 800px; margin: 0 auto 60px; } .services__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .services__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 20px; } .services__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; } .services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; } .service-card { background: #332D2D; border-radius: 16px; padding: 34px 32px 40px; display: flex; flex-direction: column; } .service-card__icon { width: 64px; height: 64px; margin-bottom: 26px; } .service-card__icon img { width: 100%; height: 100%; object-fit: contain; } .service-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 14px; } .service-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; color: #F8F8F8; margin-bottom: 24px; } /* Home service cards: same style as the hero button (.btn .btn--solid) */ .service-card__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; background: #E10E17; border: 1px solid #E10E17; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; align-self: flex-start; margin-top: auto; } /* =================================================== SECTION 4 - STRENGTH (text left + image right) =================================================== */ .strength { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .strength__inner { max-width: 1920px; margin: 0 auto; display: grid; grid-template-columns: 55fr 45fr; gap: 70px; align-items: start; } .strength__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 58px; line-height: 1.05; letter-spacing: -0.5px; color: #202020; text-transform: uppercase; margin-bottom: 28px; max-width: 100%; } .strength__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75; color: #3B3B3B; margin-bottom: 22px; } /* button - same as hero button */ .strength__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; background: #E10E17; border: 1px solid #E10E17; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-top: 14px; } .strength__imgwrap { position: relative; } .strength__image { width: 100%; display: block; border-radius: 14px; object-fit: cover; } /* =================================================== SECTION 5 - WHY CHOOSE (dark) =================================================== */ .why { position: relative; background-color: #0D0D0D; background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 100px; padding-bottom: 100px; } .why__grid { position: relative; z-index: 2; max-width: 1920px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; align-items: start; } /* left side sticks while cards scroll */ .why__intro { padding-top: 10px; position: sticky; top: 50px; align-self: start; } .why__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 58px; line-height: 1.05; letter-spacing: -0.5px; color: #FFF; text-transform: uppercase; margin-bottom: 22px; } .why__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #D8D8D8; margin-bottom: 32px; } /* button - same as hero button */ .why__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; background: #E10E17; border: 1px solid #E10E17; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } /* cards - stacked in one column, icon left */ .why__cards { display: flex; flex-direction: column; gap: 18px; } .why-card { display: grid; grid-template-columns: 60px 1fr; gap: 22px; align-items: start; background: transparent; border: 3px solid #222222; border-radius: 14px; padding: 26px 28px; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .why-card:hover { background: #332D2D; border-color: #332D2D; } .why-card__icon { width: 54px; height: 54px; flex-shrink: 0; } .why-card__icon img, .why-card__icon svg { width: 100%; height: 100%; object-fit: contain; transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .why-card:hover .why-card__icon img { filter: brightness(0) invert(1); } .why-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 10px; } .why-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; color: #C9C9C9; margin: 0; } /* =================================================== SECTION 7 - FAQ (dark) =================================================== */ .faq { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } /* light variant - white background, no background image (Product Range page) */ .faq--light { background-color: #FFF; background-image: none !important; } .faq--light .faq__title { color: #202020; } .faq--light .faq__text { color: #3B3B3B; } .faq--light .acc { border-color: #C2C2C2; } .faq--light .acc__q { color: #202020; } .faq--light .acc__arrow { color: #202020; } .faq--light .acc__answer { color: #3B3B3B; } .faq__head { text-align: center; max-width: 800px; margin: 0 auto 50px; } .faq__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .faq__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 18px; } .faq__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; } .faq__grid { columns: 2; column-gap: 24px; max-width: 1400px; margin: 0 auto; } .acc { break-inside: avoid; margin-bottom: 24px; } .acc { border: 1px solid #C2C2C2; border-radius: 12px; background: transparent; overflow: hidden; display: flex; flex-direction: column; } .acc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; cursor: pointer; user-select: none; flex: 1; min-height: 112px; box-sizing: border-box; } .acc__q { font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 22px; line-height: 34px; color: #FFF; } .acc__arrow { flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); color: #FFF; } .acc.open .acc__arrow { transform: rotate(180deg); } .acc__body { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .acc__answer { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #F5F5F5; padding: 0 26px 24px; } /* =================================================== SECTION 8 - TESTIMONIALS =================================================== */ /* =================================================== SERVICES/CONTACT PAGE - WHAT WE CAN HELP WITH =================================================== */ .help { background: #FFF; padding-top: 100px; padding-bottom: 40px; } .help__head { text-align: center; max-width: 700px; margin: 0 auto 50px; } .help__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 14px; } .help__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1.1; color: #202020; text-transform: uppercase; } .help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .help-card { background: #FFFFFF; border-radius: 16px; padding: 34px 32px; box-shadow: 0px 4px 15.9px 0px #00000026; } .help-card__icon { width: 64px; height: 64px; margin-bottom: 20px; } .help-card__icon img { width: 100%; height: 100%; object-fit: contain; } .help-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 14px; } .help-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #3B3B3B; margin-bottom: 24px; } /* Home page - all body/paragraph text set to 18px/26px (scoped via WP's automatic body.home class) */ body.home .about__text, body.home .services__text, body.home .service-card__text, body.home .strength__text, body.home .why__text, body.home .why-card__text, body.home .mvp-card__text, body.home .testi__text, body.home .faq__text, body.home .cta__text { font-size: 18px; line-height: 26px; } /* About Us page - ALL body/paragraph text (including every card's text) set to 18px/26px, scoped via WordPress's automatic body.page-template-page-about class */ body.page-template-page-about .story__text, body.page-template-page-about .wwd__text, body.page-template-page-about .wwd-card__text, body.page-template-page-about .values__text, body.page-template-page-about .value-card__text, body.page-template-page-about .services__text, body.page-template-page-about .service-card__text, body.page-template-page-about .why__text, body.page-template-page-about .why-card__text, body.page-template-page-about .stat__label, body.page-template-page-about .testi__text, body.page-template-page-about .faq__text, body.page-template-page-about .cta__text { font-size: 18px; line-height: 26px; } /* Contact Us page - ALL body/paragraph text (including every card's text) set to 18px/26px, scoped via WordPress's automatic body.page-template-page-contact class */ body.page-template-page-contact .cinfo-card__text, body.page-template-page-contact .ctouch__text, body.page-template-page-contact .help-card__text, body.page-template-page-contact .industries__text, body.page-template-page-contact .why__text, body.page-template-page-contact .why-card__text, body.page-template-page-contact .commit-top__text, body.page-template-page-contact .testi__text, body.page-template-page-contact .faq__text, body.page-template-page-contact .cta__text { font-size: 18px; line-height: 26px; } /* Product Range page - ALL body/paragraph text (including every card's text) set to 18px/26px, scoped via WordPress's automatic body.page-template-page-product-range class */ body.page-template-page-product-range .range__text, body.page-template-page-product-range .mvp-card__text, body.page-template-page-product-range .rcat__text, body.page-template-page-product-range .rcat__row-name, body.page-template-page-product-range .rcat__row-value, body.page-template-page-product-range .offerings__text, body.page-template-page-product-range .offer-tabs__text, body.page-template-page-product-range .values__text, body.page-template-page-product-range .value-card__text, body.page-template-page-product-range .qual__text, body.page-template-page-product-range .faq__text, body.page-template-page-product-range .cta__text { font-size: 18px; line-height: 26px; } /* Geotextile Service page - ALL body/paragraph text (including every card's text) set to 18px/26px, scoped via WordPress's automatic body.page-template-page-geotextile-service class */ body.page-template-page-geotextile-service .qual__text, body.page-template-page-geotextile-service .mvp-card__text, body.page-template-page-geotextile-service .geoprod__text, body.page-template-page-geotextile-service .values__text, body.page-template-page-geotextile-service .value-card__text, body.page-template-page-geotextile-service .testi__text, body.page-template-page-geotextile-service .faq__text, body.page-template-page-geotextile-service .cta__text { font-size: 18px; line-height: 26px; } /* Service Detail template (currently used by Chemical Trading) - ALL body/paragraph text (including every card's text) set to 18px/26px, scoped via WordPress's automatic body.page-template-page-service-detail class. Applies to any page using this template, not just Chemical Trading. */ body.page-template-page-service-detail .story__text, body.page-template-page-service-detail .wwd-card__text, body.page-template-page-service-detail .trade__text, body.page-template-page-service-detail .gsrc__text, body.page-template-page-service-detail .licensed__text, body.page-template-page-service-detail .licensed-item__text, body.page-template-page-service-detail .qual__text, body.page-template-page-service-detail .connect__text, body.page-template-page-service-detail .beyond__text, body.page-template-page-service-detail .beyond-item__text, body.page-template-page-service-detail .why__text, body.page-template-page-service-detail .why-card__text, body.page-template-page-service-detail .testi__text, body.page-template-page-service-detail .faq__text, body.page-template-page-service-detail .cta__text { font-size: 18px; line-height: 26px; } /* "Why Choose Industrial Service" (Home page) - icons keep their color on hover */ .why--home .why-card:hover .why-card__icon img { filter: none; } /* "Who You Are Contacting" (Contact page) - full width text, icons keep their color on hover */ .why--who .why__text { max-width: 100%; } .why--who .why-card:hover .why-card__icon img { filter: none; } /* "Why Choose With Us" (Services page) - icons keep their color on hover */ .why--wcw .why-card:hover .why-card__icon img { filter: none; } .why--wcw .why__text, .why--wcw .why-card__text { font-size: 18px; line-height: 26px; } /* "Why Buyers Choose Us" (Service Detail page) - full width text, icons keep their color on hover */ .why--byr .why__text { max-width: 100%; margin-bottom: 22px; } .why--byr .why__text:last-child { margin-bottom: 0; } .why--byr .why-card:hover .why-card__icon img { filter: none; } .why--byr .why-card__text { font-size: 16px; line-height: 25.39px; } /* "Why Work With Us" (Engineering page) - same treatment as Contact page's "Who You Are Contacting": outlined cards that fill on hover, full width text, icons keep their color on hover */ .why--wwu .why__text { max-width: 100%; font-size: 18px; line-height: 26px; margin-bottom: 22px; } .why--wwu .why__text:last-child { margin-bottom: 0; } .why--wwu .why-card:hover .why-card__icon img { filter: none; } .why--wwu .why-card__text { font-size: 18px; line-height: 26px; } /* "Committed to High Quality" block - top of Testimonials (Contact page) */ .commit-top__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 70px; } .commit-top__imgwrap { position: relative; height: 460px; } .commit-top__image { width: 100%; height: 100%; display: block; border-radius: 14px; object-fit: cover; } .commit-top__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 20px; } .commit-top__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin-bottom: 18px; } .testi { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .testi__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; } .testi__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .testi__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .testi__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; } .testi__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; height: 560px; overflow: hidden; position: relative; padding: 0 20px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); } .col__track { display: flex; flex-direction: column; gap: 24px; } .col--up .col__track { animation: scrollUp 22s linear infinite; } .col--down .col__track { animation: scrollDown 22s linear infinite; } @keyframes scrollUp { 0%{transform:translateY(0);} 100%{transform:translateY(-50%);} } @keyframes scrollDown { 0%{transform:translateY(-50%);} 100%{transform:translateY(0);} } .testi__cols:hover .col__track { animation-play-state: paused; } .rev { background: #FFF; backdrop-filter: blur(17px); box-shadow: 0px 4px 13.1px 0px #00000040; border-radius: 16px; padding: 26px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .rev:hover { transform: translateY(-6px); box-shadow: 0px 10px 26px 0px #00000055; } .rev__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .rev__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .rev__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 24px; color: #202020; } .rev__stars { color: #F5A623; font-size: 15px; letter-spacing: 2px; margin-top: 4px; } .rev__body { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #3B3B3B; margin-bottom: 18px; } .rev__author { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; color: #202020; } .rev__role { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 16px; line-height: 24px; color: #3B3B3B; } /* =================================================== MISSION / VISION / PASSION CARDS (top of Testimonials) =================================================== */ .mvp__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 70px; } .mvp-card { background: #FFFFFF; border: 2px solid #E6E6E6; border-radius: 12px; padding: 40px 32px; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mvp-card:not(.mvp-card--featured):hover { background: #D41022; border-color: #D41022; } .mvp-card__icon { width: 54px; height: 54px; margin-bottom: 24px; } .mvp-card__icon img, .mvp-card__icon svg { width: 100%; height: 100%; object-fit: contain; transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mvp-card:not(.mvp-card--featured):hover .mvp-card__icon img { filter: brightness(0) invert(1); } .mvp-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 16px; transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mvp-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #3B3B3B; margin: 0; transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mvp-card:not(.mvp-card--featured):hover .mvp-card__title, .mvp-card:not(.mvp-card--featured):hover .mvp-card__text { color: #FFFFFF; } .mvp-card--featured { background: #D41022; border-color: #D41022; } .mvp-card--featured .mvp-card__title, .mvp-card--featured .mvp-card__text { color: #FFFFFF; } .mvp-card--featured .mvp-card__icon img { filter: brightness(0) invert(1); } /* =================================================== SECTION 9 - FOOTER =================================================== */ .footer { /* -1px pulls the footer up over the sub-pixel seam, otherwise the white body background shows as a 1px hairline between the last section and the footer */ margin-top: -1px; position: relative; background-color: #141414; background-repeat: repeat-x; background-size: 50% auto; background-position: left center; } .footer__main { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr 1.3fr; gap: 40px; padding: 70px 60px; } .footer__logo { width: 190px; margin-bottom: 22px; } .footer__logo-link { display: inline-block; } .footer__about { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -0.3px; color: #FFF; margin-bottom: 26px; max-width: 300px; } .footer__contact { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .footer__contact svg { flex-shrink: 0; } .footer__contact span { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 19px; color: #FFF; transition: color 0.2s ease; } .footer__contact:hover span { color: #D41022; } .footer__col-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 19px; color: #FFF; text-transform: uppercase; margin-bottom: 30px; } .footer__links li { margin-bottom: 20px; } .footer__links a { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 19px; color: #FFF; transition: color 0.2s ease; } .footer__links a:hover { color: #D41022; } /* Active/current page footer link highlight */ .footer__links li.current-menu-item > a, .footer__links li.current_page_item > a, .footer__links li.current-menu-parent > a, .footer__links li.current_page_parent > a { color: #D41022; } .footer__news-text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #FFF; margin-bottom: 30px; max-width: 260px; } .footer__input { display: flex; align-items: center; border-bottom: 2px solid #D41022; padding-bottom: 10px; max-width: 300px; } .footer__input input { flex: 1; background: transparent; border: none; outline: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 22px; color: #FFF; text-transform: uppercase; } .footer__input input::placeholder { color: #FFF; opacity: 0.9; } .footer__input button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #FFF; background: #FFF; color: #D41022; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 20px; flex-shrink: 0; } .footer__input button .btn-arrow { background-color: #D41022; } .footer__input button:hover { background: #D41022; border-color: #D41022; color: #FFF; } .footer__input button:hover .btn-arrow { background-color: #FFF; transform: rotate(45deg); } /* Newsletter CF7 form — real container is .nl-row (email + button side by side), not .wpcf7-form itself. wpautop wraps each field in its own

, so those get flattened to avoid extra spacing. */ .footer__input .wpcf7-form { width: 100%; } .footer__input .nl-row { display: flex; align-items: center; width: 100%; } .footer__input .nl-row p { margin: 0; flex: 1 1 auto; min-width: 0; } .footer__input .wpcf7-form-control-wrap { display: block; position: relative; width: 100%; } .footer__input input.wpcf7-form-control { width: 100%; background: transparent; border: none; outline: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 22px; color: #FFF; text-transform: uppercase; padding: 0; } .footer__input input.wpcf7-form-control::placeholder { color: #FFF; opacity: 0.9; } .footer__input .nl-submit { flex-shrink: 0; margin-left: 10px; } .footer__input .nl-submit p { margin: 0; } .footer__input .wpcf7-submit { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #FFF; background: #FFF; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; } .footer__input .wpcf7-submit .btn-arrow { background-color: #D41022; } .footer__input .wpcf7-submit:hover { background: #D41022; border-color: #D41022; } .footer__input .wpcf7-submit:hover .btn-arrow { background-color: #FFF; } .footer__input .wpcf7-not-valid-tip { position: absolute; top: 100%; left: 0; margin-top: 4px; color: #ffb3b3; font-size: 12px; white-space: nowrap; } .footer__input .wpcf7-response-output { display: block; color: #FFF; font-size: 13px; margin-top: 10px; border: none; padding: 0; width: 100%; } .footer__input .wpcf7-response-output[aria-hidden="true"] { margin-top: 0; } .footer__input .wpcf7-form fieldset { border: none; padding: 0; margin: 0; } /* CF7's default stylesheet only loads on the Contact page, so this screen-reader-only element (meant to be invisible to sighted users, present only for accessibility) is never hidden anywhere else. Restore the standard visually-hidden treatment sitewide. */ .screen-reader-response { position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; word-wrap: normal !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } .footer__bottom { background: #FFF; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; padding-left: calc((100% - 1920px) / 2 + 60px); padding-right: calc((100% - 1920px) / 2 + 60px); } @media (max-width: 2040px) { .footer__bottom { padding-left: 60px; padding-right: 60px; } } .footer__copy { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 100%; color: #202020; } .footer__brand { height: 26px; width: auto; display: block; } /* =================================================== ABOUT PAGE - OUR STORY =================================================== */ .story { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .story__top { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .story__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .story__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .story__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; color: #3B3B3B; margin-bottom: 18px; } .story__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: #FFF; background: #D41022; border: none; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; } /* image + red corner (top-right) */ .story__imgwrap { position: relative; padding-top: 30px; padding-right: 30px; aspect-ratio: 1 / 1; }.story__corner { position: absolute; top: 0; right: 0; width: 90px; height: 90px; z-index: 2; border-top: 22px solid #D41022; border-right: 22px solid #D41022; border-top-right-radius: 10px; } .story__image { width: 100%; height: 100%; border-radius: 16px; display: block; position: relative; z-index: 1; object-fit: cover; } /* Mission / Vision cards */ .story__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 60px; } .story-card { display: flex; align-items: flex-start; gap: 20px; background: #FFF; border-radius: 16px; padding: 28px 30px; box-shadow: 0px 4px 13.1px 0px #00000026; } .story-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 32px; color: #202020; text-transform: uppercase; margin-bottom: 8px; } .story-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 15px; line-height: 22px; color: #3B3B3B; } /* =================================================== ABOUT PAGE - WHAT WE DO (dark, text+image, then 3 cards) =================================================== */ .wwd { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .wwd__top { max-width: 1920px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 50px; } .wwd__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 24px; } .wwd__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; color: #D8D8D8; margin-bottom: 18px; } .wwd__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; background: #E10E17; border: 1px solid #E10E17; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-top: 14px; } .wwd__imgwrap { position: relative; } .wwd__imgwrap { aspect-ratio: 1 / 1; } .wwd__image { width: 100%; height: 100%; display: block; border-radius: 14px; object-fit: cover; } .wwd__cards { max-width: 1920px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .wwd-card { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 32px 28px; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .wwd-card:hover { background: #222222; border-color: #222222; } .wwd-card__icon { width: 48px; height: 48px; margin-bottom: 18px; } .wwd-card__icon img, .wwd-card__icon svg { width: 100%; height: 100%; object-fit: contain; } .wwd-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 16px; } .wwd-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #C9C9C9; margin: 0; } /* =================================================== SERVICE DETAIL PAGE - WHAT WE TRADE (dark, 6 cards, reuses .wwd-card) =================================================== */ .trade { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .trade__head { text-align: center; max-width: 700px; margin: 0 auto 50px; } .trade__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 16px; } .trade__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; } .trade__cta { text-align: center; margin-top: 50px; } /* =================================================== SERVICE DETAIL PAGE - GLOBAL SOURCING (light, text+image, no corner) =================================================== */ .gsrc { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .gsrc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .gsrc__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .gsrc__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin-bottom: 18px; } .gsrc__imgwrap { position: relative; } .gsrc__imgwrap { aspect-ratio: 1 / 1; } .gsrc__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; } /* =================================================== SERVICE DETAIL PAGE - LICENSED HANDLING AND STORAGE (dark, text+image, then 4 icon-items) =================================================== */ .licensed { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .licensed__top { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-bottom: 60px; } .licensed__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 24px; } .licensed__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; margin-bottom: 18px; } .licensed__imgwrap { position: relative; } .licensed__imgwrap { aspect-ratio: 1 / 1; } .licensed__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; } .licensed__items { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; text-align: center; } .licensed-item__icon { width: 44px; height: 44px; margin: 0 auto 18px; } .licensed-item__icon img { width: 100%; height: 100%; object-fit: contain; } .licensed-item__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 10px; } .licensed-item__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; margin: 0; } /* =================================================== SERVICE DETAIL PAGE - QUALITY (image left + text right, with button) =================================================== */ .qual { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .qual__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } /* text is first in the HTML (so mobile stacks text on top), but sits right on desktop */ .qual__content { order: 2; } .qual__imgwrap { order: 1; position: relative; } .qual__imgwrap { aspect-ratio: 1 / 1; } .qual__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; }.qual__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .qual__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin-bottom: 18px; } .qual__btn { margin-top: 14px; } /* Geotextile page: image+text block followed by the 3 cards in the same section */ .qual--geom .qual__grid { margin-bottom: 70px; } .qual--geom .mvp__grid { margin-bottom: 0; } /* dark variant - used on Product Range's "Sourcing And Availability" (with background image) */ .qual--dark { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; background-repeat: no-repeat; } .qual--dark .qual__title { color: #FFF; } .qual--dark .qual__text { color: #C9C9C9; } /* =================================================== PRODUCT RANGE PAGE - HOW OUR RANGE IS ORGANISED (centered head, then 6 cards reusing .mvp-card, 2nd card permanently red) =================================================== */ .range { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .range__head { text-align: center; max-width: 700px; margin: 0 auto 50px; } .range__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 16px; } .range__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; } /* 3 columns x 2 rows instead of the default 3-column single row */ .mvp__grid--range { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; } /* =================================================== PRODUCT RANGE PAGE - CATEGORIES (repeatable: dark, image left + text right, then an Applications spec table) =================================================== */ .rcat { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 100px; padding-bottom: 100px; } /* light variant - white background, no background image, dark text */ .rcat--light { background-color: #FFF; background-image: none !important; } .rcat--light .rcat__title, .rcat--light .rcat__apps-title { color: #202020; } .rcat--light .rcat__text { color: #3B3B3B; } .rcat--light .rcat__row-name, .rcat--light .rcat__row-value { color: #202020; } .rcat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; } .rcat--img-left .rcat__imgwrap { order: 1; } .rcat--img-left .rcat__content { order: 2; } .rcat--img-right .rcat__imgwrap { order: 2; } .rcat--img-right .rcat__content { order: 1; } .rcat__imgwrap { position: relative; } .rcat__imgwrap { aspect-ratio: 1 / 1; } .rcat__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; } .rcat__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 20px; } .rcat__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; margin-bottom: 18px; } .rcat__text:last-of-type { margin-bottom: 0; } .rcat__apps { margin-top: 28px; } .rcat__apps-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 14px; } .rcat__table { border-top: 1px solid #7E7E7E; } .rcat__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #7E7E7E; } .rcat__row-name, .rcat__row-value { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #F5F5F5; } .rcat__row-value { text-align: right; flex-shrink: 0; } .rcat__btn { margin-top: 28px; } /* =================================================== SERVICE DETAIL PAGE - CONNECTING MANUFACTURING (dark, text left + image right) =================================================== */ .connect { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .connect__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .connect__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 24px; } .connect__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; margin-bottom: 18px; } .connect__imgwrap { position: relative; } .connect__imgwrap { aspect-ratio: 1 / 1; } .connect__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; } /* =================================================== SERVICE DETAIL PAGE - BEYOND CHEMICAL TRADING (heading left + text right, then 4 icon items, then centered button) =================================================== */ .beyond { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .beyond__head { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-bottom: 60px; } .beyond__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin: 0; } .beyond__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin: 0; } .beyond__items { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; align-items: start; } .beyond-item__icon { width: 48px; height: 48px; margin-bottom: 18px; } .beyond-item__icon img { width: 100%; height: 100%; object-fit: contain; } .beyond-item__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 12px; } .beyond-item__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #3B3B3B; margin: 0; } .beyond__cta { text-align: center; margin-top: 60px; } /* =================================================== GEOTEXTILE PAGE - PRODUCTS (repeatable: image + text, then Applications / Key Benefits columns, then button) Theme (dark/light) and image side (left/right) alternate per item. =================================================== */ .geoprod { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 100px; padding-bottom: 100px; } .geoprod--dark { background-color: #0d0d0d; } .geoprod--light { background-color: #FFF; } .geoprod__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .geoprod--img-left .geoprod__imgwrap { order: 1; } .geoprod--img-left .geoprod__content { order: 2; } .geoprod--img-right .geoprod__imgwrap { order: 2; } .geoprod--img-right .geoprod__content { order: 1; } .geoprod__imgwrap { position: relative; } .geoprod__imgwrap { aspect-ratio: 1 / 1; } .geoprod__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; } .geoprod__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; text-transform: uppercase; margin-bottom: 18px; } .geoprod--dark .geoprod__title { color: #FFF; } .geoprod--light .geoprod__title { color: #202020; } .geoprod__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; margin-bottom: 28px; } .geoprod--dark .geoprod__text { color: #C9C9C9; } .geoprod--light .geoprod__text { color: #3B3B3B; } .geoprod__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 32px; } .geoprod__col-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; text-transform: uppercase; margin-bottom: 16px; letter-spacing: 0.3px; } .geoprod--dark .geoprod__col-title { color: #FFF; } .geoprod--light .geoprod__col-title { color: #202020; } .geoprod__list { display: flex; flex-direction: column; gap: 12px; } .geoprod__list li { display: flex; align-items: flex-start; gap: 10px; } .geoprod__list .check-bullet { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; } .geoprod__list span { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; } .geoprod--dark .geoprod__list span { color: #C9C9C9; } .geoprod--light .geoprod__list span { color: #3B3B3B; } .geoprod__btn { margin-top: 4px; } /* "Build More With Less Material & Less Impact" (Geotextile page) - no button in the intro. .values normally sits nested inside .testi elsewhere (About page), so it has no section-level padding of its own by default. Here it's a standalone section, so it needs one. */ .values--geob { padding-top: 100px; } .values--geob .values__intro { padding-top: 10px; } /* =================================================== ABOUT PAGE - CORE VALUES (light, shown at top of Testimonials) =================================================== */ .values__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; margin-bottom: 70px; } .values__intro { position: sticky; top: 50px; align-self: start; } .values__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .values__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; color: #3B3B3B; width: 100%; } .values__list { display: flex; flex-direction: column; gap: 16px; } .value-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border: 1px solid #E6E6E6; border-radius: 14px; padding: 24px 28px; background: #FFFFFF; transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1); color: inherit; } .value-card:hover { background: #D41022; border-color: #D41022; } .value-card__icon { width: 44px; height: 44px; flex-shrink: 0; } .value-card__icon img { width: 100%; height: 100%; object-fit: contain; transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .value-card:hover .value-card__icon img { filter: brightness(0) invert(1); } .value-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 6px; transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .value-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 15px; line-height: 22px; color: #3B3B3B; transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .value-card:hover .value-card__title, .value-card:hover .value-card__text { color: #FFFFFF; } /* Featured card - permanently red (not just on hover). Used only where a specific card is meant to stand out on sight rather than on interaction. */ .value-card--featured { background: #D41022; border-color: #D41022; } .value-card--featured .value-card__icon img { filter: brightness(0) invert(1); } .value-card--featured .value-card__title, .value-card--featured .value-card__text { color: #FFFFFF; } /* "Application And Sectors We Supply" (Product Range page) - standalone section, so it needs its own top/bottom padding like other pages' sections. */ .values--appsec { padding-top: 100px; padding-bottom: 100px; } /* =================================================== ENGINEERING PAGE - THIRD-PARTY ENGINEERING (light wrapper; reuses .values__grid / .value-card from Core Values) =================================================== */ .tpe { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .tpe .values__grid { margin-bottom: 0; } /* body text convention (18/26) + spacing between the stacked paragraphs */ .tpe .values__text { font-size: 18px; line-height: 26px; margin-bottom: 22px; } .tpe .values__text:last-child { margin-bottom: 0; } .tpe .value-card__text { font-size: 18px; line-height: 26px; } /* body text convention (18/26) + spacing between the stacked paragraphs */ .tpe .values__text { font-size: 18px; line-height: 26px; margin-bottom: 22px; } .tpe .values__text:last-child { margin-bottom: 0; } .tpe .value-card__text { font-size: 18px; line-height: 26px; } /* =================================================== ENGINEERING PAGE - STRUCTURAL REPAIRING (light; image left + text right, then 3 centered icon items) =================================================== */ .srep { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .srep__top { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-bottom: 70px; } /* text is first in the HTML (so mobile stacks text on top), but sits right on desktop */ .srep__content { order: 2; } .srep__imgwrap { order: 1; position: relative; } .srep__imgwrap { aspect-ratio: 1 / 1; } .srep__image { width: 100%; height: 100%; display: block; border-radius: 16px; object-fit: cover; }.srep__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .srep__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin-bottom: 18px; } .srep__text:last-child { margin-bottom: 0; } .srep__items { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; text-align: center; } .srep-item__icon { width: 48px; height: 48px; margin: 0 auto 18px; } .srep-item__icon img { width: 100%; height: 100%; object-fit: contain; } .srep-item__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 12px; } .srep-item__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin: 0; } /* =================================================== CONTACT PAGE - INFO CARDS =================================================== */ .cinfo { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .cinfo__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .cinfo-card { background: #FFF; border-radius: 16px; padding: 40px 30px; box-shadow: 0px 4px 17px 0px #00000026; text-align: center; text-decoration: none; color: inherit; display: block; } .cinfo-card__icon { width: 80px; height: 80px; border-radius: 50%; background: #FDE8EA; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .cinfo-card__icon svg, .cinfo-card__icon img { width: 40px; height: 40px; } .cinfo-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #202020; text-transform: uppercase; margin-bottom: 12px; } .cinfo-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25.39px; color: #3B3B3B; text-align: center; } /* =================================================== CONTACT PAGE - GET IN TOUCH (form + map) =================================================== */ .ctouch { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; } .ctouch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } /* Left form box */ .ctouch__form { background: #332D2D; border-radius: 16px; padding: 40px; } .ctouch__form-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 28px; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cform__field { margin-bottom: 20px; display: flex; flex-direction: column; } .cform__field label { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 16px; line-height: 32px; color: #FFF; margin-bottom: 6px; } .cform__field input, .cform__field textarea, .ctouch__form input.wpcf7-form-control, .ctouch__form textarea.wpcf7-form-control { background: transparent; border: 0.5px solid #FFFFFF; border-radius: 5px; padding: 12px 14px; color: #FFF; font-family: 'Manrope', sans-serif; font-size: 15px; outline: none; width: 100%; } .cform__field textarea, .ctouch__form textarea.wpcf7-form-control { resize: vertical; height: 110px; min-height: 90px; max-height: 260px; } /* CF7 form layout */ .ctouch__form .wpcf7-form label { display: block; font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 16px; color: #FFF; margin-bottom: 2px; line-height: 26px; } .ctouch__form .wpcf7-form-control-wrap { display: block; margin-top: 8px; } .ctouch__form .wpcf7-form p { margin: 0 0 20px; } .ctouch__form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ctouch__form .cf-row .cf-col { margin-bottom: 20px; } .ctouch__form .cf-submit { text-align: center; margin: 10px 0 0; display: flex !important; justify-content: center !important; align-items: center; width: 100% !important; } .ctouch__form .cf-submit .wpcf7-form-control-wrap { flex: 0 0 auto !important; width: auto !important; } .ctouch__form .cf-submit .wpcf7-spinner { position: absolute !important; } /* submit button - matches design (centered, red pill) - stronger */ .ctouch__form .cf-submit p { width: 100% !important; margin: 0 !important; } button.wpcf7-submit.btn.btn--solid { display: flex !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; justify-content: center !important; align-items: center !important; } .ctouch__form .cf-submit { text-align: center; margin: 10px 0 0; display: flex !important; justify-content: center !important; align-items: center; width: 100% !important; } .ctouch__form .cf-submit .wpcf7-form-control-wrap { flex: 0 0 auto !important; width: auto !important; } .ctouch__form .cf-submit .wpcf7-spinner { position: absolute !important; } /* CF7 messages - white text, no border */ .ctouch__form .wpcf7-response-output { color: #FFF !important; border: none !important; margin: 20px 0 0 !important; padding: 8px 0 !important; font-family: 'Manrope', sans-serif; font-size: 14px; } .ctouch__form .wpcf7-not-valid-tip { color: #ffb3b3 !important; font-size: 13px; font-family: 'Manrope', sans-serif; } .ctouch__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: #FFF; background: #D41022; border: none; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; } /* form button center */ .cform { display: flex; flex-direction: column; align-items: center; } .cform > *:not(.ctouch__btn) { width: 100%; } /* Left: text */ .ctouch__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .ctouch__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 20px; } .ctouch__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; margin-bottom: 20px; } /* =================================================== SERVICES PAGE - SERVICE OVERVIEW =================================================== */ .soverview { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .soverview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .soverview__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .soverview__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .soverview__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #3B3B3B; margin-bottom: 18px; } .soverview__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: #FFF; background: #D41022; border: none; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; } .soverview__imgwrap { position: relative; padding-top: 30px; padding-left: 30px; } .soverview__corner { position: absolute; top: 0; left: 0; width: 90px; height: 90px; z-index: 2; border-top: 22px solid #D41022; border-left: 22px solid #D41022; border-top-left-radius: 10px; } .soverview__imgwrap { aspect-ratio: 1 / 1; } .soverview__image { width: 100%; height: 100%; border-radius: 16px; display: block; position: relative; z-index: 1; object-fit: cover; } /* =================================================== SERVICES PAGE - KEY OFFERINGS (slider) =================================================== */ .offerings { position: relative; background-color: #141414; background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 100px; padding-bottom: 100px; } .offerings__head { text-align: center; max-width: 700px; margin: 0 auto 24px; } .offerings__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 16px; } .offerings__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; } .offerings__divider { max-width: 1920px; margin: 40px auto; border-top: 1px solid #FFFFFF; } /* Tabs nav */ .offer-tabs__nav { display: flex; justify-content: center; gap: clamp(8px, 1.2vw, 16px); flex-wrap: nowrap; margin-bottom: 60px; } .offer-tabs__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(15px, 1.7vw, 36px); line-height: 1.15; letter-spacing: 0.5px; text-transform: uppercase; color: #FFF; background: transparent; border: 1px solid #FFF; padding: clamp(9px, 1.2vw, 15px) clamp(12px, 1.8vw, 24px); border-radius: 40px; cursor: pointer; white-space: nowrap; flex: 0 1 auto; min-width: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .offer-tabs__btn.active, .offer-tabs__btn:hover { background: #D41022; border-color: #D41022; color: #FFF; } /* Tab panels */ .offer-tabs__panel { display: none; } /* 2fr/3fr = the same 40/60 split, but measured from the space left AFTER the gap. Using 40%/60% made the grid 60px wider than its container (100% + gap). */ .offer-tabs__panel.active { display: grid; grid-template-columns: 2fr 3fr; gap: 60px; align-items: start; } /* Staggered entrance: image settles in first, text follows a beat later — same signature easing curve used by the page-transition overlay, for a consistent, deliberate motion feel across the site. */ .offer-tabs__panel.active > * { animation: offerTabFadeIn 0.55s cubic-bezier(0.65, 0, 0.35, 1) both; } .offer-tabs__panel.active > *:nth-child(2) { animation-delay: 0.1s; } @keyframes offerTabFadeIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .offer-tabs__imgwrap { border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; } .offer-tabs__imgwrap img { width: 100%; height: 100%; display: block; object-fit: cover; } .offer-tabs__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; margin-bottom: 18px; } /* Product Range page: Chemicals Solutions Reliability - two-column checklist inside each tab panel (Product Range / Applications), reuses the same check-bullet icon as the Geotextile page's Products section */ .offer-tabs__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 10px; min-width: 0; } .offer-tabs__col { min-width: 0; } .offer-tabs__col-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 32px; line-height: 36px; color: #FFF; text-transform: uppercase; margin-bottom: 16px; } .offer-tabs__list { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .offer-tabs__list li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .offer-tabs__list .check-bullet { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; } .offer-tabs__list span { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #C9C9C9; min-width: 0; } /* =================================================== SERVICES PAGE - WHY CHOOSE THIS SERVICE (slider) =================================================== */ .wchoose { background: #FFF; padding-top: 100px; padding-bottom: 60px; } .wchoose__head { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 50px; } .wchoose__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 16px; } .wchoose__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 56px; line-height: 56px; color: #202020; text-transform: uppercase; max-width: 620px; } .wchoose__nav { display: flex; gap: 14px; flex-shrink: 0; } .wchoose__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #D41022; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .wchoose__arrow:hover { background: #FDE8EA; } .wchoose__arrow img { width: 20px; height: 20px; } .wchoose__viewport { position: relative; overflow: hidden; padding-bottom: 20px; } .wchoose__viewport::before, .wchoose__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none; } .wchoose__viewport::before { left: 0; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0) 100%); } .wchoose__viewport::after { right: 0; background: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0) 100%); } .wchoose__track { display: flex; gap: 30px; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); padding: 10px; } .wchoose-card { flex: 0 0 calc((100% - 60px - 20px) / 3); background: #FFF; border-radius: 16px; padding: 34px 30px 36px; box-shadow: 0px 4px 17px 0px #00000026; } .wchoose-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 32px; color: #202020; text-transform: uppercase; margin-bottom: 12px; } .wchoose-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; color: #3B3B3B; margin-bottom: 22px; } .wchoose-card__btn { width: 44px; height: 44px; border-radius: 50%; background: #D41022; border: none; color: #FFF; font-size: 19px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* =================================================== SERVICES PAGE - INDUSTRIES SERVED =================================================== */ .industries { background: #FFF; padding-top: 70px; padding-bottom: 70px; } .industries__grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .industries__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 48px; line-height: 50px; color: #202020; text-transform: uppercase; margin-bottom: 10px; } .industries__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #3B3B3B; } .industries__icons { display: flex; gap: 36px; flex-wrap: wrap; } .ind-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .ind-item svg { width: 40px; height: 40px; } .ind-item span { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 14px; color: #202020; } /* =================================================== SERVICES PAGE - OUR SIMPLE PROCESS =================================================== */ .process { background: #141414; padding-top: 100px; padding-bottom: 100px; } .process__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; } .process__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .process__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 24px; } .process__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; max-width: 420px; margin-bottom: 32px; } .process__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: #FFF; background: #D41022; border: none; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; } .process__list { display: flex; flex-direction: column; gap: 16px; } .process-card { display: flex; align-items: flex-start; gap: 22px; border: 1px solid #2a2a2a; border-radius: 14px; padding: 24px 28px; background: transparent; transition: background 0.2s ease, border-color 0.2s ease; text-decoration: none; color: inherit; } .process-card--active { background: #332D2D; border-color: #332D2D; } .process-card:hover { background: #332D2D; border-color: #332D2D; } .process-card__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 30px; color: #FFF; text-transform: uppercase; margin-bottom: 6px; } .process-card__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 15px; line-height: 22px; color: #F5F5F5; } /* =================================================== SERVICES PAGE - COMMITTED =================================================== */ .committed { background: #FFF; padding-top: 100px; padding-bottom: 100px; } .committed__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .committed__eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 100%; color: #D41022; text-transform: uppercase; margin-bottom: 18px; } .committed__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #202020; text-transform: uppercase; margin-bottom: 24px; } .committed__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; line-height: 25px; color: #3B3B3B; margin-bottom: 32px; } .committed__btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: #FFF; background: #D41022; border: none; padding: 17px 20px; border-radius: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; } .committed__image { width: 100%; border-radius: 16px; display: block; } /* =================================================== SERVICES PAGE - CTA BANNER =================================================== */ .cta { position: relative; background-color: #0d0d0d; background-size: cover; background-position: center; padding-top: 100px; padding-bottom: 100px; border-bottom: 1px solid #FFFFFF; } .cta__inner { text-align: center; max-width: 850px; margin: 0 auto; } .cta__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 60px; color: #FFF; text-transform: uppercase; margin-bottom: 20px; } .cta__text { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; color: #FFF; margin-bottom: 36px; } .cta__buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* =================================================== NAVBAR - HAMBURGER (mobile + tablet, max 1023px) =================================================== */ @media (max-width: 1023px) { /* show hamburger (in navbar, right side) */ .navbar__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: none; cursor: pointer; padding: 8px; z-index: 20; } .navbar__toggle span { display: block; width: 100%; height: 2px; background: #FFF; border-radius: 2px; transition: all 0.3s ease; } /* navbar - logo left, hamburger right */ .navbar { position: relative; } /* collapse menu - dropdown panel, hidden by default */ /* Full-screen menu overlay (matches reference: covers whole viewport, has its own logo+close header row) */ .navbar__collapse { display: flex !important; position: fixed !important; inset: 0 !important; background: #1a1a1a !important; border: none !important; border-radius: 0 !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; padding: 0 24px 24px !important; z-index: 500 !important; margin-left: 0 !important; flex: none !important; overflow-y: auto !important; width: auto !important; height: auto !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; transform: translateX(-100%) !important; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; } .navbar__collapse.open { transform: translateX(0) !important; pointer-events: auto !important; } /* backdrop-filter par .navbar creates a new containing block*/ .navbar { backdrop-filter: none !important; } } .navbar__collapse-top { display: none; } @media (max-width: 1023px) { .navbar__collapse-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; margin-bottom: 30px; } .navbar__collapse-logo img { height: 40px; width: auto; } .navbar__close { display: block; position: static; font-size: 31px; color: #FFF; background: none; border: none; cursor: pointer; line-height: 1; } .navbar__menu { flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; margin: 0; } .navbar__menu li { width: 100%; border-top: none; } .navbar__menu a { padding: 2px 0; width: 100%; text-transform: none; font-size: 19px; font-weight: 500; } /* submenu mobile - normal list */ .navbar__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; padding: 0 0 0 16px; min-width: auto; display: none; } .navbar__menu li.menu-item-has-children.open-sub .sub-menu { display: block; } .navbar__menu .sub-menu a { padding: 12px 0; } /* Mobile: hide the old text-arrow, show a new separate button */ .navbar__menu li.menu-item-has-children > a::after { display: none; } .submenu-toggle svg { width: 18px; height: 18px; } /* Mobile/tablet: active-item underline sized to the text only, not the full row (top-level menu items become full-width blocks here) */ .navbar__menu li.current-menu-item:not(.is-highlight) > a::before, .navbar__menu li.current_page_item:not(.is-highlight) > a::before { display: none; } .navbar__menu li.current-menu-item:not(.is-highlight) > a, .navbar__menu li.current_page_item:not(.is-highlight) > a, .navbar__menu li.current-menu-parent:not(.is-highlight) > a, .navbar__menu li.current_page_parent:not(.is-highlight) > a { position: relative; } .navbar__menu li.current-menu-item:not(.is-highlight) > a::after, .navbar__menu li.current_page_item:not(.is-highlight) > a::after, .navbar__menu li.current-menu-parent:not(.is-highlight) > a::after, .navbar__menu li.current_page_parent:not(.is-highlight) > a::after { content: ""; position: absolute; left: 0; right: auto; bottom: 5px; width: fit-content; border-bottom: 2px solid #D41022; } .navbar__menu li.menu-item-has-children { position: relative; } .navbar__menu li.menu-item-has-children > a { padding-right: 40px; } .submenu-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 4px; right: 0; width: 40px; height: 40px; background: transparent; border: none; color: #FFF; cursor: pointer; transition: transform 0.25s ease; } .navbar__menu li.menu-item-has-children.open-sub .submenu-toggle { transform: rotate(180deg); } /* button hide in mobile menu */ .navbar__cta { display: none; } } /* =================================================== MOBILE RESPONSIVE - sab sections =================================================== */ @media (max-width: 768px) { .hero { padding: 50px 20px; min-height: auto; } /* navbar mobile */ .navbar { padding: 12px 16px; } .navbar__logo img { height: 36px; } .hero__content { margin-top: 50px; max-width: 100%; } .hero__title { font-size: 40px; line-height: 42px; } .hero__eyebrow { font-size: 16px; } .hero__text { font-size: 16px; line-height: 24px; margin-bottom: 36px; } .hero__buttons { flex-direction: row; align-items: center; flex-wrap: wrap; } .btn { justify-content: center; padding: 13px 18px; font-size: 15px; } /* MOBILE: every section's button aligns left */ .trade__cta, .beyond__cta, .wwd__top, .cta__inner { text-align: left; } .cta__buttons, .hero__buttons { justify-content: flex-start; align-items: flex-start; } .ctouch__form .cf-submit { text-align: left !important; justify-content: flex-start !important; } .ctouch__form .wpcf7-submit, .ctouch__form input[type="submit"] { margin: 0 !important; } .about__btn, .why__btn, .service-card__btn { padding: 13px 18px; font-size: 15px; } .feat-sec { padding: 50px 20px; } .features { grid-template-columns: 1fr; gap: 32px; padding-right: 0; } .red-card { position: relative; width: 100%; max-width: 100%; min-height: 280px; margin: 0 0 32px; padding: 24px; top: 0; left: 0; overflow: hidden; } .red-card__text { max-width: 58%; } .red-card__img { position: absolute; right: 0; bottom: 0; top: auto; left: auto; width: auto; max-width: 42%; height: 190px; margin-top: 0; object-fit: cover; object-position: top center; border-radius: 10px 0 20px 0; } .about { grid-template-columns: 1fr; gap: 30px; margin-top: 0; } .about__imgwrap { padding-top: 20px; padding-left: 20px; } .about__corner { width: 70px; height: 70px; border-top-width: 16px; border-left-width: 16px; } .about__content { padding-top: 0; } .about__title { font-size: 38px; line-height: 1.05; max-width: 100%; margin-bottom: 20px; } .about__text { font-size: 15px; line-height: 1.7; margin-bottom: 18px; } .about > div:nth-child(1) { order: 2; } /* image below */ .about > div:nth-child(2) { order: 1; } /* content above */ /* Strength section - mobile: image goes below text */ .strength { padding: 50px 20px; } .strength__inner { grid-template-columns: 1fr; gap: 30px; } .strength__title { font-size: 38px; line-height: 1.05; max-width: 100%; margin-bottom: 20px; } .strength__text { font-size: 15px; line-height: 1.7; margin-bottom: 18px; } .strength__btn { padding: 13px 18px; font-size: 15px; } .core { padding: 50px 20px; } .core__grid { grid-template-columns: 1fr; gap: 40px; } .core__title { font-size: 38px; line-height: 40px; } .core__text { font-size: 16px; line-height: 24px; } .info-card__title { font-size: 26px; } .stats { padding: 50px 20px; } .stat { width: 240px; } .stat__number { font-size: 44px; line-height: 52px; } .stat__label { font-size: 16px; line-height: 24px; } .stats__slider::before, .stats__slider::after { width: 40px; } .services { padding: 50px 20px; } .services__head { text-align: left; } .services__title { font-size: 38px; line-height: 40px; } .services__text { font-size: 16px; line-height: 24px; } .services__grid { grid-template-columns: 1fr; gap: 20px; } .why { padding: 50px 20px; } .why__grid { grid-template-columns: 1fr; gap: 40px; } .why__intro { padding-top: 0; position: static; top: auto; } .why__title { font-size: 38px; line-height: 1.05; } .why__text { font-size: 15px; line-height: 1.7; max-width: 100%; margin-bottom: 26px; } .why__cards { gap: 14px; } .why-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; } .why-card__icon { width: 46px; height: 46px; } .why-card__title { font-size: 22px; } .why-card__text { font-size: 14px; } .faq { padding: 50px 20px; margin-top: 30px; } .faq--services { margin-top: 0; } .faq--home { margin-top: 0; } .faq--svcd { margin-top: 0; } .faq--engs { margin-top: 0; } .faq--geos { margin-top: 0; } .faq--pr { margin-top: 0; } .faq__head { text-align: left; } .faq__title { font-size: 34px; line-height: 38px; } .faq__text { font-size: 16px; } .faq__grid { columns: 1; } .acc { margin-bottom: 16px; } .acc__q { font-size: 18px; line-height: 26px; } .mvp__grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; } .mvp-card { padding: 30px 24px; } .mvp-card__title { font-size: 26px; line-height: 30px; } .mvp-card__text { font-size: 15px; line-height: 23px; } .help { padding: 50px 20px 30px; } .help__head { text-align: left; } .help__title { font-size: 32px; line-height: 1.1; } .help__grid { grid-template-columns: 1fr; gap: 20px; } .help-card { padding: 26px 24px; } .help-card__title { font-size: 26px; line-height: 30px; } .help-card__text { font-size: 15px; line-height: 23px; } .commit-top__grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; } .commit-top__grid > div:nth-child(1) { order: 2; } /* image below */ .commit-top__grid > div:nth-child(2) { order: 1; } /* content above */ .commit-top__imgwrap { height: 280px; } .commit-top__title { font-size: 38px; line-height: 40px; margin-bottom: 14px; } .commit-top__text { font-size: 16px; line-height: 24px; } .cta--home .cta__text { margin-bottom: 20px; } .testi { padding: 50px 20px; } .testi__grid { grid-template-columns: 1fr; gap: 40px; } .testi__title { font-size: 38px; line-height: 40px; } .testi__text { font-size: 16px; line-height: 24px; } .testi__cols { grid-template-columns: 1fr; height: 480px; padding: 0 10px; } .col--down { display: none; } .footer__main { grid-template-columns: 1fr 1fr; gap: 34px; padding: 50px 20px; } .footer__logo-col { grid-column: 1 / -1; } .footer__logo { width: 130px; margin-bottom: 16px; } .footer__col-title { margin-bottom: 18px; } .footer__links li { margin-bottom: 12px; } .footer__bottom { flex-direction: row; flex-wrap: nowrap; gap: 8px; text-align: left; padding: 7px 20px; } .footer__copy { font-size: 9px; line-height: 1.3; white-space: nowrap; } .footer__brand { height: 18px; flex-shrink: 0; } /* Our Story mobile */ .story { padding: 50px 20px; } .story__top { grid-template-columns: 1fr; gap: 40px; } .story__title { font-size: 38px; line-height: 40px; } .story__text { font-size: 15px; line-height: 23px; } .story__btn { padding: 13px 18px; font-size: 15px; } .story__imgwrap { padding-top: 20px; padding-right: 20px; } .story__corner { width: 60px; height: 60px; border-top-width: 16px; border-right-width: 16px; } .story__cards { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } /* Contact info cards mobile */ .cinfo { padding: 50px 20px; } .cinfo__grid { grid-template-columns: 1fr; gap: 20px; } /* Get in Touch mobile */ .ctouch { padding: 50px 20px; } .ctouch__form .cf-submit { text-align: center; } .ctouch__form .wpcf7-submit, .ctouch__form input[type="submit"] { padding: 13px 18px !important; display: inline-block !important; } .cform__field textarea, .ctouch__form textarea.wpcf7-form-control { height: 90px; min-height: 70px; } .ctouch__grid { grid-template-columns: 1fr; gap: 40px; } /* Service Overview mobile */ .soverview { padding: 40px 20px; } .soverview__grid { grid-template-columns: 1fr; gap: 40px; } .soverview__grid > div:nth-child(1) { order: 2; } /* image below */ .soverview__grid > div:nth-child(2) { order: 1; } /* content above */ .soverview__title { font-size: 38px; line-height: 40px; } .soverview__text { font-size: 15px; line-height: 23px; } .soverview__btn { padding: 13px 18px; font-size: 15px; } .soverview__imgwrap { padding-top: 20px; padding-right: 20px; } .soverview__corner { width: 60px; height: 60px; border-top-width: 16px; border-right-width: 16px; } /* Key Offerings mobile - tabs become a horizontal scroll strip */ .offerings { padding: 50px 20px; } .offerings__head { text-align: left; } .offerings__title { font-size: 38px; line-height: 40px; } .offerings__text { font-size: 16px; line-height: 24px; } .offerings__divider { margin: 30px auto; } .offer-tabs__nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px 30px; padding: 0 20px 6px; scrollbar-width: none; position: relative; } .offer-tabs__nav::-webkit-scrollbar { display: none; } /* Modern scroll hint — fading edge + bouncing arrow, both disappear once the user scrolls */ .offer-tabs__nav.has-scroll-hint::after { content: ""; position: absolute; top: 0; right: 0; bottom: 6px; width: 56px; background: linear-gradient(90deg, rgba(20,20,20,0) 0%, #141414 80%); pointer-events: none; z-index: 2; } .offer-tabs__scroll-hint { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #D41022; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; animation: offerTabsHintBounce 1.3s ease-in-out 3; } .offer-tabs__scroll-hint svg { width: 13px; height: 13px; display: block; } @keyframes offerTabsHintBounce { 0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; } 50% { transform: translateY(-50%) translateX(6px); opacity: 0.6; } } .offer-tabs__btn { flex: 0 0 auto; white-space: nowrap; padding: 12px 18px; font-size: 14px; line-height: 1.3; } .offer-tabs__panel.active { grid-template-columns: 1fr; gap: 24px; } .offer-tabs__text { font-size: 15px; line-height: 23px; } .offer-tabs__cols { grid-template-columns: 1fr; gap: 24px; margin-top: 0; } .offer-tabs__col-title { font-size: 26px; line-height: 30px; } .offer-tabs__list span { font-size: 16px; line-height: 24px; } /* Why Choose Service mobile */ .wchoose { padding: 50px 20px 40px; } .wchoose__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .wchoose__nav { align-self: flex-end; margin-top: 0; gap: 10px; } .wchoose__arrow { width: 38px; height: 38px; } .wchoose__arrow img { width: 16px; height: 16px; } .wchoose__title { font-size: 34px; line-height: 36px; } .wchoose-card { flex: 0 0 100%; } .wchoose__viewport { padding-bottom: 10px; } .wchoose__track { padding: 5px; } .wchoose__viewport::before, .wchoose__viewport::after { width: 12px; } /* Industries mobile */ .industries { padding: 40px 20px 50px; } .industries__grid { flex-direction: column; align-items: flex-start; gap: 30px; } .industries__title { font-size: 34px; line-height: 36px; } .industries__icons { gap: 20px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; padding-bottom: 6px; scrollbar-width: none; } .industries__icons::-webkit-scrollbar { display: none; } .industries__icons > * { flex: 0 0 auto; } /* Our Simple Process mobile */ .process { padding: 50px 20px; } .process__grid { grid-template-columns: 1fr; gap: 40px; } .process__title { font-size: 38px; line-height: 40px; } .process__text { font-size: 16px; line-height: 24px; } .process__btn { padding: 13px 18px; font-size: 15px; } .process-card { padding: 20px; gap: 16px; } .process-card__title { font-size: 20px; } /* Committed mobile */ .committed { padding: 50px 20px; } .committed__grid { grid-template-columns: 1fr; gap: 40px; } .committed__title { font-size: 38px; line-height: 40px; } .committed__text { font-size: 15px; line-height: 23px; } .committed__btn { padding: 13px 18px; font-size: 15px; } /* CTA banner mobile */ .cta { padding: 50px 20px; } .cta__inner { text-align: left; } .cta__title { font-size: 34px; line-height: 38px; } .cta__text { font-size: 16px; line-height: 24px; } .cta__buttons { flex-direction: column; align-items: flex-start; } .ctouch__form { padding: 26px; } .cform__row { grid-template-columns: 1fr; gap: 0; } .ctouch__form .cf-row { grid-template-columns: 1fr; gap: 0; } .ctouch__form .cf-row .cf-col { margin-bottom: 0px; } .ctouch__title { font-size: 38px; line-height: 40px; } .ctouch__text { font-size: 16px; line-height: 24px; } .ctouch__btn { padding: 13px 18px; font-size: 15px; } /* About page: What We Do - mobile: image goes below text, cards stack */ .wwd { padding: 50px 20px; } .wwd__top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; } .wwd__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .wwd__text { font-size: 15px; line-height: 1.7; } .wwd__btn { padding: 13px 18px; font-size: 15px; } .wwd__cards { grid-template-columns: 1fr; gap: 16px; } .wwd-card { padding: 24px 22px; } .wwd-card__title { font-size: 26px; line-height: 30px; } .wwd-card__text { font-size: 15px; line-height: 23px; } .trade { padding: 50px 20px; } .trade__head { text-align: left; margin-bottom: 30px; } .trade__title { font-size: 38px; line-height: 40px; margin-bottom: 14px; } .trade__text { font-size: 16px; line-height: 24px; } .trade__cta { margin-top: 30px; } .gsrc { padding: 50px 20px; } .gsrc__grid { grid-template-columns: 1fr; gap: 30px; } .gsrc__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .gsrc__text { font-size: 16px; line-height: 24px; } .licensed { padding: 50px 20px; } .licensed__top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; } .licensed__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .licensed__text { font-size: 16px; line-height: 24px; } .licensed__items { grid-template-columns: 1fr 1fr; gap: 30px 16px; } .licensed-item__title { font-size: 26px; line-height: 30px; } .licensed-item__text { font-size: 15px; line-height: 23px; } /* Quality mobile - text on top, image below */ .qual { padding: 50px 20px; } .qual__grid { grid-template-columns: 1fr; gap: 30px; } .qual__content { order: 1; } .qual__imgwrap { order: 2; } .qual__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .qual__text { font-size: 16px; line-height: 24px; } .qual--geom .qual__grid { margin-bottom: 30px; } /* Product Range page: How Our Range Is Organised - mobile single column */ .range { padding: 50px 20px; } .range__head { text-align: left; margin-bottom: 30px; } .range__title { font-size: 38px; line-height: 40px; margin-bottom: 14px; } .range__text { font-size: 16px; line-height: 24px; } .mvp__grid--range { grid-template-columns: 1fr; } /* Product Range page: Categories - mobile, image on top */ .rcat { padding: 50px 20px; } .rcat__grid { grid-template-columns: 1fr; gap: 30px; } .rcat--img-left .rcat__imgwrap, .rcat--img-right .rcat__imgwrap { order: 1; } .rcat--img-left .rcat__content, .rcat--img-right .rcat__content { order: 2; } .rcat__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .rcat__text { font-size: 16px; line-height: 24px; } .rcat__apps { margin-top: 20px; } .rcat__apps-title { font-size: 26px; line-height: 30px; } .rcat__row-name, .rcat__row-value { font-size: 15px; } .rcat__btn { padding: 13px 18px; font-size: 15px; margin-top: 22px; } /* Geotextile page: Products mobile - image on top, single column lists */ .geoprod { padding: 50px 20px; } .geoprod__grid { grid-template-columns: 1fr; gap: 30px; } .geoprod--img-left .geoprod__imgwrap, .geoprod--img-right .geoprod__imgwrap { order: 1; } .geoprod--img-left .geoprod__content, .geoprod--img-right .geoprod__content { order: 2; } .geoprod__title { font-size: 38px; line-height: 40px; margin-bottom: 14px; } .geoprod__text { font-size: 16px; line-height: 24px; margin-bottom: 24px; } .geoprod__cols { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; } /* Product Range page: Application And Sectors We Supply - standalone section padding on mobile */ .values--geob { padding-top: 50px; padding-left: 20px; padding-right: 20px; } .values--appsec { padding: 50px 20px; } /* Connecting mobile - image goes below text */ .connect { padding: 50px 20px; } .connect__grid { grid-template-columns: 1fr; gap: 30px; } .connect__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .connect__text { font-size: 16px; line-height: 24px; } /* Beyond Chemical Trading mobile - single column */ .beyond { padding: 50px 20px; } .beyond__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; } .beyond__title { font-size: 38px; line-height: 40px; } .beyond__text { font-size: 16px; line-height: 24px; } .beyond__items { grid-template-columns: 1fr; gap: 30px; } .beyond-item__title { font-size: 26px; line-height: 30px; } .beyond-item__text { font-size: 15px; line-height: 23px; } .beyond__cta { margin-top: 36px; } .tpe { padding: 50px 20px; } .tpe .values__text { font-size: 16px; line-height: 24px; margin-bottom: 18px; } .tpe .value-card__text { font-size: 15px; line-height: 23px; } /* Structural Repairing mobile - text on top, image below, items stack */ .srep { padding: 50px 20px; } .srep__top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; } .srep__content { order: 1; } .srep__imgwrap { order: 2; } .srep__title { font-size: 38px; line-height: 40px; margin-bottom: 16px; } .srep__text { font-size: 16px; line-height: 24px; } .srep__items { grid-template-columns: 1fr; gap: 30px; } .srep-item__title { font-size: 26px; line-height: 30px; } .srep-item__text { font-size: 15px; line-height: 23px; } /* Core Values mobile */ .values__grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; } .values__intro { position: static; top: auto; } .values__title { font-size: 38px; line-height: 40px; } .values__text { font-size: 15px; line-height: 23px; } .value-card { padding: 20px; gap: 16px; } .value-card__title { font-size: 26px; line-height: 30px; } } @media (max-width: 480px) { .footer__main { grid-template-columns: 1fr; } } /* Buttons that are now links () — remove underline */ .red-card__btn, .why__btn, .story__btn, .soverview__btn, .process__btn, .committed__btn { text-decoration: none; } /* =================================================== PAGE TRANSITION (shown while navigating from one page to another)=================================================== */ .page-transition { position: fixed; inset: 0; z-index: 99999; pointer-events: none; display: flex; align-items: center; justify-content: center; } .page-transition__panel { position: absolute; inset: 0; background: #141414; transform: translateY(0); transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1); } /* A thin red line on the panel's leading (bottom) edge — clean "blade" look */ .page-transition__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: #D41022; } /* Just the logo in the middle — minimal fade, no bounce/pulse */ .page-transition__mark { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; } .page-transition__mark img { height: 36px; } .page-transition__mark span { display: none; } /* As soon as the page loads, the panel slides up and out of the way */ .page-transition.is-revealed .page-transition__panel { transform: translateY(-100%); transition-duration: 0.75s; transition-delay: 0.05s; } .page-transition.is-revealed .page-transition__mark { opacity: 0; transform: translateY(-8px); } /* On link click, the panel covers again from the bottom, then the new page loads */ .page-transition.is-covering .page-transition__panel { transform: translateY(0); transition-duration: 0.5s; } .page-transition.is-covering .page-transition__mark { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } /* =================================================== SCROLL-REVEAL (elements fade/slide in on scroll)=================================================== */ .reveal-up { opacity: 0; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-up.in-view { opacity: 1; transform: translateY(0); } /* Animation off for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; } .page-transition__panel { transition: none !important; } .offer-tabs__panel.active > * { animation: none !important; } } /* Slight staggered delay across card grids — cascade-like effect */ .features > *:nth-child(1), .services__grid > *:nth-child(1), .why__cards > *:nth-child(1), .values__list > *:nth-child(1), .cinfo__grid > *:nth-child(1), .offerings__track > *:nth-child(1), .wchoose__track > *:nth-child(1), .industries__icons > *:nth-child(1), .process__list > *:nth-child(1), .story__cards > *:nth-child(1) { transition-delay: 0s; } .features > *:nth-child(2), .services__grid > *:nth-child(2), .why__cards > *:nth-child(2), .values__list > *:nth-child(2), .cinfo__grid > *:nth-child(2), .offerings__track > *:nth-child(2), .wchoose__track > *:nth-child(2), .industries__icons > *:nth-child(2), .process__list > *:nth-child(2), .story__cards > *:nth-child(2) { transition-delay: 0.1s; } .features > *:nth-child(3), .services__grid > *:nth-child(3), .why__cards > *:nth-child(3), .values__list > *:nth-child(3), .cinfo__grid > *:nth-child(3), .offerings__track > *:nth-child(3), .wchoose__track > *:nth-child(3), .industries__icons > *:nth-child(3), .process__list > *:nth-child(3) { transition-delay: 0.2s; } .services__grid > *:nth-child(4), .why__cards > *:nth-child(4), .values__list > *:nth-child(4), .offerings__track > *:nth-child(4), .wchoose__track > *:nth-child(4), .industries__icons > *:nth-child(4), .process__list > *:nth-child(4) { transition-delay: 0.3s; } .values__list > *:nth-child(5), .offerings__track > *:nth-child(5), .wchoose__track > *:nth-child(5), .industries__icons > *:nth-child(5) { transition-delay: 0.4s; } .values__list > *:nth-child(6) { transition-delay: 0.5s; } .footer__main > div:nth-child(1) { transition-delay: 0s; } .footer__main > div:nth-child(2) { transition-delay: 0.1s; } .footer__main > div:nth-child(3) { transition-delay: 0.2s; } .footer__main > div:nth-child(4) { transition-delay: 0.3s; } .footer__main > div:nth-child(5) { transition-delay: 0.4s; } /* =================================================== TABLET (768px - 1023px) — for sections with an image: content on top, image below; for the form section: order is content -> map -> form =================================================== */ @media (min-width: 768px) and (max-width: 1023px) { /* Contact page: Info cards — 2x2 on tablet */ .cinfo__grid { grid-template-columns: 1fr 1fr; gap: 20px; } .cinfo-card:nth-child(odd):last-child { grid-column: 1 / -1; } /* Why-style cards (Home Why Choose, Contact Who You Are Contacting, Services Why Choose With Us, Service Detail Why Buyers) — 2x2 on tablet, last card full-width if odd count */ .why__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .why-card { grid-template-columns: 1fr; gap: 14px; } .why-card:nth-child(odd):last-child { grid-column: 1 / -1; } /* Home: Our Services — 2-col on tablet, last card full-width if odd count */ .services__grid { grid-template-columns: 1fr 1fr; gap: 20px; } .service-card:nth-child(odd):last-child { grid-column: 1 / -1; } /* Home: About Gotche (image + text) */ .about { grid-template-columns: 1fr; gap: 36px; } .about > div:nth-child(1) { order: 2; } /* image below */ .about > div:nth-child(2) { order: 1; } /* content above */ /* Home: Core Driving (Mission/Vision) — content is already on top */ .core__grid { grid-template-columns: 1fr; gap: 36px; } /* Home: Strength — content on top, image below (content already first in HTML) */ .strength__inner { grid-template-columns: 1fr; gap: 36px; } /* About page: What We Do — content on top, image below (content already first in HTML) */ .wwd__top { grid-template-columns: 1fr; gap: 36px; } /* Services page: Our Simple Process — content on top, list below */ .process__grid { grid-template-columns: 1fr; gap: 36px; } /* Sticky left-column intros should only stick on desktop/laptop */ .why__intro, .values__intro { position: static; top: auto; } /* About page: Our Story — content is already on top */ .story__top { grid-template-columns: 1fr; gap: 36px; } /* About page: Values — 2-col on tablet, last card full-width if odd count */ .values__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .value-card:nth-child(odd):last-child { grid-column: 1 / -1; } /* Services page: Service Overview */ .soverview__grid { grid-template-columns: 1fr; gap: 36px; } .soverview__grid > div:nth-child(1) { order: 2; } /* image below */ .soverview__grid > div:nth-child(2) { order: 1; } /* content above */ /* What We Trade / What We Do cards (About page: 3 cards; Service Detail: 6 cards) — 2-col on tablet, last card full-width if odd count */ .wwd__cards { grid-template-columns: 1fr 1fr; } .wwd-card:nth-child(odd):last-child { grid-column: 1 / -1; } /* Service Detail page: Global Sourcing — text stacks above image */ .gsrc__grid { grid-template-columns: 1fr; gap: 36px; } /* Service Detail page: Licensed Handling And Storage — text stacks above image, items 2x2 */ .licensed__top { grid-template-columns: 1fr; gap: 36px; } .licensed__items { grid-template-columns: 1fr 1fr; gap: 30px; } .licensed-item:nth-child(odd):last-child { grid-column: 1 / -1; } /* Engineering page: Structural Repairing — text stacks above image, items stay 3-up */ .srep__top { grid-template-columns: 1fr; gap: 36px; } .srep__content { order: 1; } .srep__imgwrap { order: 2; } .srep__items { gap: 30px; } /* Service Detail page: Quality — text stacks above image */ .qual__grid { grid-template-columns: 1fr; gap: 36px; } .qual__content { order: 1; } .qual__imgwrap { order: 2; } /* Service Detail page: Connecting — text stacks above image */ .connect__grid { grid-template-columns: 1fr; gap: 36px; } /* Service Detail page: Beyond Chemical Trading — heading above text, items 2x2 */ .beyond__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; } .beyond__items { grid-template-columns: 1fr 1fr; gap: 36px 30px; } .beyond-item:nth-child(odd):last-child { grid-column: 1 / -1; } /* Product Range page: How Our Range Is Organised — 6 cards, clean 2x3 (no odd override needed, but rule above already handles it safely) */ .mvp__grid--range { grid-template-columns: 1fr 1fr; } /* Product Range page: Categories - text stacks above image */ .rcat__grid { grid-template-columns: 1fr; gap: 36px; } .rcat--img-left .rcat__imgwrap, .rcat--img-right .rcat__imgwrap { order: 1; } .rcat--img-left .rcat__content, .rcat--img-right .rcat__content { order: 2; } /* Geotextile page: Products — image on top, cols stay 2-up */ .geoprod__grid { grid-template-columns: 1fr; gap: 36px; } .geoprod--img-left .geoprod__imgwrap, .geoprod--img-right .geoprod__imgwrap { order: 1; } .geoprod--img-left .geoprod__content, .geoprod--img-right .geoprod__content { order: 2; } /* Services page: Committed — content is already on top */ .committed__grid { grid-template-columns: 1fr; gap: 36px; } /* FAQ — single column on tablet too, matching mobile */ .faq__grid { columns: 1; } /* Core Values / Third-Party Engineering — content on top, cards below */ .values__grid { grid-template-columns: 1fr; gap: 36px; } /* All pages: Testimonials — content on top, cards below */ .testi__grid { grid-template-columns: 1fr; gap: 36px; } /* MVP-style cards (Home: 3 cards; Geotextile: 3 cards; Product Range: 6 cards) — 2-col on tablet, last card full-width only if odd count */ .mvp__grid { grid-template-columns: 1fr 1fr; gap: 20px; } .mvp-card:nth-child(odd):last-child { grid-column: 1 / -1; } /* Contact page: Get In Touch — text stacks above form (DOM order already correct) */ .ctouch__grid { grid-template-columns: 1fr; gap: 36px; } /* Home: Red Card — full-width, features/content below */ .red-card { position: static; width: 100%; max-width: 100%; min-height: auto; margin: 0 0 40px; padding: 30px; top: 0; left: 0; overflow: hidden; } .red-card__text { max-width: 60%; } .red-card__img { position: absolute; right: 0; bottom: 0; top: auto; left: auto; width: auto; max-width: 38%; height: 240px; margin-top: 0; object-fit: cover; object-position: top center; border-radius: 10px 0 20px 0; } .features { padding-right: 0; } /* Home: Why Choose Us — content on top, cards below */ .why__grid { grid-template-columns: 1fr; gap: 36px; } /* Footer — was cramped with 5 columns, now 2 columns (logo full width) */ .footer__main { grid-template-columns: 1fr 1fr; gap: 34px; padding: 60px 30px; } .footer__logo-col { grid-column: 1 / -1; } /* Hero content — full width on tablet (was inheriting desktop's 60%) */ .hero__content { max-width: 100%; } }