:root {
    --primary-color: #FFD500;
    --secondary-color: #FF90E8;
    --accent-color: #00F0FF;
    --bg-dark: #fffaf0;
    --text-main: #000000;
    --text-muted: #222222;
    --border-color: #000000;
    --border-width: 3px;
    --box-shadow: 6px 6px 0px #000000;
    --box-shadow-hover: 2px 2px 0px #000000;
    --glass-bg: #ffffff;
    --glass-border: #000000;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Public Sans', sans-serif;
}

body{
    font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--text-main);
    background-color: var(--bg-dark);
	position: relative;
    line-height: 1.6;
}

h1,h2,h3,h4,h5,h6{
	font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    color: var(--text-main);
}

a,button{
	-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-moz-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline:none;
	box-shadow:none;
	text-decoration:none;
}

/* Text selection background-color */
::-moz-selection {
    background-color: #42BC7F;
    color: #fff;
}
 
::selection {
    background-color: #42BC7F;
    color: #fff;
}
::-moz-selection,
::selection {
    background-color: #42BC7F;
    color: #fff;
}
/* social */
.social-body{
	position:fixed;
	top:50%;
	left:0;
	margin-top:-80px;
	z-index:999;
}
.social-body ul li{
	display:block;
}
.social-body ul li a{
	font-size:20px;
	color:#fff;
	background:#42bc7f;
	height: 40px;
    width: 40px;
	line-height:40px;
	text-align:center;
	display:block;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.social-body ul li a:hover{
	width:50px;
}
.social-body  ul li.facebook a{
	background:#425F9C;
}
.social-body .ul li.twitter a{
	background:#1DA1F3;
}
.social-body ul li.instagram a {
	background: #E21B75;
}
.social-body ul li.pinterest a{
	background:#CB2028;
}
/* button */
a:hover{
	text-decoration:none;
}
.button{}

.button .btn {
	font-weight: 700;
	font-size: 16px;
	height: 45px;
	color: var(--text-main);
	display: inline-block;
	line-height: 39px;
	padding: 0 30px 0 30px;
    background: #fff;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
    border-radius: 0;
    transition: transform 0.1s, box-shadow 0.1s;
}
.button .btn:hover {
    transform: translate(2px, 2px);
    box-shadow: var(--box-shadow-hover);
    color: var(--text-main);
}
.button .btn:active {
    transform: translate(6px, 6px);
    box-shadow: 0px 0px 0px var(--border-color);
}
.button .primary{
    background: var(--primary-color);
}
.button .primary:hover{
    background: var(--secondary-color);
}

.section{
	padding:100px 0;
}

/*section-title*/
.section-title {
	text-align: center;
}
.section-title h2 {
	color:#000;
	font-size: 44px;
	text-transform: uppercase;
	position: relative;
	font-weight: 700;
}
.section-title h2 span {
	color: #42bc7f;
}
/*breadcrumb*/
.breadcrumb{
	padding:80px 0px 0px 0px ;
	margin:0;
	background-color:#fff;
	border-top:1px solid #0000001a;
	border-bottom:1px solid #0000001a;
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
}
.breadcrumb .breadcrumb-text {
	float: right;
}
.breadcrumb .breadcrumb-text h2{
	color:#42BC7F;
	text-transform:capitalize;
	padding-bottom:10px;
	border-bottom:5px solid #42BC7F;
}
/*slicknav_menu*/
.slicknav_menu{
	display:none;
}

#scrollUp {
	bottom: 15px;
	right: 15px;
	padding: 10px 20px;
	background: #42bc7f;
	color: #fff;
	font-size: 25px;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	padding: 0;
	border-radius: 100%;
}
#scrollUp:hover{
	background:#333;
}

