/* COMPONENTS */

.nav_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 20rem;
	max-width: 83.5rem;
	height: 100%;
  background: var(--glassy-gradient);
  backdrop-filter: blur(10px);
	border-radius: var(--br-curved-xs);
  border: var(--bw-regular) solid transparent;
	padding: 0.875rem 1.5rem;
	padding-top: 0.75rem;
	column-gap: 7%;
  box-shadow: 0 0.25rem 0.75rem 0.063rem var(--clr-nav-shadow);
	z-index: 15;

	div {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 30%;

		.logo {
			background-image: url("/public/img/logos/logo-black-reg.png");
			width: 7.5rem;
			height: 2.375rem;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			
			@media (prefers-color-scheme: dark) {
				background-image: url("/public/img/logos/logo-white-reg.png");  
			}
		}
	}

	ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		column-gap: 1rem;
		width: 70%;

		.nav_tab {
			display: flex;
			list-style-type: none;
			cursor: pointer;

			&#language-switcher {
				cursor: pointer;
			}

			&.custom_cta {
				.nav_link {
					color: var(--clr-cta-text);
				}
			}

			.nav_link {
				position: relative;
				min-width: max-content;
				font-size: 1rem;
				color: var(--clr-text);
				text-decoration: none;
				transition: color 0.2s ease;

				&.active_tab {
					color: var(--clr-lake);
				}

				&:hover {
					color: var(--clr-lake);
          transition: color 0.2s ease;
				}
			}
		}

		.nav_tab:last-of-type {
			display: none;
		}

		.nav_tab:nth-last-of-type(-n+2) {
			.nav_link {
				&:hover {
					color: var(--clr-cta-text);
				}
			}
		}

	}
}

@media (max-width: 64rem) {
	.nav_container {
		div {
			.logo {
				width: 6.875rem;
				height: 2.25rem;
				margin-bottom: 0.063rem;
			}
		}

		ul {
			.nav_tab {
				.nav_link {
					font-size: 0.875rem;
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.nav_container {
		padding: 0.813rem 1.25rem;

		div {
			width: 70%;

			.logo {
				width: 7rem;
				height: 2rem;
			}
		}

		ul {
			width: 30%;
			column-gap: 1.5rem;

			.nav_tab {
				display: none;
			}

			.nav_tab:last-of-type {
				display: flex;
			}
		}
	}
}

.drawer_link {
	position: fixed;
	top: 2.625rem;
	right: 4rem;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--br-curved-xs);
	cursor: pointer;
	z-index: 20;

	svg {
		height: 2.125rem;
		transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
		padding-right: 0.188rem;
		padding-bottom: 0.063rem;
		cursor: pointer;

		.line {
			fill: none;
			stroke: var(--clr-text);
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 3;
			transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
				stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		.line-top-bottom {
			stroke-dasharray: 12 63;
		}
	}
}

@media (max-width: 48rem) {
	.drawer_link {
		display: flex;

		svg {
			height: 2.188rem;
		}
	}
}

@media (max-width: 39.375rem) {
	.drawer_link {
		top: 2.318rem;
		right: 3.5rem;
	}
}

@media (max-width: 30rem) {
	.drawer_link {
		right: 3.5rem;
	}
}

@media (max-width: 24rem) {
	.drawer_link {
		right: 11.5%;
	}
}

.drawer_content {
	position: fixed;
	display: none;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	top: 0;
	right: -100%;
	width: 80%;
	height: 100vh;
	backdrop-filter: blur(10px);
	row-gap: 4rem;
	border: var(--bw-regular) solid transparent;
	border-right: none;
	border-radius: 0.5rem 0 0 0.5rem;
	background: var(--glassy-gradient);
	padding: 3rem 4.375rem;
	transition: right 0.3s ease;
	z-index: 15;


	ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		margin-top: 5rem;

		li {
			width: 100%;
			padding-bottom: 1rem;

			a {
				font-size: 1.313rem;
				text-align: start;
				color: var(--clr-text);
				text-decoration: none;

				&.active_tab {
					color: var(--clr-lake);
				}

				&[role="button"] {
					cursor: pointer;
				}
			}
		}

		li:last-of-type {
			a {
        background: -webkit-linear-gradient(0.125turn, var(--clr-drawer-text-primary), var(--clr-drawer-text-primary), var(--clr-drawer-text-secondary));
				background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
			}
		}

		hr {
			width: 90%;
			height: 0.125rem;
			border: none;
			border-radius: 1rem;
			position: relative;
			background: transparent;
			margin-bottom: 2rem;
		}
		
		hr::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			height: 0.125rem;
			width: 100%;
			background: -webkit-linear-gradient(0.125turn, var(--clr-drawer-underline-primary), var(--clr-drawer-underline-secondary));
			border-radius: 1rem;
		}

		hr:last-of-type {
			&::before {
				background: -webkit-linear-gradient(0.125turn, var(--clr-drawer-underline-primary-vibrant), var(--clr-drawer-underline-primary-vibrant), var(--clr-drawer-underline-secondary-vibrant));
			}
		}
	}
}

@media (max-width: 48rem) {
	.drawer_content {
		display: flex;
	}
}

@media (max-width: 30rem) {
  .drawer_content {
    width: 84%;
    padding: 3rem 2.5rem;
  }
}

#drawerToggle {
	display: none;
}

#drawerToggle:checked ~ .drawer_content {
	right: 0;
}

