/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.0.6.1741685064
Updated: 2025-03-11 09:24:24

*/

*{
	font-family: "Outfit", sans-serif !important;
}

a{
	text-decoration:none!important;
}

/* a:hover{
	color:unset !important;
} */

#content{
	/* background:url(https://kksk.co/wp-content/uploads/2026/03/leaf_watercolor.jpg);
	background-size:contain;*/
    background:#E6F2ED;
} 


.offcanvas a img{
	width:130px;
}

.close-icon{
    width: 24px;
}

.hamburger-menu img{
	
    width: 45px;
    background: #32b061;
    padding: 8px;
    border-radius: 2px;

}


a:focus {
    outline: solid 0px !important;
}

.header-sec-cont{
	
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.header-section{
	
    position: absolute;
    z-index: 10;
    width: 100%;

}

.header-logo-section a img{
	
    width: 130px;

}

.hamburger-menu:hover{
	border:none;
	outline:none!important;
}

.hamburger-menu:active{
	border:none;
	outline:none!important;
}

.hamburger-menu:visited{
	border:none;
	outline:none !important;
}

.hamburger-menu:focus{
	border:none;
	outline:none;
}

.hamburger-menu i{
	
    font-size: 30px;
    color: #f8f8f8f8;

}

.offcanvas-header{
	margin-top: 30px;
	justify-content: flex-end;
}

.offcanvas-header button{
	background: transparent;
    border: none;
}

.offcanvas-header button i{
	
    font-size: 28px;
    color: white;

}

.offcanvas.offcanvas-start{
	width:100%;
	padding:30px;
		background:url(https://images.unsplash.com/photo-1634976276568-9ea10353a8cd?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGdyZWVuJTIwYmFja2dyb3VuZHxlbnwwfHwwfHx8MA%3D%3D);

}

#main #content-wrap {
    padding-top: 0px;
    padding-bottom: 0px;

}

/* home page slider */

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
  -webkit-transform: translateY(20vh);
  -ms-transform: translateY(20vh);
  transform: translateY(20vh);
  -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);
}

.background:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
/*   background-color: rgba(0, 0, 0, 0.3); */
}

