/* ----------------------------------------------------------------------------------------
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Who We Are css
08. Intro Video css
09. Our Commitment css
10. Our Projects css
11. Our Fact css
12. CTA Box css
13. Our FAQs css
14. Our Testimonials css
15. Our Blog css
16. Footer css
17. About Us Page css
18. Services Page css
19. Service Single css
20. Blog Archive css
21. Blog Single css
22. Projects Page css
23. Project Single css
24. Team Page css
25. Team Single css
26. Pricing Page css
27. Testimonials Page css
28. Image Gallery css
29. Video Gallery css
30. FAQ's Page css
31. Contact Us Page css
32.	404 Error Page css
33. Responsive css
34. Home - Version 2 css
35. Home - Version 3 css 
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
	--primary-color				: #040618;
	--secondary-color			: #FFFFFF;
	--bg-color					: #F3F3F3;
	--text-color				: #585960;
	--accent-color				: #040618;
	--accent-secondary-color	: #DCFF09;
	--white-color				: #FFFFFF;
	--divider-color				: #0406181A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: 'General Sans';
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

html,
body{
	width: 100%;
	overflow-x: clip;
}

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--Text-Black-body);
	background: var(--bg-color);
}

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--accent-secondary-color);
}

::-webkit-scrollbar-thumb{
	background: var(--accent-secondary-color);
}

::selection{
	color: var(--primary-color);
	background-color: var(--accent-secondary-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.5em;
	font-size: var(--font-size-16);
	font-weight: 300;
    color: var(--Text-Black-body, #585960);

}

h1,
h2,
h3,
h4,
h5,
h6{
	font-weight: 600;
	line-height: 1.2em;
	color: var(--primary-color);
	margin :0;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.container{
	max-width: 1500px;
}.container{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}
.bg-p0{
    padding-left: 0;
    padding-right: 0;
}
.btn-default{
	position: relative;
    display: inline-block;
    background: var(--accent-color);
	border-radius: 100px;
    font-size: 16px;
    font-weight: var(--font-weight-Medium);
	line-height: 150%;
    text-transform: capitalize;
    color: var(--white-color);
    padding: 16px 56px 16px 32px;
    border: none;
    overflow: hidden;
	outline: none;
	transition: all 0.5s ease-in-out;
    z-index: 0;
    color: var(--Text-White-Color); 
}

.btn-default:hover{
	color: var(--primary-color);
	background: var(--color-violet-250, #7c1d85) !important;
}
.btn-default.btn-highlighted:hover {
	color: var(--primary-color);
	background: var(--color-violet-250, #7c1d85) !important;
}
.btn-default.btn-our-project:hover{
	color: var(--primary-color,#040618)!important;
	background: var(--white-color, #ffffff) !important;
}

.btn-default.btn-our-project:hover::after{
	background-color: var(--white-color, #ffffff);
}

.btn-default.btn-our-project:hover::before{
	filter: brightness(0);
}
.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
    right: 24px;
	width: 24px;
	height: 24px;
	background-image: url('../images/icon-btn-arrow.svg');
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover:before{
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(1);
} 

.btn-default::after{ 
   	content: '';
    position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-violet-250, #7c1d85);
    border-radius: 100px;
    width: 0;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover::after{
	width: 100%;
	left: 0;
	right: auto;
}

.btn-default.btn-highlighted{
	background-color: var(--white-color);
	color: var(--primary-color);
}

.btn-default.btn-highlighted::before{
	background-image: url('../images/icon-btn-arrow.svg');
}

.btn-default.btn-highlighted:hover::before{
	background-image: url('../images/icon-btn-arrow.svg');
	filter: brightness(0) invert(1);
}

.readmore-btn{
	position: relative;
	display: inline-block;
    color: var(--Text-White-Color)!important;
	font-weight: 400;
	text-transform: capitalize;
	padding-right: 30px;
    font-size: var(--font-size-16);
    line-height: 150%; /* 24px */
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
	background-image: url('../images/icon-btn-arrow.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 24px;
	height: 24px;
    transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.bg-section{
	width: 100%;
	max-width: 1880px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin: 0 auto;
}
.bg-section.bg-full {
    width: 100%;
    border-radius: 0px;
    max-width: 100%;
}

.dark-section{
	background-color: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.our-project-section{
	/* background-color: var(--primary-color); */
	background-image: url('../images/our-project.webp');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.section-row{
	margin-bottom: 24px;
}

.section-row .section-title{
	margin-bottom: 0; 
}

.section-row .section-title.section-title-center{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	margin-top: 30px;
	text-align: left;
}

.section-title-content p{
	margin-bottom: 20px;
}

.section-title-content p:last-child{
	margin-bottom: 0;	
}

.section-title{
	margin-bottom: 40px;
}

.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
	background-color: var(--secondary-color);
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
    margin-bottom: 15px;
}

.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-secondary-color);
	border-radius: 50%;
    width: 6px;
    height: 6px;
}
.section-title .section-sub-title.sub-box-ir{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
    background: var(--color-Violet-100, #E4DCEA)!important;
    color: var(--color-black-black, #000)!important;
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
    margin-bottom: 15px;
}

.section-title h1{
	font-size: 60px;
	font-weight: 500;
    line-height: 120%; /* 86.4px */
    letter-spacing: 1.44px;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
    font-size: 48px;
    font-weight: 600;
    color: var(--Text-Black-primary);
    line-height: 1.2;
	margin-bottom: 0;
	cursor: none;
}


.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.bg-section .section-title .section-sub-title{
	background: var(--bg-color);
}

.dark-section .section-title .section-sub-title{
	background: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p{
	color: var(--white-color);


}
.texr-main-hero {
color: var(--white-color);
text-align: center;
text-shadow: 3px 0px 0px #ff7f26, 6px 0px 0px #2869c7;
/* FC Minimal/Semibold/72 */
font-family: var(--font-family-FC-Minimal, "FC Minimal");
font-size: var(--Font-size-72px, 72px);
font-style: normal;
font-weight: var(--font-weight-Semibold, 600);
line-height: 120%; /* 86.4px */
letter-spacing: 1.44px;
padding: 24px 0 0;
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.turnkey-svg {
    display: inline-block;
    vertical-align: middle;
    height: 55px;
    width: auto;
    margin: 0 0px;
    position: relative;
    top: -10px;
}
.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}
.text-detail-hero{
color: var(--Text-White-Color, #FFF);
text-align: center;
text-shadow: 14px 4px 11px rgba(0, 0, 0, 0.25);
/* FC Minimal/Regular/16 */
font-family: var(--font-family-FC-Minimal, "FC Minimal");
font-size: var(--font-size-16, 16px);
font-style: normal;
font-weight: var(--font-weight-Regular, 400);
line-height: 150%; /* 24px */
}

/* //////////////// */
.logo-01{
    width:30% ;
}
.logo-02 {
    width: 25%;
    margin-bottom: 32px;
 }

/************************************/
/**** 	    03. Header css		 ****/
/************************************/

header.main-header{
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	max-width: 1500px;
	top: 0;
	background: var(--white-color);
	border-radius: 100px;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    transform: translateY(0);
	background: var(--white-color);
	border-bottom: 1px solid var(--divider-color);
	border-radius: 0 0 20px 20px;
}

.navbar {
    padding: 20px 10px;
    align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: left;
	margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 10px;
	position: relative;
}

.main-menu ul li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 12px 4px !important;
    color: var(--text-color);
    background: transparent;
    border-radius: 0px;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul {
    visibility: hidden;
    opacity: 0;
    transform: scale(1, 0.8);
    transform-origin: top;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 340px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 100%;
    background: #3e10bd;
    transition: all 0.3s ease-in-out;
    text-align: left;
}
.main-menu ul li.submenu:first-child ul{
    width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}
/* .main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scale(1,1);
    padding: 5px 0;
} */
.main-menu ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: scale(1, 1);
    padding: 18px 0;
}
.main-menu ul li.submenu ul li.submenu > a:after{
    content: '\f105';
    float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--accent-secondary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	position: relative;
	top: 0;
}

.slicknav_btn {
    background:#eeeeee;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--primary-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu {
    position: absolute;
    width: 100%;
    padding: 0px;
    background: rgb(53 22 142);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 7px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-secondary-color);
}

.slicknav_menu ul ul li a{
    padding: 7px 20px 7px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-50%) rotate(-180deg);
	color: var(--accent-secondary-color);
}

/************************************/
/*** 	    04. Hero css	      ***/
/************************************/

.hero{
    position: relative;
    background-image: url('../images/hero-bg-image.jpg');
    align-content: end;
    min-height: 100vh;
    padding: 220px 0 80px;
    margin-top: 20px;
    overflow: hidden;
}

.hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 50%, var(--primary-color) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hero .container{
    position: relative;
    z-index: 2;
}

/************************************/
/*** 	   05. About Us css	      ***/
/************************************/

.about-us{
    padding: 100px 0;
}

.about-us-image-box{
    position: relative;
    height: 100%;
}

.about-us-image{
    height: 100%;
}

.about-us-image figure{
    height: 100%;
    display: block;
    border-radius: 20px;
}

.about-us-image img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 0.782;
    object-fit: cover;
    border-radius: 20px;
}

.about-us-circle{
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2;
}

.about-us-circle a{
    display: inline-block;
    border-radius: 50%;
}

.about-us-circle img{
    width: 100%;
    max-width: 140px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}
.text-sub{
 color: var(--color-white-white, #FFF);
 font-size: var(--Font-size-20px, 20px);
 font-weight: var(--font-weight-Semibold, 600);
 line-height: 120%;   
}
@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

.about-us-circle img:hover{
    animation-play-state: paused;
}

.about-us-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.about-us-item{
    width: calc(50% - 15px);
    min-height: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white-color);
    border-radius: 20px;
    gap: 30px;
    padding: 10px;
}

.about-us-item.box-2 .about-us-item-content{
	padding: 0 30px 30px;
}

.about-us-item.box-2{
    flex-direction: column-reverse;
}

.about-us-item-content{
    padding: 30px 30px 0;
}

.about-us-item-content h3{
    font-size: 20px;
}

.about-us-item-content p{
    margin: 10px 0 0;
}

.about-us-item.box-1 .about-us-item-image{
    margin-bottom: -10px;
}

.about-us-item-image figure{
    display: block;
    border-radius: 20px;
}

.about-us-item-image img{
    width: 100%;
    aspect-ratio: 1 / 0.733;
    object-fit: cover;
    object-position: top center;
    border-radius: 20px;
}

.about-us-item.box-1 .about-us-item-image figure,
.about-us-item.box-1 .about-us-item-image img{
    border-radius: 20px 20px 0 0;
}

.about-counter-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 50px;
    margin-top: 60px;
}

.about-counter-item{
    width: calc(33.33% - 33.33px);
}

.about-counter-item h2{
    font-size: 50px;
}

.about-counter-item p{
    margin: 5px 0 0;
}
.about-us-btn-metal{
     margin: 0;
}
/************************************/
/*** 	 06. Our Services css     ***/
/************************************/

.our-service{
    padding: 100px 0;
}

.service-item{
    position: relative;
    border-radius: 20px;
    min-height: 430px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-item:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-color);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.service-item.active::before, 
.service-item:hover::before{
    transform: translate(100%, -100%);
}

.service-item-body{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: 100%;
    z-index: 2;
}

