/*
Theme Name: CateringPrasmanan
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 2.0
License: 
License URI: 
Text Domain: cateringprasmanan
Tags: 
*/

body {
background-color: #a3a3a3;
color: #2e2e2e;
font-size: 1rem;
font-style: normal;
font-weight: normal;
line-height: 1.6;
margin: 0;
padding-top: 4.5rem;
}

img {
width: 100%;
height: auto;
border-radius: 0.5rem;
}

p {
margin-bottom: 1.5rem;
}

p:last-child {
margin-bottom: 0;
}

a {
color: #6e6e6e;
text-decoration: none;
}

a:hover, 
a:focus {
color: #4caf50;
text-decoration: none;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.h1, 
.h2, 
.h3, 
.h4, 
.h5, 
.h6 {
color: #2e2e2e;
}

h1, 
.h1 {
font-size: 2.5rem;
}

h2, 
.h2 {
font-size: 2rem;
}

h3, 
.h3 {
font-size: 1.75rem;
}

h4, 
.h4 {
font-size: 1.5rem;
}

h5, 
.h5 {
font-size: 1.25rem;
}

h6, 
.h6 {
font-size: 1rem;
}

h1, 
h2, 
h3, 
.h1, 
.h2, 
.h3 {
font-weight: bold;
}

table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}

th, 
td {
padding: 0.75rem 1rem;
border: 1px solid #6e6e6e;
}

th {
background-color: #556B2F;
color: #ffffff;
text-align: center;
font-size: 1.25rem;
font-weight: bold;
}

td {
background-color: #ffffff;
color: #2e2e2e;
text-align: left;
font-size: 1rem;
}

.table-hover tr:hover {
background-color: #a8d5ba;
color: #2e2e2e;
}

mark {
background-color: #a8d5ba;
color: #2e2e2e;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
}

.navbar {
background-color: #2e2e2e !important;
color: #ffffff !important;
font-size: 1rem;
}

.navbar-brand {
color: #ffffff !important;
font-size: 1.25rem;
font-weight: bold;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
transition: background-color 0.3s, color 0.3s;
}

.navbar-brand:hover {
color: #4caf50 !important;
}

.nav-link {
color: #ffffff !important;
text-decoration: none;
transition: color 0.3s;
}

.nav-link:hover {
color: #4caf50 !important;
}

.navbar-toggler {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 3rem;
height: 3rem;
border-radius: 0.5rem;
padding: 0.5rem;
background-color: #e0e0e0;
border: 1px solid #6e6e6e;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
}

.navbar-toggler:hover {
background-color: #4caf50;
}

.icon-bar {
width: 100%;
height: 0.5rem;
border-radius: 0.25rem;
background-color: #000000;
}

.navbar-toggler .icon-bar:not(:last-child) {
margin-bottom: 0.25rem;
}

.navbar-toggler .icon-bar:last-child {
margin-bottom: 0;
}

.header {
background-color: #6e6e6e !important;
color: #ffffff !important;
margin-top: 5rem;
padding: 6rem 0;
text-align: center;
border-radius: 0.5rem;
border: 0.125rem solid #ffffff;
line-height: 1;
}

.title {
font-size: 3rem;
font-weight: bold;
color: #ffffff;
text-shadow: 
1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
2px 2px 0.25px rgba(0, 0, 0, 0.7);
display: inline-block;
margin-bottom: 1rem;
}

.header p {
color: #000000;
font-size: 1.5rem;
}

.header a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s;
}

.header a:hover {
color: #e0e0e0;
text-decoration: none;
}

@media (max-width: 768px) {
.header {
padding: 4rem 0;
}

.title {
font-size: 2rem;
}

.header p {
font-size: 1.25rem;
}
}

.breadcrumb {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.75rem 1rem;
background-color: #e0e0e0;
color: #2e2e2e;
border: 1px solid #6e6e6e;
border-radius: 0.25rem;
list-style: none;
font-size: 90%;
font-weight: bold;
}

.breadcrumb li {
display: inline-block;
}

.breadcrumb > li {
padding-left: 0.5rem;
}

.breadcrumb > li + li:before {
padding-right: 0.5rem;
content: "/\00a0";
}

.breadcrumb a {
color: #6e6e6e;
text-decoration: none;
}

.breadcrumbs a:hover {
color: #4caf50;
text-decoration: none;
}

.breadcrumb-item.active {
color: #2e2e2e;
}

.d-flex {
display: flex;
flex-wrap: nowrap;
}

.content, 
.sidebar {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
border: 1px solid #6e6e6e;
border-radius: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 2rem;
}

.content {
background-color: #f4f4f4 !important;
color: #2e2e2e !important;
font-size: 1rem;
}

.post-thumbnail, 
.post-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
border: none;
border-radius: 0.25rem;
padding: 1.5rem;
}

.post-meta {
color: #6e6e6e;
font-size: 0.9em;
font-weight: bold;
border-top: 1px solid #6e6e6e;
padding-top: 0.5rem;
margin-top: 1rem;
}

