.pbx-hero {
position: relative;
z-index: 1; background: linear-gradient(135deg, #66d0e6 0%, #005d8f 100%);
text-align: center;
padding: 40px 6% 70px;
color: #fff;
}
.pbx-hero h1 {
font-size: 2em;
margin-bottom: 0.6em;
}
.pbx-hero p {
max-width: 820px;
margin: 0 auto;
line-height: 1.8;
} .pbx-section {
max-width: 1200px;
margin: 0 auto;
}
.pbx-section h2 {
color: var(--main-blue);
font-size: 1.7em;
margin-bottom: 20px;
text-align: center;
}
.pbx-section .lead {
text-align: center;
max-width: 820px;
margin: 0 auto 50px;
color: #555;
line-height: 1.8;
} .pbx-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.pbx-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 28px 22px;
width: 320px;
transition: 0.3s;
}
.pbx-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.pbx-card h3 {
font-size: 1.1em;
color: var(--main-blue);
margin-bottom: 8px;
} .pbx-feature-block {
padding: 60px 0;
background: #fff;
}
.pbx-feature-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 40px;
max-width: 1100px;
margin: 0 auto;
}
.pbx-feature-block.reverse .pbx-feature-inner {
flex-direction: row-reverse;
}
.pbx-feature-image {
flex: 1 1 480px;
text-align: center;
}
.pbx-feature-image img {
width: 100%;
max-width: 480px;
background: #111;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pbx-feature-text {
flex: 1 1 420px;
}
.pbx-feature-text h3 {
font-size: 1.2em;
color: var(--main-blue);
margin-bottom: 0.6em;
}
.pbx-feature-text p {
line-height: 1.8;
color: #333;
} .linked-section {
background: var(--light-bg);
text-align: center;
}
.pbx-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 25px;
}
.pbx-link-btn {
background: var(--main-blue);
color: #fff;
padding: 10px 18px;
border-radius: 6px;
text-decoration: none;
transition: 0.3s;
}
.pbx-link-btn:hover { background: var(--accent-cyan); }
@media (max-width: 768px) {
.pbx-feature-inner { flex-direction: column !important; }
.pbx-feature-image img { max-width: 100%; }
.pbx-card { width: 90%; max-width: 340px; }
} .pbx-feature-carousel {
background: #fff;
text-align: center;
overflow: visible;
}
.carousel-header {
max-width: 1000px;
margin: 0 auto 40px;
}
.carousel-header h3 {
color: var(--main-blue);
font-size: 1.6em;
margin-bottom: 10px;
}
.carousel-header p {
color: #555;
line-height: 1.8;
font-size: 1em;
}
.pbx-call-carousel {
position: relative;
overflow: visible; max-width: 1200px; margin: 0 auto;
padding: 0 200px; }
.pbx-call-carousel .swiper-button-prev {
left: -3px; }
.pbx-call-carousel .swiper-button-next {
right: -3px;
}
.pbx-call-carousel .swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pbx-call-carousel img {
width: 100%;
max-width: 320px; height: auto;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
margin: 20px auto;
}
.pbx-call-carousel .caption {
margin-top: 6px;
font-size: 0.9em;
color: #333;
text-align: center;
} .swiper-wrapper {
display: flex;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--main-blue);
transition: opacity 0.3s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
opacity: 0.7;
}
.swiper-pagination-bullet-active {
background: var(--accent-cyan);
}
.pbx-call-carousel .swiper-pagination {
position: relative;
margin-top: 10px;
} @media (max-width: 768px) {
.pbx-feature-carousel { padding: 60px 4%; }
.carousel-header h3 { font-size: 1.3em; }
.pbx-call-carousel img {
max-width: 260px;
}
} .monitor-section h2 {
color: var(--main-blue);
font-size: 1.8em;
text-align: center;
margin-bottom: 20px;
}
.monitor-section .lead {
text-align: center;
max-width: 900px;
margin: 0 auto 40px;
line-height: 1.8;
color: #333;
}
.monitor-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.monitor-card {
flex: 1 1 420px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 25px;
text-align: left;
}
.monitor-card.image {
text-align: center;
}
.monitor-card img {
width: 100%;
max-width: 450px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.monitor-card .caption {
font-size: 0.9em;
color: #666;
margin-top: 10px;
text-align: center;
}
.monitor-card h3 {
color: var(--main-blue);
font-size: 1.2em;
margin-bottom: 0.6em;
}
.monitor-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.monitor-card li {
line-height: 1.7;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.monitor-grid {
flex-direction: column;
align-items: center;
}
.monitor-card {
width: 90%;
max-width: 500px;
}
} .dashboard-section h2 {
color: var(--main-blue);
font-size: 1.8em;
text-align: center;
margin-bottom: 20px;
}
.dashboard-section .lead {
text-align: center;
max-width: 900px;
margin: 0 auto 40px;
line-height: 1.8;
color: #333;
}
.dashboard-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.dashboard-card {
flex: 1 1 420px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 25px;
text-align: left;
}
.dashboard-card.image {
text-align: center;
}
.dashboard-card img {
width: 100%;
max-width: 450px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dashboard-card .caption {
font-size: 0.9em;
color: #666;
margin-top: 10px;
text-align: center;
}
.dashboard-card h3 {
color: var(--main-blue);
font-size: 1.2em;
margin-bottom: 0.6em;
}
.dashboard-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.dashboard-card li {
line-height: 1.7;
margin-bottom: 8px;
}
@media (max-width:768px){
.dashboard-grid {
flex-direction: column;
align-items: center;
}
.dashboard-card {
width: 90%;
max-width: 500px;
}
}
.dashboard-benefits {
background: var(--light-bg);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 30px 25px;
margin-top: 40px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.dashboard-benefits h3 {
color: var(--main-blue);
font-size: 1.3em;
text-align: center;
margin-bottom: 20px;
}
.dashboard-benefits ul {
list-style: none;
padding-left: 0;
margin: 0 auto;
max-width: 900px;
line-height: 1.8;
}
.dashboard-benefits li {
margin-bottom: 10px;
color: #333;
}
@media (max-width: 768px) {
.dashboard-benefits {
padding: 20px 15px;
}
} .pbx-card.with-img img {
width: 100%;
border-radius: 6px;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
} .report-section h2 {
color: var(--main-blue);
font-size: 1.8em;
text-align: center;
margin-bottom: 20px;
}
.report-section .lead {
text-align: center;
max-width: 900px;
margin: 0 auto 40px;
line-height: 1.8;
color: #333;
}
.report-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
max-width: 1200px;
margin: 0 auto 30px;
}
.report-card {
flex: 1 1 350px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 25px;
text-align: left;
}
.report-card img {
width: 100%;
border-radius: 6px;
margin-bottom: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.report-card h3 {
color: var(--main-blue);
font-size: 1.1em;
margin-bottom: 10px;
}
.report-card ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.report-card li {
margin-bottom: 6px;
line-height: 1.6;
color: #333;
}
.report-benefits {
background: var(--light-bg);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 30px 25px;
max-width: 1000px;
margin: 0 auto;
}
.report-benefits h3 {
color: var(--main-blue);
font-size: 1.2em;
text-align: center;
margin-bottom: 15px;
}
.report-benefits ul {
list-style: none;
margin: 0 auto;
max-width: 900px;
padding-left: 0;
line-height: 1.8;
}
.report-benefits li {
margin-bottom: 8px;
color: #333;
}
@media (max-width:768px){
.report-grid{
flex-direction: column;
align-items: center;
}
.report-card{
width: 90%;
max-width: 500px;
}
}