/* =========================================================
   RESET + GLOBAL
========================================================= */

:root {
    --background: #f7f8fc;
    --white: #ffffff;

    --text: #171a2b;
    --text-secondary: #70768b;
    --text-light: #969bad;

    --border: #e7e9f1;

    --primary: #6657f5;
    --primary-hover: #5748e7;
    --primary-light: #f0efff;

    --green: #149d70;
    --green-light: #eaf9f3;

    --orange: #d8891c;
    --orange-light: #fff6e8;

    --red: #d64d56;
    --red-light: #fff0f1;

    --shadow:
        0 10px 30px
        rgba(30, 32, 60, 0.05);

    --sidebar-width: 230px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);
}


button,
input {
    font-family:
        inherit;
}


button {
    cursor:
        pointer;
}


a {
    text-decoration:
        none;

    color:
        inherit;
}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.app-container {
    min-height:
        100vh;
}


.main-content {
    min-height:
        100vh;

    margin-left:
        var(--sidebar-width);

    padding:
        30px 35px 60px;
}


.main-content.full-width {
    margin-left:
        0;

    padding:
        0;
}



/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position:
        fixed;

    top:
        0;

    left:
        0;

    bottom:
        0;

    width:
        var(--sidebar-width);

    padding:
        24px 18px;

    background:
        var(--white);

    border-right:
        1px solid
        var(--border);

    display:
        flex;

    flex-direction:
        column;

    z-index:
        100;
}



/* =========================================================
   LOGO
========================================================= */

.logo-area {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        0 8px 28px;
}


.logo-icon {
    width:
        40px;

    height:
        40px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        white;

    font-size:
        19px;

    font-weight:
        700;

    background:
        linear-gradient(
            135deg,
            #7968ff,
            #5546df
        );

    box-shadow:
        0 8px 18px
        rgba(
            102,
            87,
            245,
            0.28
        );
}


.logo-text {
    display:
        flex;

    flex-direction:
        column;
}


.logo-text strong {
    font-size:
        17px;
}


.logo-text span {
    margin-top:
        3px;

    color:
        var(--text-light);

    font-size:
        12px;
}



/* =========================================================
   SIDEBAR MENU
========================================================= */

.sidebar-menu {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.menu-item {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        12px 14px;

    border-radius:
        11px;

    color:
        #686e83;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        0.2s;
}


.menu-item:hover {
    background:
        #f6f5ff;

    color:
        var(--primary);
}


.menu-item.active {
    background:
        var(--primary-light);

    color:
        var(--primary);
}


.menu-icon {
    width:
        22px;

    text-align:
        center;

    font-size:
        16px;
}



/* =========================================================
   SIDEBAR BOTTOM
========================================================= */

.sidebar-bottom {
    margin-top:
        auto;
}


.server-status {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px;

    margin-bottom:
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;
}


.server-status-dot {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #18bb7c;

    box-shadow:
        0 0 0 5px
        #e8faf3;
}


.server-status-text {
    display:
        flex;

    flex-direction:
        column;
}


.server-status-text strong {
    font-size:
        13px;
}


.server-status-text span {
    margin-top:
        3px;

    color:
        var(--text-light);

    font-size:
        11px;
}


.logout-button {
    width:
        100%;

    padding:
        11px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        white;

    color:
        var(--text-secondary);

    font-weight:
        600;

    transition:
        0.2s;
}


.logout-button:hover {
    background:
        #f7f8fb;

    color:
        var(--red);
}



/* =========================================================
   TOP HEADER
========================================================= */

.top-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        20px;
}


.page-welcome {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;
}


.top-header h1 {
    margin:
        5px 0 0;

    font-size:
        28px;

    letter-spacing:
        -0.5px;
}


.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.current-date {
    padding:
        10px 14px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        600;
}


.primary-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        11px 17px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    box-shadow:
        0 7px 16px
        rgba(
            102,
            87,
            245,
            0.22
        );

    transition:
        0.2s;
}


.primary-button:hover {
    background:
        var(--primary-hover);

    transform:
        translateY(-1px);
}



/* =========================================================
   TOP TABS
========================================================= */

.top-tabs {
    width:
        max-content;

    display:
        flex;

    gap:
        5px;

    padding:
        5px;

    margin-bottom:
        18px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;
}


.top-tab {
    padding:
        9px 15px;

    border-radius:
        8px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        600;
}


.top-tab:hover,
.top-tab.active {
    background:
        var(--primary-light);

    color:
        var(--primary);
}



/* =========================================================
   INFORMATION BANNER
========================================================= */

