@charset "UTF-8";

body {
    background-color: #f1efe8;
}

.navbar {
    background: var() !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0px;
    padding-right: 0px;
    border-top-left-radius: 1px;
}

#navbarSupportedContent1 {
    font-size: large;
    margin-left: 850px;
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #3c3489 !important;
    font-weight: 600;
    text-decoration: none;
}

.nav-link {
    color: var(--muted) !important;
    font-size: 0.85rem;
    transition: color 0.2s;
    padding-right: 0px;
    margin-right: 23px;
} 

	.nav-link:hover, .nav-link.active { 
	color: var(--purple-dark) !important; font-weight: 500; 
}

    .navbar-toggler { 
	border-color: var(--purple-mid); 
}

 .section-divider {
    height: 0;
    background: linear-gradient(to right, transparent, var(--purple-mid), var(--purple-dark), var(--purple-mid), transparent);
    border: none;
    /* [disabled]margin-top: -65px; */
    /* [disabled]margin-right: -65px; */
    /* [disabled]margin-left: -65px; */
    /* [disabled]margin-bottom: -65px; */
    padding-top: 0px;
    padding-left: 0px;
}


.hero-section {
    background-color: #f1efe8;
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    padding-right: 0;
    position: relative;
    overflow: hidden;
    margin-left: -694px;
    padding-bottom: 0px;
}

.container .row.row2 {
    background-color: #f1efe8;
    padding-left: 0px;
    padding-top: 31px;
}

.hero-dots {

    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--purple-mid) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    pointer-events: none;
    background-color: #f1efe8;
}
.hero-deco-dot {
    background-color: #f1efe8;
}
    .hero-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple-dark);
    background: var(--purple-light);
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 20px;
    padding-left: 0px;
    margin-bottom: 29px;
}
    .hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
}
   .hero-title span { 
	   color: var(--purple-dark); 
}
   .hero-subtitle {
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--muted);
    margin-bottom: 2rem;
    padding-left: 0px;
}
   .hero-deco { 
	   width: 100%; 
	   aspect-ratio: 3/4; 
	   max-width: 260px; 
	   background: var(--purple-light); 
	   border-radius: 20px; 
	   border: 1px dashed  var(--purple-mid); 
	   display: flex; 
	   align-items: center; 
	   justify-content: center; 
}
   .hero-deco-dot { 
	   width: 60px; 
	   height: 60px; 
	   border-radius: 50%; 
	   background: var(--purple-mid); 
	   opacity: 0.4; 
}
.container .row.row1 {
    background-color: #f1efe8;
}

.btn-purple { 
    background: var(--purple-dark); 
    color: var(--purple-light); 
    border: none; 
    font-size: 0.85rem; 
    font-weight: 500; 
    padding: 10px 24px; 
    border-radius: 8px; 
    transition: opacity 0.2s, transform 0.2s; 
    text-decoration: none; 
    display: inline-block; 
}

.btn-purple:hover { 
    opacity: 0.88; 
    transform: translateY(-1px); 
    color: var(--purple-light); 
}

.btn-outline-purple {
    border: 1px solid var(--purple-mid) !important;
    background: transparent; 
    color: var(--purple-dark);
    border: 1px solid var(--purple-mid); 
    font-size: 0.85rem; 
    font-weight: 500; 
    padding: 10px 24px; 
    border-radius: 8px; 
    transition: background 0.2s; 
    text-decoration: none; 
    display: inline-block; 
}

.btn-outline-purple:hover { 
    background: var(--purple-light); 
    color: var(--purple-dark);
}
.section-tag { 
	font-size: 0.7rem; 
	font-weight: 500; 
	letter-spacing: 0.12em; 
	text-transform: uppercase; 
	color: var(--purple-dark); 
	margin-bottom: 0.4rem; 
}

.section-title { 
	font-size: clamp(1.6rem, 3vw, 2.4rem); 
	font-weight: 600; 
	letter-spacing: -0.02em; 
	color: var(--text); 
	margin-bottom: 0.75rem; 
}

.section-sub { 
	font-size: 0.95rem; 
	color: var(--muted); 
	line-height: 1.8; }

.row.row2 {
    background-color: #f1efe8;
}
.d-block.mx-auto {
}

.about-hobby-title { 
	font-size: 1.4rem; 
	font-weight: 600; 
	color: var(--text); 
	margin-bottom: 0.6rem; 
}
    .about-hobby-desc { 
		font-size: 0.93rem; 
		color: var(--muted); 
		line-height: 1.85; 
}
    .about-img-ph { 
		background: var(--warm-gray); 
		border-radius: 14px; 
		border: 1px dashed var(--purple-mid); 
		display: flex; 
		flex-direction: column; 
		align-items: center; 
		justify-content: center; 
		gap: 10px; aspect-ratio: 4/5; 
}
    .about-img-ph span { 
		font-size: 0.75rem; 
		color: var(--purple-mid); 
}

.portfolio-section {
    background: #f1efe8;
    padding: 80px 0;
    margin-left: 34px;
}

.portfolio-card {
	border-radius: 12px; 
	overflow: hidden; 
	border: 1px solid var(--border); 
	background: var(--white); 
	transition: transform 0.25s; height: 100%; 
}
    .portfolio-card:hover { 
		transform: translateY(-4px); 
}
    .card-img-ph { 
		aspect-ratio: 4/3; 
		background: var(--warm-gray); 
		border-bottom: 1px dashed var(--border); 
		display: flex; 
		flex-direction: column; 
		align-items: center; 
		justify-content: center; 
		gap: 8px; 
}
    .card-img-ph .ph-sq { 
		width: 32px; 
		height: 32px; 
		border-radius: 6px; 
		background: var(--purple-light); 
		border: 1px dashed var(--purple-mid); 
}
    .card-img-ph span { 
		font-size: 0.7rem; 
		color: var(--purple-mid); 
}
    .card-category { 
		font-size: 0.7rem; 
		font-weight: 500; 
		letter-spacing: 0.1em; 
		text-transform: uppercase; 
		color: var(--purple-dark);
		margin-bottom: 4px;
}
.row.row2 {
    margin-left: 135px;
    margin-right: -532px;
}
    .card-title-text { 
		font-family: 'Playfair Display', serif; 
		font-size: 1rem; 
		color: var(--text); 
		margin-bottom: 4px; 
}
    .card-desc {
		font-size: 0.82rem; 
		color: var(--muted); 
		line-height: 1.6; 
}


.col-lg-4.d-none.d-lg-flex.justify-content-end.fade-up-2 {
    margin-left: -45px;
}
#wufoo-zlq2mz30i0omje {
}
.row.justify-content-center {
    margin-left: -750px;
    margin-right: 295px;
    padding-right: 37px;
    padding-left: 0px;
}
.about-section {
    margin-left: -664px;
}