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

.text-purple{
color: #6166be;
}

.bg-black{
background:#0f172a;
}

.bg-purple{
background:#6166be;
}

.bg-light-green{
background-color: #06b6d4 !important;	
}
.border-light-green {
border-color:#06b6d4;
}	

.border-purple {
border-color: #6166be !important;
}


.service-container {
  max-width: 1500px;
}


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

.banner-title-position{
position: absolute;
top: 28%;
left:2%;
}

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

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

/*主banner end*/


.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:48px;
line-height: 4rem;
}

.main-subtitle ,.hardware-subtitle,.advance-solution-subtitle,.service-subtitle,.lifecycle-subtitle,.compliance-subtitle,.production-subtitle{
display: block;
font-size: 24px;
line-height: 2.4rem;
}



.production-bg-cover{
padding: 5% 0 5% 0;
}


        
/* Custom Colors matching original design */
.text-primary-custom { color: #6166be; }
.bg-primary-custom { background-color: #6166be; }
.btn-primary-custom {
background-color: #6166be;
border-color: #6166be;
color: white;}


.btn-primary-custom:hover {
background-color: #3a45a5;
border-color: #3a45a5;
}



/* 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;
}

.card:hover {
transition: all 0.3s ease;	
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
border-color:#17a2b8;
}

.icon-box {
width: 75px;
height: 75px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.2rem;
border-radius: 15px ;
border:2px solid #84c3f7;
}

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


.card-body{
font-size:17px;
line-height: 2rem;
}




/*media query*/

/*Large devices (desktops, less than 1200px)for筆電*/
@media screen and (max-width: 1600px) {
.matter-banner-title h1{
font-size: 50px;
line-height: 4rem;
}
.banner-subtitle-h1{
font-size: 18px;
color: #fff;
text-align: center;
display: block;
margin-bottom: 2%;
}
	
}
/*max-width: 1400px*/
@media screen and (max-width: 1400px) {
	
/*
.container-fluid{
width: 1140px;
}	
*/
	
.banner-title-position{
position: absolute;
top: 25%;
left:1%;
}
	
.matter-banner-title h1{
font-size: 40px;
line-height: 3.5rem;
}
.banner-subtitle-h1{
font-size: 15px;
margin-bottom: 2%;
}
.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:45px;
line-height: 3.5rem;
}
	
.main-subtitle,.hardware-subtitle,.advance-solution-subtitle,.service-subtitle,.lifecycle-subtitle,.compliance-subtitle,.production-subtitle{
font-size:23px;
line-height: 2.3rem;
}	

}


/*Large devices (desktops, less than 1199.98)*/
@media screen and (max-width: 1199.98px) {
.matter-banner-cover {
padding: 22% 0;
}	
.banner-title-position{
top: 25%;
left:1%;
}

.matter-banner-title h1{
font-size: 35px;
line-height: 3.2rem;
}
	
.banner-subtitle-h1{
font-size: 15px;
margin-bottom: 2%;
}
	
h4{
line-height: 2.3rem;
}	




/*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) {
.matter-banner-title h1{
font-size: 28px;
line-height: 2.4rem;
}
.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:33px;
line-height: 3rem;
}
	
}


/*Small devices (landscape phones, less than 768px)*/
@media screen and (max-width: 767.98px) { 
.banner-title-position{
top: 5%;
left:4%;
}

.matter-banner-cover{
padding:62% 0;
background-image:url("../images/iot_security/2025_iot_security/matter/new/main_banner_bg_sm.png");
}
	
.matter-banner-title h1{
font-size: 45px;
line-height: 3.5rem;
text-align: left;
}
	
.banner-subtitle-h1{
font-size: 18px;
margin-bottom: 2%;
line-height: 2rem;
text-align: left;
}
	
.main-subtitle,.hardware-subtitle,.advance-solution-subtitle,.service-subtitle,.lifecycle-subtitle,.compliance-subtitle,.production-subtitle{
font-size:22px;
line-height: 2.3rem;
}	
	


}

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

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

.banner-title-position{
top: 8%;
left:3%;
}
	
	
.matter-banner-cover{
padding:90% 0;
background-image:url("../images/iot_security/2025_iot_security/matter/new/main_banner_bg_phone.png");
}	

.matter-banner-title h1 {
font-size: 27px;
line-height: 2.8rem;
text-align: left;
margin-bottom: 2%;
}

.banner-subtitle-h1{
font-size: 19px;
margin-bottom: 2%;
line-height: 2.2rem;
}	
	
.main-title h2,.hardware-title h2,.advance-solution-title h2,.service-title h2,.lifecycle-title h2,.compliance-title h2,.production-title h2{
font-size:30px;
line-height: 3rem;
}	

.production-bg-cover{
padding: 15% 0 15% 0;
}
	
.icon-box {
width: 100px;
height: 100px;
}	

.small{
line-height: 1.3rem;
}

	

}

	

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