:root {
    --navy: #071e3c;
    --blue: #008cf5;
    --cyan: #16b6ff;
    --ink: #112640
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: #fff
}

a {
    text-decoration: none;
    color: inherit
}

.header {
    height: 100px;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 12px 5%;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 12px #0a2b4914
}

.brand img {
    width: 245px;
    max-width: 100%;
    display: block
}

nav {
    display: flex;
    gap: 25px;
    align-items: center;
    margin: auto
}

nav a {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap
}

nav a:hover {
    color: var(--blue)
}

.header-actions {
    display: flex;
    gap: 10px;
    white-space: nowrap
}

.header-actions a,
.buttons a,
.contact-buttons a {
    border-radius: 40px;
    padding: 15px 23px;
    font-weight: 700;
    font-size: 14px
}

.whatsapp {
    background: #087f70;
    color: white
}

.call {
    background: var(--navy);
    color: white
}

.menu {
    display: none
}

.hero {
    min-height: 590px;
    background: linear-gradient(90deg, #061c39 0%, #061c39ed 29%, #071f3db0 53%, #061c3922 100%), url('assets/new-grill-banner.png') center right/cover;
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    padding: 65px 6%
}

.hero-content {
    max-width: 690px
}

.eyebrow,
.kicker {
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700
}

.eyebrow {
    color: #c4edff
}

.hero h1 {
    font-size: clamp(48px, 5.8vw, 88px);
    line-height: 1.03;
    letter-spacing: -3px;
    margin: 22px 0 12px
}

.hero h1 span {
    color: #1aaaff
}

.hero h2 {
    font-size: 23px;
    margin: 0 0 22px;
    font-weight: 500
}

.hero p {
    font-size: 17px;
    line-height: 1.65;
    color: #e5ecf5;
    max-width: 610px
}

.qualities {
    display: flex;
    gap: 25px;
    margin: 30px 0;
    font-weight: bold;
    text-transform: uppercase
}

.buttons,
.contact-buttons {
    display: flex;
    gap: 13px;
    flex-wrap: wrap
}

.primary {
    background: linear-gradient(110deg, #08b3f9, #0075e9);
    color: white;
    display: inline-block
}

.secondary {
    background: white;
    color: #09234a;
    display: inline-block
}

.hero-tag {
    position: absolute;
    right: 5%;
    bottom: 35px;
    background: #062a4bdf;
    border: 1px solid #ffffff50;
    padding: 18px 26px;
    border-radius: 16px
}

.hero-tag small {
    display: block;
    margin-top: 5px
}

.section {
    padding: 78px 6%;
    scroll-margin-top: 100px
}

.section h2 {
    font-size: clamp(30px, 3vw, 43px);
    margin: 12px 0 16px
}

.section h2 em {
    color: #0088ee;
    font-style: normal
}

.kicker {
    color: #008af0
}

.section-intro {
    max-width: 550px
}

.section-intro p,
.section>p {
    line-height: 1.7;
    color: #52677c
}

.services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 35px
}

.service {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 35px #00254b13;
    text-align: center;
    padding-bottom: 22px
}

.photo {
    height: 200px;
    background-size: cover;
    background-position: center
}

.grill,
.project-image {
    background-image: url('assets/invisible-grills.jpg')
}

.safety {
    background: linear-gradient(130deg, #04534ca8, #00b8b54f), repeating-linear-gradient(45deg, transparent 0 12px, #fff8 13px 15px, transparent 16px 25px), #008778
}

.sports {
    background: linear-gradient(140deg, #24a6ce99, #166a4d66), repeating-linear-gradient(90deg, #ffffff75 0 2px, transparent 2px 23px), #3a9a5d
}

.hanger {
    background: linear-gradient(135deg, #dce8ef, #b9d3e2);
    position: relative
}

.hanger:after {
    content: '♧  ♧  ♧';
    position: absolute;
    font-size: 70px;
    color: #405e76;
    top: 55px;
    left: 0;
    right: 0
}

.service h3 {
    font-size: 20px;
    margin: 20px 8px 6px
}

.service p {
    font-size: 14px;
    color: #51657c;
    padding: 0 15px;
    min-height: 40px
}

.service a {
    font-weight: bold;
    color: #007be6
}

.about {
    background: #eef7fc
}

.about p {
    max-width: 850px
}

.project-image {
    height: 310px;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    margin-top: 30px
}

.video {
    background: #f2f7fb;
    text-align: center
}

.video video {
    width: min(100%, 780px);
    max-height: 470px;
    background: #000;
    border-radius: 15px;
    display: block;
    margin: 30px auto 0
}

.contact {
    text-align: center
}

.contact-buttons {
    justify-content: center;
    margin: 30px 0
}

.contact .secondary {
    border: 1px solid #aac4d8
}

.contact-info {
    font-size: 15px
}

footer {
    background: #061b35;
    color: #e4f1ff;
    text-align: center;
    padding: 27px
}

.floating {
    position: fixed;
    right: 18px;
    bottom: 22px;
    display: grid;
    gap: 10px;
    z-index: 15
}

.floating a {
    display: grid;
    place-items: center;
    background: #0da768;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 26px;
    box-shadow: 0 5px 20px #0003
}

.floating a:last-child {
    background: #087bea
}

@media(max-width:1150px) {
    .header {
        gap: 15px
    }

    .brand img {
        width: 200px
    }

    nav {
        gap: 12px
    }

    nav a {
        font-size: 12px
    }

    .header-actions a {
        padding: 12px 15px
    }
}

@media(max-width:850px) {
    .header {
        height: 76px;
        justify-content: space-between
    }

    .brand img {
        width: 180px
    }

    .menu {
        display: block;
        background: none;
        border: 0;
        font-size: 27px;
        cursor: pointer
    }

    .header-actions {
        display: none
    }

    nav {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: white;
        padding: 20px;
        box-shadow: 0 12px 18px #0002;
        flex-direction: column;
        align-items: flex-start
    }

    nav.open {
        display: flex
    }

    .hero {
        min-height: 600px;
        padding: 65px 6%;
        background-position: 60% center
    }

    .hero h1 {
        letter-spacing: -1px
    }

    .hero-tag {
        display: none
    }

    .services {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:530px) {
    .hero {
        min-height: 610px;
        background: linear-gradient(90deg, #061c39ed, #061c39b8), url('assets/invisible-grills.jpg') center/cover
    }

    .hero h1 {
        font-size: 48px
    }

    .hero h2 {
        font-size: 19px
    }

    .hero p {
        font-size: 15px
    }

    .qualities {
        gap: 12px;
        font-size: 12px
    }

    .buttons a {
        width: 100%;
        text-align: center
    }

    .services {
        grid-template-columns: 1fr
    }

    .section {
        padding: 55px 6%
    }

    .photo {
        height: 220px
    }
}
/* EFT Enterprise — Service Photos */

.service .photo {
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service .photo.grill {
    background-image: url('assets/new-grill-banner.png');
}

.service .photo.safety {
    background-image: url('assets/safety-nets.jpg');
}

.service .photo.sports {
    background-image: url('assets/sports-nets.jpg');
}

.service .photo.hanger {
    background-image: url('assets/cloth-hangers.jpg');
}

.service .photo.hanger::after {
    display: none;
}

/* Use the clean banner on mobile too */

@media (max-width: 530px) {
    .hero {
        background:
            linear-gradient(90deg, #061c39ed, #061c39b8),
            url('assets/new-grill-banner.png') center / cover;
    }
}
.service .photo.grill {
    background-image: url('assets/grill-service.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service .photo.safety {
    background-image: url('assets/safety-nets.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service .photo.sports {
    background-image: url('assets/sports-nets.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* EFT Enterprise - Cloth Ceiling Hangers Photo */
.service .photo.hanger {
    background-image: url('assets/cloth-hangers.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service .photo.hanger::after {
    display: none !important;
}
/* Professional Invisible Grills Card */
.service-grill {
    text-align: left;
}

.service-grill .service-details {
    position: relative;
    padding: 30px 24px 24px;
}

.service-grill .service-icon {
    position: absolute;
    top: -34px;
    left: 20px;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0878f9;
    color: white;
    font-size: 32px;
    border: 4px solid white;
}

.service-grill h3 {
    margin: 8px 0 12px;
    color: #071e3c;
    font-size: 23px;
}

.service-grill .service-details p {
    color: #52637b;
    line-height: 1.6;
    min-height: 100px;
}

.service-grill .service-benefits {
    list-style: none;
    padding: 0;
    margin: 18px 0 24px;
}

.service-grill .service-benefits li {
    margin: 10px 0;
    color: #40536d;
}

.service-grill .service-benefits li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    margin-right: 10px;
    border-radius: 50%;
    background: #0878f9;
    color: white;
    font-weight: bold;
}

.service-grill a.service-button {
    display: block;
    padding: 16px;
    border-radius: 40px;
    background: #0878f9;
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}

.service-grill a.service-button:hover {
    background: #005fc9;
}
<article class="service service-grill">
    <div class="photo safety"></div>

    <div class="service-details">
        <span class="service-icon">✓</span>

        <h3>Safety Nets</h3>

        <p>
            Reliable safety nets for balconies,
            windows and open spaces.
            Protection for children, pets and families.
        </p>

        <ul class="service-benefits">
            <li>Balcony Safety Protection</li>
            <li>Child and Pet Safety</li>
            <li>Strong and Durable Materials</li>
        </ul>

        <a class="service-button" href="#contact">
            Enquire Now →
        </a>
    </div>
</article>
<section id="projects" class="section projects-section">

    <div class="section-intro">
        <span class="kicker">OUR WORK</span>
        <h2>Explore Our <em>Projects</em></h2>
        <p>
            Explore examples of modern safety and
            space-saving solutions for your home.
        </p>
    </div>

    <div class="projects-grid">

        <article class="project-card">
            <img src="assets/invisible-grills.jpg"
                 alt="Invisible grills for balconies">

            <div class="project-content">
                <h3>Invisible Grill Solutions</h3>
                <p>Modern balcony protection with clear views.</p>
            </div>
        </article>

        <article class="project-card">
            <img src="assets/safety-nets.png"
                 alt="Balcony safety net example">

            <div class="project-content">
                <h3>Balcony Safety Nets</h3>
                <p>Protective netting for residential spaces.</p>
            </div>
        </article>

        <article class="project-card">
            <img src="assets/cloth-hangers.png"
                 alt="Ceiling cloth hanger example">

            <div class="project-content">
                <h3>Ceiling Cloth Hangers</h3>
                <p>Smart and convenient clothes drying solutions.</p>
            </div>
        </article>

    </div>

</section>
/* EFT ENTERPRISE - MODERN ABOUT SECTION */

.about-modern {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 45px;
    padding: 85px 6%;
    background: #f0f9ff;
}

/* EFT ENTERPRISE - ABOUT US DESIGN */

.about-modern {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 45px;
    padding: 80px 6%;
    background: #f0f9ff;
}

.about-content h2 {
    font-size: clamp(32px, 4vw, 52px);
    color: #102642;
    margin: 18px 0;
}

.about-content h2 span {
    color: #0788f5;
}

.about-description,
.about-services-text {
    color: #526782;
    line-height: 1.8;
    font-size: 16px;
}

.about-subtitle {
    color: #102642;
    margin-top: 25px;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.about-feature {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.about-feature span {
    color: #0788f5;
    font-size: 25px;
}

.about-feature h3 {
    font-size: 17px;
    margin: 8px 0;
    color: #102642;
}

.about-feature p {
    font-size: 14px;
    color: #526782;
}

.about-quote {
    display: inline-block;
    background: #087cf5;
    color: white;
    padding: 16px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
}

.about-visual {
    position: relative;
}

.about-main-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 25px;
}

.about-image-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #102642;
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
}

@media (max-width: 850px) {
    .about-modern {
        grid-template-columns: 1fr;
        padding: 50px 5%;
    }

    .about-main-image {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .about-features {
        grid-template-columns: 1fr;
    }
}