:root {
      --primary: #0f4c5c;
      --secondary: #1f7a8c;
      --accent: #e36414;
      --light: #f7f9fb;
      --dark: #1c1c1c;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      transition: all ease-in-out 250ms;
    }

    body {
      color: var(--dark);
      line-height: 1.6;
      background-color: #ffffff;
    }

    lord-icon {
        display: block;
        margin: 0 auto;
    }

    .burger { display: none; }

    .container {
      width: 90%;
      max-width: 1100px;
      margin: auto;
    }

    nav {
        background: #000000b5;
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        backdrop-filter: blur(10px);
        text-align: center;
    }
    nav * { display: inline-block; vertical-align: middle; }
    nav .logo {
        filter: invert(100%);
        max-width: 225px;
        height: auto;
        width: 100%;
        margin-right: 25px;
    }
    nav li { margin: 0 10px;}
    nav a { text-decoration: none; color: #fff; padding: 7px;}
    nav a:not(.active):hover {
        color: var(--accent);
    }
    nav a.active {
        background: var(--accent);
        border-radius: 3px;
    }
   nav.hidden {
        transform: translateY(-100%) !important; /* Move the navbar completely out of the viewport */
    }

    /* HERO WITH LAKE IMAGE */
    header {
      background: linear-gradient(rgb(15 61 92 / 29%), rgb(0 0 0 / 85%)), url(66d73a47_2b71_4099_a594_ba9ae92ecaab_7d856696-96f0-4d4b-a9f3-855d40e27276.jpg);
      background-size: cover;
      background-position: center;
      color: white;
      padding: 200px 0;
      text-align: center;
      margin-top: 55px;
    }

    header h1 {
      font-size: 3.6rem;
      line-height: 3.6rem;
      margin-bottom: 15px;
    }

    header p {
      font-size: 1.15rem;
      max-width: 720px;
      margin: 0 auto 30px;
    }

    .btn {
      display: inline-block;
      padding: 14px 28px;
      background-color: var(--accent);
      color: white;
      text-decoration: none;
      border-radius: 30px;
      font-weight: bold;
      margin: 5px;
    }

    .btn.secondary {
      background-color: transparent;
      border: 2px solid white;
    }

    .btn:hover {
      transform: scale(1.05);
    }

    //word cycling in header
    #word {
        transition: opacity .5s ease-in-out;
        display: inline-block;
        min-width: 120px;
        text-align: center;
    }

    section {
      padding: 80px 0;
    }

    section.light {
      background:
        linear-gradient(rgba(247, 249, 251, 0.95), rgba(247, 249, 251, 0.95)),
        url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee");
      background-size: cover;
      background-position: center;
    }

    h2 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 2rem;
      color: var(--primary);
    }

    .about p {
      max-width: 820px;
      margin: auto;
      text-align: center;
      font-size: 1.05rem;
    }

    /* SERVICES */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
    }

    .service-box {
      background: white;
      padding: 30px;
      border-radius: 6px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.06);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .service-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 4px;
      width: 100%;
      background: linear-gradient(90deg, var(--secondary), var(--accent));
    }

    .service-box h3 {
      margin-bottom: 10px;
      color: var(--secondary);
    }

    /* WHY SECTION */
    .why ul {
      max-width: 600px;
      margin: auto;
      list-style: none;
    }

    .why li {
      padding: 14px 0;
      border-bottom: 1px solid #ddd;
    }

    .why img {
        margin-top: 75px;
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    .why li img {
        margin: auto;
        width: auto;
        max-width: 23px;
        margin-right: 8px;
    }

    /* PROCESS */
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      text-align: center;
    }

    .step {
      padding: 20px;
      background: rgba(255,255,255,0.85);
      border-radius: 6px;
    }

    /* CTA WITH WATER FEEL */
    .cta {
      background:
        linear-gradient(rgba(15, 76, 92, 0.85), rgba(15, 76, 92, 0.9)),
        url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e");
      background-size: cover;
      background-position: center;
      color: white;
      text-align: center;
    }

    .cta h2 {
      color: white;
      font-size: 3rem;
      font-weight: 900;
      margin-bottom: 1.5rem;
    }

    footer {
      background: #0b2e36;
      color: #aaa;
      text-align: center;
      padding: 20px 0;
      font-size: 0.9rem;
    }

    body.contact {
        font-family: Arial;
        background: var(--light);
        background-size: cover;
        margin:0;
        padding: 25px;
    }
    .contact .container {
    max-width:700px; margin:80px auto;
    padding:40px;
    }
    .contact h1 { text-align:center; color:#0f4c5c; }
    form { display:grid; gap:15px; }
    input, textarea { padding:12px; border:1px solid #ccc; border-radius:4px; }
    button {
    background:#e36414; color:#fff; border:none;
    padding:14px; font-size:1rem; font-weight:bold;
    border-radius:4px; cursor:pointer;
    }
    .contact #response { text-align:center; margin-top:15px; }
    .contact .hidden { display:none; }
    .contact input[type="text"], .contact input[type="tel"], .contact input[type="email"], .contact textarea {
        background: none;
        border-top: none;
        border-right: none;
        border-left: none;
    }
    .contact textarea { height: 100px; }

    .page .container {
      max-width: 1200px;
      margin: auto;
      padding: 4rem 2rem;
    }

    /* HERO */
    .page .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      color: #fff;
    }
    .ecomm .hero {
      background: linear-gradient(rgba(2,6,23,0.65), rgba(2,6,23,0.65)),
        url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d') center/cover no-repeat;
    }
    .ads .hero {
      background: linear-gradient(rgba(2,6,23,0.65), rgba(2,6,23,0.65)),
        url('https://images.unsplash.com/photo-1537731121640-bc1c4aba9b80') center/cover no-repeat;
    }
    .seo .hero {
      background: linear-gradient(rgba(2,6,23,0.65), rgba(2,6,23,0.65)),
        url('https://images.unsplash.com/photo-1686061594183-8c864f508b00') center/cover no-repeat;
    }
    .marketing .hero {
      background: linear-gradient(rgba(2,6,23,0.65), rgba(2,6,23,0.65)),
        url('https://images.unsplash.com/photo-1487014679447-9f8336841d58') center/cover no-repeat;
    }
    .smm .hero {
      background: linear-gradient(rgba(2,6,23,0.65), rgba(2,6,23,0.65)),
        url('https://images.unsplash.com/photo-1675352161865-27816c76141a') center/cover no-repeat;
    }

    .page .hero h1 {
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .page .hero p {
      font-size: 1.25rem;
      max-width: 600px;
      margin-bottom: 2rem;
    }

    /* SECTION HEADERS */
    .page .section-title {
      //font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 1rem;
    }

    .page .section-subtitle {
      margin-bottom: 3rem;
      color: #475569;
      text-align: center;
    }

    /* SERVICES */
    .page .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
    }

    .page .service {
      background: #fff;
      padding: 2.5rem;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    }

    .page .service h3 {
      margin-bottom: 1rem;
      //font-size: 1.4rem;
    }

    /* WHY */
    .page .why {
      background: var(--dark);
      background: linear-gradient(rgb(15 61 92 / 29%), rgb(0 0 0 / 85%)), url(66d73a47_2b71_4099_a594_ba9ae92ecaab_7d856696-96f0-4d4b-a9f3-855d40e27276.jpg);
      background-size: cover;
      background-position: center;
      color: #fff;
    }

    .page .why h2 { color: #fff; }

    .page .why ul {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .page .why li {
      background: rgba(255,255,255,0.05);
      padding: 1.5rem;
      border-radius: 10px;
    }

    /* PROCESS */
    .page .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .page .step {
      background: #f1f1f1;
      padding: 2rem;
      border-left: 6px solid var(--accent);
      border-radius: 8px;
    }

    /* CTA */
    .page .cta {
      color: #fff;
      text-align: center;
      padding: 6rem 2rem;
    }
    .ecomm .cta {
      background: linear-gradient(rgba(2,6,23,0.8), rgba(2,6,23,0.8)),
        url('https://images.unsplash.com/photo-1553877522-43269d4ea984') center/cover no-repeat;
    }
    .ads .cta {
      background: linear-gradient(rgba(2,6,23,0.8), rgba(2,6,23,0.8)),
        url('https://images.unsplash.com/photo-1518734549841-b417d28c22aa') center/cover no-repeat;
    }
    .seo .cta {
      background: linear-gradient(rgba(2,6,23,0.8), rgba(2,6,23,0.8)),
        url('https://images.unsplash.com/photo-1460925895917-afdab827c52f') center/cover no-repeat;
    }
    .marketing .cta {
      background: linear-gradient(rgba(2,6,23,0.8), rgba(2,6,23,0.8)),
        url('https://images.unsplash.com/photo-1482440308425-276ad0f28b19') center/cover no-repeat;
    }

    

    @media (max-width: 1000px) {
        nav { padding: 0; }
        nav .logo { display: block; margin: 0; }
        
        nav ul, nav li { display: block; width: 100%; margin:0; padding: 0; border-top: 1px solid #aaa; }
        nav li { border-top: 1px solid #000; padding: 10px; }
        nav li:first-of-type { border: none; }

        nav ul { display: none; transition: none; }
        nav ul.open { display: block; }

        .burger {
            border-radius: 4px;
            display: block;
            width: 25px;
            height: 25px;
            position: absolute;
            left: 20px;
            top: 15px;
            padding: 2px;
        }
        .burger .bar1, .burger .bar2, .burger .bar3 {
            display: block;
            width: 100%;
            background: #fff;
            height: 2px;
            position: absolute;
        }
        .burger .bar1 {
            top: 3px;
            left: 0;
        }
        .burger .bar2 {
            top: 12px;
            left: 3px;
            width:80%;
            height: 1px;
        }
        .burger .bar3 {
            bottom: 3px;
            left: 0;
        }
        .burger.open .bar1 {
            transform: rotate(-45deg);
            top: 13px;
            left: 0;
        }
        .burger.open .bar2 {
            opacity: 0;
        }
        .burger.open .bar3 {
            transform: rotate(45deg);
            top: 13px;
            left: 0;
        }

      .page .hero {
        text-align: center;
      }
    }

    @media (max-width: 600px) {
      header {
          padding: 90px 0;
      }
      header h1 {
        font-size: 2rem;
        line-height: 2rem;
      }
    }