html, body {
    margin: 0;
    padding: 0;
    
}

* {
    margin: 0;
    padding: 0;
}

.toon {
    background-color: black;
    font-family: 'DB Adman X Bold', sans-serif;
}

@font-face {
    font-family: 'DB Adman X Bold';
    src: url('../Font/DB Adman X Bd.ttf') format('truetype');
    /* แทน path/to/DBAdmanX-Bold.ttf ด้วยที่อยู่เต็มของไฟล์ฟอนต์ที่คุณมี */
}

@font-face {
    font-family: 'PSL';
    src: url('../Font/psl147.ttf') format('truetype');
    /* แทน path/to/DBAdmanX-Bold.ttf ด้วยที่อยู่เต็มของไฟล์ฟอนต์ที่คุณมี */
}

@font-face {
    font-family: 'GOTHAM';
    src: url('../Font/Gotham-Medium_0.otf') format('truetype');
    /* แทน path/to/DBAdmanX-Bold.ttf ด้วยที่อยู่เต็มของไฟล์ฟอนต์ที่คุณมี */
}



.custom-card {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #C9AF62;
    border: 1px solid #C9AF62;
    border-radius: 20px;
}

.nested-column {
    
    display: flex;
    align-items: center; /* Vertically centers the text */
    text-align: start; /* This only affects block-level text */
    justify-content: flex-start; /* Horizontally aligns content to the left */
    padding-left: 10px; /* Optional: Adds some space between the text and the border */
    height: 100%;
    border-radius: 20px;
}

.nested-column2 {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20px;
}


/* Style to display column titles like table headers */
.column-titles {
    display: flex;
    justify-content: space-between;
  
    margin-bottom: 0.2rem !important;
    font-weight: bold;
    color: #fff;
}

    .column-titles div {
        
        /*width: 25%;*/ /* Adjust width for each title */
    }

/*    .column-titles > t1{
        margin-right: 10px;
        background-color: red;
    }*/

.toon_locationicon {
    width: 13px;
    height: 23px;
    cursor: pointer;
    margin: 18px 0 0 8px;
}

.toon_locationicon2 {
    width: 13px;
    height: 23px;
    cursor: pointer;
    margin: 24px 0 0 8px;
}

/* Mobile-specific height for cards */
@media (min-width: 390px) and (max-width: 480px) {

    .container {
        width: 100%;
        padding-right: 3px !important;
        padding-left: 3px !important;
        margin-right: auto;
        margin-left: auto;
    }

    .custom-card {
        height: 65px;
    }
    .tooniconsiamicon {
        width: 60%;
        max-width: 160px;
        height: auto;
        margin-top: 10px;
       
    }

    .column-titles > .t1 {
        margin-left: 10px;
/*        background-color: red;*/
        text-align: center;
    }

    .column-titles > .t2 {
        margin-left: 10px;
/*        background-color: red;*/
        text-align: right;
    }

    .column-titles > .t3 {
        margin-left: -12px;
        margin-right: 32px;
/*        background-color: red;*/
        text-align: left;
    }




    .Sub_boatex_text2 {
        margin: 12px 0 0 5px;
        font-weight: bold;
/*        position: relative;*/
        bottom: 20%;
        font-size: 22px;
        width: 100%;
        max-width: 180px;
    }

    .Sub_boatex_text21 {
        margin: 6px 0 0 5px;
        font-weight: bold;
/*        position: relative;*/
        bottom: 25%;
        font-size: 22px;
        width: 100%;
        max-width: 200px;
    }

    .column-titles {
        font-size: 14px;
    }

    
    .nested-column2 {
       
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 15px 0 0 5px;
    }

    .nested-column3 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 8px 0 0 5px !important;
        
    }


        .nested-column2 > p {
            font-size: 20px;
            margin-top: 17px;
        }

    .nested-column3 > p {
        font-size: 20px;
        margin-top: 17px;
    }


    .nested-column4 {
        display: flex;
        align-items: center; /* Vertically centers the text */
        justify-content: flex-start; /* Aligns content to the right */
        text-align: start; /* Aligns block-level text to the right */
        padding-right: 0px; /* Optional: Adds some space between the text and the right edge */
        height: 100%;
        border-radius: 20px;
        width: 100%; /* Ensure it stretches across the parent container */
        /*background-color: #f9f9f9;*/ /* Optional: Add a background for better visualization */
    }

    .toon_locationicon {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 18px 0 0 8px;
    }

    .toon_locationicon2 {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 24px 0 0 8px;
    }

    
}

