:root {
  --button-padding: 1em;
  --space-for-arrow: 2em;
}

body {
	overflow-x: hidden;
}

.glass {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.1px);
	-webkit-backdrop-filter: blur(6.1px);
	border: 1px solid rgba(0, 0, 0, 0.3);
	/* From https://css.glass */
	background: rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.1px);
	-webkit-backdrop-filter: blur(6.1px);
	border: 1px solid rgba(0, 0, 0, 0.3);
}
.nav {
	display: flex;
	padding: 20px 20px 20px 20px;
	justify-content: space-around;
	gap: 25px;
	font-size: 2vh;
  	position: fixed;
  	top: 15px;
  	text-align: center;
  	left: 20%;
  	right: 20%;
  	z-index: 2;
}

.nav > a {
	text-decoration: none;
	align-self: center;
	color: white;
}

.nav > img {
	max-height: 50px;
}

body {
	overflow-y: visible!important;
}

.main {
	margin-top: 150px!important;
}

.white-cont {
	background-color: white;
	width: 100%;
	color: black;
	margin-top: 35px;
	margin-bottom: 50px;
	font-size: 150%;
	min-height: 100px;
	padding: 10%;
	padding-top: 20px;
	padding-bottom: 20px;
}

.btn-arrow {
	text-decoration: none;
	color: black;
  position: relative;
  padding-block: .5em; /* top and bottom padding */
  padding-inline-start: 2em; /* left padding */
  padding-inline-end: 1em; /*right padding */
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 0!important
}

.btn-arrow::before {
  position: absolute;
  content: '->';
  background-size: 1em;
  inset-block-start: 50%;
  inset-inline-start: .25em;
  transform: translateY(-50%);
  padding: .25em;
  border-radius: 50%;
  border: 1px solid black;
  line-height: 1;
}

.btn-arrow:hover {
	border: 1px solid black;
}


.btn-arrow:hover::before {
  inset-inline-start: calc(100% - 1.75em);
}

.btn-arrow {
  /* replace original inline paddings: */
  padding-inline-start: var(--space-for-arrow); /* left padding */
  padding-inline-end: var(--button-padding); /*right padding */
}

.btn-arrow:hover {
  padding-inline-start: var(--button-padding); /* left padding */
  padding-inline-end: var(--space-for-arrow); /*right padding */
}

.btn-arrow {
  transition: padding 250ms ease, background-color 250ms ease;
}

.btn-arrow::before {
  transition: inset-inline-start 250ms ease;
}

.card {
	max-width: 40%;
	border: 1px solid black;
	padding: 2%;
}

.card > p {
  display: -webkit-box; /* For Safari */
  -webkit-box-orient: vertical; /* For Safari */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; /* Limit the number of lines to 2 */
  max-height: 3em; /* Adjust based on line height */
}

.events-div {
	display: flex;
	justify-content: space-between;
	gap: 50px;
}

.card > img {
	margin-left: 20%;
	border: 1px solid black;
	padding: 10px;
	margin-top: 25px;
	margin-bottom: 25px;
}

.bottom-buffer {
	display: none;
}

.options {
	display: flex;
	text-align: center;
	align-content: center;
	justify-items: center;
	align-items: center;
	justify-content: space-evenly;
	max-width: 90%;
	z-index: inherit!important;
}

.technique-cell > span {
    text-transform: capitalize;
}

.pricing-cell {
	padding: 10px!important;
}

.pricing{
	margin-left: auto;
  margin-right: auto;
  min-width: 50%;
  max-width: 90%;
}

.center-fully {
	display: flex;
	justify-content: center;
	align-self: center;
	align-items: center;
	flex-flow: row wrap;
}

break{
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}

.mob-block {
	display: flex;
	width: 100%;
	gap: 50px;
}

.work-icon {
	width: 5vw;
}

@media only screen and (max-width: 1080px) {
  .nav {
  	display: block;
  	position: fixed;
  	top: initial;
  	bottom: 15px;
  	height: auto;
  	left: 10px;
  	right: 10px;
  }

  .nav > img {
  	display: none;
  }

  .mob-block {
  	display: block;
  	width: 100%;
  }

  .mob-block > div {
  	display: block;
  	margin-bottom: 15px;
  	width: 100%!important;
  }

  .work-icon {
  	width: 30vw;
  }

  .options {
  	display: block!important;
  }

  .options > div {
  	display: block!important;
  	width: 100%!important;
  }

  .main{
  	margin-top: 0!important;
  }

  .bottom-buffer {
  	display: block;
  	height: 25vh!important;
  }

  .card {
  	max-width: 100%;
  	margin-top: 10px;
  	margin-bottom: 10px;
  }

  .card > img {
  	display: block;
  	margin-left: auto;
	  margin-right: auto;
	  min-width: 50%;
	  max-width: 100%;
  }

  .events-div {
  	display: block;
  }

  .pricing, .pricing thead, .pricing tbody, .pricing th, .pricing td, .pricing tr { 
      display: block; 
    }

    .pricing thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    .pricing-head {
    	display: none!important;
    }

    .pricing tr { border: 1px solid #ccc; }

    .pricing td { 
      border: none;
      border-bottom: 1px solid #eee; 
      position: relative;
      padding-left: 50%; 
    }

    .pricing td:before { 
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
    }
}