/*
			Services page styles

			All styles are scoped under .bubbly-services so they do not
			interfere with the header, footer or other website pages.
		*/

		.bubbly-services {
			width: auto;
			margin: 0;
			padding: 48px 52px 60px;
			color: #53656d;
			box-sizing: border-box;
		}

		.bubbly-services * {
			box-sizing: border-box;
		}

		/* Page heading */

		.services-heading {
			margin: 0 0 38px;
			padding: 0 0 28px;
			border-bottom: 1px solid #d7e1e5;
		}

		.services-eyebrow {
			display: block;
			margin: 0 0 12px;

			color: #1684a5;
			font-size: 12px;
			font-weight: bold;
			line-height: 18px;
			letter-spacing: 2px;
			text-transform: uppercase;
		}

		.services-heading h1 {
			max-width: 780px;
			margin: 0;

			color: #102e3b;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 42px;
			font-weight: bold;
			line-height: 49px;
		}

		.services-heading p {
			max-width: 800px;
			margin: 18px 0 0;

			color: #65777f;
			font-size: 15px;
			line-height: 26px;
		}

		/* Featured image and introduction */

		.services-feature {
			display: table;
			width: 100%;
			table-layout: fixed;

			margin: 0 0 38px;
			padding: 0 0 38px;

			border-bottom: 1px solid #d7e1e5;
		}

		.services-image,
		.services-introduction {
			display: table-cell;
			vertical-align: middle;
		}

		.services-image {
			width: 47%;
			padding-right: 36px;
		}

		.services-image-frame {
			position: relative;
			overflow: hidden;

			width: 100%;
			height: 315px;

			border: 1px solid #cad8de;
			background: #e9eff2;
		}

		.services-image-frame img {
			display: block;
			width: 100%;
			height: 315px;
			object-fit: cover;
		}

		.services-image-caption {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;

			padding: 16px 20px;

			color: #ffffff;
			font-size: 13px;
			font-weight: bold;
			line-height: 20px;
			letter-spacing: 1px;
			text-transform: uppercase;

			background: rgba(16, 46, 59, 0.88);
		}

		.services-introduction {
			width: 53%;
			padding-left: 12px;
		}

		.services-introduction .section-number {
			display: block;
			margin: 0 0 10px;

			color: #1684a5;
			font-size: 12px;
			font-weight: bold;
			letter-spacing: 2px;
		}

		.services-introduction .section-label {
			display: block;
			margin: 0 0 10px;

			color: #1684a5;
			font-size: 12px;
			font-weight: bold;
			line-height: 18px;
			letter-spacing: 2px;
			text-transform: uppercase;
		}

		.services-introduction h2 {
			margin: 0 0 20px;

			color: #102e3b;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 29px;
			font-weight: bold;
			line-height: 36px;
		}

		.services-introduction p {
			margin: 0 0 17px;

			color: #5c6e76;
			font-size: 15px;
			line-height: 26px;
		}

		.services-introduction p:last-child {
			margin-bottom: 0;
		}

		/* Service cards */

		.services-list-heading {
			margin: 0 0 24px;
		}

		.services-list-heading span {
			display: block;
			margin: 0 0 9px;

			color: #1684a5;
			font-size: 12px;
			font-weight: bold;
			letter-spacing: 2px;
			text-transform: uppercase;
		}

		.services-list-heading h2 {
			margin: 0;

			color: #102e3b;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 28px;
			font-weight: bold;
			line-height: 35px;
		}

		.services-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 18px;

			margin: 0 0 38px;
		}

		.service-card {
			position: relative;
			min-height: 195px;
			padding: 27px 28px 26px 78px;

			border: 1px solid #d1dce1;
			border-top: 4px solid #1684a5;
			background: #f4f8f9;

			transition:
				transform 0.25s ease,
				box-shadow 0.25s ease,
				background 0.25s ease;
		}

		.service-card:hover {
			transform: translateY(-4px);
			background: #ffffff;
			box-shadow: 0 14px 30px rgba(16, 46, 59, 0.14);
		}

		.service-number {
			position: absolute;
			top: 28px;
			left: 27px;

			color: #1684a5;
			font-size: 13px;
			font-weight: bold;
			letter-spacing: 1px;
		}

		.service-card h3 {
			margin: 0 0 13px;

			color: #102e3b;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 20px;
			font-weight: bold;
			line-height: 26px;
		}

		.service-card p {
			margin: 0;

			color: #60727a;
			font-size: 14px;
			line-height: 23px;
		}

		/* Process section */

		.services-process {
			margin: 0 0 38px;
			padding: 30px;

			border: 1px solid #cad8de;
			background: #102e3b;
		}

		.services-process-heading span {
			color: #8ec9da;
		}

		.services-process-heading span {
			display: block;
			margin: 0 0 8px;

			color: #8ec9da;
			font-size: 12px;
			font-weight: bold;
			letter-spacing: 2px;
			text-transform: uppercase;
		}

		.services-process-heading h2 {
			color: #ffffff;
		}

		.process-steps {
			display: table;
			width: 100%;
			table-layout: fixed;
		}

		.process-step {
			display: table-cell;
			position: relative;
			vertical-align: top;

			width: 25%;
			padding: 0 24px;

			border-right: 1px solid rgba(255, 255, 255, 0.16);
		}

		.process-step:first-child {
			padding-left: 0;
		}

		.process-step:last-child {
			padding-right: 0;
			border-right: 0;
		}

		.process-step .step-number {
			color: #8ec9da;
		}

		.process-step h3 {
			color: #ffffff !important;
		}

		.process-step p {
			color: #dce8ec !important;
		}

		/* Closing call to action */

		.services-contact {
			display: table;
			width: 100%;

			padding: 28px 30px;

			border-left: 5px solid #1684a5;
			background: #edf4f6;
		}

		.services-contact-copy,
		.services-contact-action {
			display: table-cell;
			vertical-align: middle;
		}

		.services-contact-copy {
			padding-right: 30px;
		}

		.services-contact-copy h2 {
			margin: 0 0 9px;

			color: #102e3b;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 24px;
			font-weight: bold;
			line-height: 30px;
		}

		.services-contact-copy p {
			margin: 0;

			color: #60727a;
			font-size: 14px;
			line-height: 23px;
		}

		.services-contact-action {
			width: 190px;
			text-align: right;
		}

		.services-button {
			display: inline-block;
			padding: 13px 21px;

			color: #ffffff;
			font-size: 12px;
			font-weight: bold;
			line-height: 18px;
			letter-spacing: 1px;
			text-align: center;
			text-decoration: none;
			text-transform: uppercase;

			border: 1px solid #126f8b;
			background: #1684a5;

			transition:
				background 0.25s ease,
				border-color 0.25s ease;
		}

		.services-button:hover {
			color: #ffffff;
			border-color: #102e3b;
			background: #102e3b;
		}

		/* Tablet */

		@media screen and (max-width: 850px) {
			.bubbly-services {
				padding: 40px 30px 50px;
			}

			.services-heading h1 {
				font-size: 35px;
				line-height: 42px;
			}

			.services-feature,
			.services-image,
			.services-introduction {
				display: block;
				width: 100%;
			}

			.services-image {
				padding: 0;
				margin: 0 0 28px;
			}

			.services-introduction {
				padding: 0;
			}

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

			.process-steps {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 25px;
			}

			.process-step {
				display: block;
				width: 100%;
				padding: 0 20px 22px 0;
				border-right: 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.16);
			}

			.process-step:nth-child(3),
			.process-step:nth-child(4) {
				padding-bottom: 0;
				border-bottom: 0;
			}
		}

		/* Mobile */

		@media screen and (max-width: 560px) {
			.bubbly-services {
				padding: 30px 19px 40px;
			}

			.services-heading {
				margin-bottom: 30px;
			}

			.services-heading h1 {
				font-size: 29px;
				line-height: 35px;
			}

			.services-heading p,
			.services-introduction p {
				font-size: 14px;
				line-height: 24px;
			}

			.services-image-frame,
			.services-image-frame img {
				height: 225px;
			}

			.services-introduction h2,
			.services-list-heading h2 {
				font-size: 24px;
				line-height: 30px;
			}

			.service-card {
				min-height: 0;
				padding: 25px 21px 24px 62px;
			}

			.service-number {
				top: 26px;
				left: 21px;
			}

			.services-process {
				padding: 25px 22px;
			}

			.process-steps {
				display: block;
			}

			.process-step,
			.process-step:nth-child(3),
			.process-step:nth-child(4) {
				margin: 0 0 22px;
				padding: 0 0 22px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.16);
			}

			.process-step:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: 0;
			}

			.services-contact,
			.services-contact-copy,
			.services-contact-action {
				display: block;
				width: 100%;
			}

			.services-contact {
				padding: 24px 22px;
			}

			.services-contact-copy {
				padding: 0 0 20px;
			}

			.services-contact-action {
				text-align: left;
			}
		}
		/* Language selector */