@media (min-width: 290px) and (max-width: 389px)  {

    .container {
        width: 100%;
        padding-right: 3px !important;
        padding-left: 3px !important;
        margin-right: auto;
        margin-left: auto;
    }
    
    .custom-card {
        height: 62px;
    }

    .tooniconsiamicon {
        width: 60%;
        max-width: 160px;
        height: auto;
        margin-top: 10px;
    }

    .column-titles > .t1 {
        margin-left: 10px;
        /*        background-color: red;*/
        text-align: center;
    }

    .column-titles > .t2 {
        margin-left: 29px;
        /*        background-color: red;*/
        text-align: right;
    }

    .column-titles > .t3 {
        margin-left: -12px;
        margin-right: 32px;
        /*        background-color: red;*/
        text-align: left;
    }




    .Sub_boatex_text2 {
        margin: 12px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 20%;
        font-size: 22px;
        width: 100%;
        max-width: 180px;
    }

    .Sub_boatex_text21 {
        margin: 6px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 25%;
        font-size: 22px;
        width: 100%;
        max-width: 200px;
    }

    .column-titles {
        font-size: 13px;
    }


    .nested-column2 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 15px 0 0 5px;
    }

    .nested-column3 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 8px 0 0 5px !important;
    }


    .nested-column2 > p {
        font-size: 18px;
        margin-top: 17px;
    }

    .nested-column3 > p {
        font-size: 18px;
        margin-top: 17px;
    }


    .nested-column4 {
        display: flex;
        align-items: center; /* Vertically centers the text */
        justify-content: flex-start; /* Aligns content to the right */
        text-align: start; /* Aligns block-level text to the right */
        padding-right: 0px; /* Optional: Adds some space between the text and the right edge */
        height: 100%;
        border-radius: 20px;
        width: 100%; /* Ensure it stretches across the parent container */
        /*background-color: #f9f9f9;*/ /* Optional: Add a background for better visualization */
    }

    .toon_locationicon {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 18px 0 0 8px;
    }

    .toon_locationicon2 {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 24px 0 0 8px;
    }
}


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

    .custom-card {
        height: 62px;
    }

    .tooniconsiamicon {
        width: 60%;
        max-width: 160px;
        height: auto;
        margin-top: 10px;
    }

    .column-titles > .t1 {
        margin-left: 10px;
        /*        background-color: red;*/
        text-align: center;
    }

    .column-titles > .t2 {
        margin-left: 29px;
        /*        background-color: red;*/
        text-align: right;
    }

    .column-titles > .t3 {
        margin-left: -12px;
        margin-right: 32px;
        /*        background-color: red;*/
        text-align: left;
    }




    .Sub_boatex_text2 {
        margin: 12px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 20%;
        font-size: 22px;
        width: 100%;
        max-width: 180px;
    }

    .Sub_boatex_text21 {
        margin: 6px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 25%;
        font-size: 22px;
        width: 100%;
        max-width: 200px;
    }

    .column-titles {
        font-size: 13px;
    }


    .nested-column2 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 15px 0 0 5px;
    }

    .nested-column3 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 8px 0 0 5px !important;
    }


    .nested-column2 > p {
        font-size: 18px;
        margin-top: 17px;
    }

    .nested-column3 > p {
        font-size: 18px;
        margin-top: 17px;
    }


    .nested-column4 {
        display: flex;
        align-items: center; /* Vertically centers the text */
        justify-content: flex-start; /* Aligns content to the right */
        text-align: start; /* Aligns block-level text to the right */
        padding-right: 0px; /* Optional: Adds some space between the text and the right edge */
        height: 100%;
        border-radius: 20px;
        width: 100%; /* Ensure it stretches across the parent container */
        /*background-color: #f9f9f9;*/ /* Optional: Add a background for better visualization */
    }
    .toon_locationicon {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 18px 0 0 8px;
    }

    .toon_locationicon2 {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 24px 0 0 8px;
    }

}