#drawerToggle:checked + label svg {
	transform: rotate(-45deg);
}

#drawerToggle:checked + label svg .line-top-bottom {
	stroke-dasharray: 20 300;
	stroke-dashoffset: -32.42;
}

.hero_container {
  .hero_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    color: var(--clr-text);
		text-align: center;
    gap: var(--text-gap);

    h2 {
      font-size: var(--text-hero-slogan);
      line-height: 1.5;
    }

    h1 {
      font-size: var(--text-hero-welcome);

			span {
				font-size: calc(var(--text-hero-welcome) + 0.063rem);
			}
    }

    p {
			width: 100%;
			font-size: var(--text-hero-description);
      line-height: 1.5;
    }
  }

	.hero_cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-top: 1.5rem;
		gap: 2rem;
	}

	.hero_media {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 2rem;

		.media_img {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			max-height: 80%;
			width: clamp(7rem, 80%, 22rem) !important;
			border-radius: 0.5rem;
			overflow: visible;

			img {
				object-fit: contain;
				width: 100%;
				height: 100%;
				border-radius: 0.5rem;
			}

			&::before {
				content: "";
				position: absolute;
				top: 0.25rem;
				left: 0.125rem;
				right: 0.125rem;
				bottom: 0;
				background: -webkit-linear-gradient(0.125turn, var(--clr-primary), var(--clr-secondary));
				filter: blur(0.25rem);
				z-index: -1;
			}
		}
	}
}

@media (max-width: 80rem) {
	.hero_container {
		.hero_cta {
			margin-top: 1.5rem;
		}
	}
}

@media (max-width: 64rem) {
	.hero_container {
		.hero_text {
			p {
				margin-top: 1rem;
			}
		}
	}
}

@media (max-width: 48rem) {
	.hero_container {
		.hero_text {
			width: 100%;
	
			p {
				width: 90%;
			}
		}
	
		.hero_cta {
			margin-top: 1rem;
		}
	}
}

@media (max-width: 30rem) {
	.hero_container {
		.hero_cta {
			width: 90%;
			margin-top: 0.5rem;
			gap: 1.25rem;

			.custom_cta {
				width: 12rem;
				font-size: 1.125rem;
			}
		}
	}
}

