/*============Glogbal Style================ */
html,
body {
height: 100%;
font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
}

p {
font-family:"微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande";
font-size: 18px;
line-height: 2.3rem;
color: #000;
margin: 0;
}


/* --- Brand Colors Definition (Tailwind Slate/Cyan mappings) --- */
:root {
--brand-dark: #0f172a;   /* Slate 900 */
--brand-darker: #020617; /* Darker Slate */
--brand-gray: #1e293b;   /* Slate 800 */
--brand-blue: #0056b3;
--brand-cyan: #06b6d4;
--brand-cyan-hover: #22d3ee;
--brand-purple:#6166be;
}

.text-brand-dark { color: var(--brand-dark); }
.text-brand-cyan { color: var(--brand-cyan); }
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-gray { background-color: var(--brand-gray); }




/* Section Spacing */
section {
padding: 6rem 0; /* Equivalent to py-20 */
}

/*主banner start*/
.programming-banner-cover{
padding:18% 0;
background-image:url("../images/iot_security/2025_iot_security/ic_programming/main_banner_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.banner-title-position{
position: absolute;
top: 26%;
left:0;
}

.progamming-banner-title h1{
font-size: 70px;
line-height: 5.6rem;
color: #88F1FF;
font-weight: 700;
font-family: 'Roboto', sans-serif;
margin-bottom: 1%;
text-align: center;	
}

.banner-subtitle-h1{
font-size: 22px;
color: #fff;
text-align: center;
display: block;
margin-bottom: 2%;
}

/*主banner end*/


.main-title h2, .service-title h2,.why-changing-title h2,.Integration-title h2,.support-title h2,.programming-chip-title h2,.logo-title h2{
font-size:48px;
line-height: 3rem;
}



/* Card Hover Effects */
.hover-card {
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.hover-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}



/* Buttons */
.btn-brand-cyan {
background-color: var(--brand-cyan);
color: var(--brand-dark);
font-weight: 600;
border: none;
transition: all 0.3s;
}
.btn-brand-cyan:hover {
background-color: var(--brand-cyan-hover);
color: var(--brand-dark);
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.5);
}

.btn-outline-light-custom {
border: 1px solid #64748b;
color: white;
}
.btn-outline-light-custom:hover {
background-color: #1e293b;
border-color: #1e293b;
}



/* Icon Boxes */
.icon-box {
width: 85px;
height: 85px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
border-radius: 50px ;
border:2px solid #84c3f7;
}

.icon-box img{
width: 65%;
}

/* Grid Gaps fix for Bootstrap 4 */
.gap-4-custom > * {
margin-right: 1rem;
}
.gap-4-custom > *:last-child {
margin-right: 0;
}

/* Custom border for dark cards */
.border-dark-custom {
border: 1px solid #334155 !important;
}
.hover-border-cyan:hover {
border-color: var(--brand-cyan) !important;
}


.word-break-h1,.word-break-banner-subtitle-h1{
display: block;
}



/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.banner-title-position{
top: 24%;
}

	
	
}
/*max-width: 1400px*/
@media screen and (max-width: 1400px) {
.banner-title-position{
top: 20%;
}
.progamming-banner-title h1{
font-size: 60px;
line-height: 4.8rem;
}
.banner-subtitle-h1{
font-size: 20px;
line-height: 2rem;
letter-spacing: -1px;
}	

}


/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {

.programming-banner-cover {
padding: 25% 0;
}
.banner-title-position{
top: 22%;
}		
.progamming-banner-title h1{
font-size: 52px;
line-height: 4rem;
}
.banner-subtitle-h1{
font-size: 16px;
line-height: 2rem;
letter-spacing: -1px;
}	

}


/*Medium devices (tablets, less than 992px)*/