.information-banner {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 15px;

    margin-bottom:
        20px;

    background:
        #eef3ff;

    border:
        1px solid
        #dfe7ff;

    border-radius:
        10px;

    color:
        #5362aa;

    font-size:
        13px;
}


.information-icon {
    width:
        21px;

    height:
        21px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #8492d6;

    border-radius:
        50%;

    font-size:
        12px;

    font-weight:
        700;
}



/* =========================================================
   STATISTICS
========================================================= */

.statistics-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        15px;

    margin-bottom:
        18px;
}


.statistic-card {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        18px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.statistic-icon {
    width:
        45px;

    height:
        45px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    font-size:
        18px;

    font-weight:
        700;
}


.statistic-icon.purple {
    background:
        var(--primary-light);

    color:
        var(--primary);
}


.statistic-icon.green {
    background:
        var(--green-light);

    color:
        var(--green);
}


.statistic-icon.orange {
    background:
        var(--orange-light);

    color:
        var(--orange);
}


.statistic-icon.red {
    background:
        var(--red-light);

    color:
        var(--red);
}


.statistic-content span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.statistic-content strong {
    font-size:
        24px;
}



/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid {
    display:
        grid;

    grid-template-columns:
        1.4fr 1fr;

    gap:
        18px;

    margin-bottom:
        18px;
}


.dashboard-card,
.customer-card,
.settings-section {
    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.dashboard-card {
    padding:
        20px;
}


.card-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        20px;
}


.card-label {
    margin:
        0;

    color:
        var(--text-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.card-header h2,
.customer-card-header h2,
.settings-information h2 {
    margin:
        5px 0 0;

    font-size:
        18px;
}


.format-badge {
    padding:
        7px 10px;

    background:
        #fafafe;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    color:
        var(--text-secondary);

    font-size:
        10px;

    font-weight:
        700;
}



/* =========================================================
   CREATE PROXY FORM
========================================================= */

.create-proxy-form {
    display:
        grid;

    grid-template-columns:
        1.5fr 0.7fr auto;

    gap:
        12px;

    align-items:
        end;
}


.form-group label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--text-secondary);

    font-size:
        12px;

    font-weight:
        600;
}


.form-group input {
    width:
        100%;

    height:
        42px;

    padding:
        0 12px;

    border:
        1px solid
        #dfe2eb;

    border-radius:
        9px;

    background:
        white;

    outline:
        none;

    transition:
        0.2s;
}


.form-group input:focus {
    border-color:
        #9d93ff;

    box-shadow:
        0 0 0 3px
        var(--primary-light);
}


.create-button {
    height:
        42px;

    white-space:
        nowrap;
}



/* =========================================================
   SERVER INFORMATION
========================================================= */

.online-badge {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 10px;

    border-radius:
        999px;

    background:
        var(--green-light);

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        700;
}


.online-badge span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);
}


.server-information {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.server-information-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        11px;

    border-bottom:
        1px dashed
        var(--border);
}


.server-information-row:last-child {
    padding-bottom:
        0;

    border-bottom:
        none;
}


.server-information-row span {
    color:
        var(--text-secondary);

    font-size:
        13px;
}


.server-information-row strong {
    font-size:
        13px;
}



/* =========================================================
   CUSTOMER CARD
========================================================= */

.customer-card {
    overflow:
        hidden;

    margin-bottom:
        18px;
}


.customer-card-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px;

    border-bottom:
        1px solid
        var(--border);
}



/* =========================================================
   SEARCH BOX
========================================================= */

.search-box {
    width:
        310px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 11px;

    border:
        1px solid
        #dfe2eb;

    border-radius:
        10px;

    background:
        white;
}


.search-icon {
    color:
        var(--text-light);
}


.search-box input {
    width:
        100%;

    height:
        40px;

    padding:
        0;

    border:
        none;

    outline:
        none;

    background:
        transparent;
}



/* =========================================================
   CUSTOMER TABLE
========================================================= */

.table-container {
    width:
        100%;

    overflow-x:
        auto;
}


.customer-table {
    width:
        100%;

    border-collapse:
        collapse;
}


.customer-table thead {
    background:
        #fafbfe;
}