.services_container {
	.services_content {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		max-width: 83.5rem;
		gap: var(--content-gap);

		.service_card {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			background-color: var(--clr-card-background);
      color: var(--clr-text);
			text-decoration: none;
      background: var(--glassy-gradient);
      backdrop-filter: blur(10px);
      border-radius: var(--br-curved-xs);
      border: var(--bw-regular) solid transparent;
			/* border: var(--bw-regular) solid var(--clr-background); */
			border-radius: var(--br-curved-card);
			padding: var(--card-padding);
			gap: var(--text-gap);
			transition: all 0.2s;

      &:hover {
        transition: all 0.2s;

        &:nth-child(1) {
          border-color: var(--clr-borders-primary);
  
          .service_icon {
            background-color: var(--clr-borders-primary);
          }
        }

        &:nth-child(2) {
          border-color: var(--clr-borders-secondary);

          .service_icon {
            background-color: var(--clr-borders-secondary);
          }
        }

        &:nth-child(3) {
          border-color: var(--clr-borders-tertiary);

          .service_icon {
            background-color: var(--clr-borders-tertiary);
          }
        }

        &:nth-child(4) {
          border-color: var(--clr-borders-quaternary);

          .service_icon {
            background-color: var(--clr-borders-quaternary);
          }
        }

        @media (prefers-color-scheme: dark) {
          .service_icon {
            .material-icons {
              color: var(--clr-text-neg);
            }
          }
        }
      }

			.service_icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 4rem;
				height: 4rem;
				background: var(--conic-gradient);
				border-radius: var(--br-curved-xs);
				transition: background-color 0.15s ease;

				.material-icons {
					font-size: 2rem;
					color: var(--clr-text-alt);
					transition: color 0.15s ease;
				}
			}

			h4 {
				font-size: var(--text-title-sm);
				line-height: 1.3;
				margin: 0;
			}

			p {
				line-height: 1.5;
				margin: 0;
			}
		}
	}
}

@media (max-width: 80rem) {
	.services_container {
		.services_content {
			.service_card {
				.service_icon {
					width: 3.5rem;
					height: 3.5rem;

					.material-icons {
						font-size: 1.75rem;
					}
				}
			}
		}
	}
}

