
/* :root { */

	/* --bg-main: #fff3e8;
	--bg-soft: #fdf1e7; */

/* } */

:root {

	/* Color Variable */
	--color-primary: #cd6c36;
	--color-secondary: #faa872;
	--color-light: #fbf9f6;
	--color-darklight: #f4f0e9;
	--color-black: #000000;
	--color-text: #62605d;
	--color-success: #2f855a;
	--color-danger: #dc2626;
	--theme-border-color: #e5e7eb;

	/* Linear Gradient Variable */
	/* linear-gradient(to right, #e43603, #fa7199, #e43603) */
	--theme-gradient: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-primary));
	--theme-progress-gradient: linear-gradient(to right, var(--color-primary) 0%, var(--color-secondary) 100%, var(--color-primary) 100%);

	/* Font Size Variable */
	--h1-fs: 80px;
	--h2-fs: 52px;
	--h3-fs: 44px;
	--h4-fs: 28px;
	--h5-fs: 20px;
	--h6-fs: 18px;
	--p-fs: 16px;

	/* Spacing Variable */
	--section-padding: 100px;
	--section-title-bottom: 70px;
	--content-space-sm: 8px;
	--content-space: 20px;
	--content-space-lg: 30px;
	--content-space-xl: 40px;
	--headding-lh: 1.1em;

	--common-radius: 15px;

	/* Font Family Variable */
	--headding-font: "Space Grotesk";
	--text-font: "DM Sans";

}

html.lenis {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto;
} 
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}
.lenis.lenis-scrolling iframe {
	pointer-events: none;
} 


/* Common CSS */
html {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}
body {
	width: 100%;
	height: 100%;
	font-weight: 400;
	font-size: var(--p-fs);
	color: var(--color-text);
	font-family: var(--text-font);
	background-color: var(--color-light);
}
a {
	color: inherit;
	text-decoration: none;
	background-color: transparent;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
a:focus {
	outline: none;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: var(--color-primary);
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
	border: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px white inset !important;
}
:focus {
  outline: none;
}
:focus-visible {
  box-shadow: none !important;
}

/* number field arrow remove */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}


/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0;
	font-weight: 400;
	font-family: var(--headding-font);
	line-height: var(--headding-lh);
	color: var(--color-black);
}

h1,
.h1 {
	font-size: var(--h1-fs);
}
h2,
.h2 {
	font-size: var(--h2-fs);
}
h3,
.h3 {
	font-size: var(--h3-fs);
}
h4,
.h4 {
	font-size: var(--h4-fs);
}
h5,
.h5 {
	font-size: var(--h5-fs);
}
h6,
.h6 {
	font-size: var(--h6-fs);
}
p {
	font-size: var(--p-fs);
	font-family: var(--text-font);
	line-height: 1.5em;
	margin-bottom: 0;
}
p + p {
	margin-top: var(--content-space-sm);
}

.h-100vh {
	height: 100vh;
}

/* Section CSS */
/* section {
	overflow: hidden;
} */
.sec-padding {
  padding-block: var(--section-padding);
}
.sec-bg {
	background-color: var(--color-darklight);
}
.text-gold {
	color: var(--color-primary);
}



.wrapper {
	width: 100%;
	height: 100%;
}
#cursor {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-primary);
	position: fixed;
	top: -5px;
	left: -5px;
	opacity: 0;
    font-size: 2.5px;
    line-height: 1.2;
    color: var(--bs-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	pointer-events:none
}


/* Theme Title CSS */
.theme-title {
	margin-bottom: var(--content-space);
}
.theme-title span {
	font-weight: 500;
	padding-left: 26px;
    margin-bottom: var(--content-space);
	color: var(--color-black);
	display: inline-block;
	position: relative;
}
.theme-title span::before {
	content: '';
	/* background-image: url('../img/icon-star.svg'); */  /* Alredy upload Wordpress Media URL: http://localhost/designographer/wp-content/uploads/2026/03/icon-star.svg */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_392_5805)'%3E %3Cpath d='M11.726 12.1371L10.2243 13.1915C9.97011 13.3699 9.61972 13.3092 9.44339 13.0535C8.72762 12.0155 7.8936 10.6984 6.94302 9.06848C6.08493 10.74 5.30405 12.0602 4.60203 13.0625C4.42495 13.3153 4.07629 13.3735 3.82366 13.1962L2.30402 12.1292C2.03936 11.9434 1.98826 11.5711 2.19066 11.3189C3.56907 9.60135 4.59199 8.49488 5.21729 7.91712C3.65397 7.59626 2.17071 7.27341 0.767503 6.91511C0.455821 6.83553 0.278359 6.50772 0.376832 6.20148L0.95973 4.38874C1.05694 4.08645 1.3873 3.92636 1.68573 4.03487C3.59753 4.72999 4.989 5.29887 5.89775 5.8266C5.68356 3.76746 5.5389 2.2732 5.49369 1.2826C5.4792 0.964984 5.7349 0.701172 6.05284 0.701172H7.87231C8.19313 0.701172 8.44925 0.968777 8.43143 1.2891C8.36152 2.54563 8.21325 4.06914 7.98828 5.8266C9.26005 5.16741 10.6996 4.59213 12.3106 4.02521C12.607 3.92093 12.9316 4.08327 13.0277 4.38235L13.6225 6.23206C13.7173 6.52664 13.5556 6.8462 13.26 6.93767C11.7129 7.41638 10.17 7.72919 8.66874 7.91712C9.43104 8.58501 10.499 9.73084 11.8315 11.3173C12.0427 11.5688 11.9948 11.9484 11.726 12.1371Z' fill='url(%23paint0_linear_392_5805)'/%3E %3C/g%3E %3Cdefs%3E %3ClinearGradient id='paint0_linear_392_5805' x1='0.349609' y1='6.99989' x2='13.6496' y2='6.99989' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23cd6c36'/%3E %3Cstop offset='1' stop-color='%23faa872'/%3E %3C/linearGradient%3E %3CclipPath id='clip0_392_5805'%3E %3Crect width='14' height='14' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E ");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 17px;
	height: 17px;
	position: absolute;
	left: 0;
	top: 2px;
}


