/* Brand Card Styles */
.brand-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.brand-card:hover {
    transform: translateY(-5px);
    border-color: #3B82F6;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15) !important;
}

/* CSS Laptop Icon Base */
.css-laptop {
    width: 70px;
    height: 50px;
    margin: 0 auto 0.5rem;
    position: relative;
    transition: transform 0.3s ease;
}

.brand-card:hover .css-laptop {
    transform: scale(1.08);
}

/* Laptop Screen */
.laptop-screen {
    width: 100%;
    height: 35px;
    border-radius: 3px 3px 0 0;
    border: 2.5px solid;
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
}

/* Laptop Base */
.laptop-base {
    width: 110%;
    height: 8px;
    border-radius: 0 0 4px 4px;
    margin: 0 auto;
    margin-left: -5%;
    position: relative;
}

/* Laptop Hinge */
.laptop-base::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 3px;
    border-radius: 2px;
}

/* Brand Color Variations */
.css-laptop.dell .laptop-screen {
    border-color: #007DB8;
}

.css-laptop.dell .laptop-base,
.css-laptop.dell .laptop-base::before {
    background-color: #007DB8;
}

.css-laptop.hp .laptop-screen {
    border-color: #0096D6;
}

.css-laptop.hp .laptop-base,
.css-laptop.hp .laptop-base::before {
    background-color: #0096D6;
}

.css-laptop.lenovo .laptop-screen {
    border-color: #E2231A;
}

.css-laptop.lenovo .laptop-base,
.css-laptop.lenovo .laptop-base::before {
    background-color: #E2231A;
}

.css-laptop.asus .laptop-screen {
    border-color: #000000;
}

.css-laptop.asus .laptop-base,
.css-laptop.asus .laptop-base::before {
    background-color: #1a1a1a;
}

.css-laptop.acer .laptop-screen {
    border-color: #83B81A;
}

.css-laptop.acer .laptop-base,
.css-laptop.acer .laptop-base::before {
    background-color: #83B81A;
}

.css-laptop.msi .laptop-screen {
    border-color: #E4002B;
}

.css-laptop.msi .laptop-base,
.css-laptop.msi .laptop-base::before {
    background-color: #E4002B;
}

/* Responsive Sizing */
@media (max-width: 768px) {
    .css-laptop {
        width: 55px;
        height: 40px;
    }

    .laptop-screen {
        height: 28px;
    }

    .laptop-base {
        height: 6px;
    }
}