/* homepage css */

.hero {
    /* min-height: 80svh; */
	min-height: 78.5svh;
    padding-top: calc(20px + (0 - 20) * ((100vw - 300px) / (1680 - 300)));
    padding-bottom: calc(0px + (34 - 0) * ((100vw - 300px) / (1680 - 300)));
	/* font-size: clamp(17.75px,calc(17.75px + (20.15 - 17.75) * ((100vw - 375px) / (1920 - 375))),20.15px) */
	font-size: clamp(17.75px,calc(17.75px + (20.5 - 17.75) * ((100vw - 375px) / (1920 - 375))),20.5px)
}

.hero h1 {
   /*  font-size: clamp(63px,calc(63px + (82 - 63) * ((100vw - 375px) / (1920 - 375))),82px); */
	font-size: clamp(63px,calc(63px + (97.5 - 63) * ((100vw - 375px) / (1920 - 375))),97.5px);
	font-size: clamp(63px,calc(63px + (98.75 - 63) * ((100vw - 375px) / (1920 - 375))),98.75px);
	line-height: 1.2
}

.hero h1 mark {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--heading-color, var(--heading-1-color, var(--headings-color)));
    display: flex;
    margin-top: -32px;
    margin-left: max(30px, min(34px,(100vw - 100vmin)));
    position: relative;
}

.h-dots-title-top:before {
    content: '• • •';
    position: absolute;
    left: .25em;
    top: -.5em;
    font-size: clamp(16px,calc(16px + (22 - 16) * ((100vw - 375px) / (1920 - 375))),22px);
}

.hero .right {
	padding-top: calc(14px + (22 - 14) * ((100vw - 300px) / (1680 - 300)));
    padding-bottom: calc(14px + (20 - 14) * ((100vw - 300px) / (1680 - 300)));
    padding-left: calc(24.65px + (50 - 24.65) * ((100vw - 300px) / (1680 - 300)));
	/* border-left: 1px solid; */
	border-left-color: #d49245;
    border-left-style: dashed;
    border-left-width: thin;
}

.hero h2 {
	/* font-size: clamp(23.75px,calc(23.75px + (26.75 - 23.75) * ((100vw - 375px) / (1920 - 375))),26.75px); */
	font-size: clamp(23.75px,calc(23.75px + (35 - 23.75) * ((100vw - 375px) / (1920 - 375))),35px)
	/* margin-bottom: calc(5px + .25vw) */
}

.hero .right p {
	font-size: clamp(17.75px,calc(17.75px + (24 - 17.75) * ((100vw - 375px) / (1920 - 375))),24px)
}

.hero .social-links svg {
	width: 1.25em
}

.hero .social-links a.has-box-shadow {
    border-radius: var(--squareRadius);
	transition: color .35s;
	padding: 14px;
}

.hero .social-links a.has-box-shadow:not(:hover) {
	/* color: #9fa1a9 */
	color: #abacb4
}

.hero a.button.with-icon {
	
}

.hero  a.button.has-box-shadow:not(:hover) {
	color: #d49245;
}

.hero .right:before {
	content: '';
}

h2.section-title {
	font-size: clamp(21px,calc(21px + (34.5 - 21) * ((100vw - 375px) / (1920 - 375))),34.5px)
}

.section-desc {
	font-size: clamp(18px,calc(18px + (22 - 18) * ((100vw - 375px) / (1920 - 375))),22px)
}

.with-icon {
	gap: .5em
}

.with-icon svg {
	height: auto;
	aspect-ratio: 1/1;
	fill: currentColor;
	display: flex
}

.with-icon.icon-right > span:first-child {
	order: 2
}

/* what I do */

.service {
	padding: calc(30px + .8vw) calc(25px + .8vw);
	transition: color .25s
}

.service h3 svg {
	width: 1.35em;
}

.service:hover,
.service a:hover {
	color:#cecece
}

