<?php

include 'hicashglobal.php';

?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Careers Page</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }

        body {
            background: #f5f7f9;
            color: #0a2540;
        }

        /* HERO */
        .hero {
            text-align: center;
            padding: 60px 10%;
        }

        .hero h1 {
            font-size: 48px;
        }

        .hero h2 {
            color: #00b663;
            font-size: 42px;
            margin-bottom: 40px;
        }

        .video-box {
            position: relative;
            max-width: 900px;
            margin: auto;
        }

        .video-box img {
            width: 100%;
            border-radius: 10px;
        }

        .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0a2540;
            color: white;
            padding: 18px 22px;
            border-radius: 50%;
            font-size: 24px;
        }

        .hero-text {
            display: flex;
            gap: 40px;
            margin-top: 40px;
            text-align: left;
        }

        .hero-text .left {
            flex: 1;
            font-size: 24px;
            font-weight: 600;
        }

        .hero-text .right {
            flex: 1;
            line-height: 1.7;
        }

        /* FORMULA */
        .formula {
            background: white;
            padding: 70px 10%;
            text-align: center;
        }

        .formula-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-top: 40px;
        }

        .item {
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }

        /* QUOTE */
        .quote-section {
            display: flex;
            margin-top: 60px;
        }

        .quote-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .quote-img {
            flex: 1;
        }

        .quote-text {
            flex: 1;
            background: #001a33;
            color: white;
            padding: 80px;
            font-size: 22px;
        }

        /* CAREER */
        .career {
            padding: 70px 10%;
        }

        .career-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
        }

        .card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .card h3 {
            padding: 20px;
        }

        .card p {
            padding: 0 20px 20px;
        }

        /* BENEFITS */
        .benefits {
            padding: 70px 10%;
        }

        .benefit-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 40px;
        }

        .bottom-img {
            width: 100%;
            border-radius: 10px;
        }

        /* RESPONSIVE */
        @media(max-width:900px) {

            .hero-text,
            .quote-section {
                flex-direction: column;
            }

            .formula-grid,
            .career-grid,
            .benefit-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

</head>

<body>

    <!-- HERO -->
    <section class="hero">
        <h1>Ambitious?</h1>
        <h2>So are we.</h2>

        <div class="video-box">
            <img src="https://images.unsplash.com/photo-1552581234-26160f608093" alt="">
            <div class="play-btn">▶</div>
        </div>

        <div class="hero-text">
            <div class="left">
                <h3>Infinite ambitions. One financial technology platform.</h3>
            </div>
            <div class="right">
                <p>
                    When we launched in 2006, our ambition was simple: help businesses grow. We started with payments,
                    taking an engineering-first approach to solving some of the most complex challenges. Today, we are
                    the preferred financial technology platform of many of the world's leading brands. We did this by
                    working with exceptional talent, prioritising success over ego, and having fun along the way.

                </p>
                <p>To continue driving towards our long-term ambitions, we’re looking for innovative problem solvers,
                    strategic thinkers, and colleagues we can count on.

                </p>
            </div>
        </div>
    </section>

    <!-- FORMULA -->
    <section class="formula">
        <h2>The Hicash Formula</h2>
        <div class="formula-grid">
            <div class="item">We build to benefit all customers</div>
            <div class="item">We make good decisions</div>
            <div class="item">We launch fast and iterate</div>
            <div class="item">Winning is more important than ego</div>
            <div class="item">We don’t hide behind email</div>
            <div class="item">We talk straight</div>
            <div class="item">We seek different perspectives</div>
            <div class="item">We create our own path</div>
        </div>
    </section>

    <!-- QUOTE -->
    <section class="quote-section">
        <div class="quote-img">
            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c">
        </div>
        <div class="quote-text">
            <p>
                “We are not led by short-term trends, and hire specifically to meet our long-term needs. To scale our
                culture of speed and autonomy as we grow, we keep our talent standards high and only hire exceptional
                people that quickly gain traction.”
            </p>
            <span>– CEO</span>
        </div>
    </section>

    <!-- CAREER TYPES -->
    <section class="career">
        <h2>Career types</h2>

        <div class="career-grid">

            <div class="card">
                <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c">
                <h3>Tech</h3>
                <p>Our engineers are setting the bar for the future of financial technology. We’re looking for talented
                    problem solvers to help address our unique set of challenges and make a global impact.</p>
                <!-- <a href=""> More info on tech careers</a> -->
            </div>

            <div class="card">
                <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f">
                <h3>Commercial</h3>
                <p>Our sales and marketing teams increase awareness about Adyen, guide companies through complex
                    financial landscapes, and help them find the best solution for their business.
                    
                </p>
                <!-- <a href="">More info commercial careers</a> -->
            </div>

            <div class="card">
                <img src="https://images.unsplash.com/photo-1531482615713-2afd69097998">
                <h3>Product</h3>
                <p>As impactful multi-taskers, our product teams work with the biggest brands in the world to define
                    where we go next and see each solution through its entire lifecycle.

                </p>
                <!-- <a href="">More info on product careers</a> -->
            </div>

        </div>
    </section>

    <!-- BENEFITS -->
    <section class="benefits">
        <h2>Our benefits</h2>

        <div class="benefit-grid">
            <div>
                <h3>The essentials</h3>
                <p>Benefits that make working and living–wherever in the world you are–more harmonious. This includes health insurance, commute allowance, lunch in the office, and benefits mandated by local governments.

</p>
            </div>
            <div>
                <h3>Hicash</h3>
                <p>Hicash is a significant monthly financial contribution that all employees receive to spend on their own individual needs. This includes childcare, language courses, and working from home setups.

</p>
            </div>
            <div>
                <h3>The way we work</h3>
                <p>We believe that in-person collaboration is the best route to building genuine connection. We’re an office-first company that offers flexibility when needed. We trust our team to act with autonomy and make good choices.

</p>
            </div>
        </div>

        <img class="bottom-img" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d">

    </section>

    <?php


include 'mainseesion.php';
include 'footer.php';

?>

</body>

</html>