/* Prevent horizontal overflow on mobile */
html { overflow-x: clip; }
body { overflow-x: clip; }
.opm-main-wrapper h1 {
font-size: calc(2rem + 2.2vw);
line-height: 1.0625;
letter-spacing: -1px;
font-weight: 700;
margin: 0 0 12px
}
.opm-main-wrapper h2 {
font-size: calc(1.325rem + 1.75vw);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.65px;
margin: 0 0 12px
}
.opm-main-wrapper h3,
.opm-main-wrapper .h3 {
font-size: calc(1.3rem + 1vw);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.5px;
margin: 0 0 12px
}
.opm-main-wrapper h4 {
font-size: calc(1.275rem + .75vw);
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.5px;
margin: 0 0 12px
}
.opm-main-wrapper h5,
.opm-main-wrapper .h5,
.feature-list-content h3 {
font-size: 1.5rem;
font-weight: 500;
line-height: 32px;
letter-spacing: -0.25px;
margin: 0 0 12px
}
.opm-main-wrapper h6 {
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.25px;
margin: 0 0 12px
}
.opm-main-wrapper p,
.opm-main-wrapper .p {
font-size: 17px;
font-weight: 300;
line-height: 30px;
margin: 0 0 16px
}
.opm-main-wrapper ul li {
font-size: 17px;
font-weight: 300;
line-height: 30px;
margin: 0 0 12px
}
.opm-main-wrapper p > a {font-style: italic;}
@media only screen and (min-width: 1200px) {
.opm-main-wrapper h1 {
font-size: 4rem
}
.opm-main-wrapper h2 {
font-size: 2.5rem
}
.opm-main-wrapper h3,
.opm-main-wrapper .h3 {
font-size: 2rem
}
.opm-main-wrapper h4 {
font-size: 1.75rem
}
.opm-main-wrapper h5, .feature-list-content h3 {
font-size: 1.5rem
}
}
.opm-btn {
border: 0;
border-radius: 4px;
font-weight: 400;
font-size: calc(1rem + 2px);
line-height: 1.5;
cursor: pointer;
text-align: center;
padding: 12px 24px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #e1e2e5;
color: inherit;
background-color: #fff;
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out;
font-family: inherit
}
.opm-btn:hover {
color: #e80e19;
border-color: #e80e19
}
.opm-btn>.opm-btn-icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex
}
.opm-btn>.opm-btn-icon+span {
margin-left: 8px
}
.opm-btn.opm-btn-primary {
border: 1px solid #e80e19 !important;
background-color: #e80e19 !important;
color: #fff
}
.opm-btn.opm-btn-primary:hover {
background-color: #db0b15;
border-color: #db0b15
}
.opm-btn.opm-btn-primary:focus {
background-color: #d00610;
border-color: #d00610
}
.opm-btn>span:last-child.opm-btn-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 8px
}
a.opm-btn {
text-decoration: none
}
a.opm-btn.btn-primary {
color: #fff !important;
text-decoration: none
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.75rem;
margin-left: -0.75rem;
padding-top: 0;
padding-bottom: 0
}
.row>* {
padding-left: 12px;
padding-right: 12px;
max-width: 100%
}
.row.g-0 {
margin-right: 0;
margin-left: 0
}
.row.g-0>* {
padding-left: 0;
padding-right: 0
}
.col {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0
}
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
@media only screen and (min-width: 576px) {
.col-sm-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-sm-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-sm-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-sm-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-sm-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-sm-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-sm-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-sm-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-sm-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-sm-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-sm-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-sm-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width: 768px) {
.col-md-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-md {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.col-md-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-md-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-md-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-md-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-md-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-md-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-md-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-md-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-md-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-md-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-md-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-md-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width: 992px) {
.col-lg-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-lg {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.col-lg-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-lg-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-lg-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-lg-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-lg-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-lg-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-lg-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-lg-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-lg-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-lg-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-lg-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-lg-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
@media only screen and (min-width: 1200px) {
.col-xl-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-xl {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto
}
.col-xl-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%
}
.col-xl-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%
}
.col-xl-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%
}
.col-xl-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%
}
.col-xl-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 41.66666667%
}
.col-xl-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%
}
.col-xl-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 58.33333333%
}
.col-xl-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 66.66666667%
}
.col-xl-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 75%
}
.col-xl-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 83.33333333%
}
.col-xl-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 91.66666667%
}
.col-xl-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%
}
}
.text-center {
text-align: center !important
}
.align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important
}
.m-0 {
margin: 0 !important
}
.d-block {
display: block !important
}
.img-fluid {
max-width: 100%;
height: auto
}
.heading-menu,
#scroll,
#VideosAndLogos {
display: none
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.opm-main-wrapper *,
.opm-main-wrapper *::before,
.opm-main-wrapper *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.opm-main-wrapper .pt-0 {
padding-top: 0 !important
}
.opm-main-wrapper .pb-0 {
padding-bottom: 0 !important
}
.opm-main-wrapper .mt-0 {
margin-top: 0 !important
}
.opm-main-wrapper .mb-0 {
margin-bottom: 0 !important
}
.opm-main-wrapper .container {
width: 100%;
margin: auto
}
@media only screen and (min-width: 992px) {
.opm-main-wrapper .container {
max-width: 960px
}
}
@media only screen and (min-width: 1200px) {
.opm-main-wrapper .container {
max-width: 1180px
}
}
@media only screen and (min-width: 1400px) {
.opm-main-wrapper .container {
max-width: 1280px
}
}
.opm-main-wrapper .sec-header {
text-align: center;
max-width: 1180px;
margin: 0 auto 40px
}
.opm-main-wrapper .sec-header p {
max-width: 1180px;
margin: 0 auto 16px
}
.opm-main-wrapper .banner-section {
padding: 80px 0 160px;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFAC7), to(rgba(255, 237, 166, 0.18)));
background: linear-gradient(180deg, #FFFAC7 0%, rgba(255, 237, 166, 0.18) 100%);
position: relative;
overflow: hidden;
}
.opm-main-wrapper .banner-section::before {
content: '';
position: absolute;
top: -50%; right: -30%;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(201,148,10,0.08) 0%, transparent 70%);
pointer-events: none;
}
.opm-main-wrapper .banner-section::after {
content: '';
position: absolute;
bottom: -40%; left: -20%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(201,148,10,0.05) 0%, transparent 70%);
pointer-events: none;
}
.opm-main-wrapper .banner-section h1 {
color: #1e293b;
}
.opm-main-wrapper .banner-section .banner-content .banner-desc {
font-size: 20px;
line-height: 1.6;
letter-spacing: -0.25px;
margin-bottom: 28px;
color: #5a4f2a;
}
.opm-main-wrapper .banner-section .value-points-wrapper li {
color: #6b5c1f !important;
}
.opm-main-wrapper .banner-section .row {
align-items: center;
}
@media screen and (max-width: 992.98px) {
.opm-main-wrapper .opm-banner-wrapper .banner-section .banner-row .banner-content {
max-width: 100%;
text-align: center;
}
.opm-main-wrapper .opm-banner-wrapper .banner-section .banner-content .cta-group {
justify-content: center;
}
.banner-content {
text-align: center;
margin-bottom: 32px;
}
.banner-video {
justify-content: center !important;
}
}
@media screen and (max-width: 991.98px) {
.opm-main-wrapper .banner-section .banner-image {
margin-top: 2.5rem
}
}
@media screen and (max-width: 575.98px) {
.opm-main-wrapper .banner-section .banner-content .banner-desc {
font-size: 16px;
}
.opm-main-wrapper .banner-section {
padding-top: 48px;
}
.opm-main-wrapper .banner-section .value-points-wrapper li {
font-size: 14px;
}
}
.opm-main-wrapper .award-section {
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.opm-main-wrapper .award-section .award-card {
border-radius: 16px;
background: #fff;
-webkit-box-shadow: 0px 6px 32px -4px rgba(0, 0, 0, .08);
box-shadow: 0px 6px 32px -4px rgba(0, 0, 0, .08);
padding: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;flex-direction:column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0px 54px
}
.opm-main-wrapper .award-section .award-card h2 {font-size:28px !important;font-weight:400;margin-bottom:24px;}
@media screen and (max-width: 767.98px) {
.opm-main-wrapper .award-section .award-card {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 24px
}
}
.opm-main-wrapper .award-section .award-card .award-texture {
position: relative;
padding: 0 40px;
}
.opm-main-wrapper .award-section .award-card .award-texture h5 {
font-weight: 400
}
.opm-main-wrapper .award-section .client-logo-wrapper {
overflow: hidden;
width: 100%
}
.opm-main-wrapper .award-section .client-logo-wrapper .logo-marquee {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 40px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (max-width: 1199.98px) {
.opm-main-wrapper .award-section .client-logo-wrapper .logo-marquee {
-webkit-animation: 40s linear 1s infinite normal none running logoMarquee;
animation: 40s linear 1s infinite normal none running logoMarquee
}
@-webkit-keyframes logoMarquee {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
100% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px)
}
}
@keyframes logoMarquee {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px)
}
100% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px)
}
}
}
.opm-main-wrapper .award-section .client-logo-wrapper .logo-item {
border-radius: 8px;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (max-width: 1199.98px) {
.opm-main-wrapper .award-section .client-logo-wrapper .logo-item {
min-width: 100px
}
}
.opm-main-wrapper .about-section {
padding: 20px 0 0
}
.opm-main-wrapper .about-section .about-title-list {
margin: 40px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 20px
}
.opm-main-wrapper .about-section .about-title-list .title-list-item {
border-radius: 50px;
border: 1px solid rgba(221, 221, 221, .87);
padding: 12px 24px;
cursor: pointer;
font-weight: 400;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in
}
.opm-main-wrapper .about-section .about-title-list .title-list-item.active {
background: #000;
color: #fff;
border-color: #000
}
.opm-main-wrapper .about-section .content-list {
max-width: 620px
}
@media screen and (max-width: 991.98px) {
.opm-main-wrapper .about-section .content-list {
max-width: 720px;
margin: 0 auto 60px
}
}
.opm-main-wrapper .about-section .content-list .content-list-item {
border: 1px solid #e9e9e9;
border-radius: 8px;
padding: 24px;
margin-bottom: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 20px
}
.opm-main-wrapper .about-section .content-list .content-list-item:last-child {
margin-bottom: 0
}
.opm-main-wrapper .about-section .content-list .content-list-item.active .icon-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.opm-main-wrapper .about-section .content-list .content-list-item.active .content-list-desc {
display: block !important
}
.opm-main-wrapper .about-section .content-list .content-list-item .content-list-icon {
width: 36px;
height: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.opm-main-wrapper .about-section .content-list .content-list-item .content-list-body {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.opm-main-wrapper .about-section .content-list .content-list-item .content-list-body .content-list-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
width: 100%
}
.opm-main-wrapper .about-section .content-list .content-list-item .content-list-body .content-list-title h5 {
margin-bottom: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.opm-main-wrapper .about-section .content-list .content-list-item .content-list-body .content-list-desc {
padding-top: 8px;
display: none
}
.opm-main-wrapper .about-section .content-list .content-list-item .content-list-body .content-list-desc p {
margin: 0
}
.opm-main-wrapper .about-section .content-list .content-list-item .icon-chevron-down {
min-width: 24px;
height: 24px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=")
}
.opm-main-wrapper .about-section .about-content-item {
display: none
}
.opm-main-wrapper .about-section .about-content-item.active {
display: block
}
.opm-main-wrapper .about-section .content-list-image {
display: none;
text-align: center
}
.opm-main-wrapper .about-section .content-list-image img {
max-width: 720px;
width: 100%;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, .08);
-webkit-box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, .08);
box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, .08)
}
.opm-main-wrapper .about-section .content-list-image.active {
display: block
}
.opm-main-wrapper .feature-section {
padding: 100px 0
}
.opm-main-wrapper .feature-section h5 {
margin-bottom: 4px
}
@media screen and (max-width: 991.98px) {
.opm-main-wrapper .feature-section .feature-list {
margin: 0 auto 40px
}
}
.opm-main-wrapper .feature-section .feature-list-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction:column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0 24px;
border-radius: 12px;
padding: 24px;
border: 1px solid #f0f0f0;
margin-bottom: 24px
}
.opm-main-wrapper .feature-section .feature-list-item:last-child {
margin-bottom: 0
}
.opm-main-wrapper .feature-section .feature-list-item p {
margin-bottom: 0
}
.opm-main-wrapper .feature-section .feature-list-icon {
position: relative;
min-width: 40px;
padding-top: 6px;
text-align: center;
z-index: 1
}
/*8 .opm-main-wrapper .feature-section .feature-list-icon::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 24px;
height: 24px;
border-radius: 100px;
background: linear-gradient(154deg, #F3D570 13.08%, rgba(252, 228, 130, 0) 87.14%);
z-index: -1
}*/
.opm-main-wrapper .feature-section .feature-sec-image {
text-align: center
}
.opm-main-wrapper .resolve-section-row {
/* margin-bottom: 60px;
margin-top: 0px;*/
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; padding:30px 0px;
}
@media screen and (max-width: 991.98px) {
.opm-main-wrapper .resolve-section-row:last-child {
margin: 0;
-webkit-box-orient: vertical;
}
.resolve-section-wrapper .resolve-section-row:nth-child(even) {
flex-direction: column-reverse;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
}
}
.opm-main-wrapper .resolve-section-row h4 {
margin-bottom: 4px
}
.opm-main-wrapper .resolve-section-row img {
max-width: 100%;
border-radius: 6px;
/* border: 1px solid rgba(0, 0, 0, .08);
-webkit-box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, .08);
box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, .08) */
}
@media screen and (min-width: 992px) {
.opm-main-wrapper .resolve-section-row img {
max-width: 620px;
width: 100%
}
.opm-main-wrapper .resolve-section-row .resolve-section-content {
max-width: 620px
}
}
.opm-main-wrapper .choose-section {
padding: 80px 0
}
.opm-main-wrapper .choose-section strong {
font-weight: 500
}
.opm-main-wrapper .choose-section .row {
margin-top: 60px
}
.opm-main-wrapper .choose-section li {
position: relative;
padding-left: 40px;
font-size: 20px;
margin-bottom: 20px
}
.opm-main-wrapper .choose-section li:last-child {
margin-bottom: 0
}
.opm-main-wrapper .choose-section li::before {
position: absolute;
content: "";
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjM0NCAxNi45NjI2TDE4LjE4NzYgOS4xMTkwNUwxNi45NTgxIDcuODg5NThMMTAuMzQ0IDE0LjUwMzdMNy4wMTkwNCAxMS4xNzg3TDUuNzg5NTggMTIuNDA4MUwxMC4zNDQgMTYuOTYyNlpNMTIuMDAxOCAyMy4wODMxQzEwLjQ2ODggMjMuMDgzMSA5LjAyNzk3IDIyLjc5MjIgNy42NzkxNCAyMi4yMTA0QzYuMzMwMyAyMS42Mjg3IDUuMTU3MDEgMjAuODM5MSA0LjE1OTI1IDE5Ljg0MThDMy4xNjE0OCAxOC44NDQ1IDIuMzcxNTggMTcuNjcxNyAxLjc4OTU1IDE2LjMyMzVDMS4yMDc1MiAxNC45NzUzIDAuOTE2NTA0IDEzLjUzNDcgMC45MTY1MDQgMTIuMDAxOEMwLjkxNjUwNCAxMC40Njg4IDEuMjA3MzkgOS4wMjc5NyAxLjc4OTE3IDcuNjc5MTRDMi4zNzA5NSA2LjMzMDMgMy4xNjA0OSA1LjE1NzAxIDQuMTU3OCA0LjE1OTI2QzUuMTU1MTIgMy4xNjE0OCA2LjMyNzkgMi4zNzE1OCA3LjY3NjE0IDEuNzg5NTVDOS4wMjQzNiAxLjIwNzUyIDEwLjQ2NDkgMC45MTY1MDQgMTEuOTk3OSAwLjkxNjUwNEMxMy41MzA4IDAuOTE2NTA0IDE0Ljk3MTYgMS4yMDczOSAxNi4zMjA1IDEuNzg5MTdDMTcuNjY5MyAyLjM3MDk1IDE4Ljg0MjYgMy4xNjA0OSAxOS44NDA0IDQuMTU3OEMyMC44MzgxIDUuMTU1MTIgMjEuNjI4IDYuMzI3OSAyMi4yMTAxIDcuNjc2MTRDMjIuNzkyMSA5LjAyNDM2IDIzLjA4MzEgMTAuNDY0OSAyMy4wODMxIDExLjk5NzlDMjMuMDgzMSAxMy41MzA4IDIyLjc5MjIgMTQuOTcxNiAyMi4yMTA0IDE2LjMyMDVDMjEuNjI4NyAxNy42NjkzIDIwLjgzOTEgMTguODQyNiAxOS44NDE4IDE5Ljg0MDRDMTguODQ0NSAyMC44MzgxIDE3LjY3MTcgMjEuNjI4IDE2LjMyMzUgMjIuMjEwMUMxNC45NzUzIDIyLjc5MjEgMTMuNTM0NyAyMy4wODMxIDEyLjAwMTggMjMuMDgzMVoiIGZpbGw9IiMwOUFCNTgiLz4KPC9zdmc+Cg==")
}
.opm-main-wrapper .bottom-cta-section {
text-align: center;
padding: 80px 0;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFAC7), to(rgba(255, 237, 166, 0.18)));
background: linear-gradient(180deg, #FFFAC7 0%, rgba(255, 237, 166, 0.18) 100%);
position: relative;
overflow: hidden;
}
.opm-main-wrapper .bottom-cta-section::before {
content: '';
position: absolute;
top: -20%; right: -15%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(201,148,10,0.06) 0%, transparent 65%);
pointer-events: none;
}
.opm-main-wrapper .bottom-cta-section::after {
content: '';
position: absolute;
bottom: -20%; left: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(201,148,10,0.04) 0%, transparent 70%);
pointer-events: none;
}
.opm-main-wrapper .bottom-cta-section > .container {
position: relative;
z-index: 1;
}
.opm-main-wrapper .bottom-cta-section h2 {
color: #1e293b;
}
.opm-main-wrapper .bottom-cta-section .bottom-cta-btn-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 16px;
margin-top: 24px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media screen and (max-width: 991.98px) {
.opm-main-wrapper .bottom-cta-section {
padding: 64px 0;
}
.opm-main-wrapper .bottom-cta-section h2 {
font-size: 1.6rem;
}
}
@media screen and (max-width: 575.98px) {
.opm-main-wrapper .bottom-cta-section {
padding: 48px 0;
}
.opm-main-wrapper .bottom-cta-section h2 {
font-size: 1.35rem;
}
.opm-main-wrapper .bottom-cta-section .bottom-cta-btn-group {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 12px;
}
.opm-main-wrapper .bottom-cta-section .bottom-cta-btn-group a {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.opm-main-wrapper .swiper-slide {
padding-top: 0;
padding-bottom: 0
}
.opm-main-wrapper .testimonial-section {
padding: 80px 0;
background-color: #fbfbfb
}
.opm-main-wrapper .testimonial-section .customer-review-wrapper {
background-color: #f6f6f6;
border-radius: 12px;
padding: 32px;
height: 100%
}
.opm-main-wrapper .testimonial-section .customer-review-wrapper .swiper {
height: 100%
}
.opm-main-wrapper .testimonial-section .customer-review-wrapper .swiper .swiper-wrapper {
height: 100%
}
.opm-main-wrapper .testimonial-section .customer-review-wrapper .swiper .swiper-wrapper .swiper-slide {
height: 100%
}
.opm-main-wrapper .testimonial-section .customer-review-wrapper .swiper .swiper-wrapper .swiper-slide:last-child .client-profile-section img {
max-height: 164px
}
.opm-main-wrapper .testimonial-section .testimonial-wrapper {
margin: 60px 0 0
}
.opm-main-wrapper .testimonial-section .gartner-review-wrapper {
border-radius: 12px;
padding: 32px;
background-color: #f6f6f6;
margin-bottom: 24px;
min-height: 419px;
position: relative
}
.opm-main-wrapper .testimonial-section .gartner-review-wrapper .gartnerReviewSwiper {
padding-bottom: 16px
}
.opm-main-wrapper .testimonial-section .gartner-review-wrapper .gartnerReviewSwiper .swiper-pagination {
bottom: -5px
}
.opm-main-wrapper .testimonial-section .gartner-review-card .gartner-review--item p:not(.gartner-review-details p):last-child {
margin-bottom: 0
}
.opm-main-wrapper .testimonial-section .gartner-review-card .gartner-logo {
height: 50px
}
.opm-main-wrapper .testimonial-section .gartner-review-card .gartner-review-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: #0f3a7b
}
@media only screen and (max-width: 575.98px) {
.opm-main-wrapper .testimonial-section .gartner-review-card .gartner-review-details {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.opm-main-wrapper .testimonial-section .gartner-review-card .gartner-review-details p {
margin: 0 24px 12px 0;
font-size: 16px;
line-height: 1.75
}
.opm-main-wrapper .testimonial-section .gartner-review-card h4 {
margin: 12px 0;
font-weight: 600;
line-height: 1.35
}
.opm-main-wrapper .testimonial-section .client-review-card {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.opm-main-wrapper .testimonial-section .client-review-card .client-profile-section {
background-color: #fff;
border-radius: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 16px;
padding-bottom: 150px;
margin-bottom: 24px;
position: relative
}
.opm-main-wrapper .testimonial-section .client-review-card .client-profile-section img {
max-width: 234px;
max-height: 154px;
position: absolute;
bottom: 0
}
.opm-main-wrapper .testimonial-section .client-review-card .client-profile-section .btn-play-icon {
width: 36px;
height: 36px;
border-radius: 100px;
background-color: #006deb;
color: #fff;
border: 0;
cursor: pointer;
position: absolute;
right: 16px
}
.opm-main-wrapper .testimonial-section .client-review-card .client-profile-section .btn-play-icon::before {
border-top: 7px solid rgba(0, 0, 0, 0);
border-bottom: 7px solid rgba(0, 0, 0, 0);
border-left: 11px solid #fff;
position: absolute;
content: "";
top: 50%;
left: 50%;
-webkit-transform: translate(-32%, -50%);
transform: translate(-36%, -50%)
}
.opm-main-wrapper .testimonial-section .client-review-card .client-details .client-name {
color: #0657bf;
font-size: 18px
}
.opm-main-wrapper .testimonial-section .client-review-card .btn-link {
padding: 0;
margin: 0;
background: none;
border: 0;
font-size: 15px;
text-decoration: underline;
text-transform: uppercase;
color: #0a5ed9;
font-weight: 500;
cursor: pointer
}
.opm-main-wrapper .testimonial-section .award-badge-card {
background-color: #f6f6f6;
border-radius: 12px;
height: 160px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media only screen and (max-width: 991.98px) {
.opm-main-wrapper .testimonial-section .award-badge-card {
margin-bottom: 24px
}
}
.opm-main-wrapper .testimonial-section .award-badge-card img {
height: 100px
}
@media screen and (max-width: 575.98px) {
.opm-main-wrapper .testimonial-section {
padding: 48px 0;
}
.opm-main-wrapper .testimonial-section .customer-review-wrapper {
padding: 20px;
border-radius: 10px;
}
.opm-main-wrapper .testimonial-section .gartner-review-wrapper {
padding: 20px;
min-height: auto;
}
.opm-main-wrapper .testimonial-section .testimonial-wrapper {
margin: 36px 0 0;
}
}
.opm-main-wrapper .itom-features-detail-container {
max-width: 1180px;
width: 100%;
margin: auto;
padding-left: 12px;
padding-right: 12px
}
.opm-main-wrapper .video-player-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
width: 100%;
height: 100%;
padding: 40px 20px;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
display: none;
opacity: 0;
z-index: 999;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.opm-main-wrapper .video-player-wrapper * {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.opm-main-wrapper .video-player-wrapper.active {
display: block;
opacity: 1
}
.opm-main-wrapper .video-player-wrapper .video-player-container {
max-width: 956px;
margin: 100px auto auto
}
.opm-main-wrapper .video-player-wrapper .video-player-container .video-player-close-btn {
width: 32px;
height: 32px;
margin-left: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer
}
.opm-main-wrapper .video-player-wrapper .video-player-container .video-player {
position: relative;
padding-bottom: 56.5%;
margin-top: 12px
}
.opm-main-wrapper .video-player-wrapper .video-player-container .video-player iframe {
position: absolute;
width: 100%;
height: 100%
}
@media screen and (min-width: 992px) {
.sec-header h2 span {
display: block
}
}
@media screen and (max-width: 991.98px) {
.choose-list {
margin-top: 40px
}
}
@media screen and (max-width: 767.98px) {
.about-title-list {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.title-list-item {
text-align: center;
-webkit-box-flex: 1;
-ms-flex: 1 0 45%;
flex: 1 0 45%
}
}
@media screen and (max-width: 479.98px) {
.about-title-list {
gap: 8px
}
.title-list-item {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%
}
}
@media screen and (max-width: 767.98px) {
.resource-other-wrapper {
padding: 24px !important
}
.resource-wrapper {
border-right: 0 !important
}
}
/*--------- related resource seciton css ----------*/
.justify-content-center {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.related-resource-section .related-resource-img {
margin-top: 40px;
max-width: 360px;
width: 100%;
height: auto;
}
.related-resource-section .resource-card {
border: 1px solid #efefef;
border-radius: 12px;
margin-top: 32px;
}
@media screen and (max-width: 1199.98px) {
.related-resource-section .resource-card {
margin: 40px 0 0;
}
}
.related-resource-section .resource-wrapper {
padding: 24px;
border-right: 1px solid #efefef;
}
.related-resource-section .resource-link-item.featured {
margin-bottom: 32px;
}
.related-resource-section .resource-link-list li {
margin-bottom: 8px;
font-size: 1rem;
line-height: 1.75;
}
.related-resource-section .resource-link-list li:last-child {
margin-bottom: 0;
}
.related-resource-section .resource-link-list li a {
color: inherit !important;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.related-resource-section .resource-link-list li a svg {
vertical-align: sub;
margin-left: 4px;
}
.related-resource-section .resource-other-wrapper {
padding: 24px 24px 24px 0;
}
.related-resource-section .resource-other-wrapper a {
color: inherit !important;
}
.related-resource-section .resource-other-wrapper .resource-other-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-decoration: none;
}
.related-resource-section .resource-other-wrapper .resource-other-item:nth-child(1),
.related-resource-section .resource-other-wrapper .resource-other-item:nth-child(2) {
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #efefef;
}
.related-resource-section .resource-other-wrapper .resource-other-item:hover {
text-decoration: none;
}
.related-resource-section .resource-other-wrapper .resource-other-item .h5 {
line-height: 1;
font-size: 20px;
margin-bottom: 4px;
}
.related-resource-section .resource-other-wrapper .resource-other-item .p {
font-size: 1rem;
line-height: 1.75;
}
.related-resource-section .resource-other-wrapper .resource-other-item .resource-other-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.opm-main-wrapper .anchor-text {
font-size: 16px;
font-weight: 400;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
}
.related-resource-section .resource-other-wrapper .resource-other-item .anchor-text {
color: #006deb;
}
.related-resource-section .resource-other-wrapper .resource-other-item .resource-other-icon {
margin-right: 20px;
}
.related-resource-section .resource-other-wrapper .resource-other-item .resource-other-icon svg {
width: 32px;
height: 38px;
}
.related-resource-section .resource-other-wrapper .resource-other-item a {
font-size: 1rem;
}
@media screen and (max-width: 1199.98px) {
.related-resource-title-wrapper {
text-align: center;
}
}
@media screen and (max-width: 767.98px) {
.resource-other-wrapper {
padding: 24px !important;
}
.resource-wrapper {
border-right: 0 !important;
}
}
@media screen and (min-width: 992px) {
.d-lg-block {
display: block !important;
}
}
#VideosAndLogos {
display: none;
}
.sec-padding-80 {
padding: 80px 0px;
}
.sec-padding-100 {
padding: 100px 0px;
}
/*------- accordian css -------*/
.faq-content-section {
background: #f9f9f9;
}
.tac {
text-align: center;
}
.faq-content-section .faq-container {
background: #FAFCFF;
padding: 100px 175px;
border-radius: 8px;
box-shadow: 10px 10px 20px 0px #f4f6ff;
}
.opm-main-wrapper .faq-content-section .accordion-container {
max-width: 980px;
margin: 0 auto;
padding: 0px 16px;
}
.opm-main-wrapper .faq-content-section h2 {
margin-bottom: 40px;
color: #1e293b;
}
.opm-main-wrapper .faq-content-section h3 {
font-weight: 500;
color: #1e293b;
}
.accordion-container {
width: 100%;
}
.accordion-container .accordion-item {
border-bottom: 1px solid #ebeae7;
cursor: pointer;
padding: 20px 0;
}
.accordion-container .accordion-item h4,
.accordion-container .accordion-item h3 {
margin: 0;
font-size: 20px;
line-height: 1.5;
letter-spacing: -0.35px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 16px;
}
.accordion-container .accordion-item .accordion-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.accordion-container .accordion-item .accordion-head.active .plusminus::before {
content: "−";
}
.accordion-container .accordion-item .accordion-head.active h3 {
color: #006DEB;
}
.accordion-container .accordion-item .accordion-body {
padding-top: 16px;
max-width: 90%;
}
.accordion-container .accordion-item .accordion-body p {
color: #475569;
}
.accordion-container .accordion-item .accordion-body p a {
color: #006deb;
}
.accordion-container .accordion-item .plusminus {
font-size: 24px;
font-weight: 200;
border: 1px solid #444444;
width: 24px;
height: 24px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 100px;
color: #444444;
position: relative;
top: 0;
}
.accordion-container .accordion-item .plusminus::before {
position: absolute;
content: "+";
top: 0px;
}
.accordion-container .accordion-body {
display: none;
}
@media screen and (max-width: 991.98px) {
.faq-content-section .faq-container {
padding: 80px 60px;
}
}
@media screen and (max-width: 767.98px) {
.faq-content-section .faq-container {
padding: 48px 24px;
}
}
@media screen and (max-width: 575.98px) {
.faq-content-section .faq-container {
padding: 36px 16px;
}
.opm-main-wrapper .faq-content-section h2 {
font-size: 1.4rem;
margin-bottom: 28px;
}
}
@media screen and (max-width: 680.98px){
.opm-main-wrapper .container {
width: 98%;
margin: auto;
}
}
/*------- accordian css end ------------*/
.list-box {
padding: 0 0 0 0px !important;
border-radius: 8px;
margin-top: 24px;
}
.list-box li {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 32px !important;
margin-bottom: 8px;
font-size: 18px;
font-weight: 300;
line-height: 30px;
margin: 0 0 16px;
list-style: none;
;
}
/*---video player popup css start ---------*/
.video-player-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.64);
width: 100%;
height: 100%;
padding: 40px 20px;
-webkit-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
display: none;
opacity: 0;
z-index: 99999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.video-player-wrapper * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.video-player-wrapper.active {
display: block;
opacity: 1;
}
.video-player-wrapper .video-player-container {
max-width: 956px;
margin: 100px auto auto;
}
.video-player-wrapper .video-player-container .video-player-close-btn {
width: 32px;
height: 32px;
margin-left: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.video-player-wrapper .video-player-container .video-player {
position: relative;
padding-bottom: 56.5%;
margin-top: 12px;
}
.video-player-wrapper .video-player-container .video-player iframe {
position: absolute;
width: 100%;
height: 100%;
}
.banner-video {
display: flex;
align-items: center;
justify-content: flex-end;
}
.intro-video {
position: relative;
border-radius: 12px;
z-index: 1;
max-width: 527px;
width: 100%;
aspect-ratio: 527 / 293;
}
.intro-video img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 12px;
z-index: -1;
-o-object-fit: cover;
object-fit: cover;
background: #e3d5a4;
}
.intro-video .video-play-button {
width: 64px;
height: 64px;
border-radius: 100px;
background-color: #e80e19;
border: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* border: 2px solid #fff; */
cursor: pointer;
}
.intro-video .video-play-button .video-play-icon {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 18px solid #ffffff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-32%, -50%);
transform: translate(-32%, -48%);
width: 20px;
height: 20px;
}
.intro-section {
text-align: center;
}
.intro-section.sec-padding-80 {
padding-top: 180px;
}
/*---video player popup css end ---------*/
.feature-sec-content {
display: flex;
align-items: self-start;
justify-content: center;
flex-direction: column;
}
.feature-sec-content .list-box {
padding: 30px !important;
background: #fffbe1;
margin: 0;
}
/* ---- anchor link css ----------*/
.anchors-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
position: sticky;
top: 50px;
background: #fff;
height: 70px;
width: 100%;
margin-bottom: 24px;
z-index: 1;
}
.anchors-box {
display: inline-flex;
gap: 12px;
}
.anchors-wrapper h6 {
margin: 0;
}
.anchors-box ul {
display: inline-flex;
gap: 8px;
}
.anchors-box li {
list-style: none;
margin-bottom: 0 !important;
}
.anchors-box li a {
background: #efefef;
padding: 4px 16px;
border-radius: 50px;
color: #000;
border: 1px solid #e5e2e2;
font-size: 16px;
font-weight: 400;line-height:1.4;
text-decoration: none;display:block;text-align:center;
}
.anchors-box li a.active {
background: #333;
color: #fff;
}
.anchors-box li a:hover {
text-decoration: inherit;
background: #333;
color: #fff;
border: 1px solid #333;
}
@media screen and (max-width: 980.98px) {
.anchors-wrapper {
display: block;
position:sticky;
text-align: center;
height: auto;
top:70px; padding-bottom:20px; padding-top:20px;
}
.anchors-wrapper h6 {
margin-bottom: 12px;
}
.anchors-box {
display: block;
}
.anchors-box ul {
display: block;
}
.anchors-box li {
display: inline-block;
}
.anchors-box li a {
display: inline-flex;
margin: 4px 0px;
padding:8px 16px;
}
}
@media screen and (max-width: 500.98px) {
.anchors-wrapper {
position: inherit;
}
.anchors-box li a:focus{background:#efefef; border:1px solid #ddd; color:#000;}
}
/*------- table css ----------*/
.table {
max-width: 998px;
margin: 0 auto;
}
.table {
border-collapse: separate !important;
}
.table thead tr th {
background: #3c3c3c;
color: #fff;
}
.table th {
font-weight: 600
}
.table th,
.table td {
background: #fff;
font-size: 17px;
padding: 16px 24px;
vertical-align: middle;
border-color: #d4d4d4;
text-align: center;
border: 1px solid #eff1f5;
;
}
.table td.bg-green {
background-color: #e6fff5
}
.table td.bg-red {
background-color: #fff0f0
}
.comparison-table {
max-width: 980px;
margin-left: auto;
border-collapse: collapse !important;
width: 100%;
}
.comparison-table tr td:nth-of-type(2) {
background-color: #fff;
}
.custom-table-cover {
padding: 80px;
border-radius: 12px;
}
table {
border-collapse: collapse;
width: 50%;
}
@media screen and (max-width: 980.98px) {
.custom-table-cover {
background: #fffbe1;
padding: 32px 16px;
border-radius: 12px;
}
.table th,
.table td {
padding: 16px 24px;
;
}
}
.resolve-section-content a, .feature-list-content a {color:#006deb;}
#adRhsLnkNm{display:block;background:#34ad65;border-radius:3px 0 0 3px;height:105px;position:absolute;right:1px;top:501px;width:95px;transition:all 1.2s ease-in-out;-webkit-transition:all 1.2s ease-in-out;color:#fff;font-family:BariolRegular,sans-serif;text-align:center;padding:10px 16px 0;z-index:1;cursor:pointer}#adRhsLnkNm a{text-decoration:none;color:#fff!important;text-align:center;display:block;margin:0 auto;padding:5px;font-size:10px;line-height:15px}
.value-points-wrapper {
padding: 0;margin: 0;display:flex;flex-wrap:wrap;flex-direction:column;gap:8px;margin-bottom:24px;
}
.value-points-wrapper li {
font-size: 16px !important;
color: #000000;font-weight:400 !important;
}
.value-points-wrapper li {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_2388_1997)'%3e%3cpath d='M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.0833 0 12.1083 0.158333 13.075 0.475C14.0417 0.791667 14.9333 1.23333 15.75 1.8L14.3 3.275C13.6667 2.875 12.9917 2.5625 12.275 2.3375C11.5583 2.1125 10.8 2 10 2C7.78333 2 5.89583 2.77917 4.3375 4.3375C2.77917 5.89583 2 7.78333 2 10C2 12.2167 2.77917 14.1042 4.3375 15.6625C5.89583 17.2208 7.78333 18 10 18C12.2167 18 14.1042 17.2208 15.6625 15.6625C17.2208 14.1042 18 12.2167 18 10C18 9.7 17.9833 9.4 17.95 9.1C17.9167 8.8 17.8667 8.50833 17.8 8.225L19.425 6.6C19.6083 7.13333 19.75 7.68333 19.85 8.25C19.95 8.81667 20 9.4 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM8.6 14.6L4.35 10.35L5.75 8.95L8.6 11.8L18.6 1.775L20 3.175L8.6 14.6Z' fill='%233DB372'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_2388_1997'%3e%3crect width='20' height='20' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
background-repeat: no-repeat;
background-position: 8px 4px;
padding-left: 40px;
font-size: 17px;
margin: 0 !important;
}
.text-white {
color: #f9f9f9
}
.feature-list {display:flex;flex-wrap:wrap;gap:24px;justify-content:center;}
.feature-list .feature-list-item {width: calc(33.33% - 24px);}
.key-metrics-section{padding:100px 0;background: #222; position: relative; overflow: hidden;}
.key-metrics-section::before {
content: '';
position: absolute;
top: -20%; right: -15%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(201,148,10,0.06) 0%, transparent 70%);
pointer-events: none;
}
.key-metrics-section::after {
content: '';
position: absolute;
bottom: -15%; left: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(201,148,10,0.04) 0%, transparent 70%);
pointer-events: none;
}
.key-metrics-section > section > .container {
position: relative;
z-index: 1;
}
.key-metrics-section .sec-header h2 {
color: #f1f5f9;
}
ul.ul-key-metrics{ display: flex; flex-wrap: wrap; gap: 24px; justify-content: center}
ul.ul-key-metrics >li{ width: calc(25% - 18px); border: 1px solid rgba(255,255,255,0.08); padding: 24px;border-radius: 12px; color: #94a3b8;position:relative; background: rgba(255,255,255,0.04);}
.km-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: rgba(201,148,10,0.12); margin-bottom: 12px; flex-shrink: 0; transition: background 0.4s ease, box-shadow 0.4s ease; }
.ul-key-metrics .key-metrics-title {display:block;position:relative;padding-left:0;font-weight:700;min-height:auto;margin-bottom:6px;font-size: 1.5rem; color: #e2e8f0;}
.ul-key-metrics .key-metrics-title:before {
display: none;
}
span.fea-sprite {
background:url(../images/server-monitoring/server-monitoring-fea-sprites.svg) no-repeat top center;
width: 50px;
height: 48px;
display:inline-block;
margin-bottom: 8px;
}
span.fea-sprite.icon1 {background-position: 3px 4px;}
span.fea-sprite.icon2 {background-position: -54px 4px;}
span.fea-sprite.icon3 {background-position: -110px 4px;}
/* ========================================
Differentiator Section — "What sets OpManager apart"
======================================== */
.differentiator-section {
padding: 90px 0 100px;
background: #ffffff;
position: relative;
overflow: hidden;
}
.differentiator-section::before {
content: '';
position: absolute;
top: -10%; right: -20%;
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(201,148,10,0.04) 0%, transparent 70%);
pointer-events: none;
}
.differentiator-section::after {
content: '';
position: absolute;
bottom: -15%; left: -10%;
width: 650px; height: 650px;
background: radial-gradient(circle, rgba(201,148,10,0.04) 0%, transparent 70%);
pointer-events: none;
}
.differentiator-section > section > .container {
position: relative;
z-index: 1;
}
/* Header */
.diff-header {
text-align: center;
}
.diff-badge {
display: inline-block;
padding: 6px 20px;
border-radius: 50px;
background: rgba(201,148,10,0.08);
border: 1px solid rgba(201,148,10,0.18);
color: #c9940a;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 20px;
}
.diff-header h2 {
color: #1e293b;
font-size: 2.2rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 12px;
}
.diff-subtitle {
color: #64748b;
font-size: 18px;
max-width: 560px;
margin: 0 auto;
line-height: 1.6;
}
/* Two-column feature list */
.diff-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 960px;
margin: 0 auto;
}
/* Feature item */
.diff-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px;
padding: 32px 28px;
border-bottom: 1px solid #f1f5f9;
transition: background 0.35s ease;
/* Entrance animation */
opacity: 0;
transform: translateY(24px);
}
.diff-item.visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background 0.35s ease;
}
/* Left-column items get right border */
.diff-item:nth-child(odd) {
border-right: 1px solid #f1f5f9;
}
/* Remove bottom border for last row */
.diff-item:nth-last-child(-n+2) {
border-bottom: none;
}
/* Cyan accent bar */
.diff-item__accent {
position: absolute;
left: 0; top: 24px; bottom: 24px;
width: 3px;
background: linear-gradient(180deg, #c9940a, rgba(201,148,10,0.15));
border-radius: 3px;
opacity: 0;
transform: scaleY(0.3);
transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Number */
.diff-item__num {
flex-shrink: 0;
width: 40px;
font-size: 28px;
font-weight: 800;
color: rgba(201,148,10,0.12);
line-height: 1;
padding-top: 4px;
font-variant-numeric: tabular-nums;
transition: color 0.35s ease;
}
/* Body */
.diff-item__body {
flex: 1;
min-width: 0;
}
/* Icon */
.diff-item__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(201,148,10,0.07);
margin-bottom: 14px;
transition: background 0.35s ease, transform 0.35s ease;
}
/* Title */
.diff-item__title {
color: #1e293b;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.35;
transition: color 0.35s ease;
}
/* Text */
.diff-item__text {
color: #475569;
font-size: 14.5px;
line-height: 1.7;
margin: 0;
}
/* ---- Hover ---- */
.diff-item:hover {
background: rgba(201,148,10,0.015);
}
.diff-item:hover .diff-item__accent {
opacity: 1;
transform: scaleY(1);
}
.diff-item:hover .diff-item__num {
color: rgba(201,148,10,0.28);
}
.diff-item:hover .diff-item__icon {
background: rgba(201,148,10,0.12);
transform: scale(1.05);
}
.diff-item:hover .diff-item__title {
color: #0c4a6e;
}
/* ---- Responsive ---- */
@media screen and (max-width: 991.98px) {
.differentiator-section {
padding: 72px 0 80px;
}
.diff-list {
grid-template-columns: 1fr;
max-width: 640px;
}
.diff-item:nth-child(odd) {
border-right: none;
}
.diff-item:last-child {
border-bottom: none;
}
.diff-item:nth-last-child(2) {
border-bottom: 1px solid #f1f5f9;
}
.diff-header h2 {
font-size: 1.75rem;
}
.diff-subtitle {
font-size: 16px;
}
}
@media screen and (max-width: 575.98px) {
.differentiator-section {
padding: 48px 0 56px;
}
.diff-item {
padding: 22px 16px;
gap: 14px;
}
.diff-item__num {
width: 32px;
font-size: 22px;
}
.diff-header h2 {
font-size: 1.4rem;
}
.diff-header {
margin-bottom: 28px;
}
.diff-item__title {
font-size: 1rem;
}
.diff-item__text {
font-size: 13.5px;
}
.diff-item__icon {
width: 38px; height: 38px;
border-radius: 10px;
}
}
/* Glass hover effect for key-metrics cards */
ul.ul-key-metrics > li {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-image: linear-gradient(135deg, transparent 0%, transparent 100%);
border: 1px solid rgba(255,255,255,0.08);
}
ul.ul-key-metrics > li::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, transparent, transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
opacity: 0;
z-index: 1;
}
/* Dark section hover */
.key-metrics-section ul.ul-key-metrics > li:hover {
background: linear-gradient(135deg, rgba(201,148,10,0.1) 0%, rgba(201,148,10,0.03) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-color: transparent;
box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(201,148,10,0.12);
transform: translateY(-6px);
}
.key-metrics-section ul.ul-key-metrics > li:hover::before {
background: linear-gradient(135deg, rgba(201,148,10,0.6), rgba(201,148,10,0.1) 50%, rgba(201,148,10,0.4));
opacity: 1;
}
.key-metrics-section ul.ul-key-metrics > li:hover .km-ico {
background: rgba(201,148,10,0.2);
box-shadow: 0 0 16px rgba(201,148,10,0.18);
transition: all 0.4s ease;
}
/* Scroll entrance animation for key-metrics cards */
.km-animate {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.km-animate.visible {
opacity: 1;
transform: translateY(0);
}
@media screen and (max-width: 1199.98px) {
ul.ul-key-metrics > li { width: calc(33.33% - 18px); }
}
@media screen and (max-width: 991.98px) {
ul.ul-key-metrics > li { width: calc(50% - 18px); }
.feature-list .feature-list-item { width: calc(100% - 24px); }
.key-metrics-section { padding: 72px 0; }
}
@media screen and (max-width: 575.98px) {
ul.ul-key-metrics > li { width: 100%; }
ul.ul-key-metrics { gap: 16px; }
.key-metrics-section { padding: 48px 0; }
.key-metrics-section .sec-header h2 { font-size: 1.4rem; }
.ul-key-metrics .key-metrics-title { font-size: 1.2rem; }
ul.ul-key-metrics > li { padding: 20px; border-radius: 14px; }
.km-ico { width: 48px; height: 48px; border-radius: 10px; }
}
/* ========================================
Banner Widgets — Premium 2×2 Grid
======================================== */
/* Stack container */
.mw-stack {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 560px;
margin-left: auto;
padding-top: 10px;
}
/* Grid row */
.mw-grid-row {
display: flex;
gap: 12px;
}
.mw-grid-row > .mw-card {
flex: 1;
min-width: 0;
}
/* ========= Shared card base ========= */
.mw-card {
position: relative;
z-index: 1;
border-radius: 16px;
padding: 20px 22px;
background: #ffffff;
border: 1px solid #e8e8ec;
box-shadow:
0 1px 3px rgba(0,0,0,0.04),
0 8px 24px rgba(0,0,0,0.06);
opacity: 0;
transform: translateY(14px) scale(0.98);
transition: opacity 0.4s cubic-bezier(.4,0,.2,1),
transform 0.4s cubic-bezier(.4,0,.2,1),
box-shadow 0.3s ease;
}
.mw-card.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.mw-card:hover {
box-shadow:
0 2px 6px rgba(0,0,0,0.05),
0 12px 32px rgba(0,0,0,0.10);
}
/* ---- Shared card header ---- */
.mw-card__top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.mw-card__title-row {
display: flex;
align-items: center;
gap: 7px;
}
.mw-card__title {
font-size: 13px;
font-weight: 700;
color: #1e293b;
letter-spacing: 0.2px;
}
/* LIVE badge */
.mw-badge {
font-size: 8px;
font-weight: 800;
letter-spacing: 1.8px;
color: #fff;
background: linear-gradient(135deg, #34d399, #10b981);
padding: 3px 10px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(52,211,153,0.35);
animation: badgePulse 2.4s infinite ease-in-out;
}
@keyframes badgePulse {
0%,100% { box-shadow: 0 2px 8px rgba(52,211,153,0.25); }
50% { box-shadow: 0 2px 16px rgba(52,211,153,0.55); }
}
/* ============================================
Card A: Device Health Monitor
============================================ */
.mw-card--a {
padding: 20px 22px 14px;
}
/* Health rows */
.mw-health-list {
display: flex;
flex-direction: column;
gap: 0;
}
.mw-health-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.mw-health-row.visible {
opacity: 1;
transform: translateX(0);
}
.mw-health-row:last-child {
border-bottom: none;
padding-bottom: 6px;
}
.mw-health-row__info {
display: flex;
align-items: center;
gap: 10px;
}
.mw-health-row__icon {
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mw-health-row__icon--clear { background: #ecfdf5; }
.mw-health-row__icon--trouble { background: #fffbeb; }
.mw-health-row__icon--attention { background: #fefce8; }
.mw-health-row__text {
display: flex;
flex-direction: column;
}
.mw-health-row__name {
font-size: 13px;
font-weight: 600;
color: #1e293b;
line-height: 1.2;
}
.mw-health-row__sub {
font-size: 10px;
font-weight: 500;
color: #94a3b8;
margin-top: 1px;
}
.mw-health-row__right {
display: flex;
align-items: center;
gap: 8px;
}
/* Mini health bars */
.mw-mini-bar {
width: 48px;
height: 5px;
background: #f1f5f9;
border-radius: 10px;
overflow: hidden;
}
.mw-mini-bar__fill {
height: 100%;
width: 0;
border-radius: 10px;
transition: width 1.4s cubic-bezier(.4,0,.2,1);
}
.mw-mini-bar__fill--green { background: linear-gradient(90deg, #34d399, #10b981); }
.mw-mini-bar__fill--amber { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.mw-mini-bar__fill--yellow { background: linear-gradient(90deg, #facc15, #eab308); }
.mw-health-row__pct {
font-size: 12px;
font-weight: 800;
color: #1e293b;
min-width: 28px;
text-align: right;
}
/* Footer */
.mw-card__footer-bar {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid #f1f5f9;
text-align: center;
}
.mw-card__footer-label {
font-size: 11px;
font-weight: 500;
color: #94a3b8;
}
.mw-card__footer-label strong {
font-weight: 800;
color: #1e293b;
}
/* ============================================
Card B: Network Performance
============================================ */
.mw-card--b {
padding: 20px 20px 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Perf chart block */
.mw-perf-chart__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.mw-perf-chart__label {
font-size: 11px;
font-weight: 600;
color: #64748b;
}
.mw-perf-chart__value {
font-size: 14px;
font-weight: 800;
line-height: 1;
}
.mw-perf-chart__value--orange { color: #d97706; }
.mw-perf-chart__value--green { color: #059669; }
.mw-perf-chart__wrap {
position: relative;
border-radius: 10px;
overflow: hidden;
background: #fafbfc;
padding: 4px 0;
}
/* Sparkline SVGs */
.mw-spark {
display: block;
width: 100%;
height: 44px;
}
.mw-spark__line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
transition: stroke-dashoffset 2.2s cubic-bezier(.25,.46,.45,.94);
}
.mw-spark__area {
opacity: 0;
transition: opacity 1.4s ease 0.5s;
}
.mw-spark__dot {
opacity: 0;
transition: opacity 0.5s ease 2s;
}
.mw-spark__dot.visible {
opacity: 1;
filter: drop-shadow(0 0 4px currentColor);
}
/* ============================================
Cards C & D: Ring Gauge Stat Cards
============================================ */
.mw-card--c,
.mw-card--d {
padding: 20px 20px 18px;
}
.mw-ring-stat {
display: flex;
align-items: center;
gap: 14px;
}
.mw-ring-stat__gauge {
position: relative;
width: 64px;
height: 64px;
flex-shrink: 0;
}
.mw-ring-stat__svg {
width: 100%;
height: 100%;
}
.mw-ring-stat__arc {
transform: rotate(-90deg);
transform-origin: center;
transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);
}
.mw-ring-stat__num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #1e293b;
line-height: 1;
}
.mw-ring-stat__info {
display: flex;
flex-direction: column;
}
.mw-ring-stat__big {
font-size: 18px;
font-weight: 700;
color: #1e293b;
line-height: 1.2;
}
.mw-ring-stat__sub {
font-size: 11px;
font-weight: 500;
color: #94a3b8;
margin-top: 2px;
}
/* ========= Responsive ========= */
@media screen and (min-width: 993px) and (max-width: 1199px) {
.mw-stack {
max-width: 100%;
}
.mw-health-row__name { font-size: 12px; }
.mw-mini-bar { width: 36px; }
}
@media screen and (max-width: 992px) {
.mw-stack {
margin: 32px auto 0;
max-width: 520px;
padding-top: 0;
}
}
@media screen and (max-width: 576px) {
.mw-grid-row {
flex-direction: column;
}
.mw-stack { max-width: 100%; }
}
/* ========================================
Organizations Section — Interactive Widget
======================================== */
.org-widgets {
max-width: 640px;
margin-left: auto;
font-family: 'zoho_puviregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ==============================================
Meraki Controller Dashboard (mcd-)
============================================== */
.mcd-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
max-height: 500px;
display: flex;
flex-direction: column;
}
.mcd-card.visible {
opacity: 1;
transform: translateY(0);
}
/* ---- Header bar (tab style) ---- */
.mcd-header {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
border-bottom: 1px solid #e5e9ef;
flex-shrink: 0;
background: #fafbfc;
}
.mcd-header__tabs {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
}
.mcd-hstat {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-right: 1px solid #e5e9ef;
}
.mcd-hstat__name {
font-size: 15px;
font-weight: 700;
color: #1e293b;
line-height: 1.15;
}
.mcd-hstat__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mcd-hstat__info {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.mcd-hstat__num {
font-size: 18px;
font-weight: 700;
color: #1e293b;
font-variant-numeric: tabular-nums;
}
.mcd-hstat__label {
font-size: 11px;
font-weight: 400;
color: #64748b;
white-space: nowrap;
}
/* ---- Sub-tabs ---- */
.mcd-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid #eef1f5;
padding: 0 20px;
flex-shrink: 0;
}
.mcd-tabs__item {
font-size: 13px;
font-weight: 500;
color: #64748b;
padding: 10px 16px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.mcd-tabs__item:hover {
color: #334155;
}
.mcd-tabs__item--active {
color: #1e293b;
border-bottom-color: #3d8c6e;
}
/* ---- Body: 2-column layout ---- */
.mcd-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px;
overflow-y: auto;
flex: 1;
min-height: 0;
background: #f4f6f8;
}
.mcd-col {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- Section (card) ---- */
.mcd-section {
background: #ffffff;
border-radius: 10px;
border: 1px solid #e8ecf1;
overflow: hidden;
}
.mcd-section__hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 8px;
background: #f9fafb;
border-bottom: 1px solid #eef1f5;
}
.mcd-section__title {
font-size: 13px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 4px;
}
.mcd-section__actions {
display: flex;
align-items: center;
gap: 8px;
}
.mcd-section__actions svg {
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
}
.mcd-section__actions svg:hover {
opacity: 1;
}
/* ---- Table ---- */
.mcd-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.mcd-table__th {
text-align: left;
font-size: 11px;
font-weight: 600;
color: #1e293b;
padding: 10px 16px 8px;
border-bottom: 1px solid #eef1f5;
white-space: nowrap;
}
.mcd-table__th svg {
vertical-align: middle;
margin-left: 2px;
}
.mcd-table td {
padding: 9px 16px;
color: #334155;
font-weight: 400;
border-bottom: 1px solid #f5f7fa;
font-variant-numeric: tabular-nums;
}
.mcd-table tbody tr:last-child td {
border-bottom: none;
}
.mcd-table tbody tr:hover td {
background: #f8fafc;
}
/* Row animation */
.mcd-row-animate {
opacity: 0;
transform: translateX(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.mcd-row-animate.visible {
opacity: 1;
transform: translateX(0);
}
/* Responsive */
@media screen and (max-width: 992px) {
.org-widgets {
margin: 28px auto 0;
max-width: 600px;
}
}
@media screen and (max-width: 768px) {
.mcd-body {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
.mcd-header {
flex-wrap: wrap;
}
.mcd-header__tabs {
flex-wrap: wrap;
width: 100%;
}
.mcd-hstat {
display: none;
}
.mcd-hstat.mcd-hstat--active {
display: flex;
flex: 1;
justify-content: center;
width: 100%;
border-right: none;
}
}
@media screen and (max-width: 576px) {
.mcd-hstat {
padding: 8px 10px;
}
.mcd-hstat__num {
font-size: 15px;
}
.mcd-section__hdr {
padding: 10px 12px 6px;
}
.mcd-table__th,
.mcd-table td {
padding: 8px 12px;
font-size: 11.5px;
}
}
/* ========================================
Devices Section — Interactive Widget
======================================== */
/* ========================================
Devices Section — dv-card Widget
======================================== */
.dev-widgets {
max-width: 600px;
margin-left: auto;
}
.dv-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
max-height: 540px;
display: flex;
flex-direction: column;
}
.dv-card.visible {
opacity: 1;
transform: translateY(0);
}
/* Device-type sub-tabs */
.dv-subtabs {
display: flex;
align-items: center;
gap: 0;
padding: 0 18px;
border-bottom: 1px solid #e5e9ef;
background: #fff;
overflow-x: auto;
}
.dv-subtabs__item {
font-size: 12px;
font-weight: 500;
color: #64748b;
padding: 9px 14px;
white-space: nowrap;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.dv-subtabs__item:hover {
color: #334155;
}
.dv-subtabs__item--active {
color: #1e293b;
font-weight: 600;
border-bottom: 2px solid #3d8c6e;
}
/* Sub-header */
.dv-subheader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px 8px;
border-bottom: 1px solid #f1f5f9;
background: #fff;
flex-shrink: 0;
}
.dv-subheader__title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
}
.dv-subheader__right {
display: flex;
align-items: center;
gap: 8px;
}
.dv-filter {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #64748b;
border: 1px solid #e2e8f0;
border-radius: 5px;
padding: 4px 10px;
cursor: pointer;
white-space: nowrap;
}
.dv-filter strong {
color: #334155;
font-weight: 600;
}
.dv-actions-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: #3d8c6e;
border-radius: 5px;
padding: 5px 14px;
cursor: pointer;
white-space: nowrap;
}
.dv-icon-actions {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 4px;
}
.dv-icon-actions svg {
cursor: pointer;
}
/* Table */
.dv-table-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.dv-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.dv-th {
font-size: 11.5px;
font-weight: 600;
color: #64748b;
text-align: left;
padding: 10px 12px;
background: #fafbfc;
border-bottom: 1px solid #e5e9ef;
white-space: nowrap;
}
.dv-th--chk {
width: 30px;
text-align: center;
padding: 10px 8px;
}
.dv-td {
padding: 9px 12px;
color: #334155;
border-bottom: 1px solid #f1f5f9;
white-space: nowrap;
font-size: 12.5px;
}
.dv-td--chk {
width: 30px;
text-align: center;
padding: 9px 8px;
}
.dv-td--name {
font-weight: 500;
color: #1e293b;
}
.dv-td--mac {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 11.5px;
color: #64748b;
}
/* Power State indicators */
.dv-pstate {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
}
.dv-pstate--trouble { color: #d97706; }
.dv-pstate--notmon { color: #94a3b8; }
.dv-pstate--clear { color: #16a34a; }
/* Advanced Monitoring buttons */
.dv-monitor {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.dv-monitor--start { color: #3d8c6e; }
.dv-monitor--stop { color: #dc2626; }
/* Row animation */
.dv-row-animate {
opacity: 0;
transform: translateX(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.dv-row-animate.visible {
opacity: 1;
transform: translateX(0);
}
/* Responsive */
@media screen and (max-width: 992px) {
.dev-widgets {
margin: 28px auto 0;
max-width: 520px;
}
}
@media screen and (max-width: 576px) {
.dv-card { max-height: 440px; }
.dv-subtabs__item { font-size: 11px; padding: 7px 10px; }
.dv-th, .dv-td { padding: 8px 8px; font-size: 11px; }
}
/* ========================================
Networks Section — nw-card Widget
======================================== */
.net-widgets {
max-width: 600px;
}
.nw-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
max-height: 520px;
display: flex;
flex-direction: column;
}
.nw-card.visible {
opacity: 1;
transform: translateY(0);
}
/* Active stat tab indicator */
.mcd-hstat--active {
border-bottom: 3px solid #3d8c6e;
margin-bottom: -1px;
background: #fff;
}
/* Sub-header: title + filter + actions */
.nw-subheader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px 8px;
border-bottom: 1px solid #eef1f5;
flex-shrink: 0;
}
.nw-subheader__title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
}
.nw-subheader__right {
display: flex;
align-items: center;
gap: 12px;
}
.nw-filter {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
transition: border-color 0.2s;
}
.nw-filter:hover {
border-color: #cbd5e1;
}
.nw-actions {
display: flex;
align-items: center;
gap: 8px;
}
.nw-actions svg {
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
}
.nw-actions svg:hover {
opacity: 1;
}
/* Table wrapper */
.nw-table-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Networks table */
.nw-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.nw-th {
text-align: left;
font-size: 11.5px;
font-weight: 700;
color: #1e293b;
padding: 10px 14px 8px;
border-bottom: 1px solid #eef1f5;
white-space: nowrap;
}
.nw-th--wide {
min-width: 120px;
}
.nw-th--center {
text-align: center;
}
.nw-th svg {
vertical-align: middle;
margin-left: 2px;
}
.nw-td {
padding: 9px 14px;
color: #334155;
font-weight: 400;
border-bottom: 1px solid #f5f7fa;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.nw-td--type {
font-size: 11.5px;
color: #64748b;
}
.nw-td--center {
text-align: center;
}
.nw-table tbody tr:last-child .nw-td {
border-bottom: none;
}
.nw-table tbody tr:hover .nw-td {
background: #f8fafc;
}
/* nw row animation */
.nw-row-animate {
opacity: 0;
transform: translateX(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.nw-row-animate.visible {
opacity: 1;
transform: translateX(0);
}
/* Responsive */
@media screen and (max-width: 992px) {
.net-widgets {
margin: 28px auto 0;
max-width: 580px;
}
}
@media screen and (max-width: 576px) {
.nw-subheader {
padding: 8px 14px 6px;
}
.nw-th {
padding: 8px 10px;
font-size: 10.5px;
}
.nw-td {
padding: 7px 10px;
font-size: 11.5px;
}
}
/* ========================================
Clients Section Widget (2×1 Stack)
======================================== */
/* ========================================
Clients Section — cl-card Widget
======================================== */
.cli-stack {
max-width: 600px;
}
.cl-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
max-height: 540px;
display: flex;
flex-direction: column;
}
.cl-card.visible {
opacity: 1;
transform: translateY(0);
}
/* Sub-header */
.cl-subheader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px 8px;
border-bottom: 1px solid #f1f5f9;
background: #fff;
flex-shrink: 0;
}
.cl-subheader__title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
}
.cl-subheader__right {
display: flex;
align-items: center;
gap: 10px;
}
.cl-subheader__right svg {
cursor: pointer;
}
/* Body */
.cl-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 18px 18px 24px;
}
/* Network group */
.cl-net-group {
margin-bottom: 0;
}
.cl-net-group__hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 0 0 12px;
}
.cl-net-group__name {
font-size: 14px;
font-weight: 600;
color: #1e293b;
}
.cl-net-group__count {
font-size: 14px;
font-weight: 700;
color: #334155;
}
/* Table */
.cl-table-wrap {
border: 1px solid #e5e9ef;
border-radius: 8px;
overflow: hidden;
}
.cl-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.cl-th {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-align: left;
padding: 11px 16px;
background: #fafbfc;
border-bottom: 1px solid #e5e9ef;
white-space: nowrap;
}
.cl-th--icon {
text-align: right;
width: 40px;
padding-right: 16px;
}
.cl-td {
padding: 12px 16px;
color: #334155;
border-bottom: 1px solid #f1f5f9;
font-size: 13px;
}
.cl-table tbody tr:last-child .cl-td {
border-bottom: none;
}
/* Row animation */
.cl-row-animate {
opacity: 0;
transform: translateX(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.cl-row-animate.visible {
opacity: 1;
transform: translateX(0);
}
/* Responsive */
@media screen and (max-width: 992px) {
.cli-stack { margin: 28px auto 0; max-width: 520px; }
}
@media screen and (max-width: 576px) {
.cl-card { max-height: 440px; }
.cl-th, .cl-td { padding: 9px 12px; font-size: 12px; }
.cl-body { padding: 14px 14px 20px; }
}
@media screen and (max-width: 576px) {
.cli-card { padding: 14px 16px; }
.cli-ring-stat__gauge { width: 60px; height: 60px; }
.cli-ring-stat__num { font-size: 14px; }
}
/* ========================================
Topology Section Widget (2×2 Grid)
======================================== */
/* ==============================================
Topology Widget (tp-)
============================================== */
.topo-stack {
max-width: 600px;
margin-left: auto;
}
.tp-card {
border-radius: 14px;
background: #fff;
border: 1px solid #e8e8ec;
box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
overflow: hidden;
opacity: 0;
transform: translateY(14px) scale(.98);
transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.tp-card.visible { opacity: 1; transform: translateY(0) scale(1); }
.tp-panels {
display: flex;
min-height: 320px;
}
/* Left panel */
.tp-left {
width: 44%;
border-right: 1px solid #e8e8ec;
display: flex;
flex-direction: column;
}
.tp-search {
position: relative;
padding: 10px 12px;
border-bottom: 1px solid #e8e8ec;
}
.tp-search__input {
width: 80%;
padding: 7px 10px 7px 30px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 12px;
color: #334155;
background: #f8fafc;
outline: none;
}
.tp-search__icon {
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.tp-table-wrap {
flex: 1;
overflow-y: auto;
}
.tp-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.tp-th {
padding: 7px 6px;
text-align: center;
font-weight: 600;
color: #64748b;
background: #f8fafc;
border-bottom: 1px solid #e8e8ec;
white-space: nowrap;
}
.tp-th--name {
text-align: left;
padding-left: 12px;
font-size: 11px;
}
.tp-th--dot {
width: 28px;
padding: 7px 4px;
}
.tp-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.tp-dot--green { background: #22c55e; }
.tp-dot--orange { background: #f97316; }
.tp-dot--yellow { background: #eab308; }
.tp-dot--red { background: #ef4444; }
.tp-dot--grey { background: #94a3b8; }
.tp-td {
padding: 8px 6px;
border-bottom: 1px solid #f1f5f9;
color: #334155;
}
.tp-td--name {
padding-left: 12px;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.tp-td--num {
text-align: center;
font-weight: 500;
color: #64748b;
font-variant-numeric: tabular-nums;
}
.tp-row-animate {
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s ease;
}
.tp-row-animate.visible { opacity: 1; transform: translateY(0); }
/* Right panel */
.tp-right {
flex: 1;
display: flex;
flex-direction: column;
}
.tp-right__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid #e8e8ec;
background: #f8fafc;
}
.tp-right__title {
font-size: 13px;
font-weight: 700;
color: #334155;
}
.tp-right__close {
cursor: pointer;
opacity: .5;
transition: opacity .2s;
}
.tp-right__close:hover { opacity: 1; }
.tp-diagram {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.tp-svg {
width: 100%;
height: auto;
max-height: 240px;
}
.tp-line {
stroke-dasharray: 300;
stroke-dashoffset: 300;
transition: stroke-dashoffset .8s ease;
}
.tp-line.visible { stroke-dashoffset: 0; }
.tp-node, .tp-node-label {
opacity: 0;
transition: opacity .5s ease;
}
.tp-node.visible, .tp-node-label.visible { opacity: 1; }
/* Responsive */
@media screen and (max-width: 992px) {
.topo-stack { margin: 28px auto 0; max-width: 560px; }
}
@media screen and (max-width: 576px) {
.tp-panels { flex-direction: column; }
.tp-left { width: 100%; border-right: none; border-bottom: 1px solid #e8e8ec; }
.tp-right { min-height: 200px; }
.tp-td--name { max-width: 80px; }
}
/* ==============================================
Device Inventory Widget (dinv-)
============================================== */
.dinv-widget {
display: flex;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 2px 24px rgba(0,0,0,0.07);
overflow: hidden;
max-width: 620px;
margin-left: auto;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.dinv-widget.visible {
opacity: 1;
transform: translateY(0);
}
/* --- Sidebar --- */
.dinv-sidebar {
width: 210px;
min-width: 210px;
border-right: 1px solid #eef1f5;
padding: 14px 0;
background: #fafbfc;
}
.dinv-sidebar__dropdown {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
margin: 0 10px 10px;
border: 1px solid #dde1e7;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: #333;
cursor: pointer;
background: #fff;
}
.dinv-sidebar__dropdown svg { flex-shrink: 0; }
/* Tree */
.dinv-tree {
list-style: none;
margin: 0;
padding: 0;
}
.dinv-tree__item { margin: 0; }
.dinv-tree__row {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
cursor: pointer;
transition: background 0.15s ease;
font-size: 12.5px;
line-height: 1.4;
}
.dinv-tree__row:hover { background: #eef5f1; }
.dinv-tree__item--active > .dinv-tree__row {
background: #eef5f1;
}
.dinv-tree__row--sub {
padding-left: 36px;
}
.dinv-tree__arrow {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.dinv-tree__arrow--open {
transform: rotate(90deg);
}
.dinv-tree__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.dinv-tree__label {
font-weight: 500;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dinv-tree__count {
font-size: 11px;
color: #94a3b8;
font-weight: 400;
white-space: nowrap;
margin-left: auto;
}
.dinv-tree__sub {
list-style: none;
margin: 0;
padding: 0;
display: none;
}
.dinv-tree__item--open > .dinv-tree__sub {
display: block;
}
/* --- Right Panel --- */
.dinv-panel {
flex: 1;
padding: 16px 20px;
min-width: 0;
}
.dinv-panel__filter {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.dinv-panel__filter-label {
font-size: 12px;
color: #94a3b8;
font-weight: 400;
}
.dinv-panel__filter-tag {
display: inline-block;
font-size: 12px;
font-weight: 500;
color: #334155;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 3px 12px;
}
/* Device grid */
.dinv-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px 12px;
}
.dinv-device {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.dinv-device.visible {
opacity: 1;
transform: translateY(0);
}
.dinv-device__circle {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
background: #e8f5ee;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.dinv-device__badge {
position: absolute;
top: 2px;
right: 2px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
}
.dinv-device__badge svg {
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}
.dinv-device__status {
font-size: 11px;
font-weight: 400;
color: #64748b;
line-height: 1.3;
margin-bottom: 2px;
}
.dinv-device__name {
font-size: 12px;
font-weight: 600;
color: #1e293b;
line-height: 1.3;
}
/* Responsive */
@media screen and (max-width: 992px) {
.dinv-widget {
margin: 28px auto 0;
max-width: 560px;
}
}
@media screen and (max-width: 768px) {
.dinv-widget {
flex-direction: column;
}
.dinv-sidebar {
width: 100%;
min-width: 100%;
border-right: none;
border-bottom: 1px solid #eef1f5;
padding: 12px 0;
}
.dinv-tree__row { padding: 4px 14px; }
.dinv-panel { padding: 14px 16px; }
}
@media screen and (max-width: 480px) {
.dinv-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
.dinv-device__circle { width: 64px; height: 64px; }
.dinv-device__circle svg { width: 30px; height: 30px; }
}
/* --- SVG Sprite Icons --- */
i.sico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; vertical-align: middle; }
svg.sico { display: block; flex-shrink: 0; }
/* ========================================
Resolve Section — Light Theme
======================================== */
/* --- Section background & ambient glow --- */
.resolve-section {
background: #ffffff;
position: relative;
overflow: clip;
overflow: -webkit-clip;
padding: 0px 0 60px;
}
.resolve-section::before {
content: '';
position: absolute;
top: 10%; right: -15%;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(201,148,10,0.05) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.resolve-section::after {
content: '';
position: absolute;
bottom: 5%; left: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(201,148,10,0.04) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.resolve-section > .container {
position: relative;
z-index: 1;
}
/* --- Section heading --- */
.resolve-section .sec-header h2 {
color: #1e293b;
}
.resolve-section .sec-header p {
color: #64748b;
}
/* --- Anchor navigation (light pill style) --- */
.resolve-section .anchors-wrapper {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(0,0,0,0.06);
border-top: 1px solid rgba(0,0,0,0.03);
top: 0;
z-index: 10;
height: auto;
padding: 14px 0;
margin-bottom: 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.resolve-section .anchors-wrapper.is-stuck {
background: rgba(255,255,255,0.97);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.resolve-section .anchors-box li a {
background: #f1f5f9;
border: 1px solid #e2e8f0;
color: #475569;
padding: 8px 20px;
font-size: 15px;
font-weight: 500;
transition: all 0.25s ease;
position: relative;
}
.resolve-section .anchors-box li a.active {
background: #1e293b;
border-color: #1e293b;
color: #ffffff;
box-shadow: 0 2px 8px rgba(30,41,59,0.25);
}
.resolve-section .anchors-box li a:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #1e293b;
}
.resolve-section .anchors-box li a.active:hover {
background: #334155;
border-color: #334155;
color: #ffffff;
}
.resolve-section .anchors-box li a:focus {
background: #e2e8f0;
border: 1px solid #94a3b8;
color: #1e293b;
outline: none;
}
/* --- Resolve content text colours --- */
.resolve-section .resolve-section-content h3 {
color: #1e293b;
}
.resolve-section .resolve-section-content p {
color: #475569;
}
.resolve-section .resolve-section-content mark {
background: transparent;
color: #334155;
font-weight: 500;
}
.resolve-section .resolve-section-content a {
color: #006deb;
}
/* --- Resolve row divider --- */
.resolve-section .resolve-section-row {
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.resolve-section .resolve-section-row:last-child {
border-bottom: none;
}
/* ========================================
Widget containers — Dark glow bg
======================================== */
/* Org widgets */
.resolve-section .org-widgets {
position: relative;
}
.resolve-section .org-widgets::before {
content: '';
position: absolute;
top: -30px; left: -30px; right: -30px; bottom: -30px;
background: radial-gradient(ellipse at center, rgba(201,148,10,0.06) 0%, transparent 70%);
border-radius: 24px;
pointer-events: none;
z-index: 0;
}
.resolve-section .org-widgets > .mcd-card {
position: relative; z-index: 1;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
/* Net widgets */
.resolve-section .net-widgets {
position: relative;
}
.resolve-section .net-widgets::before {
content: '';
position: absolute;
top: -30px; left: -30px; right: -30px; bottom: -30px;
background: radial-gradient(ellipse at center, rgba(201,148,10,0.06) 0%, transparent 70%);
border-radius: 24px;
pointer-events: none;
z-index: 0;
}
.resolve-section .net-widgets > .nw-card {
position: relative; z-index: 1;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
/* Dev widgets */
.resolve-section .dev-widgets {
position: relative;
}
.resolve-section .dev-widgets::before {
content: '';
position: absolute;
top: -30px; left: -30px; right: -30px; bottom: -30px;
background: radial-gradient(ellipse at center, rgba(201,148,10,0.06) 0%, transparent 70%);
border-radius: 24px;
pointer-events: none;
z-index: 0;
}
.resolve-section .dev-widgets > .dv-card {
position: relative; z-index: 1;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
/* Clients stack */
.resolve-section .cli-stack {
position: relative;
}
.resolve-section .cli-stack::before {
content: '';
position: absolute;
top: -30px; left: -30px; right: -30px; bottom: -30px;
background: radial-gradient(ellipse at center, rgba(201,148,10,0.06) 0%, transparent 70%);
border-radius: 24px;
pointer-events: none;
z-index: 0;
}
.resolve-section .cli-stack > .cl-card {
position: relative; z-index: 1;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
/* Topology stack */
.resolve-section .topo-stack {
position: relative;
}
.resolve-section .topo-stack::before {
content: '';
position: absolute;
top: -30px; left: -30px; right: -30px; bottom: -30px;
background: radial-gradient(ellipse at center, rgba(201,148,10,0.06) 0%, transparent 70%);
border-radius: 24px;
pointer-events: none;
z-index: 0;
}
.resolve-section .topo-stack > .tp-card {
position: relative; z-index: 1;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
/* Floating decorative particles on resolve section */
.resolve-section .resolve-section-wrapper {
position: relative;
}
.resolve-section .resolve-section-wrapper::before {
content: '';
position: absolute;
top: 120px; right: 5%;
width: 6px; height: 6px;
background: rgba(201,148,10,0.15);
border-radius: 50%;
box-shadow:
-80px 200px 0 rgba(201,148,10,0.08),
-200px 450px 0 2px rgba(201,148,10,0.06),
120px 600px 0 1px rgba(201,148,10,0.1),
-60px 850px 0 rgba(201,148,10,0.07),
200px 1000px 0 2px rgba(201,148,10,0.05),
-150px 1200px 0 rgba(201,148,10,0.08);
pointer-events: none;
z-index: 0;
}
.resolve-section .resolve-section-wrapper::after {
content: '';
position: absolute;
top: 300px; left: 3%;
width: 4px; height: 4px;
background: rgba(201,148,10,0.12);
border-radius: 50%;
box-shadow:
60px 180px 0 1px rgba(201,148,10,0.07),
180px 400px 0 rgba(201,148,10,0.09),
-40px 700px 0 2px rgba(201,148,10,0.06),
100px 900px 0 rgba(201,148,10,0.08),
-120px 1100px 0 1px rgba(201,148,10,0.05);
pointer-events: none;
z-index: 0;
}
/* Subtle grid pattern overlay */
.resolve-section > .container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* Responsive: light anchor bar on mobile */
@media screen and (max-width: 980.98px) {
.resolve-section .anchors-wrapper {
background: rgba(255,255,255,0.96);
padding: 12px 0;
top: 0;
}
.resolve-section .anchors-box li a {
font-size: 14px;
padding: 8px 16px;
}
}
@media screen and (max-width: 500.98px) {
.resolve-section .anchors-wrapper {
position: sticky !important;
top: 0;
}
.resolve-section .anchors-box li a {
font-size: 13px;
padding: 6px 14px;
}
.resolve-section .anchors-box li a:focus {
background: #e2e8f0;
border: 1px solid #94a3b8;
color: #1e293b;
}
}
/* =============================================
MODERN FEATURE SHOWCASE — Clean Editorial
============================================= */
/* --- Section Container --- */
.resolve-section.fm-modern {
background: #ffffff;
padding: 0px 0 60px;
overflow: clip;
position: relative;
}
/* Background decorations — soft radial glows */
.resolve-section.fm-modern::before {
content: '';
position: absolute;
top: 5%;
right: -8%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(201,148,10,0.045) 0%, rgba(201,148,10,0.015) 40%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
animation: fm-glow-drift 20s ease-in-out infinite;
}
.resolve-section.fm-modern::after {
content: '';
position: absolute;
bottom: 8%;
left: -6%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(13,148,136,0.04) 0%, rgba(13,148,136,0.01) 40%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
animation: fm-glow-drift 25s ease-in-out infinite reverse;
}
@keyframes fm-glow-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, -15px); }
}
/* Subtle dot grid overlay */
.resolve-section.fm-modern > .container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(circle, rgba(148,163,184,0.08) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
}
.resolve-section.fm-modern > .container {
position: relative;
z-index: 1;
}
/* --- Section Header --- */
.resolve-section.fm-modern .sec-header {
margin-bottom: 16px;
}
.resolve-section.fm-modern .sec-header h2 {
font-size: 36px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.5px;
line-height: 1.25;
}
/* --- Anchor Nav: Underline Tab Style --- */
.resolve-section.fm-modern .anchors-wrapper {
background: #ffffff;
border: none;
border-bottom: 1px solid #e2e8f0;
border-radius: 0;
padding: 0;
margin: 0 0 0;
max-width: 100%;
box-shadow: none;
position: sticky;
top: 48px;
z-index: 100;
height: auto;
transition: box-shadow 0.3s ease, background 0.3s ease;
border-top: none;
}
.resolve-section.fm-modern .anchors-wrapper.is-stuck {
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
background: rgba(255,255,255,0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.resolve-section.fm-modern .anchors-box {
display: flex !important;
width: 100%;
justify-content: center;
}
.resolve-section.fm-modern .anchors-box nav {
display: flex;
width: 100%;
justify-content: center;
}
.resolve-section.fm-modern .anchors-box nav ul,
.resolve-section.fm-modern .anchors-box ul {
display: flex !important;
gap: 0;
justify-content: center;
width: auto;
}
.resolve-section.fm-modern .anchors-box li {
flex: 0 0 auto;
}
.resolve-section.fm-modern .anchors-box li a {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
color: #64748b;
padding: 16px 24px;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0;
transition: all 0.25s ease;
position: relative;
white-space: nowrap;
margin-bottom: -1px;
}
.resolve-section.fm-modern .anchors-box li a:hover {
color: #0f172a;
background: transparent;
border-color: transparent;
border-bottom-color: #cbd5e1;
}
.resolve-section.fm-modern .anchors-box li a.active {
color: #c9940a;
background: transparent;
border-color: transparent;
border-bottom-color: #c9940a;
box-shadow: none;
}
.resolve-section.fm-modern .anchors-box li a.active:hover {
color: #a87808;
background: transparent;
border-color: transparent;
border-bottom-color: #a87808;
}
.resolve-section.fm-modern .anchors-box li a:focus {
color: #0f172a;
border-color: transparent;
border-bottom-color: #94a3b8;
background: transparent;
outline: none;
}
/* --- Wrapper: remove old offset --- */
.resolve-section.fm-modern .resolve-section-wrapper {
position: relative;
padding-left: 0;
}
/* Remove old floating particles */
.resolve-section.fm-modern .resolve-section-wrapper::before,
.resolve-section.fm-modern .resolve-section-wrapper::after {
display: none;
}
/* --- Feature Row --- */
.resolve-section.fm-modern .resolve-section-row {
position: relative;
background: transparent;
border: none;
border-radius: 0;
padding: 56px 0 !important;
margin-bottom: 0;
box-shadow: none;
border-bottom: 1px solid #f1f5f9 !important;
z-index: 1;
overflow: visible;
}
.resolve-section.fm-modern .resolve-section-row:last-child {
border-bottom: none !important;
}
/* Remove old card hover effects on row */
.resolve-section.fm-modern .resolve-section-row::before {
display: none;
}
.resolve-section.fm-modern .resolve-section-row:hover {
border-color: transparent;
box-shadow: none;
transform: none;
}
/* --- Feature Tag --- */
.resolve-section.fm-modern .fm-feature-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fef9e7;
border: 1px solid #fdf0c4;
color: #8a6200;
padding: 4px 14px 4px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 16px;
}
.resolve-section.fm-modern .fm-feature-tag svg {
width: 14px;
height: 14px;
stroke: #a87808;
fill: none;
stroke-width: 2;
}
/* --- Content Side --- */
.resolve-section.fm-modern .resolve-section-content {
position: relative;
}
/* Left accent bar on content */
.resolve-section.fm-modern .resolve-section-content::before {
content: '';
position: absolute;
left: -20px;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, #c9940a 0%, #e8b830 50%, transparent 100%);
border-radius: 4px;
opacity: 0;
transition: opacity 0.4s ease;
}
.resolve-section.fm-modern .resolve-section-row:hover .resolve-section-content::before {
opacity: 1;
}
/* Typography */
.resolve-section.fm-modern .resolve-section-content h3 {
font-size: 24px;
font-weight: 700;
color: #0f172a;
line-height: 1.35;
letter-spacing: -0.2px;
margin-bottom: 14px;
}
.resolve-section.fm-modern .resolve-section-content p {
font-size: 15px;
line-height: 1.75;
color: #475569;
}
.resolve-section.fm-modern .resolve-section-content mark {
background: transparent;
color: #1e293b;
font-weight: 600;
}
/* Value points */
.resolve-section.fm-modern .value-points-wrapper {
margin-top: 18px;
}
.resolve-section.fm-modern .value-points-wrapper li {
position: relative;
margin-bottom: 8px;
font-size: 14px;
line-height: 1.65;
color: #334155;
}
/* --- Widget Containers --- */
.resolve-section.fm-modern .org-widgets,
.resolve-section.fm-modern .net-widgets,
.resolve-section.fm-modern .dev-widgets,
.resolve-section.fm-modern .cli-stack,
.resolve-section.fm-modern .topo-stack {
position: relative;
padding: 16px;
border-radius: 20px;
background: linear-gradient(145deg, rgba(240,249,255,0.6) 0%, rgba(248,250,252,0.4) 50%, rgba(240,253,244,0.5) 100%);
transition: background 0.4s ease;
}
.resolve-section.fm-modern .resolve-section-row:hover .org-widgets,
.resolve-section.fm-modern .resolve-section-row:hover .net-widgets,
.resolve-section.fm-modern .resolve-section-row:hover .dev-widgets,
.resolve-section.fm-modern .resolve-section-row:hover .cli-stack,
.resolve-section.fm-modern .resolve-section-row:hover .topo-stack {
background: linear-gradient(145deg, rgba(240,249,255,0.8) 0%, rgba(248,250,252,0.6) 50%, rgba(240,253,244,0.7) 100%);
}
/* Background glow behind widgets */
.resolve-section.fm-modern .org-widgets::before,
.resolve-section.fm-modern .net-widgets::before,
.resolve-section.fm-modern .dev-widgets::before,
.resolve-section.fm-modern .cli-stack::before,
.resolve-section.fm-modern .topo-stack::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse, rgba(201,148,10,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
transition: opacity 0.4s ease;
opacity: 0;
}
.resolve-section.fm-modern .resolve-section-row:hover .org-widgets::before,
.resolve-section.fm-modern .resolve-section-row:hover .net-widgets::before,
.resolve-section.fm-modern .resolve-section-row:hover .dev-widgets::before,
.resolve-section.fm-modern .resolve-section-row:hover .cli-stack::before,
.resolve-section.fm-modern .resolve-section-row:hover .topo-stack::before {
opacity: 1;
}
/* Decorative dots behind widgets */
.resolve-section.fm-modern .org-widgets::after,
.resolve-section.fm-modern .net-widgets::after,
.resolve-section.fm-modern .dev-widgets::after,
.resolve-section.fm-modern .cli-stack::after,
.resolve-section.fm-modern .topo-stack::after {
content: '';
position: absolute;
top: -8px;
right: -8px;
width: 64px;
height: 64px;
background-image: radial-gradient(circle, rgba(201,148,10,0.12) 1.5px, transparent 1.5px);
background-size: 10px 10px;
border-radius: 8px;
pointer-events: none;
z-index: 0;
opacity: 0.5;
transition: opacity 0.4s ease;
}
.resolve-section.fm-modern .resolve-section-row:hover .org-widgets::after,
.resolve-section.fm-modern .resolve-section-row:hover .net-widgets::after,
.resolve-section.fm-modern .resolve-section-row:hover .dev-widgets::after,
.resolve-section.fm-modern .resolve-section-row:hover .cli-stack::after,
.resolve-section.fm-modern .resolve-section-row:hover .topo-stack::after {
opacity: 1;
}
.resolve-section.fm-modern .org-widgets > .mcd-card,
.resolve-section.fm-modern .net-widgets > .nw-card,
.resolve-section.fm-modern .dev-widgets > .dv-card,
.resolve-section.fm-modern .cli-stack > .cl-card,
.resolve-section.fm-modern .topo-stack > .tp-card {
position: relative;
z-index: 1;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.04);
overflow: hidden;
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.resolve-section.fm-modern .resolve-section-row:hover .org-widgets > .mcd-card,
.resolve-section.fm-modern .resolve-section-row:hover .net-widgets > .nw-card,
.resolve-section.fm-modern .resolve-section-row:hover .dev-widgets > .dv-card,
.resolve-section.fm-modern .resolve-section-row:hover .cli-stack > .cl-card,
.resolve-section.fm-modern .resolve-section-row:hover .topo-stack > .tp-card {
box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.07);
transform: translateY(-3px);
}
/* --- Scroll Entrance Animations --- */
.resolve-section.fm-modern .resolve-section-row {
opacity: 0;
transform: translateY(32px);
}
.resolve-section.fm-modern .resolve-section-row.fm-visible {
animation: fm-row-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fm-row-enter {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
/* Content side: stagger fade */
.resolve-section.fm-modern .resolve-section-row.fm-visible .resolve-section-content {
animation: fm-fade-up 0.55s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fm-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Widget side: slight scale-in */
.resolve-section.fm-modern .resolve-section-row.fm-visible .org-widgets,
.resolve-section.fm-modern .resolve-section-row.fm-visible .net-widgets,
.resolve-section.fm-modern .resolve-section-row.fm-visible .dev-widgets,
.resolve-section.fm-modern .resolve-section-row.fm-visible .cli-stack,
.resolve-section.fm-modern .resolve-section-row.fm-visible .topo-stack {
animation: fm-scale-in 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fm-scale-in {
from { opacity: 0; transform: scale(0.96) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* --- Modern Feature Responsive --- */
@media screen and (max-width: 1199.98px) {
.resolve-section.fm-modern .resolve-section-row {
padding: 44px 0 !important;
}
}
@media screen and (max-width: 991.98px) {
.resolve-section.fm-modern .sec-header h2 {
font-size: 28px;
}
.resolve-section.fm-modern .resolve-section-row {
padding: 36px 0 !important;
}
.resolve-section.fm-modern .resolve-section-content h3 {
font-size: 21px;
}
.resolve-section.fm-modern .resolve-section-row:nth-child(even) {
flex-direction: column-reverse;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
}
.resolve-section.fm-modern .resolve-section-content::before {
display: none;
}
.resolve-section.fm-modern .anchors-wrapper {
margin-bottom: 0;
}
.resolve-section.fm-modern .anchors-box nav ul {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.resolve-section.fm-modern .anchors-box li a {
font-size: 13.5px;
padding: 14px 18px;
}
.resolve-section.fm-modern .anchors-box li a:focus {
color: #0f172a;
border-color: transparent;
border-bottom-color: #94a3b8;
background: transparent;
outline: none;
}
}
@media screen and (max-width: 575.98px) {
.resolve-section.fm-modern {
padding: 48px 0 40px;
}
.resolve-section.fm-modern .sec-header h2 {
font-size: 24px;
}
.resolve-section.fm-modern .resolve-section-row {
padding: 28px 0 !important;
}
.resolve-section.fm-modern .fm-feature-tag {
font-size: 11px;
padding: 3px 10px 3px 8px;
}
.resolve-section.fm-modern .resolve-section-content h3 {
font-size: 19px;
}
.resolve-section.fm-modern .anchors-box li a {
font-size: 13px;
padding: 12px 14px;
}
}
/* ========================================
Radial Infographic — Banner Widget
======================================== */
.infographic-container {
width: 100%;
max-width: 720px;
margin-left: auto;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.infographic-container svg {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 60px rgba(201,148,10,0.15));
}
/* Ring animations */
.ring-spin {
animation: ig-spin 60s linear infinite;
transform-origin: 400px 400px;
}
.ring-spin-reverse {
animation: ig-spin-reverse 90s linear infinite;
transform-origin: 400px 400px;
}
.ig-pulse-ring {
animation: ig-pulse 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
transform-origin: 400px 400px;
}
@keyframes ig-spin {
100% { transform: rotate(360deg); }
}
@keyframes ig-spin-reverse {
100% { transform: rotate(-360deg); }
}
@keyframes ig-pulse {
0% { transform: scale(0.8); opacity: 0.15; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Node styles — gold theme */
.ig-node-wrapper { cursor: default; }
.ig-node-bg {
fill: rgba(30,41,59,0.92);
stroke: rgba(201,148,10,0.35);
stroke-width: 1.5px;
transition: fill 0.35s ease, stroke 0.35s ease, filter 0.35s ease;
}
.ig-node-icon {
stroke: #cbd5e1;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.35s ease;
}
.ig-node-label-bg {
fill: rgba(201,148,10,0.18);
transition: fill 0.35s ease;
}
.ig-node-label-text {
fill: #5a4f2a;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
text-anchor: middle;
font-family: 'Inter', system-ui, sans-serif;
user-select: none;
transition: fill 0.35s ease;
}
/* Node hover interactivity */
.ig-node-wrapper {
cursor: pointer;
filter: drop-shadow(0 0 0 transparent);
transition: filter 0.35s ease;
}
.ig-node-wrapper:hover {
filter: drop-shadow(0 0 18px rgba(201,148,10,0.5));
}
.ig-node-bg {
transition: fill 0.35s ease, stroke 0.35s ease, r 0.35s ease;
}
.ig-node-wrapper:hover .ig-node-bg {
fill: rgba(30,41,59,0.98);
stroke: rgba(201,148,10,0.7);
stroke-width: 2px;
}
.ig-node-wrapper:hover .ig-node-icon {
stroke: #e8b830;
}
.ig-node-wrapper:hover .ig-node-label-bg {
fill: rgba(201,148,10,0.3);
}
.ig-node-wrapper:hover .ig-node-label-text {
fill: #ffffff;
}
/* Banner entrance animations */
.bn-animate {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bn-animate.visible {
opacity: 1;
transform: translateY(0);
}
/* H1 gradient shimmer */
.banner-section h1 {
background: linear-gradient(
90deg,
#1e293b 0%,
#1e293b 40%,
#c9940a 50%,
#1e293b 60%,
#1e293b 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: bn-shimmer 4s ease-in-out infinite;
animation-delay: 1.5s;
}
@keyframes bn-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Value points — hover highlight */
.banner-section .value-points-wrapper li {
transition: color 0.3s ease, transform 0.3s ease, padding-left 0.3s ease;
cursor: default;
position: relative;
}
.banner-section .value-points-wrapper li:hover {
color: #3d3210 !important;
transform: translateX(6px);
}
/* CTA button — shimmer sweep + glow */
.bn-cta {
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.bn-cta::after {
content: '';
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.18),
transparent
);
transform: skewX(-20deg);
animation: bn-cta-sweep 3.5s ease-in-out infinite;
animation-delay: 2.5s;
pointer-events: none;
}
@keyframes bn-cta-sweep {
0% { left: -75%; }
100% { left: 125%; }
}
.bn-cta:hover {
transform: translateY(-2px) scale(1.03) !important;
box-shadow: 0 8px 32px rgba(232,14,25,0.35) !important;
}
/* Infographic container entrance */
.infographic-container.bn-animate.visible {
animation: bn-ig-entrance 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes bn-ig-entrance {
from {
opacity: 0;
transform: scale(0.85) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@media screen and (max-width: 992px) {
.infographic-container {
max-width: 560px;
margin: 40px auto 0;
}
}
/* ========================================
Scroll Entrance Animations — Global
======================================== */
/* --- Award Section --- */
.award-section .award-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.award-section.sa-visible .award-card {
opacity: 1;
transform: translateY(0);
}
/* --- FAQ Section — staggered accordion items --- */
.faq-content-section .accordion-item {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.faq-content-section.sa-visible .accordion-item {
opacity: 1;
transform: translateY(0);
}
/* --- Related Resources Section --- */
.related-resource-section h2 {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.related-resource-section .resource-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: 0.15s;
}
.related-resource-section.sa-visible h2 {
opacity: 1;
transform: translateY(0);
}
.related-resource-section.sa-visible .resource-card {
opacity: 1;
transform: translateY(0);
}
/* --- Bottom CTA Section --- */
.bottom-cta-section .sec-header {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.bottom-cta-section.sa-visible .sec-header {
opacity: 1;
transform: translateY(0);
}
/* --- Testimonial Section --- */
.testimonial-section h2 {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.testimonial-section .testimonial-wrapper {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: 0.15s;
}
.testimonial-section.sa-visible h2 {
opacity: 1;
transform: translateY(0);
}
.testimonial-section.sa-visible .testimonial-wrapper {
opacity: 1;
transform: translateY(0);
}
/* ========================================
Widget Zoom Modal
======================================== */
/* Zoom trigger button on each widget */
.widget-zoom-trigger {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.85);
border: 1px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
backdrop-filter: blur(4px);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.widget-zoom-trigger svg {
width: 16px;
height: 16px;
stroke: #64748b;
fill: none;
stroke-width: 2;
transition: stroke 0.2s ease;
}
.widget-zoom-trigger:hover {
background: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.widget-zoom-trigger:hover svg {
stroke: #c9940a;
}
/* Make widget containers position:relative so zoom button positions correctly */
.org-widgets,
.net-widgets,
.dev-widgets,
.cli-stack,
.topo-stack {
position: relative;
}
/* Show zoom button on widget hover */
.org-widgets:hover .widget-zoom-trigger,
.net-widgets:hover .widget-zoom-trigger,
.dev-widgets:hover .widget-zoom-trigger,
.cli-stack:hover .widget-zoom-trigger,
.topo-stack:hover .widget-zoom-trigger {
opacity: 1;
}
/* Full-screen zoom modal overlay */
.widget-zoom-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.widget-zoom-overlay.active {
opacity: 1;
visibility: visible;
}
/* Zoomed widget container */
.widget-zoom-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
overflow: visible;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 24px 80px rgba(0,0,0,0.25);
transform: scale(0.85);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
padding: 0;
}
.widget-zoom-overlay.active .widget-zoom-content {
transform: scale(1);
}
/* Make cloned card fully visible inside modal */
.widget-zoom-content .mcd-card,
.widget-zoom-content .nw-card,
.widget-zoom-content .dv-card,
.widget-zoom-content .cl-card,
.widget-zoom-content .tp-card {
opacity: 1 !important;
transform: none !important;
max-height: 88vh;
overflow: auto;
min-width: 600px;
border-radius: 16px;
}
/* Ensure rows inside zoomed widget are visible */
.widget-zoom-content .mcd-row-animate,
.widget-zoom-content .nw-row-animate,
.widget-zoom-content .dv-row-animate,
.widget-zoom-content .cl-row-animate,
.widget-zoom-content .tp-row-animate,
.widget-zoom-content .tp-line-animate,
.widget-zoom-content .tp-node-animate {
opacity: 1 !important;
transform: none !important;
}
/* Close button */
.widget-zoom-close {
position: absolute;
top: -14px;
right: -14px;
z-index: 10;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
transition: background 0.2s ease, transform 0.15s ease;
}
.widget-zoom-close:hover {
background: #fee2e2;
transform: scale(1.1);
}
.widget-zoom-close svg {
width: 16px;
height: 16px;
stroke: #64748b;
fill: none;
stroke-width: 2.5;
}
.widget-zoom-close:hover svg {
stroke: #ef4444;
}
/* Responsive zoom */
@media screen and (max-width: 768px) {
.widget-zoom-content {
max-width: 96vw;
max-height: 92vh;
border-radius: 12px;
}
.widget-zoom-content .mcd-card,
.widget-zoom-content .nw-card,
.widget-zoom-content .dv-card,
.widget-zoom-content .cl-card,
.widget-zoom-content .tp-card {
min-width: unset;
}
.widget-zoom-close {
top: -10px;
right: -10px;
}
.widget-zoom-trigger {
opacity: 1;
}
}