.customer-table th {
    padding:
        13px 16px;

    color:
        #7c8295;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-align:
        left;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.customer-table td {
    padding:
        15px 16px;

    border-top:
        1px solid
        var(--border);

    font-size:
        13px;

    vertical-align:
        middle;
}



/* =========================================================
   CUSTOMER INFORMATION
========================================================= */

.customer-information {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.customer-avatar {
    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        800;
}


.customer-name {
    display:
        flex;

    flex-direction:
        column;
}


.customer-name strong {
    font-size:
        13px;
}


.customer-name span {
    margin-top:
        4px;

    color:
        var(--text-light);

    font-size:
        10px;
}



/* =========================================================
   PROXY INFORMATION
========================================================= */

.proxy-information {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    max-width:
        390px;
}


.proxy-information code {
    display:
        block;

    max-width:
        300px;

    overflow:
        hidden;

    padding:
        7px 9px;

    border:
        1px solid
        #ececf2;

    border-radius:
        7px;

    background:
        #f7f7fb;

    color:
        #4d5265;

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.copy-button {
    padding:
        6px;

    border:
        none;

    background:
        transparent;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        700;
}


.copy-button.copied {
    color:
        var(--green);
}


.expiration-date {
    white-space:
        nowrap;

    font-size:
        12px;
}



/* =========================================================
   STATUS BADGES
========================================================= */

.status-badge {
    display:
        inline-flex;

    padding:
        6px 9px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.status-badge.active {
    background:
        var(--green-light);

    color:
        var(--green);
}


.status-badge.expired {
    background:
        var(--orange-light);

    color:
        var(--orange);
}


.status-badge.locked {
    background:
        var(--red-light);

    color:
        var(--red);
}



/* =========================================================
   CUSTOMER ACTIONS
========================================================= */

.customer-actions {
    min-width:
        315px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.customer-actions form {
    margin:
        0;
}


.extend-form {
    display:
        flex;

    gap:
        5px;
}


.extend-form input {
    width:
        55px;

    padding:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        7px;

    outline:
        none;
}


.action-button {
    padding:
        7px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        7px;

    background:
        white;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        0.2s;
}


.action-button:hover {
    transform:
        translateY(-1px);
}


.action-button.extend {
    border-color:
        #d8f1e7;

    background:
        var(--green-light);

    color:
        var(--green);
}


.action-button.lock {
    border-color:
        #f7e8cb;

    background:
        var(--orange-light);

    color:
        var(--orange);
}


.action-button.password {
    background:
        #f7f8fb;

    color:
        #5d6478;
}


.action-button.delete {
    border-color:
        #f5dadd;

    background:
        var(--red-light);

    color:
        var(--red);
}



/* =========================================================
   EMPTY CUSTOMER
========================================================= */

.empty-customer {
    padding:
        55px 20px;

    text-align:
        center;
}


.empty-customer-icon {
    margin-bottom:
        10px;

    font-size:
        32px;
}


.empty-customer h3 {
    margin:
        0 0 7px;

    font-size:
        16px;
}


.empty-customer p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        12px;
}



/* =========================================================
   SETTINGS
========================================================= */

.settings-section {
    padding:
        20px;
}


.settings-information p:last-child {
    margin-bottom:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;
}



/* =========================================================
   FLASH MESSAGE
========================================================= */

.flash-container {
    position:
        fixed;

    top:
        20px;

    right:
        25px;

    z-index:
        9999;
}


.flash-message {
    min-width:
        260px;

    padding:
        13px 16px;

    margin-bottom:
        8px;

    border-radius:
        10px;

    background:
        #eef3ff;

    color:
        #5362aa;

    font-size:
        12px;

    font-weight:
        600;

    box-shadow:
        0 10px 30px
        rgba(
            30,
            32,
            60,
            0.12
        );

    transition:
        0.3s;
}


.flash-message.success {
    background:
        var(--green-light);

    color:
        var(--green);
}


.flash-message.error {
    background:
        var(--red-light);

    color:
        var(--red);
}



/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page {
    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:

        radial-gradient(
            circle at 15% 20%,
            #ebe8ff 0,
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            #eef5ff 0,
            transparent 35%
        ),

        #f7f8fc;
}


.login-card {
    width:
        100%;

    max-width:
        420px;

    padding:
        32px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    box-shadow:
        0 20px 60px
        rgba(
            34,
            37,
            70,
            0.12
        );
}


.login-header {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        28px;
}


.login-logo {
    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #7968ff,
            #5546df
        );

    color:
        white;

    font-size:
        22px;

    font-weight:
        800;

    box-shadow:
        0 8px 20px
        rgba(
            102,
            87,
            245,
            0.28
        );
}


.login-header h1 {
    margin:
        0;

    font-size:
        23px;
}


.login-header p {
    margin:
        5px 0 0;

    color:
        var(--text-secondary);

    font-size:
        12px;
}


.login-form-group {
    margin-bottom:
        16px;
}


.login-form-group label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-secondary);

    font-size:
        12px;

    font-weight:
        700;
}


.login-form-group input {
    width:
        100%;

    height:
        44px;

    padding:
        0 13px;

    border:
        1px solid
        #dfe2eb;

    border-radius:
        10px;

    outline:
        none;

    transition:
        0.2s;
}


.login-form-group input:focus {
    border-color:
        #9d93ff;

    box-shadow:
        0 0 0 3px
        var(--primary-light);
}


.login-button {
    width:
        100%;

    height:
        44px;

    margin-top:
        5px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    box-shadow:
        0 7px 16px
        rgba(
            102,
            87,
            245,
            0.22
        );

    transition:
        0.2s;
}


.login-button:hover {
    background:
        var(--primary-hover);

    transform:
        translateY(-1px);
}


.login-footer {
    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid
        var(--border);

    text-align:
        center;
}


.login-status {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        var(--text-secondary);

    font-size:
        11px;

    font-weight:
        600;
}


.login-status span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);
}