.background:first-child {
  background-image:url(https://kksk.co/wp-content/uploads/2025/03/incorporating-advanced-technology-modern-shoe-factory-concept-smart-robotics-automated-processes-efficiency-improvements-modern-manufacturing-cuttingedge-technology-scaled.jpg);
  -webkit-transform: translateY(-10vh);
  -ms-transform: translateY(-10vh);
  transform: translateY(-10vh);
}

.background:first-child .content-wrapper {
  -webkit-transform: translateY(10vh);
  -ms-transform: translateY(10vh);
  transform: translateY(10vh);
}

.background:nth-child(2) { background-image: url(https://kksk.co/wp-content/uploads/2025/03/incorporating-advanced-technology-modern-shoe-factory-concept-smart-robotics-automated-processes-efficiency-improvements-modern-manufacturing-cuttingedge-technology-scaled.jpg); }

.background:nth-child(3) { background-image: url(https://kksk.co/wp-content/uploads/2025/03/incorporating-advanced-technology-modern-shoe-factory-concept-smart-robotics-automated-processes-efficiency-improvements-modern-manufacturing-cuttingedge-technology-scaled.jpg); }

/* .background:nth-child(4) { background-image: url(https://unsplash.it/2928/2264?image=625); }

.background:nth-child(5) { background-image: url(https://unsplash.it/2928/2264?image=626); }

.background:nth-child(6) { background-image: url(https://unsplash.it/2928/2264?image=825); } */

/* Set stacking context of slides */

.background:nth-child(1) { z-index: 6; }

.background:nth-child(2) { z-index: 5; }

.background:nth-child(3) { z-index: 4; }

.background:nth-child(4) { z-index: 3; }

.background:nth-child(5) { z-index: 2; }

.background:nth-child(6) { z-index: 1; }

.content-wrapper {
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  color: #fff;
  font-family: Montserrat;
  text-transform: uppercase;
  -webkit-transform: translateY(40vh);
  -ms-transform: translateY(40vh);
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);
}

.content-title {
  font-size: 12vh;
  line-height: 1.4;
}

/* homepage slider */

.content-area{
	width:100%;
padding-right:0;
}

.page-header{
	display:none;
}

.home-slider{
	overflow:hidden;
}

/* Menu css start */

/* define a fixed width for the entire menu */
.navigation {
  width: 300px;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
/*   background-color: #CCC; */
  text-decoration: none;
    padding: 5px 0px;
    color: white;
    font-weight: 400;
    font-size: 20px;
	transition:.5s;
}

/* add hover behaviour */
.mainmenu a:hover {
    transform: translateX(10px);
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  color:white
   transform: translateX(10px);
	transition:.5s;
	font-size:15px;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  transform: translateX(20px);
	
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

/* menu css start */


.homepage-sec-1{
	
    padding: 100px 0;
    background: #E6F2ED;
}

.homepage-sec-1-cont{
	
    display: flex;
    justify-content: space-between;

}

.homepage-sec-1-left{
	
    width: 60%;

}

.homepage-sec-1-left h2{
	
font-size: 45px;
    font-weight: 500;
    color: #036534;
    width: 100%;
    text-transform: capitalize;
    width: 90%;

}

.homepage-sec-1-left p{
	
    font-size: 16px;
    color: grey;

}

.homepage-sec-1-left a button{
	
    background: #024D27;
    color: #e6f2ed;
    font-weight: 700;
    padding: 10px 20px;
	box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    border:2px solid white;
}

.homepage-sec-1-right{
	
    width: 53%;
    position: relative;
    display: flex;
    justify-content: center;

}

.homepage-sec-1-right-image{
	
    width: 350px;
    height: 100%;
    padding: 40px;
    border: 2px dashed grey;
	border-top-left-radius: 175px;
  border-top-right-radius: 175px;
  border-bottom-left-radius: 175px;
  border-bottom-right-radius: 175px;
}



.homepage-sec-1-right-image img{
	
    height: 100%;
  border-top-left-radius: 155px;
  border-top-right-radius: 155px;
  border-bottom-left-radius: 155px;
  border-bottom-right-radius: 155px;

}

.counter-box{
	
    position: absolute;
    z-index: 10;

    background: #024D27;
    padding: 20px;
    border: 2px solid white;
    border-radius: 10px;
	text-align: center;
}

.counter-box span{
	font-size: 50px;
    color: #e6f2ed;
    font-weight: 500;
}

.counter-box p{
	
    margin-bottom: 0;
    font-size: 16px;
    color:#e6f2ed;
}

#counter-box-1{
    top: 40%;
    left: 10%;
}

#counter-box-2{
    right: 10%;
    bottom: 0;
}

.video-height{
	height:750px;
}

.responsive-video {
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
}

.homepage-sec-3{
	padding:50px 0;
}

.homepage-sec-3-box-section{
	display:flex;
	justify-content:space-between;
}

.homepage-sec-3-cont{
	width: 90%;
    margin: auto;
}

.homepage-sec-3-cont h2{
	
    text-align: center;
    font-size: 40px;
    font-weight: 400;
    color: #036534;

}

.homepage-sec-3-box{
	width:32%;

	height:400px;
}

.box-image-1{
		background:url(https://kksk.co/wp-content/uploads/2025/03/classy-businessman-putting-his-laptop-his-brown-leather-bag-scaled.jpg);
	   background-size:cover;
}

.box-image-2{
		background:url(https://kksk.co/wp-content/uploads/2025/03/male-foot-with-brown-leather-shoes-jeans-scaled.jpg);
	   background-size:cover;
}

.box-image-3{
		background:url(https://kksk.co/wp-content/uploads/2025/03/brown-leather-sofa-scaled.jpg);
	    background-size:cover;
}

.homepage-sec-3-box-overlay{
	
    width: 100%;
    height: 100%;
    background: #023a028c;
    color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition:.5s;
}

.homepage-sec-3-box-overlay:hover{
	background: transparent;
	
}

.homepage-sec-3-box{
	transition:.5s;
}

.homepage-sec-3-box:hover{
	transform:translateY(-10px);
	box-shadow: inset 0px 0px 0px 0px #CCC, inset 0px -150px 50px -40px #0b3014;
}

.homepage-sec-3-box-overlay h4{
	
    color: white;
    margin-bottom: 5px;
    text-align: center;
    font-size: 22px;
    font-weight: 300;

}

.homepage-sec-3-box-overlay p{
	
    text-align: center;
    margin-bottom: 0;
    line-height: 21px;
    color: #ffffffa6;

}


.footer-section{
	
    background: url(https://kksk.co/wp-content/uploads/2026/03/20b913f4-e618-4bf6-8233-c4428a5d9684-scaled.jpg);
    font-family: 'Outfit';
    background-size: contain;
    height: 400px;
    position: relative;
}
.footer-sec-overlay{
	
   padding: 50px 0 0 0;
    background: #255c36f5;
    height: 100%;

}

.footer-sec-cont{
	
    display: flex;
    justify-content: space-between;

}

.footer-link-section{
	
    width: 24%;

}

.footer-link-section h4{
	
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom:0;
}

.footer-link-section ul{
	
    list-style: none;
    color: white;
	display: block;
	margin-left:0;
}

.footer-link-section ul li{
	
    list-style-type: none;

}

.footer-link-section ul li a{
	
    color: #ffffffbf;
    font-size: 15px;
    display:block;
	line-height: 32px;
}
 
.address-cont h5{
	color:white;
	margin-bottom: 5px;
    font-size: 18px;
    font-weight: 400;
}

.address-section{
	
    display: flex;
    gap: 10px;

}

#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(1){
	width:15%;
}

#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(2){
	
    width: 20%;

}

#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(3){
	
    width: 35%;

}

#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(3) > ul li{
	list-style-type:none;
}

#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(3) > ul {
	margin-left:0;
}

.address-icon i{
	
    padding: 8px;
    color: green;
    background: white;
    border-radius: 50%;

}

.footer-link-section img{
	
    width: 100px;

}

.footer-link-section p{
	
    margin-top: 15px;
    color: #ffffffbf;

}

.links-icon{
	
    display: flex;
    gap: 10px;

}

.social-links i{
	
    color: white;
    font-size: 24px;

}

.footer-bottom{
	
/*     background: #102d19; */
    display: flex;
    justify-content: space-between;
    height: 50px;
	position: absolute;
    width: 100%;
    bottom: 0;
}

.footer-bottom .container{
	
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.footer-bottom p{
	
    margin-bottom: 0;
    color: white;

}

.footer-bottom p a{
	
    color: white;

}


.homepage-sec-4{
	
    padding: 50px 0;
/* 	background: url(https://kksk.co/wp-content/uploads/2025/03/homepage-sec-4-bg.jpg); */
    background-size: 100% 100%;
    background-position-x: 80px;
    background-repeat: no-repeat;
}

.homepage-sec-4-overlay h2{
	
    text-align: end;
    font-size: 45px;
    font-weight: 500;
    color: #036534;

}

.homepage-sec-4-overlay p{
	
    text-align: end;
    font-size: 24px;
    width: 50%;
    margin-left: auto;
    margin-right: 0;

}

.homepage-sec-4-cont{
	
    display: flex;
	align-items: center;
}

.homepage-sec-4-left{
	
    width: 40%;

}

.homepage-sec-4-right{
	
    width: 60%;
	display: flex;
    flex-direction: column;
    gap: 10px;
}

.homepage-sec-5-card-section-top{
	
    display: flex;
	gap:10px;
    justify-content: end;

}

.homepage-sec-4-left img{
	width:100%;
}

.homepage-sec-5-card-section-bottom{
	
    display: flex;
	gap:10px;
    justify-content: center;

}



.homepage-sec-5-card {
    width:32%;
    text-align: center; /* Center content within each card */
	padding: 10px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
/* 	background:white; */
	display: flex;
    flex-direction: column;
    justify-content: center;
	transition:.5s;
}

.homepage-sec-5-card:hover{
	
    transform: translateY(-5px);

}
.sec-5-card-icon img{
	
    width: 75px;

}

.homepage-sec-5-card hr{
	
    margin: 10px auto;
    border-top: 2px solid green;
    width: 50%;

}

.homepage-sec-5-card h4{
	margin-bottom:0;
	color:#024D27;
}

.background-section{
	display:flex;
	align-items:center;
	justify-content:center;
}
.background-section h2{
	color:white;
	font-size:75px;
}

 .backgrounda {
  height: 720px;
	background: url(https://kksk.co/wp-content/uploads/2025/03/bottom-slider.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
    
 }
.backgroundb {
  height: 720px;
	background: url(https://kksk.co/wp-content/uploads/2025/03/—Pngtree—women-with-leather-bags-on_3489477-scaled.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
	
	


 
 }
.backgroundc {
  height: 720px;
	background: url(https://kksk.co/wp-content/uploads/2025/03/incorporating-advanced-technology-modern-shoe-factory-concept-smart-robotics-automated-processes-efficiency-improvements-modern-manufacturing-cuttingedge-technology-scaled.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
	


  
 }

 .backgroundd {
  height: 720px;
	background: url(https://kksk.co/wp-content/uploads/2025/03/close-up-engraving-art-tools-scaled.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
	 


  
 }
@media all and (max-width:500px){
    .backgrounda {
  
	    .backgrounda {
        background: url(https://kksk.co/wp-content/uploads/2025/03/bottom-slider.jpg) no-repeat fixed;
        background-size: cover;
        background-position: right;
    }
    
 }
.backgroundb {
  
	background: url(https://kksk.co/wp-content/uploads/2025/03/—Pngtree—women-with-leather-bags-on_3489477-scaled.jpg) no-repeat center fixed;
    background-size:cover;
	


 
 }
.backgroundc {

	background: url(https://kksk.co/wp-content/uploads/2025/03/incorporating-advanced-technology-modern-shoe-factory-concept-smart-robotics-automated-processes-efficiency-improvements-modern-manufacturing-cuttingedge-technology-scaled.jpg) no-repeat center fixed;
    background-size:cover;
	


  
 }

 .backgroundd {
 
	background: url(https://kksk.co/wp-content/uploads/2025/03/close-up-engraving-art-tools-scaled.jpg) no-repeat center fixed;
    background-size:cover;
	 


  
 }

}

@media all and (max-width:450px){
	.header-section {
    position: unset;

}
	.hamburger-menu i {
    font-size: 30px;
    color: #228c4d;
}
	.homepage-sec-1 {
    padding: 20px 0;
}
	.homepage-sec-1-cont {

    flex-direction: column-reverse;
	gap:15px;
}
	.homepage-sec-1-left {
    width: 100%;
}
	.homepage-sec-1-left h2 {
    font-size: 22px;
    font-weight: 400;
    color: #036534;
    width: 100%;
	margin-bottom:5px;
}
	.homepage-sec-1-left p {
    font-size: 14px;
    color: grey;
}
	.homepage-sec-1-right {
    width: 100%;

}
	.counter-box span {
    font-size: 24px;
   
    font-weight: 500;
}
	.counter-box p {
    margin-bottom: 0;
    font-size: 14px;
}
	.counter-box{
		padding:10px;
	}
	.homepage-sec-1-right-image{
		padding:20px;
	}
	.homepage-sec-3 {
    padding: 20px 0;
}
	.homepage-sec-3-cont h2{
		font-size:22px;
	}
	.homepage-sec-3-box-section{
		flex-direction:column;
	}
	.homepage-sec-3-box {
    width: 100%;
    height: 400px;
    margin-bottom: 15px;
}
	.homepage-sec-3-cont {
    width: 100%;
    margin: auto;
}
	.homepage-sec-3-box-overlay h4{
		font-size:18px;
	}
	.homepage-sec-3-box-overlay p{
	font-size:13px;
	line-height:21px;
	}
	.homepage-sec-4{
		padding:20px;
	}
	.homepage-sec-4-overlay h2 {
 
    font-size: 22px;

    margin-bottom: 5px;
}
	.homepage-sec-4-overlay p {
    text-align: end;
    font-size: 14px;
    line-height: 21px;
	 width: 90%
}
	.homepage-sec-4-cont {

    flex-direction: column;
}
	.homepage-sec-4-left {
    width: 100%;
}
	.homepage-sec-4-right {
    width: 100%;

    flex-direction: column;
    gap: 10px;
}
	.sec-5-card-icon img {
    width: 40px;
}
	.homepage-sec-5-card h4 {
    margin-bottom: 0;
    font-size: 13px;
}
	.homepage-sec-4-left img {
    width: 75%;
}
	.homepage-sec-4-left {
    width: 100%;
    text-align: center;
}
	.homepage-sec-4 {
    padding: 20px 0;
/*     background: url(https://kksk.co/wp-content/uploads/2025/03/homepage-sec-4-bg.jpg); */
    background-size: cover;
    background-position-x: right;
    background-repeat: no-repeat;
}
	.homepage-sec-5-card{
		width:35%;
	}
	.background-section h2 {
    color: white;
    font-size: 24px;
    width: 60%;
    text-align: center;
}
	.footer-sec-cont {

    flex-direction: column;
}
	#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(1) {
    width: 100%;
}
	#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(2) {
    width: 100%;
}
	#wrap > div.footer-section > div > div > div.footer-sec-cont > div:nth-child(3) {
    width: 100%;
}
	.footer-link-section {
    width: 100%;
}
	.social-links{
		padding-bottom:0;
	}
	.footer-link-section h4 {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0px;
}
	.footer-link-section ul li a {
    color: white;
    font-size: 14px;
    display: block;
}
	.footer-link-section ul{
		margin-top:10px;
	}
	.address-cont h5{
		font-size:16px;
	}
	.footer-link-section p {
    margin-top: 5px;
    color: white;
}
	.address-icon i {
    padding: 7px;
    color: green;
    background: white;
    border-radius: 50%;
    font-size: 12px;
}
	.social-links{
		padding-bottom:15px;
	}
	.social-links i {
    color: white;
    font-size: 20px;
}
	.footer-bottom .container {

    justify-content: center;
    align-items: center;
    flex-direction: column;
}
	.footer-bottom p {
    margin-bottom: 0;
    color: white;
    font-size: 12px;
}
	.metaslider.ms-theme-blend .flexslider ul.flex-direction-nav li a::before{
		mask-size: 14px auto !important;
		left: 10px;
    bottom: -10px;
	}
}

/* inner pages */

.inner-banner-section{
	background:url(https://kksk.co/wp-content/uploads/2026/03/IMG_8795-scaled.jpg);
	height:300px;
	background-size:cover;
	background-position-y: -250px;
}

.inner-banner-overlay{
	width:100%;
	height:100%;
    background: #036534c9;
	display:flex;
	align-items:center;
	justify-content:center;
}

.inner-banner-overlay span{
	color: white;
    font-size: 40px;
   
    text-align: center;
    display: block;
}

.contact-page-sec-1{
	
    padding: 50px 0;

}

.contact-page-sec-1-cont{
	
    display: flex;
    justify-content: space-between;

}

.contact-page-sec-1-left{
	
    width: 38%;

}

.contact-page-box{
	
    border: 1px solid #8080803b;
    padding: 15px;
    display: flex;
    gap: 15px;
    margin-bottom:15px;
}

.contact-page-box p{
	margin-bottom:0;
	font-size:16px;
}

.contact-page-box a{
	text-decoration:none !important;
}

.contact-page-box-icon i{
	
    color: #1f8c4c;
    font-size: 24px;
	display:none;

}

.contact-page-box-addr h4{
	
    margin-bottom: 5px;
    font-size: 24px;
}

.contact-page-sec-1-right{
	
    width: 58%;
	background: #fff;
    padding: 0 15px;
    border-radius: 5px;

}

.form-section{
	display:flex;
	gap:15px;
}

.wpcf7-submit{
	
    background: #1f8c4c !important;

}

@media all and (max-width:450px){
	.contact-page-sec-1 {
    padding: 20px 0;
}
	.contact-page-sec-1-cont {

    flex-direction: column;
}
	.contact-page-sec-1-left {
    width: 100%;
}
	.contact-page-sec-1-right {
    width: 100%;
}
	.form-section {

    gap: 0px;
    flex-direction: column;
}
	.form-sec-left p{
		margin:0;
	}
}

/* inner pages */


.custom-offcanvas{
width:100%;
max-width:100%;
}

.menu-layout{
display:flex;
height:100vh;
padding:0;
}

.menu-left{
width:25%;
padding:0 60px;
}

.mainmenu{
list-style:none;
padding:0;
}

.mainmenu li{
margin:20px 0;
font-size:22px;
}

.mainmenu li a{
text-decoration:none;
color:#fff;
}

.menu-preview{
width:75%;
background-size:cover;
/* background-position:center; */
background-image:url('https://kksk.co/wp-content/uploads/2026/03/0C5A0687.jpg');
transition:0.5s;
}

.offcanvas-body{
	overflow-y: hidden;
}

@media (max-width:768px){
	.menu-preview{
		width:0;
	}
}

/* ------------process section css------------- */

.process-section{
padding:50px;

/* margin:50px 0; */
}

.homepage-process-section{
	
    background: #013F20;

}

.process-title{
text-align:end;
font-size:45px;
margin-bottom:15px;
font-weight:500;
color: #e6f2ed;
}

.process-wrapper{
display:flex;
align-items:center;
}

.process-left{
width:40%;
padding-right:80px;
}

.process-item{
padding:15px;
    cursor: pointer;
    transition: 0.3s;
    background: #012F18;
    margin-bottom: 10px;
    border-radius: 10px;
}

.process-item h3{
font-size: 24px;
    margin-bottom: 8px;
    font-weight: 500;
    color: #e6f2ed;
	
}

.process-item p{
	font-size:16px;
	color:#e6f2ed;
}

.process-item:hover{
padding-left:20px;
color:#1a7d3a;
}

.process-right{
width:60%;
height:600px;
}

.process-image{
width:100%;
height:100%;
background-size:cover;
background-position:center;
border-radius:0px;
background-image:url(https://kksk.co/wp-content/uploads/2025/03/Leather-Finishing.jpg);
transition:0.5s;
}

/* homepage partners section css */

.why-partner{
padding:120px 0;

/* leather texture */
background-image:url("https://www.transparenttextures.com/patterns/leather.png");
background-color:#f6f3ea;
background-size:cover;
}

.partner-title{
text-align:center;
font-size:44px;
color:#1f5d3a;
margin-bottom:10px;
}

.partner-sub{
text-align:center;
max-width:650px;
margin:auto;
margin-bottom:80px;
color:#555;
}

.partner-features{
max-width:900px;
margin:auto;
}

.feature{
display:flex;
align-items:flex-start;
margin-bottom:40px;
border-bottom:1px solid #ddd;
padding-bottom:30px;
transition:0.3s;
}

.feature-number{
font-size:60px;
font-weight:700;
color:#1f5d3a;
margin-right:30px;
line-height:1;
opacity:0.25;
transition:0.3s;
}

.feature-content h4{
font-size:20px;
margin-bottom:5px;
}

.feature-content p{
color:#666;
font-size:15px;
}

/* hover effect */

.feature:hover .feature-number{
opacity:1;
transform:translateX(5px);
}

.feature:hover{
border-color:#1f5d3a;
}

.partner-features{
position:relative;
}

.partner-features:before{
content:"";
position:absolute;
left:40px;
top:0;
bottom:0;
width:2px;
background:#ddd;
}

/* homepage partners section css */

.contact-link-section ul{
	display:flex;
	gap: 5%;
	margin:0;
}



.contact-link-section{
/* 	width:50% !important; */
}

.aboutpage-sec-1 h2{
	
    display: none;

}

.sustainability-page-sec-1 .homepage-sec-1-right-image img{
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.sustainability-page-sec-1 .homepage-sec-1-right-image{
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* sustainability cards css */

.tech-section{
background:#E6F2ED;
padding:100px 0;
}

.tech-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

.tech-section{
background:#E6F2ED;
padding:100px 0;
}

.tech-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

.tech-card{
position:relative;
overflow:hidden;
border-radius:10px;
cursor:pointer;
border:1px solid #CCE6DB;
}

.tech-card img{
width:100%;
height:320px;
object-fit:cover;
display:block;
transition:transform .5s ease;
}

.tech-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(3,101,52,0.85);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
color:#fff;
opacity:0;
transition:all .4s ease;
}

.tech-card:hover img{
transform:scale(1.1);
}

.tech-card:hover .tech-overlay{
opacity:1;
background:#02592E;
}

.tech-overlay h3{
font-size:22px;
margin-bottom:10px;
}

.tech-overlay p{
font-size:14px;
opacity:.9;
}

@media(max-width:900px){

.tech-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.tech-grid{
grid-template-columns:1fr;
}

}
/* sustainability cards css */


@media (max-width:768px){
	.process-section {
    padding: 10px 0;
    
}
	.process-title{
		font-size:24px;
	}
	.process-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
	gap:15px;
}
	.process-right {
    width: 100%;
    height: 300px;
}
	.process-left {
    width: 100%;
    padding-right: 0px;
}
	.footer-section{
		height:670px;
	}
	.footer-sec-cont{
		gap:15px;
	}
	.content-area{
		margin-bottom:0;
	}
	.homepage-sec-5-card-section-bottom{
		
	}
}

/* --------------------------- */

:root {
    --ink:       #1a1410;
    --tan:       #c49a6c;
    --tan-light: #e8d5b7;
    --tan-pale:  #f5ede0;
    --cream:     #faf6f0;
    --muted:     #7a6a58;
    --rule:      rgba(196,154,108,0.25);
/*     --font-head: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', sans-serif; */
  }
 

 
  /* ── FOOTER SHELL ── */
  .kksk-footer {
    background: var(--ink);
    color: var(--tan-light);
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
  }
 
  /* Large decorative watermark */
  .kksk-footer::before {
    content: 'KKSK';
    position: absolute;
    bottom: -30px;
    right: -20px;
    font-family: var(--font-head);
    font-size: clamp(120px, 20vw, 220px);
    font-weight: 600;
    color: rgba(196,154,108,0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
  }
 
  /* Thin top accent line */
  .footer-accent-bar {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--tan) 30%, var(--tan-light) 60%, transparent 100%);
  }
 
  /* ── MAIN GRID ── */
  .footer-main {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1.4fr 0.8fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 40px 56px;
    position: relative;
    z-index: 1;
  }
 
  /* vertical dividers between columns */
  .footer-col:not(:first-child) {
    border-left: 1px solid var(--rule);
    padding-left: 48px;
  }
  .footer-col:not(:last-child) {
    padding-right: 48px;
  }
 
  /* ── COL 1: Brand ── */
  .footer-brand .footer-logo {
    display: block;
    margin-bottom: 20px;
  }
  .footer-brand .footer-logo img {
    
    width: 100px;

    opacity: 0.9;
  }
  .footer-brand p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 240px;
  }
 
  .social-row {
    display: flex;
    gap: 12px;
    margin-top: 28px;
  }
  .social-row a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s, background 0.25s;
  }
  .social-row a:hover {
    border-color: var(--tan);
    color: var(--ink);
    background: var(--tan);
  }
 
  /* ── COL 2: Quick Links ── */
  .footer-heading {
    
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .footer-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
  }
 
  .footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .footer-nav li a {
    text-decoration: none;
    color: var(--tan-light);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, gap 0.2s;
  }
  .footer-nav li a::before {
    content: '';
    width: 8px;
    height: 1px;
    background: var(--tan);
    opacity: 0;
    transition: opacity 0.2s, width 0.2s;
    flex-shrink: 0;
  }
  .footer-nav li a:hover {
    color: var(--tan);
    gap: 8px;
  }
  .footer-nav li a:hover::before {
    opacity: 1;
  }
 
  /* ── COL 3: Address ── */
  .address-block { margin-bottom: 0; }
  .address-block p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--tan-light);
    font-weight: 300;
  }
  .address-block p strong {
    display: block;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
    font-size: 14px;
  }
 
  .map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tan);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.2s, color 0.2s;
  }
  .map-link:hover { border-color: var(--tan); color: #fff; }
 
  /* ── COL 4: Phone ── */
  .phone-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .phone-list li a {
    text-decoration: none;
    color: var(--tan-light);
    font-size: 14px;
    font-weight: 300;

    letter-spacing: 0.04em;
    display: block;
    transition: color 0.2s;
  }
  .phone-list li a:hover { color: var(--tan); }
  .phone-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 400;
  }
 
  /* ── DIVIDER ── */
  .footer-divider {
    max-width: 1200px;
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--rule);
    position: relative;
    z-index: 1;
  }
 
  /* ── BOTTOM BAR ── */
  .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-bottom p {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .footer-bottom a {
    color: var(--tan);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-bottom a:hover { color: #fff; }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .footer-main {
      grid-template-columns: 1fr 1fr;
      gap: 40px 0;
      padding: 48px 24px 40px;
    }
    .footer-col:nth-child(2n+1) { border-left: none; padding-left: 0; }
    .footer-col:nth-child(2n) { padding-right: 0; }
    .footer-col:nth-child(3), .footer-col:nth-child(4) { border-top: 1px solid var(--rule); padding-top: 40px; }
    .footer-bottom { padding: 20px 24px; flex-direction: column; text-align: center; }
  }
  @media (max-width: 540px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .footer-col:not(:first-child) { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 36px; }
    .footer-col:not(:last-child) { padding-right: 0; }
  }


/* ------------------------------- */


:root {
  --green-deep:   #0e3320;
  --green-dark:   #1a4a2e;
  --green-mid:    #2d6e44;
  --green-faint:  #e6f2ea;
  --green-border: rgba(45,110,68,0.18);
  --gold:         #c49a1a;
  --gold-light:   #e8c84a;
  --gold-faint:   rgba(196,154,26,0.1);
  --ink:          #1a2e1f;
  --muted:        #5a7a62;
  --white:        #ffffff;
/*   --font-head:    'Cormorant Garamond', Georgia, serif;
  --font-body:    'Archivo', sans-serif; */
}
 
html, body {
  background: var(--green-faint);
  font-family: var(--font-body);
}
 
/* ─── SECTION WRAPPER ─────────────────────────────── */
.why-section {
  background: var(--green-faint);
  padding: 112px 0 120px;
  overflow: hidden;
  position: relative;
}
 
/* Large faint watermark */
.why-section::before {
  content: 'KKSK';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-head);
  font-size: clamp(160px, 28vw, 320px);
  font-weight: 600;
  color: rgba(45,110,68,0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}
 
.container {
/*   max-width: 1240px; */
  margin: 0 auto;
  padding: 0 48px;
}
 
/* ─── HEADER ─────────────────────────────── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 72px;
}
 
.header-left { max-width: 520px; }
 
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
/*   font-family: var(--font-body); */
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 18px;
}
.section-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
 
.section-title {
  
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 300;
  color: var(--green-deep);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-style:normal;
}
.section-title em {
  font-style: normal;
  color: var(--green-mid);
  text-transform:capitalize;
}
 
.header-right {
  max-width: 400px;
  padding-bottom: 8px;
}
.header-right p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.78;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}
 
/* ─── MAIN GRID ─────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: start;
}
 
/* ── Image block (spans full left column height) ── */
.img-block {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
 
.img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 770px;
  transition: transform 0.7s ease;
}
.img-block:hover img { transform: scale(1.03); }
 
/* Gold caption strip at bottom of image */
.img-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(14,51,32,0.9) 0%, transparent 100%);
  padding: 40px 28px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.img-caption-text {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
  max-width: 220px;
}
.img-caption-badge {
  background: var(--gold);
  color: var(--green-deep);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
 
/* ── Right: feature cards grid ── */
.features-grid {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
 
/* ─── FEATURE CARD ─────────────────────────────── */
.feat-card {
  background: var(--white);
  border: 1px solid var(--green-border);
  border-radius: 4px;
  padding: 32px 28px 28px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.feat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(14,51,32,0.1);
  border-color: rgba(45,110,68,0.3);
}
.feat-card:hover::before { transform: scaleX(1); }
 
/* Gold accent dot top-right */
.feat-card::after {
  content: '';
  position: absolute;
  top: 20px; right: 20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-faint);
  border: 1px solid rgba(196,154,26,0.3);
  transition: background 0.25s;
}
.feat-card:hover::after { background: var(--gold); }
 
/* Icon */
.feat-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-faint);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.25s;
}
.feat-card:hover .feat-icon { background: rgba(196,154,26,0.1); }
.feat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--green-mid);
  transition: stroke 0.25s;
}
.feat-card:hover .feat-icon svg { stroke: var(--gold); }
 