@media (max-width: 64rem) {
	.services_container {
		.services_content {
			grid-template-columns: repeat(2, 1fr);

			.service_card {
				.service_icon {
					width: 3rem;
					height: 3rem;

					.material-icons {
						font-size: 1.5rem;
					}
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.services_container {
		.services_content {
			grid-template-columns: 1fr;

			.service_card {
				transition: none;

				&:hover {
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3),
          &:nth-child(4) {
						border-color: transparent;
          }
				}

        &:nth-child(1) {
					h4 {
						text-decoration-color: var(--clr-borders-primary);
					}

					.service_icon {
						background-color: var(--clr-borders-primary);
					}
				}

				&:nth-child(2) {
					h4 {
						text-decoration-color: var(--clr-borders-secondary);
					}

					.service_icon {
						background-color: var(--clr-borders-secondary);
					}
				}

				&:nth-child(3) {
					h4 {
						text-decoration-color: var(--clr-borders-tertiary);
					}

					.service_icon {
						background-color: var(--clr-borders-tertiary);
					}
				}

				&:nth-child(4) {
					h4 {
						text-decoration-color: var(--clr-borders-quaternary);
					}

					.service_icon {
						background-color: var(--clr-borders-quaternary);
					}
				}

        .service_icon {
          .material-icons {
            color: var(--clr-text-neg);
          }
        }

				h4 {
					text-decoration: underline;
					text-decoration-thickness: 0.125rem;
					text-underline-offset: 0.375rem;
				}
			}
		}
	}
}

@media (max-width: 30rem) {
	.services_container {
		.services_content {
			.service_card {
				.service_icon {
					width: 2.5rem;
					height: 2.5rem;

					.material-icons {
						font-size: 1.25rem;
					}
				}
			}
		}
	}
}

.process_container {
	.process_content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		max-width: 83.5rem;
		gap: var(--content-gap);

		.process_step {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			text-align: center;
			gap: var(--text-gap);

      &:hover {
        &:nth-child(1) {
          .step_icon {
            border-color: var(--clr-borders-primary);
          }
        }
  
        &:nth-child(2) {
          .step_icon {
            border-color: var(--clr-borders-secondary);
          }
        }
  
        &:nth-child(3) {
          .step_icon {
            border-color: var(--clr-borders-tertiary);
          }
        }
      }

			.step_icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 7rem;
				height: 7rem;		
				background: var(--glassy-gradient);
				border: var(--bw-regular) solid transparent;
				border-radius: 50%;
				padding: 0.5rem;
				transition: border-color 0.2s ease;

        img {
          width: 6rem;
				  height: 6rem;
          object-fit: contain;
          flex-shrink: 0;
        }
			}

			h4 {
				font-size: var(--text-title-sm);
				color: var(--clr-text);
				line-height: 1.3;
				margin: 0;
			}

			p {
				font-size: 1rem;
				color: var(--clr-text-alt);
				line-height: 1.5;
				margin: 0;
				max-width: 20rem;
			}
		}
	}
}

@media (max-width: 80rem) {
	.process_container {
		.process_content {
			.process_step {
				.step_icon {
					width: 6.5rem;
					height: 6.5rem;

					img {
						width: 5.5rem;
						height: 5.5rem;
					}
				}
			}
		}
	}
}

@media (max-width: 64rem) {
	.process_container {
		.process_content {
			.process_step {
				.step_icon {
					width: 6rem;
					height: 6rem;

					img {
						width: 5rem;
						height: 5rem;
					}
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.process_container {
		.process_content {
			grid-template-columns: 1fr;

			.process_step {
        &:nth-child(1) {
          .step_icon {
            border-color: var(--clr-borders-primary);
          }
        }
  
        &:nth-child(2) {
          .step_icon {
            border-color: var(--clr-borders-secondary);
          }
        }
  
        &:nth-child(3) {
          .step_icon {
            border-color: var(--clr-borders-tertiary);
          }
        }

        
			}
		}
	}
}

@media (max-width: 30rem) {
	.process_container {
		.process_content {
			.process_step {
				.step_icon {
					width: 5rem;
					height: 5rem;
					padding: 0.25rem;

					img {
						width: 4.5rem;
						height: 4.5rem;
					}
				}
			}
		}
	}
}

.cases_container {
	.cases_content {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		width: 100%;
		max-width: 83.5rem;
		gap: var(--content-gap);

		.cases_grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(2, 1fr);
      align-items: stretch;
			gap: var(--text-gap);
			width: 100%;
			max-width: 45rem;

			.case_item {
				display: flex;
				align-items: center;
				justify-content: center;
        place-self: center;
        width: 100%;
        height: 8rem;
				background: var(--glassy-gradient);
				backdrop-filter: blur(10px);
				border: var(--bw-regular) solid transparent;
				border-radius: var(--br-curved-xs);
				padding: var(--card-padding);
				text-align: center;
				text-decoration: none;
				color: inherit;
				transition: border-color 0.2s ease;

				h4 {
					font-size: var(--text-title-xs);
					color: var(--clr-text);
					line-height: 1.3;
					margin: 0;
				}

        &:hover {
          &:nth-child(1) {
            border-color: var(--clr-borders-primary);
          }
  
          &:nth-child(2) {
            border-color: var(--clr-borders-secondary);
          }
  
          &:nth-child(3) {
            border-color: var(--clr-borders-tertiary);
          }
  
          &:nth-child(4) {
            border-color: var(--clr-borders-primary);
          }
  
          &:nth-child(5) {
            border-color: var(--clr-borders-secondary);
          }
  
          &:nth-child(6) {
            border-color: var(--clr-borders-tertiary);
          }
				}
			}
		}

		.cases_image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
      min-width: 20rem;
			max-width: 30rem;

			img {
				width: 100%;
				height: auto;
				object-fit: contain;
			}
		}
	}
}

@media (max-width: 64rem) {
	.cases_container {
		.cases_content {
			.cases_grid {
        grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(3, 1fr);
			}
		}
	}
}

@media (max-width: 48rem) {
	.cases_container {
		.cases_content {
      align-items: center;
			flex-direction: column;

			.cases_grid {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(3, 1fr);
				max-width: none;

				.case_item {
          height: 5rem;
					transition: none;

					&:nth-child(1) {
						h4 {
							text-decoration-color: var(--clr-borders-primary);
						}
					}

					&:nth-child(2) {
						h4 {
							text-decoration-color: var(--clr-borders-secondary);
						}
					}

					&:nth-child(3) {
						h4 {
							text-decoration-color: var(--clr-borders-tertiary);
						}
					}

					&:nth-child(4) {
						h4 {
							text-decoration-color: var(--clr-borders-primary);
						}
					}

					&:nth-child(5) {
						h4 {
							text-decoration-color: var(--clr-borders-secondary);
						}
					}

					&:nth-child(6) {
						h4 {
							text-decoration: underline;
							text-decoration-thickness: 0.125rem;
							text-underline-offset: 0.313rem;
							text-decoration-color: var(--clr-borders-tertiary);
						}
					}

					h4 {
						text-decoration: underline;
						text-decoration-thickness: 0.125rem;
						text-underline-offset: 0.313rem;
						line-height: 1.5;
					}

					&:hover {
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5),
            &:nth-child(6) {
            border-color: transparent;
            }
          }
				}
			}

			.cases_image {
				max-width: 25rem;
			}
		}
	}
}

@media (max-width: 30rem) {
	.cases_container {
		.cases_content {
			.cases_image {
				max-width: 20rem;
			}
		}
	}
}

.logos_container {
	/* background: var(--glassy-gradient-vibrant);
	border: var(--bw-regular) solid transparent; */
	border-radius: var(--br-curved-xs);
	
	.logos_carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 2rem 0;
    overflow: hidden;
		
		.logos_track {
			display: flex;
			animation: scroll 45s linear infinite;
			width: fit-content;
			gap: 9rem;

			.logo_slide {
				flex: 0 0 auto;
				height: 3.5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 8rem;

				img {
					height: 100%;
					width: auto;
					object-fit: contain;
					max-width: 100%;
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.logos_container {
		.logos_carousel {
			.logos_track {
				gap: 3rem;
				animation: scroll 30s linear infinite;

				.logo_slide {
					height: 2.5rem;
					min-width: 6rem;
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.logos_container {
		.logos_carousel {
			.logos_track {
				gap: 3rem;
				animation: scroll 20s linear infinite;

				.logo_slide {
					height: 2.5rem;
					min-width: 6rem;
				}
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.logos_container {
		.logos_carousel {
			.logos_track {
				animation: none;
			}
		}
	}
}

.fraud_container {
	margin-top: 1rem;

	.fraud_content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 83.5rem;
		gap: var(--content-gap);

		.fraud_text {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			width: 100%;
			max-width: 35rem;
			gap: var(--text-gap-lg);

			h2 {
				font-size: var(--text-title);
				color: var(--clr-text);
				line-height: 1.2;
				margin: 0;
			}

			p {
				font-size: 1.125rem;
				color: var(--clr-text-alt);
				line-height: 1.6;
				margin: 0;
			}

			.custom_cta {
				margin-top: 0.5rem;
			}
		}

		.fraud_image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-width: 25rem;
			max-width: 30rem;

			img {
				width: 100%;
				height: auto;
				object-fit: contain;
			}
		}
	}
}

@media (max-width: 80rem) {
	.fraud_container {
		.fraud_content {
			.fraud_text {
				max-width: 32rem;
			}

			.fraud_image {
				min-width: 22rem;
				max-width: 30rem;
			}
		}
	}
}

@media (max-width: 64rem) {
	.fraud_container {
		.fraud_content {
			.fraud_text {
				max-width: 30rem;
				gap: var(--text-gap);

				p {
					font-size: 1rem;
				}
			}

			.fraud_image {
				min-width: 20rem;
				max-width: 25rem;
			}
		}
	}
}

@media (max-width: 48rem) {
	.fraud_container {
		.fraud_content {
			flex-direction: column;
			align-items: center;

			.fraud_text {
				max-width: none;
				text-align: center;
				align-items: center;
			}

			.fraud_image {
				min-width: 18rem;
				max-width: 22rem;
			}
		}
	}
}

@media (max-width: 30rem) {
	.fraud_container {
		.fraud_content {
			.fraud_text {
				p {
					font-size: 0.875rem;
				}
			}

			.fraud_image {
				min-width: 16rem;
				max-width: 20rem;
			}
		}
	}
}

.recover_container {
	background: var(--glassy-gradient-vibrant);
	border: var(--bw-regular) solid transparent;
	border-radius: var(--br-curved-xs);
	padding: 3rem 2rem;
	margin: 1rem 0;

	.recover_content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		max-width: 50rem;
		margin: 0 auto;
		gap: var(--content-gap);

		p {
			font-size: 1.125rem;
			color: var(--clr-text-alt);
			line-height: 1.5;
			margin: 0;
			opacity: 0.9;

			span {
					display: inline-block;
					align-self: center;	
					background-image: url("/public/img/logos/logo-black-reg.png");
					width: 3.25rem;
					height: 1rem;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					margin: 0 0.5rem;
					margin-bottom: 0.25rem;
					vertical-align: middle;
			}

			@media (prefers-color-scheme: dark) {
				span {
					background-image: url("/public/img/logos/logo-white-reg.png");
				}
			}
		}

		.recover_ctas {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: var(--text-gap);
		}
	}
}

@media (max-width: 64rem) {
	.recover_container {
		padding: 2rem;
	}
}

@media (max-width: 48rem) {
	.recover_container {
		.recover_content {
			.recover_ctas {
				flex-direction: column;
				width: 100%;

				.custom_cta {
					width: 100%;
					max-width: 20rem;
				}
			}
		}
	}
}

@media (max-width: 30rem) {
	.recover_container {

		.recover_content {
			p {
				font-size: 1rem;

				span {
					width: 2.875rem;
					height: 0.75rem;
					margin: 0 0.375rem;
					margin-bottom: 0.125rem;
				}
			}

			.recover_ctas {
				.custom_cta {
					max-width: 16rem;
				}
			}
		}
	}
}

.footer_styles {
	.footer_content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		min-width: 20rem;
		max-width: 83.5rem;
		gap: 2rem;

		.footer_section {
			display: flex;
			flex-direction: column;
			flex: 1 1 20rem;
			justify-content: space-between;

			.footer_logo {
				background-image: url("/public/img/logos/logo-white-reg.png");
				width: 12rem;
				height: 2.5rem;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: left;
				margin-bottom: 1rem;
				
				@media (prefers-color-scheme: dark) {
					background-image: url("/public/img/logos/logo-black-reg.png");  
				}
			}

			.footer_description {
				font-size: 1rem;
				line-height: 1.5;
				max-width: 25rem;
			}

			h4 {
				font-size: 1.25rem;
				margin-bottom: 1rem;
			}

			ul {
				display: flex;
				flex-direction: column;
				list-style: none;
				padding: 0;
				margin: 0;
				gap: var(--text-gap-min);

				li {
					display: flex;
					align-items: flex-start;
					width: 100%;
					font-size: 1rem;
					line-height: 1.5;
					gap: 0.5rem;

					&.copyright {
            display: flex;
            align-items: center;
            gap: 0.5rem;
						font-size: 0.875rem;

            span {
              background-image: url("/public/img/logos/logo-white-reg.png");
              width: 2.5rem;
              height: 1.313rem;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: left;
              margin-bottom: 0.063rem;
            }

            @media (prefers-color-scheme: dark) {
              span {
                background-image: url("/public/img/logos/logo-black-reg.png");
              }
            }
					}

					.material-icons {
						font-size: 1.25rem;
						margin-top: 0.063rem;

            &.blue {
              color: var(--clr-link);
            }
					}

					a {
						display: flex;
						align-items: center;
						gap: 0.5rem;
						min-height: 1.75rem;
						color: var(--clr-text-neg);
						text-decoration: none;
						position: relative;
						
						&::after {
							content: "";
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							height: 0.063rem;
							width: 97%;
							background-color: var(--clr-link);
							border-radius: var(--br-curved-xs);
							opacity: 0;
						}

						&:hover {
							color: var(--clr-link);

							&::after {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 64rem) {
	.footer_styles {
		padding: 2.5rem var(--container-padx) 1.25rem;

		.footer_content {
			gap: 1.5rem;

			.footer_section {
				.footer_logo {
					width: 10rem;
					height: 2.25rem;
				}

				h4 {
					font-size: 1.125rem;
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.footer_styles {
		.footer_content {
			.footer_section {
				min-width: 12rem;

			.footer_description {
				font-size: 0.938rem;
			}

			ul {
				li {
					font-size: 0.938rem;
					
						&.copyright {
							margin-top: 0.75rem;
							font-size: 0.813rem;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 30rem) {
	.footer_styles {
		.footer_content {
			.footer_section {
				min-width: 100%;

				.footer_description {
					margin: 0 auto;
				}

				ul {
					li {
						a {
							min-height: 1.75rem;
							color: var(--clr-link);

							&::after {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
}

.service_details_container {
	margin-top: 1rem;

	.service_detail_content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 83.5rem;
		gap: var(--content-gap);

		&.reverse {
			flex-direction: row-reverse;
		}

		.service_detail_text {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			width: 100%;
			max-width: 35rem;
			gap: var(--text-gap-lg);

			h2 {
				font-size: var(--text-title);
				color: var(--clr-text);
				line-height: 1.2;
				margin: 0;
			}

			p {
				font-size: 1.125rem;
				color: var(--clr-text-alt);
				line-height: 1.6;
				margin: 0;
			}

			ul {
				display: flex;
				flex-direction: column;
				gap: var(--text-gap-min);
				margin: 0;
				padding: 0;
				list-style: none;

				li {
					display: flex;
					align-items: center;
					gap: 0.75rem;
					font-size: 1rem;
					color: var(--clr-text-alt);
					line-height: 1.5;

					.material-icons {
						font-size: 1.25rem;
						color: var(--clr-emerald);
						flex-shrink: 0;
					}

					span:last-child {
						flex: 1;
					}
				}
			}

			.custom_cta {
				margin-top: 0.5rem;
			}
		}

		.service_detail_image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-width: 25rem;
			max-width: 30rem;

			img {
				width: 100%;
				min-width: var(--banner-img-min-width);
				max-width: var(--banner-img-max-width);
				height: auto;
				object-fit: contain;
			}
		}
	}
}

@media (max-width: 80rem) {
	.service_details_container {
		.service_detail_content {
			.service_detail_text {
				max-width: 32rem;
			}
		}
	}
}

@media (max-width: 64rem) {
	.service_details_container {
		.service_detail_content {
			.service_detail_text {
				max-width: 30rem;
				gap: var(--text-gap);

				p {
					font-size: 1rem;
				}
			}
		}
	}
}

@media (max-width: 48rem) {
	.service_details_container {
		.service_detail_content {
			flex-direction: column;
			align-items: center;

			&.reverse {
				flex-direction: column;
			}

			.service_detail_text {
				max-width: none;
				text-align: center;
				align-items: center;

				p {
					font-size: 0.938rem;
				}

				ul {
					text-align: left;
					align-self: flex-start;
				}
			}
		}
	}
}

@media (max-width: 30rem) {
	.service_details_container {
		.service_detail_content {
			.service_detail_text {
				p {
					font-size: 0.875rem;
				}

				ul {
					li {
						font-size: 0.875rem;
					}
				}
			}
		}
	}
}

.usecase_container {
  .usecase_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 83.5rem;
    gap: var(--content-gap);

    &.reverse {
      flex-direction: row-reverse;
    }

    .usecase_text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      width: 100%;
      max-width: 35rem;
      gap: var(--text-gap-lg);

      .usecase_title {
        display: flex;
        align-items: center;
        gap: var(--text-gap);

        h2 {
          font-size: var(--text-title-md);
          color: var(--clr-text);
          margin: 0;
        }
      }

      p {
        font-size: 1.125rem;
        color: var(--clr-text-alt);
        line-height: 1.6;
        margin: 0;
      }
    }

    .usecase_image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 18rem;
      max-width: 22rem;

      img {
        width: 100%;
				min-width: var(--banner-img-min-width);
				max-width: var(--banner-img-max-width);
        height: auto;
        object-fit: contain;
      }
    }
  }
}

@media (max-width: 64rem) {
  .usecase_container {
    .usecase_content {
      .usecase_text {
        max-width: 28rem;
        gap: var(--text-gap);
				
        p {
          font-size: 1rem;
        }
      }
    }
  }
}

@media (max-width: 48rem) {
  .usecase_container {
    .usecase_content {
      flex-direction: column !important;
      align-items: center;
      text-align: center;

      .usecase_text {
        max-width: none;
        align-items: center;

        .usecase_title {
          flex-direction: column;
        }
      }
    }
  }
}

@media (max-width: 30rem) {
  .usecase_container {
    .usecase_content {
			.usecase_text {
        p {
          font-size: 0.875rem;
        }
      }
    }
  }
}

/* SMALL */

.whatsapp_container {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: clamp(20rem, 100%, calc(83.5rem + var(--container-padx)));
	height: 100vh;
	z-index: 10;
	padding: 0 var(--container-padx);
	pointer-events: none;

	.whatsapp_float {
		position: relative;
		bottom: 2rem;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		background-color: var(--clr-emerald);
    border: var(--bw-sm) solid var(--clr-emerald-alt);
		border-radius: var(--br-curved-xs);
		box-shadow: 0 0.125rem 0.5rem 0.063rem var(--clr-w-shadow);
		pointer-events: auto;
		transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

		&:hover {
			transform: scale(1.02);
			box-shadow: 0 0.125rem 0.75rem 0.063rem var(--clr-w-shadow);
			background-color: var(--clr-emerald-alt);
      transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
		}

		.whatsapp_icon {
			width: 2rem;
			height: 2rem;
			color: var(--clr-cta-text);
		}
	}
}

@media (max-width: 48rem) {
	.whatsapp_container {
		.whatsapp_float {
			bottom: 1.5rem;
			width: 3rem;
			height: 3rem;
	
			&:hover {
				transform: scale(1);
				box-shadow: 0 0.125rem 0.5rem 0.063rem var(--clr-w-shadow);
			}
	
			.whatsapp_icon {
				width: 1.75rem;
				height: 1.75rem;
			}
		}
	}
}

@media (max-width: 30rem) {
	.whatsapp_container {
		.whatsapp_float {
			bottom: 1.25rem;
			width: 2.75rem;
			height: 2.75rem;

			.whatsapp_icon {
				width: 1.5rem;
				height: 1.5rem;
			}
		}
	}
}