/* Main Color scheme
   Edit website colors here only.
*/
:root {
     --site-primary: #02462E;
     --site-secondary: #02462E;
     --site-light: #FEC700;
     --site-light-rgb: 254, 199, 0;
     --site-transparent: rgba(0, 0, 0, 0);
     --site-page-bg: #FEC700;
     --site-surface: #ffffff;
     --site-text: #464646;
     --site-heading: #02462E;
     --site-muted-text: #4e4e4e;
     --site-border: #dddddd;
     --site-on-color: #ffffff;
     --site-hero-text: #ffffff;
     --site-hero-overlay: rgba(2, 70, 46, 0.78);
}

/* Base website colors */
body {
     background: var(--site-page-bg);
     color: var(--site-text);
}

h3,
h4,
.navbar-default .navbar-nav>li>a,
.navbar-info,
a.list-group-item {
     color: var(--site-heading);
}

h5,
h6,
.dropdown-menu>li>a,
.glyph-icon {
     color: var(--site-muted-text);
}

#preloader,
.menu-body {
     background: var(--site-surface);
}

.text-light,
.navbar-default .navbar-nav>li:hover a,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.social-media i,
.badge-default,
.pagination>li>a:hover,
.breadcrumb,
.breadcrumb a,
.a.list-group-item:focus,
a.list-group-item:hover,
button.list-group-item:focus,
button.list-group-item:hover,
#elements h3.sub-header {
     color: var(--site-on-color)!important;
}

.navbar-default .navbar-toggle .icon-bar {
     background-color: var(--site-on-color);
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
     border-color: var(--site-border);
}

.ls-bg-wrap:after,
.ls-slide-transition-wrapper:before {
     background: -moz-linear-gradient(left, var(--site-hero-overlay) 0%, var(--site-transparent) 100%)!important;
     background: -webkit-linear-gradient(left, var(--site-hero-overlay) 0%, var(--site-transparent) 100%)!important;
     background: linear-gradient(to right, var(--site-hero-overlay) 0%, var(--site-transparent) 100%)!important;
}

.header-text h1,
.header-text span,
.header-p,
.hero-subtitle {
     color: var(--site-hero-text);
}

/* Pink */
 .btn.btn-secondary,.progress-bar-danger,.blog-tags a:hover, .social-media i,.label-default,.btn-default:active:hover, .post-slide .post-date,.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover, .nav.nav-tabs li:nth-child(even),.breadcrumb,figure.team:hover i, .btn:hover,.btn-default:hover,.back-to-top i , .pager li>a:focus, .pager li>a:hover,a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover, .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover, .pagination>li>a:hover,.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover,.date-category,.navbar-default .navbar-nav>li>a::after , .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .spinner > div,.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover, .bg-color1,.btn:before,.nav-pills>li>a:focus, .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav-pills>li>a:hover{
     background: var(--site-primary);
}
 .post-info i, .table>thead>tr>th,.blog-single h2 a:hover, .contact-icon .top-icon, .box-hover i,.post-slide .post-title a:hover, .testimonial .testimonial-title,.team h4,.menu-item-price,.post-slide .post-bar li i, h1,h2,.panel-heading a:hover,.panel-heading a,blockquote:before,.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, a:hover,a:focus,.alert:after, .alert:before, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .owl-prev i:hover, .owl-next i:hover,ul.custom li:before,.margin-icon,.brand,.brand i{
     color: var(--site-primary);
}
 .post-slide .post-review, .testimonial-pic>img, figure.team img,.content-box.home,.section-heading:after,.service-icon img,.contact-icon,.btn:hover,.btn-default:hover{
     border-color: var(--site-primary);
}
/* orange */
 a, figure.team-style3 i, .nav.nav-tabs > li:focus > a, .btn,.btn-default,.testimonial .content:before {
     color: var(--site-secondary);
}
 .progress-bar-warning,#elements h3.sub-header, .social-media i:hover,.navbar-toggle,.back-to-top i:hover,.navbar-nav>li>.dropdown-menu, .btn.btn-secondary:hover,.btn.btn-secondary:focus, .navbar-default .navbar-nav>li:hover, .btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active,.btn-primary.focus, .btn-primary:focus,.btn-default.focus, .btn-default:focus,.btn,.btn-default, .nav.nav-tabs li:nth-child(odd), .pager li>a, .pager li>span,.blog-tags a,.nav-pills>li>a ,.owl-prev i, .owl-next i,.owl-theme .owl-dots .owl-dot span:hover:before , .owl-theme .owl-dots .owl-dot.active span:before{
     background-color: var(--site-secondary);
}
 h3.title:after, .menu-item-name,.post-slide .post-bar, .btn,.btn-default, .form-control:focus,.btn-primary.focus, .btn-primary:focus{
     border-color: var(--site-secondary);
}
/* light yellow */
 .table-striped>tbody>tr:nth-of-type(odd), .nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .pagination>li>a, .pagination>li>span, .pagination>li>a:focus, .progress-bar-info, .well,.list-group-item,.dropdown-menu, .alert-info,.contact-info,.panel-heading,.box-hover i.circle,.bg-light, #sidebar{
     background-color: var(--site-light);
}
 .gradient-overlay{
     background: -moz-linear-gradient(bottom, rgba(var(--site-light-rgb), 0.65) 0%, var(--site-transparent) 100%)!important;
    /* FF3.6-15 */
     background: -webkit-linear-gradient(bottom, rgba(var(--site-light-rgb), 0.65) 0%, var(--site-transparent) 100%)!important;
    /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to top, var(--site-light) 0%, var(--site-transparent) 100%)!important;
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
 .gradient-overlay.top-to-bottom{
     background: -moz-linear-gradient(top, rgba(var(--site-light-rgb), 0.85) 0%, var(--site-transparent) 90%)!important;
    /* FF3.6-15 */
     background: -webkit-linear-gradient(top, rgba(var(--site-light-rgb), 0.85) 0%, var(--site-transparent) 90%)!important;
    /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, var(--site-light) 0%, var(--site-transparent) 90%)!important;
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.btn,
.btn-default,
.btn-primary {
     color: var(--site-on-color)!important;
}