.feat-title {
/*   font-family: var(--font-head); */
  font-size: 19px;
  font-weight: 500;
  color: var(--green-deep);
  line-height: 1.2;
  margin-bottom: 8px;
}
.feat-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
}
 
/* ── Featured / highlighted card (LWG Gold — spans 2 cols) ── */
.feat-card-featured {
  grid-column: 1 / 3;
  background: var(--green-dark);
  border-color: transparent;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 36px;
}
.feat-card-featured::before { background: var(--gold-light); }
.feat-card-featured::after { display: none; }
.feat-card-featured:hover {
  box-shadow: 0 20px 48px rgba(14,51,32,0.22);
  border-color: transparent;
}
 
.feat-card-featured .feat-icon {
  width: 60px;
  height: 60px;
  background: rgba(196,154,26,0.15);
  flex-shrink: 0;
}
.feat-card-featured .feat-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--gold-light);
}
.feat-card-featured:hover .feat-icon { background: rgba(196,154,26,0.25); }
.feat-card-featured:hover .feat-icon svg { stroke: var(--gold-light); }
 
.feat-card-featured .feat-title {
  font-size: 22px;
  color: var(--white);
}
.feat-card-featured .feat-desc { color: rgba(255,255,255,0.55); }
 
.featured-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.featured-badge-num {
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 300;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: -0.02em;
}
.featured-badge-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
 