/*=========================
	Header CSS
===========================*/
.header{
	position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    transition: all 0.3s ease;
}
.header .navbar-collapse{
	padding:0;
}
.header .header-inner {
	background: var(--glass-bg);
    border-bottom: var(--border-width) solid var(--glass-border);
    transition: all 0.3s ease;
}
.header.sticky .header-inner {
    box-shadow: 0 6px 0px rgba(0, 0, 0, 1);
}
.header .navbar-nav {
	float: right;
	margin: 0;
}
.header .logo{
	float:left;
	padding-top: 12px;
}
.header .logo img {
    height: 40px;
    width: auto;
}
.header .navbar {
	background: none;
	box-shadow: none;
	border: none;
	margin: 0;
	min-height: 0px;
}
.header .nav li{
    float: left;
	position:relative;
}
.header .nav li:last-child{
	margin:0;
}
.header .nav li a {
	color: var(--text-main);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 25px 15px;
    position: relative;
    display: inline-block;
	box-shadow:none;
	text-shadow:none;
}
.header .nav li:hover a,
.header .nav li.current a{
	color: var(--text-main);
    background-color: var(--primary-color);
    border: 3px solid var(--text-main);
    padding: 5px 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: normal;
    box-shadow: 4px 4px 0px #000;
}
.header .nav li .dropdown{
	background: #333;
    width: 220px;
    position: absolute;
    left: 40px;
    z-index: 99;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.header .nav li:hover .dropdown{
	opacity:1;
	visibility:visible;
	left: 0px;
}
.header .nav li .dropdown li{
	float:none;
	margin:0;
}
.header .nav li .dropdown li a{
	padding: 10px 15px;
    color: #fff;
    display: block;
}
.header .nav li .dropdown li i{
	float:right;
}
.header .nav li .dropdown li:hover a{
	color:#42BC7F;
}
.header .nav li .dropdown li a:before{
	display:none;
}
.header .nav li .dropdown .sub-dropdown{
	position: absolute;
    top: 0;
    left: 110%;
    width: 220px;
    background: #333;
	opacity:0;
	visibility:hidden;
	transition:all 0.4s ease;
}
.header .nav li .dropdown li:hover .sub-dropdown{
	opacity:1;
	left:100%;
	visibility:visible;
}
.header .nav li .dropdown .sub-dropdown li:hover a {
	color:#42BC7F;
}
.header .nav li .dropdown .sub-dropdown li a{
	color:#fff;
}
/* Sticky */
.header .sticky {
	position: fixed;
	width: 100%;
	top: 0;
	animation: fadeInDown 0.8s both 0s;
}
.form-group {
	text-align: center;
}
/*=========================
	End Header CSS
===========================*/

/*=========================
	Slider CSS
===========================*/
.slider{
	position: relative;
    height: 100vh;
    min-height: 700px;
	background-size: cover;
	background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
}
.slider:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	height: 100%;
	width: 100%;
	background: rgba(255, 250, 240, 0.85);
    z-index: 1;
}
.slider .container {
    z-index: 2;
    position: relative;
}
.slider .text {
	margin-top: 0;
}
.slider h1 {
	color: var(--text-main);
	font-size: 80px;
	font-weight: 900;
	margin: 0 0 20px;
    line-height: 1.1;
    text-shadow: 3px 3px 0px var(--primary-color), 6px 6px 0px var(--border-color);
    text-transform: uppercase;
}
.slider p{
	color: var(--text-main);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
    background: var(--accent-color);
    display: inline-block;
    padding: 10px 20px;
    border: var(--border-width) solid var(--border-color);
    box-shadow: 6px 6px 0px var(--border-color);
}
.slider .button{
	margin-top:30px;
}
.slider .button .btn{
	margin-right: 15px;
	background: #fff;
    border: var(--border-width) solid var(--border-color);
	color: var(--text-main);
	border-radius: 0;
    padding: 0 35px;
    height: 50px;
    line-height: 44px;
    text-transform: uppercase;
    font-weight: 800;
    box-shadow: var(--box-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
}
.slider .button .btn:last-child{
	margin-right:0px;
}
.slider .button .btn i{
	margin-right:7px;
}
.slider .button .btn:hover{
	background: var(--primary-color);
	color: var(--text-main);
    transform: translate(2px, 2px);
    box-shadow: var(--box-shadow-hover);
}
.slider .button .primary{
	background: var(--secondary-color);
	color: var(--text-main);
}
.slider .button .primary:hover{
	background: var(--primary-color);
}
/*=========================
	End Slider CSS
===========================*/

/*=========================
	About CSS
===========================*/
.about{
	padding-top:100px;
	padding-bottom:100px;
}
.about .single-about p{
	margin-bottom: 25px;
	font-size:15px;
	font-weight:300;
}
.about .single-about .cv {
	z-index:99;
	margin-top: 40px;
}
.about .single-about .cv a {
	font-weight: 500;
	font-size: 15px;
	height: 40px;
	color: #fff;
	background:#42BC7F;
	text-transform:uppercase;
	display: inline-block;
	line-height: 40px;
	padding: 0 30px 0 30px;
}
.about .section-title{
	margin-top:127px;
}
.about .single-about .cv a:hover{
	background:#333;
}
.about .single-about .social{
	margin-top: 20px;
}
.about .single-about .social ul{}
.about .single-about .social li{
	display:inline-block;
	margin-right:10px;
}
.about .single-about .social li:last-child{
	margin-right:0px;
}
.about .single-about .social li a{
	text-align:center;
}
.about .single-about .social li a i {
	font-size: 20px;
	color: #fff;
	background: #42bc7f;
	font-size: 17px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	border-radius: 0px;
	
}
.about .single-about .social li a:hover i{
	color:#fff;
	background:#333;
}
.about .image{
	position:relative;
}
.about .image img {
	width: 100%;
	box-shadow: 2px 2px 10px #0000002e;
}
.about .image .video-popup {
	color: #fff;
	background: rgba(66, 188, 127, 0.6);
	height: 60px;
	width: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 20px;
	border-radius: 0px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -30px;
	margin-top: -30px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	border-radius: 100%;
	padding-left: 3px;
	padding-top: 1px;
}
.about .image .video-popup:hover{
	transform:scale(1.1);
	color:#fff;
	background:#3339;
}
/*=========================
	End About CSS
===========================*/

/*=========================
	Services CSS
===========================*/
.service{
	background: var(--primary-color);
	padding: 40px 0 100px;
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}
.service .section-title {
	margin-top: 227px;
}
.service .section-title h2{
    color: var(--text-main);
}
.service .section-title span{
	color: #fff;
    background: var(--text-main);
    padding: 0 10px;
}
.service .single-service {
	position: relative;
	margin-top: 60px;
	padding: 30px;
    background: #fff;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
}
.service .single-service i {
	font-size: 40px;
	color: var(--text-main);
	margin-bottom: 20px;
    display: inline-block;
}
.service .single-service:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px var(--border-color);
}
.service .single-service h5{
	font-size:24px;
	color: var(--text-main);
	margin-bottom:10px;
	text-transform:capitalize;
    font-weight: 800;
}
.service .single-service p{
	color: var(--text-muted);
	font-size:16px;
	font-weight:600;
}
/*=========================
	End Services CSS
===========================*/

