/* ============================================================================================== */
/* =============================================== grid ========================================= */
/* ============================================================================================== */

.d-grid {
    display: grid !important;
    gap: var(--customize-card-gap);
}

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

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

.d-grid.grid-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.d-grid.grid-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.d-grid.grid-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.d-grid.grid-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.d-grid.grid-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.d-grid.grid-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.d-grid.grid-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.d-grid.grid-columns-10 {
    grid-template-columns: repeat(10, 1fr);
}

/* ============================================================================================== */
/* ================================================ gap ========================================= */
/* ============================================================================================== */

[class*="y-gap-"] {
    display: flex;
    flex-direction: column;
}

.y-gap-50 {
    gap: 50px;
}

.y-gap-45 {
    gap: 45px;
}

.y-gap-40 {
    gap: 40px;
}

.y-gap-35 {
    gap: 35px;
}

.y-gap-30 {
    gap: 30px;
}

.y-gap-25 {
    gap: 25px;
}

.y-gap-20 {
    gap: 20px;
}

.y-gap-15 {
    gap: 15px;
}

.y-gap-10 {
    gap: 10px;
}

/* ============================================================================================== */
/* ============================================== section ======================================= */
/* ============================================================================================== */

.sec-row,
.sec-row>.sec-col {
    position: relative;
}

.sec-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

/* menu-and-info */

.sec-row.menu-and-info>.sec-col.this-col-menu {
    width: 300px;
    /* background-color: rgba(255, 255, 0, 1); */
}

.sec-row.menu-and-info>.sec-col.this-col-info {
    width: calc(100% - 300px);
    padding-left: 60px;
    /* min-height: 1000px; */
}