/*.col<576px(Extra small)/ .col-sm-≥576px(Small)/.col-md-≥768px(Medium)/
.col-lg-≥992px(Large)/.col-xl-≥1200px(Extra large)*/
@media screen and (max-width: 991.98px) {
.programming-banner-cover {
padding: 30% 0;
line-height: 3rem;
}
.banner-title-position{
top: 22%;
left:2%;
}		
.progamming-banner-title h1{
font-size: 42px;
line-height: 3.5rem;
}
.banner-subtitle-h1{
font-size: 15px;
line-height: 1.8rem;
letter-spacing: -1px;
}	

.word-break-banner-subtitle-h1{
display:inline;
}	

.main-title h2, .service-title h2,.why-changing-title h2,.Integration-title h2,.support-title h2,.programming-chip-title h2,.logo-title h2{
font-size:38px;
line-height: 3rem;
}	
	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 

section {
padding: 4rem 0px;
}
	
.banner-title-position{
top: 10%;
left:1%;
}	
	
.programming-banner-cover{
padding:60% 0;
background-image:url("../images/iot_security/2025_iot_security/ic_programming/main_banner_phone_bg.png");
background-size: cover;
background-position: center center;
background-color: #000;
position: relative;
}

.progamming-banner-title h1{
font-size: 45px;
line-height: 3.5rem;
margin-bottom: 2%;
}


	
.word-break-banner-subtitle-h1{
display:block;
}		
	
.word-break-h2-phone,.word-break-subtitle-h2-phone{
display: block;
}
	
.main-title p, .service-title p,.why-changing-title p,.Integration-title p,.support-title p,.programming-chip-title p,.logo-title p{
font-size:20px;
line-height: 2rem;
}		
}

/*Extra small devices (portrait phones, less than 576px)*/

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

.banner-title-position{
top: 7%;
left:0;
}	
	
	
.programming-banner-cover{
padding:78% 0;
background-image:url("../images/iot_security/2025_iot_security/ic_programming/main_banner_phone_bg.png");
}

	
.progamming-banner-title h1{
font-size: 34px;
line-height: 3rem;
}
	
.main-title h2, .service-title h2,.why-changing-title h2,.Integration-title h2,.support-title h2,.programming-chip-title h2,.logo-title h2{
font-size:30px;
line-height: 2.5rem;
}	
	
	
.main-title p, .service-title p,.why-changing-title p,.Integration-title p,.support-title p,.programming-chip-title p,.logo-title p{
font-size:21px;
line-height: 2rem;
}	
	
.word-break-banner-subtitle-h1-phone{
display: inline;
}

}

/*Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width*/

/*=====================================================
  CSP 合規性調整：原 inline style 改為外部 class
  (公司資安政策不允許 style="" 內嵌樣式)
=====================================================*/

/* Google Tag Manager noscript iframe 標準隱藏樣式 */
.gtm-hidden {
	display: none;
	visibility: hidden;
}

/* 品牌青色文字標籤（Services/PKI/Cloud Connector 小標） */
.text-cyan-label {
	color: var(--brand-cyan);
}

/* 服務卡片右上角等級徽章 */
.badge-top-right {
	top: 0;
	right: 0;
}

/* 服務卡片圖示 - 大尺寸青色（原本被註解掉的icon預留樣式） */
.icon-large-cyan {
	color: var(--brand-cyan);
	font-size: 2.5rem;
}

/* Level 2 推薦卡片 - 青色邊框與上移效果 */
.card-featured-cyan {
	border: 1px solid var(--brand-cyan);
	transform: translateY(-10px);
}

/* Level 2 推薦卡片右上角徽章（青色底） */
.badge-top-right-cyan {
	top: 0;
	right: 0;
	background-color: var(--brand-cyan);
	color: #0f172a;
}

/* 紫色圖示底色（Why Changingtec 區塊icon） */
.bg-purple-icon {
	background-color: var(--brand-purple) !important;
}

/* 架構示意圖面板最小高度 */
.diagram-panel {
	min-height: 300px;
}

/* 示意圖前景層級 */
.z-index-2 {
	z-index: 2;
}

/* 示意圖圓形節點（KMS伺服器/安全晶片，70x70） */
.circle-70 {
	width: 70px;
	height: 70px;
	font-size: 2rem;
}

/* 進度條高度 */
.progress-thin {
	height: 16px;
}

/* 進度條滿版寬度 */
.progress-full {
	width: 100%;
}

/* 示意圖背景網格底紋 */
.grid-bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
	background-size: 20px 20px;
	opacity: 0.3;
	z-index: 1;
}

/* Integration 區塊 icon 容器（64x64） */
.icon-box-64 {
	min-width: 64px;
	height: 64px;
	font-size: 2rem;
}

/* Applications Matrix 圓形紫色大icon */
.icon-circle-purple-lg {
	font-size: 2rem;
	background-color: var(--brand-purple) !important;
}

/* 支援廠牌 logo 區塊間距 */
.gap-2rem {
	gap: 2rem;
}