html {scroll-behavior: smooth;}
body {
    font-family: 'sarabun', sans-serif;
    color: var(--text-dark);
    padding-top: 60px; /* Space for fixed navbar */
    font-size: 1rem;
}
h1{font-family: 'srinakharinwirot', sans-serif;font-size: 2.5rem;}
h2{font-family: 'srinakharinwirot', sans-serif;font-size: 2.2rem;}
h3{font-family: 'srinakharinwirot', sans-serif;font-size: 2.0rem;}
h4{font-family: 'srinakharinwirot', sans-serif;font-size: 1.7rem;}
h5{font-family: 'srinakharinwirot', sans-serif;font-size: 1.5rem;}
h6{font-family: 'srinakharinwirot', sans-serif;font-size: 1.2rem;}
footer a{color: var(--swu-white);}
section {padding-top: 40px 0;}
.spacegap4{margin-top: 4rem;}
.spacegap3{margin-top: 3rem;}
.spacegap2{margin-top: 2rem;}
.spacegap1{margin-top: 1rem;}

.bg-primary-blue { background-color: var(--primary-blue) !important; }
.bg-gray { background-color: var(--secondary-gray) !important; }
.bg-brown { background-color: var(--secondary-brown) !important; }
.bg-light-blue { background-color: var(--light-blue) !important; }

.text-blue { color: var(--primary-blue) !important; }
.text-red { color: var(--swu-red) !important; }
.text-white { color: var(--swu-white) !important; }
.text-light { color: var(--text-light) !important; }
.text-gray { color: var(--secondary-gray) !important; }
.text-brown { color: var(--secondary-brown) !important; }
.text-light-blue { color: var(--light-blue) !important; }
.text-dark { color: var(--text-dark) !important; }

/* Back to Top Button Styles */
#toTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    border: none;
    outline: none;
    background-color: var(--primary-blue);
    color: var(--swu-white);
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
}

#toTopBtn:hover {
    background-color: var(--primary-blue);
}

.nav-link {color: var(--text-white) !important;}
.system-name{font-size:2.5rem;}
.swu-logo{height:60px;}

.btn-primary-custom {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--text-white);
    border-radius: 0.5rem;
}
.btn-primary-custom:hover {
    background-color: #1a224f;
    border-color: #1a224f;
}

.header-banner {
    background-color: var(--primary-blue);
}
.carousel-item img {
    width: 100%;
    object-fit: contain;
}
@media (max-width: 767.98px) {
	.carousel-item img {margin-top:15px;}
    .system-name{font-size:1.9rem;}
    .swu-logo{height:50px;}
}