/* xxl */
@media (min-width: 1400px) {

    .d-grid.grid-columns-xxl-1 {
        grid-template-columns: repeat(1, 1fr);
    }

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

    .d-grid.grid-columns-xxl-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.grid-columns-xxl-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid.grid-columns-xxl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid.grid-columns-xxl-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid.grid-columns-xxl-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid.grid-columns-xxl-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid.grid-columns-xxl-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d-grid.grid-columns-xxl-10 {
        grid-template-columns: repeat(10, 1fr);
    }


    /* ============================================================================================== */
    /* ================================================ gap ========================================= */
    /* ============================================================================================== */

    .y-gap-xxl-50 {
        gap: 50px;
    }

    .y-gap-xxl-45 {
        gap: 45px;
    }

    .y-gap-xxl-40 {
        gap: 40px;
    }

    .y-gap-xxl-35 {
        gap: 35px;
    }

    .y-gap-xxl-30 {
        gap: 30px;
    }

    .y-gap-xxl-25 {
        gap: 25px;
    }

    .y-gap-xxl-20 {
        gap: 20px;
    }

    .y-gap-xxl-15 {
        gap: 15px;
    }

    .y-gap-xxl-10 {
        gap: 10px;
    }

    /* ============================================================================================== */
    /* ============================================== section ======================================= */
    /* ============================================================================================== */

    .sec-row.wrap-xxl {
        flex-wrap: wrap;
    }

    .sec-row.wrap-xxl>.sec-col.this-col-menu,
    .sec-row.wrap-xxl>.sec-col.this-col-info {
        width: 100%;
        flex: none;
        padding: 0;
    }

    .sec-row.hidden-menu-xxl>.sec-col.this-col-menu {
        display: none !important;
        pointer-events: none !important;
    }

}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .d-grid.grid-columns-xl-1 {
        grid-template-columns: repeat(1, 1fr);
    }

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

    .d-grid.grid-columns-xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.grid-columns-xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid.grid-columns-xl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid.grid-columns-xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid.grid-columns-xl-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid.grid-columns-xl-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid.grid-columns-xl-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d-grid.grid-columns-xl-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    /* ============================================================================================== */
    /* ================================================ gap ========================================= */
    /* ============================================================================================== */

    .y-gap-xl-50 {
        gap: 50px;
    }

    .y-gap-xl-45 {
        gap: 45px;
    }

    .y-gap-xl-40 {
        gap: 40px;
    }

    .y-gap-xl-35 {
        gap: 35px;
    }

    .y-gap-xl-30 {
        gap: 30px;
    }

    .y-gap-xl-25 {
        gap: 25px;
    }

    .y-gap-xl-20 {
        gap: 20px;
    }

    .y-gap-xl-15 {
        gap: 15px;
    }

    .y-gap-xl-10 {
        gap: 10px;
    }

    /* ============================================================================================== */
    /* ============================================== section ======================================= */
    /* ============================================================================================== */

    .sec-row.wrap-xl {
        flex-wrap: wrap;
    }

    .sec-row.wrap-xl>.sec-col.this-col-menu,
    .sec-row.wrap-xl>.sec-col.this-col-info {
        width: 100%;
        flex: none;
        padding: 0;
    }

    .sec-row.hidden-menu-xl>.sec-col.this-col-menu {
        display: none !important;
        pointer-events: none !important;
    }

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .d-grid.grid-columns-lg-1 {
        grid-template-columns: repeat(1, 1fr);
    }

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

    .d-grid.grid-columns-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.grid-columns-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid.grid-columns-lg-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid.grid-columns-lg-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid.grid-columns-lg-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid.grid-columns-lg-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid.grid-columns-lg-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d-grid.grid-columns-lg-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    /* ============================================================================================== */
    /* ================================================ gap ========================================= */
    /* ============================================================================================== */

    .y-gap-lg-50 {
        gap: 50px;
    }

    .y-gap-lg-45 {
        gap: 45px;
    }

    .y-gap-lg-40 {
        gap: 40px;
    }

    .y-gap-lg-35 {
        gap: 35px;
    }

    .y-gap-lg-30 {
        gap: 30px;
    }

    .y-gap-lg-25 {
        gap: 25px;
    }

    .y-gap-lg-20 {
        gap: 20px;
    }

    .y-gap-lg-15 {
        gap: 15px;
    }

    .y-gap-lg-10 {
        gap: 10px;
    }

    /* ============================================================================================== */
    /* ============================================== section ======================================= */
    /* ============================================================================================== */

    .sec-row.wrap-lg {
        flex-wrap: wrap;
    }

    .sec-row.wrap-lg>.sec-col.this-col-menu,
    .sec-row.wrap-lg>.sec-col.this-col-info {
        width: 100%;
        flex: none;
        padding: 0;
    }

    .sec-row.hidden-menu-lg>.sec-col.this-col-menu {
        display: none !important;
        pointer-events: none !important;
    }

    /* menu-and-info */
    .sec-row.menu-and-info>.sec-col.this-col-menu {
        width: 230px;
    }

    .sec-row.menu-and-info>.sec-col.this-col-info {
        width: calc(100% - 230px);
        padding-left: 50px;
    }

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    .d-grid.grid-columns-md-1 {
        grid-template-columns: repeat(1, 1fr);
    }

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

    .d-grid.grid-columns-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.grid-columns-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid.grid-columns-md-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid.grid-columns-md-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid.grid-columns-md-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid.grid-columns-md-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid.grid-columns-md-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d-grid.grid-columns-md-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    /* ============================================================================================== */
    /* ================================================ gap ========================================= */
    /* ============================================================================================== */

    .y-gap-md-50 {
        gap: 50px;
    }

    .y-gap-md-45 {
        gap: 45px;
    }

    .y-gap-md-40 {
        gap: 40px;
    }

    .y-gap-md-35 {
        gap: 35px;
    }

    .y-gap-md-30 {
        gap: 30px;
    }

    .y-gap-md-25 {
        gap: 25px;
    }

    .y-gap-md-20 {
        gap: 20px;
    }

    .y-gap-md-15 {
        gap: 15px;
    }

    .y-gap-md-10 {
        gap: 10px;
    }

    /* ============================================================================================== */
    /* ============================================== section ======================================= */
    /* ============================================================================================== */

    .sec-row.wrap-md {
        flex-wrap: wrap;
    }

    .sec-row.wrap-md>.sec-col.this-col-menu,
    .sec-row.wrap-md>.sec-col.this-col-info {
        width: 100%;
        flex: none;
        padding: 0;
    }

    .sec-row.hidden-menu-md>.sec-col.this-col-menu {
        display: none !important;
        pointer-events: none !important;
    }

}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    .d-grid.grid-columns-sm-1 {
        grid-template-columns: repeat(1, 1fr);
    }

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

    .d-grid.grid-columns-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.grid-columns-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid.grid-columns-sm-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid.grid-columns-sm-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid.grid-columns-sm-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid.grid-columns-sm-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid.grid-columns-sm-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d-grid.grid-columns-sm-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    /* ============================================================================================== */
    /* ================================================ gap ========================================= */
    /* ============================================================================================== */

    .y-gap-sm-50 {
        gap: 50px;
    }

    .y-gap-sm-45 {
        gap: 45px;
    }

    .y-gap-sm-40 {
        gap: 40px;
    }

    .y-gap-sm-35 {
        gap: 35px;
    }

    .y-gap-sm-30 {
        gap: 30px;
    }

    .y-gap-sm-25 {
        gap: 25px;
    }

    .y-gap-sm-20 {
        gap: 20px;
    }

    .y-gap-sm-15 {
        gap: 15px;
    }

    .y-gap-sm-10 {
        gap: 10px;
    }

    /* ============================================================================================== */
    /* ============================================== section ======================================= */
    /* ============================================================================================== */

    .sec-row.wrap-sm {
        flex-wrap: wrap;
    }

    .sec-row.wrap-sm>.sec-col.this-col-menu,
    .sec-row.wrap-sm>.sec-col.this-col-info {
        width: 100%;
        flex: none;
        padding: 0;
    }

    .sec-row.hidden-menu-sm>.sec-col.this-col-menu {
        display: none !important;
        pointer-events: none !important;
    }

}