/* ─── BOTTOM STATS BAR ─────────────────────────────── */
.stats-bar {
  margin-top: 56px;
  display: grid;
/*   grid-template-columns: repeat(4, 1fr); */
	grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--green-border);
  border-radius: 4px;
  overflow: hidden;
}
.stats-bar-item {
  padding: 32px 28px;
  border-right: 1px solid var(--green-border);
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  transition: background 0.2s;
  cursor: default;
}
.stats-bar-item:last-child { border-right: none; }
.stats-bar-item:hover { background: rgba(45,110,68,0.04); }
 
.stats-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stats-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--green-mid);
}
.stats-text-num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 300;
  color: var(--green-deep);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.stats-text-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
 
/* ─── REVEAL ANIMATIONS ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
 
/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .header-right { max-width: 100%; }
}
@media (max-width: 860px) {
  .why-section { padding: 80px 0 88px; }
  .why-grid { grid-template-columns: 1fr; }
  .img-block { grid-column: 1; grid-row: auto; }
  .img-block img { min-height: 360px; }
  .features-grid { grid-column: 1; grid-row: auto; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stats-bar-item:nth-child(2) { border-right: none; }
  .stats-bar-item:nth-child(3) { border-top: 1px solid var(--green-border); }
  .stats-bar-item:nth-child(4) { border-top: 1px solid var(--green-border); }
}
@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .features-grid {         display: flex;
        flex-direction: column;}
  .feat-card-featured { flex-direction: column; align-items: flex-start; gap: 20px; }
  .featured-badge { margin-left: 0; flex-direction: row; align-items: baseline; gap: 10px; }
  .stats-bar { grid-template-columns: 1fr; }
  .stats-bar-item { border-right: none; border-bottom: 1px solid var(--green-border); }
  .stats-bar-item:last-child { border-bottom: none; }
}

/* --------------------------------------------------------------------------------------- */

