:root {
--primary-color: #143333;
--secondary-color: #D3A246;
--secondary-light-color: #D8AE64;
--secondary-shadow: #ffd790;
--grey-color: #FFFFFF99;
--grey-light-color: #e5e3e0;
--grey-light-color-2: #D9D9D9;
--site-bg-color: #fff;
--site-bg-grey: #FAFAFA;
}
body {
font-family: 'Montserrat', 'Noto Sans Thai', Arial, Helvetica, sans-serif;    
font-size: 16px;
background-color: var(--site-bg-color);
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', 'Noto Sans Thai';
margin: 0;
}
p {
margin:0; }
a {
color: #000;
text-decoration: none;
}
.seo-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
section {
padding: 100px 32px;
} .form-label {
font-size: 14px;
font-weight: 600;
}
.form-control {
padding: 10px 12px;
background-color: #00000033;
color: #fff;
font-weight: 300;
border-color: #fff;
border-radius: 10px;
caret-color: #fff;
}
.form-control:focus {
box-shadow: unset;
background-color: #00000033;
color: #fff;
border-color: #fff;
}
.form-control::placeholder {
color:#fff;
opacity: 60%;
}
.shadow-secondary {
box-shadow: 0 0.5rem 1rem var(--secondary-shadow);
}
form label {
font-size: 14px;
} .my-nav {
font-family: 'Montserrat', 'Noto Sans Thai';
font-weight: 400;
font-size: 18px;
padding-left: 32px;
padding-right: 32px;
z-index: 1;
transition: .3s all;
}
.my-nav.scroll {
background-color: var(--site-bg-color);
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0 3px 5px var(--grey-color);
z-index: 3;
}
.my-nav .nav-logo {
height: 48px;
transition: .3s all;
}
.my-nav.scroll .nav-logo {
height: 0;
transform: scale(0);
}
.my-nav .nav-logo-scroll {
display: inline-block;
transform: scale(0);
font-size: 18px;
font-weight: 500;
color: var(--primary-color);
transition: .3s all;
}
.my-nav .nav-logo-scroll img {
height: 30px;
transition: .3s all;
}
.my-nav.scroll .nav-logo-scroll {
transform: scale(1);
}
.my-nav.nav-single {
background: linear-gradient(107.24deg, #143333 0.3%, #D8AE64 132.84%);
transition: all .3s;
}
.my-nav li {
margin-right: 20px;
margin-bottom: 1rem;
}
.my-nav .nav-link {
color: #fff;
}
.navbar-nav .nav-link.show {
color: #fff;
}
.nav-link.dropdown-toggle::after {
width: 12px;
height: 12px;
margin-left: .5rem;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: none;
border-bottom: none;
transform: rotate(135deg);
} .my-nav-menu {
position: relative;
border-radius: 20px;
padding-top: 16px;
padding-bottom: 16px;
}
.dropdown-menu[data-bs-popper] {
left: -40%;
}
.my-nav-menu::before, .my-nav-menu::after {
content: '';
display: block;
position: absolute;
width: 60%;
height: 5px;
background-color: var(--primary-color);
}
.my-nav-menu::before {
top: 0;
left: 20%;
border-radius: 0 0 10px 10px;
}
.my-nav-menu::after {
bottom: 0;
left: 20%;
border-radius: 10px 10px 0 0;
}
.my-nav-menu > li{
margin-right: 0;
}
.my-nav-menu > li > a {
padding: 10px 32px;
}
.my-nav-menu .dropdown-item:focus, 
.my-nav-menu .dropdown-item:hover {
background-color:#D3A24633;
}
.my-nav .contact-us-btn {
display: inline;
width: 100%;
}
.my-nav .contact-us-btn button{
width: 100%;
}
#navbarCollapse .navbar-nav {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #FFFFFF33;
} .my-navbar-toggler {
background-color: transparent;
border: none;
display: inline-block;
cursor: pointer;
outline: none;
box-shadow: none !important;
}
.my-navbar-toggler .bar1, .my-navbar-toggler .bar2, .my-navbar-toggler .bar3 {
width: 30px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.my-nav.scroll .my-navbar-toggler .bar1, .my-nav.scroll .my-navbar-toggler .bar2, .my-nav.scroll .my-navbar-toggler .bar3 {
background-color: var(--bs-body-color);
}
.change .bar1 {
background-color: #fff !important;
transform: translate(0, 9px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
background-color: #fff !important;
transform: translate(0, -9px) rotate(45deg);
}
.social-group {
list-style: none;
padding-left: 0;
} .lang-switcher {
display: flex;
list-style: none;
margin: 0 20px 30px 0;
padding: 0;
}
.lang-switcher > li {
margin: 0;
padding: 0 10px
}
.lang-switcher > li:nth-child(2) {
border-left: 1px solid #fff;
}
.lang-switcher a {
color: #fff;
}
.lang-switcher a.active, .my-nav.scroll .lang-switcher a.active {
color: var(--secondary-color);
} .btn {
padding: 14px 20px 14px 20px;
font-size: 18px;
font-weight: 600;
}
.btn-success {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-success:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
opacity: 80%;
}
.btn-success:active {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
opacity: 100%;
}
.btn-danger {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.btn-danger:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
opacity: 80%;
}
.btn-danger:active {
background-color: var(--secondary-color) !important;
border-color: var(--secondary-color) !important;
opacity: 100%;
} .f-montserrat {
font-family: 'Montserrat';
}
.text-grey {
color: var(--grey-color);
}
.section-title {
font-weight: bold;
font-size: 34px;
line-height: 40px;
letter-spacing: -5%;
}
.section-sub-title {
position: relative;
font-weight: bold;
font-size: 28px;
line-height: 34px;
letter-spacing: -5%;
padding-bottom: 40px;
}
.section-sub-title::after {
content: '';
position: absolute;
bottom: 20px;
left: 0;
width: 100px;
height: 5px;
background: linear-gradient(107.24deg, #143333 0.3%, #D8AE64 132.84%);
}
.text-lawgenix-gradient {
background: linear-gradient(90deg,#2f3b2f,#6b6f4a,#9b8a54);  -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media(min-width: 576px) {
.my-nav .contact-us-btn {
display: flex;
justify-content: center;
}
.my-nav .contact-us-btn button{
width: 75%;
}
}
@media(min-width: 768px) {
.my-nav {
padding-left: 45px;
padding-right: 45px; 
}
.navbar-brand {
width: 80px;
}
.my-nav .nav-logo {
height: 72px;
}
.my-nav .nav-logo-scroll {
font-size: 20px;
}
.my-nav .nav-logo-scroll img {
height: 36px;
}
.my-nav li {
margin-bottom: 0;
}
.my-nav.scroll .nav-link {
color: var(--bs-body-color);
}
.navbar-nav.scroll .nav-link.show {
color: var(--bs-body-color);
}
.my-nav.scroll .nav-link.dropdown-toggle::after {
border-top: 1px solid var(--bs-body-color);
border-right: 1px solid var(--bs-body-color);
}
.my-nav .contact-us-btn {
display: inline;
width: auto;
}
.my-nav .contact-us-btn button{
width: auto;
}
#navbarCollapse .navbar-nav {
margin-bottom: 0;
padding-bottom: 0;
border: none
}
.lang-switcher {
margin: 0 20px 0 0;
}
.my-nav.scroll .lang-switcher > li:nth-child(2) {
border-left: 1px solid var(--bs-body-color);
}
.my-nav.scroll .lang-switcher a {
color: var(--bs-body-color);
}
section {
padding: 100px 45px;
}
.section-title {
font-weight: bold;
font-size: 42px;
line-height: 44px;
letter-spacing: -5%;
}
.section-sub-title {
font-size: 38px;
line-height: 40px;
padding-bottom: 40px;
}
.section-sub-title::after {
height: 8px;
}
}
@media(min-width: 1200px) {
.my-nav {
padding-left: 60px;
padding-right: 60px; 
}
.navbar-brand {
width: 100px;
}
.my-nav .nav-logo {
height: 96px;
}
.my-nav .nav-logo-scroll {
font-size: 24px;
}
.my-nav .nav-logo-scroll img {
height: 48px;
}
section {
padding: 100px 60px;
}
.section-title {
font-weight: bold;
font-size: 48px;
line-height: 50px;
letter-spacing: -5%;
}
.section-sub-title {
font-size: 40px;
line-height: 50px;
padding-bottom: 40px;
}
.section-sub-title::after {
height: 10px;
}
}