/* Thai typography */
body,
p,
ul,
ol,
.small-text,
.navbar-default .navbar-nav>li>a,
.navbar-info,
.btn,
.contact-icon-info p {
     font-family: 'TH Sarabun New', 'TH SarabunPSK', 'Sarabun', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-subtitle {
     font-family: 'Charm', 'TH Sarabun New', serif!important;
     letter-spacing: 0;
}

h1,
h2,
h3 {
     font-weight: 700;
}

body,
p,
ul,
ol {
     font-size: 18px;
}

.navbar-default .navbar-nav>li>a,
.small-text {
     font-size: 16px;
}

.branch-info {
     padding: 12px 0;
     border-top: 1px solid rgba(2, 70, 46, 0.18);
}

.branch-info:first-child {
     border-top: 0;
}

.branch-info .branch-title {
     color: var(--site-primary);
     font-weight: 700;
     margin-bottom: 3px;
}

.story-photo-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin-bottom: 24px;
}

.story-photo-grid img,
.signature-photo-grid img {
     width: 100%;
     aspect-ratio: 4 / 3;
     object-fit: cover;
     border: 4px solid #fff;
     box-shadow: 0 8px 18px rgba(2, 70, 46, 0.12);
}

.signature-photo-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
}

.signature-photo-grid img {
     aspect-ratio: 1 / 1;
}

/* Theme divider */
.divider-top.divider-home {
     background: var(--site-light)!important;
}

.divider-top.divider-home:before,
.divider-top.divider-home:after {
     background: var(--site-light)!important;
}

/* Contact cards */
.contact-boxes .box-hover {
     background: var(--site-surface);
     border: 1px solid rgba(2, 70, 46, 0.18);
     border-top: 5px solid var(--site-light);
     box-shadow: 0 12px 28px rgba(2, 70, 46, 0.12);
}

.contact-boxes .box-hover:hover {
     border-color: rgba(2, 70, 46, 0.35);
     box-shadow: 0 16px 34px rgba(2, 70, 46, 0.18);
}

.contact-boxes .box-hover.icon i {
     width: 62px;
     height: 62px;
     line-height: 62px;
     margin: 0 auto 18px;
     border-radius: 50%;
     background: var(--site-primary);
     color: var(--site-on-color);
     box-shadow: 0 8px 18px rgba(2, 70, 46, 0.22);
}

.contact-boxes .contact-icon-info h5 {
     color: var(--site-heading);
     margin-bottom: 12px;
}

.contact-boxes .contact-icon-info p {
     color: #24362f;
     line-height: 1.55;
}

@media (max-width: 767px) {
     .story-photo-grid,
     .signature-photo-grid {
          grid-template-columns: 1fr;
     }
}