/* xs */
@media (max-width: 575.98px) {

    .d-grid.grid-columns-xs-1 {
        grid-template-columns: repeat(1, 1fr);
    }

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

    .d-grid.grid-columns-xs-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.grid-columns-xs-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid.grid-columns-xs-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid.grid-columns-xs-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid.grid-columns-xs-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid.grid-columns-xs-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid.grid-columns-xs-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .d-grid.grid-columns-xs-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    /* ============================================================================================== */
    /* ================================================ gap ========================================= */
    /* ============================================================================================== */

    .y-gap-xs-50 {
        gap: 50px;
    }

    .y-gap-xs-45 {
        gap: 45px;
    }

    .y-gap-xs-40 {
        gap: 40px;
    }

    .y-gap-xs-35 {
        gap: 35px;
    }

    .y-gap-xs-30 {
        gap: 30px;
    }

    .y-gap-xs-25 {
        gap: 25px;
    }

    .y-gap-xs-20 {
        gap: 20px;
    }

    .y-gap-xs-15 {
        gap: 15px;
    }

    .y-gap-xs-10 {
        gap: 10px;
    }

    /* ============================================================================================== */
    /* ============================================== section ======================================= */
    /* ============================================================================================== */

    .sec-row.wrap-xs {
        flex-wrap: wrap;
    }

    .sec-row.wrap-xs>.sec-col.this-col-menu,
    .sec-row.wrap-xs>.sec-col.this-col-info {
        width: 100%;
        flex: none;
        padding: 0;
    }

    .sec-row.hidden-menu-xs>.sec-col.this-col-menu {
        display: none !important;
        pointer-events: none !important;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}