.service .more {
	font-size: clamp(16px,calc(16px + (17.55 - 16) * ((100vw - 375px) / (1920 - 375))),17.55px);
	padding-top: calc(17px + (18 - 17) * ((100vw - 300px) / (1680 - 300)));
	border-top: 1px solid #575757;
}

.service:not(:hover) .more,
.service:hover .more {
	color: #d49245;
}

.service .more svg {
	width: .92em;
	transform-style: preserve-3d;
	transition: all .475s cubic-bezier(.215, .61, .355, 1);
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-45deg) skew(0deg, 0deg);
}

.service:hover .more svg {
    transform-style: preserve-3d;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(360deg) skew(0deg, 0deg);
}

.timeline-container .line {
	transform: translate(-50%);
    width: 3.5px;
    height: 100%;
    background-color: #2b2b2c;
	overflow: hidden;
}

.progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Set height to full and scale it instead */
  transform: scaleY(0); /* Start with no visible height */
  transform-origin: top; /* Scale from the top */
  /* background-image: linear-gradient(125deg, #072ac8, #6006c7 47%, #06a3c7); */
  transition: transform 0.1s linear;
  will-change: transform;
	background-color: #d49245;
}

.timeline-container .left:before,
.timeline-container .right:before {
    content: '';
    width: 17px;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    border-radius: .25rem;
    transform: translate(-50%);
    background-color: rgb(227, 232, 239);
    box-shadow: 0 0 #6a696900, 0 .7px .3px #6a69691a, 0 2.2px 1.9px #6a69691d, 0 6.9px 9.4px #6a696920;
}

/* plugin portfolio */

.plugin p.desc {
	font-size: clamp(16px,calc(16px + (17.5 - 16) * ((100vw - 375px) / (1920 - 375))),17.5px);
	opacity: .83
}

.plugin p.cat {
	color: #d49245
}

.plugin .bottom {
	transition: margin-top .2s;
	margin-top: calc(1.5px + .075vw);
	font-size: clamp(15.5px,calc(15.5px + (17.25 - 15.5) * ((100vw - 375px) / (1920 - 375))),17.25px);
	row-gap: 12px;
}


.wk-toggle-item:not(.active) .plugin-link {
	opacity: 0;
	content-visibility: hidden;
	transition: opacity .25s, content-visibility .25s
}

.plugin a.button.has-box-shadow:hover svg {
	margin-left: 1px;
}
/*
.wk-toggle-item.active .wk-toggle-label h3 {
	color: #d49245
}
*/

@media (min-width: 768px) {
	.hero {
		/* width: 800px; */
		max-width: calc(870px + 5vw);
	}
	.hero h1 {
		margin-left: auto;
		padding-right: calc(25px + (50 - 25) * ((100vw - 300px) / (1680 - 300)));
	}
	.hero h1 mark {
		margin-top: -34px;
	}
	.hero .right {
		
	}
	
	.timeline-container .line,
	.timeline-container .left:before,
	.timeline-container .right:before {
		left: 50.125%;
	}
	
	.service {
		width: 43.75%;
	}
	
	.service.left {
		margin-right: auto;
	}
	
	.service.right {
		margin-left: auto;
	}
	
	.with-max-width {
		max-width: 780px
	}
	
	.wk-toggle-item.active .bottom {
		margin-top: -2px;
	}
	
	.plugin a.button.has-box-shadow {
		padding: 1rem 1.25rem;
	}
	
}

@media (min-width: 3540px) {
	
	
}

@media (min-width: 1025px) and (max-width: 1366px) {
	
	
}

@media (min-width: 768px) and (max-width: 1024px) {

	
	
}

@media (max-width: 767px) {
	
	.hero {
		align-content: center;
		row-gap: calc(6px + .3vw)
	}
	
	.wk-toggle-item.active .bottom {
		margin-top: calc(10px + .15vw);
	}
	
	.plugin a.button.has-box-shadow {
		padding: .7rem .85rem;
	}
	
}

@media (max-width: 499px) {
	
		
}