.read-more {
background-color: #6e6e6e;
color: #ffffff;
border-radius: 0.25rem;
border: 1px solid #2e2e2e;
text-decoration: none;
font-weight: bold;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}

.read-more:hover {
background-color: #4caf50;
color: #ffffff;
}

.post-entry {
text-align: justify !important;
}

.post-edit-link {
background-color: #e0e0e0;
color: #2e2e2e;
border-radius: 0.25rem;
border: 1px solid #6e6e6e;
text-decoration: none;
padding: 0.75rem 1rem;
transition: background-color 0.3s, color 0.3s;
}

.post-edit-link:hover {
background-color: #4caf50;
color: #000000;
}

.next-post a, 
.prev-post a {
background-color: #2e2e2e;
color: #ffffff;
border-radius: 0.25rem;
border: 1px solid #6e6e6e;
text-decoration: none;
font-weight: bold;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}

.next-post a:hover, 
.prev-post a:hover {
background-color: #4caf50;
color: #ffffff;
}

.pagination {
display: flex;
justify-content: center;
padding: 1rem 0;
list-style: none;
}

.pagination li:not(:last-child) {
margin-right: 2rem;
}

.pagination li:last-child {
margin-right: 0;
}

.pagination li a {
color: #4caf50;
text-decoration: none;
border: none;
font-weight: bold;
padding: 0.75rem 1rem;
transition: background-color 0.3s, color 0.3s;
}

.pagination li a:hover {
background-color: #556B2F;
color: #ffffff;
border: 1px solid #6e6e6e;
border-radius: 0.25rem;
}

.pagination [aria-current] {
background-color: #6e6e6e;
color: #ffffff;
border: 1px solid #6e6e6e;
}

.sidebar {
background-color: #e0e0e0;
color: #2e2e2e;
}

.custom-menu h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #6e6e6e;
}

.custom-menu ul {
list-style: none;
padding-left: 0;
}

.custom-menu li {
margin-bottom: 0.5rem;
}

.custom-menu a {
background-color: #6e6e6e;
color: #ffffff;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
border: 1px solid #2e2e2e;
text-decoration: none;
display: block;
transition: background-color 0.3s, color 0.3s;
}

.custom-menu a:hover {
background-color: #4caf50;
color: #ffffff;
text-decoration: none;
border: 1px solid #6e6e6e;
}

.footer {
width: 100%;
background-color: #2e2e2e;
color: #ffffff;
border-top: 4px solid #6e6e6e;
padding: 1rem;
text-align: center;
font-size: 0.875rem;
}

.footer a {
color: #ffffff;
text-decoration: none;
}

.footer a:hover {
color: #e0e0e0;
text-decoration: underline;
}

#back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
display: none;
background-color: #6e6e6e;
color: #ffffff;
border-radius: 50%;
border: 1px solid #6e6e6e;
width: 3rem;
height: 3rem;
text-align: center;
align-items: center;
justify-content: center;
line-height: 3rem;
font-size: 1.5rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
text-decoration: none;
z-index: 9999;
}

#back-to-top:hover {
background-color: #4caf50;
color: #000000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#back-to-top span {
line-height: 3rem;
}

.click-to-action, 
.skip {
background-color: #556B2F;
color: #ffffff;
border-radius: 0.25rem;
border: 1px solid #2e2e2e;
text-decoration: none;
font-weight: bold;
padding: 0.75rem 1rem;
cursor: pointer;
transition: background-color 0.3s;
}

.btn-group .skip:not(:last-child) {
margin-right: 2rem;
}

.btn-group .skip:last-child {
margin-right: 0;
}

.click-to-action:hover, 
.skip:hover {
background-color: #6e6e6e;
color: #ffffff;
}

.list-of-button ul {
list-style-type: none;
padding-left: 0;
}

.list-of-button li {
margin-bottom: 0.5rem;
}

.list-of-button a {
background-color: #556B2F;
color: #ffffff;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
border: 1px solid #2e2e2e;
text-decoration: none;
display: block;
transition: background-color 0.3s;
}

.list-of-button a:hover {
background-color: #6e6e6e;
color: #ffffff;
}

.catering-menu a, 
.list-of-menu a {
color: #4caf50;
text-decoration: none;
}

.catering-menu a:hover, 
.catering-menu a:focus, 
.list-of-menu a:hover, 
.list-of-menu a:focus {
color: #6e6e6e;
text-decoration: none;
}

.list-of-option {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
border: 1px solid #6e6e6e;
border-radius: 0.5rem;
padding: 1.5rem;
}

h1, 
h2, 
h3, 
img, 
table, 
.h1, 
.h2,
.h3, 
.header, 
.header p, 
.breadcrumb, 
.content, 
.post-thumbnail, 
.post-content, 
.single-post, 
.post-entry, 
.pagination, 
.click-to-action, 
.skip, 
.list-of-button, 
.list-of-option, 
.sidebar, 
.custom-menu {
margin-bottom: 2rem;
}

h4, 
h5, 
h6, 
.h4, 
.h5, 
.h6 {
margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
.d-flex {
flex-wrap: wrap;
}

.list-of-option, 
.content, 
.sidebar {
flex: 100%;
}
}