.login-footer p {
    margin:
        7px 0 0;

    color:
        var(--text-light);

    font-size:
        10px;
}



/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (
    max-width:
    1150px
) {

    .statistics-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .dashboard-grid {
        grid-template-columns:
            1fr;
    }


    .create-proxy-form {
        grid-template-columns:
            1fr
            1fr;
    }


    .create-button {
        grid-column:
            1 / -1;
    }

}



/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (
    max-width:
    760px
) {

    :root {
        --sidebar-width:
            72px;
    }


    .sidebar {
        padding:
            20px 10px;
    }


    .logo-area {
        padding-left:
            6px;
    }


    .logo-text,
    .menu-item span,
    .server-status-text {
        display:
            none;
    }


    .menu-item {
        justify-content:
            center;

        padding:
            12px;
    }


    .server-status {
        justify-content:
            center;
    }


    .logout-button {
        padding:
            10px 4px;

        font-size:
            0;
    }


    .logout-button::after {
        content:
            "↪";

        font-size:
            18px;
    }


    .main-content {
        padding:
            20px 14px 50px;
    }


    .top-header {
        align-items:
            flex-start;

        gap:
            15px;
    }


    .header-actions {
        flex-direction:
            column;

        align-items:
            flex-end;
    }


    .top-header h1 {
        font-size:
            23px;
    }


    .statistics-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .create-proxy-form {
        grid-template-columns:
            1fr;
    }


    .create-button {
        grid-column:
            auto;
    }


    .customer-card-header {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .search-box {
        width:
            100%;
    }

}



/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (
    max-width:
    520px
) {

    .statistics-grid {
        grid-template-columns:
            1fr;
    }


    .top-tabs {
        width:
            100%;

        overflow-x:
            auto;
    }


    .current-date {
        display:
            none;
    }


    .primary-button {
        padding:
            10px 12px;
    }

}
/* =========================================================
   CREATE PROXY - PORT SELECT
========================================================= */

.proxy-port-select {
    width: 100%;
    height: 44px;
    padding: 0 12px;

    border: 1px solid #dfe2eb;
    border-radius: 9px;

    background: white;
    color: var(--text);

    outline: none;
    cursor: pointer;

    transition: 0.2s;
}

.proxy-port-select:focus {
    border-color: #9d93ff;

    box-shadow:
        0 0 0 3px
        var(--primary-light);
}


.port-description {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}

.port-description-item {
    padding: 12px;

    border: 1px solid
        var(--border);

    border-radius: 10px;

    background: #fafafe;
}

.port-description-item strong {
    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 12px;
}

.port-description-item span {
    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.5;
}


.create-submit-button {
    width: 100%;

    height: 44px;

    margin-top: 4px;
}


.preview-list {
    display: grid;

    gap: 12px;

    margin-bottom: 18px;
}

.preview-item {
    padding-bottom: 12px;

    border-bottom:
        1px dashed
        var(--border);
}

.preview-item:last-child {
    padding-bottom: 0;

    border-bottom: none;
}

.preview-item span {
    display: block;

    margin-bottom: 6px;

    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 600;
}

.preview-item code {
    display: block;

    padding: 10px;

    border: 1px solid
        var(--border);

    border-radius: 8px;

    background: #f8f8fc;

    color: #4d5265;

    font-size: 11px;

    overflow-wrap: anywhere;
}


.create-info {
    margin-top: 14px;
}


.production-banner {
    background: var(--green-light);

    border-color: #d8f1e7;

    color: var(--green);
}


@media (max-width: 760px) {

    .port-description {
        grid-template-columns: 1fr;
    }

}