/* ── Section wrapper ── */
.kksk-proc__section {
  background: #0e3320;
  padding: 112px 0 120px;
  overflow: hidden;
  position: relative;
  font-family: 'Archivo', sans-serif;

}

.implemented-tech-section{
	display:none;
}
 
/* Diagonal texture */
.kksk-proc__section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 60px,
    rgba(255,255,255,0.013) 60px,
    rgba(255,255,255,0.013) 61px
  );
  pointer-events: none;
}
 
/* Faint watermark */
.kksk-proc__section::after {
  content: '04';
  position: absolute;
  bottom: -40px;
  right: 40px;
/*   font-family: 'Cormorant Garamond', Georgia, serif; */
  font-size: 280px;
  font-weight: 600;
  color: rgba(255,255,255,0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
 
/* ── Inner container ── */
.kksk-proc__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}
 
/* ── Header row ── */
.kksk-proc__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 72px;
}
 
.kksk-proc__header-left { max-width: 600px; }
 
.kksk-proc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
/*   font-family: 'Archivo', sans-serif; */
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8c84a;
  margin-bottom: 18px;
}
.kksk-proc__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: #c49a1a;
  flex-shrink: 0;
}
 
.kksk-proc__title {
/*   font-family: 'Cormorant Garamond', Georgia, serif; */
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 300;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.02em;
	font-style:normal;
}
.kksk-proc__title em {
  font-style: normal;
  color: #9fd4ae;
}
 
