/* ── Typography ── */
h1, #overview h1 { font-size: 32px; }
h2, #overview h2 { font-size: 30px; }
h3, #overview h3 { font-size: 28px; }
h4, #overview h4 { font-size: 26px; }
h5, #overview h5 { font-size: 24px; }
h6, #overview h6 { font-size: 20px; }
p,  #overview p  { font-size: 18px; }

/* ── Utilities ── */
.container.maxwid { max-width: 1320px !important; }
.bold { font-weight: bold; }
.btn.btn-lg { padding: 0 20px; }

/* ── CTA Button ── */
#overview .btn-call-to-action { background-color: #c71a13; }

/* ── Video Banner (USG) ── */
.header-video .banner {
  position: relative;
  height: 765px;
  background-size: cover;
  overflow: hidden;
}
.header-video #scenarios-video {
  position: absolute;
  object-fit: cover;
  transform: translateY(1px);
  width: 100%;
  min-width: 100%;
  height: calc(100% + 1px);
  left: 0;
  right: 0;
  bottom: 0;
}
.header-video video {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header-video .banner .area {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.header-video .banner .area .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 8vw;
  color: #ffffff;
}
.header-video .banner .area .box h1 {
  font-weight: bold;
}
@media screen and (max-width: 1601px) {
  .header-video .banner {
    height: 550px;
  }
}
@media screen and (max-width: 1025px) {
  .header-video .banner {
    height: 450px;
  }
}
@media screen and (max-width: 450px) {
  .header-video .banner {
    height: 350px;
  }
  .header-video .banner .area .box h1 {
    font-size: 20px;
  }
}

/* highlights */
	.highlights-section {
		background-color:#000;
	}

	.higtlights p {
		color:#fff;
	}

	.higtlights .box {
		display: flex;
	    flex-wrap: wrap;
	    width: 85%;
	    justify-content: center;
		margin: 0 auto;
	    text-align: center;
	}

	.higtlights .box .area {
		width: calc(100% / 5);
	}

	.higtlights .box .area img {
		width: 45%!important;
		margin: 0 auto;
		text-align: center;
	}

	.higtlights .box .area p {
		padding: 0 10px;
	}

	.higtlights .box .area p span {
		font-weight: bold;
	}

	@media screen and (max-width: 991px) {
		.higtlights .box {
			width: 90%;
		}	
		.higtlights .box .area {
			width: calc(100% / 2);
		}
		.higtlights .box .area p{
			margin-bottom: 10px;
		}
	}

/* ── Two-Column  ── */
	.p-two-col .frame {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 85%;
		gap: 10%;
		margin: 0 auto;
		padding: 5% 0;
	}
	.p-two-col.img-r .frame { flex-direction: row-reverse; }
	.p-two-col.img-l .frame { flex-direction: row; }
	.p-two-col .content { width: 50%; }
	.p-two-col .image   { width: 50%; }
	.p-two-col .image img {width: 93% !important;}
	.p-two-col .content h3 { font-weight: bold; padding-bottom: 30px; }
	@media screen and (max-width: 1024px){
		.p-two-col .image img {width: 100% !important;}	
	}
	@media screen and (max-width: 991px) {
		.p-two-col.img-r .frame,
		.p-two-col.img-l .frame {
			flex-direction: column;
			width: 90%;
			padding: 50px 0;     /* XGN — decision 6A */
		}
		.p-two-col .content { width: 100%; padding: 0; }
		.p-two-col .image   { width: 100%; margin-bottom: 50px; }
	}

/* ── Feature List (bullets) ── */
	.feature-list {list-style-type: disc;padding-left: 20px;font-size: 18px;}
	.feature-list li { margin-bottom: 10px; line-height: 1.5; }

/* ── Security Section (USG) ── */
	.security-section { background-color: #f6f6f6; }
	.security-section .content{ width: 85%; margin: 65px auto 0; text-align: center; }
	.security-section .content h3{ font-weight: bold; padding-bottom: 30px; }
	.security-section .box {
		display: flex;
		flex-wrap: wrap;
		width: 85%;
		justify-content: center;
		margin: 15px auto 0;
		text-align: center;
	}
	.security-section .box .area { width: calc(100% / 4); }
	.security-section .box .area img { width: 50% !important; margin: 0 auto; text-align: center; }
	.security-section .box .area p { padding: 0 10px; }
	.security-section .box .area p span { font-weight: bold; }
	.security-section .image {
		background: url(/sites/zyxel/files/library/assets/products/usgflex-h-series/USGFLEXH_WEBQ126_GFX2_3024x1410.png) no-repeat;
		background-position: center bottom;
		background-size: 100% auto;
		position: relative;
		aspect-ratio: 1920 / 565;
	}
	@media screen and (max-width: 991px) {
		.security-section .content { text-align: left; }
		.security-section .box,.security-section .content {width: 92%;}
		.security-section .box{
			justify-content: flex-start;
		}
		.security-section .box .area { width: calc(100% / 2); }
		.security-section .box .area p { margin-bottom: 10px; }
		.security-section .image { background-position: 30% bottom; background-size: 300%; aspect-ratio: 4/3.5; }
	}

/* ── One Platform (USG) ── */
	.one-platform {
		background: url('/sites/zyxel/files/library/assets/products/iap500be/IAP500BE_GFX6_3024x1410.png') no-repeat center;
		height: 900px;
		background-size: cover;
		position: relative;
	}
	.one-platform .content {
		position: absolute;
		left: 7.5%;
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.one-platform .content h3 { padding-bottom: 30px; font-weight: bold; }
	@media screen and (max-width: 1601px) { .one-platform { height: 800px; } }
	@media screen and (max-width: 991px) {
		.one-platform {
			background: none;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.one-platform::before {
			content: "";
			display: block;
			width: 100%;
			aspect-ratio: 16/10;
			background: url(/sites/zyxel/files/library/assets/products/iap500be/IAP500BE_GFX6_3024x1410.png) no-repeat right center;
			background-size: 145% auto;
			background-position: 100% top;
		}
		.one-platform .content {position: static;width: 100%;padding: 40px 5%;background-color: #f9f9f9 !important;}
	}

/* ── Related Links ── */
	.related-links { background-color: #fff; }
	.related-links h3 {
		font-weight: bold;
		text-align: center;
	}
	.links-section {
		display: flex;
		flex-direction: row;
		justify-content: center;  
		width: 100%;
	}
	.links-area ul { list-style: none; display: flex; justify-content: space-around; }
	.links-area ul li { width: 30%; }
	.links-area .zoom a { display: block; overflow: hidden; }
	.links-area .zoom img { display: block; transition: transform 0.3s ease; }
	.links-area .zoom:hover img { transform: scale(1.1); }
	.links-area h5 a div {
		color: #010101;
		margin-top: 30px;         
		font-size: 20px;
	}
	.links-area h5 a div:hover {
		color: #288719;           
	}
	@media screen and (max-width: 769px) {
		.links-area ul { flex-direction: column; padding: 20px 20px 0; }
		.links-area ul li { width: 100%; margin-bottom: 30px; }
		.links-area .link-text { margin-top: -5%; z-index: 2; }
	}

/* ── Note ── */
	div#note { margin-top: 10px; }

/* ha video section */
	.ha-video-section {
		background: #000000;
		color: #ffffff;
	}
	.ha-video-section .frame {
		margin: 0 auto;
		position: relative;
		display: flex;
    align-items: center;
    min-height: 50vh;
	}
		
	.ha-video-section .content {
	  position: relative;
    z-index: 100;
    width: 40%;
    left: 7.5%;
    padding: 5% 0;
	}
		
	.ha-video-section video {
	    width: 45%;
	    position: absolute;
	    z-index: 1;
	    right: 0;
	    bottom: 1px;
	}

	.ha-video-section .content h3 {
		padding-bottom: 30px;
	}

	@media screen and (max-width: 1400px) {
		.ha-video-section video{
			width: 55%;
		}
	}

	@media screen and (max-width: 991px) {
		.ha-video-section .frame {
			display: flex;
			flex-direction: column;
		}
		.ha-video-section .content {
			width: 90%;
			left: 5%;
			padding: 50px 0 0 0;
		}
		.ha-video-section video {
		    width: 90%;
		    position: relative;
		    left: 10%;
		}
	}
	@media screen and (max-width: 450px) {
		.ha-video-section video {
		    width: 100%;
		    left: 0;
		    }
	}
	@media screen and (min-width: 2400px) {
		.ha-video-section .frame{
			min-height: 80vh;
		}
	}

/* Awards, Partners slider */
	.awards-section,
	.partners-section{
	    padding: 62px 0 50px;
	    background-color: #f6f6f6;
	}
	.awards-section .content,
	.partners-section .content {
	  width: 70%;
	  margin: 0 auto 55px;
	  text-align: center;
	}
	.awards-section .content h3,
	.partners-section .content h3{
	  font-weight: bold;
	  padding-bottom: 30px;
	}
	.awards-section .awards-wrapper{
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  padding: 0 60px;
	}
	.partners-section .awards-wrapper{
	  display: flex;
	  flex-wrap: wrap;
	  padding: 0 10px;
	  width: 80%;
	  /* flex-direction: row; */
	  margin: 0 auto;
	}
	.awards-slider .slick-slide {
	    margin: 0 15px;
	}
	.awards-slider .slick-list {
	    margin: 0 -15px;
	}
	.awards-section .awards-wrapper .award-item{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    flex: 1;
	    padding: 20px;
	    background: #ffffff;
	    color: #000000;
	    height: 330px;
	}
	.partners-section .awards-wrapper .award-item{
	    display: flex;
	    align-items: center;
	    padding: 0 10px;
	    flex-direction: column;
	    flex: 1;
	}
	.awards-section .awards-wrapper a.award-item:hover p{
	    color: #006e18;
	}
	.awards-section .awards-wrapper a.award-item:hover,
	.partners-section .awards-wrapper a.award-item:hover{
	    text-decoration: none;
	}

	.awards-section .awards-wrapper .award-item .award-logo{
	    height: 120px;
	    max-width: 170px;
	    margin-bottom: 10px;
	    display: flex;
	    align-items: center;
	}

	.partners-section .awards-wrapper .award-item .award-logo{
	    width: 200px;
	    margin-bottom: 10px;
	    display: flex;
	    align-items: center;
	}
	.awards-section .awards-wrapper .award-item.CRN .award-logo{
	    width: 60px !important;
	}
	.awards-section .awards-wrapper .award-item .award-logo img,
	.partners-section .awards-wrapper .award-item .award-logo img{
	    width: 100%;
	    height: auto;
	}
	.awards-section .awards-wrapper .award-item .award-content{
	   text-align: center; 
	}
	.slick-slider .slick-dots{
	    bottom: -40px;
	    left: 0;
	    right: 0;
	}
	.slick-track{
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	}
	.slick .slick-dots li.slick-active button:before, 
	.slick-slider .slick-dots li.slick-active button:before{
		background: #000000 !important;
	}

	@media screen and (max-width: 991px) {
	    .awards-section .awards-wrapper .award-item,
	    .awards-section .awards-wrapper .award-item.CRN{
	        flex: 1 40%;
	    }
	    .partners-section .awards-wrapper{
	    	width: 90%;
	    	gap: 20px;
	    }
	    .awards-section .content,
	    .partners-section .content {
	      width: 90%;
	      text-align: left;
	    }
	}
	@media screen and (max-width: 640px) {
	    .awards-section .awards-wrapper .award-item{
	    	height: 260px;
	    }
	}

	@media screen and (max-width: 450px) {
	    .awards-section .awards-wrapper{
	        gap: 60px 20px;
	    }
	    .awards-section .awards-wrapper .award-item,
	    .awards-section .awards-wrapper .award-item.CRN{
	        flex: 1 100%;
	    }
	    .awards-section .awards-wrapper .award-item{
	    	height: 300px;
	    }
	    .partners-section .awards-wrapper .award-item .award-logo{
	    	width: 160px;
	    }

	}

	#note .usgflex-note{
		font-size: 15px;
	}


/* ── Spec ── */
	.spec-note ol { list-style: none; }

	.spec-note ol li{
	  text-indent: -20px;
	  padding-left: 18px;
	}
	.usgflex-series-section  .tab-content .tab-pane .panel-group .panel-body {
	    padding: 30px 20px!important;
	}

	.usgflex-series-section .nav-tabs{
	    border-bottom:none;
	    padding-bottom:50px;
	    padding-top:20px;
	    margin:0 auto;
	    display:block;
	    width:100%;
	    text-align: center;
	}

	.usgflex-series-section .nav>li>a {
	    position: relative;
	    display: block;
	    padding: 5px 15px;
	}

	.usgflex-series-section .nav-tabs li{
	    float: none;
	    display: inline-block;
	    border-radius: 5px;
	margin-bottom: 10px;
	}

	.usgflex-series-section .nav-tabs>li>a{
	    color:#000;
	    font-size:18px!important;
	}

	.usgflex-series-section .nav-tabs>li>a:hover{
	    color:#64be00;
	    background-color: transparent;
	    text-decoration: none;
	    border-color: transparent;
	}

	.usgflex-series-section .nav-tabs>li.active>a, 
	.usgflex-series-section .nav-tabs>li.active>a:focus, 
	.usgflex-series-section .nav-tabs>li.active>a:hover{
	    color: #64be00;
	    border-bottom: 2px solid #64be00;
	    border-top: transparent;
	    border-right: transparent;
	    border-left: transparent;
	    font-weight:bold;
	}

	@media only screen and (max-width: 1025px){
	.usgflex-series-section .nav-tabs{
	    width:100%;
	    text-align:center;
	}
	}

	@media only screen and (max-width: 991px){
	.usgflex-series-section .nav-tabs li {
	    margin-bottom: 10px;
	}
	}
	.note-section ul{
	    list-style: none;
	    margin-top: 30px;
	    width: 85%;
	}

	.note-section ul li{
	    text-indent: -20px;
	    padding-left: 18px;
	}

	.license-service-section{width: 90%;text-align:center;margin:0 auto; padding-bottom:30px;}
	.license-service-section h3{padding-bottom:30px; font-weight: bold;}
	.license-content {table-layout: fixed; width: 90%; white-space: nowrap; margin:0 auto; border-collapse: initial;}
	.carte-license-content {table-layout: fixed; width: 90%; white-space: nowrap; margin:0 auto; border-collapse: initial;}
	.row-license {width: 25%;}
	.license-content th, .carte-license-content th{font-weight:normal; font-size:18px; padding: 20px 10px;white-space:normal; }
	.license-content td, .carte-license-content td {white-space: break-spaces; overflow: hidden; padding: 10px;}
	.license-content td, .license-content th, .carte-license-content td, .carte-license-content th {text-align: center; color: #000; border-bottom:1px solid #000;}
	.license-content td:first-child, .license-content th:first-child, .carte-license-content td:first-child, .carte-license-content th:first-child{text-align:left;}
	.license-content td:nth-child(2), .license-content th:nth-child(2), .carte-license-content td:nth-child(2), .carte-license-content th:nth-child(2){text-align:center;}
	.license-content a, .carte-license-content a{color:#000;}
	.license-service-section .btn-call-to-action {
	    background-color: #ff8900;
	}
	.table-responsive .note{
	    font-size: 14px;
	    padding-top: 20px;
	    width: 95%;
	    padding-left: 5%;
	}

	.carte-License{
	    padding-top: 50px;
	    text-align: center;
	}

	.access-point-list{
	    margin-bottom: 30px;
	    text-align: center;
	}
	.access-point-list-content{
	    width: 100%;
	    table-layout: fixed; 
	    white-space: nowrap; 
	    margin:0 auto; 
	    border-collapse: initial;
	}
	.access-point-list-content th{
	    font-weight: bold;
	    font-size:18px; 
	    padding: 20px 10px;
	    text-align: left;
	    white-space:normal;
	    color: #000; 
	    border-bottom:1px solid #000;
	}
	.access-point-list-content td{
	    white-space: break-spaces; 
	    overflow: hidden; 
	    padding: 10px;
	    text-align: left; 
	    color: #000; 
	    border-bottom:1px solid #000;
	}
	.access-point-list-content th:last-child,
	.access-point-list-content tr:first-child td:last-child{
	    padding-left: 3%;
	}
	.access-point-list-content tr:first-child td:last-child{
	    white-space: pre-line;
	}
	.access-point-list-content a,
	.access-point-list-content a:hover{
	    color: #288719 !important;
	    font-weight: normal;
	}

	@media screen and (max-width: 991px) {
	.license-content, .carte-license-content, .access-point-list-content {table-layout: auto;  white-space: nowrap; margin:0 auto; border-collapse: initial;}
	.license-content, .carte-license-content{width: 90%;}
	.access-point-list-content{width: 100%;}
	}

	.service {
	    font-size: 14px;
	    padding-top: 20px;
	    width: 95%;
	    padding-left: 5%;
	}

	.service ul{
	    list-style: none;
	    padding-bottom: 20px;
	}

	.service .text li {
	    text-indent: -18px;
	    padding-left: 20px;
	}

	.service .text li:nth-child(1):before {
	    content: "*";
	    margin-right: 0.8em;
	    position: relative;
	}

	.service .text li:nth-child(2):before {
	    content: "*1";
	    margin-right: 0.3em;
	    position: relative;
	}