.service-item-body .icon-box{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.service-item-body .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item.active .service-item-body .icon-box::before,
.service-item:hover .service-item-body .icon-box::before{
    transform: scale(1);
}

.service-item-body .icon-box img{
    position: relative;
    width: 100%;
    max-width: 30px;
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-body .icon-box img,
.service-item:hover .service-item-body .icon-box img{
    filter: brightness(1) invert(1);
}

.service-item-content h2{
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.service-item-content h2 a{
    color: inherit;
}

.service-item-content p{
    margin: 10px 0 0;
    transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-content h2,
.service-item:hover .service-item-content h2,
.service-item.active .service-item-content p,
.service-item:hover .service-item-content p,
.service-item.active .service-item-btn .readmore-btn,
.service-item:hover .service-item-btn .readmore-btn{
    color: var(--white-color);
}

.service-item-btn{
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.service-item.active .service-item-btn,
.service-item:hover .service-item-btn{
    border-color: var(--dark-divider-color);
}

.service-item-btn .readmore-btn{
    padding-right: 35px;
    transition: all 0.4s ease-in-out;
}

.service-item-btn .readmore-btn::before{
    height: 26px;
    width: 26px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    background-size: 16px auto;
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	color: var(--primary-color);
	margin-bottom: 0;
}

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	background: var(--accent-color);
	color: var(--primary-color);
	line-height: 1em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-right: 10px;
}

.section-footer-text p a{
	font-weight: 600;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--accent-secondary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text ul li:last-child{
	margin: 0;
}

.section-footer-text ul li i{
	color: var(--accent-secondary-color);
}

.dark-section .section-footer-text.section-satisfy-img .satisfy-client-image{
    border-color: var(--primary-color);
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

.dark-section .section-footer-text p a{
    color: var(--accent-secondary-color);
}

.dark-section .section-footer-text p a:hover{
	color: var(--white-color);
}

.satisfy-client-images{
	display: inline-flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
	display: inline-block;
	border: 1px solid var(--white-color);
	border-radius: 50%;
	margin-left: -14px;
	overflow: hidden;
	z-index: 1;
}

.satisfy-client-image:first-child{
	margin-left: 0;
}

.satisfy-client-image figure{
	display: block;
}

.satisfy-client-image img{
	width: 100%;
	max-width: 50px;
}

.satisfy-client-image.add-more{
	width: 52px;
	height: 52px;
	background: var(--accent-secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

.satisfy-client-image.add-more h3{
	font-size: 16px;
}

.satisfy-client-image.add-more i{
	color: var(--primary-color);
	font-size: 20px;
}

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 32px;
	height: 32px;
    margin-left: -10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	max-width: 18px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

/************************************/
/*** 	  07. Who We Are css      ***/
/************************************/

.who-we-are {
    padding: 100px 0;
    background-color: #2E1185;
}
.who-we-nav{
	margin-bottom: 40px;
}

.who-we-nav .nav-tabs{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
    text-align: center;
	gap: 15px 0;
	border-bottom: 4px solid var(--divider-color);
}

.who-we-nav ul li{
	width: 33.33%;
}

.who-we-nav ul li .nav-link{
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
    align-items: center;
	justify-content: center;
	gap: 15px;
	border: none;
	font-size: 18px;
	font-weight: 600;
    line-height: 150%; /* 27px */
	color: var(--primary-color);
	background: transparent;
	border: none;
	border-radius: 0px;
	padding: 0 5px 30px;
	transition: all 0.4s ease-in-out;
}

.who-we-nav ul li .nav-link.active,
.who-we-nav ul li .nav-link:hover{
	color: var(--primary-color);
	background: transparent;
}

.who-we-nav ul li .nav-link::before{
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: auto;
    right: 0;
    background: var(--accent-secondary-color);
    width: 0;
    height: 4px;
    transition: all 0.4s ease-in-out;
}

.who-we-nav ul li .nav-link.active:before,
.who-we-nav ul li .nav-link:hover:before{
	width: 100%;
    left: 0;
}

.who-we-nav ul li .nav-link:hover:not(.active):before{
    background: var(--color-violet-250, #7C1D85);
}

.who-we-nav ul li .nav-link img{
	width: 100%;
	max-width: 30px;
	transition: all 0.3s ease-in-out;
}

.who-we-tab-header-content h3{
	font-size: 20px;
}

.who-we-tab-header-content p{
	margin: 20px 0 0;
}

.who-we-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}
.mb-p4{
    margin-bottom:0px;
}
.who-we-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.who-we-item .icon-box img{
	width: 100%;
	max-width: 34px;
}

.who-we-item-content{
	width: calc(100% - 49px);
}

.who-we-item-content h3{
	font-size: 20px;
}

.who-we-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: var(--stroke-weight-1, 1px) solid rgba(255, 255, 255, 0.09);
}


.about-us-contact-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-box .icon-box{
    position: relative;
    background: var(--accent-secondary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.about-us-contact-box .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #7c1e86;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-contact-box:hover .icon-box::before{
    transform: scale(1);
}

.about-us-contact-box .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-contact-box:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-conatct-content p{
	margin: 0 0 5px;
}

.about-us-conatct-content h3{
	font-size: 20px;
}

.about-us-conatct-content h3 a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-us-conatct-content h3 a:hover{
	color: var(--accent-secondary-color);
}

.who-we-image-box{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 20px 30px;
	margin-left: 20px;
}

.who-we-image-box-1{
	width: calc(55% - 15px);
}

.who-we-image-box-2{
	width: calc(45% - 15px);
}

.who-we-image figure{
	display: block;
	border-radius: 20px;
}

.who-we-image img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.who-we-image-box-1 .who-we-image img{
	aspect-ratio: 1 / 1.622;
}

.who-we-image-box-2 .who-we-image img{
	aspect-ratio: 1 / 1.27;
}

.who-we-cta-box{
	background: linear-gradient(180deg, #2869c7 0%, #1c498a 83%, #133361 113%);
	border-radius: 20px;
	margin-bottom: 30px;
    padding: 28px 28px 28px;
	color: var(--white-color, #fff);
}

.who-we-cta-box-mobile{
	display: none;
}

.who-we-cta-title{
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	margin: 0;
}

.who-we-cta-divider{
	border-top: 1px solid #b6b6b6;
}

.who-we-cta-content{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.who-we-cta-content p{
	margin: 0;
	color: var(--white-color, #fff);
}

/************************************/
/*** 	  08. Intro Video css     ***/
/************************************/

.intro-video{
    position: relative;
    background-image: url('../images/bg-sustainable-development.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 45.833vw;
    align-content: end;
    padding: 100px 0;
    overflow: hidden;
}

.intro-video::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, var(--primary-color));
    opacity: 60%;
    z-index: 1;
}

.intro-video .container{
    position: relative;
    z-index: 2;
}

.intro-video-content .section-title{
    margin-bottom: 0;
}

.watch-video-circle{
    text-align: end;
}

.watch-video-circle a{
    display: inline-block;
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
	cursor: none;
    border-radius: 50%;
}

.watch-video-circle img{
    width: 100%;
    max-width: 160px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

.watch-video-circle img:hover{
    animation-play-state: paused;
}

.commitment-item{
    position: relative;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    margin-bottom: 40px;
    padding: 40px;
    transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.commitment-item:last-child{
    margin-bottom: 0;
}

.commitment-item:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
	left: 0;
    background: var(--white-color);
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
}

.commitment-item:hover:before{
	top: auto;
	bottom: 0;
	height: 100%;
}

/************************************/
/*** 	  10. Our Projects css    ***/
/************************************/

.our-project{
	padding: 100px 0;
}

.project-item{
	position: relative;
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.project-item-image figure{
	position: relative;
	display: block;
	border-radius: 20px;
}

.project-item-image a{
	cursor: none;
	display: block;
}

.project-item-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 20px;
	background: linear-gradient(180deg, transparent 50%, rgba(4, 6, 24, 0.80) 92.5%);
	border-radius: 20px;
	z-index: 1;
}

.project-item-image img{
	width: 100%;
	aspect-ratio: 1 / 1.305;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.6s ease-in-out;
}

.project-item:hover .project-item-image img{
	transform: scale(1.06);
}

.project-item-content{
	position: absolute;
	right: 24px;
	bottom: 24px;
	left: 32px;
	z-index: 2;
}

.project-item-content ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.project-item-content ul li{
	position: relative;
	color: var(--white-color);
	line-height: 1.5em;
	padding-left: 15px;
}

.project-item-content ul li:before{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	width: 6px;
	height: 6px;
}

.project-item-content ul li a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.project-item-content ul li a:hover{
	color: var(--accent-secondary-color);
}

.project-item-content h2{
	color: var(--white-color);
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-Semibold, 600);
    line-height: 150%; /* 27px */
}

.project-item-content h2 a{
	color: inherit;
}

/* ── Project Item: Play Button overlay ─────────────────────── */
.project-item-play{
	position: absolute;
	top: 32%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	text-align: center;
}

/************************************/
/*** Awards and Achievements css  ***/
/************************************/

/* Wrapper — full-width, no container, 2 columns via row g-0 */
.awards-and-achievements-metal{
	width: 100%;
	overflow: hidden;
}

/* ── LEFT: Orange panel ── */
.awards-left-metal{
	position: relative;
	min-height: 480px;
	height: 100%;
	padding: 96px 107px 96px 146px;
	background-image: url('../images/bg-awards-and-achievements-01.webp');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.box-mb-34{
    margin-bottom: 34px;
}
/* Trophy silhouette background */
/* .awards-trophy-bg-metal{
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 420px;
	height: 420px;
	background-image: url('../images/bg-awards-and-achievements.webp');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
	opacity: .22;
	pointer-events: none;
} */

/* .awards-overlay-metal{
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(243,98,13,.55) 0%, rgba(191,95,29,.3) 100%);
	pointer-events: none;
} */

.awards-left-content-metal{
	position: relative;
	z-index: 1;
	max-width: 520px;
}

.awards-left-full-metal{
	min-height: auto;
	padding: clamp(56px, 5vw, 80px) clamp(18px, 5vw, 80px);
	align-items: center;
	background-color: #df5a14;
	background-size: auto 100%;
	background-position: right center;
}

.awards-left-full-metal::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(177, 58, 8, .22), rgba(223, 90, 20, .08));
	pointer-events: none;
}

.awards-left-full-metal .awards-left-content-metal{
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}

.awards-left-full-metal .section-title,
.awards-left-full-metal > .awards-left-content-metal > .box-mb-34{
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.awards-left-full-metal .section-title{
	text-align: center;
}

.awards-left-full-metal .awards-btn-metal{
	text-align: center;
}

/* Badge — reuse .section-sub-title but override for dark bg */
.awards-left-content-metal .section-sub-title{
	background: rgba(255,255,255,.18) !important;
	backdrop-filter: blur(8px);
	color: var(--white-color) !important;
	margin-bottom: 20px;
}

.awards-left-content-metal .section-sub-title::before{
	background-color: var(--white-color) !important;
}

/* Heading */
.awards-left-content-metal h2{
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 700;
	color: var(--white-color);
	line-height: 1.2;
	margin-bottom: 24px;
}

/* Tighten the gap between heading and description — .section-title's
   default 40px margin-bottom plus the paragraph's browser-default top
   margin was stacking into an oversized gap here */
.awards-left-content-metal .section-title{
	margin-bottom: 20px;
}

.awards-left-content-metal p{
	margin-top: 0;
}

/* ISO heading */
.awards-iso-heading-metal{
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
	color: var(--white-color);
    margin-bottom: 20px;   
}

/* Button */
.awards-btn-metal .btn-default.btn-awards{
	background-color: var(--white-color) !important;
	color: var(--primary-color) !important;
}

.awards-btn-metal .btn-default.btn-awards::before{
	filter: brightness(0) !important;
}

.awards-btn-metal .btn-default.btn-awards::after{
	background-color: var(--color-violet-250, #7c1d85) !important;
}

.awards-btn-metal .btn-default.btn-awards:hover{
	color: var(--white-color) !important;
	background: transparent !important;
	background-color: transparent !important;
}

.awards-btn-metal .btn-default.btn-awards:hover::after{
	background-color: var(--color-violet-250, #7c1d85) !important;
	width: 100%;
	left: 0;
	right: auto;
}

.awards-btn-metal .btn-default.btn-awards:hover::before{
	filter: brightness(0) invert(1) !important;
}

/* ── RIGHT: White panel ── */
.awards-right-metal{
	background-color: var(--secondary-color, #fff);
	min-height: 480px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 40px;
}

/* Cert slider — width capped to match the certificate image so slides
   stay aligned with the left panel instead of stretching full-width */
.awards-cert-slider-metal{
	width: 100%;
	max-width: 400px;
	overflow: hidden;
}

/* Home (TH): show both ISO certificates together instead of as slides. */
.awards-cert-pair-metal{
	width: 100%;
	max-width: 1080px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	align-items: stretch;
	margin: clamp(28px, 3vw, 40px) auto;
}

.awards-cert-pair-metal .awards-cert-item-metal{
	min-width: 0;
	padding: clamp(26px, 2.7vw, 40px);
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 24px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 16px 40px rgba(91, 25, 5, .14);
}

.awards-cert-pair-metal .awards-cert-wrap-metal{
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.awards-cert-pair-metal .awards-cert-wrap-metal img{
	max-width: 320px;
}

.awards-cert-pair-metal .awards-cert-desc-metal{
	max-width: 350px;
}

.awards-left-full-metal .awards-cert-pair-metal .awards-iso-heading-metal{
	color: var(--white-color);
	text-align: center;
	margin-top: 22px;
	margin-bottom: 14px;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.awards-left-full-metal .awards-cert-pair-metal .awards-cert-desc-metal{
	color: rgba(255, 249, 244, .92);
	font-size: 16px;
	line-height: 1.55;
}

.awards-cert-slider-metal .swiper-pagination{
	position: static;
	margin-top: 24px;
	text-align: center;
}

.awards-cert-slider-metal .swiper-pagination-bullet{
	width: 8px;
	height: 8px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	background: var(--primary-color);
	opacity: .25;
	transition: background-color .3s ease, opacity .3s ease;
}

.awards-cert-slider-metal .swiper-pagination-bullet-active{
	background: var(--accent-secondary-color, #ff7f26);
	opacity: 1;
}

.awards-cert-wrap-metal figure{
	margin: 0 auto;
	display: block;
	text-align: center;
}

.awards-cert-wrap-metal img{
	max-width: 400px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* This heading/description sit on the white right panel, so they need
   dark text — override the shared white styling meant for the orange
   left panel, scoped so home-en.html's left-panel usage is unaffected */
.awards-right-metal .awards-iso-heading-metal{
	text-align: center;
	color: var(--primary-color);
	margin-top: 32px;
}

.awards-cert-desc-metal{
	text-align: center;
	color: var(--text-color);
	max-width: 400px;
	margin: 0 auto;
}
   /* .contact-01{
    display: none;
   } */
   .contact-02{
    display: none;
   }
/* ── Responsive ── */

@media (max-width: 1440.98px){
.awards-cert-wrap-metal img {
    max-width: 380px;
   }
 .awards-left-metal {
    padding: 96px 100px 96px 100px;
  }
 .awards-left-full-metal{
    padding: 64px clamp(32px, 5vw, 72px);
 }
}

@media (max-width: 1299.98px){
.main-menu ul li a {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 12px 4px !important;
    color: var(--text-color);
    background: transparent;
    border-radius: 0px;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
  }
}
@media (max-width: 1220.98px){
    .main-menu ul li a {
        font-size: 13px;
    }
 }


@media (max-width: 1199.98px){
    .awards-left-metal {
        padding: 96px 70px 96px 70px;
    }
    .awards-left-full-metal {
        padding: 60px clamp(28px, 4vw, 50px);
    }
    .awards-left-content-metal {
        text-align: center;
    }
    .awards-left-content-metal .section-title {
        text-align: center;
    }
    .awards-left-content-metal .awards-btn-metal {
        text-align: center;
    }
    .who-we-image{
    padding-top: 40px;

  }
      .who-we-cta-box {
        padding: 48px 32px;
    }
        .who-we-image {
        padding-top: 0px;
    }
    .who-we-cta-box {
        padding: 48px 32px;
    }
    .img-building-01 {
        margin-top: 8px;
        height: 550px!important;
    }
    .img-architect-01{
        height: 350px!important;
    }
   .contact-01{
    display: none;
   }
   .contact-02{
    display: flex;
   }
   .nav-logo-item {
    display: none !important;
  }
 }


@media (max-width: 991.98px){
	.awards-left-metal{
		padding: 60px 40px;
		min-height: auto;
	}
	.awards-left-full-metal{
		padding: 60px 24px;
	}
	.awards-left-full-metal > .awards-left-content-metal > .box-mb-34{
		max-width: 620px;
	}
	.awards-right-metal{
		min-height: auto;
		padding: 80px 40px;
	}
	.awards-left-full-metal .awards-cert-pair-metal{
		max-width: 760px;
		gap: 24px;
	}
	.awards-left-full-metal .awards-cert-pair-metal .awards-cert-wrap-metal img{
		max-width: 280px;
	}
    .awards-cert-wrap-metal img {
        max-width: 340px;
    }
    .awards-left-content-metal {
        position: relative;
        z-index: 1;
        max-width: 100%;
        max-width: 540px;
        width: 100%;
        display: block;
        margin: auto;
    }
    .awards-iso-heading-metal {
        text-align: center;
    }
      .awards-left-metal {
        padding: 80px 24px;
    }
    .turnkey-svg {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    width: auto;
    margin: 0 0px;
    position: relative;
    top: -8px;
  }
}
@media (max-width: 818.98px){
    .img-building-01 {
        height: 450px !important;
    }
    .img-architect-01{
         height: 250px!important;
    }
 }

@media (max-width: 767.98px){
	.awards-left-metal{
		padding: 80px 24px;
	}
	.awards-left-full-metal{
		padding: 56px 20px;
		background-position: 62% center;
	}
	.awards-left-full-metal > .awards-left-content-metal > .box-mb-34{
		width: calc(100% - 32px);
		max-width: 500px;
		font-size: 16px;
		line-height: 1.5;
		overflow-wrap: break-word;
	}
	.awards-right-metal{
		padding: 80px 24px;
	}
	.awards-left-full-metal .awards-cert-pair-metal{
		max-width: 420px;
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.awards-left-full-metal .awards-cert-pair-metal .awards-cert-item-metal{
		padding: 28px 22px;
	}
	.awards-left-full-metal .awards-cert-pair-metal .awards-cert-wrap-metal img{
		max-width: 300px;
	}
	.awards-left-full-metal .awards-cert-pair-metal .awards-iso-heading-metal{
		min-height: auto;
	}
    .turnkey-svg {
        height: 34px;
        top: -6px;
    }
}
@media (max-width: 515.98px){
    .awards-cert-wrap-metal img {
        max-width: 280px;
    }
        .awards-left-metal {
        padding: 80px 30px;
    }
    .awards-left-full-metal {
        padding: 44px 24px;
    }
    .awards-left-full-metal > .awards-left-content-metal > .box-mb-34 {
        max-width: 350px;
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 1.5;
    }
    .awards-left-full-metal .section-title {
        margin-bottom: 14px;
    }
    .awards-left-full-metal .section-title h2 {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .awards-left-full-metal .logo-stack .lt {
        width: min(190px, 62vw);
    }
    .awards-left-full-metal .awards-cert-pair-metal {
        gap: 18px;
        margin: 24px auto 28px;
    }
    .awards-left-full-metal .awards-cert-pair-metal .awards-cert-item-metal {
        padding: 24px 18px;
        border-radius: 20px;
    }
    .awards-left-full-metal .awards-cert-pair-metal .awards-cert-wrap-metal img {
        max-width: 176px;
    }
    .awards-left-full-metal .awards-cert-pair-metal .awards-iso-heading-metal {
        font-size: 17px;
        margin-top: 16px;
        margin-bottom: 10px;
    }
    .awards-left-full-metal .awards-cert-pair-metal .awards-cert-desc-metal {
        font-size: 14px;
        line-height: 1.45;
    }
    .about-us-contact-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin: auto;
}

@media (max-width: 414.98px){
    .awards-left-full-metal .awards-cert-pair-metal .awards-cert-wrap-metal img {
        max-width: 160px;
    }
}

@media (max-width: 374.98px){
    .awards-left-full-metal {
        padding: 42px 16px;
    }
    .awards-left-full-metal .awards-cert-pair-metal .awards-cert-item-metal {
        padding: 22px 16px;
        border-radius: 20px;
    }
    .awards-left-full-metal .awards-cert-pair-metal .awards-cert-wrap-metal img {
        max-width: 160px;
    }
    .awards-left-full-metal .awards-btn-metal .btn-default {
        width: 100%;
        max-width: 280px;
    }
}
    .who-we-btn {
        margin: auto;
    }
       .turnkey-svg {
        height: 28px;
        top: -5px;
    }
}

/* Home section-level detail copy: keep long paragraphs readable when
   the two-column About and Investor Relations layouts stack. */
@media (max-width: 1199.98px){
    .about-us-content-metal > .section-title,
    .who-we-are-content-box-metal > .section-title {
        text-align: center;
    }

    .about-us-content-metal > .section-title > p,
    .who-we-are-content-box-metal > .section-title > p {
        width: calc(100% - 48px);
        max-width: 780px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }
}

@media (max-width: 991.98px){
    .about-us-content-metal > .section-title > p,
    .who-we-are-content-box-metal > .section-title > p {
        width: calc(100% - 40px);
        max-width: 680px;
    }
}

@media (max-width: 767.98px){
    .about-us-content-metal > .section-title > p,
    .who-we-are-content-box-metal > .section-title > p {
        width: calc(100% - 32px);
        max-width: 540px;
        font-size: 16px;
        line-height: 1.55;
    }
}

@media (min-width: 516px) and (max-width: 767.98px){
    .about-us-metal,
    .who-we-are-metal {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .about-us-content-metal > .section-title > h2,
    .who-we-are-content-box-metal > .section-title > h2 {
        width: calc(100% - 40px);
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        font-size: 32px;
        line-height: 1.25;
    }

    .about-us-content-metal > .section-title > p,
    .who-we-are-content-box-metal > .section-title > p {
        max-width: 500px;
        margin-top: 16px;
    }

    .about-us-content-metal .logo-stack .lt,
    .who-we-are-content-box-metal .logo-stack .lt {
        width: 230px;
    }
}

@media (max-width: 515.98px){
    .about-us-content-metal > .section-title,
    .who-we-are-content-box-metal > .section-title {
        text-align: left;
    }

    .about-us-content-metal > .section-title > p,
    .who-we-are-content-box-metal > .section-title > p {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        font-size: var(--font-size-16);
        line-height: 1.6em;
    }
}


/************************************/
/*** 	    11. Our Fact css      ***/
/************************************/

.our-fact{
	padding: 100px 0;
}

.our-fact-image-box{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	background: url('../images/our-fact-image-box-bg.png') no-repeat;
	background-position: bottom 30px left 57%;
	background-size: auto;
	margin-right: 20px;
}

.our-fact-image-box-1 {
    position: relative;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 10px;
    width: 55%;
    z-index: 2;
    box-shadow: var(--at-shadow-lg);
}

.our-fact-image-box-1 .our-fact-image figure{
	display: block;
	border-radius: 14px;
}

.our-fact-image-box-1 .our-fact-image img{
	width: 100%;
	aspect-ratio: 1 / 0.765;
	object-fit: cover;
	border-radius: 14px;
}

.our-fact-image-content{
	padding: 20px 10px 10px;
}

.our-fact-image-content p{
	color: var(--primary-color);
	font-weight: 500;
	margin: 0;
}

.our-fact-image-box-2{
	padding-bottom: 90px;
	width: 45%;
}

.our-fact-image-box-2 .our-fact-image{
	margin-left: -270px;
}

.our-fact-image-box-2 .our-fact-image figure{
	display: block;
	border-radius: 20px;
}

.our-fact-image-box-2 .our-fact-image img{
	width: 100%;
	aspect-ratio: 1 / 1.071;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/***    	12. CTA Box css       ***/
/************************************/

.cta-box{
	position: relative;
	background-image: url('../images/bg-contact-us.webp');
	padding: 100px 0;
	overflow: hidden;
}

.cta-box:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	/* background: linear-gradient(270deg, transparent 0%, rgba(4, 6, 24, 0.70) 100%); */
	z-index: 1;
}

.cta-box .container{
	position: relative;
	z-index: 2;
}

.cta-box-content{
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	height: 100%;
}

.cta-item-box-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.cta-box-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.cta-box-item:last-child{
    width: 100%;
    border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
}

.cta-box-item .icon-box{
	position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cta-box-item .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.cta-box-item:hover .icon-box::before{
    transform: scale(1);
}

.cta-box-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.cta-box-item-content{
	width: calc(100% - 65px);
}

.cta-box-item-content p{
	color: var(--white-color);
	margin-bottom: 5px;
}

.cta-box-item-content h3{
	color: var(--white-color);
	font-size: 20px;
}

.cta-box-item-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.cta-box-item-content h3 a:hover{
	color: var(--accent-secondary-color);
}

.cta-form-box{
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 60px;
}

.cta-form-box .section-title .section-sub-title{
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.cta-form-box .section-title h2{
	color: var(--primary-color);
}

.cta-contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--primary-color);
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 17px 20px;
	box-shadow: none;
	outline: none;
}

.cta-contact-form .form-control::placeholder{
	color: var(--text-color);
}

/************************************/
/*** 	   13. Our Faqs css       ***/
/************************************/

.our-faqs{
    padding: 100px 0;
}

.faqs-content{
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

.faq-client-box{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.faq-client-box-content{
    max-width: 67%;
}

.faq-client-box-content p{
    margin-bottom: 0;
}

.faq-accordion .accordion-item{
    border: 1px solid var(--divider-color);
    border-radius: 10px;
    margin-bottom: 25px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.faq-accordion .accordion-item .accordion-button.collapsed{
    background: transparent;
    color: var(--primary-color);
}

.faq-accordion .accordion-header .accordion-button{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.333em;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 20px 50px 20px 24px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-body{
    background: var(--primary-color);
    border-top: 1px solid var(--dark-divider-color);
    padding: 20px 24px;
}

.faq-accordion .accordion-item .accordion-body p{
    color: var(--white-color);
    margin-bottom: 0;
}

.accordion-item .accordion-body ul {
    list-style: disc;
    margin: 10px 0 30px 0;
    padding-left: 0px;
}

.accordion-item .accordion-body ul li{
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 5px;
}

.accordion-item .accordion-body ul li:last-child{
    margin-bottom: 0;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    font-size: 20px;
    font-weight: 400;
    transform: translateY(-50%);
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
    color: var(--white-color);
}

/************************************/
/***   14. Our Testimonials css   ***/
/************************************/

.our-testimonials{
    padding: 100px 0;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    min-height: 430px;
    background-color: var(--bg-color);
    border-radius: 20px;
    padding: 40px;
}

.testimonial-item-header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.testimonial-item-rating i{
    color: var(--accent-secondary-color);
    font-size: 18px;
}

.testimonial-item-quote img{
    width: 100%;
    max-width: 40px;
}

.testimonial-item-content p{
    margin-bottom: 0;
    font-weight: 600;
}

.testimonial-item-author{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.testimonial-author-image figure{
    display: block;
    border-radius: 50%;
}

.testimonial-author-image img{
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.testimonial-author-content{
    width: calc(100% - 65px);
}

.testimonial-author-content h3{
    font-size: 20px;
}

.testimonial-author-content p{
    margin: 5px 0 0;
}

.company-supports-slider-box{
    margin-top: 80px;
}

.company-supports-content{
    display: flex;
    align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content hr{
    height: 1px;
    width: 36%;
    color: var(--divider-color);
    opacity: 1;
    margin: 0;
}

.company-supports-content p{
    margin-bottom: 0;
}

.company-supports-slider{
	padding: 0 4.167vw 0;
} 

.company-supports-logo{
	text-align: center;
}

.company-supports-logo img{
	width: 100%;
	max-width: 170px;
}

.post-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.post-featured-image{
	margin-bottom: 20px;
}

.post-featured-image a,
.post-featured-image figure{
	display: block;
	border-radius: 20px;
    cursor: none;
    overflow: hidden;
}

.post-featured-image img{
	width: 100%;
    aspect-ratio: 1 / 0.724;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.06);
}

.post-item-content{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.post-item-content h2{
    font-size: 20px;
	line-height: 1.4em;
}

.post-item-content h2 a{
    color: inherit;
}

/************************************/
/*** 	    16. Footer css        ***/
/************************************/

.main-footer{
    padding: 100px 0 0;
    margin-bottom: 20px;
}

.footer-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid var(--dark-divider-color);
    padding-bottom: 60px;
    margin-bottom: 60px;
}

.footer-header .section-title{
    margin-bottom: 0;
    max-width: 860px;
}

.footer-social-links h3{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 20px;
}

.footer-social-links ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-social-links ul li a{
    width: 36px;
    height: 36px;
    border: 1px solid var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a:hover{
    background-color: var(--accent-secondary-color);
}

.footer-social-links ul li a i{
    font-size: 18px;
    color: var(--accent-secondary-color);
    transition: all 0.3s ease-in-out;
}

.footer-social-links ul li a:hover i{
    color: var(--primary-color);
}

.about-footer{
    margin-right: 2.604vw;
}

.footer-logo img{
    width: 100%;
    max-width: 177px;
}

.about-footer-content{
    margin-top: 30px;
}

.about-footer-content p{
    color: var(--white-color);
    margin-bottom: 0;
}

.footer-links-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.footer-links{
    max-width: 35%;
}

.footer-links h3{
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-links ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links ul li{
    text-transform: capitalize;
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 15px;
}

.footer-links ul li:last-child{
    margin-bottom: 0;
}

.footer-links ul li a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.footer-links ul li a:hover{
	color: var(--accent-secondary-color);
}

.footer-links p{
    color: var(--white-color);
    margin-bottom: 30px;
}

.footer-newsletter-form .form-group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    border: 1px solid var(--dark-divider-color);
    border-radius: 100px;
    padding: 4px;
}

.footer-newsletter-form .form-group .form-control{
    width: calc(100% - 50px);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white-color);
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 6px 14px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-secondary-color);
    border: none;
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
    background-color: var(--white-color);
}

.footer-newsletter-form .form-group .newsletter-btn i{
    font-size: 24px;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.footer-copyright{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding: 60px 0;
    text-align: center;
}

.footer-copyright-text p{
    color: var(--white-color);
    margin-bottom: 0;
}

/************************************/
/***    17. About Us Page css     ***/
/************************************/

.page-header{
	position: relative;
	background-image: url('../images/page-header-bg.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
    padding: 260px 0 160px;
	margin-top: 16px;
	overflow: hidden;
}

.page-header:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--primary-color);
	opacity: 50%;
	z-index: 1;
}

.page-header-box{
	position: relative;
    text-align: center;
	z-index: 2;
}

.page-header-box h1{
	display: inline-block;
	font-size: 60px;
    font-weight: 500;
	color: var(--white-color);
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box h1 span{
    font-style: italic;
}

.page-header-box ol{
    justify-content: center;
	margin: 0;
	padding: 0;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
    text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

.our-approach{
    padding: 100px 0;
}

.our-approach-images{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 35px;
}

.our-approach-images::before{
	content: '';
	position: absolute;
	bottom: 70px;
	left: 20px;
	border: 4px solid var(--accent-secondary-color);
	width: 394px;
	height: 410px;
	z-index: 0;
}

.our-approach-image-box-1{
    position: relative;
    width: 56%;
    z-index: 2;
}

.our-approach-image figure{
    display: block;
	border-radius: 20px;
}

.our-approach-image figure img{
    width: 100%;
	aspect-ratio: 1 / 0.89;
	object-fit: cover;
	border-radius: 20px;
}

.our-approach-image-box-2{
	position: relative;
    width: 44%;
    padding-bottom: 135px;
	z-index: 1;
}

.our-approach-image-box-2 .our-approach-image figure{
    margin-left: -285px; 
}

.our-approach-image-box-2 .our-approach-image figure img{
    aspect-ratio: 1 / 0.82;
}

.approach-item-box{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.approach-item{
	width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.approach-item .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.approach-item:hover .icon-box{
    background: var(--accent-secondary-color);
}

.approach-item .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.approach-item:hover .icon-box img{
    filter: brightness(1) invert(1);
}

.approach-item-content{
    width: calc(100% - 65px);
}

.approach-item-content h3{
    font-size: 20px;
}

.approach-item-content p{
    margin: 10px 0 0;
}

.approach-item:last-child{
	width: 100%;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.our-history{
    padding: 100px 0;
}

.our-history-content{
    position: sticky;
    top: 30px;
}

.explore-project-circle a{
	display: inline-block;
	border-radius: 50%;
}

.explore-project-circle img{
	width: 100%;
	max-width: 140px;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

.explore-project-circle img:hover{
	animation-play-state: paused;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}

.history-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.history-item{
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--white-color);
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
}

.history-item-header h2{
    font-size: 50px;
}

.history-item-content{
    border-top: 1px solid var(--divider-color);
    padding-top: 20px;
    margin-top: 20px;
}

.history-item-content h3{
    font-size: 20px;
}

.history-item-content p{
    margin: 10px 0 0;
}

.history-item-image{
    align-content: end;
}

.history-item-image figure{
	width: 100%;
    max-width: 370px;
    border-radius: 0 20px 0 0;
    margin: 0 auto -200px -50px;
}

.history-item-image img{
    width: 100%;
    border-radius: 0 20px 0 0;
    aspect-ratio: 1 / 1.24;
    object-fit: cover;
}

.our-team{
    padding: 100px 0;
}

.team-item{
    background: var(--white-color);
    border-radius: 20px;
    padding: 30px 30px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	gap: 10px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    transition: all 0.6s ease-in-out;
}

.team-item:hover{
    background-color: var(--primary-color);
}

.team-item-content{
	max-width: 80%;
}

.team-item-content h2{
    font-size: 20px;
    transition: all 0.4s ease-in-out;
}

.team-item-content h2 a{
    color: inherit;
}

.team-item-content p{
    margin: 10px 0 0;
    transition: all 0.4s ease-in-out;
}

.team-item:hover .team-item-content h2,
.team-item:hover .team-item-content p{
    color: var(--white-color);
}

.team-item-image{
    text-align: center;
}

.team-item-image figure{
	display: block;
	border-radius: 20px 20px 0 0;
}

.team-item-image img{
	width: 100%;
	max-width: 245px;
    aspect-ratio: 1 / 1.54;
    object-fit: cover;
	border-radius: 20px 20px 0 0;
}

.team-social-list{
    position: absolute;
    right: 30px;
    top: 30px;
    transform: translateY(30px);
	opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-social-list{
    transform: translateY(0);
	opacity: 1;
    visibility: visible;
}

.team-social-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-social-list ul li{
	margin-bottom: 15px;
}

.team-social-list ul li:last-child{
	margin-bottom: 0;
}

.team-social-list ul li a{
	width: 36px;
	height: 36px;
	color: var(--white-color);
    background: transparent;
    border: 1px solid var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.team-social-list ul li:hover a{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
	color: var(--primary-color);
}

.team-social-list ul li a i{
    font-size: 18px;
    color: inherit;
}

.our-process{
    padding: 100px 0;
}

.our-process-item{
    background: var(--white-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
	overflow: hidden;
}

.our-process-item-number{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
}

.our-process-item-number h2{
    font-size: 50px;
}

.our-process-item-content h3{
    font-size: 20px;
}

.our-process-item-content p{
    margin: 20px 0 0;
}

.our-process-item-content ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

.our-process-item-content ul li{
    position: relative;
    color: var(--primary-color);
    font-size: 14px;
    background-color: var(--bg-color);
    border-radius: 100px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 10px 16px 10px 32px;
}

.our-process-item-content ul li::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    height: 6px;
    width: 6px;
    transform: translateY(-50%);
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
}

.our-process-item.box-2 .our-process-item-number{
    margin-bottom: 30px;
}

.our-process-item-image{
    align-content: end;
}

.our-process-item-image figure{
	width: 100%;
    max-width: 300px;
    margin: 0 auto -90px 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.our-process-item-image img{
    width: 100%;
    aspect-ratio: 1 / 0.88;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.our-process-item.box-3{
    position: relative;
    background-image: url('../images/our-procces-image-2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.our-process-item.box-3::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
    opacity: 60%;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.our-process-item.box-3 .our-process-item-number,
.our-process-item.box-3 .our-process-item-content{
    z-index: 2;
}

.our-process-item.box-3 .our-process-item-number{
    border-color: var(--dark-divider-color);
}

.our-process-item.box-3 .our-process-item-number h2,
.our-process-item.box-3 .our-process-item-content h3,
.our-process-item.box-3 .our-process-item-content p{
    color: var(--white-color);
}

.our-process-item.box-3 .our-process-item-content ul li{
    color: var(--white-color);
    background-color: var(--dark-divider-color);
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 15px;
}

.sidebar-cta-box{
	border-radius: 20px;
	overflow: hidden;
}

.sidebar-cta-image figure{
	position: relative;
	display: block;
}

.sidebar-cta-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(180deg, transparent 0%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.sidebar-cta-image img{
	width: 100%;
	aspect-ratio: 1 / 1.145;
	object-fit: cover;
}

.sidebar-cta-body{
	position: absolute;
	bottom: 40px;
	left: 40px;
	right: 40px;
	text-align: center;
	z-index: 1;
}

.sidebar-cta-logo img{
	width: 100%;
	max-width: 177px;
}

.sidebar-cta-content,
.sidebar-cta-btn{
	margin-top: 40px;
}

.sidebar-cta-content h2{
	font-size: 30px;
	color: var(--white-color);
}

/************************************/
/***     20. Blog Archive css     ***/
/************************************/

.page-blog{
	padding: 100px 0;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 100px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
    color: var(--white-color);
}
.text-w-500{
	font-weight: 500;
}

.skills-progress-bar{
	width: calc(50% - 15px);
}

.skills-progress-bar:last-child{
	margin-bottom: 0px;
}

.contact-form{
    background: var(--white-color);
    border-radius: 20px;
    padding: 60px;
}

.contact-form label{
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 15px;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	background: var(--bg-color);
	border: none;
	border-radius: 10px;
	padding: 18px 25px;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	color: var(--text-color);
}

/************************************/
/***    32. 404 Error Page css    ***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 520px;
}

.error-page-content {
    text-align: center;
    margin: 120px 0px 50px;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}

/************************************/
/***      33. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1880px){
	
	.bg-section{
		width: calc(100% - 40px);
	}
    	.bg-section.bg-full{
		width: 100%;
        border-radius: 0px;
	}
}

@media only screen and (max-width: 1580px){

	header.main-header .header-sticky{
		width: calc(100% - 70px);
	}
}

@media only screen and (max-width: 1440px){

	.container{
        max-width: 1300px;
    }

    .about-us-item{
        min-height: initial;
    }

    .about-us-item-content{
        padding: 20px 20px 0;
    }

    .about-us-item.box-2 .about-us-item-content{
        padding: 0 20px 20px;
    }

    .about-counter-item-list{
        margin-top: 30px;
		gap: 30px;
    }

	.about-counter-item{
		width: calc(33.33% - 20px);
	}

    .service-item{
        padding: 30px 20px;
        min-height: 370px;
    }

	.who-we-cta-box{
		padding: 20px;
	}

	.commitment-item{
		padding: 30px;
		margin-bottom: 30px;
	}

	.project-item-content{
		right: 24px;
		bottom: 25px;
		left: 24px;
	}

	.cta-form-box{
		padding: 40px;
	}

	.faqs-content{
		margin: 0;
	}

    .faq-client-box-content{
        max-width: 60%;
    }

    .testimonial-item{
        padding: 30px;
    }

    .testimonial-item-author{
        padding-top: 30px;
        margin-top: 30px;
    }

	.history-item{
        padding: 30px;
    }

    .our-process-item{
        padding: 30px;
    }

    .our-process-item-content ul{
        margin-top: 30px;
    }

	.sidebar-cta-body{
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

	.sidebar-cta-content,
	.sidebar-cta-btn{
		margin-top: 30px;
	}

    .contact-form{
        padding: 40px;
    }
    .project-item-play {
        top: 24%;
    }
    .main-menu ul li {
    margin: 0 4px;
    position: relative;
   }
}


@media only screen and (max-width: 1199px){
.section-title {

    text-align: center;
    display: block;
    justify-content: center;
    margin: auto;
}
/* ── Project Item: Play Button overlay ─────────────────────── */
.project-item-play{
	top: 50%;
   }
.our-project-section{
    background-position: 90%;
	background-size: cover;
 }
    .who-we-image-box {
        margin-left: 0px;
        margin-top: 32px;
    }
.who-we-are-box-crop{
    width: 80%;
    justify-content: center;
    margin: auto;
}
.video-sustainable-development{
    width: 80%;
    justify-content: center;
    margin: auto; 
   }
   .page-header {
    margin-top: 0px;
    border-radius: 0px;
    width: 100%;
   }
   .section-title p {
    margin-bottom: 32px;
}
} 


@media only screen and (max-width: 1024px){

	.main-menu ul li{
		margin: 0;
	}

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title-content{
        margin-top: 10px;
    }

	.section-btn{
        text-align: left;
        margin-top: 15px;
	}

	.hero{
        min-height: auto;
    }

    .about-us-image-box,
    .about-us-image,
    .about-us-image figure{
        height: auto;
    }

    .about-us-image img{
        height: auto;
        aspect-ratio: 1 / 0.6;
    }

    .about-us-content-box{
        margin-top: 30px;
    }

	.who-we-content{
		margin-bottom: 40px;
	}

    .who-we-image-box{
        max-width: 800px;
        margin: 8px auto 32px;
    }

	.who-we-image-box-1 .who-we-image img{
		aspect-ratio: 1 / 1.2;
	}

	.who-we-image-box-2 .who-we-image img{
		aspect-ratio: 1 / 0.9;
	}

    .intro-video{
        min-height: 550px;
    }

	.watch-video-circle img{
		max-width: 130px;
	}

	.project-item-image img{
		aspect-ratio: 1 / 1.2;
	}

	.our-fact-image-box{
		max-width: 700px;
		margin: 0 auto 30px;
	}

	.cta-box-content{
		height: auto;
		margin: 0 0 30px;
	}

	.faqs-content{
        position: initial;
        margin: 0 0 40px 0;
    }

    .company-supports-content hr{
        width: 33%;
    }

    .footer-header .section-title{
        max-width: 650px;
    }

    .about-footer{
        margin: 0 0 30px 0
    }

    .about-footer-content{
        margin-top: 15px;
    }
	
	.our-approach-images{
        max-width: 690px;
        margin: 0 auto 30px;
    }

    .our-history-content{
        position: initial;
        margin-bottom: 30px;
    }

    .explore-project-circle img{
        max-width: 120px;
    }

    .our-process-item-image figure{
        max-width: 250px;
    }

	.page-single-sidebar{
		margin: 0;
	}

	.sidebar-cta-body{
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

	.sidebar-cta-content h2{
		font-size: 26px;
	}
}

@media only screen and (max-width: 991px){

	.btn-default{
        padding: 15px 46px 15px 16px;
    }

	.btn-default::before{
		right: 16px;
		width: 22px;
		height: 22px;
	}
	
	header.main-header{
		top: 0px;
	}

	header.main-header .header-sticky{
		width: 100%;
		border-radius: 0;
	}
	
	header.main-header .header-sticky.active{
		width: 100%;
		border-radius: 0;
	}

	.navbar{
		padding: 20px 0;
	}

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.header-btn{
		display: none;
	}

	.bg-section{
		width: 100%;
		border-radius: 0;
		margin: 0;
	}

	.section-row{
		margin-bottom: 40px;
	}
	
	.section-title{
		margin-bottom: 30px;
	}

	.section-title .section-sub-title{
		padding: 6px 12px 6px 26px;
		margin-bottom: 10px;
	}

	.section-title .section-sub-title::before{
		left: 12px;
		width: 6px;
		height: 6px;
	}

	.section-title h1{
		font-size: 46px;
	}

	.section-title h2{
		font-size: 38px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.hero{
        padding: 140px 0 50px;
        margin-top: 0;
    }

    .about-us{
        padding: 50px 0;
    }

    .about-us-circle{
        top: 20px;
        left: 20px;
    }

    .about-us-circle img{
        max-width: 120px;
    }

    .about-counter-item h2{
        font-size: 38px;
    }

    .our-service{
        padding: 50px 0;
    }

    .service-item{
		padding: 20px;
    }

    .service-item-body .icon-box{
        height: 50px;
        width: 50px;
    }

    .service-item-body .icon-box img{
        max-width: 24px;
    }

	.service-item-btn{
		margin-top: 20px;
		padding-top: 20px;
	}

    .section-footer-text{
		margin-top: 10px;
	}

	.section-footer-text ul{
		margin-top: 10px;
	}

	.section-footer-text ul li{
		font-size: 18px;
		margin-right: 5px;
	}

	.section-footer-text ul li i{
		font-size: 16px;
	}

	.who-we-are{
		padding: 80px 0;
	}

	.who-we-content{
		margin-bottom: 30px;
	}

	.who-we-nav{
		margin-bottom: 30px;
	}

	.who-we-nav ul li .nav-link{
		padding-bottom: 20px;
		gap: 10px;
	}

	.who-we-tab-header-content p{
		margin-top: 10px;
	}

	.who-we-item-list{
		margin-top: 30px;
	}

	.who-we-item{
		gap: 10px;
	}

	.who-we-item .icon-box img{
		max-width: 28px;
	}

	.who-we-item-content{
		width: calc(100% - 38px);
	}

	.who-we-footer{
		margin-top: 30px;
		padding-top: 30px;
	}

    .intro-video{
		min-height: 450px;
        padding: 50px 0;
    }

	.commitment-item{
		padding: 20px;
	}

	.our-project{
		padding: 80px 0;
	}

	/* .project-item-content{
        right: 20px;
        bottom: 20px;
        left: 20px;
    } */
    .project-item-content {
        right: 20px;
        bottom: 20px;
        left: 32px;
    }
	.project-item-content ul{
		margin-bottom: 10px;
	}

	.our-fact{
		padding: 50px 0;
	}

	.cta-box{
		padding: 50px 0;
	}

	.cta-form-box{
        padding: 30px;
    }

	.cta-contact-form .form-control{
		padding: 12px 15px;
	}

	.our-faqs{
        padding: 50px 0;
    }

	.faqs-content{
		margin-bottom: 30px;
	}

	.faq-client-box{
		margin-top: 30px;
		padding-top: 30px;
	}

    .faq-accordion .accordion-item{
        margin-bottom: 20px;
    }

    .faq-accordion .accordion-header .accordion-button{
        padding: 15px 40px 15px 15px;
    }

    .faq-accordion .accordion-item .accordion-body{
        padding: 15px;
    }

    .faq-accordion .accordion-item .accordion-button::after, 
    .faq-accordion .accordion-item .accordion-button.collapsed::after{
        right: 15px;
    }

    .our-testimonials{
        padding: 50px 0;
    }

    .testimonial-item{
        padding: 20px;
        min-height: initial;
    }

    .testimonial-item-author{
        padding-top: 20px;
        margin-top: 20px;
    }

    .company-supports-slider-box{
        margin-top: 40px;
    }

    .company-supports-content hr{
        width: 27%;
    }

    .company-supports-content{
        margin-bottom: 20px;
    }

    .post-featured-image{
        margin-bottom: 15px;
    }

    .post-item-content{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .main-footer{
        padding: 50px 0 0;
        margin-bottom: 0;
    }

    .footer-header{
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

	.footer-header .section-title{
		max-width: 100%;
	}

    .footer-social-links h3{
        margin-bottom: 15px;
    }

    .footer-links{
        max-width: 40%;
    }

    .footer-links h3{
        margin-bottom: 20px;
    }

	.footer-links p{
		margin-bottom: 20px;
	}

    .footer-links ul li{
        margin-bottom: 10px;
    }

    .footer-newsletter-form .form-group{
        margin-top: 20px;
    }

    .footer-newsletter-form .form-group .form-control{
        width: calc(100% - 40px);
    }

    .footer-newsletter-form .form-group .newsletter-btn{
        width: 40px;
        height: 40px;
    }

    .footer-newsletter-form .form-group .newsletter-btn i{
        font-size: 18px;
    }

    .footer-copyright{
        margin-top: 30px;
        padding: 30px 0;
    }

	.page-header{
        margin-top: 0;
		padding: 180px 0 90px;
	}
    
	.page-header-box h1{
        font-size: 44px;
	}
    
    .our-approach{
        padding: 50px 0;
    }

    .our-history{
        padding: 50px 0;
    }
    
    .history-item-header h2{
        font-size: 38px;
    }

    .our-team{
        padding: 50px 0;
    }

    .team-item-image img{
        max-width: 200px;
    }

    .our-process{
        padding: 50px 0;
    }

	.our-process-item{
		gap: 20px;
		padding: 20px;
	}

    .our-process-item-number{
        padding-bottom: 20px;
    }

    .our-process-item-number h2{
        font-size: 38px;
    }

    .our-process-item.box-2 .our-process-item-number{
        margin-bottom: 20px;
    }   

    .our-process-item-content p{
        margin: 10px 0 0;
    }.page-single-sidebar{
		margin-bottom: 30px;
	}

	.sidebar-cta-image img{
		aspect-ratio: 1 / 0.85;
	}

    .page-blog{
		padding: 50px 0;
	}

	.page-pagination{
		margin-top: 10px;
	}

    .contact-form{
        padding: 30px;
    }

    .contact-form .form-control{
        padding: 13px 15px;
    }

    .error-page{
		padding: 50px 0px;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}
    .logo-01 {
        width: 40%;
    }
     .logo-02{
        width: 40%;
    }
        .project-item-play {
        top: 40%;
    }
}

@media only screen and (max-width: 767px){

	.section-row{
		margin-bottom: 30px;
	}

    .section-title h1 {
        font-size: 40px;
    }

	.section-title h2{
		font-size: 26px;
	}

    .about-us-image img{
        aspect-ratio: 1 / 0.782;
    }

    .about-us-circle img{
        max-width: 90px;
    }

    .about-us-item{
        width: 100%;
    }

    .about-us-item-content h3{
        font-size: 18px;
    }

    .about-us-item-content p{
        margin: 5px 0 0;
    }

    .about-counter-item-list{
        gap: 20px;
    }

    .about-counter-item{
        width: calc(50% - 10px);
    }

    .about-counter-item h2{
        font-size: 26px;
    }

	.about-counter-item p{
		font-size: 14px;
	}

	.service-item{
		min-height: 310px;
	}

    .service-item-content h2{
        font-size: 18px;
    }

	.service-item-btn .readmore-btn{
		padding-right: 30px;
	}

    .service-item-btn .readmore-btn::before{
        height: 22px;
        width: 22px;
        background-size: 14px auto;
    }

    .satisfy-client-image figure img{
		max-width: 38px;
	}

	.satisfy-client-image.add-more{
		width: 40px;
		height: 40px;
	}

	.satisfy-client-image.add-more h3,
	.satisfy-client-image.add-more i{
		font-size: 18px;
	}

	.who-we-nav ul li .nav-link img{
		max-width: 26px;
	}

	.who-we-tab-header-content h3,
	.who-we-item-content h3{
		font-size: 18px;
	}

	.who-we-item-list{
		gap: 20px;
	}

	.who-we-item{
		width: 100%;
	}

	.who-we-footer{
		gap: 20px;
	}

	.about-us-conatct-content h3{
		font-size: 18px;
	}

	.who-we-image-box-1,
	.who-we-image-box-2{
		width: 100%;
	}

	.who-we-image-box-1{
		position: relative;
	}

	.who-we-image-box-1 .who-we-image img{
		aspect-ratio: 16 / 9;
	}

	.who-we-image-box-2 .who-we-image img{
		aspect-ratio: 16 / 9;
	}

	.who-we-image-box-2 .who-we-cta-box{
		display: none;
	}

	.who-we-image-box-1 .who-we-cta-box-mobile{
		display: block;
		position: absolute;
		bottom: 16px;
		left: 16px;
		right: 16px;
		margin: 0;
		z-index: 2;
	}

	.intro-video{
		align-content: center;
		text-align: center;
	}

    .watch-video-circle{
		text-align: center;
        margin-top: 30px;
    }

    .watch-video-circle img{
        max-width: 100px;
    }

	.project-item-content h2{
		font-size: 18px;
	}

	.our-fact-image-box-1{
		width: 100%;
		margin-bottom: 20px;
	}

	.our-fact-image-box-2{
		width: 100%;
		padding: 0;
	}

	.our-fact-image-box-2 .our-fact-image{
		margin-left: 0;
	}

    .cta-item-box-list{
        gap: 20px;
    }

    .cta-box-item:last-child{
        border-top: none;
        padding-top: 0px;
    }

	.cta-box-item-content h3{
		font-size: 18px;
	}

	.cta-form-box{
		padding: 20px;
	}

	.faq-client-box-content{
        max-width: 100%;
    }

    .faq-accordion .accordion-header .accordion-button{
        padding: 12px 34px 12px 12px;
    }

    .faq-accordion .accordion-item .accordion-button::after, 
    .faq-accordion .accordion-item .accordion-button.collapsed::after{
        font-size: 16px;
        right: 12px;
    }

    .faq-accordion .accordion-item .accordion-body{
        padding: 12px;
    }

    .testimonial-author-content h3{
        font-size: 18px;
    }

    .company-supports-content hr{
        display: none;
    }

    .company-supports-content{
        justify-content: center;
    }

	.post-item-content h2{
        font-size: 18px;
    }

    .footer-social-links h3{
        font-size: 18px;
    }

    .footer-links{
        max-width: 100%;
    }

    .footer-links h3{
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-copyright{
        padding: 15px 0;
    }

	.page-header-box h1{
        font-size: 28px;
	}
    
    .our-approach-images::before{
        bottom: 50px;
		width: 210px;
		height: 220px;
    }
    
    .our-approach-image-box-2{
        padding-bottom: 80px;
    }
    
    .our-approach-image-box-2 .our-approach-image figure{
        margin-left: -150px;
    }

	.approach-item-box{
		gap: 20px;
	}
    
    .approach-item{
        width: 100%;
    }

	.approach-item:last-child{
		border-top: none;
		padding-top: 0;
	}
    
    .approach-item-content h3{
        font-size: 18px;
    }
    
    .approach-item-content p{
        margin: 5px 0 0;
    }
    
    .explore-project-circle img{
        max-width: 90px;
    }
    
    .history-item{
        width: 100%;
        padding: 20px;
    }
    
    .history-item-header h2{
        font-size: 26px;
    }
    
    .history-item-content{
        margin-top: 15px;
        padding-top: 15px;
    }
    
    .history-item-content h3{
        font-size: 18px;
    }

	.history-item-content p{
		margin: 5px 0 0;
	}

	.history-item-image figure{
		margin-bottom: -150px;
	}

    .team-item{
        padding: 20px 20px 0;
    }

    .team-item-content h2{
        font-size: 18px;
    }

    .team-item-content p{
        margin: 5px 0 0;
    }

    .our-process-item-number h2{
        font-size: 26px;
    }

    .our-process-item-content h3{
        font-size: 18px;
    }

    .our-process-item-content ul{
        margin-top: 20px;
    }

    .our-process-item-content ul li{
        padding: 8px 14px 8px 28px;
    }	

	.sidebar-cta-image img{
		aspect-ratio: 1 / 1.145;
	}

	.sidebar-cta-content,
	.sidebar-cta-btn{
		margin-top: 20px;
	}
	
	.sidebar-cta-content h2{
        font-size: 22px;
    }

	.skills-progress-bar{
		width: 100%;
	}

	.contact-form{
		padding: 20px;
	}

	.contact-form label{
		margin-bottom: 10px;
	}	
    .logo-01 {
        width: 68%;
    }
        .logo-02 {
        width: 34%;
    }
     .project-item-play {
        top: 24%;
    }
    .who-we-are-box-crop{
    width: 100%;
    justify-content: center;
    margin: auto;
    }
.video-sustainable-development{
    width: 100%;
    justify-content: center;
    margin: auto; 
   }
}


@media only screen and (max-width:515px){
    .section-title h1{
        font-size: 32px;
    }
    .logo-01 {
        width: 80%;
    }
    .logo-02 {
        width: 50%;
    }
    .project-item-play {
        top: 40%;
    }
        .section-title h1 {
        font-size: 38px;
    }
}


@media only screen and (max-width:414px){
     .project-item-play {
        top: 24%;
    }
     .who-we-are-box-crop{
        width: 100%;
    }
        .logo-02 {
        width: 70%;
    }
}
@media only screen and (max-width:375px){
    .section-title h1 {
        font-size: 32px;
    }
 }
/************************************/
/***   34. Home - Version 2 css	  ***/
/************************************/

/* .dark-section.dark-section-prime{
    background-image: url('../images/dark-section-bg-image-prime.png');
} */

.hero-prime {
    position: relative;
    padding: 250px 0 0;
    margin: 0px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
}

/* .hero-prime.dark-section.dark-section-prime{
    background-image: url('../images/hero-bg-image-prime.jpg');
} */

.hero-prime::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    opacity: 50%;
    z-index: 1;
}

.hero-prime .container{
    position: relative;
    z-index: 2;
}

.hero-content-prime {
    text-align: center;
    max-width: 1300px;
    /* margin: 0 auto ; */
    margin: 0 auto 240px;
}

.hero-btn-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.contact-us-circle-prime a{
    display: inline-block;
    border-radius: 50%;
}

.contact-us-circle-prime img{
    width: 100%;
    max-width: 120px;
    border-radius: 50%;
    animation: infiniterotate 20s infinite linear;
}

.contact-us-circle-prime a:hover img{
    animation-play-state: paused;
}

.about-us-prime{
    padding: 100px 0 100px ;
}

.about-us-image-box-prime{
    display: flex;
    flex-wrap: wrap;
}

.about-us-image-box-1-prime{
    position: relative;
    background: url('../images/about-image-bg-shape-prime.png') no-repeat;
    background-position: bottom 50px left 140px;
    background-size: 135px auto;
    width: 78%;
    padding-bottom: 130px;
}

.about-us-image-prime figure{
    position: relative;
    display: block;
    border-radius: 20px;
    z-index: 0;
}

.about-us-image-prime img{
    width: 100%;  
    object-fit: cover;
    border-radius: 20px;
}

.about-us-image-box-1-prime .about-us-image-prime img{
    aspect-ratio: 1 / 0.891;
}

.about-us-image-box-2-prime{
    width: 22%;
    align-content: end;
}

.about-us-image-box-2-prime .about-us-image-prime{
    margin-left: -295px;
}

.about-us-image-box-2-prime .about-us-image-prime figure,
.about-us-image-box-1-prime .contact-us-circle-prime a{
    border: 6px solid var(--bg-color);
}

.about-us-image-box-2-prime .about-us-image-prime img{
    aspect-ratio: 1 / 0.748;
    border-radius: 10px;
}

.about-us-image-box-1-prime .contact-us-circle-prime{
    position: absolute;    
    top: 80px;
    right: 0;
    transform: translateX(50%);
    z-index: 1;
}

.about-us-body-item-prime{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.about-us-body-item-prime:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.about-us-body-item-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.about-us-body-item-prime:hover .icon-box{
	background: transparent;
}

.about-us-body-item-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-us-body-item-prime:hover .icon-box::before{
    transform: scale(1);
}

.about-us-body-item-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.about-us-body-item-prime:hover .icon-box img{
   filter: brightness(1) invert(1);
}

.about-body-item-content-prime{
    width: calc(100% - 75px);
}

.about-body-item-content-prime h3{
    font-size: 20px;
}

.about-body-item-content-prime p{
    margin: 10px 0 0;
}

.about-counter-item-list-prime{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.about-counter-item-prime{
    width: calc(50% - 15px);
    background: var(--white-color);
    border-radius: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 40px;
}

.about-counter-item-header-prime{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.about-counter-item-no-prime h2{
    font-size: 50px;
}

.about-counter-item-header-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.about-counter-item-prime:hover .about-counter-item-header-prime .icon-box{
	background: transparent;
}

.about-counter-item-header-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-counter-item-prime:hover .about-counter-item-header-prime .icon-box::before{
    transform: scale(1);
}

.about-counter-item-header-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 26px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.about-counter-item-prime:hover .about-counter-item-header-prime .icon-box img{
   filter: brightness(1) invert(1);
}

.about-counter-item-content-prime h3{
    font-size: 20px;
}

.about-counter-item-content-prime p{
    border-top: 1px solid var(--divider-color);
    margin: 15px 0 0;
    padding: 15px 0 0;
}

.service-item-prime{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: var(--bg-color);
    border-radius: 20px;
    min-height: 390px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-item-prime:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
	left: 0;
    background: var(--primary-color);
    width: 100%;
    height: 0;
    transition: all 0.4s ease-in-out;
}

.service-item-prime.active:before,
.service-item-prime:hover:before{
	top: auto;
	bottom: 0;
	height: 100%;
}

.service-item-prime .icon-box{
	position: relative;
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	transition: all 0.6s ease-in-out;
}

.service-item-prime.active .icon-box,
.service-item-prime:hover .icon-box{
	background: transparent;
}

.service-item-prime .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-item-prime.active .icon-box::before,
.service-item-prime:hover .icon-box::before{
    transform: scale(1);
}

.service-item-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-prime.active .icon-box img,
.service-item-prime:hover .icon-box img{
   filter: brightness(1) invert(1);
}

.company-supports-slider-prime{
    margin: 0 4.167vw;
}

.intro-video-prime{
    position: relative;
    min-height: 900px;
    align-content: end;
    padding: 100px 0;
    overflow: hidden;
}

.intro-video-prime.dark-section.dark-section-prime{
    background-image: url('../images/bg-sustainable-development.webp');
}

.intro-video-prime::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(4, 6, 24, 0.00) 0%, rgb(4 6 24 / 14%) 80%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.intro-video-prime .container{
    position: relative;
    z-index: 2;
}

.intro-video-content-prime{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.intro-video-content-prime .section-title {
    width: calc(70% - 15px);
    margin: 0;
}

.intro-video-circle-box-prime{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}

.video-play-button-prime a{
    position: relative;
    height: 120px;
    width: 120px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    transition: all 0.4s ease-in-out;
}

.video-play-button-prime a:hover{
    background-color: var(--white-color);
    color: var(--primary-color);
}

.video-play-button-prime a i{
    font-size: 24px;
    color: inherit;
    margin-left: 2px;
}

.intro-video-circle-box-prime .contact-us-circle-prime{
    margin-left: -20px;
}

.intro-video-list-prime{
    /* border-top: 1px solid var(--dark-divider-color); */
    margin-top: 60px;
    padding-top: 60px;
    border-top: var(--stroke-weight-1, 1px) solid var(--color-white-514, rgba(255, 255, 255, 0.51));

}

.intro-video-list-prime ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.intro-video-list-prime ul li{
    position: relative;
    width: calc(25% - 15px);
    line-height: 1.5em;
    color: var(--white-color);
    padding-left: 25px;
}

.intro-video-list-prime ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 7 Free';
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-secondary-color);
    top: 0;
    left: 0;
}

.testimonial-slider-prime .swiper-wrapper{
    cursor: none;
}

@media only screen and (max-width: 1440px){

    .about-us-image-box-1-prime .contact-us-circle-prime{
        top: 60px;
    }

    .about-counter-item-prime{
        padding: 30px;
    }

    .service-item-prime{
        min-height: 350px;
        padding: 30px 25px;
    }
}


@media only screen and (max-width: 1399px){
.about-counter-item-prime {
    min-height: 250px;

}
}




@media only screen and (max-width: 1199px){
.intro-video-content-prime .section-title {
    margin: 0;
    text-align: justify;
    width: calc(75% - 15px);
 }
}




@media only screen and (max-width: 1024px){
    
    .hero-prime{
        padding-bottom: 50px;
    }

    .about-us-image-box-prime{
        max-width: 800px;
        margin: 0 auto 30px;
    }

    .service-item-prime{
        min-height: initial;
    }

    .company-supports-slider-prime{
        margin: 0;
    }

    .intro-video-content-prime .section-title{
        width: 100%;
    }

    .intro-video-list-prime ul li{
        width: calc(50% - 10px);
    }
        .intro-video-content-prime .section-title {
        text-align: center;
  
    }
    .video-play-button-prime a {
    margin: 80px 0;
    }
}

@media only screen and (max-width: 991px){

    .hero-content-prime {
        text-align: center;
        margin: 100px auto 120px;
    }
    
    .hero-prime{
        padding: 140px 32px 50px;
        margin: 0;
    }

    .contact-us-circle-prime img{
        max-width: 100px;
    }

    .about-us-prime{
        padding: 80px 0px 80px;
    }

    .about-us-image-box-1-prime{
        padding-bottom: 100px;
    }

    .about-us-body-item-prime{
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .about-us-body-item-prime .icon-box,
    .about-counter-item-header-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .about-us-body-item-prime .icon-box img,
    .about-counter-item-header-prime .icon-box img{
        max-width: 24px;
    }

    .about-body-item-content-prime{
        width: calc(100% - 65px);
    }

    .about-counter-item-list-prime{
        margin-top: 30px;
    }

    .about-counter-item-no-prime h2{
        font-size: 38px;
    }

    .service-item-prime .icon-box{
        width: 50px;
        height: 50px;
    }

    .service-item-prime .icon-box img{
        max-width: 24px;
    }

    .intro-video-prime {
        padding: 80px 0;
        min-height: auto;
    }
    .video-play-button-prime a{
        width: 100px;
        height: 100px;
    }

    .video-play-button-prime a i{
        font-size: 20px;
    }
   .video-play-button-prime a {
    position: relative;
    width: 100px;
    height: 100px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    transition: all 0.4s ease-in-out;
}
    .intro-video-list-prime{
        margin-top: 30px;
        padding-top: 30px;
    }

    .intro-video-list-prime ul li::before{
        font-size: 16px;
    }
}

@media only screen and (max-width: 767px){

    .about-us-image-box-1-prime,
    .about-us-image-box-2-prime{
        width: 100%;
    }

    .about-us-image-box-1-prime{
        background: transparent;
        padding-bottom: 20px;
    }

    .about-us-image-box-1-prime .contact-us-circle-prime{
        top: auto;
        left: 50%;
        transform: translate(-50%, 50%);
        right: auto;
        bottom: 10px;
    }

    .about-us-image-box-2-prime .about-us-image-prime{
        margin: 0;
    }

    .about-us-image-box-2-prime .about-us-image-prime figure{
        border: none;
    }

    .about-us-body-item-prime{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .about-body-item-content-prime{
        width: 100%;
    }

    .about-body-item-content-prime h3{
        font-size: 18px;
    }
    
    .about-counter-item-prime{
        width: 100%;
        padding: 20px;
        min-height: initial;
    }

    .about-counter-item-no-prime h2{
        font-size: 26px;
    }

    .about-counter-item-content-prime h3{
        font-size: 18px;
    }

    .service-item-prime{
        padding: 20px;
        gap: 20px;
    }

    .intro-video-list-prime ul{
        gap: 10px;
    }

    .intro-video-list-prime ul li{
        width: 100%;
    }
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.about-us-metal{
    padding: 100px 0;
    
}

.about-us-image-box-metal{
    position: relative;
    height: 100%;
}

.about-us-image-metal{
    height: 100%;
}

.about-us-image-metal figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.about-us-image-metal img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.192;
    object-fit: cover;
    border-radius: 20px;
}

/* หน้าหลัก: section "A&T ผู้เชี่ยวชาญงานก่อสร้าง..." ที่จอ 1199px ลงมา (d-xl-none, banner-about2.webp) ให้ภาพชิดด้านบน */
@media only screen and (max-width: 1199px){
    .about-us-image-metal img{
        object-position: top;
    }
}

.about-cta-box-metal{
    width: 340px;
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: var(--divider-color);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px;
}

.about-cta-header-metal{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 10px;
}

.about-cta-counter-item-metal{
    width: calc(100% - 50px);
}

.about-cta-counter-item-metal h2{
    font-size: 50px;
    font-weight: 500;
    line-height: 1em;
    color: var(--white-color);
}

.about-cta-counter-item-metal p{
    color: var(--white-color);
    margin: 10px 0 0 0;
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-Semibold, 500);

}

.about-cta-header-metal .satisfy-client-image img{
    max-width: 34px;
}

.about-cta-header-metal .satisfy-client-image.add-more{
    width: 36px;
    height: 36px;
}

.about-cta-header-metal .satisfy-client-image.add-more i{
    font-size: 16px;
}

.about-cta-body-metal{
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 20px;
    padding-top: 20px;
}

.about-cta-body-metal p{
    color: var(--white-color);
    margin: 10px 0 0;
}

.about-us-content-metal{
    height: 100%;
    align-content: center;
    margin-left: 15px;
}

.about-us-body-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.about-body-item-list-metal{
    width: calc(100% - 380px);
}

.about-body-item-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.about-body-item-metal:last-child{
    margin-bottom: 0;
}

.about-body-item-metal .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
    transition: all 0.5s ease-in-out;
	overflow: hidden;
}

.about-body-item-metal:hover .icon-box{
    background-color: transparent;
}

.about-body-item-metal .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-body-item-metal:hover .icon-box:before{
	transform: scale(1);
}

.about-body-item-metal .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-body-item-metal:hover .icon-box img{
    filter: brightness(0) invert(0);
}

.about-body-item-content-metal{
	width: calc(100% - 75px);
}

.about-body-item-content-metal h3{
	font-size: 20px;
}

.about-body-item-content-metal p{
    margin: 10px 0 0;
}

.about-body-counter-box-metal{
    width: 350px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 30px;
border-radius: 20px;
background: linear-gradient(159deg, var(--color-blue-new-400, #245FB3) 8.15%, var(--color-blue-new-700, #183F77) 95.31%);
    border-radius: 20px;
    overflow: hidden;
}

.about-body-counter-image-metal,
.about-body-counter-item-metal{
    width: calc(50% - 5px);
}

.about-body-counter-image-metal{
    align-content: end;
}

.about-body-counter-image-metal figure{
    margin: -20px 0px -30px -70px;
}

.about-body-counter-image-metal img{
    width: 100%;
    object-fit: cover;
}

.about-body-counter-item-metal h2{
    font-size: 50px;
    font-weight: 500;
}

.about-body-counter-item-metal p{
    margin: 10px 0 0;
}

.about-us-footer-metal{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
	gap: 20px 30px;
	margin-top: 40px;
}

.about-us-contact-box-metal{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.about-us-contact-box-metal .icon-box{
    position: relative;
    background: var(--accent-secondary-color);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.about-us-contact-box-metal .icon-box::before{
    content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-us-contact-box-metal:hover .icon-box::before{
    transform: scale(1);
}

.about-us-contact-box-metal .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.about-us-contact-box-metal:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.about-us-conatct-content-metal p{
	margin: 0 0 5px;
}

.about-us-conatct-content-metal h3{
	font-size: 20px;
}

.about-us-conatct-content-metal h3 a{
	color: inherit;
    transition: all 0.4s ease-in-out;
}

.about-us-conatct-content-metal h3 a:hover{
	color: var(--accent-secondary-color);
}
.text-main-20{
text-align: center;
font-size: 20px;
font-weight: 500;
line-height: 120%; 
}
.our-services-metal{
    padding: 100px 0;
    position: relative;
    background-image: url('../images/banner-service-and-expertise.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.our-services-metal::before {
    content: '';
    position: absolute;
    inset: 0;
    /* background: rgba(4, 6, 24, 0.72); */
    z-index: 0;
}

.our-services-metal .container {
    position: relative;
    z-index: 1;
}

.service-item-metal{
    background-color: var(--bg-color);
    border-radius: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align:left;
    gap: 64px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    color: var(--white-color);

}
/* --------------------การ์ด-งานด้านการก่อสร้าง-----------------------*/
.service-item-metal.bg-service-Construction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10%; 
    height: 430px;
    min-height: var(--height-430, 430px);
    width: 100%;
    overflow: hidden; 
    position: relative;
    z-index: 1;
}
.service-item-metal.bg-service-Construction::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:url('../images/bg-service-a&t-construction.webp');
    background-size: cover;
    background-position:top center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease; 
    z-index: -1; 
}

.service-item-metal.bg-service-Construction:hover::before {
    transform: scale(1.2); /* ปรับค่าตัวเลขเพื่อเพิ่ม/ลดระยะการซูม */
}
/* --------------------End-การ์ด-งานด้านการก่อสร้าง-----------------------*/

/* --------------------การ์ด-งานตกแต่งภายใน-----------------------*/
.service-item-metal.bg-service-Interior-work {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10%; 
    height: 430px;
    min-height: var(--height-430, 430px);
    width: 100%;
    overflow: hidden; 
    position: relative;
    z-index: 1;
}
.service-item-metal.bg-service-Interior-work::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:url('../images/bg-service-a&t-Interior-work.webp');
    background-size: cover;
    background-position:top center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease; 
    z-index: -1; 
}

.service-item-metal.bg-service-Interior-work:hover::before {
    transform: scale(1.2); /* ปรับค่าตัวเลขเพื่อเพิ่ม/ลดระยะการซูม */
}
/* --------------------End-การ์ด-งานตกแต่งภายใน-----------------------*/

/* --------------------การ์ด-งานเทิร์นคีย์-----------------------*/
.service-item-metal.bg-service-turn-key {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10%; 
    height: 430px;
    min-height: var(--height-430, 430px);
    width: 100%;
    overflow: hidden; 
    position: relative;
    z-index: 1;
}
.service-item-metal.bg-service-turn-key::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:url('../images/bg-service-a&t-turn-key.webp');
    background-size: cover;
    background-position:top center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease; 
    z-index: -1; 
}

.service-item-metal.bg-service-turn-key:hover::before {
    transform: scale(1.2); /* ปรับค่าตัวเลขเพื่อเพิ่ม/ลดระยะการซูม */
}
/* --------------------End-การ์ด-งานเทิร์นคีย์-----------------------*/

/* --------------------การ์ด-งานการร่วมลงทุนกับภาครัฐและเอกชน-----------------------*/
.service-item-metal.bg-service-public-private-partnership {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10%; 
    height: 430px;
    min-height: var(--height-430, 430px);
    width: 100%;
    overflow: hidden; 
    position: relative;
    z-index: 1;
}
.service-item-metal.bg-service-public-private-partnership::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:url('../images/bg-service-a&t-public-private-partnership.webp');
    background-size: cover;
    background-position:top center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease; 
    z-index: -1; 
}

.service-item-metal.bg-service-public-private-partnership:hover::before {
    transform: scale(1.2); /* ปรับค่าตัวเลขเพื่อเพิ่ม/ลดระยะการซูม */
}
/* --------------------End-การ์ด-งานการร่วมลงทุนกับภาครัฐและเอกชน-----------------------*/









.service-item-body-metal{
    /* border-top: 1px solid var(--divider-color); */
	padding-top: 30px;
}
/* ── LOGO STACK ─────────────────────────────────────────────── */
.logo-stack { display: flex; flex-direction: column; align-items: flex-start; }
.logo-stack .li { width: 52px; }
.logo-stack .lt { width: 266px; margin-top: 3px; }
.logo-stack.sm .li { width: 40px; }
.logo-stack.sm .lt { width: 160px; }
/* ////////////////////////////////// */
.service-item-header-metal .icon-box{
    position: relative;
    height: 60px;
    width: 60px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}
.logo-stack.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.service-item-metal:hover .service-item-header-metal .icon-box{
    background-color: transparent;
}

.service-item-header-metal .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item-metal:hover .service-item-header-metal .icon-box::before{
    transform: scale(1);
}

.service-item-header-metal .icon-box img{
    position: relative;
    width: 100%;
    max-width: 30px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-metal:hover .service-item-header-metal .icon-box img{
    filter: brightness(1) invert(1);
}

.service-item-content-metal h2{
    color: var(--Text-White-Color); 
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-Semibold, 600);
    line-height: 150%; /* 27px */
}

.service-item-content-metal h2 a{
    color: inherit;
}

.service-item-content-metal p{
    margin: 10px 0 0;
    color: var(--white-color);
}

.service-item-btn-metal{
    margin-top: 40px;
    border-top: var(--stroke-weight-1, 1px) solid var(--foundation-black-light-active, #B6B6B6);
    padding-top: 30px;  
}

.service-item-btn-metal .readmore-btn{
    padding-right: 35px;
    transition: all 0.4s ease-in-out;
}

.service-item-btn-metal .readmore-btn::before{
    height: 26px;
    width: 26px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    background-size: 16px auto;
}

.video-play-button-metal a{
	position: relative;
	height: 70px;
	width: 70px;
    fill: linear-gradient(180deg, var(--color-blue-50, rgba(4, 6, 24, 0.00)) 50%, var(--color-blue-580, rgba(4, 6, 24, 0.80)) 92.5%);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button-metal:hover a{
	/* background: var(--primary-color); */
    background: rgb(255 255 255 / 59%);
    border-radius: 50%;
}

.video-play-button-metal a.bg-effect:before,
.video-play-button-metal a.bg-effect:after{
	content: '';
	position: absolute;
	top: -36%;
	left: -36%;
	width: 100%;
	height: 100%;
	border: 60px solid var(--white-color);
	opacity: 50%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button-metal a.bg-effect:after{
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button-metal a i{
	font-size: 24px;
	color: var(--primary-color);
	margin-left: 2px;
	transition: all 0.3s ease-in-out;
}

.video-play-button-metal:hover a i{
	color: var(--white-color);
}

.who-we-are-metal{
    padding: 100px 0;
  background: var(--color-blue-new-100, #DFE9F7);


}

.who-we-are-image-box-metal{
    position: relative;
    padding: 0 90px 90px 0;
    margin-right: 20px;
}

.who-we-are-image-metal figure{
    display: block;
    border-radius: 20px;
}

.who-we-are-image-metal img{
    width: 100%;
    aspect-ratio: 1 / 0.999;
    object-fit: cover;
    border-radius: 20px;
}

.who-we-are-skills-box-metal{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 360px;
    background: var(--white-color);
    border-radius: 20px;
    padding: 30px;
}

.who-we-are-skills-title-metal{
    margin-bottom: 30px;
}

.who-we-are-skills-title-metal h3{
    font-size: 20px;
}

.who-we-are-skills-list-metal .skills-progress-bar{
    width: 100%;
    margin-bottom: 20px;
}

.who-we-are-skills-list-metal .skills-progress-bar:last-child{
    margin-bottom: 0;
}

.who-we-are-body-box-metal{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.who-we-are-body-item-metal{
    width: calc(33.33% - 20px);
    background: var(--white-color);
    border-radius: 20px;
    text-align: center;
    padding: 30px;
}

.who-we-are-body-item-metal .icon-box{
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.who-we-are-body-item-metal:hover .icon-box{
    background: transparent;
}

.who-we-are-body-item-metal .icon-box::before{
   	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accent-secondary-color);
    border-radius: 100px;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
	z-index: 0;
}

.who-we-are-body-item-metal:hover .icon-box::before{
    transform: scale(1);
}

.who-we-are-body-item-metal .icon-box img{
    position: relative;
	width: 100%;
	max-width: 24px;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

.who-we-are-body-item-metal:hover .icon-box img{
    filter: brightness(0) invert(0);
}

.who-we-are-body-content-metal h3{
    font-size: 16px;
    line-height: normal;
}

.who-we-are-footer-box-metal{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
    border-top: 1px solid var(--divider-color);
	margin-top: 40px;
    padding-top: 40px;
}

.testimonial-slider-metal .swiper-wrapper{
    cursor: none;
}

.testimonial-slider-metal .testimonial-button-next-metal,
.testimonial-slider-metal .testimonial-button-prev-metal{
	position: relative;
	width: 40px;
	height: 40px;
	background-color: var(--bg-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider-metal .testimonial-button-next-metal:hover,
.testimonial-slider-metal .testimonial-button-prev-metal:hover{
	background: var(--accent-secondary-color);
}

.testimonial-slider-metal .testimonial-button-next-metal::before,
.testimonial-slider-metal .testimonial-button-prev-metal::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url('../images/arrow-primary.svg') no-repeat;
    background-position: center center;
	background-size: 20px auto;
	transform: rotate(225deg);
	transition: all 0.4s ease-in-out;
}

.testimonial-slider-metal .testimonial-button-next-metal::before{
	transform: rotate(45deg);
}
.service-btn{
    margin: 48px auto 0;
    text-align: center;
}
.company-supports-slider-box-metal{
    margin-top: 20px;
}

.company-supports-content-metal{
    display: flex;
    align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	text-align: center;
}

.company-supports-content-metal hr{
    height: 1px;
    width: 33%;
    color: rgba(255, 255, 255, 0.51);
    opacity: 1;
    margin: 0;
}

.company-supports-content-metal p{
    margin-bottom: 0;
}

.company-supports-slider-metal{
	margin: 0 4.167vw;
} 

.company-supports-logo-metal{
	text-align: center;
}

.company-supports-logo-metal img{
	width: 100px;
	max-width: 100px;
    height: 100px!important;
    display: flex;
    padding: 10px 19px 11px 18px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-16, 16px);
    background: var(--white-color);
}

@media only screen and (max-width: 1440px){

    .about-body-item-list-metal{
        width: calc(100% - 350px);
    }

    .about-body-counter-box-metal{
        width: 320px;
    }

    .service-item-metal{
        min-height: 370px;
        padding: 30px 25px;
    }

    .service-item-btn-metal{
        margin-top: 30px;
    }

    .who-we-are-body-item-metal{
        padding: 20px;
    }
    .service-item-metal {
    gap: 48px;
     }
}

@media only screen and (max-width: 1199px){
.logo-stack {
    align-items: center;
  }
  .about-us-image-box-metal {
    height: 544px;
    margin: 50px 0;
}
    .about-cta-box-metal {
        padding: 20px;
        bottom: 20px;
        left: 20px;
        text-align: left;
    }
        .service-item-metal {
        gap: 90px;
    }
}

@media only screen and (max-width: 1024px){

    .about-us-image-box-metal{
        margin-bottom: 30px;
    }

    .about-us-image-box-metal,
    .about-us-image-metal,
    .about-us-image-metal figure,
    .about-us-image-metal img{
        height: auto;
    }

    .about-us-image-metal img{
        aspect-ratio: 1 / 0.7;
    }

    .about-us-content-metal{
        height: auto;
        margin: 0;
    }

    .who-we-are-image-box-metal{
        padding: 0 50px 50px 0;
        margin: 0 0 30px;
    }

    .company-supports-slider-metal{
        margin: 0;
    }

}

@media only screen and (max-width: 991px){

    .about-us-metal {
        padding: 80px 0;
    }

    .about-cta-box-metal{
        padding: 20px;
        bottom: 20px;
        left: 20px;
    }

    .about-cta-counter-item-metal h2{
        font-size: 38px;
    }

    .about-us-body-metal{
        margin-top: 30px;
        padding-top: 30px;
    }

    .about-body-item-metal .icon-box{
        height: 50px;
        width: 50px;
    }

    .about-body-item-metal .icon-box img{
        max-width: 24px;
    }

    .about-body-item-content-metal{
        width: calc(100% - 65px);
    }

    .about-body-counter-box-metal{
        padding: 20px;
    }

    .about-body-counter-item-metal h2{
        font-size: 38px;
    }

    .about-us-footer-metal{
        margin-top: 30px;
    }
    .about-us-image-box-metal, .about-us-image-metal, .about-us-image-metal figure, .about-us-image-metal img {
        height: 390px!important;
    }
    .our-services-metal{
        padding: 80px 0;
    }

    .service-item-metal{
        min-height: initial;
        gap: 80px;
        padding: 20px;
    }

    .service-item-header-metal .icon-box{
        height: 50px;
        width: 50px;
    }

    .service-item-header-metal .icon-box img{
        max-width: 24px;
    }

    .service-item-body-metal{
       padding-top: 20px;
    }

    .service-item-btn-metal{
        margin-top: 20px;
    }

    .video-play-button-metal a{
        width: 60px;
        height: 60px;
    }

    .video-play-button-metal a i{
        font-size: 20px;
    }

    .video-play-button-metal a.bg-effect:before,
    .video-play-button-metal a.bg-effect:after{
        border-width: 50px;
        top: -33%;
        left: -33%;
    }

    .who-we-are-metal{
        padding: 80px 0;
    }

    .who-we-are-skills-box-metal{
        padding: 20px;
    }

    .who-we-are-footer-box-metal{
        margin-top: 30px;
        padding-top: 30px;
    }

    .company-supports-slider-box-metal{
        margin-top: 50px;
    }

    .company-supports-content-metal{
        margin-bottom: 20px;
    }

    .company-supports-content-metal hr{
        width: 26%;
    }
}

@media only screen and (max-width: 767px){

    .about-us-image-metal img{
        aspect-ratio: 1 / 1.192;
    }

    .about-cta-counter-item-metal h2{
        font-size: 26px;
    }

    .about-body-item-list-metal{
        width: 100%;
    }

    .about-body-item-content-metal h3{
        font-size: 18px;
    }

    .about-body-item-content-metal p{
        margin-top: 5px;
    }

    .about-body-counter-box-metal{
        width: 100%;
        height: 240px;
    }

    .about-body-counter-item-metal h2{
        font-size: 26px;
    }

    .about-us-footer-metal{
        gap: 20px;
    }

    .about-us-contact-box-metal{
        gap: 10px;
    }

    .about-us-conatct-content-metal h3{
        font-size: 18px;
    }
    .about-us-btn-metal{
        margin: auto;
    }
    .service-item-content-metal h2{
        font-size: 18px;
    }

    .who-we-are-image-box-metal{
        padding: 0;
    }

    .who-we-are-skills-box-metal{
        position: initial;
        width: 100%;
        margin-top: 20px;
    }

    .who-we-are-skills-title-metal{
        margin-bottom: 20px;
    }

    .who-we-are-skills-title-metal h3{
        font-size: 18px;
    }

    .who-we-are-body-box-metal{
        gap: 20px;
    }

    .who-we-are-body-item-metal{
        width: calc(50% - 10px);
        padding: 15px;
    }

    .who-we-are-body-item-metal .icon-box{
        margin-bottom: 20px;
    }

    .who-we-are-footer-box-metal{
        gap: 20px;
    }

    .company-supports-slider-box-metal{
        margin-top: 30px;
    }
    
    .company-supports-content-metal hr{
        width: 0;
    }

    .company-supports-logo-metal img{
        max-width: 160px;
        height: 34px;
    }
}

@media only screen and (max-width: 515px){
    .hero-prime {
        padding: 140px 0px 50px;
        margin: 0px;
    }
           .service-item-metal{
        gap: 100px;
   
    }
}

@media only screen and (max-width: 414px) {
    .section-title h1 {
        font-size: 36px;
    }
        .about-cta-box-metal{
        /* position: initial;
        width: 100%;
        background-color: var(--primary-color);
        margin-top: 20px; */
        display: none;
    }
       .service-item-metal{
        gap: 64px;
   
    }
}

/* ═══════════════════════════════════════════
   BOARD PAGE — Sidebar Tab + Card Grid
═══════════════════════════════════════════ */

/* Sidebar Navigation */
.board-sidebar {
	background: var(--white-color, #ffffff);
	border-radius: 20px;
	padding: 40px 30px;
	border: 1px solid var(--color-grey-50, #eaeaea);
	margin-bottom: 30px;
	position: sticky;
	top: 100px;
}
.page-single-sidebar {
	position: sticky;
	top: 100px;
}
.board-sidebar-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text-primary, #212529);
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--at-orange, #ff7f26);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.board-sidebar-title .arrow {
	font-size: 20px;
	color: var(--at-orange, #ff7f26);
}
.board-sidebar-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.board-sidebar-nav li {
	border-bottom: 1px solid var(--color-grey-50, #eaeaea);
}
.board-sidebar-nav li:last-child {
	border-bottom: none;
}
.board-sidebar-nav li a {
	display: block;
	padding: 16px 0;
	font-size: 16px;
	font-weight: 400;
	color: var(--color-text-primary, #212529);
	text-decoration: none;
	transition: all 0.3s ease;
}
.board-sidebar-nav li a:hover,
.board-sidebar-nav li.active a {
	color: var(--at-orange, #ff7f26);
	font-weight: 600;
	padding-left: 0px;
}

/* Tab Panel */
.board-panel { display: none; }
.board-panel.active { display: block; }

/* Team Card — Image top, name bottom */
.board-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 0;
	transition: all 0.4s ease;
	border: 1px solid var(--color-grey-50, #eaeaea);
	height: auto;
	display: flex;
	flex-direction: column;
}
.board-card:hover {
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	border-color: var(--at-orange, #ff7f26);
	transform: translateY(-4px);
}
.board-card-image {
	overflow: hidden;
	flex-shrink: 0;
	padding: 30px 30px 0 30px;
}
.board-card-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
	border-radius: 12px 12px 0 0;
}
.board-card:hover .board-card-image img {
	transform: scale(1.05);
}

/* Special Card with Background (All cards now use this) */
.board-card-wrapper {
	margin-bottom: 50px;
}
.board-card-special {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--color-grey-50, #eaeaea);
	transition: all 0.4s ease;
	margin-bottom: 0;
	height: auto;
}
/* .board-card-special::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(4, 6, 24, 0) 0%, rgba(4, 6, 24, 0.7) 100%);
	z-index: 1;
	border-radius: 16px;
} */
.board-card-special::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(4, 6, 24, 0) 0%, rgb(4 6 24 / 25%) 100%);
    z-index: 1;
    border-radius: 16px;
}
.board-card-special .board-card-image {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding: 30px 30px 0 30px;
}
.board-card-special .board-card-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
	border-radius: 12px 12px 0 0;
}

.board-card-image-placeholder {
	position: relative;
}

.board-card-image-placeholder img {
	filter: saturate(.65) contrast(.95);
}

.board-card-special:hover {
	border-color: var(--at-blue, #183f77);
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.board-card-special:hover .board-card-image img {
	transform: scale(1.05);
}

/* Text outside card for all cards */
.board-card-text {
	text-align: left;
	padding: 20px 10px 0;
}
.board-card-text h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text-primary, #212529);
	margin: 0 0 8px;
	line-height: 1.4;
}
.board-card-text p {
	position: relative;
	font-size: 16px;
	font-weight: 300;
	color: var(--color-grey-700, #585960);
	margin: 0;
	line-height: 1.5;
	padding-left: 20px;
}
.board-card-text p::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	background: var(--at-orange, #ff7f26);
	border-radius: 50%;
}

/* Individual Background Images for Each Card */
/* Background images are set via inline style in HTML */

/* Board Page Responsive */
@media (max-width: 991.98px) {
    .board-sidebar {
        position: static;
        margin-bottom: 40px;
        padding: 8px 24px;
        border-radius: 60px;
    }
	.board-sidebar-nav {
		display: flex;
		gap: 0;
	}
	.board-sidebar-nav li {
		flex: 1;
		border-bottom: none;
		border-right: 1px solid var(--color-grey-50, #eaeaea);
	}
	.board-sidebar-nav li:last-child {
		border-right: none;
	}
	.board-sidebar-nav li a {
		text-align: center;
		padding: 12px 8px;
		font-size: 15px;
	}
	.board-sidebar-title {
		display: none;
	}
}
@media (max-width: 575.98px) {
}


/* ============================================================
   VISION & MISSION PAGE — Custom Styles
   ============================================================ */

/* ── Section Sub-title Badge (violet pill) ── */
.vm-sub-badge {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--at-violet-100, #e4dcea);
	border-radius: 100px;
	padding: 8px 16px 9px 32px;
	font-size: 16px;
	font-weight: 300;
	color: #212529;
	position: relative;
	margin-bottom: 20px;
}
.vm-sub-badge::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--at-orange, #ff7f26);
}

/* ── Vision Hero Banner ── */
.vm-vision-section {
	padding: 80px 0 100px;
}
.vm-vision-title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #212529;
	text-align: center;
	margin-bottom: 50px;
}
.vm-vision-banner {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	min-height: 580px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vm-vision-banner-bg {
	position: absolute;
	inset: 0;
	background-image: url('../images/bg-vision.webp');
	background-size: cover;
	background-position: top center;
	background-attachment: scroll;
	border-radius: 20px;
}
.vm-vision-banner-overlay {
	position: absolute;
	inset: 0;
	border-radius: 20px;
}
.vm-vision-banner-text {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 80px 40px;
}
.vm-vision-banner-text p {
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	text-transform: uppercase;
	margin: 0;
}

/* ── Mission Section ── */
.vm-mission-section {
    padding: 0px 0 100px;
    background: #fff;
}
.vm-mission-title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #212529;
	margin-bottom: 40px;
}

/* ── Mission content padding (desktop) ── */
.vm-mission-content-pad {
	padding-left: 30px;
}

/* Mission items */
.vm-mission-items {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.vm-mission-item-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(4,6,24,0.10);
	margin-bottom: 40px;
}
.vm-mission-item-row:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.vm-mission-item {
	flex: 1 1 280px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.vm-mission-icon {
	width: 60px;
	height: 60px;
	background: var(--at-orange, #ff7f26);
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vm-mission-icon i {
	font-size: 24px;
	color: #fff;
}
.vm-mission-item-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: #212529;
	margin: 0 0 8px;
}
.vm-mission-item-desc {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--at-grey-700, #585960);
	margin: 0;
}

/* ── Quality Policy Banner ── */
.intro-video.quality-policy {
	position: relative;
	background-image: url('../images/bg-quality.webp');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	min-height: 36.833vw;
	align-content: end;
	padding: 100px 0;
	overflow: hidden;
	margin-bottom: 100px;
}

/* ── Philosophy Editorial Grid ── */
.vm-philosophy-section {
	padding: 0;
	overflow: hidden;
}

/* Section header above grid */
.vm-philosophy-header {
	text-align: center;
	margin-bottom: 48px;
}
.vm-philosophy-header-title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #212529;
	margin: 16px 0 16px;
}
.vm-philosophy-header-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--at-grey-700, #585960);
	max-width: 600px;
	margin: 0 auto;
}

/* Editorial grid container */
.vm-editorial-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 320px 320px;
	gap: 0;
	border-radius: 0;
	overflow: hidden;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Base block */
.vm-eg-block {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

/* Image blocks */
.vm-eg-block--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.vm-eg-block--img:hover img {
	transform: scale(1.06);
}

/* Color blocks */
.vm-eg-block--navy    { background: #2969c7; }
.vm-eg-block--orange  { background: var(--at-orange, #ff7f26); }
.vm-eg-block--blue    { background: var(--at-blue-700, #183f77); }
.vm-eg-block--light   { background: #7d1c85; }
.vm-eg-block--blue-old { background: #2e1185; }

/* Grid placement — Row 1 */
.vm-eg-1 { grid-column: 1; grid-row: 1; }
.vm-eg-2 { grid-column: 2; grid-row: 1; }
.vm-eg-3 { grid-column: 3; grid-row: 1; }
.vm-eg-4 { grid-column: 4; grid-row: 1; }

/* Grid placement — Row 2 */
.vm-eg-5 { grid-column: 1; grid-row: 2; }
.vm-eg-6 { grid-column: 2; grid-row: 2; }
.vm-eg-7 { grid-column: 3; grid-row: 2; }
.vm-eg-8 { grid-column: 4; grid-row: 2; }

/* Block inner content */
.vm-eg-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 28px 32px;
}
.vm-eg-content--center {
	justify-content: center;
	align-items: flex-start;
}

.vm-eg-title {
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 10px;
}
.vm-eg-title--white  { color: #fff; }

.vm-eg-title-xl {
	font-size: clamp(28px, 2vw, 40px);
	font-weight: 600;
	margin: 0 0 12px;
}

/* Number accent */
.vm-eg-number {
	font-size: clamp(56px, 6vw, 80px);
	font-weight: 900;
	line-height: 1;
	opacity: 0.12;
	position: absolute;
	bottom: 16px;
	right: 20px;
	color: #fff;
	pointer-events: none;
}

/* Overlay on image blocks */
.vm-eg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(4,6,24,0) 30%, rgba(4,6,24,0.72) 100%);
}

/* ── Responsive — Editorial Grid ── */
@media (max-width: 1024px) {
	.vm-editorial-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 260px);
	}
	.vm-eg-1 { grid-column: 1; grid-row: 1; }
	.vm-eg-2 { grid-column: 2; grid-row: 1; }
	.vm-eg-4 { grid-column: 1; grid-row: 2; }
	.vm-eg-3 { grid-column: 2; grid-row: 2; }
	.vm-eg-6 { grid-column: 1; grid-row: 3; }
	.vm-eg-5 { grid-column: 2; grid-row: 3; }
	.vm-eg-7 { grid-column: 1; grid-row: 4; }
	.vm-eg-8 { grid-column: 2; grid-row: 4; }
}

@media (max-width: 575.98px) {
	.vm-editorial-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, auto);
		gap: 0;
	}
	.vm-eg-block {
		min-height: 0;
	}
	.vm-eg-block--img {
		min-height: 180px;
	}
	.vm-eg-block--img img {
		height: 100%;
		min-height: 180px;
	}
	.vm-eg-content {
		padding: 16px;
		padding-top: 24px;
		position: relative;
		inset: auto;
	}
	.vm-eg-block--img .vm-eg-content {
		position: absolute;
		inset: 0;
	}
	.vm-eg-number {
		font-size: 40px;
		bottom: 8px;
		right: 10px;
	}
	.vm-eg-content br {
		display: none;
	}
}

/* ── Responsive — Mission Section ── */
@media (max-width: 1299.98px) {
	.vm-mission-section .our-fact-image-box {
		margin-right: 0;
		background-image: none;
	}
	.vm-mission-section .our-fact-image-box-2 {
		padding-bottom: 60px;
	}
	.vm-mission-section .our-fact-image-box-2 .our-fact-image {
		margin-left: -200px;
	}
	.vm-mission-content-pad {
		padding-left: 12px;
	}
	.vm-mission-item-row {
		gap: 20px;
		padding-bottom: 28px;
		margin-bottom: 28px;
	}
	.vm-mission-item-title { font-size: 18px; }
	.vm-mission-item-desc  { font-size: 15px; }
	.vm-mission-icon {
		width: 52px;
		height: 52px;
		border-radius: 26px;
	}
	.vm-mission-item { gap: 20px; }
}

@media (max-width: 1243px) {
	.vm-mission-item-row {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 30px;
	}
	.vm-mission-item-row:last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 1199.98px) {
	.vm-mission-content-pad { padding-left: 0; }
	.vm-mission-content-pad .vm-sub-badge {
		display: inline-flex;
	}
	.vm-mission-content-pad > .vm-sub-badge,
	.vm-mission-content-pad > .vm-mission-title {
		text-align: center;
		display: block;
		width: 100%;
	}
	.vm-mission-content-pad > .vm-sub-badge {
		text-align: center;
		display: flex;
		justify-content: center;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
	.vm-mission-section .vm-mission-img-col {
		margin-top: 60px;
	}
	.vm-mission-section .our-fact-image-box {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		background-image: none;
	}
	.vm-mission-section .our-fact-image-box-2 {
		padding-bottom: 60px;
	}
	.vm-mission-section .our-fact-image-box-2 .our-fact-image {
		margin-left: -220px;
	}
	.vm-mission-item {
		flex: 1 1 calc(50% - 15px);
		min-width: 0;
	}
}

@media (max-width: 991.98px) {
	.vm-mission-section .vm-mission-img-col { margin-top: 40px; }
	.vm-mission-section .our-fact-image-box { max-width: 560px; }
	.vm-mission-section .our-fact-image-box-2 { padding-bottom: 40px; }
	.vm-mission-section .our-fact-image-box-2 .our-fact-image { margin-left: -160px; }
}

@media (max-width: 767.98px) {
	.vm-vision-section  { padding: 60px 0 80px; }
	.vm-mission-section { padding: 0px 0 60px; }
	.vm-mission-item-row { gap: 20px; }
	.vm-mission-section .vm-mission-img-col { margin-top: 30px; }
	.vm-mission-section .our-fact-image-box { max-width: 100%; }
	.vm-mission-section .our-fact-image-box-2 { display: none; }
	.br-quality-policy { display: none; }
}

@media (max-width: 575.98px) {
	.vm-vision-banner      { min-height: 280px; }
	.vm-vision-banner-text { padding: 50px 24px; }
	.vm-mission-item       { flex: 1 1 100%; }
}
/* ============================================================
   CORPORATE PROFILE PAGE — corporate-profile.css
   Scoped styles for corporate-profile.html
   Loads after custom.css and at-theme.css
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   SHARED UTILITIES
────────────────────────────────────────────────────────── */

/* Sub-badge pill (eyebrow label) */
.cp-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--at-violet-100, #e4dcea);
    border-radius: 100px;
    padding: 8px 16px 9px 32px;
    font-size: 16px;
    font-weight: 300;
    color: #212529;
    position: relative;
    margin-bottom: 20px;
}

.cp-sub-badge::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--at-orange, #ff7f26);
}

/* Light variant (on dark backgrounds) */
.cp-sub-badge--light {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.cp-sub-badge--light::before {
  background-color: var(--at-orange, #ff7f26);
}

/* Section header block */
.cp-section-header {
  text-align: center;
  margin-bottom: 56px;
}

.cp-section-title {
  font-family: 'FC Minimal', sans-serif !important;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--at-navy, #040618);
  margin: 0 0 16px;
}

.cp-section-desc {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--at-grey-700, #585960);
  max-width: 640px;
  margin: 0 auto;
}


/* ──────────────────────────────────────────────────────────
   SECTION 1 — HERO INTRO
────────────────────────────────────────────────────────── */

.cp-hero-section {
  padding: 80px 0 72px;
  background-color: #fff;
}

.cp-hero-inner {
  text-align: center;
}

.cp-hero-title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--at-navy, #040618);
  margin: 0 0 36px;
  letter-spacing: -0.5px;
}

/* Highlight subtitle with flanking lines */
.cp-hero-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}

.cp-hero-highlight-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--at-orange, #ff7f26));
}

.cp-hero-highlight-line:last-child {
  background: linear-gradient(to left, transparent, var(--at-orange, #ff7f26));
}

.cp-hero-subtitle {
  font-family: 'FC Minimal', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--at-grey-700, #585960);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.cp-hero-subtitle strong {
  color: var(--at-orange, #ff7f26);
  font-weight: 700;
}


/* ──────────────────────────────────────────────────────────
   SECTION 2 — COMPANY OVERVIEW
────────────────────────────────────────────────────────── */

.cp-overview-section {
    padding: 80px 0 88px;
    background-color: #2f1085 !important;
    position: relative;
}

.cp-overview-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.cp-overview-section .container {
  position: relative;
  z-index: 1;
}


/* ──────────────────────────────────────────────────────────
   SECTION 3 — CREDENTIALS TIMELINE
────────────────────────────────────────────────────────── */

.cp-credentials-section {
  padding: 88px 0 96px;
  background-color: #fff;
  overflow-x: hidden;
}

/* Timeline container */
.cp-timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* Each row */
.cp-timeline-item {
  display: grid;
  grid-template-columns: 100px 40px 1fr;
  gap: 0 0;
  align-items: stretch;
  margin-bottom: 0;
}

/* Year column */
.cp-timeline-year-col {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
  padding-top: 6px;
  align-self: flex-start;
}

.cp-timeline-year {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--at-orange, #ff7f26);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 80px;
  text-align: right;
}

.cp-timeline-year--accent {
  background: var(--at-orange, #ff7f26);
}

/* Desktop: hide the year badge when it repeats the item above (mobile already
   hides the whole year column and shows the year via ::before on the card) */
.cp-timeline-year-col--dup {
  visibility: hidden;
}

.cp-timeline-year-label {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 1;
  margin-bottom: 2px;
}

/* DESKTOP: Hide year label */
@media (min-width: 768px) {
  .cp-timeline-year-label {
    display: none !important;
  }
}

.cp-timeline-year-num {
  font-family: 'FC Minimal', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* Connector column (dot + vertical line) */
.cp-timeline-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
  height: 100%;
}

.cp-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--at-orange, #ff7f26);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--at-orange, #ff7f26);
  flex-shrink: 0;
  z-index: 1;
}

.cp-timeline-dot--accent {
  background: var(--at-orange, #ff7f26);
  box-shadow: 0 0 0 2px var(--at-orange, #ff7f26);
}

.cp-timeline-line {
  width: 2px;
  flex: 1;
  min-height: 100px;
  background: var(--at-orange, #ff7f26);
  margin-top: 4px;
}

/* Content column */
.cp-timeline-content-col {
  padding: 0 0 40px 20px;
}

/* Timeline card */
.cp-timeline-card {
  background: var(--color-orange-light, #fff2e9);
  border-radius: 16px;
  padding: 20px 24px;
  border-left: 3px solid var(--at-orange, #ff7f26);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cp-timeline-card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.10));
  transform: translateX(4px);
}

.cp-timeline-card--accent {
  border-left-color: var(--at-orange, #ff7f26);
  background: var(--color-orange-light, #fff2e9);
}

/* Badge inside card */
.cp-timeline-card-badge {
  display: inline-block;
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--at-orange-dark, #bf5f1d);
  background: rgba(255, 127, 38, 0.15);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

.cp-timeline-card-badge--accent {
  color: var(--at-orange-dark, #bf5f1d);
  background: rgba(255, 127, 38, 0.15);
}

.cp-timeline-card-text {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--at-grey-700, #585960);
  margin: 0;
}

.cp-timeline-card-text strong {
  color: var(--at-navy, #040618);
  font-weight: 500;
}


/* ──────────────────────────────────────────────────────────
   TIMELINE ANIMATIONS
────────────────────────────────────────────────────────── */

/* Initial hidden states */
.cp-tl-animate .cp-tl-year {
  opacity: 0;
  transform: translateX(-28px);
}

.cp-tl-animate .cp-tl-dot {
  opacity: 0;
  transform: scale(0);
}

.cp-tl-animate .cp-tl-line {
  transform: scaleY(0);
  transform-origin: top center;
}

.cp-tl-animate .cp-tl-card {
  opacity: 0;
  transform: translateX(28px);
}

/* Dot pulse ring (visible after dot animates in) */
.cp-tl-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--at-orange, #ff7f26);
  opacity: 0;
  transform: scale(0.6);
}

.cp-timeline-dot {
  position: relative;
}

/* Revealed state — added by JS */
.cp-tl-animate.is-visible .cp-tl-year {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cp-tl-animate.is-visible .cp-tl-dot {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cp-tl-animate.is-visible .cp-tl-dot::after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  animation: cp-tl-pulse 1.8s ease-out 0.5s infinite;
}

.cp-tl-animate.is-visible .cp-tl-line {
  transform: scaleY(1);
  transition: transform 0.5s ease;
}

.cp-tl-animate.is-visible .cp-tl-card {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Pulse keyframe for dot ring */
@keyframes cp-tl-pulse {
  0%   { opacity: 0.8; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.9); }
  100% { opacity: 0;   transform: scale(1.9); }
}


/* ──────────────────────────────────────────────────────────
   SECTION 4 — HUMAN RESOURCES
────────────────────────────────────────────────────────── */

.cp-hr-section {
    padding: 134px 0;
    background-color: var(--at-navy, #040618);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.cp-hr-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(7 39 84) 0%, rgb(39 105 199 / 11%) 100%);
    z-index: 0;
}

.cp-hr-section .container {
  position: relative;
  z-index: 1;
}

.cp-hr-stat {
  text-align: left;
}

.cp-hr-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 12px;
}

.cp-hr-number {
    font-family: 'FC Minimal', sans-serif;
    font-size: clamp(72px, 10vw, 120px);
    color: var(--at-orange, #ff7f26);
    letter-spacing: -1px;
    font-weight: 600;
    padding: 40px 0;
}

.cp-hr-number-unit {
  font-family: 'FC Minimal', sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}

.cp-hr-content {
  padding-left: 48px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.cp-hr-desc {
  font-family: 'FC Minimal', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
}

.cp-hr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-hr-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.cp-hr-tag:hover {
  background: rgba(255, 127, 38, 0.20);
  border-color: var(--at-orange, #ff7f26);
}

.cp-hr-tag i {
  font-size: 14px;
  color: var(--at-orange, #ff7f26);
}

.cp-hr-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--at-orange, #ff7f26);
  display: inline-block;
  vertical-align: middle;
}


/* ──────────────────────────────────────────────────────────
   SECTION 5 — CORPORATE CONTACT
────────────────────────────────────────────────────────── */

.cp-contact-section {
  padding: 88px 0 100px;
  background-color: #fff;
}

.cp-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 40px;
  height: 100%;
  justify-content: center;
}

.cp-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-grey-50, #eaeaea);
}

.cp-contact-item:first-child {
  border-top: 1px solid var(--color-grey-50, #eaeaea);
}

.cp-contact-item-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 999px;
  background: var(--at-orange, #ff7f26);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.cp-contact-item-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-violet-250, #7c1d85);
  transform: scale(0);
  transition: transform 0.4s ease;
  z-index: 0;
}

.cp-contact-item:hover .cp-contact-item-icon::before {
  transform: scale(1);
}

.cp-contact-item-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 1;
}

.cp-contact-item-body {
  flex: 1;
}

.cp-contact-item-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--at-grey-700, #585960);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 6px;
}

.cp-contact-item-value {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--at-navy, #040618);
  margin: 0;
}

.cp-contact-phones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-contact-phone-link {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--at-navy, #040618);
  text-decoration: none;
  transition: color 0.3s ease;
}

.cp-contact-phone-link:hover {
  color: var(--at-orange, #ff7f26);
}

.cp-contact-phone-sep {
  font-size: 16px;
  color: var(--at-grey-700, #585960);
}

.cp-contact-map {
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  min-height: 360px;
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.12));
}

.cp-contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  border: 0;
}


/* ============================================================
   RESPONSIVE — Tablet (≤1199px)
   ============================================================ */

@media (max-width: 1199.98px) {

  .cp-hero-section { padding: 64px 0 56px; }

  .cp-hero-highlight {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }

  .cp-hero-highlight-line {
    width: 60px;
    height: 2px;
    flex: none;
    background: var(--at-orange, #ff7f26) !important;
  }

  .cp-hero-subtitle {
    white-space: normal;
    text-align: center;
  }

  .cp-overview-section { padding: 64px 0 72px; }


  .cp-credentials-section { padding: 64px 0 72px; }

  .cp-hr-stat {
    text-align: center;
    margin-bottom: 40px;
  }

  .cp-hr-number-wrap { justify-content: center; }

  .cp-hr-content {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 40px;
    text-align: center;
  }

  .cp-hr-tags { justify-content: center; }

  .cp-contact-section { padding: 64px 0 80px; }
  .cp-contact-section .section-title { margin-bottom: 0; }
  .cp-contact-section .mt-5 { margin-top: 0 !important; }

  .cp-contact-info {
    padding-right: 0;
    margin-bottom: 32px;
  }

  .cp-contact-map { min-height: 320px; }
  .cp-contact-map iframe { min-height: 320px; }

  /* ซ่อนเส้นบนสุดและล่างสุด เหลือแค่เส้นกลาง (ระหว่าง 2 items) */
  .cp-contact-item:first-child { border-top: none; }
  .cp-contact-item:last-child  { 
    border-bottom: none; 
}
.cp-section-header {
    margin-bottom: 8px;
   }
}


/* ============================================================
   RESPONSIVE — Mobile (≤767px)
   ============================================================ */

@media (max-width: 767.98px) {

  .cp-section-title { font-size: 28px; }
  .cp-section-header { margin-bottom: 0; }

  .cp-hero-section { padding: 48px 0 44px; }
  .cp-hero-title { font-size: 26px; }
  .cp-hero-subtitle { font-size: 16px; }

  .cp-overview-section { padding: 48px 0 56px; }


  .cp-credentials-section { padding: 48px 0 56px; }
  .cp-timeline { max-width: 100%; }
  .cp-timeline-item { grid-template-columns: 76px 32px 1fr; }
  .cp-timeline-year { min-width: 64px; padding: 6px 10px; }
  .cp-timeline-year-num { font-size: 18px; }
  .cp-timeline-content-col { padding: 0 0 28px 14px; }
  .cp-timeline-card { padding: 16px 18px; }
  .cp-timeline-card-text { font-size: 16px; }

  .cp-hr-section { padding: 64px 0; }
  .cp-hr-number { font-size: 80px; }
  .cp-hr-number-unit { font-size: 26px; }
  .cp-hr-desc { font-size: 16px; }

  .cp-contact-section { padding: 80px 0 80px; }
  .cp-contact-phone-link { font-size: 18px; }
  .cp-contact-map { min-height: 260px; }
  .cp-contact-map iframe { min-height: 260px; }
}


/* ============================================================
   RESPONSIVE — Small Mobile (≤575px)
   ============================================================ */

@media (max-width: 575.98px) {

  .cp-hero-title { font-size: 22px; }

  .cp-timeline-item {
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "connector content";
  }
  .cp-timeline-year-col { display: none; }
  .cp-timeline-connector {
    grid-area: connector;
    padding-top: 14px;
  }
  .cp-timeline-content-col {
    grid-area: content;
    padding: 0 0 24px 14px;
  }

  .cp-timeline-card::before {
    content: attr(data-year);
    display: block;
    font-family: 'FC Minimal', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--at-orange-dark, #bf5f1d);
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
}

  .cp-timeline-card {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .cp-timeline-card-badge {
    white-space: normal;
    word-break: break-word;
  }

  /* ── Animation overrides for small mobile ── */

  /* Year pill is hidden — disable its animation */
  .cp-tl-animate .cp-tl-year {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Card: fade up instead of slide-in from right (prevents overflow) */
  .cp-tl-animate .cp-tl-card {
    transform: translateY(16px) !important;
  }

  .cp-tl-animate.is-visible .cp-tl-card {
    transform: translateY(0) !important;
  }

  .cp-hr-number { font-size: 64px; }
  .cp-hr-tag { font-size: 13px; padding: 6px 14px; }

  .cp-contact-item { gap: 14px; padding: 22px 0; }

  .cp-contact-item-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .cp-contact-phone-link { font-size: 16px; }
}

/* ── Responsive ── */

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

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

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

/* ============================================================
   SECTION 2 — OVERVIEW v3 (cp-ov3-*)
   Image left + Info panel right
   ============================================================ */

/* ── Layout wrapper ── */
.cp-ov3-layout {
  align-items: stretch;
  overflow: hidden;

}

/* ── LEFT: Image Panel ── */
.cp-ov3-image-panel {
    position: relative;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 20px;
}

.cp-ov3-figure {
    margin: 0;
    height: 100%;
    min-height: 520px;
    border-radius: 20px;
}

.cp-ov3-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* dark gradient overlay on image */
.cp-ov3-image-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4, 6, 24, 0.08) 0%,
    rgba(4, 6, 24, 0.40) 100%
  );
  pointer-events: none;
}

/* Floating ISO badge — bottom-right of image */
.cp-ov3-badge-iso {
  position: absolute;
  bottom: 28px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-ov3-badge-iso-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(4, 6, 24, 0.18);
  backdrop-filter: blur(6px);
}

.cp-ov3-badge-iso img {
  height: 44px;
  width: auto;
  display: block;
}

/* Floating year badge — top-left of image */
.cp-ov3-badge-year {
  position: absolute;
  top: 28px;
  left: 24px;
  z-index: 2;
  background: var(--at-orange, #ff7f26);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 6px 24px rgba(255, 127, 38, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cp-ov3-badge-year-num {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}

.cp-ov3-badge-year-label {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

/* ── RIGHT: Info Panel ── */
.cp-ov3-info-panel {
  padding: 52px 48px 52px 52px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* subtle grid texture on info panel — removed (grid lives on section level) */

.cp-ov3-info-panel > * {
  position: relative;
  z-index: 1;
}

/* Override sub-badge color on dark bg */
.cp-ov3-info-panel .cp-sub-badge {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.12);
  align-self: flex-start;
}

.cp-ov3-info-panel .cp-sub-badge::before {
  background: var(--at-orange, #ff7f26);
}

/* icon-box inside info panel — same pattern as about-body-item-metal in home.html */
.cp-ov3-info-panel .icon-box {
  position: relative !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  background-color: var(--accent-color, #040618) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.5s ease-in-out !important;
  flex-shrink: 0 !important;
}

.cp-ov3-info-panel .icon-box::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--at-orange, #ff7f26) !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  transition: all 0.4s ease-in-out !important;
  z-index: 0 !important;
}

.cp-ov3-info-item:hover .icon-box::before,
.cp-ov3-info-item--compact:hover .icon-box::before {
  transform: scale(1) !important;
}

.cp-ov3-info-panel .icon-box img {
  position: relative !important;
  width: 100% !important;
  max-width: 26px !important;
  filter: brightness(0) invert(1) !important;
  transition: all 0.4s ease-in-out !important;
  z-index: 1 !important;
}

/* icon-box--orange variant: orange bg default, hover bg stays orange, icon turns black */
.cp-ov3-info-panel .cp-ov3-info-item .icon-box.icon-box--orange,
.cp-ov3-info-panel .cp-ov3-info-item--compact .icon-box.icon-box--orange {
  background-color: var(--at-orange, #ff7f26) !important;
}

/* disable the ::before scale-in (orange on orange is invisible anyway) */
.cp-ov3-info-panel .cp-ov3-info-item .icon-box.icon-box--orange::before,
.cp-ov3-info-panel .cp-ov3-info-item--compact .icon-box.icon-box--orange::before {
  display: none !important;
}

/* hover: bg stays orange, icon goes black */
.cp-ov3-info-panel .cp-ov3-info-item:hover .icon-box.icon-box--orange img,
.cp-ov3-info-panel .cp-ov3-info-item--compact:hover .icon-box.icon-box--orange img {
  filter: brightness(0) invert(0) !important;
}
.cp-ov3-heading {
  font-family: 'FC Minimal', sans-serif !important;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 36px;
  letter-spacing: -0.5px;
}

/* ── Info list ── */
.cp-ov3-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Single info row */
.cp-ov3-info-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
}

/* Info body text */
.cp-ov3-info-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 6px;
}

.cp-ov3-info-value {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px;
}

/* Large value (for dates & numbers) */
.cp-ov3-info-value-lg {
  font-family: 'FC Minimal', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 4px;
}

.cp-ov3-info-note {
  font-family: 'FC Minimal', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
}

/* Chips row */
.cp-ov3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.cp-ov3-chip {
    font-size: 16px;
    font-weight: 300;
    border-radius: 999px;
    padding: 8px 16px;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.cp-ov3-chip--navy {
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cp-ov3-chip--navy:hover {
  background: rgba(255, 127, 38, 0.22);
  border-color: var(--at-orange, #ff7f26);
  color: #fff;
}

/* Horizontal divider */
.cp-ov3-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

/* Two-column row for founded + capital */
.cp-ov3-row-2col {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 4px 0;
}

.cp-ov3-row-2col .cp-ov3-info-item--compact {
  flex: 1;
  padding: 20px 0;
}

/* Vertical separator between the two compact items */
.cp-ov3-vsep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.08);
  margin: 20px 24px;
  flex-shrink: 0;
}


/* ── Responsive ── */

@media (max-width: 1199.98px) {
  .cp-ov3-image-panel {
    min-height: 180px;
    border-radius: 20px;
  }
  .cp-ov3-figure { min-height: 180px; }

  /* Swap order: info on top, image on bottom */
  .cp-ov3-layout {
    flex-direction: column-reverse;
  }

  .cp-ov3-info-panel {
    padding: 44px 36px;
    text-align: center;
  }

  .cp-ov3-info-panel .cp-sub-badge {
    align-self: center;
  }

  /* Stack icon above text, center align — only for main info item */
  .cp-ov3-info-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Compact items (founded + capital): keep row layout, left-aligned */
  .cp-ov3-info-item.cp-ov3-info-item--compact {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .cp-ov3-info-body {
    width: 100%;
  }

  .cp-ov3-chips {
    justify-content: center;
  }

  /* Hide construction icon on tablet/mobile */
  .cp-ov3-icon-biz {
    display: none !important;
  }

  /* Hide divider */
  .cp-ov3-divider {
    display: none;
  }

  /* Center the 2-col row */
  .cp-ov3-row-2col {
    justify-content: center;
  }

  .cp-ov3-row-2col .cp-ov3-info-item--compact {
    flex: 0 1 auto;
  }
}

@media (max-width: 991.98px) {
  .cp-ov3-info-panel {
    padding: 40px 32px;
  }
  .cp-ov3-heading { font-size: 28px; }
  .cp-ov3-info-value-lg { font-size: 20px; }
}

@media (max-width: 767.98px) {
  .cp-ov3-layout { border-radius: 16px; overflow: hidden; }
  .cp-ov3-image-panel { min-height: 100px; }
  .cp-ov3-figure { min-height: 200px; }
  .cp-ov3-info-panel { padding: 36px 24px; }
  .cp-ov3-heading { font-size: 26px; margin-bottom: 28px; }
  .cp-ov3-row-2col { flex-direction: column; gap: 0; }
  .cp-ov3-vsep { width: 100%; height: 1px; margin: 0 0 0; align-self: auto; }
  .cp-ov3-row-2col .cp-ov3-info-item--compact { padding: 16px 0; }
}

@media (max-width: 575.98px) {
  .cp-ov3-info-panel { padding: 28px 20px; }
  .cp-ov3-heading { font-size: 22px; }
  .cp-ov3-badge-iso { display: none; }
  .cp-ov3-badge-year { padding: 10px 16px; }
  .cp-ov3-badge-year-num { font-size: 32px; }
  .cp-ov3-info-value-lg { font-size: 18px; }
}


/* ============================================================
   COMPANY BACKGROUND PAGE — cb- namespace
   ============================================================ */

/* ── Intro Section ── */
.cb-intro-section {
	padding: 80px 0 60px;
}

.cb-intro-inner {
	text-align: center;
	max-width: 860px;
	margin: 0 auto;
}

.cb-sub-badge {
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	color: var(--at-navy, #040618);
	background: var(--at-violet-100, #e4dcea);
	border-radius: 100px;
	padding: 8px 16px 8px 32px;
	margin-bottom: 20px;
	position: relative;
}

.cb-sub-badge::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--at-orange, #ff7f26);
}

.cb-intro-title {
	font-size: 48px;
	font-weight: 600;
	color: var(--at-navy, #040618);
	line-height: 1.2;
	margin: 0 0 24px;
}

/* ── Founding Story ── */
.cb-founding-section {
	padding: 100px 0 100px;
	background: #dfe9f7;
}

.cb-founding-image {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.cb-founding-image figure {
	margin: 0;
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.cb-founding-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

.cb-founding-badge {
	position: absolute;
	bottom: 24px;
	left: 24px;
	background: #ff7f27;
	color: #fff;
	border-radius: 16px;
	padding: 18px 24px;
	min-width: 160px;
}

.cb-founding-content p {
	font-size: 16px;
	font-weight: 300;
	color: var(--at-grey-700, #585960);
	line-height: 1.75;
}

.cb-founding-content p:last-child {
	margin-bottom: 0;
}

/* ── History Section ── */
.cb-history-section {
	padding: 100px 0 100px;
	background: #7d1d85;
	background-image: url('../images/bg-timeline.webp');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

.cb-history-header {
	text-align: center;
	margin-bottom: 64px;
}

.cb-history-header p {
	font-size: 16px;
	font-weight: 300;
	color: #ffffff;
	margin: 0 auto;
	line-height: 1.2;
	margin-top: 30px;
}

/* ── Company Background Responsive ── */
@media (max-width: 1199.98px) {
	.cb-intro-title { font-size: 40px; }
	.cb-founding-image {
		margin-top: 40px;
	}
}

@media (max-width: 991.98px) {
	.cb-intro-title { font-size: 34px; }
	.cb-founding-image img { aspect-ratio: 16 / 9; }
    .cb-history-header {
    margin-bottom: 24px;
 }
}

@media (max-width: 767.98px) {
	.cb-intro-section { padding: 60px 0 40px; }
	.cb-intro-title { font-size: 28px; }
	.cb-history-header h2 { font-size: 28px; }
	.cb-founding-image {
		overflow: visible;
	}
	.cb-founding-badge {
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 16px;
		border-radius: 20px;
		width: 100%;
	}
	.cb-founding-badge p {
		font-size: 16px;
		line-height: 1.5;
	}
     .cb-founding-badge br{
        display: none;
    }

}

@media (max-width: 575.98px) {
    .cb-history-header {

    margin-bottom: 24px;
}
}

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

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

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

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

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

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

/* HISTORY TIMELINE — Navigation Buttons */
.history__nav button {
    border: 1px solid #ff7f27;
    background: #fb7c2b;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    color: #fff;
    transition: all 0.3s ease;
}

.history__nav button:hover:not(.swiper-button-disabled) {
    background: var(--at-orange, #ff7f26);
    border-color: var(--at-orange, #ff7f26);
}

.history__nav button.swiper-button-disabled {
    background: #d0d0d0;
    border-color: #d0d0d0;
    color: #5d5a5a;
    cursor: not-allowed;
    opacity: 0.5;
}

/* HISTORY TIMELINE — Navigation Position */
.history__area-two .history__active .history__nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    z-index: 3;
}

.history__area-two .swiper-slide {
    display: block;
    height: auto;
}

/* HISTORY TIMELINE — Year Badge */
.history__area-two .history__active .swiper-slide .history__top-date span {
    border: 1px solid #2f1085;
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff2e9;
    padding: 16px 50px;
    margin-bottom: 40px;
    width: 84%;
    background: #2f1085;
    border-radius: 0px;
}

.history__area-two .history__active .swiper-slide .history__top-date::before {
    content: "";
    display: none;
}

/* HISTORY TIMELINE — Card Container */
.history__area-two .history__active .swiper-slide .history__item {
    background: linear-gradient(135deg, #fff2e9 0%, #ffffff 100%);
    border: 1px solid rgba(255, 127, 38, 0.15);
    border-radius: 20px;
    padding: 40px 36px 36px;
    position: relative;
    z-index: 1;
    overflow: auto !important;
    height: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 2px 8px rgba(255, 127, 38, 0.08);
    transition: all 0.3s ease;
}

.history__area-two .history__active .swiper-slide.swiper-slide-active .history__item {
    background: linear-gradient(135deg, #fff2e9 0%, #fffaf5 100%);
    box-shadow: 0 4px 16px rgba(255, 127, 38, 0.12);
    transform: translateY(-2px);
}

.history__area-two .history__active .swiper-slide .history__item:hover {
    box-shadow: 0 4px 16px rgba(255, 127, 38, 0.12);
    transform: translateY(-2px);
}

/* HISTORY TIMELINE — Content Items */
.history__area-two .history__active .swiper-slide .history__item .history__item-content {
    margin-bottom: 24px;
    padding-left: 0;
    position: relative;
}

.history__area-two .history__active .swiper-slide .history__item .history__item-content:last-child {
    margin-bottom: 0;
}

.history__area-two .history__active .swiper-slide .history__item .history__item-content .date {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: var(--at-orange-dark, #bf5f1d);
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 5px 14px;
    background: rgba(255, 127, 38, 0.15);
    border-radius: 999px;
    border: none;
    letter-spacing: 0.3px;
}

.history__area-two .history__active .swiper-slide .history__item .history__item-content p {
    color: var(--at-grey-700, #585960);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}

.history__area-two .history__active .swiper-slide .history__item .history__item-content p strong {
    color: var(--at-navy, #040618);
    font-weight: 500;
}

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

/* Hide duplicate year text in timeline cards on desktop (≥768px) */
@media (min-width: 768px) {
  .cp-timeline-card::before,
  .cp-timeline-card.cp-tl-card::before,
  .cp-timeline-content-col .cp-timeline-card::before {
    display: none !important;
    content: none !important;
  }
  
  /* Hide year label (พ.ศ. / Year) in desktop - show only number */
  .cp-timeline-year .cp-timeline-year-label,
  .cp-timeline-year-col .cp-timeline-year .cp-timeline-year-label,
  .cp-tl-year .cp-timeline-year-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

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

/* HISTORY TIMELINE — Year Badge Responsive Widths */
.history__area-two .history__active .swiper-slide.swiper-slide-active .history__top-date span {
    margin-left: auto;
}

@media (max-width: 1499px) {
    .history__area-two .history__active .swiper-slide .history__top-date span {
        font-size: 20px;
        padding: 14px 50px;
    }
}

@media (max-width: 1199px) {
    .history__area-two {
        padding-top: 20px;
        padding-bottom: 0;
    }
    .history__area-two .history__active .swiper-slide .history__item {
        height: 460px;
        padding: 36px 32px 32px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date {
        min-height: 50px;
        margin-bottom: 36px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date span {
        font-size: 19px;
        padding: 12px 45px;
        width: 86%;
    }
    .history__area-two .history__active .swiper-slide.swiper-slide-active .history__top-date span {
        width: 86%;
    }
}

@media (max-width: 991px) {
    .history__area-two {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .history__area-two .history__active .swiper-slide .history__item {
        height: 440px;
        padding: 32px 28px 28px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date {
        min-height: 48px;
        margin-bottom: 32px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date span {
        font-size: 18px;
        padding: 14px 40px;
        width: 80%;
    }
    .history__area-two .history__active .swiper-slide.swiper-slide-active .history__top-date span {
        width: 80%;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content .date {
        font-size: 14px;
        padding: 5px 13px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content p {
        font-size: 15px;
        line-height: 1.65;
    }
}

@media (max-width: 767px) {
    .history__area-two {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .history__area-two .history__active .swiper-slide .history__item {
        height: 420px;
        padding: 28px 24px 24px;
        border-radius: 16px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date {
        min-height: 46px;
        margin-bottom: 28px;
    }
    .history__area-two .history__active .swiper-slide.swiper-slide-active .history__top-date span {
        width: 76%;
        margin-left: auto;
        margin-right: auto;
        font-size: 18px;
        padding: 11px 38px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date span {
        font-size: 18px;
        padding: 14px 38px;
        width: 76%;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content {
        margin-bottom: 20px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content .date {
        font-size: 13px;
        padding: 4px 12px;
        margin-bottom: 8px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content p {
        font-size: 15px;
        line-height: 1.6;
    }
    .history__nav button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .history__area-two {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .history__area-two .history__active .swiper-slide .history__item {
        height: 400px;
        padding: 24px 20px 20px;
        border-radius: 14px;
    }
    .history__area-two .history__active .swiper-slide .history__item p {
        margin-bottom: 0 !important;
    }
    .history__area-two .history__active .swiper-slide .history__top-date {
        min-height: 44px;
        margin-bottom: 24px;
    }
    .history__area-two .history__active .swiper-slide.swiper-slide-active .history__top-date span {
        width: 88%;
        font-size: 17px;
        padding: 10px 35px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date span {
        font-size: 17px;
        padding: 10px 35px;
        width: 88%;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content {
        margin-bottom: 18px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content .date {
        font-size: 13px;
        padding: 4px 11px;
        margin-bottom: 7px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content p {
        font-size: 14px;
        line-height: 1.55;
    }
    .history__nav button {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .history__area-two {
        padding-top: 35px;
        padding-bottom: 35px;
    }
    .history__area-two .history__active .swiper-slide .history__item {
        height: 380px;
        padding: 22px 18px 18px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date {
        min-height: 42px;
        margin-bottom: 22px;
    }
    .history__area-two .history__active .swiper-slide.swiper-slide-active .history__top-date span {
        width: 60%;
        font-size: 16px;
        padding: 9px 32px;
    }
    .history__area-two .history__active .swiper-slide .history__top-date span {
        font-size: 16px;
        padding: 8px 32px;
        width: 60%;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content {
        margin-bottom: 16px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content .date {
        font-size: 12px;
        padding: 3px 10px;
        margin-bottom: 6px;
    }
    .history__area-two .history__active .swiper-slide .history__item .history__item-content p {
        font-size: 14px;
        line-height: 1.5;
    }
    .history__nav button {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

.history__area-two .history__active .swiper-slide.swiper-slide-next .history__top-date span {
    width: 100%;
}

@media (max-width: 1199px) {
    .history__area-two .history__active .swiper-slide.swiper-slide-next .history__top-date span {
        width: 86%;
    }
}

@media (max-width: 991px) {
    .history__area-two .history__active .swiper-slide.swiper-slide-next .history__top-date span {
        width: 80%;
    }
}

@media (max-width: 575px) {
    .history__area-two .history__active .swiper-slide.swiper-slide-next .history__top-date span {
        width: 88%;
    }
}

@media (max-width: 480px) {
    .history__area-two .history__active .swiper-slide.swiper-slide-next .history__top-date span {
        width: 90%;
    }
}


/* ============================================================
   ORGANIZATION CHART PAGE
   ============================================================ */

.org-chart-section {
	padding: 80px 0 100px;
}

.org-chart-header {
	text-align: center;
	margin-bottom: 48px;
}

.org-chart-header .vm-sub-badge {
	margin-bottom: 16px;
}

.org-chart-header h2 {
	font-family: 'FC Minimal', sans-serif;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: var(--at-navy, #040618);
	margin-bottom: 16px;
}

.org-chart-header p {
	font-family: 'FC Minimal', sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: var(--at-grey-700, #585960);
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.6;
}

.org-chart-image-wrap {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.org-chart-image-wrap:hover {
	transform: translateY(-2px);
}

.org-chart-image-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

.org-chart-image-wrap .org-chart-overlay {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 24, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.org-chart-image-wrap:hover .org-chart-overlay {
	background: rgba(4, 6, 24, 0.25);
}

.org-chart-overlay .org-chart-zoom-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.org-chart-image-wrap:hover .org-chart-zoom-icon {
	opacity: 1;
	transform: scale(1);
}

.org-chart-zoom-icon svg {
	width: 28px;
	height: 28px;
	color: var(--at-navy, #040618);
}

.org-chart-hint {
	text-align: center;
	margin-top: 20px;
	font-family: 'FC Minimal', sans-serif;
	font-size: 15px;
	color: var(--at-grey-700, #585960);
	font-weight: 300;
}

.org-chart-hint i {
	margin-right: 6px;
	color: var(--at-orange, #ff7f26);
}

/* ── Organization Chart Popup / Modal ── */
.org-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(4, 6, 24, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.org-popup-overlay.active {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	opacity: 1;
}

.org-popup-toolbar {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	gap: 12px;
	z-index: 10;
}

.org-popup-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
	text-decoration: none;
}

.org-popup-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
	color: #fff;
}

.org-popup-btn--close {
	background: rgba(255, 127, 38, 0.8);
}

.org-popup-btn--close:hover {
	background: rgba(255, 127, 38, 1);
}

.org-popup-image-container {
	position: relative;
	max-width: 92vw;
	max-height: 82vh;
	overflow: auto;
	border-radius: 12px;
	cursor: grab;
}

.org-popup-image-container:active {
	cursor: grabbing;
}

.org-popup-image-container img {
	display: block;
	max-width: none;
	transition: transform 0.3s ease;
	transform-origin: center center;
}

.org-popup-image-container img.fit {
	width: 100%;
	height: auto;
	max-width: 92vw;
	max-height: 82vh;
	object-fit: contain;
}

.org-popup-zoom-info {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-family: 'FC Minimal', sans-serif;
	font-size: 14px;
	padding: 6px 16px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.org-popup-zoom-info.show {
	opacity: 1;
}

@media (max-width: 767.98px) {
	.org-chart-section {
		padding: 56px 0 72px;
	}
	.org-popup-toolbar {
		top: 12px;
		right: 12px;
	}
	.org-popup-btn {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}
}


/************************************/
/***  Board Member Modal css      ***/
/************************************/

.board-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 6, 24, 0.75);
	backdrop-filter: blur(4px);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.board-modal-overlay.active {
	display: flex;
	opacity: 1;
}

.board-modal {
	background: #fff;
	border-radius: 20px;
	width: 100%;
	max-width: 960px;
	max-height: 90vh;
	overflow: hidden;
	position: relative;
	transform: translateY(30px) scale(0.95);
	transition: transform 0.3s ease;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.board-modal-overlay.active .board-modal {
	transform: translateY(0) scale(1);
}

.board-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f3f3f3;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background 0.3s, transform 0.3s;
}

.board-modal-close:hover {
	background: var(--at-orange, #ff7f26);
	transform: rotate(90deg);
}

.board-modal-close::before,
.board-modal-close::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 2px;
	background: #333;
	border-radius: 2px;
	transition: background 0.3s;
}

.board-modal-close:hover::before,
.board-modal-close:hover::after {
	background: #fff;
}

.board-modal-close::before {
	transform: rotate(45deg);
}

.board-modal-close::after {
	transform: rotate(-45deg);
}

.board-modal-scroll {
	overflow-y: auto;
	max-height: 90vh;
	padding: 0;
}

.board-modal-header {
	display: flex;
	gap: 32px;
	padding: 40px 40px 32px;
	background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
	border-bottom: 1px solid #eee;
}

.board-modal-photo {
	flex-shrink: 0;
	width: 200px;
	height: 240px;
	border-radius: 16px;
	overflow: hidden;
	background-color: #f0f0f0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	position: relative;
}

.board-modal-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	position: relative;
	z-index: 1;
}

.board-modal-profile {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 40px;
}

.board-modal-profile h2 {
	font-family: 'FC Minimal', sans-serif !important;
	font-size: 28px;
	font-weight: 600;
	color: var(--at-navy, #040618);
	margin: 0 0 8px;
	line-height: 1.3;
}

.board-modal-positions-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--at-navy, #040618);
	letter-spacing: 0.3px;
	margin-bottom: 0;
	padding-top: 16px;
	background: none;
	border: none;
	border-radius: 0;
	width: auto;
}

.board-modal-positions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	margin-bottom: 16px;
}

.board-modal-positions span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	color: var(--at-grey-700, #585960);
	line-height: 1.6;
}

.board-modal-positions span::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--at-orange, #ff7f26);
	flex-shrink: 0;
}

.board-modal-appointment {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 16px;
	color: var(--at-grey-700, #585960);
	line-height: 1.4;
}

.board-modal-appointment i {
	color: var(--at-orange, #ff7f26);
	font-size: 16px;
}

.board-modal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

.board-modal-meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 127, 38, 0.08);
	border: 1px solid rgba(255, 127, 38, 0.2);
	padding: 5px 12px;
	border-radius: 6px;
}

.board-modal-meta-item .meta-label {
	font-size: 16px;
	color: var(--at-orange, #ff7f26);
	font-weight: 600;
}

.board-modal-meta-item .meta-value {
	font-size: 16px;
	color: var(--at-orange, #ff7f26);
	font-weight: 600;
}

.board-modal-body {
	padding: 32px 40px 40px;
}

.board-modal-section {
	margin-bottom: 28px;
}

.board-modal-section:last-child {
	margin-bottom: 0;
}

.board-modal-section-title {
	font-family: 'FC Minimal', sans-serif !important;
	font-size: 18px;
	font-weight: 600;
	color: var(--at-navy, #040618);
	margin: 0 0 14px;
	padding-bottom: 10px;
	display: inline-block;
}

.board-modal-edu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.board-modal-edu-list li {
	position: relative;
	padding: 6px 0 6px 20px;
	font-size: 16px;
	color: #444;
	line-height: 1.6;
	font-weight: 300;
}

.board-modal-edu-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--at-orange, #ff7f26);
}

.board-modal-exp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	font-weight: 300;
}

.board-modal-exp-table thead th {
	background: #331788;
	color: #fff;
	padding: 12px 14px;
	text-align: left;
	font-weight: 600;
	font-size: 16px;
}

.board-modal-exp-table thead th:first-child {
	border-radius: 8px 0 0 0;
}

.board-modal-exp-table thead th:last-child {
	border-radius: 0 8px 0 0;
}

.board-modal-exp-table tbody tr {
	border-bottom: 1px solid #eee;
	transition: background 0.2s;
}

.board-modal-exp-table tbody tr:hover {
	background: #fafafa;
}

.board-modal-exp-table tbody td {
	padding: 12px 14px;
	vertical-align: top;
	color: #444;
	line-height: 1.5;
}

.board-modal-exp-table tbody td:first-child {
	white-space: nowrap;
	font-weight: 500;
	color: var(--at-navy, #040618);
	min-width: 130px;
}

.board-modal-family-text {
	font-size: 15px;
	color: #444;
	line-height: 1.6;
	margin: 0;
}

.board-card-wrapper[data-modal] {
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.board-modal-header {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		padding: 32px 24px 24px;
		gap: 20px;
	}

	.board-modal-photo {
		width: 160px;
		height: 200px;
		align-self: center;
	}

	.board-modal-profile {
		padding-right: 0;
		align-items: flex-start;
		text-align: left;
	}

	.board-modal-profile h2 {
		font-size: 22px;
		text-align: center;
		align-self: center;
	}

	.board-modal-positions span {
		font-size: 16px;
	}

	.board-modal-positions {
		align-items: flex-start;
	}

	.board-modal-positions-label {
		justify-content: flex-start;
	}

	.board-modal-appointment {
		justify-content: flex-start;
		font-size: 16px;
	}

	.board-modal-meta {
		justify-content: flex-start;
	}

	.board-modal-body {
		padding: 24px;
	}

	.board-modal-section-title {
		font-size: 16px;
	}

	.board-modal-edu-list li {
		font-size: 16px;
	}

	.board-modal-exp-table {
		font-size: 16px;
	}

	.board-modal-exp-table thead th,
	.board-modal-exp-table tbody td {
		padding: 10px;
	}

	.board-modal-exp-table tbody td:first-child {
		min-width: 100px;
	}

	.board-modal-close {
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 575.98px) {
	.board-modal {
		border-radius: 16px;
		max-height: 95vh;
	}

	.board-modal-header {
		padding: 24px 20px 20px;
	}

	.board-modal-photo {
		width: 140px;
		height: 180px;
	}

	.board-modal-profile h2 {
		font-size: 20px;
	}

	.board-modal-body {
		padding: 20px;
	}

	.board-modal-table-wrap {
		overflow-x: auto;
		margin: 0 -20px;
		padding: 0 20px;
	}

	.board-modal-exp-table {
		min-width: 500px;
	}
}

/* ── Card Links (wrap existing service cards) ───────────────── */
.nob-card-link {
  text-decoration: none;
  display: block;
  height: 100%;
}

.nob-cards-section {
  padding: 100px 0 80px;
  background: var(--bg-color, #f3f3f3);
}

.nob-cards-grid {
  margin-top: 20px;
}

.nob-cards-grid .col-xl-3,
.nob-cards-grid .col-md-6 {
  margin-bottom: 24px;
}

/* ── Section Header (Simple, no dark hero) ──────────────────── */
.nob-section-header {
  padding: 100px 0 40px;
  border-bottom: 1px solid var(--divider-color, rgba(4, 6, 24, 0.1));
  margin-bottom: 0;
}

.nob-section-header__num {
  display: inline-block;
  font-size: 48px;
  font-weight: 900;
  color: var(--accent-secondary-color, #ff7f26);
  line-height: 1;
  margin-bottom: 12px;
}

.nob-section-header__title {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary-color, #040618);
  margin-bottom: 12px;
  line-height: 1.3;
}

.nob-section-header__desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--bg-color, #f3f3f3);
  max-width: 600px;
}

/* ── Image Slider (Swiper in detail blocks) ─────────────────── */
.nob-swiper {
  border-radius: var(--at-radius-lg, 20px);
  overflow: hidden;
}

.nob-swiper .swiper-slide img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

.nob-swiper .swiper-button-next,
.nob-swiper .swiper-button-prev {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.nob-swiper .swiper-button-next::after,
.nob-swiper .swiper-button-prev::after {
  font-size: 14px;
  color: var(--primary-color, #040618);
  font-weight: 700;
}

.nob-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.6;
}

.nob-swiper .swiper-pagination-bullet-active {
  background: var(--accent-secondary-color, #ff7f26);
  opacity: 1;
}

/* ── Detail Section Wrapper ─────────────────────────────────── */
.nob-detail-section {
    background: rgb(46 17 133);
}
#section-construction {
    background: url('../images/bg-construction-work-business.webp') center center / cover no-repeat;
    position: relative;
    background: rgb(124 29 133);
} 

/* #section-construction::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 6, 24, 0.80);
    z-index: 0;
} */

#section-construction > .container {
    position: relative;
    z-index: 1;
}


.nob-detail-section--alt {
    background: #dfe9f7;
}

#section-interior {
  background: #dfe9f7;
}
#section-turnkey {
    background: url(../images/bg-glass-tower-line-1.webp) top center / cover no-repeat;
}


#section-turnkey .nob-section-header {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

#section-turnkey .nob-detail-block {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ── Detail Content Blocks ──────────────────────────────────── */
.nob-detail-block {
  padding: 80px 0 100px;
  border-bottom: 1px solid var(--divider-color, rgba(4, 6, 24, 0.1));
  position: relative;
}

.nob-detail-block:last-child {
  border-bottom: none;
}

/* Block Number (decorative) */
.nob-detail-block__number {
  position: absolute;
  top: 60px;
  right: 0;
  font-size: 80px;
  font-weight: 900;
  color: rgba(40, 105, 199, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Visual / Image Column */
.nob-detail-block__visual {
  position: relative;
  margin-bottom: 30px;
}

.nob-detail-block__visual figure {
  border-radius: var(--at-radius-lg, 20px);
  overflow: hidden;
}

.nob-detail-block__visual img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nob-detail-block:hover .nob-detail-block__visual img {
  transform: scale(1.03);
}

/* Content Column */
.nob-detail-block__content {
  padding-left: 20px;
}

.nob-detail-block__tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--at-radius-full, 999px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.nob-detail-block__tag--blue {
  background: rgba(40, 105, 199, 0.08);
  color: var(--at-blue-300, #2869c7);
}

.nob-detail-block__content h3 {
  font-size: 26px;
  font-weight: 700;
  color: #fefefe;
  margin-bottom: 20px;
  line-height: 1.4;
}

.nob-detail-block__content p {
  font-size: 16px;
  line-height: 1.9;
  color: #fefefe;
  margin-bottom: 20px;
  font-weight: 300;
}

/* Sub Items within detail blocks */
.nob-sub-item {
  padding: 24px;
  background: var(--bg-color, #f3f3f3);
  border-radius: var(--at-radius-md, 16px);
  margin-bottom: 16px;
  border-left: 4px solid var(--at-blue-300, #2869c7);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nob-sub-item:hover {
  box-shadow: var(--at-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
  transform: translateY(-2px);
}

.nob-detail-section--alt .nob-sub-item {
  background: #ffffff;
}

.nob-sub-item h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-color, #040618);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nob-sub-item h4 i {
    color: #ffffff;
    font-size: 24px;
    width: 60px;
    height: 60px;
    background: var(--at-orange, #ff7f26);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nob-sub-item:hover h4 i {
  color: var(--at-orange, #ff7f26);
  background: transparent;
  border: 2px solid var(--at-orange, #ff7f26);
  transform: scale(1.05);
}

.nob-sub-item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color, #585960);
  margin-bottom: 0;
}

/* PPP section sub-items with orange border */
#section-ppp .nob-sub-item {
  border-left-color: var(--at-orange, #ff7f26);
}

#section-ppp .nob-sub-item h4 i {
  color: #ffffff;
  background: var(--at-orange, #ff7f26);
}

/* Turnkey section sub-items with amber border */
#section-turnkey .nob-sub-item {
  border-left-color: var(--at-orange, #ff7f26);
}

/* Interior section sub-items with green border */
#section-interior .nob-sub-item {
  border-left-color: #059669;
}

#section-interior .nob-sub-item h4 i {
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
}

/* ── Special Section (Grid Cards Layout) ─────────────────────── */
.nob-special-section {
  padding:100px 0;
  border-bottom: 1px solid var(--divider-color, rgba(4, 6, 24, 0.1));
  position: relative;
}

.nob-special-grid {
  row-gap: 24px;
}

/* Special Card */
.nob-special-card {
  background: #ffffff;
  border-radius: var(--at-radius-lg, 20px);
  border: 1px solid var(--divider-color, rgba(4, 6, 24, 0.08));
  overflow: hidden;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nob-special-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.nob-special-card__image {
  position: relative;
  overflow: hidden;
}

.nob-special-card__image img {
  width: 100%;
  height:400px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.nob-special-card:hover .nob-special-card__image img {
  transform: scale(1.05);
}

.nob-special-card__body {
  padding: 28px;
}

.nob-special-card__body h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color, #040618);
  margin-bottom: 12px;
  line-height: 1.4;
}

.nob-special-card__body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color, #585960);
  margin-bottom: 16px;
}

/* Featured card accent */
.nob-special-card--featured {
  border-color: rgba(255, 127, 38, 0.15);
}

/* ── Process Flow ───────────────────────────────────────────── */
.nob-process-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 24px;
    background: #ececec;
  border-radius: var(--at-radius-md, 16px);
  flex-wrap: wrap;
  justify-content: center;
}

.nob-process-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}

.nob-process-flow__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fe7f27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.nob-process-flow__step:hover .nob-process-flow__icon {

    background: #fe7f27;
}

.nob-process-flow__step span {
    font-size: 16px;
    font-weight: 400;
    color: #39393e;
}

.nob-process-flow__arrow {
  color: #000000;
  font-size: 18px;
}

/* ── PPP Section Styles ──────────────────────────────────────── */
#section-ppp {
    background: #dfe9f7;
}
#section-ppp .nob-section-header {
  border-bottom-color: rgba(124, 29, 133, 0.1);
}



#section-ppp .nob-detail-block {
  border-bottom: none;
}

/* PPP Visual Enhancement */
.nob-detail-block__visual--ppp {
  position: relative;
  height: 100%;
}

.nob-detail-block__visual--ppp figure {
  height: 100%;
  border-radius: var(--at-radius-lg, 20px);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(124, 29, 133, 0.12);
}

.nob-detail-block__visual--ppp figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nob-detail-block__visual--ppp .nob-swiper {
  border-radius: var(--at-radius-lg, 20px);
  box-shadow: 0 16px 48px rgba(124, 29, 133, 0.12);
  height: 100%;
}

.nob-detail-block__visual--ppp .nob-swiper .swiper-wrapper,
.nob-detail-block__visual--ppp .nob-swiper .swiper-slide {
  height: 100%;
}

.nob-detail-block__visual--ppp .nob-swiper .swiper-slide img {
  height: 100%;
  object-fit: cover;
}

/* ── Bento Grid (Interior Section Gallery) ──────────────────── */
.nob-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 316px 300px;
    gap: 16px;
    margin-top: 48px;
    padding-bottom: 100px;
}

.nob-bento-item {
  border-radius: var(--at-radius-lg, 20px);
  overflow: hidden;
  position: relative;
}

.nob-bento-item figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.nob-bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Large item spans 2 columns */
.nob-bento-item--large {
  grid-column: span 2;
}

/* Tall item spans 2 rows */
.nob-bento-item--tall {
  grid-row: span 2;
}

/* Mobile slider — hidden by default */
.nob-bento-slider {
  display: none;
  margin-top: 32px;
  padding-bottom: 60px;
}

.nob-bento-slider .nob-swiper .swiper-slide img {
  height: 280px;
  border-radius: var(--at-radius-lg, 20px);
}

.nob-bento-slider .swiper-pagination {
  position: relative;
  margin-top: 16px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .nob-section-header__desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .nob-section-header__title {
    font-size: 28px;
  }
  .nob-detail-block__content h3 {
    font-size: 23px;
  }
  .nob-detail-block__number {
    font-size: 60px;
  }
  .nob-swiper .swiper-slide img {
    width: 100%;
    height: 560px;

}
.nob-special-card__image img {
    width: 100%;
    height: 330px;
 }
}

@media (max-width: 991px) {
  .nob-bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 12px;
    margin-top: 40px;
    padding-bottom: 60px;
  }
  .nob-bento-item--large {
    grid-column: span 1;
  }
  .nob-bento-item--tall {
    grid-row: span 1;
  }
  .nob-section-header {
    padding: 100px 0 30px;
  }
  .nob-section-header__num {
    font-size: 36px;
  }
  .nob-section-header__title {
    font-size: 26px;
  }
  .nob-detail-block {
    padding: 60px 0 80px;
  }
  .nob-detail-block__content {
    padding-left: 0;
  }
  .nob-detail-block__visual img {
    height: 280px;
  }
  .nob-detail-block__visual--ppp {
    height: auto;
    margin-bottom: 32px;
  }
  .nob-detail-block__visual--ppp figure img {
    height: 360px;
  }
  .nob-detail-block__number {
    display: none;
  }
  .nob-process-flow {
    gap: 8px;
  }
  .nob-process-flow__icon {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
    .nob-swiper .swiper-slide img {
    width: 100%;
    height: 520px;

}
}

@media (max-width: 767px) {
  #section-turnkey {
    background: url('../images/bg-glass-tower-line.webp') center right / cover no-repeat;
  }
  .nob-bento-grid {
    display: none;
  }
  .nob-bento-slider {
    display: block;
  }
  .nob-section-header {
    padding: 80px 0 24px;
  }
  .nob-section-header__num {
    font-size: 32px;
  }
  .nob-section-header__title {
    font-size: 22px;
  }
  .nob-detail-block {
    padding: 40px 0 100px;
  }
  .nob-detail-block__visual img {
    height: 220px;
  }
  .nob-swiper .swiper-slide img {
    height: 280px;
  }
  .nob-detail-block__content h3 {
    font-size: 20px;
  }
  .nob-sub-item {
    padding: 18px;
  }
  .nob-sub-item h4 {
    font-size: 15px;
  }
  .nob-process-flow {
    padding: 16px;
    gap: 6px;
  }
  .nob-process-flow__step span {
    font-size: 10px;
  }
  .nob-process-flow__icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .nob-special-card__image img {
    height: 390px;
  }
  .nob-special-card__body {
    padding: 20px;
  }
  .nob-special-section {
    padding:100px 0;
  }
}
@media (max-width:515px) {

    .nob-special-card__image img {
        height: 300px;
    } 
}

/* ── Responsive: Interior Text & Gallery ─────────────────────── */
@media (max-width: 991px) {
}

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

@media (max-width: 575px) {
}/* ============================================================
   Portfolio Page — A&T design system
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────────── */
.pf-section {
  padding: 100px 0 120px;
  background: var(--bg-color, #f3f3f3);
}

/* ── Portfolio Grid ─────────────────────────────────────────── */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Portfolio Item ─────────────────────────────────────────── */
.pf-item {
  min-width: 0;
}

/* ── Gallery wrapper: contains main link + hidden extras ────── */
.pf-gallery {
  display: block;
}

.pf-extra {
  display: none;
}

/* ── Card ───────────────────────────────────────────────────── */
.pf-card {
  display: block;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(4, 6, 24, 0.07);
  box-shadow: 0 2px 12px rgba(4, 6, 24, 0.05);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  color: inherit;
}

.pf-gallery > a:first-child {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pf-card:hover {
  box-shadow: 0 16px 48px rgba(4, 6, 24, 0.12);
}

/* ── Thumbnail ──────────────────────────────────────────────── */
.pf-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pf-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pf-card:hover .pf-card__thumb img {
  transform: scale(1.06);
}

/* ── Hover overlay ──────────────────────────────────────────── */
.pf-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 24, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.pf-card:hover .pf-card__overlay {
  opacity: 0;
}

.pf-card__zoom {
  display: none;
}

/* ── Video play button (on thumb — same effect as home.html) ── */
.pf-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.pf-card__play::before,
.pf-card__play::after {
  content: '';
  position: absolute;
  top: -36%;
  left: -36%;
  width: 100%;
  height: 100%;
  border: 60px solid var(--white-color, #ffffff);
  opacity: 0.5;
  border-radius: 50%;
  transform: scale(0.6);
  z-index: -1;
  animation: pf-border-zooming 1.2s infinite linear;
}

.pf-card__play::after {
  animation-delay: 0.3s;
}

@keyframes pf-border-zooming {
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.pf-card__play i {
  font-size: 24px;
  color: var(--primary-color, #040618);
  margin-left: 2px;
  transition: all 0.3s ease-in-out;
}

.pf-card:hover .pf-card__play {
  background: rgba(255, 255, 255, 0.59);
}

.pf-card:hover .pf-card__play i {
  color: var(--white-color, #ffffff);
}

/* ── Card count badge (bottom-right on thumb) ───────────────── */
.pf-card__count {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(4, 6, 24, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  transition: background 0.3s;
}

.pf-card:hover .pf-card__count {
  background: var(--accent-secondary-color, #ff7f26);
  border-color: var(--accent-secondary-color, #ff7f26);
}

/* ── Card meta (below image) ────────────────────────────────── */
.pf-card__meta {
  padding: 20px 22px 22px;
}

.pf-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pf-badge--blue {
  background: rgba(40, 105, 199, 0.08);
  color: var(--at-blue-300, #2869c7);
}

.pf-badge--green {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

.pf-badge--amber {
  background: rgba(255, 127, 38, 0.08);
  color: var(--accent-secondary-color, #ff7f26);
}

.pf-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color, #040618);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pf-card__loc {
  font-size: 14px;
  color: var(--text-color, #585960);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf-card__loc i {
  color: var(--accent-secondary-color, #ff7f26);
  font-size: 16px;
}

/* ── Magnific Popup custom tweaks ───────────────────────────── */
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.92;
  background: #040618;
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.95);
  opacity: 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

/* Image container */
้ {
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

.mfp-zoom-in .mfp-figure img {
  border-radius: 0px;
  max-height: 770px;
}

/* Magnific Popup's image type auto-applies a zoom-out (magnifying glass)
   cursor to the whole popup via .mfp-zoom-out-cur. Disable it for now —
   use a normal pointer everywhere in the popup instead. */
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: pointer !important;
}

.mfp-zoom-in img.mfp-img {
  max-width: min(720px, 90vw) !important;
  max-height: calc(100vh - 160px) !important;
  padding: 16px 0 8px !important;
  /* border-radius: 16px; */
  object-fit: contain;
}

.mfp-zoom-in .mfp-figure::after {
  display: none;
}

/* Title / Caption */
.mfp-zoom-in .mfp-title {
  font-family: 'FC Minimal', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  padding: 20px 20px 6px;
  line-height: 1.4;
  letter-spacing: 0.2px;
}

/* Counter */
.mfp-zoom-in .mfp-counter {
  font-family: 'FC Minimal', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  width: 100%;
  padding: 4px 20px 20px;
}

/* Navigation arrows */
.mfp-zoom-in .mfp-arrow {
  width: 52px;
  height: 52px;
  top: 50%;
  margin-top: -26px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.mfp-zoom-in .mfp-arrow-left {
  left: 24px;
}

.mfp-zoom-in .mfp-arrow-right {
  right: 24px;
}

.mfp-zoom-in .mfp-arrow:hover {
  opacity: 1;
}

.mfp-zoom-in .mfp-arrow::before,
.mfp-zoom-in .mfp-arrow::after {
  border: none !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 52px !important;
  height: 52px !important;
  position: absolute !important;
}

.mfp-zoom-in .mfp-arrow-left::before,
.mfp-zoom-in .mfp-arrow-right::before {
  content: '' !important;
  width: 52px !important;
  height: 52px !important;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50% !important;
  display: block !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s ease;
}

.mfp-zoom-in .mfp-arrow-left:hover::before,
.mfp-zoom-in .mfp-arrow-right:hover::before {
  background: #ffffff;
  border-color: #ffffff !important;
}

.mfp-zoom-in .mfp-arrow-left:hover::after,
.mfp-zoom-in .mfp-arrow-right:hover::after {
  color: #040618;
}

.mfp-zoom-in .mfp-arrow-left::after {
  content: '\f053' !important;
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  font-size: 16px;
  color: #ffffff;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
  background: none !important;
}

.mfp-zoom-in .mfp-arrow-right::after {
  content: '\f054' !important;
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  font-size: 16px;
  color: #ffffff;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
  background: none !important;
}

/* Close button */
.mfp-zoom-in .mfp-close {
  width: 48px;
  height: 48px;
  background: var(--accent-secondary-color, #ff7f26) !important;
  border: none !important;
  border-radius: 50% !important;
  color: transparent !important;
  font-size: 0px !important;
  line-height: 48px;
  text-align: center;
  text-indent: -9999px;
  top: 20px;
  right: 20px;
  opacity: 1;
  padding: 0 !important;
  position: absolute;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.mfp-zoom-in .mfp-close::after {
  content: '\f00d';
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  font-size: 18px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
}

.mfp-zoom-in .mfp-close:hover {
  transform: scale(1.15);
}

/* Bottom bar with title + counter */
.mfp-zoom-in .mfp-bottom-bar {
  margin-top: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .mfp-zoom-in .mfp-title {
    font-size: 15px;
    padding: 14px 16px 4px;
  }
  .mfp-zoom-in .mfp-counter {
    font-size: 12px;
    padding: 2px 16px 14px;
  }
  .mfp-zoom-in .mfp-arrow {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }
  .mfp-zoom-in .mfp-arrow::before,
  .mfp-zoom-in .mfp-arrow::after {
    width: 42px !important;
    height: 42px !important;
  }
  .mfp-zoom-in .mfp-arrow-left::before,
  .mfp-zoom-in .mfp-arrow-right::before {
    width: 42px !important;
    height: 42px !important;
  }
  .mfp-zoom-in .mfp-arrow-left::after,
  .mfp-zoom-in .mfp-arrow-right::after {
    width: auto !important;
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }
    .mfp-zoom-in .mfp-close {
        width: 40px;
        height: 40px;
        font-size: 22px;
        line-height: 40px;
        top: -32px;
        right: 4px;
    }
  .mfp-zoom-in .mfp-figure {
    border-radius: 0px;
  }
  .mfp-zoom-in .mfp-figure img {
    border-radius: 0px;
  }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .pf-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .pf-section {
    padding: 80px 0 100px;
  }

  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .pf-section {
    padding: 60px 0 80px;
  }

  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .pf-card__meta {
    padding: 16px;
  }

  .pf-card__title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .pf-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Portfolio Equal Height Cards ───────────────────────────── */
.pf-gallery {
  height: 100%;
}

.pf-gallery > a:first-child {
  height: 100%;
}

.pf-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pf-card__meta {
  flex: 1;
}


/* ============================================================
   COOKIES POLICY — Page Styles (ck-)
   ============================================================ */

.ck-section {
	padding: 80px 0 120px;
	background-color: #ffffff;
}

/* Sticky aside — sticky อยู่ที่ column ไม่ใช่ card
   เพื่อให้ parent สูงพอสำหรับ sticky ทำงาน */
.ck-col-aside {
	position: sticky;
	top: 132px;
	align-self: flex-start;
	height: fit-content;
}

/* ── File card (aside) ── */
.ck-filecard {
	padding: var(--card-padding, 28px);
	border: 1px solid #f0f0f0;
	border-radius: var(--card-radius, var(--radius-xl, 20px));
	background-color: #ffffff;
	box-shadow: var(--at-shadow-md, 0 4px 16px rgba(0,0,0,0.10));
	height: 100%;
	display: flex;
	flex-direction: column;
}
.ck-filecard .ck-filecard-actions {
	margin-top: auto;
	padding-top: 20px;
}
.ck-filecard-actions .btn-default::before {
	background-image: url('../images/icon-btn-download.svg');
}
.ck-filecard-actions .btn-default:hover::before {
	transform: translateY(-50%) translateY(3px);
	filter: brightness(0) invert(1);
}
/* section-sub-title ถูก at-theme.css บังคับเป็นขาว — override กลับเป็นสีส้มในบริบทการ์ด */
.ck-filecard .section-sub-title {
	color: var(--accent-secondary-color, #ff7f26) !important;
}
.ck-filecard .section-sub-title::before {
	background-color: var(--accent-secondary-color, #ff7f26) !important;
}
.ck-filecard-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--accent-secondary-color, #ff7f26);
	color: #ffffff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	transition: color 0.2s;
}
.ck-filecard:hover .ck-filecard-icon {
	color: #000000;
}
.ck-filecard-title {
	font-size: 18px;
	line-height: 1.4;
	margin: 10px 0 8px;
	color: var(--color-text-primary, #212529);
}
.ck-filecard-meta {
	font-size: 14px;
	margin-bottom: 20px;
	color: var(--text-color, #585960);
}
.ck-filecard-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
}

/* ── Numbered list — CSS counter ── */
.ck-list {
	counter-reset: ck;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ck-list > li {
	counter-increment: ck;
	padding: 48px 0;
	border-top: 1px solid var(--bg-color, #f3f3f3);
}
.ck-list > li:first-child {
	padding-top: 0;
	border-top: none;
}
.ck-list > li:last-child {
	padding-bottom: 0;
}

.ck-heading {
	font-size: clamp(20px, 2.5vw, 28px);
	line-height: 1.3;
	margin: 0 0 20px;
}
.ck-heading::before {
	content: counter(ck) ". ";
	color: #070818;
}
.ck-section .ck-heading::before,
.cp-contact-section .ck-heading::before {
	content: none;
}
.ck-list .ck-heading::before {
	content: counter(ck) ". ";
}

.ck-term {
	font-weight: 600;
	color: var(--primary-color, #040618);
	margin-bottom: 6px;
}

.ck-section p            { margin-bottom: 12px; }
.ck-section p:last-child { margin-bottom: 0; }

.ck-section a {
	color: var(--at-blue-300, #2869c7);
	word-break: break-word;
	transition: color 0.2s;
}
.ck-section a:hover { color: #ff7f26; }.ck-section .btn-default,
.ck-section .btn-default:hover{ text-decoration: none; }

.ck-bullets {
	list-style: disc;
	padding-left: 22px;
	margin: 0 0 12px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--Text-Black-body, #585960);
}
.ck-bullets li { margin-bottom: 8px; }
.ck-bullets li::marker { color: #ff7f26; }

/* ── Browser table ── */
.ck-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
.ck-table {
	width: 100%;
	border-collapse: collapse;
}
.ck-table th,
.ck-table td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
	border: 1px solid #e0e0e0;
	font-weight: 300;
	line-height: 1.5;
}
.ck-table th {
	background-color: #ff7f27;
	font-weight: 600;
	color: #ffffff;
	white-space: nowrap;
}
.ck-table td:first-child {
	font-weight: 500;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.ck-table-wrap { overflow-x: visible; }
	.ck-table thead { display: none; }
	.ck-table,
	.ck-table tbody,
	.ck-table tr,
	.ck-table td { display: block; width: 100%; }
	.ck-table tr {
		margin-bottom: 12px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		overflow: hidden;
	}
	.ck-table td {
		border: none;
		border-bottom: 1px solid #f0f0f0;
		white-space: normal;
		padding: 10px 14px;
	}
	.ck-table td:first-child {
		background-color: #ff7f27;
		color: #ffffff;
		font-weight: 600;
		white-space: normal;
		border-bottom: none;
	}
	.ck-table td:last-child { border-bottom: none; }
}

.ck-contact-card {
	padding: 24px 28px;
	border: 1px solid #e8e8e8;
	border-radius: var(--card-radius, 20px);
	background-color: #fafafa;
	height: 100%;
}
.ck-contact-card-label {
	font-weight: 600;
	color: var(--accent-secondary-color, #ff7f26);
	text-transform: uppercase;
	margin-bottom: 12px;
}
.ck-contact-card-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color, #040618);
	margin: 0 0 16px;
	line-height: 1.4;
}
.ck-contact-card-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-color, #585960);
	margin: 0;
}
.ck-contact-card-body a {
	color: var(--at-blue-300, #2869c7);
	word-break: break-all;
    font-size: 16px;
}
.ck-contact-card-body a:hover { color: #ff7f26; }
.ck-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}
.ck-contact-row:last-child { margin-bottom: 0; }
.ck-contact-icon {
	flex-shrink: 0;
	width: 16px;
	margin-top: 6px;
	color: var(--accent-secondary-color, #ff7f26);
	text-align: center;
}

@media (max-width: 991px) {
	.ck-section      { padding: 60px 0 80px; }
	.ck-col-aside    { position: static; height: auto;  margin-top: 40px; padding-top: 40px; }
	.ck-filecard     { margin-top: 0; }
}


/************************************/
/***  Complaint Form Page css     ***/
/************************************/

.complaint-form .form-label { font-weight: 500; color: var(--primary-color, #040618); margin-bottom: 8px; font-size: 16px; }
.complaint-form .form-label .required { color: #e65757; margin-left: 4px; }
.complaint-form .form-control,
.complaint-form .form-select { border: 1px solid #dee2e6; border-radius: 12px; padding: 14px 16px; font-size: 16px; color: var(--primary-color, #040618); transition: border-color 0.3s; }
.complaint-form .form-control:focus,
.complaint-form .form-select:focus { border-color: var(--at-orange, #ff7f26); box-shadow: 0 0 0 3px rgba(255, 127, 38, 0.1); }
.complaint-form textarea.form-control { min-height: 160px; resize: vertical; }
.complaint-form .form-check-input:checked { background-color: var(--at-orange, #ff7f26); border-color: var(--at-orange, #ff7f26); }
.file-upload-area { border: 2px dashed #dee2e6; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.file-upload-area:hover, .file-upload-area.dragover { border-color: var(--at-orange, #ff7f26); background-color: rgba(255, 127, 38, 0.03); }
.file-upload-area i { font-size: 32px; color: var(--at-orange, #ff7f26); margin-bottom: 12px; }
.file-upload-area p { margin: 0; color: var(--text-color, #585960); font-size: 14px; }
.file-upload-area .file-upload-btn { color: var(--at-orange, #ff7f26); font-weight: 600; text-decoration: underline; cursor: pointer; }
.file-list { list-style: none; padding: 0; margin-top: 12px; }
.file-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-color, #f3f3f3); border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
.file-list li .remove-file { color: #e65757; cursor: pointer; font-size: 16px; }
.complaint-note { background: var(--bg-color, #f3f3f3); border-radius: 12px; padding: 24px; margin-top: 32px; }
.complaint-note h4 { font-size: 16px; font-weight: 600; color: var(--primary-color, #040618); margin-bottom: 12px; }
.complaint-note p, .complaint-note li { font-size: 14px; color: var(--text-color, #585960); line-height: 1.7; }
.complaint-success { display: none; text-align: center; padding: 60px 20px; }
.complaint-success i { font-size: 64px; color: #28b446; margin-bottom: 24px; }
.complaint-success h3 { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
.complaint-success p { color: var(--text-color, #585960); }
.consent-text { font-size: 16px; color: var(--text-color, #585960); line-height: 1.6; }


/* ============================================================
   Careers Page
   ============================================================ */

/* Benefits */
.cr-benefits {
    padding: 100px 0 100px;
    background: #ffffff;
}
.cr-benefit-card {
	background: #ffffff;
	border-radius: var(--at-radius-xl, 20px);
	padding: 36px 24px 32px;
	text-align: center;
	box-shadow: var(--at-shadow-md, 0 4px 16px rgba(0,0,0,0.10));
	height: 100%;
	transition: transform 0.25s, box-shadow 0.25s;
}
.cr-benefit-card:hover {
	box-shadow: var(--at-shadow-lg, 0 8px 32px rgba(0,0,0,0.12));
}
.cr-benefit-icon {
	width: 56px;
	height: 56px;
	min-width: 56px;
	aspect-ratio: 1;
	border-radius: 999px;
	background: var(--at-orange, #ff7f26);
	color: #ffffff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}
.cr-benefit-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-violet-250, #7c1d85);
	transform: scale(0);
	transition: transform 0.4s ease;
	z-index: 0;
}
.cr-benefit-card:hover .cr-benefit-icon::before {
	transform: scale(1);
}
.cr-benefit-icon i {
	position: relative;
	z-index: 1;
}
.cr-benefit-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color, #040618);
	line-height: 1.5;
	margin-bottom: 8px;
}

/* Section Header */
.cr-section-label {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--at-violet-100, #e4dcea);
	border-radius: 100px;
	padding: 8px 16px 9px 32px;
	font-size: 16px;
	font-weight: 300;
	color: #212529;
	position: relative;
	margin-bottom: 20px;
}
.cr-section-label::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--at-orange, #ff7f26);
}
.cr-section-label--light {
	background-color: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.cr-section-title {

	font-size: 40px;
	font-weight: 600;
	color: var(--primary-color, #040618);
	margin-bottom: 16px;
	line-height: 1.2;
}



/* Jobs Section */
.cr-jobs {
    padding: 100px 0 100px;
    background: #2e1185;
}

/* Accordion */
.cr-accordion .accordion-item {
	border: 1px solid var(--color-grey-50, #ececec);
	border-radius: var(--at-radius-xl, 20px) !important;
	margin-bottom: 16px;
	overflow: hidden;
	box-shadow: var(--at-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
	transition: box-shadow 0.2s;
}
.cr-accordion .accordion-item:hover {
	box-shadow: var(--at-shadow-md, 0 4px 16px rgba(0,0,0,0.10));
}
.cr-accordion .accordion-button {
	background: #ffffff;
	padding: 22px 28px;
	border-radius: 0 !important;
	box-shadow: none !important;
	gap: 16px;
	align-items: flex-start;
}
.cr-accordion .accordion-button:not(.collapsed) {
	background: #fff8f3;
	border-bottom: 1px solid #ffe0c8;
}
.cr-accordion .accordion-button::after {
	margin-left: auto;
	flex-shrink: 0;
	align-self: center;
	width: 36px;
	height: 36px;
	background-color: rgba(255, 127, 38, 0.1);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff7f26'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.3s ease;
}
.cr-accordion .accordion-button:not(.collapsed)::after {
	background-color: var(--at-orange, #ff7f26);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.cr-accordion .accordion-body {
	padding: 32px 28px 36px;
	background: #ffffff;
}

/* Job header inside accordion */
.cr-job-icon-wrap {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--at-orange, #ff7f26);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}
.cr-job-icon-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--color-violet-250, #7c1d85);
	transform: scale(0);
	transition: transform 0.4s ease;
	z-index: 0;
}
.accordion-button:not(.collapsed) .cr-job-icon-wrap::before {
	transform: scale(1);
}
.cr-job-icon-wrap i {
	position: relative;
	z-index: 1;
}
.cr-job-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color, #040618);
    margin: 0 0 16px;
    line-height: 1.5;
}
.accordion-button:not(.collapsed) .cr-job-title {
	color: var(--at-orange, #ff7f26);
}
.cr-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cr-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
.cr-badge--orange { background: #fff2e9; color: #ff7f26; }
.cr-badge--blue   { background: #e8f0fb; color: #2869c7; }
.cr-badge--teal   { background: #e6f4f1; color: #1a7f6e; }

/* Job content inside body */
.cr-content-label {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--primary-color, #040618);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.cr-content-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #ffe0c8;
}
.cr-job-list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}
.cr-job-list li {
	padding: 8px 0 8px 22px;
	position: relative;
	color: var(--Text-Black-body, #585960);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	border-bottom: 1px solid var(--color-grey-50, #f0f0f0);
}
.accordion-item .accordion-body ul li {
	color: var(--Text-Black-body, #585960);
	list-style: none;
}
.cr-job-list li:last-child { border-bottom: none; }
.cr-job-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 17px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--at-orange, #ff7f26);
}

.btn-apply-job::before {
	background-image: url('../images/icon-btn-arrow.svg') !important;
}
.btn-apply-job:hover::before {
	transform: translateY(-50%) rotate(45deg);
	filter: brightness(0) invert(1);
}

/* How to Apply Section */
.cr-apply-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #7d1e85 0%, #7c1d85 100%);
    position: relative;
    overflow: hidden;
}
/* Slider height override for careers apply section */
.cr-apply-section .nob-detail-block__visual img {
	height: 500px;
}
.cr-apply-section .nob-detail-block__visual {
	margin-bottom: 0;
}
.cr-contact-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 20px;
	padding: 32px 28px;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	height: 100%;
	overflow: hidden;
	transition: background 0.25s, border-color 0.25s;
}
.cr-contact-card:hover {
	background: rgba(255,127,38,0.10);
	border-color: rgba(255,127,38,0.30);
}
.cr-contact-card .cp-contact-item-icon {
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 999px;
	background: var(--at-orange, #ff7f26);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
 
}
.cr-contact-card .cp-contact-item-icon::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-violet-250, #7c1d85);
	transform: scale(0);
	transition: transform 0.4s ease;
	z-index: 0;
	opacity: 0;
}
.cr-contact-card:hover .cp-contact-item-icon::before {
	transform: scale(1);
	opacity: 1;
}
.cr-contact-card .cp-contact-item-icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	position: relative;
	z-index: 1;
}
.cr-contact-card .cp-contact-item-body {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.cr-contact-label {
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 6px;
}
.cr-contact-value {
	color: #ffffff;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	margin: 0;
}
.cr-contact-value:hover { color: #ff7f26; }
p.cr-contact-value { color: #ffffff !important; cursor: default; }
p.cr-contact-value:hover { color: #ffffff !important; }
.cr-contact-sub {
	font-size: 14px;
	font-weight: 300;
	color: rgba(255,255,255,0.5);
	margin-top: 4px;
	margin-bottom: 0;
}

/* Careers Responsive */
@media (max-width: 1199px) {
	.cr-section-title { font-size: 32px; }
	.cr-benefits { padding: 80px 0; }
	.cr-jobs { padding: 80px 0; }
	.cr-apply-section { padding: 80px 0;}
	.cr-apply-section .nob-detail-block__visual img { height: 420px; }
	.cr-contact-card { padding: 24px 20px; gap: 16px; }
	.cr-contact-value { font-size: 16px; }
	.cr-contact-sub { font-size: 13px; }
}

@media (max-width: 991px) {
	.cr-section-title { font-size: 28px; }
	.cr-contact-card { flex-direction: column; gap: 14px; }
	.btn-apply-job { margin-top: 16px; }
}

@media (max-width: 767px) {
	.cr-benefits { padding: 80px 0; }
	.cr-section-title { font-size: 24px; }
	.cr-jobs { padding: 80px 0 ; }
	.cr-accordion .accordion-button { padding: 16px 18px; gap: 12px; flex-direction: column; align-items: flex-start; }
	.cr-accordion .accordion-button .cr-job-icon-wrap { align-self: flex-start; }
	.cr-accordion .accordion-body { padding: 20px 18px 24px; }
	.cr-job-icon-wrap { width: 54px; height: 54px; font-size: 18px; }
	.cr-job-title { font-size: 15px; }
	.cr-badges { gap: 4px; }
	.cr-badge { font-size: 14px; padding: 4px 10px; margin-bottom: 4px; }
	.cr-content-label { font-size: 16px; }
	.cr-job-list li { font-size: 15px; padding: 6px 0 6px 18px; }
	.cr-job-list li::before { top: 14px; width: 6px; height: 6px; }
	.cr-apply-section { padding: 80px 0; }
	.cr-apply-section .nob-detail-block__visual img { height: 320px; }
	.cr-contact-card { padding: 20px 16px; gap: 14px; }
	.cr-contact-card .cp-contact-item-icon { width: 56px; height: 56px; min-width: 56px; }
	.cr-contact-value { font-size: 15px; }
	.cr-benefit-card { padding: 28px 20px 24px; }
	.cr-benefit-icon { width: 56px; height: 56px; min-width: 56px; font-size: 22px; }
	.cr-benefit-title { font-size: 16px; }
}

@media (max-width: 480px) {
	.cr-accordion .accordion-button { padding: 14px 14px; gap: 10px; flex-wrap: wrap; }
	.cr-accordion .accordion-body { padding: 16px 14px 20px; }
	.cr-job-icon-wrap { width: 54px; height: 54px; font-size: 18px; }
	.cr-job-title { font-size: 16px; margin-bottom: 6px; }.btn-apply-job{ margin-top: 20px; margin-bottom: 8px; }
}

/* IR Responsive */
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}

/* ============================================================
   CERTIFICATIONS & AWARDS PAGE — A&T
   Styles for certifications-and-awards.html
   ============================================================ */


.cb-intro-section.cb-intro-section--compact {
  padding: 80px 0 30px;
}

.awards-certifications-section {
  padding: 0 0 100px;
  /* background-color: var(--at-grey-95, #f3f3f3); */
}

.awards-cert-grid {
  margin-top: 0;
  /* .row is display:flex (Bootstrap 5) — margin-top from the g-4 gutter
     doesn't reliably create a gap between wrapped flex lines, so force
     it via row-gap on the flex container itself at every breakpoint
     where cards can wrap (not just mobile). */
  row-gap: 40px;
}


.awards-cert-card {
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(4, 6, 24, 0.07);
  box-shadow: 0 2px 12px rgba(4, 6, 24, 0.05);
  height: 100%;
  cursor: pointer;
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.awards-cert-card:focus-visible {
  outline: 2px solid var(--at-blue-300, #2869c7);
  outline-offset: 3px;
}

.awards-cert-card:hover {
  box-shadow: 0 16px 48px rgba(4, 6, 24, 0.12);
}

.awards-cert-card-icon {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--at-grey-95, #f3f3f3) url('../images/certifications-and-awards/bg-certifications.webp') center / cover no-repeat;
}

.awards-cert-card-icon img {
  max-width: 55%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.awards-cert-card:hover .awards-cert-card-icon img {
  transform: scale(1.08);
}

.awards-cert-card-body {
  padding: 24px 28px 28px;
  text-align: left;
}

/* Category tag — same pill language as .pf-badge on the portfolio page */
.awards-cert-card-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: rgba(40, 105, 199, 0.08);
  color: var(--at-blue-300, #2869c7);
}

.awards-cert-card-body h3 {
  font-family: 'FC Minimal', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary-color, #040618);
  margin-bottom: 6px;
  text-align: left;
}

.awards-cert-card-body p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--at-grey-700, #585960);
  margin-bottom: 0;
  text-align: left;
}

/* Certifications & Awards — Responsive */
@media (max-width: 991.98px) {
  .awards-certifications-section {
    padding: 0 0 60px;
  }
}

@media (max-width: 767.98px) {
  .cb-intro-section.cb-intro-section--compact {
    padding: 60px 0 20px;
  }

  .awards-certifications-section {
    padding: 0 0 50px;
  }

  .awards-cert-card-body {
    padding: 20px 22px 22px;
  }
}

@media (max-width: 575.98px) {
  .awards-cert-card {
    border-radius: 16px;
  }

  .awards-cert-card-body {
    padding: 20px;
  }

  .awards-cert-card-body h3 {
    font-size: 19px;
  }

  .awards-cert-card-icon {
    padding: 24px;
  }
}