﻿/**********************************************************/
/*-- [14.0] Products Page --*/
/**********************************************************/

/*-- [14.1] Hardware Catagory Section --*/
/*===========================+++++++====*/
.hardware-catagory-section {
    margin-top: 30px;    
    font-size: 1.2rem;
    cursor: pointer;    
}

.hardware-catagory-section .col-4:hover {
    transform: scale(1.05); /* zoom in 10% */
}

.hardware-catagory-section img {
    max-width: 100%;
    height: auto;
}

.hardware-catagory-section div {
    font-size: clamp(4px, 1.8vw, 20px);
}

    .hardware-catagory-section .overlay-text {
        position: absolute;
        bottom: 10px;
        left: 50%; /* move middle */
        transform: translateX(-50%); /* pull back half of width */
        white-space: nowrap; /* prevent line breaks */
        color: black;
        font-size: 12px;
        text-align: center;
    }

.banner-section {
    background-color: transparent;
    position: relative;
    display: inline-block;
    width: 100%;    
    margin-bottom: 0;
    padding-bottom: 0;
}

.banner-section img {
    display: block;
    width: 100%; /* responsive */
    height: auto;
}

.banner-text-overlay {
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    text-align: left;
    color: black;
    width: 90%;
}

.banner-text-overlay h1 {
    font-size: clamp(6px, 3.4vw, 48px);
    line-height: 1.1;
}

.banner-text-overlay p {
    font-size: clamp(2px, 1.8vw, 22px);
    line-height: 1.4;
}

#product-patner-logo {
    background: #446AB3;
    margin-top: 0;
    padding-top: 0;
}

#why-ampm-section {
    background-color: black;
    color: white;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 80px;
    padding-right: 120px;
    padding-bottom: 80px;
    padding-left: 120px;
}

#product-patner-logo img {
    max-width: 100%;
}

#home-brand-logo2 img {
    max-width: 100%;
}

.flexrow {
    display: flex;
    flex-flow: row wrap;
    align-items: center !important;
    margin: auto;
}

#versatile-hardware-section {
    margin-top: 0;
    margin-bottom: 80px;
    padding-top: 80px;
}

#versatile-hardware-section .nav-tabs .nav-link {
    padding: 0rem;
    margin: 0.5px;
    border: none;
}

/* Owl wrappers background: transparent */
#imageTabs .owl-item {
    background: transparent !important;
    box-shadow: none !important;
}

#imageTabs .nav-tabs .nav-link img.tab-img {
    display: block;
    max-height: 300px; /* adjust as needed */
    margin: 0rem;
    padding: 0rem;
}

/* nav buttons */
#imageTabs .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* vertically center */
    z-index: 10;
    background: transparent;
    border: none;
    font-size: 5rem;
    width: 40px; /* optional */
    height: 40px; /* optional */
    line-height: 40px; /* center the text */
    text-align: center;
    color: #f2f2f2;
    pointer-events: all; /* re-enable clicks */
    cursor: pointer;
}

/* Left button */
#imageTabs .owl-nav .owl-prev {
    left: -60px; /* adjust as needed */
}

/* Right button */
#imageTabs .owl-nav .owl-next {
    right: -50px; /* adjust as needed */
}

.tab-content .tab-pane {
    background: transparent;
}

/* hardware catagory text over image */
.hardware-catagory-img-container {
    position: relative; /* needed for absolute positioning of text */
    display: inline-block; /* shrink-wrap to image size */
}

.hardware-catagory-overlay-text {
    position: absolute;
    top: 85%; /* vertical center */
    left: 50%; /* horizontal center */
    transform: translate(-50%, -50%); /* center exactly */
    font-size: clamp(0.4rem, 2vw, 0.8rem); /* adjust */
    text-align: center;
    color: black;
}

/* Each tab has its own active image */
#tab1-tab.active img.tab1-img {
    content: url('/img/hardware/versatile-hardware/tab-images/All-In-One - Selected.png');
}

#tab2-tab.active img.tab2-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Customer-Facing Displays - selected.png');
}

#tab3-tab.active img.tab3-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Printing Solutions - selected.png');
}

#tab4-tab.active img.tab4-img {
    content: url('/img/hardware/versatile-hardware/tab-images/ESLs - Selected.png');
}

#tab5-tab.active img.tab5-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Barcode Scanners - selected.png');
}

#tab6-tab.active img.tab6-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Inventory Computers - selected.png');
}

#tab7-tab.active img.tab7-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Scanner Scales - selected.png');
}

#tab8-tab.active img.tab8-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Deli Scales - selected.png');
}

#tab9-tab.active img.tab9-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Cash Drawers - selected.png');
}

#tab10-tab.active img.tab10-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Self-Checkout Technology - selected.png');
}

#tab11-tab.active img.tab11-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Self-Serve Kiosks - selected.png');
}

#tab12-tab.active img.tab12-img {
    content: url('/img/hardware/versatile-hardware/tab-images/AI Surveillance - selected.png');
}

#tab13-tab.active img.tab13-img {
    content: url('/img/hardware/versatile-hardware/tab-images/Kitchen Display Systems - selected.png');
}

#tab14-tab.active img.tab14-img {
    content: url('/img/hardware/versatile-hardware/tab-images/POS Accessories - selected.png');
}

#hardware-support-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0px;
    padding-left: 120px;
    padding-bottom: 0;
    background-color: #D3D3D3;
}

#cta-section {
    padding: 100px 0 80px 0;
    background-color: #11b0de;
    text-align: center;
}

#cta-section h1 {
    font-size: clamp(1.2rem, 5vw, 3.2rem) !important;
}