/*=========================
	Skills CSS
===========================*/
.skill {
	background: var(--secondary-color);
	padding: 50px 0 100px;
    border-bottom: var(--border-width) solid var(--border-color);
}
.skill .section-title {
	margin-top: 130px;
}
.skill .section-title h2{
	color: var(--text-main);
    background: #fff;
    display: inline-block;
    padding: 10px 20px;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.skill .skill-main{
	margin-top:50px;
}
.skill .skill-head .skill-content {
	margin-top: 50px;
    background: #fff;
    padding: 30px;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.skill .skill-head .skill-content h3{
	color: var(--text-main);
	font-weight:800;
	font-size:32px;
}
.skill .skill-head .skill-content p{
	color: var(--text-muted);
	font-weight:600;

	margin-top:20px;
}
.skill .skill-head .skill-content .bolt{
	font-weight:600;
}
.skill .skill-title h4 {
	font-size: 16px;
	margin-bottom: 15px;
	text-transform: capitalize;
	font-weight: 600;
	color:#fff;
}
.skill .single-skill{
	margin-bottom:30px;
}
.skill .single-skill:last-child{
	margin-bottom:0px;
}
.skill .progress {
	overflow: visible;
	border-radius: 0px;
	box-shadow: none;
	background: #eee;
	height: 30px;
	margin: 0;
}
.skill .progress .progress-bar {
	position: relative;
}
.skill .progress .progress-bar span {
	position: absolute;
	right: -2px;
	top: -36px;
	color: #333;
	font-weight: 500;
	font-size: 14px;
	color:#fff;
}
.blog .single-sidebar{
	border-bottom-color:#ED1C24;
}
.skill .progress .progress-bar span::before{
	border-bottom-color:#ED1C24;
}
.skill .progress .progress-bar{
	background:#42bc7f;
}
.skill .button{
	margin-top:20px;
}
.skill .button .btn:hover{
	background:#333;
	color:#fff;
}
.skill .button .btn{
	background:#ED1C24;
}
/*=========================
	End Skills CSS
===========================*/

/*=========================
	Story CSS
===========================*/
.story{
	padding:100px 0px;
	background: var(--bg-dark);
}
.story .story-content{}
.story .single-story {
	position:relative;
	margin-top:55px;
}
.story .single-story .inner-content{
	margin-left:125px;
	position:relative;
}
.story .story-content{
	position:relative;
}
.story .story-content::before {
	position: absolute;
	content: "";
	left: 90px;
	top: 0;
	height: 100%;
	width: 2px;
	background: var(--primary-color);
    opacity: 0.5;
}
.story .single-story span {
	display: block;
	font-size: 18px;
	font-weight: 800;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--accent-color);
	color: var(--text-main);
	border-radius: 0;
    border: var(--border-width) solid var(--border-color);
	height: 40px;
	width: 65px;
	text-align: center;
	line-height: 34px;
    box-shadow: 4px 4px 0px var(--border-color);
}
.story .single-story span::before {
	position: absolute;
	content: "";
	left: 81px;
	top: 10px;
	height: 20px;
	width: 20px;
	background: var(--primary-color);
	border-radius: 0;
    border: var(--border-width) solid var(--border-color);
    box-shadow: 2px 2px 0px var(--border-color);
}
.story .single-story h3, .story .single-story h4 {
	font-size: 24px;
	font-weight: 800;
	color: var(--text-main);
	padding-bottom: 5px;
    margin-top: 0;
}
.story .single-story h4 {
    font-size: 20px;
}
.story .single-story p{
	color: var(--text-muted);
	font-size: 16px;
	font-weight: 500;
    line-height: 1.6;
}
.story .single-story .p2 {
	margin-top: 15px;
}
/*=========================
	End Story CSS
===========================*/

/*=========================
	Latest Works CSS
===========================*/
.latest-works{
}
.latest-works .section-title h2 {
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.latest-works .section-title{
	margin:0;
	padding:0;
}
.latest-works .works-menu {
	padding-top: 10px;
	padding-bottom: 50px;
	text-align: center;
}
.latest-works .works-menu ul{}
.latest-works .works-menu ul li {
	font-size: 16px;
    font-weight: 700;
	color: var(--text-main);
	display:inline-block;
	margin-right: 15px;
	position: relative;
	padding: 10px 20px;
	margin-top: 22px;
	cursor:pointer;
	transition: transform 0.1s, box-shadow 0.1s;
    background: #fff;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.latest-works .works-menu ul li:hover,
.latest-works .works-menu ul li.active{
	color: var(--text-main);
	background: var(--primary-color);
    transform: translate(2px, 2px);
    box-shadow: var(--box-shadow-hover);
}
.latest-works .works-menu ul li i{
	margin-right:5px;
	font-size:14px;
}
.latest-works .works-menu ul li::before, .latest-works .works-menu ul li:after {
    display: none;
}
	left: 0;
	top: 0px;
	height: 1px;
	width: 100%;
	background: #42bc7f;
	opacity:0;
	visibility:hidden;
	transition:all 0.4s ease;
}
.latest-works .works-menu ul li.active:before{
	top: -4px;
	opacity:1;
	visibility:visible;
}
.latest-works .works-menu ul li:after{
	position: absolute;
	content: "";
	left: 0;
	bottom: 0px;
	height: 1px;
	width: 100%;
	background: #42bc7f;
	opacity:0;
	visibility:hidden;
	transition:all 0.4s ease;
}
.latest-works .works-menu ul li.active:after{
	opacity:1;
	visibility:visible;
	bottom: -4px;
}
.latest-works .works-menu ul li:last-child{
	margin:0;
}
/* single-work */
.latest-works .single-work{
	position:relative;
	overflow:hidden;
}
.latest-works .single-work:before{
	background: #42bc7f;
    top:0px;
	left:0;
    content: "";
    height: 100%;
	width:100%;
    position: absolute;
    transition: all 0.4s ease;
	opacity:0;
	visibility:hidden;
}
.latest-works .single-work:hover:before{
	opacity:0.9;
	visibility:visible;
}
.latest-works .single-work img{
	width:100%;
}
.latest-works .single-work .works-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	text-align: center;
}
.latest-works .single-work:hover .works-hover{
	opacity: 1;
	visibility: visible;
}
.latest-works .single-work .works-hover a{
	display:inline-block;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
	color:#fff;
	font-size:16px;
}
.latest-works .single-work .works-hover .more{
	margin-top:20px;
}
.latest-works .single-work .works-hover .more a {
	color: #fff;
	font-size: 16px;
	border: 2px solid #fff;
	height: 40px;
	width: 140px;
	line-height: 40px;
	text-align: center;
	text-transform: uppercase;
	font-weight:500;
}
.latest-works .single-work .works-hover .more a:hover{
	color:#000;
	border-color:#000;
}
.latest-works .single-work .works-hover h4 {
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.latest-works .single-work .works-hover h4:hover{
	color:#444;
}
.latest-works .single-work .works-hover h4:before{
	position: absolute;
    content: "";
    left: -20px;
    top: 8px;
    height: 1px;
    width: 10px;
    background: #fff;
}
.latest-works .single-work .works-hover .link:before{
	position: absolute;
    content: "";
    left: 50%;
    top: -40px;
    height: 40px;
    width: 2px;
    background: #fff;
    margin-top: -20px;
    margin-left: -1px;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
	opacity:0;
	visibility:hidden;
}
.latest-works .single-work:hover .works-hover .link:before{
	top: 50%;
	opacity:1;
	visibility:visible;
}
.latest-works .single-work .works-hover .link:after{
	position: absolute;
    content: "";
    left: -40px;
    top: 50%;
    height: 2px;
    width: 40px;
    background: #fff;
    margin-top: -1px;
    margin-left: -20px;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
	opacity:0;
	visibility:hidden;
}
.latest-works .single-work:hover .works-hover .link:after{
	left: 50%;
	opacity:1;
	visibility:visible;
}
.latest-works .single-work .works-hover h4:after{
	position: absolute;
    content: "";
    right: -20px;
    top: 8px;
    height: 1px;
    width: 10px;
    background: #fff;
}
.latest-works .isotop-active .col-md-4{
	padding-right: 0px;
	padding-left: 0px;
}
/*=========================
	End Latest Works CSS
===========================*/

/*=========================
	Testimonials CSS
===========================*/
.testimonials{
	background-image:url('img/testimonial-bg.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
.testimonials .testi-content{}
.testimonials .testi-content h2{
	color:#fff;
	padding:0 185px;
}
.testimonials .single-testimonial{
	padding:0 185px;
	position:relative;
}
.testimonials .single-testimonial img {
	height: 100px;
	width: 100px;
	border-radius: 100%;
	position: absolute;
	left: 190px;
	top: 4px;
	border:4px solid #42bc7f;
	border-top:4px solid #fff;
	border-bottom:4px solid #fff;
}
.testimonials .single-testimonial h2{
	color:#fff;
	font-size:36px;
	margin-bottom:65px;
}
.testimonials .single-testimonial p {
	color: #fff;
	font-size: 18px;
	color: #f5f5f5;
	position: relative;
	margin-left: 115px;
	margin-top: 70px;
}
.testimonials .single-testimonial p .fa{
	color:#42bc7f;
	font-size:30px;
	margin-right:10px;
}
.testimonials .single-testimonial p:after{
	font-size:45px;
	position:absolute;
	left:0;
	top:-19px;
	opacity:0.4;
}
.testimonials .single-testimonial .star {
	margin-left: 115px;
	margin-top: 10px;
}
.testimonials .single-testimonial .star i {
	color: #42bc7f;
	font-size: 18px;
	margin-right: 3px;
}
.testimonials .single-testimonial .name{
	margin-top:10px;
	color:#fff;
	font-size:18px;
	display:block;
	text-transform:capitalize;
	margin-left: 115px;
}
.testimonials .owl-dots {
	z-index: 333;
	left: 50%;
	width: 100%;
	margin-top: 30px;
	padding:0 214px;
}
.testimonials .owl-dots button{
	width: 10px;
    height: 10px;
    background: #fff;
    margin-right: 5px;
	border:1px solid transparent;
}
.testimonials .owl-dots button.active{
	background:transparent;
	border-color:#42bc7f;
	width: 20px;
}
.testimonials .owl-dots button span{
}
/*=========================
	End Testimonials CSS
===========================*/

/*=========================
	Blogs CSS
===========================*/
.blog{
	background: var(--bg-dark);
}
.blog .section-title{
	margin-bottom:20px;
}
.blog .single-news {
	background: #fff;
	border: var(--border-width) solid var(--border-color);
	overflow: hidden;
	margin-top: 30px;
	position:relative;
    box-shadow: var(--box-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
}
.blog .single-news img{
	width:100%;
    border-bottom: var(--border-width) solid var(--border-color);
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	transition:all 1s ease;
}
.blog .single-news:hover{
	transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px var(--border-color);
}
.blog .single-news .news-head{
	overflow:hidden;
}
.blog .single-news .news-date {
	background: var(--primary-color);
	position: absolute;
	left: -80px;
	top: -20px;
	height: 107px;
	width: 216px;
	text-align: center;
	border-bottom: var(--border-width) solid var(--border-color);
	padding-top: 25px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	transform: rotate(-45deg);
	z-index: 3333;
}
.blog .single-news .news-date span{
	display:block;
	color: var(--text-main);
	font-size:17px;
	font-weight:800;
	line-height: 22px;
	text-transform:uppercase;
}
.blog .single-news .news-date span:before{
	position:relative;
	content:"";
	left:0;
	top:0;
	height:20px;
	width:20px;
	color:#000;
}
.blog .single-news .news-view {
	background: #42bc7f;
	position: absolute;
	right: -300px;
	top: 197px;
	height: 37px;
	padding: 0 20px;
	text-align: center;
	line-height: 37px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	border-radius: 10px 0px 0px 0px;
}
.blog .single-news:hover .news-view{
	right: 0;
}
.blog .single-news .news-view span {
	display: inline-block;
	color: #fff;
	font-size: 15px;
	text-transform: lowercase;
	margin-right: 10px;
}
.blog .single-news .news-view i {
	color: #fff;
	margin-right: 5px;
	font-size: 17px;
}
.blog .single-news .news-body{
	padding:20px;
}
.blog .single-news .news-body h2{
	font-size:22px;
	text-transform:uppercase;
	font-weight:800;
}
.blog .single-news .news-body h2 a{
	text-decoration:none;
    color: var(--text-main);
}
.blog .single-news .news-body h2:hover a{
	color: var(--primary-color);
}
.blog .single-news .news-body p{
	color: var(--text-muted);
	margin:15px 0;
    font-weight: 500;
}
.blog .single-news .news-body .btn {
	background:#42bc7f; 
	padding: 0;
	height: 26px;
	width: 110px;
	line-height: 24px;
	border-radius: 0px;
	color: #fff;
	margin-top:10px;
}
.blog .single-news .news-body .btn:hover{
	color:#fff;
	background:#777;
}
.blog .single-news .news-body .btn i{
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.blog .single-news .news-body .btn:hover i{
	margin-left:5px;
}
/*=========================
	End Blogs CSS
===========================*/

/*=========================
	Newsletter
===========================*/
.newslatter{
	background-color:#fff;
	text-align:center;
}
.newslatter .news-text h4{
	color:#42bc7f;
	text-transform:capitalize;
	font-weight:700;
	font-size:20px;
	text-transform:uppercase;
	margin-bottom:10px;
}
.newslatter .news-text h2{
	font-size:45px;
	color:#686868;
	text-transform:uppercase;
	font-weight:700;
	margin-bottom:24px;
	margin-bottom:7px;
}
.newslatter .news-text p{
	color:#686868;
	font-weight:400;
	font-size:15px;
	margin-bottom:35px;
}
.newslatter .form{
	
}
.newslatter .form input {
	background: transparent;
	border: 2px solid #a1a1a1;
	height: 50px;
	line-height: 50px;
	width: 410px;
	font-weight:600;
	color: #a1a1a1;
	padding-left: 18px;
	display: inline-block;
	border-radius:3px;
	
}
.newslatter input::-webkit-input-placeholder {
    opacity: 1;
    color: #a1a1a1 !important;
}

.newslatter input::-moz-placeholder {
    opacity: 1;
    color: #a1a1a1 !important;
}

.newslatter input::-ms-input-placeholder {
    opacity: 1;
    color: #a1a1a1 !important;
}
.newslatter input::input-placeholder {
    opacity: 1;
    color: #a1a1a1 !important;
}
.newslatter .form button {
	background: #42bc7f;
	border: none;
	box-shadow: none;
	height: 50px;
	width: 160px;
	line-height: 50px;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 16px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	margin-left: -7px;
	border-radius:0px 3px 3px 0px;
}
.newslatter .form button:hover{
	background:#a1a1a1;
	color:#fff;
}
/*===========================
	End Newsletter
=============================*/

/*===========================
	Contact CSS
=============================*/
.contact{
	background: var(--bg-dark);
}
.contact .section-title h2 {
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.contact .form-head {
	padding: 50px;
    background: #fff;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.contact .form .form-group{
	margin-bottom:25px;
}
.contact .form .form-group:last-child{
	margin-bottom:0px;
}
.contact .form input{
	width: 100%;
    height: 50px;
    padding-left: 15px;
	border: var(--border-width) solid var(--border-color);
    border-radius: 0;
	text-transform:capitalize;
    font-family: var(--font-body);
}
.contact .form input:hover,.contact .form input:focus{
	border-color: var(--border-color);
    box-shadow: 4px 4px 0px var(--border-color);
    outline: none;
}
.contact .form textarea{
	width: 100%;
	height:200px;
    padding: 15px;
	border: var(--border-width) solid var(--border-color);
    border-radius: 0;
	text-transform:capitalize;
    font-family: var(--font-body);
}
.contact .form textarea:hover,
.contact .form textarea:focus{
	border-color: var(--border-color);
    box-shadow: 4px 4px 0px var(--border-color);
    outline: none;
}
.contact .contact-info {
	margin-top: 26px;
}
.contact .contact-info h4{
	color: var(--text-main);
	font-size:32px;
    font-weight: 800;
	margin-bottom:20px;
	text-transform:capitalize;
}
.contact .contact-info p {
	color: var(--text-main);
	display: block;
	margin-bottom: 20px;
    font-weight: 500;
}
.contact .contact-info span{
	display:block;
	color: var(--text-main);
	margin-top:10px;
    font-weight: 600;
}
.contact .contact-info span i {
	color: var(--text-main);
	font-size: 24px;
	min-width: 32px;
}
.contact .contact-info span a:hover{
	color: var(--primary-color);
}
.contact .form .btn {
	background: var(--primary-color);
	color: var(--text-main);
	transition: transform 0.1s, box-shadow 0.1s;
	border-radius: 0;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.contact .form .btn i{
	margin-left:10px;
}
.contact .form .btn:hover{
	background: var(--secondary-color);
	color: var(--text-main);
    transform: translate(2px, 2px);
    box-shadow: var(--box-shadow-hover);
}
/*===========================
	End Contact CSS
=============================*/

/*===========================
	Clients CSS
============================*/
.clients {
	position: relative;
	padding: 30px 0;
}
.clients img {
	padding: 40px;
	filter:grayscale(1);
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.clients img:hover{
	filter:grayscale(0);
	cursor:pointer;
}
.clients .owl-nav {
	position: absolute;
	left: 50%;
	margin-left: -45px;
	bottom: -15px;
}
#clients .owl-nav button {
	background: transparent;
	width: 30px;
	height: 30px;
	line-height:30px;
	line-height: 0;
	font-size: 20px;
	color: #bfbfbf;
	margin-right: 10px;
	border:1px solid #e5e5e5;
}
#clients .owl-nav button:hover{
	color:#42BC7F;
}
/*===========================
	End Clients CSS
============================*/

/*===========================
	Footer CSS
============================*/
.footer{
	padding:0;
}
.footer .footer-top{
	text-align:center;
	padding:90px 0;
	background: var(--primary-color);
    border-top: var(--border-width) solid var(--border-color);
}
.footer .logo{
	margin-bottom:60px;
}
.footer .logo img{}
.footer .social{}
.footer .social li{
	display:inline-block;
	margin-right:15px;
}
.footer .social li:last-child{
margin:0;
}
.footer .social li a{
	width:50px;
	height:50px;
	border-radius:0;
	background: #fff;
	border: var(--border-width) solid var(--border-color);
	line-height:44px;
	text-align:center;
	display:block;
	color: var(--text-main);
    box-shadow: 4px 4px 0px var(--border-color);
    transition: transform 0.1s, box-shadow 0.1s;
}
.footer .social li a:hover{
	background: var(--secondary-color);
	color: var(--text-main);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--border-color);
}
.footer .social li span{
	font-size:24px;
}
.footer .copyright{
	background: #fff;
	text-align:center;
	padding:25px 0;
    border-top: var(--border-width) solid var(--border-color);
}
.footer .copyright p{
	color: var(--text-main);
    font-weight: 700;
}
/*===========================
	End Footer CSS
============================*/
/*=========================
	Form & Contact UI Modernization
===========================*/
.form-group .form-control,
.form-group input, 
.form-group textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.5);
    color: var(--text-main);
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.form-group .form-control:focus,
.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.2);
    background: rgba(15, 23, 42, 0.8);
}

.contact.section {
    background: var(--bg-dark);
    padding: 100px 0;
}

.contact-info {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-info h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 24px;
}

.contact-info span {
    display: block;
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 16px;
}

.contact-info span i {
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 18px;
}

.form-head {
    background: var(--glass-bg);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-head .button .btn {
    width: 100%;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    background: var(--primary-color);
    color: var(--bg-dark);
    border: none;
    font-weight: 600;
}

.form-head .button .btn:hover {
    background: var(--secondary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/*=========================
	CLASSIC-MODERN LIGHT THEME OVERRIDES (Jadul tapi Modern)
===========================*/
:root {
    --bg-dark: #FAFAFA; /* Warm off-white background */
    --text-main: #2D3748; /* Slate dark text */
    --text-muted: #4A5568; 
    --primary-color: #2F855A; /* Classic elegant green */
    --secondary-color: #276749;
    --glass-bg: #FFFFFF;
    --glass-border: rgba(0, 0, 0, 0.08);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: #1A202C !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

p, span, li, a {
    color: var(--text-main);
    font-family: var(--font-body);
}

/* Header & Glassmorphism */
.header .header-inner {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}
.header .nav li a {
    color: #2D3748 !important;
    font-weight: 600;
}
.header .nav li a:hover {
    color: var(--primary-color) !important;
}

/* Slider / Hero Section */
.slider .single-slider {
    background-color: #F0F4F8; /* Soft blue-grey */
    border-bottom: 2px solid var(--glass-border);
}
.slider h1 {
    color: #1A202C !important;
}
.slider p {
    color: #4A5568 !important;
}
.slider .button .btn {
    background: var(--primary-color) !important;
    color: #FFF !important;
    border: none;
    box-shadow: 0 4px 10px rgba(47, 133, 90, 0.3);
    border-radius: 4px; /* Classic slight radius */
}
.slider .button .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(47, 133, 90, 0.4);
}

/* Story / Timeline / CV */
.story {
    background: var(--bg-dark) !important;
}
.story .story-content::before {
    background: var(--primary-color) !important;
}
.story .single-story span {
    background: #FFFFFF !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color);
    box-shadow: 4px 4px 0px rgba(47, 133, 90, 0.1); /* Neo-brutalism touch */
    border-radius: 4px !important;
}
.story .single-story span::before {
    background: var(--primary-color) !important;
    border-color: #FFFFFF !important;
}
.story .single-story h3, .story .single-story h4 {
    color: #2D3748 !important;
}

/* Contact Form Overrides */
.form-head, .contact-info {
    background: #FFFFFF !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    border-radius: 8px !important;
}
.form-group .form-control, .form-group input, .form-group textarea {
    background: #FAFAFA !important;
    border: 1px solid #E2E8F0 !important;
    color: #2D3748 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}
.form-group .form-control:focus, .form-group input:focus, .form-group textarea:focus {
    background: #FFFFFF !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.1) !important;
}
.form-head .button .btn {
    background: var(--primary-color) !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
}

/* Cards & Services */
.single-service, .single-work {
    background: #FFFFFF !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04) !important;
    transition: all 0.3s ease;
    border-radius: 8px;
}
.single-service:hover, .single-work:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08) !important;
}
.single-service i {
    color: var(--primary-color) !important;
}
.single-service h2, .single-service h2 a {
    color: #2D3748 !important;
}

/* Testimonials */
.single-testimonial {
    background: #FFFFFF !important;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 6px rgba(0,0,0,0.04) !important;
}
.single-testimonial p, .single-testimonial h2, .single-testimonial .name {
    color: #2D3748 !important;
}
.single-testimonial p .fa, .single-testimonial .star i {
    color: #D69E2E !important; /* Gold for stars */
}

/*=========================
	PILIHAN 2: CLASSIC EDITORIAL (Majalah Klasik Mewah 2026)
===========================*/
:root {
    --bg-dark: #FDFBF7; /* Sangat elegan, warna kertas tua/cream */
    --text-main: #1C1C1C; /* Hitam arang tajam */
    --text-muted: #595959; 
    --primary-color: #8C2131; /* Merah Maroon/Crimson khas Editorial klasik */
    --secondary-color: #111111;
    --glass-bg: #FFFFFF;
    --glass-border: #1C1C1C;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
    font-family: var(--font-body);
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-main) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2px; /* Editorial style */
}

/* Header & Navigasi */
.header .header-inner {
    background: var(--bg-dark) !important;
    border-bottom: 3px double var(--glass-border) !important; /* Garis ganda klasik */
}
.header .nav li a {
    color: var(--text-main) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}
.header .nav li a:hover {
    color: var(--primary-color) !important;
}
.header .logo {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: bold;
    color: var(--text-main);
    letter-spacing: 3px;
}

/* Slider / Hero */
.slider .single-slider {
    background-color: #F4F1EA !important;
    border-bottom: 3px double var(--text-main);
}
.slider h1 {
    font-size: 48px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--text-main);
    padding-bottom: 20px;
    display: inline-block;
}
.slider p {
    font-size: 18px !important;
    color: var(--text-muted) !important;
    max-width: 600px;
}
.slider .button .btn {
    background: transparent !important;
    color: var(--text-main) !important;
    border: 2px solid var(--text-main) !important;
    border-radius: 0 !important; /* Kotak kaku klasik */
    font-family: var(--font-heading);
    letter-spacing: 2px;
    box-shadow: none !important;
}
.slider .button .btn:hover {
    background: var(--text-main) !important;
    color: #FFF !important;
    transform: none;
}

/* Story / Riwayat */
.story {
    background: var(--bg-dark) !important;
    border-bottom: 1px solid var(--text-main);
}
.story .section-title h2 {
    border-bottom: 3px double var(--text-main);
    display: inline-block;
    padding-bottom: 10px;
}
.story .story-content::before {
    background: var(--text-main) !important;
    width: 1px !important; /* Garis tipis klasik */
    opacity: 1 !important;
}
.story .single-story span {
    background: var(--bg-dark) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--text-main) !important;
    border-radius: 0 !important;
    font-family: var(--font-heading);
    box-shadow: none !important;
}
.story .single-story span::before {
    background: var(--text-main) !important;
    border: 2px solid var(--bg-dark) !important;
    border-radius: 0 !important; /* Kotak diamond/square */
}
.story .single-story h3, .story .single-story h4 {
    color: var(--primary-color) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Kartu / Grid */
.single-service, .single-work {
    background: transparent !important;
    border: 1px solid var(--text-main) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 40px 30px !important;
}
.single-service:hover, .single-work:hover {
    background: #F4F1EA !important;
    transform: none !important;
    border: 3px double var(--text-main) !important;
}

/* Form Kontak */
.form-head, .contact-info {
    background: transparent !important;
    border: 2px solid var(--text-main) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.form-group .form-control, .form-group input, .form-group textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed var(--text-main) !important;
    border-radius: 0 !important;
    color: var(--text-main) !important;
    font-family: var(--font-body);
}
.form-group .form-control:focus, .form-group input:focus, .form-group textarea:focus {
    border-bottom: 2px solid var(--primary-color) !important;
    box-shadow: none !important;
}
.form-head .button .btn {
    background: var(--text-main) !important;
    color: #FFF !important;
    border-radius: 0 !important;
    font-family: var(--font-heading);
    letter-spacing: 2px;
}
.form-head .button .btn:hover {
    background: var(--primary-color) !important;
}

/*=========================
	CLASSIC EDITORIAL - GLOBAL STABILITY FIX
===========================*/
/* Pastikan tidak ada konten yang tumpah (overflow) di layar kecil */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Penyesuaian Grid & Spacing Dasar */
.section {
    padding: 80px 0 !important;
}

/* Memperbaiki About Section */
.about .about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
@media (max-width: 767px) {
    .about .about-content {
        display: block;
    }
}

/* Memperbaiki Timeline (Story) Alignment */
.story .story-content {
    position: relative;
    padding-left: 20px;
}
.story .story-content::before {
    left: 20px !important;
}
.story .single-story {
    margin-bottom: 40px;
    position: relative;
}
.story .single-story span {
    position: absolute;
    left: -20px !important;
    top: 0;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-align: center;
    z-index: 2;
}

/* Memperbaiki Formulir Kontak */
#contact .contact-info {
    margin-bottom: 30px;
    padding: 30px !important;
}

/* Gambar Responsif */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Menghilangkan border di HP agar tidak terlalu sesak */
@media only screen and (max-width: 767px) {
    .header .header-inner {
        border-bottom: 1px solid var(--glass-border) !important;
    }
    .slider h1 {
        font-size: 32px !important;
    }
    .story .single-story span {
        width: 45px !important;
        height: 45px !important;
        line-height: 45px !important;
        font-size: 14px !important;
    }
    .single-service, .single-work {
        padding: 25px 15px !important;
    }
}

/*=========================
	PILIHAN 2 - PENYEMPURNAAN TOTAL (CLASSIC EDITORIAL)
===========================*/
/* 1. Global & Typography */
body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
    font-size: 16px;
}
.section-title h2 {
    font-size: 32px !important;
    letter-spacing: 3px !important;
    border-bottom: 3px double var(--text-main) !important;
    padding-bottom: 10px;
    display: inline-block;
    margin-bottom: 40px !important;
    color: var(--text-main) !important;
}
.section-title h2 span {
    color: var(--primary-color) !important;
}

/* 2. Beranda - Slider Overlay */
.slider .single-slider {
    position: relative;
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid var(--text-main) !important;
}
.slider .single-slider::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(253, 251, 247, 0.85); /* Krem transparan */
    z-index: 1;
}
.slider .container { position: relative; z-index: 2; }
.slider h1 {
    color: var(--text-main) !important;
    font-size: 56px !important;
    border-bottom: none !important; /* Hapus border lama */
    margin-bottom: 10px !important;
}
.slider p {
    color: var(--text-muted) !important;
    font-size: 20px !important;
    margin-bottom: 40px !important;
    font-style: italic; /* Gaya editorial */
}

