:root{
	
	/* Primary */
	--primary: #02a4a4;
	--primary-hover: #03b8b8;
	--primary-dark: #16a1a1;
	
	--secondary: #191B1D;
	--secondary-hover: #191B1D;
	--secondary-light: #191B1D;
	--title: #191B1D;

	--bg-light: #E5DEED;
	--bg-card: #fff;
	--bg-white: #fff; 
	--bg-dark-color: #161718;

	--light-dark: #FEEB9D;
	--theme-text-color: #191B1D;
	--dark: #191B1D;
    --dark-light: #D1F2FD;
	
    --body-color: #4B4B4B;	
	

	--font-family-title: "Playfair Display", serif;
	--font-family-base: "Inter", sans-serif;
	--font-family-mono: "Space Mono", sans-serif;
	
	/* Primary RGBA */
	--rgba-primary-1: rgba(2, 164, 164, 0.1);
	--rgba-primary-2: rgba(2, 164, 164, 0.2);
	--rgba-primary-3: rgba(2, 164, 164, 0.3);
	--rgba-primary-4: rgba(2, 164, 164, 0.4);
	--rgba-primary-5: rgba(2, 164, 164, 0.5);
	--rgba-primary-6: rgba(2, 164, 164, 0.6);
	--rgba-primary-7: rgba(2, 164, 164, 0.7);
	--rgba-primary-8: rgba(2, 164, 164, 0.8);
	--rgba-primary-9: rgba(2, 164, 164, 0.9);
	
	/* Gradient */
	--gradient1: linear-gradient(307deg, #9DFEF8 1.9%, #DFF9FF 67.57%);
	--gradient2: linear-gradient(98deg, #D1FFFE 0.58%, #B1E6E4 37.68%, #94ECE8 99.51%);

	img{
		border-radius: 9px 9px 0 0;
	}
	.section-head{
		.title{
			font-weight: 700 !important;
			text-transform:none;
		}
	}
	::selection {
		color: #ffffff;          
		background: var(--primary);
	}
}

.font-title {
	font-family: var(--font-family-title) !important;
}

.font-mono {
	font-family: var(--font-family-mono) !important;
}

.bg-dark-color {
	background-color: #141414;
}


.icon-sub-title-box {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 16px;
	font-family: var(--font-family-base);
	font-size: 1rem;
 }
 
 .icon-sub-title-shape {
   position: relative;
   display: inline-block;
   width: 16px;
   height: 16px;
   background-color: #000;
   border-radius: 50%;
}

.icon-sub-title-shape::before {
   content: "";
   position: absolute;
   top: 0;
   right: -8px;
   width: 16px;
   height: 16px;
   border: 1px solid #960b9b;
   border-radius: 50%;
}

.icon-sub-title-light {
	color: #c9c9c9;
}


.icon-sub-title-shape-light {
   position: relative;
   display: inline-block;
   width: 16px;
   height: 16px;
   background-color: #ddd;
   border-radius: 50%;
}

.icon-sub-title-shape-light::before {
   content: "";
   position: absolute;
   top: 0;
   right: -8px;
   width: 16px;
   height: 16px;
   border: 1px solid #f833ff;
   border-radius: 50%;
}

.design-category{
	display: inline-block;
	font-size: 0.975rem;
	color: #7d0781 !important;
	letter-spacing: 0.8px;
	padding-bottom: -30px !important;
}    	

.design-title {
	font-family: var(--font-family-title) !important;
	font-weight: 600 !important;
	font-size: 1rem;
}

/* ============================================
   BUTTON DESIGN STYLES
   ============================================ */
	.btn-design{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		border: 1px solid var(--primary);
		background-color: #fff;
		color: #000;
		border-radius: 50px;
		width: max-content;
		margin-top: 60px;
		gap: 20px;
		transition: all 0.3s ease;
		font-family: var(--font-family-mono);
		text-decoration: none;
	}

	.btn-design:hover {
		background-color: var(--primary);
		color: #000;
		border-color: var(--primary);
	}

	.btn-design i {
		transform: rotate(-45deg);
		transition: transform 0.3s ease;
	}

	/* .btn-design:hover i {
		transform: rotate(-45deg) translateX(3px);
	} */

	.btn-link-design, .btn-preview, .btn-contato {
		color: #000;
		text-decoration: none;
		transition: color 0.3s ease;
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}

	.btn-link-design:hover, .btn-preview:hover, .btn-contato:hover {
		color: #000;
		text-decoration: none;
	}

	.btn-link-design i {
		transition: transform 0.3s ease;
	}

	.btn-whatsapp {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		border: 1px solid var(--primary);
		background-color: #fff;
		color: #000;
		border-radius: 50px;
		width: max-content;
		margin-top: 5px;
		gap: 20px;
		transition: all 0.3s ease;
		font-family: var(--font-family-mono);
		text-decoration: none;
	}

	.btn-whatsapp:hover {
		background-color: var(--primary);
		color: #000;
		border-color: var(--primary);
	}

	.btn-whatsapp i {
		/* transform: rotate(-45deg); */
		transition: transform 0.3s ease;
	}

	
	.btn-preview, .btn-contato {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 35px;
		border-radius: 50px;
		width: max-content;
		margin-top: 20px;
		gap: 15px;
		transition: all 0.3s ease;
		font-family: var(--font-family-mono);
		text-decoration: none;
	}
	
	.btn-preview {
		border: 1px solid var(--primary);
		background-color: #fff;
		color: #000;
	}

	.btn-contato {
		border: 1px solid var(--primary);
		background-color: var(--primary);
		color: #fff;
	}

	.btn-preview:hover {
		background-color: var(--primary);
		color: #000;
		border-color: var(--primary);
	}

	.btn-group {
		display: flex;
		gap: 10px;
	}

	.content-banner{
		font-size: 20px !important;

	}

	.design-detail-container {
		padding-bottom: 100px !important;
	}
	.breadcrumb-item a{
		color: rgb(83, 83, 83) !important;
		font-size: 15px !important;
	}
	.breadcrumb-item a:hover{
		color: var(--primary) !important;
	}
@media only screen and (max-width: 575px) {



	.content-banner{
		font-size: 17px !important;
	}

	.design-detail-container {
		padding-bottom: 50px !important;
	}

	.title-footer {
		font-size: 2.3rem !important;
	}

	.design-title {
		font-size: 28px !important;
		margin-bottom: 8px !important;
	}

	.design-card__description {
		font-size: 16px !important;
		margin-bottom: 8px !important;
		padding-bottom: 0px !important;
	}


	.btn-detail{
		font-size: 16px !important;
		margin-top: 25px !important;
		padding: 10px 20px !important;
	}

	.btn-cta-primary {
		font-size: 16px !important;
		margin-bottom: -10px !important;
	}
	
	.btn-group {
		gap: 5px !important;
	}

	.btn-preview, .btn-contato {
		font-size: 16px !important;
		padding: 10px 20px !important;
	}

	.d-table-cell h1{
		font-size: 3rem !important;
	}

	.title-design-mobile {
		font-size: 2.125rem !important;
	}

	.content-description{
		font-size: 16px !important;
	}
	
	.footer-container {
		padding-bottom: 60px !important;

	}
}