
		 * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
	}

	body {
			font-family: var(--default-text-font);
			line-height: var(--default-line-height);
			color: #333;
			/* background: #f3f5f6; */
			min-height: 100%;
			font-size: var(--default-text-size);
			background-image: -webkit-linear-gradient(45deg, #f5ece3 0%, #fcf7ff 100%);
	}

	a {
			text-decoration: none;
			color: #464646;
	}

	a:hover {
			color: var(--color4);
	}

	/* Container */
	.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 1em 1.5em;
	}

	/* Header */
	.header {
			z-index: 1000;
			background: transparent;
	}

	.nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem 0;
			border-radius: 1em;
	}

	.nav-logo {
			display: flex;
			align-items: center;
	}

	.nav-logo img {
			max-width: 150px;
			height: auto;
			display: block;
	}

	.nav-menu {
			display: inline-block;
			gap: 1rem;
			background: #ffffff6e;
			border-radius: 3rem;
			padding: 1rem 0.75rem;
			/* flex-direction: row; */
			border: 2px solid #fff;
			color: #181818;
	}

	.nav-menu a {
			font-weight: 500;
			padding: 0.5rem 1rem;
			border-radius: 1.5em;
			transition: background 0.2s;
			/* color: #fff; */
	}

	.nav-menu a:hover {
			color: var(--color4);
	}

	.nav-toggle {
			display: none;
			font-size: 1.5rem;
			cursor: pointer;
	}

	/* Main Content */
	.posts {
			padding: 2rem 0;
	}

	.post-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 2em;
			text-align: center;
	}
	@media (min-width: 768px) {
		.post-grid.categories {
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		}
	}
	.post-grid.clients {
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
	.post-grid.portfolio {
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
	.post-grid.clients img {
			max-height: 50px;
			margin: 0 auto;
	}

	.post-card {
			border-radius: 1em;
			overflow: hidden;
			box-shadow: 0 0 0 1px rgb(255 255 255);
			transition: transform 0.8s;
			border: 10px solid #ffffffb3;
		background: #ffffff42;
			/* background: #ffffffb3; */
	}
	.post-card:hover {
			scale: 1;
			transition: transform 0.8s;
			border: 10px solid #ffffffde;
			box-shadow: 0 0 0 1px rgb(255 255 255);
			
	}

	.post-image {
			width: 100%;
			height: auto;
			padding: 1em;
	}

	.post-content {
			padding: 1.5em;
			color: #000;
	}
	.post-grid.portfolio .post-content {
			padding: 0;
	}
	.post-title {
			font-size: 1.5em;
			color: #181818;
			font-weight: 800;
			margin-bottom: 0.35em;
			/* text-transform: uppercase; */
	}

	.post-excerpt {
			color: #555555;
	}
	.post-card .preview {
		display: none;
		position: absolute;
		top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
		border-radius: 0.65rem;
		box-shadow: none;
		width: 100%;
		height: 100%;
		background: #ffffffbd;
		text-align: center;
	}
	@media (min-width: 768px) {
		.post-card:hover .preview {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.post-card .preview .name {
		background: #171717ab;
		margin: 2em;
		padding: 1em;
		border-radius: 1em;
		font-size: 0.8rem;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 600;
	}

	/* Footer */
	#footer {
			padding: 2rem 0;
			text-align: center;
			/* border-radius: 1em 1em 0 0; */
			margin-top: 0;
	}

	#footer a {
			color: var(--color3) !important;
			opacity: 0.8;
	}

	.footer a:hover {
			opacity: 1;
	}

	/* Responsive Design */
	@media (max-width: 768px) {
			.nav {
					flex-wrap: wrap;
					flex-direction: column;
			}

			.nav-menu {
					font-size: 0.75em;
					margin-top: 2em;
					padding: 1rem;
					width: 100%;
					text-align: center;
			}

			.nav-menu.active {
					display: flex;
			}

			.nav-toggle {
					display: block;
			}

			.post-grid {
					grid-template-columns: 1fr;
			}

			.nav-logo img {
					max-width: 150px;
			}
	}
	.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-item {
    flex: 0 0 calc(50% - 1em); /* 50% width on desktop */
    box-sizing: border-box;
}

.flex-item2 {
    flex: 0 0 calc(25% - 0.75em); /* Adjusted for 1em gaps */
    box-sizing: border-box;
}

.flex-item3 {
    flex: 0 0 calc(12.5% - 0.75em); /* Adjusted for consistency, if needed */
    box-sizing: border-box;
}

.flex-gap {
    gap: 1em;
}

.flex-gap2 {
    gap: 2em;
}
	
	/* Mobile view */
	@media (max-width: 768px) {
		.flex-item {
			flex: 0 0 100%; /* 100% width on mobile */
		}
		.flex-item2 {
			flex: 0 0 50%; /* 100% width on mobile */
		}
	}
	.img-responsive {
		max-width: 100%;
		height: auto;
		display: block;
	}
	.thumbnail {
		border-radius: 1em;
	}
	.style1 {
		/* background: #dbdbdbd7; */
		/* color: #181818; */
	}
	.style2 {
		background: #333;
		color: #fff;
	}
	.style3 {
		background: #ffffff8d;
		color: #181818;
	}
	
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

.title {
	margin-bottom: 1.5em;
	font-size: 1em;
	text-align: center;
}
.category-description {
	margin-bottom: 2em;
	margin-top: 2em;
}
#intro {
  text-align: center;
  
}
h1.title {
	margin-bottom: 1.5em;
	font-size: 2.5em;
	text-align: center;
}
h2.subtitle {
	margin-top: 2em;
	margin-bottom: -2em;
	font-size: 2.5em;
	text-align: center;
}
@media (max-width: 767px) {
  h1.title {
    margin-bottom: 0.5em;
		font-size: 2em;
  }
	h2.subtitle {
		font-size: 2em;
	}
	h2 {
		font-size: 1.25em;
	}
}
	input[type="button"],
	button,
	.btn {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease;
		-webkit-transition: border-color 0.2s ease;
		-ms-transition: border-color 0.2s ease;
		transition: border-color 0.2s ease;
		background-color: #fff;
		border: solid 1px !important;
		border-color: rgba(255, 255, 255, 0.15) !important;
		border-radius: 3em;
		cursor: pointer;
		display: inline-block;
		letter-spacing: 0.25px;
		line-height: 3em;
		outline: 0;
		padding: 0 2em;
		position: relative;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		font-weight: 500;
	}
	.btn-white {
		background-color: #fff;
		border: solid 1px !important;
		border-color: rgba(255, 255, 255, 0.15) !important;
	}	
	.btn-primary {
		background: linear-gradient(135deg, #015EEA, #01BFFB);
		border: transparent 1px !important;
		color: #fff;
	}
	.btn-primary:hover {
		background: linear-gradient(135deg, #0e6bf8, #3ed2ff);
		border: transparent 1px !important;
		color: #fff;
	}
	.btn-outline {
		border: 1px solid #5c9ef9 !important;
		background: #ffffff;
		color: #5ba4f1;
	}
	.btn-lg {
		font-size: 1.1em;
		line-height: 3em;
		padding: 0 2.5em;
	}
		input[type="button"]:after,
		button:after,
		.button:after {
			-moz-transform: scale(0.25);
			-webkit-transform: scale(0.25);
			-ms-transform: scale(0.25);
			transform: scale(0.25);
			pointer-events: none;
			-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
			-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
			-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
			transition: opacity 0.2s ease, transform 0.2s ease;
			background: #ffffff;
			border-radius: 3em;
			content: '';
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%
		}
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			border-color: rgba(255, 255, 255, 0.6) !important
		}
			input[type="button"]:hover:after,
			button:hover:after,
			.button:hover:after {
				opacity: 0.05;
				-moz-transform: scale(1);
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1)
			}
			input[type="button"]:hover:active,
			button:hover:active,
			.button:hover:active {
				border-color: #ffffff !important
			}
				input[type="button"]:hover:active:after,
				button:hover:active:after,
				.button:hover:active:after {
					opacity: 0.1
				}

		input[type="password"] {
			border: 0;
			outline: 0;
			padding: 15px;
			border-radius: 10px;
			width: 300px
		}
section {
	padding: 3em 0;
}
@media screen and (max-width: 767px) {
	section {
		margin: 1.5em 0;
	}
}
.text-center {
	text-align: center;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin: 0.5em 0;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.5em;
}
.carousel-inner .item img {
	border-radius: 8px;
  box-shadow: 0 8px 24px #00000029;
}
.hero h1, .hero h2 {
	  font-size: 3em;
    margin: 0;
}
@media screen and (max-width: 767px) {
	.hero h1 {
		font-size: 1.75em;
	}
	.hero h2 {
		font-size: 1.75em;
		
	}
	
}
.hero h1 {
	  font-weight: 800;
}
.hero h2 {
	  font-weight: 300;
}
.hero .text {
    color: #5d646a;
    display: inline-block;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 2em;
    margin-top: 1em;
    max-width: 768px;
}
.card {
	background: #ffffff61;
	border-radius: 1em;
	padding: 2em;
	border: 1px solid #fff;
}
#reviews .img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
li::marker {
    color: rgb(105, 168, 255);
}
ul, ol {
	padding-left: 1em;
}
.portfolio {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.pf1 {
  flex: 0 0 calc(35% - 1rem); /* Adjust for half the gap */
  box-sizing: border-box;
}

.pf2 {
  flex: 0 0 calc(65% - 1rem); /* Adjust for half the gap */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .pf1,
  .pf2 {
    flex: 0 0 100%;
  }
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff !important;
    background-image: none;
    border: 0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .075) 0 1px 1px inset;
    transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;
}
.form-group {
		margin-bottom: 10px;
}
.form-group label{
		font-size: 13px;
		margin-bottom: 5px;
		text-transform: uppercase;
}
.category-wrapper, .page-wrapper {
		margin-top: -2.5em;
	}
@media (max-width: 767px) {
  .category-wrapper, .page-wrapper {
		margin-top: -4em;
	}
}
p {
	margin-bottom: 0.5em;
}
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--gutter-y) var(--gutter-x);
  margin-bottom: var(--gutter-y);
}
.row.layout {
  grid-gap: var(--gutter-x);
}
.row.column {
  flex-direction: column;
}
.row.nowrap {
  grid-auto-flow: column;
}
.row.center {
  justify-items: center;
  align-items: center;
}
.row [class*="col-"] {
  grid-column: span 12;
}
.col-xs-1 {
  grid-column: span 1 !important;
}
.col-xs-2 {
  grid-column: span 2 !important;
}
.col-xs-3 {
  grid-column: span 3 !important;
}
.col-xs-4 {
  grid-column: span 4 !important;
}
.col-xs-5 {
  grid-column: span 5 !important;
}
.col-xs-6 {
  grid-column: span 6 !important;
}
.col-xs-7 {
  grid-column: span 7 !important;
}
.col-xs-8 {
  grid-column: span 8 !important;
}
.col-xs-9 {
  grid-column: span 9 !important;
}
.col-xs-10 {
  grid-column: span 10 !important;
}
.col-xs-11 {
  grid-column: span 11 !important;
}
.col-xs-12 {
  grid-column: span 12 !important;
}
@media (min-width: 768px) {
  .col-sm-1 {
    grid-column: span 1 !important;
  }
  .col-sm-2 {
    grid-column: span 2 !important;
  }
  .col-sm-3 {
    grid-column: span 3 !important;
  }
  .col-sm-4 {
    grid-column: span 4 !important;
  }
  .col-sm-5 {
    grid-column: span 5 !important;
  }
  .col-sm-6 {
    grid-column: span 6 !important;
  }
  .col-sm-7 {
    grid-column: span 7 !important;
  }
  .col-sm-8 {
    grid-column: span 8 !important;
  }
  .col-sm-9 {
    grid-column: span 9 !important;
  }
  .col-sm-10 {
    grid-column: span 10 !important;
  }
  .col-sm-11 {
    grid-column: span 11 !important;
  }
  .col-sm-12 {
    grid-column: span 12 !important;
  }
}
@media (min-width: 992px) {
  .col-md-1 {
    grid-column: span 1 !important;
  }
  .col-md-2 {
    grid-column: span 2 !important;
  }
  .col-md-3 {
    grid-column: span 3 !important;
  }
  .col-md-4 {
    grid-column: span 4 !important;
  }
  .col-md-5 {
    grid-column: span 5 !important;
  }
  .col-md-6 {
    grid-column: span 6 !important;
  }
  .col-md-7 {
    grid-column: span 7 !important;
  }
  .col-md-8 {
    grid-column: span 8 !important;
  }
  .col-md-9 {
    grid-column: span 9 !important;
  }
  .col-md-10 {
    grid-column: span 10 !important;
  }
  .col-md-11 {
    grid-column: span 11 !important;
  }
  .col-md-12 {
    grid-column: span 12 !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-1 {
    grid-column: span 1 !important;
  }
  .col-lg-2 {
    grid-column: span 2 !important;
  }
  .col-lg-3 {
    grid-column: span 3 !important;
  }
  .col-lg-4 {
    grid-column: span 4 !important;
  }
  .col-lg-5 {
    grid-column: span 5 !important;
  }
  .col-lg-6 {
    grid-column: span 6 !important;
  }
  .col-lg-7 {
    grid-column: span 7 !important;
  }
  .col-lg-8 {
    grid-column: span 8 !important;
  }
  .col-lg-9 {
    grid-column: span 9 !important;
  }
  .col-lg-10 {
    grid-column: span 10 !important;
  }
  .col-lg-11 {
    grid-column: span 11 !important;
  }
  .col-lg-12 {
    grid-column: span 12 !important;
  }
}
@media (min-width: 1600px) {
  .col-xl-1 {
    grid-column: span 1 !important;
  }
  .col-xl-2 {
    grid-column: span 2 !important;
  }
  .col-xl-3 {
    grid-column: span 3 !important;
  }
  .col-xl-4 {
    grid-column: span 4 !important;
  }
  .col-xl-5 {
    grid-column: span 5 !important;
  }
  .col-xl-6 {
    grid-column: span 6 !important;
  }
  .col-xl-7 {
    grid-column: span 7 !important;
  }
  .col-xl-8 {
    grid-column: span 8 !important;
  }
  .col-xl-9 {
    grid-column: span 9 !important;
  }
  .col-xl-10 {
    grid-column: span 10 !important;
  }
  .col-xl-11 {
    grid-column: span 11 !important;
  }
  .col-xl-12 {
    grid-column: span 12 !important;
  }
}
@media (min-width: 1920px) {
  .col-xxl-1 {
    grid-column: span 1 !important;
  }
  .col-xxl-2 {
    grid-column: span 2 !important;
  }
  .col-xxl-3 {
    grid-column: span 3 !important;
  }
  .col-xxl-4 {
    grid-column: span 4 !important;
  }
  .col-xxl-5 {
    grid-column: span 5 !important;
  }
  .col-xxl-6 {
    grid-column: span 6 !important;
  }
  .col-xxl-7 {
    grid-column: span 7 !important;
  }
  .col-xxl-8 {
    grid-column: span 8 !important;
  }
  .col-xxl-9 {
    grid-column: span 9 !important;
  }
  .col-xxl-10 {
    grid-column: span 10 !important;
  }
  .col-xxl-11 {
    grid-column: span 11 !important;
  }
  .col-xxl-12 {
    grid-column: span 12 !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.portfolio-title {
	font-size: 1.25em;
	margin-top: 0;
	margin-bottom: calc(var(--gutter-y)/2);
}
.portfolio-description {
	font-size: 0.8em;
	margin-bottom: var(--gutter-y);
}
.rc {
	border-radius: 1em;
}
.shadow {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.gradient-text {
	  background-image: linear-gradient(to right, #5c9cfb, #58b5de, #bebebe);
	  color: transparent;
	  -webkit-background-clip: text;
}
.card-title {
	margin-bottom: 1.5em;
	font-size: 1.75em;
	line-height: 1.25em;
}