* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
            

        
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
        }

        :root {
        --teal: #4ecdc4;
        --teal-light: rgba(78,205,196,0.12);
        --teal-border: rgba(78,205,196,0.45);
        --dark: #1a2634;
        --mid: #4a5a6a;
        --light: #f7f9fb;
        --white: #ffffff;
        }

        body {
            background: #f3f0f0;
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
        }

        /* Navbar */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 10%;
            position: sticky;
            top: 0;
            background: rgb(50, 177, 166);
            backdrop-filter: blur(10px);
            z-index: 1000;
            flex-wrap: wrap;
        }

        nav h1 {
            color: #38bdf8;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }

        nav a {
            text-decoration: none;
            color: #e2e8f0;
            font-weight: bold;
        }

        nav a:hover {
            color: #4ec458;
        }



        /* Hero */
        .hero {
            position: relative;
            height: 80vh;
            overflow: hidden;
        }

        .slider {

            height: 100%;
            position: relative;
        }

        .slide {
            flex-wrap: wrap;
            position: absolute;
            width: 100%;
            height: 100%;
    
            display: flex;
            justify-content: flex-start;
            align-items: center;

            opacity: 0;
            transition: opacity 0.5s ease-in-out;

            background-size: cover;
            background-position: center;
        }

        /* Different backgrounds */
        .slide:nth-child(1) {
            background: linear-gradient(rgba(120,193,73,0.4), rgba(120,193,73,0.6)),
            url("images/intervew.jpg");
        }

        .slide:nth-child(2) {
            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
            url("images/generic_hr.jpg");
        }

        .slide:nth-child(3) {
            background: linear-gradient(rgba(50,177,166,0.4), rgba(50,177,166,0.6)),
            url("images/generic_hr2.jpg");
        }

        .slide.active {
            opacity: 1;
        }

        .slide h2 {
            font-size: 48px;
            margin-left: 15%;
            max-width: 25%;
            color: #f3f0f0;
        }



        /* Arrows */
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            background: rgba(44, 44, 44, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
        }

        .prev { left: 20px; }
        .next { right: 20px; }

        .prev:hover, .next:hover {
            background: rgba(31, 30, 30, 0.5);
            transition: background-color 0.5s ease;

        }

   

        .btn {
            padding: 12px 25px;
            border-radius: 8px;
            border: none;
            background: #38bdf8;
            color: #565a64;
            cursor: pointer;
        }

        /* About */
        .about {
            display: flex;
            text-align: center;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }


        .about-text p {
            color: #94a3b8;
            max-width: 50%;
            margin-left: 25%;
            margin-top: 40px;
            min-width: 280px;
            flex: 1;
            font-size: 0.95rem;
            line-height: 1.75;
            color: var(--mid);
            font-weight: 300;

        }

        .about-text h2 {
            color: black;
            margin-top: 45px;
            max-width: 100%;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2.4rem, 5vw, 3.8rem);
            font-weight: 300;
            letter-spacing: 0.04em;
            color: var(--dark);
            margin-bottom: 14px;
        }


        @media (max-width: 1024px) {
        .about {
            flex-direction: column;
            height: auto; /* override fixed height */
            align-items: center;
        }

        .about-text h2 {
            margin-top: 5%;
            margin-left: 0;
            text-align: center;
        }

        .about-text p {
            max-width: 90%;
            margin-left: 5%;
            text-align: center;
        }

        .about img {
            width: 50%;
            margin: 20px 0;
        }
    }

    /* Phones *

      /* ── Section wrapper ── */
    .services-section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 80px 24px 100px;
    }

    /* ── Header ── */
    .services-header {
      text-align: center;
      margin-bottom: 64px;
    }

    .services-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      font-weight: 300;
      letter-spacing: 0.04em;
      color: var(--dark);
      margin-bottom: 14px;
    }

    .header-rule {
      display: block;
      width: 32px;
      height: 2px;
      background: var(--teal);
      margin: 0 auto 20px;
      border: none;
    }

    .services-header p {
      max-width: 520px;
      margin: 0 auto;
      font-size: 0.95rem;
      line-height: 1.75;
      color: var(--mid);
      font-weight: 300;
    }

    /* ── Three-column grid ── */
    .services-grid {
      display: grid;
      grid-template-columns: 1fr 260px 1fr;
      grid-template-rows: auto auto;
      gap: 52px 32px;
      align-items: center;
    }

    /* ── Individual service card ── */
    .service-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .service-card.visible {
    opacity: 1;
    transform: translateY(0);
    }

    /* Remove the old animation-delay lines and replace with transition-delay */
    .card-left-1  { grid-column: 1; grid-row: 1; transition-delay: 0.10s; }
    .card-right-1 { grid-column: 3; grid-row: 1; transition-delay: 0.20s; }
    .card-left-2  { grid-column: 1; grid-row: 2; transition-delay: 0.30s; }
    .card-right-2 { grid-column: 3; grid-row: 2; transition-delay: 0.40s; }

    .service-card:hover .icon-box {
      background: rgba(78,205,196,0.22);
      transform: scale(1.07);
    }

    .icon-box svg {
      width: 26px;
      height: 26px;
      stroke: var(--teal);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Text */
    .service-text h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem;
      font-weight: 600;
      line-height: 1.35;
      color: var(--dark);
      margin-bottom: 8px;
    }

    .service-text p {
      font-size: 0.875rem;
      line-height: 1.7;
      color: var(--mid);
      font-weight: 300;
    }

    /* ── Centre image column ── */
    .col-center {
      grid-column: 2;
      grid-row: 1 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .person-img {
        width: 100%;
        max-width: 280px;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 8px 32px rgba(0,0,0,0.10));
        opacity: 0;  /* stays hidden until .visible is added */
    }

    .person-img.visible {
    animation: riseIn 0.7s ease forwards;
    }

  /* ── Animations ── */
    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }



    /* CTA */
    .cta {
        margin-top: 3vh;
        margin-bottom: 10vh;
        text-align: center;
    }

    .cta h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2.4rem, 3vw, 3.8rem);
        font-weight: 300;
        letter-spacing: 0.02em;
        color: var(--dark);
        margin-bottom: 14px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.55s ease, transform 0.55s ease;
        transition-delay: 0.05s;
    }

    .cta h2.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .cta h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2rem, 2vw, 3.8rem);
        font-weight: 250;
        letter-spacing: 0.02em;
        color: var(--dark);
        margin-bottom: 14px;
    }
    
    .cta h4 {
        margin-left: 270px;
    }

    .email-btn {
        cursor: default;
        border: none;
        font-family: inherit;
    }

    .email-label {
        font-family: 'DM Sans', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        color: var(--teal);
        letter-spacing: 0.01em;
    }


    .stat {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.55s ease, transform 0.55s ease;
        transition-delay: 0.2s;
    }

    .stat.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
         width: 52px;
        height: 52px;
        border: 1.5px solid var(--teal-border);
        border-radius: 14px;
        background: var(--teal-light);
        color: var(--teal);
        text-decoration: none;
            transition: background 0.25s, transform 0.25s, color 0.25s;
    }

    .social-link:hover {
        background: rgba(78, 205, 196, 0.22);
        transform: scale(1.08);
    }

    .social-link svg {
        width: 22px;
        height: 22px;
    }

    footer {
        text-align: center;
        padding: 30px;
        color: #64748b;
    }



    
    @media (max-width: 768px) {
        nav {
            height: auto;
            padding: 18px 16px 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            text-align: center;
        }

        nav h1 {
            margin: 0;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        nav h1 img,
        nav img {
            max-width: 170px;
            height: auto;
            display: block;
        }

        nav ul {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            list-style: none;
        }

        nav ul li {
            margin: 0;
            padding: 0;
        }

        nav ul li a {
            font-size: 0.9rem;
            padding: 6px 4px;
            display: block;
            white-space: nowrap;
        }
                /* Hero */
        .slide h2 {
            font-size: 1.5rem;
            margin-left: 5%;
            max-width: 85%;
            line-height: 1.35;
        }

        /* About */
        .about {
            flex-direction: column;
            height: auto;
            padding: 20px;
        }

        .about-text h2 {
            margin-top: 0;
            margin-left: 0;
            font-size: 1.8rem;
            text-align: center;
        }

        .about-text p {
            max-width: 100%;
            margin-left: 0;
            text-align: center;
            font-size: 0.95rem;
        }

        .about img {
            width: 80%;
            margin: 20px 0;
        }
        /* Services */
        .services-section {
            padding: 48px 20px 64px;
        }

        .services-header {
            margin-bottom: 40px;
        }

        .services-grid {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .col-center {
            display: none;
        }

        .service-card {
            flex-direction: row;
            text-align: left;
        }
        
        .icon-box {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }

        /* CTA — both sections */
        .cta {
            padding: 40px 20px;
            text-align: center;
        }

        .cta h2 {
            font-size: clamp(1.6rem, 6vw, 2.4rem);
        }

        .cta h3 {
            font-size: clamp(1.2rem, 5vw, 1.8rem);
            line-height: 1.3;
            margin-bottom: 12px;
            /* Remove any inherited margin */
            margin-left: 0;
        }

        .cta h4 {
            margin-left: 0;    /* fixes the 270px desktop value */
            font-size: 1rem;
            line-height: 1.5;
        }

        /* Social / email row */
        .stat {
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .email-btn {
            width: 52px;
            
        }

        .email-label {
            font-size: 0.85rem;
            word-break: break-all;
            text-align: center;
            width: 100%;
        }

    }