/* Button CSS */
.theme-btn {
    font-size: 16px;
    line-height: 1em;
    border-radius: 100px;
    font-family: var(--text-font);
    background: var(--theme-gradient);
    background-size: 200% auto;
    padding: 17px 50px 17px 24px;
    transition: all 0.4s ease-in-out;
}
.theme-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 12px;
    /* background-image: url(../img/arrow-white.svg); */  /* Alredy upload Wordpress Media URL: http://localhost/designographer/wp-content/uploads/2026/03/arrow-white.svg */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.749 0.251049C12.0838 0.58578 12.0838 1.1285 11.749 1.46323L2.03476 11.1775C1.70003 11.5122 1.15731 11.5122 0.822582 11.1775C0.48785 10.8427 0.48785 10.3001 0.822582 9.96537L10.5369 0.251049C10.8716 -0.0836829 11.4143 -0.0836829 11.749 0.251049Z' fill='white'/%3E %3Cpath d='M0 0.857143C0 0.38376 0.38376 0 0.857143 0H11.1429C11.6162 0 12 0.38376 12 0.857143V11.1429C12 11.6162 11.6162 12 11.1429 12C10.6695 12 10.2857 11.6162 10.2857 11.1429V1.71429H0.857143C0.38376 1.71429 0 1.33053 0 0.857143Z' fill='white'/%3E %3C/svg%3E ");
	
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}
.theme-btn:hover {
    background-position: right center;
}
.theme-btn:hover::before {
    transform: translateY(-50%) rotate(45deg);
}


/* Loader CSS */
.preloader {
	top: 0;
	left: 0;
	z-index: 9999;
	height: 100vh;
	background-color: var(--bs-white);
	transition: all 3s ease;
}
.preloader .preloader-logo {
	width: 80px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 2s ease;
}
.preloader.loader-remove {
	height: 0;
}
.preloader.loader-remove .preloader-logo {
    top: 31px;
    left: 52px;
	transform: translate(0,0);
}


/* Image hover animation */
.image-anime{
	overflow: hidden;
	border-radius: var(--common-radius);
}
/* .image-anime{
	position: relative;
	overflow: hidden;
    border-radius: var(--common-radius);
	margin-bottom: 0;
}
.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}
.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
} */



@media (min-width: 1600px) {
    .container {
        max-width: 1500px;
    }
}
@media (max-width:1200px) {
    :root {
        --h1-fs: 70px;
		--h2-fs: 48px;
    }
}
@media (max-width: 992px) {
	:root {
		--h1-fs: 55px;
		--h2-fs: 45px;
		--section-title-bottom: 50px;
		--section-padding: 80px;
	}
}
@media (max-width: 767px) {
	:root {
		--h1-fs: 40px;
		--h2-fs: 36px;
		--h4-fs: 24px;
		--h5-fs: 18px;
    	--p-fs: 16px;
		--section-padding: 60px;
		--section-title-bottom: 30px;
	}
	.container {
		padding-inline: 20px;
	}
	.theme-btn {
    	font-size: 14px;
		padding: 16px 45px 16px 22px;
	}
	.theme-btn::before {
    	width: 10px;
		height: 10px;
	}
	.preloader .preloader-logo {
		width: 60px;
	}
	.preloader.loader-remove .preloader-logo {
		width: 50px;
		top: 23px;
		left: 45px;
	}
}
@media (max-width: 576px) {
	:root {
		--h2-fs: 32px;
		--h4-fs: 24px;
		--content-space-sm: 6px;
		--content-space: 15px;
		--content-space-lg: 20px;
	}
}
@media (max-width: 480px) {
	:root {
		--h1-fs: 35px;
		--h2-fs: 28px;
		--h5-fs: 16px;
	}
}
