/*============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*/