/* =====================================
   Device Section
===================================== */

#device {

    background: #ffffff;
}

/* =========================
   Columns
========================= */

.device-columns {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    margin-top: 60px;
}

/* =========================
   Column
========================= */

.device-column {

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

/* =========================
   Header
========================= */

.column-header {

    padding: 35px;

    background:
    linear-gradient(
    135deg,
    #0F2744,
    #17385F
    );

    color: #fff;
}

.customer-side .column-header {

    background:
    linear-gradient(
    135deg,
    #3A4A5D,
    #556270
    );
}

.column-label {

    display: inline-block;

    padding: 8px 16px;

    border-radius: 30px;

    background: var(--accent);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 15px;
}

.column-label.customer {

    background: #6C757D;
}

/* =========================
   Device List
========================= */

.device-list {

    padding: 30px;
}

.device-item {

    display: flex;

    gap: 20px;

    align-items: flex-start;

    padding: 20px 0;

    border-bottom:
    1px solid #E7EDF3;
}

.device-item:last-child {

    border-bottom: none;
}

.device-icon {

    font-size: 32px;

    min-width: 40px;
}

.device-item h4 {

    color: var(--primary);

    margin-bottom: 6px;
}

.device-item p {

    color: #666;

    font-size: 14px;

    margin: 0;
}

/* =========================
   Support Message
========================= */

.support-message {

    margin-top: 70px;

    text-align: center;

    background:
    #F7F9FC;

    border-radius: 20px;

    padding: 50px;
}

.support-message h3 {

    color: var(--primary);

    font-size: 32px;

    margin-bottom: 20px;
}

.support-message p {

    max-width: 850px;

    margin: auto;

    line-height: 2;
}

/* =========================
   Expand Box
========================= */

.expand-box {

    margin-top: 50px;

    background:
    linear-gradient(
    135deg,
    #0F2744,
    #17385F
    );

    color: #fff;

    border-radius: 24px;

    padding: 60px;

    text-align: center;
}

.expand-box h3 {

    font-size: 34px;

    margin-bottom: 20px;
}

.expand-box p {

    max-width: 900px;

    margin: auto;

    line-height: 2;

    margin-bottom: 20px;
}

.expand-btn {

    font-size: 14px;
    padding: 10px 28px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.expand-box span {

    color: #FFD699;

    font-size: 14px;
}

/* =========================
   Responsive
========================= */

@media screen and (max-width: 992px){

    .device-columns{

        grid-template-columns:1fr;
    }

}

@media screen and (max-width:768px){

    .support-message,
    .expand-box{

        padding:35px 25px;
    }

    .support-message h3,
    .expand-box h3{

        font-size:26px;
    }

}