/**
                          ,
   ,-.       _,---._ __  / \
  /  )    .-'       `./ /   \
 (  (   ,'            `/    /|
  \  `-"             \'\   / |
   `.              ,  \ \ /  |
    /`.          ,'-`----Y   |
   (            ;        |   '
   |  ,-.    ,-'         |  /
   |  | (   |            | /
   )  |  \  `.___________|/
   `--'   `--'
    I'm aitji (also known as **Suriya Inchoo**)
    the host of the following websites
    * https://aitji.is-a.dev
    * https://pr-thatako.ddns.net or http://pr.thatako.ac.th

    If you're interested in contributing to the project,
    you're welcome to reach out to me on Discord my username is "aitji".  
    You can also submit an inquiry through the support ticket system available at https://aitji.is-a.dev/discord

    Further information about the project and licensing
    can be found at "https://thatako-council.com/LICENSE"

    Sincerely,  
    Suriya Inchoo (aitji)
*/

@import url("../styles/root.css");
@import url("../styles/nav.css");
@import url("../styles/home.css");

body {
    font-family: Prompt, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    font-size: 16px;
    word-wrap: break-word;
    line-height: 1.6;
}

.copy {
    color: var(--text-color);
}

.strong {
    font-weight: bold;
    font-weight: 700;
    color: var(--primary-color);
}

.un-strong {
    font-weight: normal;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

.text-mobile-left {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.mobile-hidden {
    display: block;
}

.pc-hidden {
    display: none;
}

footer {
    background-color: var(--primary-color);
    color: white;
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}

footer h5 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

footer h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-color);
}

footer ul {
    list-style: none;
    padding-left: 0;
}

footer ul li {
    margin-bottom: 0.5rem;
}

footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: white;
    text-decoration: underline;
}

#backToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition);
}

#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTopBtn.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) rotate(-360deg);
}

.circle {
    border-radius: 50%;
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    overflow: hidden;
    margin-bottom: 30px;
}

.card:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

.card-header {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-bottom: none;
}



.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .form-check-input {
        margin-top: 5px;
    }

    .mobile-hidden {
        display: none;
    }

    .pc-hidden {
        display: block;
    }

    .text-mobile-left {
        text-align: left !important;
    }
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.hid-flow {
    overflow: hidden;
}