@media (min-width: 769px) and (max-width: 1024px) {

    .custom-card {
        height: 62px;
    }

    .tooniconsiamicon {
        width: 60%;
        max-width: 160px;
        height: auto;
        margin-top: 10px;
    }

    .column-titles > .t1 {
        margin-left: 20px;
        /*        background-color: red;*/
        text-align: start;
    }

    .column-titles > .t2 {
        margin-left: 29px;
        /*        background-color: red;*/
        text-align: right;
    }

    .column-titles > .t3 {
        margin-left: -12px;
        margin-right: 62px;
        /*        background-color: red;*/
        text-align: left;
    }




    .Sub_boatex_text2 {
        margin: 12px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 20%;
        font-size: 24px;
        width: 100%;
        max-width: 380px;
    }

    .Sub_boatex_text21 {
        margin: 6px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 25%;
        font-size: 24px;
        width: 100%;
        max-width: 380px;
    }

    .column-titles {
        font-size: 20px;
    }


    .nested-column2 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 15px 0 0 5px;
    }

    .nested-column3 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 1px 0 0 5px !important;
    }


    .nested-column2 > p {
        font-size: 22px;
        margin-top: 17px;
    }

    .nested-column3 > p {
        font-size: 22px;
        margin-top: 17px;
    }


    .nested-column4 {
        display: flex;
        align-items: center; /* Vertically centers the text */
        justify-content: flex-start; /* Aligns content to the right */
        text-align: start; /* Aligns block-level text to the right */
        padding-right: 0px; /* Optional: Adds some space between the text and the right edge */
        height: 100%;
        border-radius: 20px;
        width: 100%; /* Ensure it stretches across the parent container */
        /*background-color: #f9f9f9;*/ /* Optional: Add a background for better visualization */
    }
    .toon_locationicon {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 18px 0 0 38px;
    }

    .toon_locationicon2 {
        width: 13px;
        height: 23px;
        cursor: pointer;
        margin: 24px 0 0 38px;
    }
}
@media (min-width: 1025px) and (max-width: 1224px) {
    .custom-card {
        height: 102px;
    }

    .tooniconsiamicon {
        width: 100%;
        max-width: 360px;
        height: auto;
        margin-top: 10px;
    }

    .column-titles > .t1 {
        margin-left: 13px;
        /*        background-color: red;*/
        text-align: left;
    }

    .column-titles > .t2 {
        margin-left: 89px;
        /*        background-color: red;*/
        text-align: center;
    }

    .column-titles > .t3 {
        margin-left: -12px;
        margin-right: 32px;
        /*        background-color: red;*/
        text-align: left;
    }




    .Sub_boatex_text2 {
        margin: 12px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 20%;
        font-size: 38px;
        width: 100%;
        max-width: 380px;
    }

    .Sub_boatex_text21 {
        margin: 6px 0 0 5px;
        font-weight: bold;
        /*        position: relative;*/
        bottom: 25%;
        font-size: 38px;
        width: 100%;
        max-width: 580px;
    }

    .column-titles {
        font-size: 23px;
    }


    .nested-column2 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 88px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 15px 0 0 5px;
    }

    .nested-column3 {
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
        width: 100%;
        max-height: 100%;
        height: 88px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 15px;
        margin: 8px 0 0 5px !important;
    }


    .nested-column2 > p {
        font-size: 32px;
        margin-top: 17px;
    }

    .nested-column3 > p {
        font-size: 32px;
        margin-top: 17px;
    }


    .nested-column4 {
        display: flex;
        align-items: center; /* Vertically centers the text */
        justify-content: flex-start; /* Aligns content to the right */
        text-align: start; /* Aligns block-level text to the right */
        padding-right: 0px; /* Optional: Adds some space between the text and the right edge */
        height: 100%;
        border-radius: 20px;
        width: 100%; /* Ensure it stretches across the parent container */
        /*background-color: #f9f9f9;*/ /* Optional: Add a background for better visualization */
    }

    .toon_locationicon {
        width: 25px;
        height: 43px;
        cursor: pointer;
        margin: 18px 0 0 68px;
    }

    .toon_locationicon2 {
        width: 25px;
        height: 43px;
        cursor: pointer;
        margin: 18px 0 0 68px;
    }

    footer p {
        font-size: 32px;
    }
}

    @media (min-width: 1225px) {
        .custom-card {
            height: 102px;
        }

        .tooniconsiamicon {
            width: 100%;
            max-width: 360px;
            height: auto;
            margin-top: 10px;
        }

        .column-titles > .t1 {
            margin-left: 13px;
            /*        background-color: red;*/
            text-align: left;
        }

        .column-titles > .t2 {
            margin-left: 189px;
            /*        background-color: red;*/
            text-align: center;
        }

        .column-titles > .t3 {
            margin-left: -12px;
            margin-right: 52px;
            /*        background-color: red;*/
            text-align: left;
        }




        .Sub_boatex_text2 {
            margin: 12px 0 0 5px;
            font-weight: bold;
            /*        position: relative;*/
            bottom: 20%;
            font-size: 38px;
            width: 100%;
            max-width: 380px;
        }

        .Sub_boatex_text21 {
            margin: 6px 0 0 5px;
            font-weight: bold;
            /*        position: relative;*/
            bottom: 25%;
            font-size: 38px;
            width: 100%;
            max-width: 580px;
        }

        .column-titles {
            font-size: 23px;
        }


        .nested-column2 {
            background-color: #000;
            border: 1px solid #000;
            color: #fff;
            width: 100%;
            max-height: 100%;
            height: 88px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-radius: 15px;
            margin: 15px 0 0 5px;
        }

        .nested-column3 {
            background-color: #000;
            border: 1px solid #000;
            color: #fff;
            width: 100%;
            max-height: 100%;
            height: 88px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-radius: 15px;
            margin: 8px 0 0 5px !important;
        }


        .nested-column2 > p {
            font-size: 32px;
            margin-top: 17px;
        }

        .nested-column3 > p {
            font-size: 32px;
            margin-top: 17px;
        }


        .nested-column4 {
            display: flex;
            align-items: center; /* Vertically centers the text */
            justify-content: flex-start; /* Aligns content to the right */
            text-align: start; /* Aligns block-level text to the right */
            padding-right: 0px; /* Optional: Adds some space between the text and the right edge */
            height: 100%;
            border-radius: 20px;
            width: 100%; /* Ensure it stretches across the parent container */
            /*background-color: #f9f9f9;*/ /* Optional: Add a background for better visualization */
        }

        .toon_locationicon {
            width: 25px;
            height: 43px;
            cursor: pointer;
            margin: 18px 0 0 68px;
        }

        .toon_locationicon2 {
            width: 25px;
            height: 43px;
            cursor: pointer;
            margin: 18px 0 0 68px;
        }

        footer p {
            font-size: 32px;
        }
    }



    /*------------------------------------------------------Modal ----------------------------------------------*/



    .modal {
        display: none; /* Default hidden */
        position: fixed;
        z-index: 1050; /* Bootstrap uses 1050 for modals */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    }

    .modal-dialog {
        position: relative;
        max-width: 500px;
        margin: auto;
        pointer-events: none;
    }

    .modal-dialog-centered {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; /* Ensures vertical centering */
    }

    .modal-content {
        background-color: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        animation: fadeIn 0.3s ease-in-out;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #dee2e6;
    }

    .modal-body {
        text-align: left;
        padding: 1rem 1.5rem;
    }



    .modal-footer {
        display: flex;
        justify-content: flex-end;
        padding: 0.75rem 1.5rem;
        border-top: 1px solid #dee2e6;
    }

    /* Add fade-in effect */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .btn-close {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: #000;
        cursor: pointer;
    }

    /* Adjustments for Small Screens */
    @media (min-width: 390px) and (max-width: 480px) {

        .modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 99%;
            margin-right: 5px;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-dialog {
            max-width: 90%; /* Shrink the modal width for smaller screens */
            padding: 0.5rem; /* Add spacing around the modal */
        }

        .modal-content {
            padding: 1rem; /* Adjust inner padding for smaller screens */
            margin-bottom: 200px; /* Adjust margin-bottom for mobile */
        }

        .modal-header,
        .modal-body,
        .modal-footer {
            padding: 0.75rem 1rem; /* Compact padding for all modal sections */
        }
    }

    @media (min-width: 300px) and (max-width: 389px) {



        .modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 95%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-dialog {
            max-width: 90%; /* Shrink the modal width for smaller screens */
            padding: 0.5rem; /* Add spacing around the modal */
        }

        .modal-content {
            padding: 1rem; /* Adjust inner padding for smaller screens */
            margin-bottom: 100px; /* Adjust margin-bottom for mobile */
        }

        .modal-header,
        .modal-body,
        .modal-footer {
            padding: 0.75rem 1rem; /* Compact padding for all modal sections */
        }
    }


    /*-----------------------------------button ------------------------------*/

    .btn-outline-secondary {
        border-color: #d1a32c !important; /* Change border color */
        color: #d1a32c !important; /* Change text color */
        border-color: #d1a32c !important;
        padding: 10px 20px !important;
    }

        .btn-outline-secondary:hover {
            background-color: #d1a32c !important; /* Background color on hover */
            color: white !important; /* Text color on hover */
            border-color: #d1a32c !important;
        }

    /* Custom gradient for btn btn-secondary */
    .gradient-button {
        background: linear-gradient(90deg, #c9af62, #d1a32c) !important; /* Red-500 to Blue-400 */
        color: white; /* Text color */
        border: 1px solid #d1a32c !important; /* Border to match gradient */
    }

        .gradient-button:hover {
            background: linear-gradient(90deg, #c9af62, #d1a32c) !important; /* Darker red-500 to dark blue-400 */
            color: white !important; /* Text color on hover */
        }

    .btn.btn-secondary {
        background: linear-gradient(to right, #c9af62, #d1a32c); /* Gradient from purple to blue */
        border: none; /* Removes border */
        color: white; /* Ensures text is visible */
        padding: 10px 20px;
        border-radius: 5px; /* Rounds the button edges */
        transition: background 0.3s ease; /* Smooth hover effect */
    }

        .btn.btn-secondary:hover {
            background: linear-gradient(to right, #d1a32c, #c9af62); /* Reverses gradient on hover */
        }