.bubbly-about {
	width: auto;
	margin: 0;
	padding: 48px 55px 60px;
	color: #263943;
	box-sizing: border-box;
}

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

/* Main introduction */

.about-page-heading {
	margin: 0 0 42px;
	padding: 0 0 30px;
	border-bottom: 1px solid #d8e0e4;
}

.about-page-heading .small-title {
	display: block;
	margin: 0 0 12px;

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

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

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

.about-page-heading p {
	max-width: 760px;
	margin: 18px 0 0;

	color: #65767e;
	font-size: 15px;
	line-height: 25px;
}

/* Who we are */

.about-main-content {
	position: relative;
	margin: 0 0 42px;
	padding: 0 0 42px 82px;
	border-bottom: 1px solid #d8e0e4;
}

.about-number {
	position: absolute;
	top: 2px;
	left: 0;

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

.about-description {
	max-width: 820px;
}

.about-description .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;
}

.about-description h2 {
	margin: 0 0 20px;

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

.about-description p {
	margin: 0 0 17px;

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

.about-description p:last-child {
	margin-bottom: 0;
}

/* Mission and vision */

.purpose-sections {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-spacing: 18px 0;
	margin: 0 -18px;
}

.purpose-box {
	display: table-cell;
	width: 50%;
	vertical-align: top;

	padding: 28px 30px 30px;

	border: 1px solid #d2dde2;
	border-top: 4px solid #1684a5;
	background: #f3f7f8;
}

.purpose-heading {
	overflow: hidden;
	margin: 0 0 24px;
}

.purpose-number {
	float: left;

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

.purpose-label {
	float: right;

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

.purpose-box h3 {
	margin: 0 0 18px;

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

.purpose-box p {
	margin: 0;

	color: #5b6d75;
	font-size: 14px;
	line-height: 24px;
}

/* Responsive layout */

@media screen and (max-width: 800px) {
	.bubbly-about {
		padding: 38px 30px 48px;
	}

	.about-page-heading h1 {
		font-size: 34px;
		line-height: 41px;
	}

	.about-main-content {
		padding-left: 55px;
	}

	.purpose-sections {
		display: block;
		margin: 0;
	}

	.purpose-box {
		display: block;
		width: 100%;
		margin: 0 0 20px;
	}
}

@media screen and (max-width: 520px) {
	.bubbly-about {
		padding: 30px 20px 40px;
	}

	.about-page-heading {
		margin-bottom: 32px;
	}

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

	.about-main-content {
		padding: 0 0 34px;
	}

	.about-number {
		position: static;
		display: block;
		margin-bottom: 12px;
	}

	.about-description h2 {
		font-size: 24px;
		line-height: 30px;
	}

	.purpose-box {
		padding: 24px 22px 26px;
	}
}

/* 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;
  }
}