.kksk-proc__header-right {
  max-width: 400px;
  padding-bottom: 6px;
}
.kksk-proc__header-right p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.78;
  color: rgba(255,255,255,0.55);
  border-left: 2px solid #c49a1a;
  padding-left: 18px;
}
 
/* ── Main grid: steps left, image right ── */
.kksk-proc__layout {
  display: grid;
/*   grid-template-columns: 1fr 1fr; */
	 grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
 
/* ── Steps column ── */
.kksk-proc__steps-col {
/*   display: flex;
  flex-direction: column; */
	display:none;
}
 
.kksk-proc__step {
  padding: 36px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  position: relative;
  transition: background 0.35s ease;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  overflow: hidden;
}
.kksk-proc__step:last-child { border-bottom: none; }
 
/* Gold left accent bar */
.kksk-proc__step::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #c49a1a;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
}
 
/* Hover bg fill */
.kksk-proc__step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1f5235;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
 
.kksk-proc__step:hover::after,
.kksk-proc__step--active::after  { opacity: 1; }
.kksk-proc__step:hover::before,
.kksk-proc__step--active::before { transform: scaleY(1); }
 
/* Step number */
.kksk-proc__step-num {
/*   font-family: 'Cormorant Garamond', Georgia, serif; */
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #c49a1a;
  opacity: 0.6;
  flex-shrink: 0;
  width: 28px;
  padding-top: 4px;
  transition: opacity 0.3s;
  position: relative;
  z-index: 1;
}
.kksk-proc__step:hover .kksk-proc__step-num,
.kksk-proc__step--active .kksk-proc__step-num { opacity: 1; }
 
/* Step body */
.kksk-proc__step-body {
  flex: 1;
  position: relative;
  z-index: 1;
}
 
/* Step title */
.kksk-proc__step-title {
/*   font-family: 'Cormorant Garamond', Georgia, serif; */
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.2s;
}
 
/* Arrow badge inside title */
.kksk-proc__step-arrow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(196,154,26,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
  margin-left: auto;
}
.kksk-proc__step-arrow svg {
  width: 10px;
  height: 10px;
  stroke: #e8c84a;
}
.kksk-proc__step:hover .kksk-proc__step-arrow,
.kksk-proc__step--active .kksk-proc__step-arrow {
  opacity: 1;
  transform: translateX(0);
}
 
/* Step description */
.kksk-proc__step-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(255,255,255,0.55);
  max-width: 380px;
  transition: color 0.2s;
}
.kksk-proc__step:hover .kksk-proc__step-desc,
.kksk-proc__step--active .kksk-proc__step-desc { color: rgba(255,255,255,0.75); }
 
/* Step keyword tags */
.kksk-proc__step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.kksk-proc__step:hover .kksk-proc__step-tags,
.kksk-proc__step--active .kksk-proc__step-tags {
  opacity: 1;
  transform: translateY(0);
}
 
.kksk-proc__step-tag {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196,154,26);
  background: rgba(196,154,26,0.12);
  border: 1px solid rgba(196,154,26,0.2);
  padding: 3px 10px;
  border-radius: 2px;
}
 
/* ── Image panel ── */
.kksk-proc__img-panel {
  position: relative;
  overflow: hidden;
  background: #1a4a2e;
  min-height: 520px;
}
 
/* Individual image layers */
.kksk-proc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.kksk-proc__img--active {
  opacity: 1;
  transform: scale(1);
}
 
/* Image gradient overlay */
.kksk-proc__img-overlay {
  position: absolute;
  inset: 0;
/*   background:
    linear-gradient(to right, rgba(14,51,32,0.45) 0%, transparent 50%),
    linear-gradient(to top,   rgba(14,51,32,0.85) 0%, transparent 45%); */
  z-index: 1;
}
 
/* Bottom label strip over image */
.kksk-proc__img-label {
  position: absolute;
  bottom: 36px;
  left: 36px;
  right: 36px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.kksk-proc__img-label-text {

  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  font-style: italic;
  color: #ffffff;
  line-height: 1.1;
  transition: opacity 0.4s;
}
.kksk-proc__img-label-badge {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8c84a;
  background: rgba(14,51,32,0.7);
  border: 1px solid rgba(196,154,26,0.25);
  padding: 8px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
 
/* Gold progress bar */
.kksk-proc__progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  z-index: 3;
}
.kksk-proc__progress-fill {
  height: 100%;
  background: #c49a1a;
  transition: width 0.4s ease;
  width: 25%;
}
 
/* Vertical dots */
.kksk-proc__dots {
  position: absolute;
  top: 36px;
  right: 36px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kksk-proc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, height 0.3s;
}
.kksk-proc__dot--active {
  background: #c49a1a;
  border-color: #c49a1a;
  height: 18px;
  border-radius: 3px;
}
 
/* ── Bottom step navigator strip ── */
.kksk-proc__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
 
.kksk-proc__strip-item {
  padding: 24px 28px;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background 0.25s;
  position: relative;
}
.kksk-proc__strip-item:last-child { border-right: none; }
 
.kksk-proc__strip-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #c49a1a;
  transform: scaleX(0);
  transition: transform 0.3s;
}
.kksk-proc__strip-item:hover,
.kksk-proc__strip-item--active { background: rgba(255,255,255,0.08); }
.kksk-proc__strip-item:hover::before,
.kksk-proc__strip-item--active::before { transform: scaleX(1); }
 
.kksk-proc__strip-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 300;
  color: rgba(196,154,26,0.4);
  line-height: 1;
  transition: color 0.25s;
  flex-shrink: 0;
}
.kksk-proc__strip-item:hover .kksk-proc__strip-num,
.kksk-proc__strip-item--active .kksk-proc__strip-num { color: #e8c84a; }
 
.kksk-proc__strip-name {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  transition: color 0.25s;
}
.kksk-proc__strip-item:hover .kksk-proc__strip-name,
.kksk-proc__strip-item--active .kksk-proc__strip-name { color: #ffffff; }
 
/* ── Scroll reveal ── */
.kksk-proc__reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.kksk-proc__reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.kksk-proc__reveal--d1 { transition-delay: 0.1s; }
.kksk-proc__reveal--d2 { transition-delay: 0.2s; }
.kksk-proc__reveal--d3 { transition-delay: 0.3s; }
 
/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1024px) {
  .kksk-proc__container { padding: 0 32px; }
  .kksk-proc__header { flex-direction: column; align-items: flex-start; }
  .kksk-proc__header-right { max-width: 100%; }
}
@media (max-width: 860px) {
  .kksk-proc__section  { padding: 80px 0 88px; }
  .kksk-proc__layout   { grid-template-columns: 1fr; }
  .kksk-proc__img-panel { min-height: 340px; order: -1; }
  .kksk-proc__strip    { grid-template-columns: 1fr 1fr; }
  .kksk-proc__strip-item:nth-child(2) { border-right: none; }
  .kksk-proc__strip-item:nth-child(3),
  .kksk-proc__strip-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 560px) {
  .kksk-proc__container   { padding: 0 20px; }
  .kksk-proc__step        { padding: 28px 24px; }
  .kksk-proc__strip       { grid-template-columns: 1fr 1fr;  }
  .kksk-proc__strip-item  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .kksk-proc__strip-item:last-child { border-bottom: none; }
}


/* ---------------------------------------------- */

.kksk-about__section {
  background: #e6f2ea;
  padding: 50px 0 50px;
  overflow: hidden;
  position: relative;
  font-family: 'Archivo', sans-serif;
}
 
/* Subtle dot-grid texture */
.kksk-about__section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(45,110,68,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
 
/* ── Container ── */
.kksk-about__container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
 
/* ══════════════════════════════════════════════
   LEFT — Copy
══════════════════════════════════════════════ */
.kksk-about__copy {}
 
.kksk-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2d6e44;
  margin-bottom: 20px;
}
.kksk-about__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: #c49a1a;
  flex-shrink: 0;
}
 
