.avs-showcase { --gap: 28px;
--radius: 18px;
--shadow: 0 10px 30px rgba(0, 0, 0, .08);
--c-title: #0b3b66;
--c-text: #394655;
--c-muted: #7a8a99;
--phone-ratio: 0.479675;
--screen-top: 2.3229%;
--screen-right: 4.8426%;
--screen-bottom: 3.4843%;
--screen-left: 4.8426%;
--screen-radius: 24px;
--phone-frame: url(//www.avselectronics.com/wp-content/uploads/2026/03/phone-frame-1.webp);
}
.avs-showcase * {
box-sizing: border-box;
}
.avs-showcase {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--c-text);
width: 100%;
overflow-x: hidden;
}
#btn-account, .btn-account {
background: #16aa2b !important;
} .avs-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: var(--gap);
align-items: center;
}
.avs-col, .avs-phone {
min-width: 0;
}
.avs-col {
display: grid;
gap: var(--gap);
} .avs-phone {
position: relative;
height: 900px;
aspect-ratio: var(--phone-ratio);
margin-inline: auto;
} .avs-phone::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--phone-frame);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
z-index: 2;
pointer-events: none; } .avs-screen-wrap {
position: absolute;
z-index: 1;
top: var(--screen-top);
right: var(--screen-right);
bottom: var(--screen-bottom);
left: var(--screen-left);
overflow: hidden;
border-radius: var(--screen-radius);
}
.avs-screen {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .35s ease;
}
.avs-screen.is-fading {
opacity: 0;
} .avs-box {
background: transparent;
border-radius: var(--radius);
box-shadow: none;
padding: 18px 18px;
cursor: pointer;
transition: all .25s ease;
border: 1px solid rgba(15, 23, 42, 0.12);
}
.avs-box:hover,
.avs-box.is-active {
background: #fff;
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.avs-title {
color: var(--c-title);
font-weight: 800;
font-size: 20px;
line-height: 1.2;
margin: 0 0 8px 0;
letter-spacing: .2px;
}
.avs-desc {
margin: 0;
line-height: 1.55;
color: var(--c-muted);
font-size: 15px;
} @media (max-width: 1200px) {
.avs-phone {
height: 780px;
}
}
@media (max-width: 1024px) {
.avs-phone {
height: 680px;
}
}
@media (max-width: 900px) {
.avs-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.avs-col {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.avs-phone {
order: -1;
height: 500px;
margin-bottom: 24px; position: sticky;
top: 20px;
z-index: 10;
}
}
@media (max-width: 560px) {
.avs-col {
grid-template-columns: 1fr;
}
.avs-phone {
height: 420px;
}
}.um-register{
max-width: 1200px !important;
xxxborder:1px solid red;
}
.um-col-121, .um-col-122{
width: 48%;
}
.um input[type=submit].um-button, .um input[type=submit].um-button:hover {
background:var( --e-global-color-secondary );
border-radius:10px !important;
font-family:var( --e-global-typography-text-font-family ), Sans-serif;
font-size:var( --e-global-typography-text-font-size );
font-weight:var( --e-global-typography-primary-font-weight );
}
.um .um-button.um-alt, .um .um-button.um-alt:hover{
border-radius:10px !important;
font-family:var( --e-global-typography-text-font-family ), Sans-serif;
font-size:var( --e-global-typography-text-font-size );
font-weight:var( --e-global-typography-primary-font-weight );
box-shadow: none !important;
}
.um-field-label label{
font-family:var( --e-global-typography-text-font-family ), Sans-serif;
font-size:var( --e-global-typography-text-font-size );
font-weight:var( --e-global-typography-text-font-weight );
}
.um .um-form input[type=text], .um .um-form input[type=tel], .um .um-form input[type=password], .um-field .select2.select2-container .select2-selection{
border-radius:10px !important;
}
div[data-key="customer"] .um-field-checkbox.um-field-half{
widtn:20%!important;
}
@media (max-width: 600px) {
.um-col-121, .um-col-122 {
width: 100%;
}
}.um-register{
max-width: 1200px !important;
xxxborder:1px solid red;
}
.vpc-sort-active{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 20px;
background: white;
background-color:white !important;
cursor: pointer;
font-size: 14px;
color: #666 !important;
transition: all 0.3s ease;
font-family: inherit;
text-decoration: none;
}
.um-col-121, .um-col-122{
width: 48%;
}
.um input[type=submit].um-button, .um input[type=submit].um-button:hover {
background:var( --e-global-color-secondary );
border-radius:10px !important;
font-family:var( --e-global-typography-text-font-family ), Sans-serif;
font-size:var( --e-global-typography-text-font-size );
font-weight:var( --e-global-typography-primary-font-weight );
}
.um .um-button.um-alt, .um .um-button.um-alt:hover{
border-radius:10px !important;
font-family:var( --e-global-typography-text-font-family ), Sans-serif;
font-size:var( --e-global-typography-text-font-size );
font-weight:var( --e-global-typography-primary-font-weight );
box-shadow: none !important;
}
.um-field-label label{
font-family:var( --e-global-typography-text-font-family ), Sans-serif;
font-size:var( --e-global-typography-text-font-size );
font-weight:var( --e-global-typography-text-font-weight );
}
.um .um-form input[type=text], .um .um-form input[type=tel], .um .um-form input[type=password], .um-field .select2.select2-container .select2-selection{
border-radius:10px !important;
}
@media (max-width: 600px) {
.um-col-121, .um-col-122 {
width: 100%;
}
}
#um_field_9594_TAGDASITO{
display:none;
}
.e-loop-item-869{
display:none;
}
.um-field-half{
width:100% !importantxxx;
}
#features-carousel .item .text{
font-family:var(--e-global-typography-text-font-family), Sans-serif !important;
}
#related-families-list{
font-family: var(--e-global-typography-text-font-family), Sans-serif;
font-size: var(--e-global-typography-text-font-size);
font-weight: var(--e-global-typography-text-font-weight);
}
.family_font_family{
font-family: var(--e-global-typography-text-font-family), Sans-serif;
font-size: var(--e-global-typography-text-font-size);
font-weight: var(--e-global-typography-secondary-font-weight);
}
.vpc-product-name{
font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
font-size: var(--e-global-typography-text-font-size) !important;
font-weight: var(--e-global-typography-secondary-font-weight) !important;
}
.cld-group-button{
font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
font-size: 14px !important;
font-weight: var(--e-global-typography-text-font-weight)!important;
}
.vpc-product-description{
font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
font-size: 14px !important;
font-weight: var(--e-global-typography-text-font-weight)!important;
}
.vpc-description{
font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
font-size: 14px !important;
font-weight: var(--e-global-typography-text-font-weight)!important;
}
#magic-login-shortcode{
width:100% !important;
}
.menu-item-116 {
border-radius: 30px;
background: var( --e-global-color-secondary );
}
.menu-item-116 > a{
color: var( --e-global-color-e678e2f ) !important;
}
.avs-button a{
background-color: var(--e-global-color-secondary) !important;
font-family: "Montserrat", Sans-serif !important;
font-size: 16px;
font-weight: 700 !important;
line-height: 25px !important;
border-radius: 10px 10px 10px 10px !important;
color:white!important;
}
.avs-button.avs-button-sm a{
padding: 5px 15px!important;
font-weight: normal!important
}
.avs-logout .button-link-wrap {
padding: 10px 5px!important;
color: white!important;
}
.avs-translucid-button {
background: rgba(0, 0, 0, 0.3) !important;
border: 2px solid;
border-color: grey;
border-radius: 4px !important;
padding: 8px 24px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
backdrop-filter: blur(10px);
}
.blurcard{ }
#features-carousel .custom-nav-container button{
font-size:20px !important;
}
#features-carousel {
margin:0 auto !important;
}
#features-carousel .item img{
height:auto !important;
} .product_card img{
width:auto;
height:auto;
max-height:140px;
}
.product_card .elementor-widget-post-info .elementor-icon-list-item{
line-height: 1.2em !important;
} [type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
background-color: transparent;
}
.vpc-product-catalog{
max-width: 100% !important;
}
.vpc-description{
width:100% !important;
max-width:450px;
}
.vpc-search-bar{
width:100% !important;
}
.elementor-4716 .elementor-nav-menu--dropdown{
min-width:30em !important;
}
.card-description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: 4.5em;
font-family: var(--e-global-typography-text-font-family), Sans-serif;
font-size: var(--e-global-typography-text-font-size);
font-weight: var(--e-global-typography-text-font-weight);
line-height: var(--e-global-typography-text-line-height);
color: var(--e-global-color-text);
}