:root {
    --primary-color: #4c7df9; 
    --secondary-color: #6c757d; 
    --light-bg: #f8f9fa;
    --dark-bg: #343a40;

    --main-bg: #ecf2ff;
    --light-blue: #4c7df9;
    --black: #202020;
    --mid-blue: #1f4cff;
    --dark-blue: #0a2fbf;
    --gray: #d6d6d8;
    --img-bg-blue: rgba(58, 120, 253, 0.65);
    --gradient-bg: linear-gradient(to bottom, var(--light-blue) 0%, var(--mid-blue) 100%);

    --system1: #f9f871;
    --system2: #ffc861;
    --system3: #ff9580;
    --system4: #ff72b2;
    --system5: #d970e2;
    --system6: #22c197;
    --system7: #796fe5;
    --system8: #b0b5ed;
    --system9: #eee8a9;
    --system10: #3a7371;
    --system11: #dbefee;
    --system12: #6dfacd;
}


.text-justify {
    text-align: justify;
}

#banner-area {
    position: relative;
    top: 0px;
    background-image: url('../images/picture10.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 45vh;
    display: flex; 
    align-items: center;
    color: var(--main-bg); 
    padding: 0 20px;
    overflow: hidden;
}


#banner-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--img-bg-blue); /* Blue overlay */
    opacity: 0.5; /* Adjust the overlay opacity here */
    z-index: 0;
}

#banner-area > * {
    position: relative;
    z-index: 1; /* Bring content above overlay */
}

/* Slider Container */
#slider-container {
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: auto; /* Horizontal scrolling */
}

/* Card Layout */
#slider-container .card {
    flex: 1 0 auto;
    max-width: 100%;
    border-radius: 0.5rem;
}

#slider-container .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#slider-container .card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

#slider-container .card img {
    max-width: 80%;
    height: auto;
}

/* Link Styling */
.lcl-systems a {
    text-decoration: none;
    color: var(--black);
}

.lcl-systems a:hover .card {
    background: var(--gradient-bg);
    color: var(--main-bg);
    border: none;
}

/* Button Styling */
#products-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

#products-btn-prev {
    left: 0;
}

#products-btn-next {
    right: 0;
}

#product-display-container {
    max-height: 1000px;
}

