/* Brand colour: Ledwark blue (from logo) replaces template gold #CAA05C */ :root { --tl-color-theme-primary: #1c9ad6; } /* Ledwark footer: light blue tint (sits below the light grey FAQ section) with the colour logo */ .ledwark-footer.footer-section { padding-bottom: 0; background-color: #edf5fa; border-top: 1px solid rgba(28, 154, 214, .15); } .ledwark-footer .footer-wrap { padding: 90px 0 60px; row-gap: 40px; } .ledwark-footer .footer-widget { margin-bottom: 0; } .ledwark-footer .footer-widget .widget-header { margin-bottom: 25px; } .ledwark-footer .footer-widget .widget-header .footer-logo { max-width: none; } .ledwark-footer .footer-widget .widget-header .footer-logo img { height: 80px; width: auto; } .ledwark-footer .footer-widget .widget-header .widget-title { color: var(--tl-color-heading-primary); font-size: 22px; margin-bottom: 0; } .ledwark-footer .footer-widget .widget-title:after { content: ""; display: block; width: 40px; height: 2px; margin-top: 12px; background-color: var(--tl-color-theme-primary); } .ledwark-footer .footer-widget p { color: var(--tl-color-text-body); line-height: 1.7; } .ledwark-footer .footer-widget .footer-list li:not(:last-of-type) { margin-bottom: 14px; } .ledwark-footer .footer-widget .footer-list li a { font-family: var(--tl-ff-body); font-size: 16px; font-weight: 500; color: var(--tl-color-text-body); position: relative; transition: color .3s ease; } .ledwark-footer .footer-widget .footer-list li a:hover { color: var(--tl-color-theme-primary); } .ledwark-footer .footer-contact-list { list-style: none; padding: 0; margin: 0; } .ledwark-footer .footer-contact-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--tl-color-text-body); font-size: 16px; line-height: 1.6; } .ledwark-footer .footer-contact-list li:not(:last-of-type) { margin-bottom: 18px; } .ledwark-footer .footer-contact-list li i { color: var(--tl-color-theme-primary); font-size: 16px; width: 18px; margin-top: 5px; flex-shrink: 0; text-align: center; } .ledwark-footer .footer-contact-list li a { color: var(--tl-color-text-body); word-break: break-word; transition: color .3s ease; } .ledwark-footer .footer-contact-list li a:hover { color: var(--tl-color-theme-primary); } .ledwark-footer .footer-social { display: flex; gap: 12px; list-style: none; padding: 0; margin: 25px 0 0; } .ledwark-footer .footer-social li a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--tl-color-common-white); border: 1px solid rgba(28, 28, 29, .1); color: var(--tl-color-heading-primary); font-size: 15px; transition: all .3s ease; } .ledwark-footer .footer-social li a:hover { background-color: var(--tl-color-theme-primary); border-color: var(--tl-color-theme-primary); color: #fff; } .ledwark-footer .copyright-area { padding: 22px 0; border-top: 1px solid rgba(28, 28, 29, .08); } .ledwark-footer .copyright-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .ledwark-footer .copyright-content p { color: var(--tl-color-text-body); font-size: 15px; } .ledwark-footer .copyright-content p a { color: var(--tl-color-theme-primary); font-weight: 500; } .ledwark-footer .copyright-content p a:hover { text-decoration: underline; } @media only screen and (min-width: 992px) { .ledwark-footer .footer-col-links { padding-left: 40px; } } @media only screen and (max-width: 767px) { .ledwark-footer .footer-wrap { padding: 56px 0 36px; row-gap: 36px; } .ledwark-footer .footer-widget .widget-header .footer-logo img { height: 68px; } .ledwark-footer .copyright-content { flex-direction: column; justify-content: center; text-align: center; gap: 6px; } } /* Side gutters: template containers (1795px / 1425px) are wider than most laptop viewports, which leaves only 12px of space on the left and right. */ .container, .container-2 { padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 768px) { .container, .container-2 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1200px) { .container, .container-2 { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 1600px) { .container, .container-2 { padding-left: 60px; padding-right: 60px; } } /* Header: light, compact bar so the colour logo is visible */ .header .primary-header, .header .primary-header.fixed { background-color: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(28, 28, 29, .06); box-shadow: none; transition: box-shadow .3s ease, background-color .3s ease; } .header .primary-header.fixed { background-color: rgba(255, 255, 255, .98); box-shadow: 0 6px 30px rgba(17, 17, 17, .08); } .header .primary-header-inner, .header .primary-header.fixed .primary-header-inner { padding: 12px 0; } .header .primary-header-inner .header-left-wrap { column-gap: 48px; } /* Logo (file is 525x300 with no built-in padding) */ .header .primary-header-inner .header-logo a { display: block; line-height: 0; } .header .primary-header-inner .header-logo img { height: 56px; width: auto; max-width: none; transition: height .3s ease; } .header .primary-header.fixed .primary-header-inner .header-logo img { height: 48px; } /* Menu links with an underline for hover and the current section */ .header .primary-header-inner .header-menu-wrap ul li { margin: 0 14px; } .header .primary-header-inner .header-menu-wrap ul li a { color: var(--tl-color-heading-primary); font-size: 16px; padding: 22px 0; } .header .primary-header-inner .header-menu-wrap ul li a::after { content: ""; position: absolute; left: 0; bottom: 14px; width: 100%; height: 2px; border-radius: 2px; background-color: var(--tl-color-theme-primary); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; } .header .primary-header-inner .header-menu-wrap ul li a:hover, .header .primary-header-inner .header-menu-wrap ul li a.active { color: var(--tl-color-theme-primary); } .header .primary-header-inner .header-menu-wrap ul li a:hover::after, .header .primary-header-inner .header-menu-wrap ul li a.active::after { transform: scaleX(1); transform-origin: left; } /* Phone: icon in a soft blue circle */ .header .primary-header-inner .header-right-wrap { column-gap: 24px; } .header .primary-header-inner .header-right-wrap .header-contact { column-gap: 12px; } .header .primary-header-inner .header-right-wrap .header-contact .icon { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(28, 154, 214, .1); color: var(--tl-color-theme-primary); font-size: 18px; transition: all .3s ease; } .header .primary-header-inner .header-right-wrap .header-contact:hover .icon { background-color: var(--tl-color-theme-primary); color: var(--tl-color-common-white); } .header .primary-header-inner .header-right-wrap .header-contact .content .call-text { color: var(--tl-color-text-body); font-size: 13px; opacity: 1; margin-bottom: 2px; } .header .primary-header-inner .header-right-wrap .header-contact .content .call-number { color: var(--tl-color-heading-primary); font-size: 17px; transition: color .3s ease; } .header .primary-header-inner .header-right-wrap .header-contact:hover .content .call-number { color: var(--tl-color-theme-primary); } /* Call-to-action button */ .header .primary-header-inner .header-right-wrap .header-btn { padding: 15px 26px; font-size: 15px; box-shadow: 0 8px 20px rgba(28, 154, 214, .25); } @media only screen and (max-width: 1399px) { .header .primary-header-inner .header-left-wrap { column-gap: 32px; } .header .primary-header-inner .header-menu-wrap ul li { margin: 0 10px; } } @media only screen and (max-width: 991px) { .header .primary-header-inner .header-logo img, .header .primary-header.fixed .primary-header-inner .header-logo img { height: 46px; } } .side-menu-head a img { height: 50px; width: auto; max-width: none; } /* Hero banner: one balanced content column */ .slider-content-wrap { padding: 240px 0 150px; } .slider-content-wrap .slider-content { max-width: 780px; } .slider-content-wrap .section-heading .section-title { font-size: clamp(40px, 4.2vw, 72px); line-height: 1.08; text-wrap: balance; } .slider-content-wrap .section-heading { margin-bottom: 28px; } .slider-content-wrap .bottom-content { padding-left: 0; max-width: 620px; } .slider-content-wrap .bottom-content .antra-desc { margin-bottom: 36px; } .slider-content-wrap .bottom-content .antra-desc p { font-size: 19px; line-height: 1.65; opacity: .9; } @media only screen and (max-width: 991px) { .slider-content-wrap { padding: 190px 0 100px; } .slider-content-wrap .slider-content { max-width: 620px; } } @media only screen and (max-width: 767px) { .slider-content-wrap { padding: 150px 0 70px; } .slider-content-wrap .slider-content, .slider-content-wrap .bottom-content { max-width: 100%; margin: 0 auto; } .slider-content-wrap .section-heading .section-title { font-size: 34px; } .slider-content-wrap .bottom-content .antra-desc p { font-size: 16px; } } /* Ledwark gallery section */ .ledwark-gallery-head { margin-bottom: 60px; row-gap: 30px; } .ledwark-gallery-head .section-heading .section-title { margin-bottom: 0; } .ledwark-gallery-head .gallery-head-content { padding-left: 30px; border-left: 2px solid var(--tl-color-theme-primary); } .ledwark-gallery-head .gallery-head-content p { color: var(--tl-color-text-body); font-size: 17px; line-height: 1.7; margin-bottom: 28px; } @media only screen and (max-width: 991px) { .ledwark-gallery-head { margin-bottom: 40px; } } .ledwark-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 24px; } .ledwark-gallery-grid .gallery-card { position: relative; border-radius: 24px; overflow: hidden; } .ledwark-gallery-grid .gallery-card.gallery-card-wide { grid-column: span 2; } .ledwark-gallery-grid .gallery-card.gallery-card-tall { grid-row: span 2; } .ledwark-gallery-grid .gallery-card a { display: block; width: 100%; height: 100%; } .ledwark-gallery-grid .gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; } .ledwark-gallery-grid .gallery-card:hover img { transform: scale(1.07); } .ledwark-gallery-grid .gallery-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 28px; background: linear-gradient(180deg, rgba(16, 8, 1, 0) 40%, rgba(16, 8, 1, .75) 100%); opacity: 0; transition: opacity .4s ease; } .ledwark-gallery-grid .gallery-card:hover .gallery-card-overlay { opacity: 1; } .ledwark-gallery-grid .gallery-card-tag { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--tl-color-common-white); background: var(--tl-color-theme-primary); border-radius: 100px; padding: 5px 14px; margin-bottom: 12px; transform: translateY(15px); transition: transform .4s ease; } .ledwark-gallery-grid .gallery-card-title { color: var(--tl-color-common-white); font-size: 24px; font-weight: 400; margin: 0; transform: translateY(15px); transition: transform .4s ease .05s; } .ledwark-gallery-grid .gallery-card:hover .gallery-card-tag, .ledwark-gallery-grid .gallery-card:hover .gallery-card-title { transform: none; } .ledwark-gallery-grid .gallery-card-icon { position: absolute; top: 24px; right: 24px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tl-color-common-white); color: var(--tl-color-heading-primary); font-size: 18px; transform: scale(.6); opacity: 0; transition: all .4s ease; } .ledwark-gallery-grid .gallery-card:hover .gallery-card-icon { transform: none; opacity: 1; } /* Touch screens have no hover: keep captions visible */ @media (hover: none) { .ledwark-gallery-grid .gallery-card-overlay { opacity: 1; } .ledwark-gallery-grid .gallery-card-tag, .ledwark-gallery-grid .gallery-card-title { transform: none; } } @media only screen and (max-width: 1199px) { .ledwark-gallery-grid { grid-auto-rows: 230px; gap: 20px; } } @media only screen and (max-width: 991px) { .ledwark-gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 575px) { .ledwark-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; gap: 16px; } .ledwark-gallery-grid .gallery-card.gallery-card-wide { grid-column: auto; } .ledwark-gallery-grid .gallery-card.gallery-card-tall { grid-row: auto; } .ledwark-gallery-grid .gallery-card-overlay { padding: 20px; } .ledwark-gallery-grid .gallery-card-title { font-size: 20px; } } /* Contact form */ .request-form-wrap .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .request-form-wrap .form-messages { margin-top: 20px; font-size: 16px; color: var(--tl-color-common-white); } .request-form-wrap .form-messages:empty { display: none; } .request-form-wrap .form-messages.alert-success { color: #8cc747; } .request-form-wrap .form-messages.alert-danger { color: #ff6b7d; } .request-form-wrap .tl-primary-btn:disabled { opacity: .6; cursor: wait; } .request-form-wrap .form-item .form-control { color: var(--tl-color-common-white); } /* Mobile menu button (menu links are hidden by the theme at 992px and below) */ .ledwark-menu-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(28, 28, 29, .12); background: var(--tl-color-common-white); color: var(--tl-color-heading-primary); font-size: 18px; align-items: center; justify-content: center; transition: all .3s ease; } .ledwark-menu-toggle:hover { background: var(--tl-color-theme-primary); border-color: var(--tl-color-theme-primary); color: var(--tl-color-common-white); } @media only screen and (max-width: 992px) { .ledwark-menu-toggle { display: inline-flex; } } @media only screen and (max-width: 575px) { .header .primary-header-inner .header-right-wrap .header-btn-wrap { display: none; } } /* Keep section tops clear of the sticky header when jumping from a link */ section[id] { scroll-margin-top: 90px; } /* Sticky WhatsApp button (bottom right) */ .ledwark-whatsapp { position: fixed; right: 50px; bottom: 50px; z-index: 101; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #25d366; color: #fff; font-size: 30px; box-shadow: 0 10px 30px rgba(37, 211, 102, .35); transition: transform .3s ease, box-shadow .3s ease; } .ledwark-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: #25d366; z-index: -1; animation: ledwarkWhatsappPulse 2.4s ease-out infinite; } @keyframes ledwarkWhatsappPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } } .ledwark-whatsapp:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(37, 211, 102, .45); } .ledwark-whatsapp-label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%); white-space: nowrap; pointer-events: none; background-color: var(--tl-color-heading-primary); color: #fff; font-family: var(--tl-ff-body); font-size: 14px; line-height: 1; padding: 10px 14px; border-radius: 100px; opacity: 0; visibility: hidden; transition: all .3s ease; } .ledwark-whatsapp:hover .ledwark-whatsapp-label { opacity: 1; visibility: visible; transform: translate(0, -50%); } @media only screen and (max-width: 992px) { .ledwark-whatsapp { right: 30px; bottom: 30px; } } @media only screen and (max-width: 767px) { .ledwark-whatsapp { right: 20px; bottom: 20px; width: 54px; height: 54px; font-size: 28px; } .ledwark-whatsapp-label { display: none; } } @media (prefers-reduced-motion: reduce) { .ledwark-whatsapp::before { animation: none; } } /* Menu typography: the heading font (Cal Sans) only has one heavy weight, so navigation uses the body font (Golos Text) at a medium weight. */ .header .primary-header-inner .header-menu-wrap ul li a { font-family: var(--tl-ff-body); font-size: 16px; font-weight: 550; letter-spacing: .1px; } .header .primary-header-inner .header-right-wrap .header-contact .content .call-number { font-family: var(--tl-ff-body); font-weight: 600; font-size: 16px; } .mean-container .mean-nav.mean-nav > ul li a { font-family: var(--tl-ff-body); font-weight: 550; } /* Section spacing: template default is 130px top and bottom, plus 65px above section headings on desktop. Reduced to a tighter, consistent rhythm. */ .pt-130 { padding-top: 100px; } .pb-130 { padding-bottom: 100px; } .process-section { padding-top: 100px; padding-bottom: 100px; } .process-section.process-6 { padding: 100px 0; } .request-wrap { padding-top: 40px; } .section-heading-wrap { padding-top: 30px; margin-bottom: 50px; } .counter-section.counter-1 { padding-top: 72px; padding-bottom: 72px; } @media only screen and (max-width: 1199px) { .pt-130, .process-section, .process-section.process-6 { padding-top: 80px; } .pb-130, .process-section, .process-section.process-6 { padding-bottom: 80px; } } @media only screen and (max-width: 992px) { .pt-130, .process-section, .process-section.process-6 { padding-top: 70px; } .pb-130, .process-section, .process-section.process-6 { padding-bottom: 70px; } .section-heading-wrap { padding-top: 0; margin-bottom: 40px; } .request-wrap { padding-top: 20px; } } @media only screen and (max-width: 767px) { .pt-130, .process-section, .process-section.process-6 { padding-top: 56px; } .pb-130, .process-section, .process-section.process-6 { padding-bottom: 56px; } .section-heading-wrap { margin-bottom: 32px; } .counter-section.counter-1 { padding-top: 48px; padding-bottom: 48px; } } /* Header layout: logo | menu | phone + button, with equal space on both sides of the menu (centred between the logo and the phone number, not across the whole row). Flexbox keeps a 32px minimum gap so nothing overlaps on narrower screens. */ .header .primary-header-inner { flex-wrap: nowrap; column-gap: 32px; justify-content: space-between; } .header .primary-header-inner .header-left-wrap { display: contents; } .header .primary-header-inner .header-logo { flex: 0 0 auto; } .header .primary-header-inner .header-menu-wrap { flex: 0 0 auto; justify-content: center; } .header .primary-header-inner .header-right-wrap { flex: 0 0 auto; justify-content: flex-end; } /* Contact form: Project Type dropdown (theme converts