.kksk-about__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 300;
  color: #0e3320;
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.kksk-about__title em {
  font-style: normal;
  color: #2d6e44;
}
 
/* Gold rule under title */
.kksk-about__title-rule {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, #c49a1a, rgba(196,154,26,0.2));
  margin-bottom: 28px;
}
 
.kksk-about__desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.82;
  color: #4a6655;
  margin-bottom: 18px;
  max-width: 520px;
}
 
/* Pull-quote highlight */
.kksk-about__pullquote {
  border-left: 3px solid #c49a1a;
  padding: 12px 0 12px 20px;
  margin: 28px 0 36px;
}
.kksk-about__pullquote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: #1a4a2e;
}
 
/* Director name tag */
.kksk-about__director {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.kksk-about__director-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2d6e44;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kksk-about__director-avatar svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,0.8);
}
.kksk-about__director-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: #0e3320;
  display: block;
  line-height: 1.2;
}
.kksk-about__director-role {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a7a62;
  display: block;
  margin-top: 3px;
}
 
/* CTA buttons */
.kksk-about__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
 
.kksk-about__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: #1a4a2e;
  padding: 15px 34px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, transform 0.2s;
}
.kksk-about__btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}
.kksk-about__btn-primary:hover::after { transform: translateX(0); }
.kksk-about__btn-primary:hover { transform: translateY(-2px); background: #0e3320;color:#fff!important; }
.kksk-about__btn-primary svg { width: 14px; height: 14px; flex-shrink: 0; }
 
.kksk-about__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #2d6e44;
/*   border-bottom: 1px solid rgba(45,110,68,0.3); */
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.kksk-about__btn-ghost:hover { color: #0e3320; border-color: #0e3320; }
 
/* ══════════════════════════════════════════════
   RIGHT — Visual panel
══════════════════════════════════════════════ */
.kksk-about__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}
 
/* Large decorative ring */
.kksk-about__ring {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px dashed rgba(45,110,68,0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: kkskAboutRingSpin 40s linear infinite;
}
.kksk-about__ring--inner {
  width: 310px;
  height: 310px;
  border-style: solid;
  border-color: rgba(45,110,68,0.1);
  animation-direction: reverse;
  animation-duration: 28s;
}
 
@keyframes kkskAboutRingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
 
/* LWG Gold centre badge */
.kksk-about__lwg-badge {
  position: relative;
  z-index: 4;
  background: #ffffff;
  border: 1px solid rgba(196,154,26,0.3);
  border-radius: 4px;
  padding: 32px 36px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(14,51,32,0.12), 0 4px 16px rgba(14,51,32,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kksk-about__lwg-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 72px rgba(14,51,32,0.16), 0 8px 24px rgba(14,51,32,0.1);
}
 
/* Gold leaf SVG icon */
.kksk-about__lwg-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kksk-about__lwg-icon svg {
  width: 100%;
  height: 100%;
}
 
.kksk-about__lwg-text-gold {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: #c49a1a;
  letter-spacing: 0.06em;
  display: block;
  line-height: 1;
}
.kksk-about__lwg-text-rated {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #c49a1a;
  letter-spacing: 0.1em;
  display: block;
  line-height: 1.1;
  margin-bottom: 10px;
}
.kksk-about__lwg-text-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8aaa92;
  line-height: 1.6;
}
.kksk-about__lwg-text-sub strong {
  color: #2d6e44;
  font-weight: 500;
}
 
/* Floating stat cards */
.kksk-about__stat {
  position: absolute;
  z-index: 5;
  border-radius: 4px;
  padding: 24px 28px;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kksk-about__stat:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 48px rgba(14,51,32,0.25);
}
 
/* Years card — bottom left */
.kksk-about__stat--years {
  background: #2d6e44;
  bottom: 30px;
  left: -20px;
  box-shadow: 0 16px 40px rgba(14,51,32,0.2);
}
 
/* Units card — bottom right */
.kksk-about__stat--units {
  background: #1a4a2e;
  bottom: -10px;
  right: -10px;
  box-shadow: 0 16px 40px rgba(14,51,32,0.25);
}
 
/* Since card — top right */
.kksk-about__stat--since {
  background: #ffffff;
  border: 1px solid rgba(45,110,68,0.2);
  top: 20px;
  right: -10px;
  box-shadow: 0 12px 32px rgba(14,51,32,0.1);
  padding: 18px 24px;
}
 
.kksk-about__stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 48px;
  font-weight: 300;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.kksk-about__stat--since .kksk-about__stat-num {
  font-size: 32px;
  color: #0e3320;
}
.kksk-about__stat-label {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-top: 6px;
}
.kksk-about__stat--since .kksk-about__stat-label {
  color: #5a7a62;
}
 
/* Gold accent top-bar on stat cards */
.kksk-about__stat--years::before,
.kksk-about__stat--units::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #c49a1a, rgba(196,154,26,0.2));
}
 
/* Decorative corner dot on visual */
.kksk-about__corner-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c49a1a;
  opacity: 0.5;
}
.kksk-about__corner-dot--tl { top: 40px;  left: 40px; }
.kksk-about__corner-dot--br { bottom: 40px; right: 40px; }
 
/* ── Reveal animations ── */
.kksk-about__reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.kksk-about__reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.kksk-about__reveal--from-right {
  transform: translateX(32px);
}
.kksk-about__reveal--from-right.kksk-about__reveal--visible {
  transform: translateX(0);
}
.kksk-about__reveal--d1 { transition-delay: 0.1s; }
.kksk-about__reveal--d2 { transition-delay: 0.2s; }
.kksk-about__reveal--d3 { transition-delay: 0.35s; }
.kksk-about__reveal--d4 { transition-delay: 0.5s; }
.kksk-about__reveal--d5 { transition-delay: 0.65s; }
 
/* ── Responsive ── */
@media (max-width: 1024px) {
  .kksk-about__container { padding: 0 32px; gap: 56px; }
}
@media (max-width: 860px) {
  .kksk-about__section  { padding: 80px 0 88px; }
  .kksk-about__container {
    grid-template-columns: 1fr;
    gap: 64px;
    padding: 0 24px;
  }
  .kksk-about__visual { min-height: 440px; }
  .kksk-about__stat--years { left: 0; }
  .kksk-about__stat--units { right: 0; bottom: -60px; }
  .kksk-about__stat--since { right: 0; }
}
@media (max-width: 560px) {
  .kksk-about__container { padding: 0 20px; }
  .kksk-about__actions   { flex-direction: column; align-items: flex-start; }
  .kksk-about__visual    { min-height: 380px; }
  .kksk-about__ring      { width: 300px; height: 300px; }
  .kksk-about__ring--inner { width: 220px; height: 220px; }
	.kksk-about__stat-num{
		font-size: 20px;
	}
	.kksk-about__stat-label{
		font-size:8px;
	}
	.kksk-about__stat--years {
    background: #2d6e44;
    bottom: -20px;
    left: -20px;
    box-shadow: 0 16px 40px rgba(14, 51, 32, 0.2);
}
	.inner-banner-section{
		background-position-y: -300px;
	}
}