.product-card {
    min-height: 10em; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.product-image {
    width: 100%;
    height: 200px;     
    object-fit: cover;  
    border-radius: 8px 8px 0 0;
}

.card-body {
    flex-grow: 1; 
}

.product-name {
    font-weight: bold;
}

.product-category {
    background-color: var(--light-blue);
    color: var(--main-bg);
}


.custom-outline-primary {
    color: #0d6efd; /* Primary color */
    border: 1px solid #0d6efd;
    padding: 0.25rem 0.5rem; /* Adjust padding as needed */
    border-radius: 0.25rem; /* Matches button's border-radius */
    display: inline-block;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.custom-outline-primary:hover {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}


.card.product-card {
    width: 300px; /* Set a fixed width for the card */
    height: 450px; /* Set a fixed height for the card */
    display: flex;
    flex-direction: column; /* Arrange content vertically */
    justify-content: space-between; /* Spread content evenly */
    align-items: center; /* Center-align content */
}

.product-image {
    max-height: 120px; /* Adjust based on your design */
    object-fit: cover; /* Ensure the image fits properly */
}

.card-body {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: flex-start; /* Align content at the top */
    align-items: stretch; /* Stretch elements to fit */
    overflow: hidden; /* Prevent overflow for long text */
    text-align: center; /* Center-align text */
}

.FDAS {
    background-color: var(--system1);
}
.FACP {
    background-color: var(--system2);
}
.SD {
    background-color: var(--system3);
}
.HD {
    background-color: var(--system4);
}
.MPS {
    background-color: var(--system5);
}
.MCP {
    background-color: var(--system6);
}
.BELL {
    background-color: var(--system7);
}
.HORN_STROBE {
    background-color: var(--system8);
}
.SLC {
    background-color: var(--system9);
}
.ISOLATOR_MODULES {
    background-color: var(--system10);
}
.POWER_SUPPLY_BATTERY {
    background-color: var(--system11);
}
.RELAYS_OUTPUT_MODULES {
    background-color: var(--system12);
}

.AFSS {
    background-color: var(--system2);
}
.CONTROL_PANEL {
    background-color: var(--system4);
}
.GAS_SUPPRESSION_AGENT {
    background-color: var(--system6);
}
.CYLINDER_ASSEMBLY {
    background-color: var(--system8);
}
.MANUAL_RELEASE_STATIONS {
    background-color: var(--system10);
}
.NOZZLES {
    background-color: var(--system12);
}
.PIPE_NETWORK {
    background-color: var(--system1);
}
.PRESSURE_GAUGES {
    background-color: var(--system3);
}
.AUTOMATIC_RELEASE_MECHANISM {
    background-color: var(--system5);
}
.DISCHARGE_PRESSURE_SWITCH {
    background-color: var(--system7);
}
.ALARM_ALERT_SYSTEM {
    background-color: var(--system9);
}

.CCTV {
    background-color: var(--system3);
}
.DVR_NVR {
    background-color: var(--system5);
}
.IP_CAMERA {
    background-color: var(--system7);
}
.ANALOG_CAMERA {
    background-color: var(--system9);
}
.PTZ_CAMERA {
    background-color: var(--system11);
}
.IR_CAMERA {
    background-color: var(--system1);
}
.BULLET_CAMERA {
    background-color: var(--system4);
}
.COME_CAMERA {
    background-color: var(--system6);
}
.MONITOR_DISPLAY {
    background-color: var(--system8);
}
.VIDEO_MANAGEMENT_SOFTWARE {
    background-color: var(--system10);
}
.POWER_SUPPLY_UPS {
    background-color: var(--system12);
}

.ACCESS_CONTROL {
    background-color: var(--system4);
}
.ACCESS_READER {
    background-color: var(--system7);
}
.ACCESS_CONTROLLER {
    background-color: var(--system9);
}
.ELECTRIC_STRIKE {
    background-color: var(--system12);
}
.EM_LOCK {
    background-color: var(--system2);
}
.DOOR_CLOSER {
    background-color: var(--system5);
}
.REX_SENSOR {
    background-color: var(--system8);
}
.BIO_READER {
    background-color: var(--system10);
}

.BURGLAR_ALARM {
    background-color: var(--system11);
}
.PIR_SENSOR {
    background-color: var(--system1);
}
.GLASS_BREAK_SENSOR {
    background-color: var(--system3);
}
.VIBRATION_SENSOR {
    background-color: var(--system5);
}
.ALARM_PANEL {
    background-color: var(--system7);
}
.SIREN {
    background-color: var(--system9);
}

.INTERCOM_PAGING {
    background-color: var(--system6);
}
.INTERCOM_MASTER {
    background-color: var(--system8);
}
.INTERCOM_SUBSTATION {
    background-color: var(--system10);
}
.PAGING_MIC {
    background-color: var(--system2);
}
.PAGING_SPEAKER {
    background-color: var(--system4);
}

.WALKTHROUGH_HANDHELD_METAL_DETECTOR {
    background-color: var(--system12);
}
.WALKTHROUGH_DETECTOR {
    background-color: var(--system1);
}
.HANDHELD_DETECTOR {
    background-color: var(--system3);
}

.GATE_BARRIERS {
    background-color: var(--system5);
}
.BARRIER_GATE {
    background-color: var(--system7);
}
.BOLLARDS {
    background-color: var(--system9);
}
.TIRE_KILLER {
    background-color: var(--system11);
}

.EAS {
    background-color: var(--system10);
}
.ANTI_THEFT_GATE {
    background-color: var(--system1);
}
.DEACTIVATOR {
    background-color: var(--system2);
}
.LABELS_TAGS {
    background-color: var(--system3);
}

.XRAY_BAGGAGE_SCANNER , .XRAY-BAGGAGE-SCANNER {
    background-color: var(--system8);
}
.XRAY_MACHINE {
    background-color: var(--system6);
}
.CONVEYOR_BELT {
    background-color: var(--system4);
}

.LED_DISPLAY {
    background-color: var(--system7);
}
.DISPLAY_PANEL {
    background-color: var(--system9);
}
.CONTROLLER {
    background-color: var(--system11);
}

.ROOM_ALERT {
    background-color: var(--system12);
}
.SENSOR_MODULE {
    background-color: var(--system2);
}
.ALERT_PANEL {
    background-color: var(--system4);
}