#language-selector {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 99999;
}

/* Remove the default details arrow */
#language-selector summary {
  list-style: none;
}

#language-selector summary::-webkit-details-marker {
  display: none;
}

#language-selector summary::marker {
  display: none;
  content: "";
}

/* Globe button */
#language-selector summary {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  background: rgba(20, 20, 20, 0.85);
  color: white;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 1.35rem;
  cursor: pointer;
  user-select: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

#language-selector summary:hover {
  transform: translateY(-2px);
  background: rgba(20, 20, 20, 1);
}

#language-selector summary:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

/* Dropdown */
.language-menu {
  position: absolute;
  top: 56px;
  right: 0;

  display: flex;
  flex-direction: column;

  width: 170px;
  padding: 8px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;

  background: #181818;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

/* Optional opening animation */
#language-selector[open] .language-menu {
  animation: languageMenuOpen 0.18s ease-out;
}

@keyframes languageMenuOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.language-menu button {
  width: 100%;
  padding: 11px 14px;

  border: none;
  border-radius: 8px;

  background: transparent;
  color: white;

  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;

  cursor: pointer;
}

.language-menu button:hover,
.language-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.language-menu button[dir="rtl"] {
  text-align: right;
}

@media (max-width: 760px) {
  #language-selector {
    top: 12px;
    right: 12px;
  }

  #language-selector summary {
    width: 42px;
    height: 42px;
  }

  .language-menu {
    top: 51px;
  }
}