/* ---------------- */

  
    /* Custom CSS Theme Variables */
    :root {
      --bg-base: #f8fafc;
      --bg-surface: #ffffff;
      --bg-surface-hover: #f1f5f9;
      --border-color: rgba(226, 232, 240, 0.8);
      --text-main: #0f172a;
      --text-muted: #64748b;
      --primary: #4f46e5;
      --primary-hover: #4338ca;
      --overlay-bg: rgba(15, 23, 42, 0.3);
      --transition-speed: 0.35s;
      --easing: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* System Dark Mode Auto-detection */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg-base: #09090b;
        --bg-surface: #121214;
        --bg-surface-hover: #1e1e24;
        --border-color: rgba(39, 39, 42, 0.8);
        --text-main: #f4f4f5;
        --text-muted: #a1a1aa;
        --primary: #6366f1;
        --primary-hover: #4f46e5;
        --overlay-bg: rgba(0, 0, 0, 0.6);
      }
    }

 

    .site-header {
      position: fixed;
      top: 0px;
      left: 0;
      width: 100%;
      height: 80px;
      z-index: 100;
      background-color: rgba(255, 255, 255, 0.75);
/* 		    background-color: rgb(255 255 255 / 0%); */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    }

    @media (prefers-color-scheme: dark) {
      .site-header {
        background-color: rgba(9, 9, 11, 0.75);
      }
    }

    .header-container {
      max-width: 1280px;
      height: 100%;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .brand-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      z-index: 150;
    }

.brand-logo img{
	width:60px;
}

    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 16px rgba(79, 70, 229, 0.2);
      transition: transform var(--transition-speed) var(--easing);
    }

    .brand-logo:hover .logo-icon {
      transform: scale(1.05) rotate(3deg);
    }

    .logo-icon svg {
      width: 20px;
      height: 20px;
      fill: #ffffff;
    }

    .logo-text {
    
      font-size: 30px;
      font-weight: 400;
      letter-spacing: -0.5px;
      color: var(--text-main);
    }

    .hamburger-btn {
      background: var(--bg-surface-hover);
      border: none;
      cursor: pointer;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      transition: background-color var(--transition-speed) ease, transform var(--transition-speed) var(--easing);
      z-index: 150;
    }

    .hamburger-btn:hover {
      background-color: var(--border-color);
      transform: scale(1.05);
    }

    .hamburger-line {
      display: block;
      width: 20px;
      height: 2px;
      background-color: var(--text-main);
      border-radius: 10px;
      transition: transform var(--transition-speed) var(--easing), opacity var(--transition-speed) ease;
    }

    /* Transform Burger into close 'X' when active */
    .hamburger-btn.is-active .hamburger-line:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    .hamburger-btn.is-active .hamburger-line:nth-child(2) {
      opacity: 0;
    }

    .hamburger-btn.is-active .hamburger-line:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    .offcanvas-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      max-width: 400px;
      height: 100vh;
/*       background-color: var(--bg-surface); */
	  background:#e6f2ea;
      border-left: 1px solid var(--border-color);
      z-index: 120;
      padding: 100px 40px 40px 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transform: translateX(100%);
      transition: transform 0.5s var(--easing);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    }

    .offcanvas-drawer.is-open {
      transform: translateX(0);
    }

    .drawer-close-btn {
      position: absolute;
      top: 24px;
      right: 24px;
      background: var(--bg-surface-hover);
      border: none;
      cursor: pointer;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-main);
      transition: background-color var(--transition-speed) ease, transform var(--transition-speed) var(--easing), color var(--transition-speed) ease;
      z-index: 130;
    }

    .drawer-close-btn:hover {
      background-color: var(--border-color);
      transform: scale(1.05);
      color: var(--primary);
    }

    .drawer-close-btn svg {
      width: 20px;
      height: 20px;
    }

    /* Drawer Header */
    .drawer-header {
      margin-bottom: 40px;
    }

    .drawer-header span {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #2d6e44;
      display: block;
      margin-bottom: 8px;
    }

    .drawer-header h3 {
      font-size: 24px;
      font-weight: 400;
      color: var(--text-main);
    }

    .drawer-nav {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-grow: 1;
    }

    .drawer-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      border-radius: 16px;
      font-size: 18px;
      font-weight: 500;
      text-decoration: none;
      color: #2d6e44;
      transition: background-color var(--transition-speed) ease, transform 0.2s ease, color var(--transition-speed) ease;
	  border:1px solid #8080802e;
    }

    .drawer-link:hover {
      background-color: var(--bg-surface-hover);
/*       color: var(--primary); */
	  color:#2d6e44;
      transform: translateX(4px);
    }

    .drawer-link svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-muted);
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke var(--transition-speed) ease, transform 0.2s ease;
    }

    .drawer-link:hover svg {
      stroke: var(--primary);
      transform: translateX(2px);
    }

    /* Drawer Footer & Social Links */
    .drawer-footer {
      margin-top: auto;
      padding-top: 32px;
      border-top: 1px solid var(--border-color);
    }

    .social-links {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-bottom: 16px;
    }

    .social-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--bg-surface-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      text-decoration: none;
      transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    }

    .social-icon:hover {
      background-color: var(--primary);
      color: #ffffff;
    }

    .social-icon svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .copyright {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
    }

    .menu-overlay {
      position: fixed;
      inset: 0;
      background-color: var(--overlay-bg);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 110;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

    .menu-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    /* Minimalist layout placeholder */
    .clean-canvas {
/*       height: 100vh; */
      display: none;
      justify-content: center;
      align-items: center;
      padding: 24px;
    }

    .canvas-message {
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

@media (max-width:768px){
	.logo-text{
		display:none;
	}
	.site-header{
		position:unset;
	}
}


/* ----------------- */

   .carousel-wrapper{
      width:100%;
      margin:auto;
      overflow:hidden;
      position:relative;
    }

    .carousel-track{
      display:flex;
      gap:20px;
      width:max-content;
      animation: scroll 25s linear infinite;
    }

    .carousel-wrapper:hover .carousel-track{
      animation-play-state: paused;
    }

    .card{
      width:420px;
      height:260px;
      flex-shrink:0;
      overflow:hidden;
      border-left:2px solid #5a4a42;
      background:#fff;
    }

    .card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:0.4s ease;
    }

    .card:hover img{
      transform:scale(1.05);
    }

    @keyframes scroll {
      0%{
        transform:translateX(0);
      }
      100%{
        transform:translateX(calc(-440px * 4));
      }
    }

    @media(max-width:768px){

      .card{
        width:280px;
        height:180px;
      }

      @keyframes scroll {
        0%{
          transform:translateX(0);
        }
        100%{
          transform:translateX(calc(-300px * 4));
        }
      }

    }


    .gallery-section{
      width:100%;
      margin:auto;
    }

    .gallery-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:20px;
    }

    .gallery-item{
      width:100% !important;
		max-width: 100%!important;
      height:260px;
      overflow:hidden;
      border-left:2px solid #5a4a42;
      background:#fff;
      position:relative;
    }

    .gallery-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:0.4s ease;
    }

    .gallery-item:hover img{
      transform:scale(1.05);
    }

    /* Tablet */
    @media(max-width:991px){

      .gallery-grid{
        grid-template-columns:repeat(2, 1fr);
      }

    }

    /* Mobile */
    @media(max-width:576px){

      .gallery-grid{
        grid-template-columns:1fr;
      }

      .gallery-item{
        height:220px;
      }

    }