/* 3. Beranda - About & Profil */
.about .about-content { margin-top: 50px; }
.about .single-about p.bolt {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-main) !important;
    border-left: 4px solid var(--primary-color);
    padding-left: 20px;
    margin-bottom: 30px;
}
.about .image img {
    border: 3px solid var(--text-main);
    padding: 5px; /* Bingkai ala foto koran */
    background: #fff;
    filter: sepia(0.2) contrast(1.1); /* Nuansa vintage */
}

/* 4. Beranda - Skill Progress Bar */
.skill-content h3 {
    font-family: var(--font-heading);
    font-size: 24px !important;
    margin-bottom: 20px;
    color: var(--text-main) !important;
    border-bottom: 1px dashed var(--text-main);
    display: inline-block;
}
.skill-main .single-skill { margin-bottom: 25px; }
.skill-main .skill-title h4 {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-main) !important;
    text-transform: uppercase;
}
.skill-main .progress {
    border-radius: 0 !important;
    background: #EAE5D9 !important; /* Krem gelap */
    height: 25px;
    border: 1px solid var(--text-main);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.skill-main .progress-bar {
    border-radius: 0 !important;
    background: var(--text-main) !important; /* Hitam tegas */
    line-height: 25px;
}
.skill-main .progress-bar span {
    color: #FFF !important;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    right: 10px; position: absolute;
}

/* 5. Galeri / Portofolio (Grid Klasik) */
.single-pf {
    border: 1px solid var(--text-main);
    padding: 10px;
    background: #FFF;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}
.single-pf:hover {
    border: 3px double var(--text-main);
    transform: translateY(-3px);
}
.single-pf img {
    filter: grayscale(100%); /* Hitam putih klasik */
    transition: all 0.4s ease;
}
.single-pf:hover img {
    filter: grayscale(0%); /* Kembali berwarna saat disorot */
}
.single-pf .pf-content {
    background: var(--bg-dark) !important;
    border-top: 1px solid var(--text-main);
    padding: 15px !important;
}
.single-pf .pf-content h4 {
    color: var(--text-main) !important;
    font-family: var(--font-heading) !important;
}

/* 6. Blog / Artikel (Format Majalah) */
.single-news {
    border: none !important;
    border-bottom: 2px solid var(--text-main) !important;
    padding-bottom: 30px !important;
    margin-bottom: 40px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.single-news .news-head img {
    border: 1px solid var(--text-main);
    padding: 3px;
}
.single-news .news-body { padding: 20px 0 0 0 !important; }
.single-news .news-body h2 {
    font-size: 26px !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
}
.single-news .news-body h2 a {
    color: var(--text-main) !important;
}
.single-news .news-body h2 a:hover { color: var(--primary-color) !important; }
.single-news .news-body .text {
    color: var(--text-muted) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* 7. Kontak & Footer */
.footer {
    background: var(--text-main) !important;
    border-top: 10px solid var(--primary-color);
}
.footer h2, .footer p, .footer a { color: #FFF !important; }
.footer .social li a {
    border-color: #FFF !important;
    color: #FFF !important;
    border-radius: 0 !important; /* Ikon sosial kotak */
}
.footer .social li a:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}