* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--parchment);
color: var(--ink);
font-family: sans-serif;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
font-family:sans-serif;
color: var(--navy);
margin: 0 0 .4em 0;
font-weight: 600;
letter-spacing: -.01em;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
/*Slider CSS*/
/*Start Slider*/
/* Basic Slider Styling */
.srs-slider {
position: relative;
width: 100%;
overflow: hidden;
}
.srs-slider .slide {
display: none;
}
.srs-slider .slider-img {
width: 100%;
height: auto;
object-fit: cover;
/* Ensures full image without distortion */
}
/* Arrows Styling */
.srs-slider .slider-arrows button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 18px;
z-index: 1000;
}
.srs-slider .slider-arrows .prev {
left: 10px;
}
.srs-slider .slider-arrows .next {
right: 10px;
}
/* Responsive Design */
@media screen and (max-width: 992px) {
.why-us-counter .title {
text-align: center;
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
margin-bottom: 25px;
color: #fff;
}
}
@media screen and (max-width: 768px) {
.srs-slider .slider-img {
object-position: center;
/* Adjust for mobile and tablet views */
}
.why-us-counter .title {
text-align: center;
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
margin-bottom: 25px;
color: #fff;
}
}
@media screen and (max-width: 576px) {
.srs-slider .slider-arrows button {
font-size: 16px;
padding: 8px;
}
.why-us-counter .title {
text-align: center;
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
margin-bottom: 25px;
color: #fff;
}
}
/*TOP STRIP START*/
.srtop-section {
width: 100%;
height: 6px;
background: #d6a94a;
}
@media (max-width: 575px) {
.srtop-section {
height: 4px;
}
}
/*TOP STRIP END*/
/* =========================================
NAVIGATION
========================================= */
.navi-section {
width: 100%;
background: #16213e5e;
position: relative;
z-index: 9999;
font-family: Arial, Helvetica, sans-serif;
}
.navi-container {
max-width: 1300px;
min-height: 125px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* =========================================
LOGO
========================================= */
.navi-logo {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
flex-shrink: 0;
}
.navi-logo img {
width: 100px;
height: 100px;
object-fit: contain;
display: block;
border-radius: 50%;
}
.navi-brand {
display: flex;
flex-direction: column;
justify-content: center;
}
.brand-small {
color: #ffffff;
font-size: 12px;
line-height: 1.45;
letter-spacing: 1.2px;
font-weight: 500;
}
.brand-name {
margin-top: 5px;
color: #ffffff;
font-family: 'Times New Roman', Times, serif;
font-size: 45px;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
.brand-name span {
color: #d6a94a;
}
/* =========================================
DESKTOP MENU
========================================= */
.navi-menu {
margin-left: auto;
}
.navi-menu > ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 36px;
}
.navi-menu li {
position: relative;
}
.navi-menu > ul > li > a {
display: flex;
align-items: center;
gap: 5px;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.7px;
padding: 30px 0;
transition: color 0.3s ease;
}
.navi-menu > ul > li > a:hover,
.navi-menu > ul > li > a.active {
color: #d6a94a;
}
/* Active underline */
.navi-menu > ul > li > a.active::after {
content: "";
position: absolute;
left: 0;
bottom: 34px;
width: 100%;
height: 2px;
background: #d6a94a;
}
/* Dropdown arrow */
.arrow {
font-size: 17px;
line-height: 1;
margin-top: -15px;
}
/* =========================================
DESKTOP SUBMENU
========================================= */
.submenu {
position: absolute;
top: calc(100% - 25px);
left: 0;
min-width: 235px;
margin: 0;
padding: 10px 0;
list-style: none;
background: #ffffffbf;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease;
}
.has-submenu:hover > .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.submenu li {
width: 100%;
}
.submenu li a {
display: block;
padding: 12px 20px;
color: #111827;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.25s ease;
}
.submenu li a:hover {
background: #f5f5f5;
color: #b88a2b;
padding-left: 25px;
}
/* =========================================
MOBILE BUTTON
========================================= */
.navi-toggle {
width: 44px;
height: 44px;
padding: 8px;
border: 0;
background: transparent;
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
cursor: pointer;
}
.navi-toggle span {
width: 28px;
height: 2px;
display: block;
background: #ffffff;
}
/* =========================================
MOBILE MENU
========================================= */
.navi-mobile {
position: fixed;
top: 0;
right: -100%;
width: min(380px, 88%);
height: 100vh;
background: #080f21;
z-index: 10001;
overflow-y: auto;
transition: right 0.35s ease;
}
.navi-mobile.active {
right: 0;
}
/* Mobile header */
.navi-mobile-header {
height: 85px;
padding: 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #ffffff;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
}
.navi-close {
width: 42px;
height: 42px;
border: 0;
background: transparent;
color: #ffffff;
font-size: 38px;
font-weight: 200;
line-height: 1;
cursor: pointer;
}
/* Mobile links */
.navi-mobile nav > ul {
margin: 0;
padding: 15px 25px 40px;
list-style: none;
}
.navi-mobile nav > ul > li {
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.navi-mobile nav > ul > li > a {
min-height: 55px;
padding: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
}
/* Mobile submenu */
.mobile-submenu > ul {
display: none;
margin: 0;
padding: 0 0 10px 15px;
list-style: none;
}
.mobile-submenu.open > ul {
display: block;
}
.mobile-submenu > ul li a {
display: block;
padding: 11px 0;
color: #c6cad4;
text-decoration: none;
font-size: 12px;
letter-spacing: 0.5px;
}
.mobile-submenu > ul li a:hover {
color: #d6a94a;
}
.mobile-arrow {
color: #d6a94a;
font-size: 20px;
font-weight: 300;
transition: transform 0.25s ease;
}
.mobile-submenu.open .mobile-arrow {
transform: rotate(45deg);
}
/* Overlay */
.navi-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.navi-overlay.active {
opacity: 1;
visibility: visible;
}
/* Prevent page scrolling */
body.navi-menu-open {
overflow: hidden;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1250px) {
.navi-container {
padding: 0 25px;
gap: 20px;
}
.navi-menu > ul {
gap: 20px;
}
.navi-menu > ul > li > a {
font-size: 12px;
}
.navi-logo img {
width: 90px;
height: 90px;
}
.brand-name {
font-size: 27px;
}
}
@media (max-width: 1050px) {
.navi-container {
min-height: 105px;
}
.navi-menu {
display: none;
}
.navi-toggle {
display: flex;
}
.navi-logo img {
width: 82px;
height: 82px;
}
.brand-small {
font-size: 11px;
}
.brand-name {
font-size: 26px;
}
}
@media (max-width: 575px) {
.navi-container {
min-height: 90px;
padding: 0 16px;
}
.navi-logo {
gap: 10px;
}
.navi-logo img {
width: 68px;
height: 68px;
}
.brand-small {
font-size: 8px;
letter-spacing: 0.7px;
}
.brand-name {
font-size: 22px;
margin-top: 4px;
}
.navi-toggle {
width: 40px;
height: 40px;
}
.navi-mobile {
width: 90%;
}
}
/*END NAV*/
/*START ABOUT*/
/* =========================================
ABOUT SECTION
========================================= */
.about-section {
width: 100%;
padding: 20px 5%;
background: #0b1122;
color: #fff;
overflow: hidden;
}
.about-section-container {
max-width: 1450px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 65px;
}
/* =========================================
LEFT IMAGE AREA
========================================= */
.about-section-images {
display: grid;
/* grid-template-columns: 1fr 1fr; */
gap: 22px;
align-items: center;
}
.about-section-img {
width: 100%;
overflow: hidden;
border-radius: 22px;
}
.about-section-img-one {
height: 675px;
}
.about-section-img-two {
height: 675px;
}
.about-section-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-section-img:hover img {
transform: scale(1.04);
}
/* =========================================
RIGHT CONTENT
========================================= */
.about-section-content {
width: 100%;
}
.about-section-tag {
display: flex;
align-items: center;
gap: 9px;
color: #ffffff;
font-size: 17px;
font-weight: 600;
margin-bottom: 20px;
}
.about-section-tag span {
color: #f5b400;
font-size: 22px;
}
/* =========================================
HEADING
========================================= */
.about-section-content h2 {
margin: 0 0 20px;
font-family: sans-serif;
line-height: 1.09;
font-weight: 600;
color: #ffffff;
font-size: 33px;
}
.about-section-content h2 span {
color: #f5b400;
}
.about-section-content h2 em {
color: #ffffff;
font-style: normal;
}
/* =========================================
DESCRIPTION
========================================= */
.about-section-description {
max-width: 720px;
margin: 0 0 40px;
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1.7;
color: #eeeeee;
}
/* =========================================
FEATURE BOXES
========================================= */
.about-section-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-bottom: 48px;
}
.about-section-feature {
min-height: 130px;
padding: 28px 20px;
display: flex;
align-items: center;
gap: 18px;
background: #10213d;
border-radius: 12px;
}
.about-section-feature-icon {
min-width: 45px;
font-size: 36px;
color: #f5b400;
display: flex;
align-items: center;
justify-content: center;
}
.about-section-feature h3 {
margin: 0 0 8px;
font-family: sans-serif;
font-size: 20px;
line-height: 1.3;
color: #f5b400;
}
.about-section-feature p {
margin: 0;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 1.55;
color: #eeeeee;
}
/* =========================================
BOTTOM
========================================= */
.about-section-bottom {
display: flex;
align-items: center;
gap: 35px;
}
/* =========================================
BUTTON
========================================= */
.about-section-btn {
min-width: 190px;
height: 65px;
padding: 8px 9px 8px 28px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 15px;
background: #b87500;
color: #ffffff;
border-radius: 40px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 600;
transition: 0.3s ease;
}
.about-section-btn span {
width: 49px;
height: 49px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #111111;
border-radius: 50%;
font-size: 25px;
transition: 0.3s ease;
}
.about-section-btn:hover {
background: #f5b400;
}
.about-section-btn:hover span {
transform: rotate(45deg);
}
/* =========================================
FOUNDER / CLAWS INFO
========================================= */
.about-section-founder {
display: flex;
align-items: center;
gap: 16px;
}
.about-section-founder-img {
width: 65px;
height: 65px;
overflow: hidden;
border-radius: 50%;
}
.about-section-founder-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-section-founder-info h4 {
margin: 0 0 6px;
font-family: sans-serif;
font-size: 20px;
color: #ffffff;
}
.about-section-founder-info p {
margin: 0;
font-family: Arial, sans-serif;
font-size: 15px;
color: #eeeeee;
}
/* =========================================
LARGE TABLET
========================================= */
@media (max-width: 1100px) {
.about-section {
padding: 70px 4%;
}
.about-section-container {
gap: 40px;
}
.about-section-img-one,
.about-section-img-two {
height: 570px;
}
.about-section-features {
grid-template-columns: 1fr;
}
.about-section-feature {
min-height: 110px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.about-section {
padding: 70px 30px;
}
.about-section-container {
grid-template-columns: 1fr;
gap: 55px;
}
.about-section-images {
max-width: 700px;
margin: 0 auto;
width: 100%;
}
.about-section-img-one,
.about-section-img-two {
height: 600px;
}
.about-section-content {
max-width: 750px;
margin: 0 auto;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.about-section {
padding: 55px 18px;
}
.about-section-container {
gap: 40px;
}
.about-section-images {
/* grid-template-columns: 1fr 1fr; */
gap: 12px;
}
.about-section-img {
border-radius: 15px;
}
.about-section-img-one,
.about-section-img-two {
height: 400px;
}
.about-section-tag {
font-size: 15px;
}
.about-section-content h2 {
font-size: 38px;
line-height: 1.12;
}
.about-section-description {
font-size: 15px;
line-height: 1.65;
margin-bottom: 30px;
}
.about-section-features {
gap: 14px;
margin-bottom: 35px;
}
.about-section-feature {
padding: 22px 17px;
gap: 13px;
}
.about-section-feature-icon {
min-width: 35px;
font-size: 28px;
}
.about-section-feature h3 {
font-size: 18px;
}
.about-section-feature p {
font-size: 14px;
}
.about-section-bottom {
flex-direction: column;
align-items: flex-start;
gap: 25px;
}
.about-section-btn {
width: 190px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 400px) {
.about-section {
padding: 45px 15px;
}
.about-section-images {
gap: 9px;
}
.about-section-img-one,
.about-section-img-two {
height: 330px;
}
.about-section-content h2 {
font-size: 32px;
}
.about-section-feature {
align-items: flex-start;
}
}
/*END ABOUT*/
/*START SERVICE*/
/* =========================================
SERVICE SECTION
========================================= */
.servicelaw-section {
width: 100%;
padding: 20px 20px;
background: #f5f5f3;
}
.servicelaw-section-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.servicelaw-section-header {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 60px;
align-items: center;
margin-bottom: 50px;
}
.servicelaw-section-label {
display: flex;
align-items: center;
gap: 12px;
color: #111;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.servicelaw-section-label-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #111;
border-radius: 50%;
font-size: 18px;
}
.servicelaw-section-heading-wrap h2 {
margin: 0 0 20px;
color: #0b1122;
font-size: 31px;
font-family: sans-serif;
line-height: 1.05;
font-weight: 700;
}
.servicelaw-section-heading-wrap h2 span {
display: block;
color: #777;
}
.servicelaw-section-heading-wrap p {
max-width: 720px;
margin: 0;
color: #666;
font-size: 16px;
line-height: 1.8;
}
/* =========================================
GRID
========================================= */
.servicelaw-section-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* =========================================
CARD
========================================= */
.servicelaw-section-card {
position: relative;
min-height: 310px;
padding: 32px;
/* NORMAL BLACK */
background: #fff;
border: 1px solid #111;
color: #000;
overflow: hidden;
transition:
background 0.4s ease,
color 0.4s ease,
transform 0.4s ease,
box-shadow 0.4s ease;
}
/* =========================================
CARD HOVER
BLACK → WHITE
========================================= */
.servicelaw-section-card:hover {
background: #0b1122;
color: #fff;
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}
/* =========================================
NUMBER
========================================= */
.servicelaw-section-number {
position: absolute;
top: 25px;
right: 28px;
color: #777;
font-size: 13px;
font-weight: 700;
transition: color 0.4s ease;
}
.servicelaw-section-card:hover .servicelaw-section-number {
color: #999;
}
/* =========================================
ICON
========================================= */
.servicelaw-section-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
/* NORMAL */
border-radius: 50%;
font-size: 22px;
transition: all 0.4s ease;
background: #111;
color: #fff;
}
/* ICON HOVER */
.servicelaw-section-card:hover .servicelaw-section-icon {
background: #fff;
color: #111;
}
/* =========================================
TITLE
========================================= */
.servicelaw-section-card h3 {
max-width: 330px;
font-family: sans-serif;
margin: 0 0 15px;
color: #111;
font-size: 21px;
line-height: 1.4;
font-weight: 700;
transition: color 0.4s ease;
}
/* TITLE HOVER */
.servicelaw-section-card:hover h3 {
color: #f5b402;
}
/* =========================================
DESCRIPTION
========================================= */
.servicelaw-section-card p {
max-width: 350px;
margin: 0;
color: #3d3d3d;
font-size: 14px;
line-height: 1.7;
transition: color 0.4s ease;
font-family: sans-serif;
}
/* DESCRIPTION HOVER */
.servicelaw-section-card:hover p {
color: #f1f1f1;
}
/* =========================================
ARROW
========================================= */
.servicelaw-section-arrow {
position: absolute;
right: 28px;
bottom: 25px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 50%;
color: #fff;
font-size: 18px;
transition: all 0.4s ease;
}
/* ARROW HOVER */
.servicelaw-section-card:hover .servicelaw-section-arrow {
background: #111;
border-color: #111;
color: #fff;
transform: rotate(45deg);
}
/* =========================================
VIEW MORE BUTTON
========================================= */
.servicelaw-view-more-wrap {
width: 100%;
display: flex;
justify-content: center;
margin-top: 45px;
}
.servicelaw-view-more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
font-family: sans-serif;
min-width: 160px;
padding: 14px 30px;
background: #16213e;
color: #fff;
border: 1px solid #111;
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: all 0.3s ease;
}
.servicelaw-view-more span {
font-size: 17px;
transition: transform 0.3s ease;
}
/* BUTTON HOVER */
.servicelaw-view-more:hover {
background: #fff;
color: #111;
}
.servicelaw-view-more:hover span {
transform: translateY(4px);
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.servicelaw-section-header {
grid-template-columns: 1fr;
gap: 25px;
}
.servicelaw-section-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 575px) {
.servicelaw-section {
padding: 60px 15px;
}
.servicelaw-section-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.servicelaw-section-card {
min-height: 290px;
padding: 28px;
}
.servicelaw-section-heading-wrap h2 {
font-size: 38px;
}
.servicelaw-section-card h3 {
font-size: 20px;
}
}
/*END SERVICE*/
/*START MANAGE*/
/* =========================================
MANAGING COMMITTEE
========================================= */
.manage-section {
width: 100%;
padding: 20px 20px;
background: #ffffff;
}
.manage-section-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.manage-section-header {
max-width: 700px;
margin: 0 auto 35px;
text-align: center;
}
.manage-section-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: #16213e;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.manage-section-label-line {
width: 30px;
height: 2px;
background: #16213e;
}
.manage-section-title {
margin: 0 0 10px;
color: #16213e;
font-size: 35px;
font-family: sans-serif;
line-height: 1.05;
font-weight: 600;
}
.manage-section-title span {
color: #bc9119;
}
.manage-section-description {
max-width: 620px;
margin: auto;
color: #777;
font-size: 14px;
line-height: 1.7;
}
/* =========================================
GRID
3 TOP + 2 CENTER
========================================= */
.manage-section-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
/* TOP 3 */
.manage-section-card:nth-child(1),
.manage-section-card:nth-child(2),
.manage-section-card:nth-child(3) {
grid-column: span 2;
}
/* BOTTOM 2 CENTER */
.manage-section-card:nth-child(4) {
grid-column: 2 / span 2;
}
.manage-section-card:nth-child(5) {
grid-column: 4 / span 2;
}
/* =========================================
CARD
========================================= */
.manage-section-card {
position: relative;
background: #16213e;
overflow: hidden;
border: 1px solid #16213e;
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
background 0.4s ease;
}
.manage-section-card:hover {
background: #c99a16;
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(22, 33, 62, 0.18);
}
/* =========================================
IMAGE WRAPPER
========================================= */
.manage-section-image-wrap {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
background: #e9e9e9;
}
.manage-section-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: grayscale(15%);
transition:
transform 0.6s ease,
filter 0.6s ease;
}
.manage-section-card:hover .manage-section-image {
transform: scale(1.06);
filter: grayscale(0%);
}
/* =========================================
NUMBER
========================================= */
.manage-section-number {
position: absolute;
top: 15px;
left: 15px;
z-index: 2;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #16213e;
color: #ffffff;
font-size: 11px;
font-weight: 800;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
}
.manage-section-card:hover .manage-section-number {
background: #ffffff;
color: #16213e;
}
/* =========================================
INFO
========================================= */
.manage-section-info {
position: relative;
padding: 20px 22px 22px;
background: #16213e;
transition: background 0.4s ease;
}
.manage-section-card:hover .manage-section-info {
background: #c99a16;
}
/* TOP LINE */
.manage-section-info::before {
content: "";
position: absolute;
top: 0;
left: 22px;
width: 35px;
height: 2px;
background: #ffffff;
transition: width 0.4s ease,
background 0.4s ease;
}
.manage-section-card:hover .manage-section-info::before {
width: 70px;
background: #16213e;
}
/* NAME */
.manage-section-info h3 {
margin: 0 0 6px;
color: #ffffff;
font-size: 19px;
font-weight: 700;
line-height: 1.3;
transition: color 0.4s ease;
font-family: sans-serif;
}
.manage-section-card:hover .manage-section-info h3 {
color: #16213e;
}
/* DESIGNATION */
.manage-section-info span {
color: #b9c0d0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
font-family: sans-serif;
transition: color 0.4s ease;
}
.manage-section-card:hover .manage-section-info span {
color: #777;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.manage-section-grid {
grid-template-columns: repeat(2, 1fr);
}
.manage-section-card:nth-child(1),
.manage-section-card:nth-child(2),
.manage-section-card:nth-child(3),
.manage-section-card:nth-child(4),
.manage-section-card:nth-child(5) {
grid-column: span 1;
}
/* LAST CARD CENTER */
.manage-section-card:nth-child(5) {
grid-column: 1 / -1;
width: calc(50% - 9px);
margin: 0 auto;
}
.manage-section-image-wrap {
height: 280px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.manage-section {
padding: 20px 15px;
}
.manage-section-header {
margin-bottom: 30px;
}
.manage-section-title {
font-size: 36px;
}
.manage-section-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.manage-section-card:nth-child(1),
.manage-section-card:nth-child(2),
.manage-section-card:nth-child(3),
.manage-section-card:nth-child(4),
.manage-section-card:nth-child(5) {
grid-column: 1;
width: 100%;
margin: 0;
}
.manage-section-image-wrap {
height: 340px;
}
.manage-section-info {
padding: 18px 20px 20px;
}
.manage-section-info h3 {
font-size: 18px;
}
}
/*END MANAGE*/
/*START FOOTER*/
/* ==========================================
FOOTER LAW SECTION
========================================== */
.footerlaw-section {
position: relative;
width: 100%;
overflow: hidden;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
background-image: url("../img/bg-img.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Gold Overlay */
.footerlaw-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(20, 15, 5, 0.92),
rgba(157, 105, 12, 0.82)
);
z-index: 0;
}
/* Container */
.footerlaw-container {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
padding: 55px 20px 45px;
}
/* ==========================================
CONSULTATION TOP
========================================== */
.footerlaw-consult {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding-bottom: 42px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.footerlaw-small-title {
display: inline-block;
margin-bottom: 12px;
color: #ffffff;
font-size: 16px;
font-weight: 700;
}
.footerlaw-consult h2 {
margin: 0;
color: #ffffff;
font-family: sans-serif;
font-size: 32px;
line-height: 1.2;
font-weight: 700;
}
.footerlaw-phone {
display: flex;
align-items: center;
gap: 15px;
min-width: 280px;
}
.footerlaw-phone-icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
border: 2px solid #ffffff;
border-radius: 50%;
color: #ffffff;
font-size: 27px;
}
.footerlaw-phone strong {
display: block;
color: #ffffff;
font-family: sans-serif;
font-size: 24px;
margin-bottom: 5px;
}
.footerlaw-phone span {
display: block;
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
/* ==========================================
MAIN FOOTER
========================================== */
.footerlaw-main {
display: grid;
grid-template-columns: 1.3fr 1fr 0.8fr 1.3fr;
gap: 50px;
padding-top: 55px;
}
/* ==========================================
COMMON COLUMN
========================================== */
.footerlaw-column h3 {
position: relative;
margin: 0 0 25px;
color: #ffffff;
font-family: sans-serif;
font-size: 28px;
line-height: 1.2;
}
.footerlaw-column h3::after {
content: "";
display: block;
width: 45px;
height: 3px;
margin-top: 10px;
background: #ffffff;
}
/* ==========================================
LOGO / ABOUT
========================================== */
.footerlaw-logo {
margin-bottom: 20px;
color: #ffffff;
font-family: sans-serif;
font-size: 31px;
font-weight: 600;
letter-spacing: 1px;
}
.footerlaw-logo span {
color: #ffffff;
font-size: 27px;
}
.footerlaw-about p {
max-width: 330px;
margin: 0;
color: rgba(255, 255, 255, 0.92);
font-size: 15px;
line-height: 1.8;
}
/* ==========================================
SOCIAL
========================================== */
.footerlaw-social {
display: flex;
gap: 10px;
margin-top: 25px;
}
.footerlaw-social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
text-decoration: none;
font-size: 17px;
font-weight: 700;
transition: all 0.3s ease;
}
.footerlaw-social a:hover {
background: #ffffff;
color: #a66d08;
transform: translateY(-4px);
}
/* ==========================================
CONTACT
========================================== */
.footerlaw-contact {
padding: 0;
margin: 0;
list-style: none;
}
.footerlaw-contact li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 17px;
color: #ffffff;
font-size: 15px;
line-height: 1.5;
}
.footerlaw-contact li > span {
flex-shrink: 0;
color: #ffffff;
font-size: 17px;
}
.footerlaw-contact a {
color: #ffffff;
text-decoration: none;
transition: 0.3s ease;
}
.footerlaw-contact a:hover {
color: #f9e3ad;
}
.footerlaw-contact p {
margin: 0;
}
/* ==========================================
QUICK LINKS
========================================== */
.footerlaw-links {
padding: 0;
margin: 0;
list-style: none;
}
.footerlaw-links li {
margin-bottom: 17px;
}
.footerlaw-links a {
display: inline-flex;
align-items: center;
gap: 9px;
color: #ffffff;
text-decoration: none;
font-size: 15px;
transition: all 0.3s ease;
}
.footerlaw-links a span {
font-size: 16px;
}
.footerlaw-links a:hover {
padding-left: 7px;
color: #f9e3ad;
}
/* ==========================================
LOCATION MAP
========================================== */
.footerlaw-map {
position: relative;
width: 100%;
height: 210px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 12px;
background: #ffffff;
}
.footerlaw-map iframe {
width: 100%;
height: 100%;
border: 0;
filter: grayscale(100%) contrast(1.05);
}
.footerlaw-map-overlay {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 13px;
border-radius: 7px;
background: rgba(157, 105, 12, 0.92);
color: #ffffff;
font-size: 14px;
}
/* ==========================================
BOTTOM FOOTER
========================================== */
.footerlaw-bottom {
position: relative;
z-index: 3;
background: #16213e;
}
.footerlaw-bottom-container {
max-width: 1240px;
min-height: 55px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.footerlaw-bottom p {
margin: 0;
color: #ffffff;
font-size: 14px;
font-weight: 600;
}
.footerlaw-bottom a {
color: #e5b957;
text-decoration: none;
font-weight: 700;
transition: 0.3s ease;
}
.footerlaw-bottom a:hover {
color: #ffffff;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 992px) {
.footerlaw-container {
padding: 45px 25px 40px;
}
.footerlaw-consult h2 {
font-size: 32px;
}
.footerlaw-main {
grid-template-columns: repeat(2, 1fr);
gap: 45px 35px;
}
.footerlaw-map-column {
grid-column: span 1;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 768px) {
.footerlaw-container {
padding: 40px 20px 35px;
}
.footerlaw-consult {
flex-direction: column;
align-items: flex-start;
gap: 25px;
padding-bottom: 30px;
}
.footerlaw-consult h2 {
font-size: 28px;
}
.footerlaw-phone {
min-width: auto;
}
.footerlaw-phone strong {
font-size: 20px;
}
.footerlaw-main {
grid-template-columns: 1fr;
gap: 38px;
padding-top: 40px;
}
.footerlaw-about p {
max-width: 100%;
}
.footerlaw-column h3 {
font-size: 25px;
margin-bottom: 20px;
}
.footerlaw-map-column {
grid-column: auto;
}
.footerlaw-map {
height: 230px;
}
.footerlaw-bottom-container {
min-height: auto;
padding: 20px;
flex-direction: column;
justify-content: center;
text-align: center;
gap: 8px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.footerlaw-container {
padding: 35px 16px 30px;
}
.footerlaw-consult h2 {
font-size: 25px;
}
.footerlaw-small-title {
font-size: 14px;
}
.footerlaw-phone-icon {
width: 48px;
height: 48px;
font-size: 23px;
}
.footerlaw-phone strong {
font-size: 18px;
}
.footerlaw-phone span {
font-size: 13px;
}
.footerlaw-logo {
font-size: 27px;
}
.footerlaw-map {
height: 200px;
}
.footerlaw-bottom p {
font-size: 13px;
line-height: 1.6;
}
}
/*END FOOTER*/
/*START NEWS AND EVENTS*/
.newslaw-section {
width: 100%;
padding: 20px 20px;
background: rgb(11, 17, 34);
font-family: sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.newslaw-section *,
.newslaw-section *::before,
.newslaw-section *::after {
box-sizing: border-box;
}
.newslaw-section-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Heading */
.newslaw-section-heading {
text-align: center;
margin-bottom: 45px;
}
.newslaw-section-line {
display: block;
width: 55px;
height: 3px;
margin: 0 auto 15px;
background: #c9a227;
border-radius: 5px;
}
.newslaw-section-heading h2 {
margin: 0;
color: #ffffff;
font-size: 38px;
font-weight: 700;
letter-spacing: 0.5px;
font-family: sans-serif;
}
.newslaw-section-heading p {
margin: 12px 0 0;
color: #aeb6c7;
font-size: 15px;
line-height: 1.7;
}
/* Wrapper */
.newslaw-section-wrapper {
position: relative;
width: 100%;
}
/* Marquee Window */
.newslaw-section-marquee {
position: relative;
height: 410px;
overflow: hidden;
border: 1px solid rgba(201, 162, 39, 0.25);
border-radius: 14px;
background: rgba(255, 255, 255, 0.025);
}
/* Fade Effect */
.newslaw-section-marquee::before,
.newslaw-section-marquee::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 70px;
z-index: 3;
pointer-events: none;
}
.newslaw-section-marquee::before {
top: 0;
background: linear-gradient(
to bottom,
rgb(11, 17, 34),
transparent
);
}
.newslaw-section-marquee::after {
bottom: 0;
background: linear-gradient(
to top,
rgb(11, 17, 34),
transparent
);
}
/* Moving Track */
.newslaw-section-track {
width: 100%;
animation: newslaw-section-up 18s linear infinite;
}
/* Stop on Mouse Hover */
.newslaw-section-marquee:hover .newslaw-section-track {
animation-play-state: paused;
}
/* News Item */
.newslaw-section-item {
width: 100%;
min-height: 185px;
padding: 28px 35px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: 0.3s ease;
}
.newslaw-section-item:hover {
background: rgba(201, 162, 39, 0.06);
}
.newslaw-section-date {
display: inline-block;
margin-bottom: 10px;
color: #c9a227;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
}
.newslaw-section-item h3 {
margin: 0 0 9px;
color: #ffffff;
font-size: 20px;
line-height: 1.4;
font-weight: 600;
font-family: sans-serif;
}
.newslaw-section-item p {
max-width: 850px;
margin: 0;
color: #aeb6c7;
font-size: 22px;
line-height: 1.7;
}
/* Upward Animation */
@keyframes newslaw-section-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
/* Mobile Arrows */
.newslaw-section-arrows {
display: none;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.newslaw-section-arrows button {
width: 45px;
height: 45px;
border: 1px solid #c9a227;
border-radius: 50%;
background: transparent;
color: #c9a227;
font-size: 22px;
cursor: pointer;
transition: 0.3s ease;
}
.newslaw-section-arrows button:hover {
background: #c9a227;
color: rgb(11, 17, 34);
}
/* =========================
Tablet
========================= */
@media (max-width: 991px) {
.newslaw-section {
padding: 65px 20px;
}
.newslaw-section-heading h2 {
font-size: 32px;
}
.newslaw-section-marquee {
height: 390px;
}
.newslaw-section-item {
padding: 25px 28px;
}
}
/* =========================
Mobile
========================= */
@media (max-width: 767px) {
.newslaw-section {
padding: 55px 15px;
}
.newslaw-section-heading {
margin-bottom: 30px;
}
.newslaw-section-heading h2 {
font-size: 27px;
}
.newslaw-section-heading p {
font-size: 13px;
}
.newslaw-section-marquee {
height: 360px;
border-radius: 10px;
}
.newslaw-section-item {
min-height: 175px;
padding: 23px 20px;
}
.newslaw-section-item h3 {
font-size: 17px;
}
.newslaw-section-item p {
font-size: 13px;
line-height: 1.6;
}
.newslaw-section-date {
font-size: 10px;
}
/* Mobile arrow visible */
.newslaw-section-arrows {
display: flex;
}
}
/* =========================
Small Mobile
========================= */
@media (max-width: 480px) {
.newslaw-section {
padding: 45px 12px;
}
.newslaw-section-heading h2 {
font-size: 24px;
}
.newslaw-section-marquee {
height: 340px;
}
.newslaw-section-item {
min-height: 165px;
padding: 20px 17px;
}
.newslaw-section-item h3 {
font-size: 16px;
}
.newslaw-section-item p {
font-size: 12px;
}
}
/*START OBJECTIVE*/
.obj-section {
width: 100%;
padding: 20px 20px;
background: #ffffff;
font-family: sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.obj-section *,
.obj-section *::before,
.obj-section *::after {
box-sizing: border-box;
}
.obj-section-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* =========================
HEADING
========================= */
.obj-section-heading {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
}
.obj-section-small-title {
display: inline-block;
margin-bottom: 12px;
color: #b08a1e;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
}
.obj-section-heading h2 {
margin: 0;
color: #0b1122;
font-size: 42px;
line-height: 1.2;
font-weight: 700;
font-family: sans-serif;
}
.obj-section-line {
width: 65px;
height: 3px;
margin: 18px auto;
background: #c9a227;
position: relative;
}
.obj-section-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
background: #ffffff;
border: 2px solid #c9a227;
}
.obj-section-heading p {
margin: 0;
color: #555f70;
font-size: 16px;
line-height: 1.7;
font-family: sans-serif;
}
/* =========================
MAIN CONTENT
========================= */
.obj-section-content {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 55px;
align-items: stretch;
}
/* =========================
INTRO BOX
========================= */
.obj-section-intro {
position: relative;
padding: 45px;
background: #0b1122;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 20px 45px rgba(11, 17, 34, 0.14);
}
.obj-section-intro::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: #c9a227;
}
.obj-section-intro::after {
content: "CLAWS";
position: absolute;
right: -20px;
bottom: -18px;
color: rgba(255, 255, 255, 0.035);
font-size: 90px;
font-weight: 900;
letter-spacing: 5px;
}
.obj-section-number {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 35px;
border: 1px solid rgba(201, 162, 39, 0.6);
color: #c9a227;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}
.obj-section-intro h3 {
position: relative;
z-index: 2;
margin: 0 0 20px;
color: #ffffff;
font-size: 28px;
line-height: 1.35;
font-weight: 600;
font-family: sans-serif;
}
.obj-section-intro p {
position: relative;
z-index: 2;
margin: 0;
color: #b9c0ce;
font-size: 15px;
line-height: 1.9;
}
/* =========================
OBJECTIVE CARDS
========================= */
.obj-section-points {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.obj-section-card {
position: relative;
display: flex;
gap: 18px;
padding: 25px 22px;
background: #ffffff;
border: 1px solid #e5e7eb;
transition: all 0.35s ease;
overflow: hidden;
}
.obj-section-card::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: #c9a227;
transition: width 0.35s ease;
}
.obj-section-card:hover {
transform: translateY(-6px);
border-color: #c9a227;
box-shadow: 0 15px 35px rgba(11, 17, 34, 0.09);
}
.obj-section-card:hover::before {
width: 100%;
}
.obj-section-card > span {
flex-shrink: 0;
color: #c9a227;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}
.obj-section-card h4 {
margin: 0 0 8px;
color: #0b1122;
font-size: 17px;
font-weight: 700;
line-height: 1.4;
font-family: sans-serif;
}
.obj-section-card p {
margin: 0;
color: #687181;
font-size: 13px;
line-height: 1.65;
}
/* =========================
TABLET
========================= */
@media (max-width: 991px) {
.obj-section {
padding: 70px 20px;
}
.obj-section-heading {
margin-bottom: 45px;
}
.obj-section-heading h2 {
font-size: 36px;
}
.obj-section-content {
grid-template-columns: 1fr;
gap: 35px;
}
.obj-section-intro {
padding: 38px;
}
.obj-section-points {
gap: 15px;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.obj-section {
padding: 55px 15px;
}
.obj-section-heading {
margin-bottom: 35px;
}
.obj-section-small-title {
font-size: 10px;
letter-spacing: 2px;
}
.obj-section-heading h2 {
font-size: 29px;
}
.obj-section-heading p {
font-size: 14px;
}
.obj-section-content {
gap: 25px;
}
.obj-section-intro {
padding: 30px 25px;
}
.obj-section-number {
width: 45px;
height: 45px;
margin-bottom: 25px;
}
.obj-section-intro h3 {
font-size: 23px;
}
.obj-section-intro p {
font-size: 14px;
line-height: 1.75;
}
.obj-section-points {
grid-template-columns: 1fr;
gap: 12px;
}
.obj-section-card {
padding: 22px 18px;
}
}
/* =========================
SMALL MOBILE
========================= */
@media (max-width: 480px) {
.obj-section {
padding: 45px 12px;
}
.obj-section-heading h2 {
font-size: 25px;
}
.obj-section-heading p {
font-size: 13px;
}
.obj-section-intro {
padding: 27px 20px;
}
.obj-section-intro h3 {
font-size: 21px;
}
.obj-section-intro p {
font-size: 13px;
}
.obj-section-card {
gap: 14px;
padding: 20px 16px;
}
.obj-section-card h4 {
font-size: 16px;
}
.obj-section-card p {
font-size: 12px;
}
}
/*CONTACT START*/
/* =========================================
CONTACT INNER PAGE
========================================= */
.contactsr-section {
position: relative;
width: 100%;
padding: 20px 0;
background: #f7f7f5;
overflow: hidden;
}
.contactsr-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 30px;
}
.contactsr-row {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: start;
}
/* =========================================
LEFT CONTACT INFORMATION
========================================= */
.contactsr-info {
padding-top: 15px;
}
.contactsr-subtitle {
display: inline-block;
margin-bottom: 15px;
font-size: 13px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #a47b32;
font-family: sans-serif;
}
.contactsr-title {
max-width: 500px;
margin: 0 0 22px;
font-size: 48px;
line-height: 1.12;
font-weight: 600;
color: #151515;
font-family: sans-serif;
}
.contactsr-description {
max-width: 520px;
margin: 0 0 42px;
font-size: 16px;
line-height: 1.8;
color: #666;
font-family: sans-serif;
}
/* =========================================
CONTACT DETAILS
========================================= */
.contactsr-details {
display: flex;
flex-direction: column;
gap: 28px;
}
.contactsr-detail-item {
display: flex;
align-items: flex-start;
gap: 18px;
}
.contactsr-icon {
flex: 0 0 52px;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ded7c9;
border-radius: 50%;
font-size: 20px;
color: #a47b32;
background: #fff;
}
.contactsr-detail-content {
padding-top: 3px;
}
.contactsr-detail-label {
display: block;
margin-bottom: 7px;
font-size: 12px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #999;
}
.contactsr-detail-content a {
display: inline-block;
font-size: 16px;
line-height: 1.5;
color: #222;
text-decoration: none;
transition: color 0.3s ease;
}
.contactsr-detail-content a:hover {
color: #a47b32;
}
.contactsr-detail-content p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333;
}
/* =========================================
FORM BOX
========================================= */
/* .contactsr-form-wrap {
padding: 48px;
background: #fff;
border: 1px solid #e8e5df;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
} */
.contactsr-form-heading {
margin-bottom: 30px;
}
.contactsr-form-heading .contactsr-subtitle {
margin-bottom: 12px;
}
.contactsr-form-heading h3 {
margin: 0 0 12px;
font-family: sans-serif;
font-size: 34px;
line-height: 1.2;
font-weight: 600;
color: #151515;
}
.contactsr-form-heading p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: #777;
}
/* =========================================
FORM
========================================= */
.contactsr-form {
width: 100%;
}
.contactsr-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contactsr-field {
margin-bottom: 22px;
}
.contactsr-field label {
display: block;
margin-bottom: 9px;
font-family: sans-serif;
font-size: 13px;
line-height: 1.4;
font-weight: 600;
color: #333;
}
.contactsr-field label span {
color: #a47b32;
}
.contactsr-field input,
.contactsr-field textarea {
width: 100%;
display: block;
padding: 15px 17px;
border: 1px solid #dedede;
border-radius: 0;
outline: none;
background: #fff;
font-family: sans-serif;
font-size: 15px;
line-height: 1.5;
color: #222;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.contactsr-field input {
height: 54px;
}
.contactsr-field textarea {
min-height: 145px;
resize: vertical;
}
.contactsr-field input::placeholder,
.contactsr-field textarea::placeholder {
color: #aaa;
}
.contactsr-field input:focus,
.contactsr-field textarea:focus {
border-color: #a47b32;
box-shadow: 0 0 0 3px rgba(164, 123, 50, 0.08);
}
/* =========================================
SUBMIT BUTTON
========================================= */
.contactsr-submit {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 15px 25px;
border: 1px solid #a47b32;
border-radius: 0;
background: #a47b32;
color: #fff;
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.contactsr-submit-arrow {
font-size: 18px;
line-height: 1;
transition: transform 0.3s ease;
}
.contactsr-submit:hover {
background: #151515;
border-color: #151515;
}
.contactsr-submit:hover .contactsr-submit-arrow {
transform: translate(3px, -3px);
}
/* =========================================
LARGE TABLET
========================================= */
@media (max-width: 1100px) {
.contactsr-section {
padding: 80px 0;
}
.contactsr-row {
gap: 50px;
}
.contactsr-title {
font-size: 42px;
}
.contactsr-form-wrap {
padding: 38px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.contactsr-container {
padding: 0 25px;
}
.contactsr-row {
grid-template-columns: 1fr;
gap: 55px;
}
.contactsr-info {
padding-top: 0;
}
.contactsr-title {
max-width: 650px;
font-size: 42px;
}
.contactsr-description {
max-width: 700px;
}
.contactsr-form-wrap {
width: 100%;
max-width: 750px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.contactsr-section {
padding: 60px 0;
}
.contactsr-container {
padding: 0 18px;
}
.contactsr-row {
gap: 40px;
}
.contactsr-subtitle {
margin-bottom: 12px;
font-size: 11px;
letter-spacing: 1.7px;
}
.contactsr-title {
margin-bottom: 18px;
font-size: 34px;
line-height: 1.15;
}
.contactsr-description {
margin-bottom: 32px;
font-size: 15px;
line-height: 1.7;
}
.contactsr-details {
gap: 22px;
}
.contactsr-detail-item {
gap: 14px;
}
.contactsr-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
font-size: 17px;
}
.contactsr-detail-content a,
.contactsr-detail-content p {
font-size: 14px;
}
.contactsr-detail-content p {
line-height: 1.6;
}
.contactsr-form-wrap {
padding: 28px 20px;
}
.contactsr-form-heading {
margin-bottom: 25px;
}
.contactsr-form-heading h3 {
font-size: 27px;
}
.contactsr-form-heading p {
font-size: 14px;
}
.contactsr-form-grid {
grid-template-columns: 1fr;
gap: 0;
}
.contactsr-field {
margin-bottom: 18px;
}
.contactsr-field input {
height: 52px;
}
.contactsr-field textarea {
min-height: 130px;
}
.contactsr-submit {
min-height: 54px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 380px) {
.contactsr-section {
padding: 50px 0;
}
.contactsr-container {
padding: 0 15px;
}
.contactsr-title {
font-size: 30px;
}
.contactsr-form-wrap {
padding: 24px 16px;
}
.contactsr-form-heading h3 {
font-size: 24px;
}
}
/*CONTACT END*/
/* START BANNER */
/* =========================================
INNER PAGE BANNER
========================================= */
.banner-section {
position: relative;
width: 100%;
min-height: 450px;
/* Move banner upward without affecting layout flow */
/* transform: translateY(-151px); */
display: flex;
align-items: center;
padding: 80px 0;
margin-top: -125px;
background:
linear-gradient(
90deg,
rgba(15, 15, 15, 0.78) 0%,
rgba(15, 15, 15, 0.55) 50%,
rgba(15, 15, 15, 0.35) 100%
),
url("../img/bg-img.png") center center / cover no-repeat;
overflow: hidden;
}
/* =========================================
BANNER CONTAINER
========================================= */
.banner-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 30px;
text-align: center;
}
/* =========================================
BANNER CONTENT
========================================= */
/* .banner-content {
max-width: 800px;
} */
/* =========================================
SUBTITLE
========================================= */
.banner-subtitle {
display: inline-block;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.3;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #c59a55;
}
/* =========================================
TITLE
========================================= */
.banner-title {
margin: 0 0 20px;
font-family: sans-serif;
font-size: 58px;
line-height: 1.1;
font-weight: 600;
color: #fff;
}
/* =========================================
BREADCRUMB
========================================= */
.banner-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 14px;
line-height: 1.5;
justify-content: center;
}
/* =========================================
BREADCRUMB LINK
========================================= */
.banner-breadcrumb a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
transition: color 0.3s ease;
}
/* =========================================
BREADCRUMB HOVER
========================================= */
.banner-breadcrumb a:hover {
color: #c59a55;
}
/* =========================================
BREADCRUMB SEPARATOR
========================================= */
.banner-breadcrumb-separator {
color: rgba(255, 255, 255, 0.55);
}
/* =========================================
CURRENT PAGE
========================================= */
.banner-breadcrumb > span:last-child {
color: #c59a55;
}
/* =========================================
LARGE TABLET
========================================= */
@media (max-width: 1100px) {
.banner-section {
min-height: 400px;
padding: 70px 0;
/* transform: translateY(-151px); */
}
.banner-title {
font-size: 50px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.banner-section {
min-height: 450px;
/* transform: translateY(-151px); */
}
.banner-container {
padding: 0 25px;
}
.banner-title {
font-size: 44px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.banner-section {
min-height: 350px;
padding: 60px 0;
background-position: center center;
/* transform: translateY(-151px); */
}
.banner-container {
padding: 0 18px;
}
.banner-subtitle {
margin-bottom: 10px;
font-size: 11px;
letter-spacing: 1.7px;
}
.banner-title {
margin-bottom: 15px;
font-size: 36px;
line-height: 1.15;
}
.banner-breadcrumb {
gap: 7px;
font-size: 13px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 380px) {
.banner-section {
min-height: 350px;
padding: 50px 0;
/* transform: translateY(-151px); */
}
.banner-title {
font-size: 31px;
}
.banner-breadcrumb {
font-size: 12px;
}
}
/* END BANNER */
/*START ABOUT*/
.clawsabout-section {
width: 100%;
padding: 20px 20px;
background: #ffffff;
font-family: sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.clawsabout-section *,
.clawsabout-section *::before,
.clawsabout-section *::after {
box-sizing: border-box;
}
.clawsabout-section-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* =================================
HEADER
================================= */
.clawsabout-section-header {
text-align: center;
max-width: 900px;
margin: 0 auto 65px;
}
.clawsabout-section-label {
display: inline-block;
margin-bottom: 16px;
color: #b08a1e;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
}
.clawsabout-section-header h2 {
margin: 0;
color: #0b1122;
font-size: 44px;
line-height: 1.25;
font-weight: 700;
}
.clawsabout-section-header h2 span {
color: #b08a1e;
}
.clawsabout-section-divider {
width: 90px;
height: 2px;
margin: 25px auto 0;
background: #d9dce2;
position: relative;
}
.clawsabout-section-divider i {
position: absolute;
width: 35px;
height: 4px;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: #c9a227;
}
/* =================================
MAIN AREA
================================= */
.clawsabout-section-main {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
gap: 70px;
align-items: center;
}
/* =================================
LEFT SIDE
================================= */
.clawsabout-section-left {
min-height: 470px;
padding: 45px;
background: #0b1122;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.clawsabout-section-left::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
border: 1px solid rgba(201, 162, 39, 0.35);
border-radius: 50%;
right: -90px;
top: -90px;
}
.clawsabout-section-left::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
border: 1px solid rgba(201, 162, 39, 0.12);
border-radius: 50%;
right: -150px;
top: -150px;
}
/* Badge */
.clawsabout-section-badge {
position: relative;
z-index: 2;
}
.clawsabout-section-badge span {
display: block;
color: #c9a227;
font-size: 54px;
line-height: 1;
font-weight: 800;
letter-spacing: 4px;
}
.clawsabout-section-badge small {
display: block;
margin-top: 14px;
color: #aeb6c7;
font-size: 11px;
line-height: 1.7;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Quote */
.clawsabout-section-quote {
position: relative;
z-index: 2;
padding-top: 35px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.clawsabout-section-quote span {
display: block;
height: 30px;
color: #c9a227;
font-family: Georgia, serif;
font-size: 55px;
line-height: 50px;
}
.clawsabout-section-quote p {
max-width: 320px;
margin: 10px 0 0;
color: #ffffff;
font-size: 20px;
line-height: 1.55;
font-weight: 500;
}
/* =================================
RIGHT CONTENT
================================= */
.clawsabout-section-right {
padding-right: 10px;
}
.clawsabout-section-right p {
margin: 0 0 20px;
color: #5d6675;
font-size: 15px;
line-height: 1.9;
}
.clawsabout-section-right .clawsabout-section-intro {
margin-bottom: 25px;
color: #172033;
font-size: 18px;
line-height: 1.8;
font-weight: 500;
}
/* =================================
VISION BOX
================================= */
.clawsabout-section-vision {
display: grid;
grid-template-columns: 80px 1fr 60px;
gap: 30px;
align-items: center;
margin-top: 70px;
padding: 35px 40px;
border-top: 1px solid #dfe2e7;
border-bottom: 1px solid #dfe2e7;
position: relative;
transition: 0.35s ease;
}
.clawsabout-section-vision:hover {
border-color: #c9a227;
box-shadow: 0 15px 40px rgba(11, 17, 34, 0.07);
}
/* Number */
.clawsabout-section-vision-number {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #c9a227;
color: #b08a1e;
font-size: 13px;
font-weight: 700;
}
/* Vision Content */
.clawsabout-section-vision-content > span {
display: block;
margin-bottom: 8px;
color: #b08a1e;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
}
.clawsabout-section-vision-content h3 {
margin: 0 0 10px;
color: #0b1122;
font-size: 25px;
line-height: 1.4;
font-weight: 600;
}
.clawsabout-section-vision-content h3 strong {
color: #b08a1e;
}
.clawsabout-section-vision-content p {
max-width: 850px;
margin: 0;
color: #687181;
font-size: 14px;
line-height: 1.7;
}
/* Arrow */
.clawsabout-section-vision-arrow {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0b1122;
color: #c9a227;
font-size: 22px;
transition: 0.35s ease;
}
.clawsabout-section-vision:hover .clawsabout-section-vision-arrow {
background: #c9a227;
color: #0b1122;
transform: rotate(45deg);
}
/* =================================
TABLET
================================= */
@media (max-width: 991px) {
.clawsabout-section {
padding: 75px 20px;
}
.clawsabout-section-header {
margin-bottom: 50px;
}
.clawsabout-section-header h2 {
font-size: 36px;
}
.clawsabout-section-main {
grid-template-columns: 1fr;
gap: 45px;
}
.clawsabout-section-left {
min-height: 400px;
}
.clawsabout-section-right {
padding-right: 0;
}
.clawsabout-section-vision {
margin-top: 50px;
}
}
/* =================================
MOBILE
================================= */
@media (max-width: 767px) {
.clawsabout-section {
padding: 60px 15px;
}
.clawsabout-section-header {
margin-bottom: 40px;
}
.clawsabout-section-label {
font-size: 10px;
letter-spacing: 2px;
}
.clawsabout-section-header h2 {
font-size: 29px;
line-height: 1.3;
}
.clawsabout-section-main {
gap: 30px;
}
.clawsabout-section-left {
min-height: 370px;
padding: 30px;
}
.clawsabout-section-badge span {
font-size: 42px;
}
.clawsabout-section-quote {
padding-top: 25px;
}
.clawsabout-section-quote p {
font-size: 17px;
}
.clawsabout-section-right .clawsabout-section-intro {
font-size: 16px;
line-height: 1.75;
}
.clawsabout-section-right p {
font-size: 14px;
line-height: 1.8;
}
.clawsabout-section-vision {
grid-template-columns: 55px 1fr;
gap: 20px;
margin-top: 40px;
padding: 28px 20px;
}
.clawsabout-section-vision-number {
width: 50px;
height: 50px;
}
.clawsabout-section-vision-content h3 {
font-size: 20px;
}
.clawsabout-section-vision-content p {
font-size: 13px;
}
.clawsabout-section-vision-arrow {
display: none;
}
}
/* =================================
SMALL MOBILE
================================= */
@media (max-width: 480px) {
.clawsabout-section {
padding: 50px 12px;
}
.clawsabout-section-header h2 {
font-size: 25px;
}
.clawsabout-section-left {
min-height: 350px;
padding: 25px;
}
.clawsabout-section-badge span {
font-size: 36px;
letter-spacing: 2px;
}
.clawsabout-section-badge small {
font-size: 9px;
}
.clawsabout-section-quote p {
font-size: 16px;
}
.clawsabout-section-right .clawsabout-section-intro {
font-size: 15px;
}
.clawsabout-section-vision {
grid-template-columns: 1fr;
}
.clawsabout-section-vision-number {
margin-bottom: 5px;
}
}
/*START VISION*/
.visionlaw-section {
width: 100%;
padding: 20px 20px;
background: #ffffff;
font-family: sans-serif;
overflow: hidden;
box-sizing: border-box;
}
.visionlaw-section *,
.visionlaw-section *::before,
.visionlaw-section *::after {
box-sizing: border-box;
}
.visionlaw-section-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.visionlaw-section-header {
max-width: 850px;
margin: 0 auto 65px;
text-align: center;
}
.visionlaw-section-label {
display: inline-block;
margin-bottom: 15px;
color: #b08a1e;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
.visionlaw-section-header h2 {
margin: 0;
color: #0b1122;
font-size: 45px;
line-height: 1.2;
font-weight: 700;
}
.visionlaw-section-header h2 span {
color: #b08a1e;
}
.visionlaw-section-divider {
position: relative;
width: 75px;
height: 3px;
margin: 22px auto;
background: #c9a227;
}
.visionlaw-section-divider::before,
.visionlaw-section-divider::after {
content: "";
position: absolute;
top: 0;
width: 25px;
height: 3px;
background: #0b1122;
}
.visionlaw-section-divider::before {
right: 100%;
margin-right: 7px;
}
.visionlaw-section-divider::after {
left: 100%;
margin-left: 7px;
}
.visionlaw-section-header p {
margin: 0;
color: #687181;
font-size: 15px;
line-height: 1.8;
}
/* =========================================
INTRO
========================================= */
.visionlaw-section-intro {
display: grid;
grid-template-columns: 150px 1fr;
gap: 45px;
padding: 50px;
background: #0b1122;
position: relative;
overflow: hidden;
}
.visionlaw-section-intro::before {
content: "";
position: absolute;
width: 350px;
height: 350px;
right: -170px;
top: -190px;
border: 1px solid rgba(201, 162, 39, 0.2);
border-radius: 50%;
}
.visionlaw-section-intro::after {
content: "";
position: absolute;
width: 450px;
height: 450px;
right: -230px;
top: -250px;
border: 1px solid rgba(201, 162, 39, 0.08);
border-radius: 50%;
}
/* Foundation Year */
.visionlaw-section-intro-number {
position: relative;
z-index: 2;
padding-top: 5px;
color: #c9a227;
font-size: 43px;
font-weight: 800;
letter-spacing: 2px;
}
.visionlaw-section-intro-content {
position: relative;
z-index: 2;
}
.visionlaw-section-intro-content > span {
display: block;
margin-bottom: 10px;
color: #c9a227;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.visionlaw-section-intro-content h3 {
margin: 0 0 22px;
color: #ffffff;
font-size: 30px;
line-height: 1.35;
font-weight: 600;
}
.visionlaw-section-intro-content h3 strong {
color: #c9a227;
}
.visionlaw-section-intro-content p {
max-width: 900px;
margin: 0 0 17px;
color: #b8c0cf;
font-size: 14px;
line-height: 1.85;
}
.visionlaw-section-intro-content p:last-child {
margin-bottom: 0;
}
/* =========================================
TRANSITION
========================================= */
.visionlaw-section-transition {
display: flex;
align-items: center;
gap: 25px;
max-width: 1000px;
margin: 45px auto 70px;
}
.visionlaw-section-transition-icon {
flex-shrink: 0;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #c9a227;
color: #b08a1e;
font-size: 23px;
}
.visionlaw-section-transition p {
margin: 0;
color: #555f70;
font-size: 16px;
line-height: 1.8;
}
/* =========================================
GUIDING FRAMEWORK TITLE
========================================= */
.visionlaw-section-title {
margin-bottom: 35px;
}
.visionlaw-section-title > span {
display: block;
margin-bottom: 10px;
color: #b08a1e;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.visionlaw-section-title h3 {
margin: 0;
color: #0b1122;
font-size: 30px;
line-height: 1.4;
}
.visionlaw-section-title h3 strong {
color: #b08a1e;
}
/* =========================================
VISION GRID
========================================= */
.visionlaw-section-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* =========================================
VISION CARD
========================================= */
.visionlaw-section-card {
position: relative;
padding: 32px 30px;
background: #ffffff;
border: 1px solid #e2e5ea;
overflow: hidden;
transition: all 0.35s ease;
}
.visionlaw-section-card::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 4px;
background: #c9a227;
transition: width 0.35s ease;
}
.visionlaw-section-card::after {
content: "";
position: absolute;
right: -25px;
top: -25px;
width: 85px;
height: 85px;
border: 1px solid rgba(201, 162, 39, 0.08);
border-radius: 50%;
transition: 0.35s ease;
}
.visionlaw-section-card:hover {
transform: translateY(-7px);
border-color: rgba(201, 162, 39, 0.7);
box-shadow: 0 18px 40px rgba(11, 17, 34, 0.09);
}
.visionlaw-section-card:hover::before {
width: 100%;
}
.visionlaw-section-card:hover::after {
transform: scale(1.4);
}
/* Card Top */
.visionlaw-section-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.visionlaw-section-number {
color: #c9a227;
font-size: 25px;
font-weight: 800;
letter-spacing: 1px;
}
.visionlaw-section-tag {
color: #8a919d;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
}
/* Card Content */
.visionlaw-section-card h4 {
position: relative;
z-index: 2;
margin: 0 0 17px;
color: #0b1122;
font-size: 19px;
line-height: 1.45;
font-weight: 700;
}
.visionlaw-section-card p {
position: relative;
z-index: 2;
margin: 0 0 13px;
color: #687181;
font-size: 13px;
line-height: 1.8;
}
.visionlaw-section-card p:last-child {
margin-bottom: 0;
}
/* =========================================
LONG TERM ASPIRATION
========================================= */
.visionlaw-section-aspiration {
position: relative;
margin-top: 70px;
padding: 60px;
background: #0b1122;
overflow: hidden;
}
.visionlaw-section-aspiration::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -260px;
bottom: -280px;
border: 1px solid rgba(201, 162, 39, 0.2);
border-radius: 50%;
}
.visionlaw-section-aspiration::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
right: -190px;
bottom: -190px;
border: 1px solid rgba(201, 162, 39, 0.12);
border-radius: 50%;
}
/* Background Text */
.visionlaw-section-aspiration-pattern {
position: absolute;
right: 35px;
top: 25px;
color: rgba(255, 255, 255, 0.025);
font-size: 110px;
font-weight: 900;
letter-spacing: 8px;
}
/* Aspiration Content */
.visionlaw-section-aspiration-content {
position: relative;
z-index: 2;
max-width: 900px;
}
.visionlaw-section-aspiration-content > span {
display: block;
margin-bottom: 13px;
color: #c9a227;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
}
.visionlaw-section-aspiration-content h3 {
margin: 0 0 22px;
color: #ffffff;
font-size: 34px;
line-height: 1.35;
font-weight: 600;
}
.visionlaw-section-aspiration-content h3 strong {
color: #c9a227;
}
.visionlaw-section-aspiration-content p {
margin: 0 0 16px;
color: #b8c0cf;
font-size: 14px;
line-height: 1.85;
}
.visionlaw-section-aspiration-line {
width: 70px;
height: 3px;
margin-top: 30px;
background: #c9a227;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.visionlaw-section {
padding: 75px 20px;
}
.visionlaw-section-header h2 {
font-size: 38px;
}
.visionlaw-section-intro {
grid-template-columns: 110px 1fr;
gap: 30px;
padding: 40px;
}
.visionlaw-section-intro-number {
font-size: 34px;
}
.visionlaw-section-grid {
gap: 15px;
}
.visionlaw-section-card {
padding: 27px 24px;
}
.visionlaw-section-aspiration {
padding: 45px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.visionlaw-section {
padding: 60px 15px;
}
.visionlaw-section-header {
margin-bottom: 45px;
}
.visionlaw-section-label {
font-size: 9px;
letter-spacing: 2px;
}
.visionlaw-section-header h2 {
font-size: 29px;
}
.visionlaw-section-header p {
font-size: 13px;
}
/* Intro */
.visionlaw-section-intro {
grid-template-columns: 1fr;
gap: 20px;
padding: 30px 25px;
}
.visionlaw-section-intro-number {
font-size: 32px;
}
.visionlaw-section-intro-content h3 {
font-size: 23px;
}
.visionlaw-section-intro-content p {
font-size: 13px;
line-height: 1.75;
}
/* Transition */
.visionlaw-section-transition {
align-items: flex-start;
gap: 15px;
margin: 35px auto 50px;
}
.visionlaw-section-transition-icon {
width: 45px;
height: 45px;
font-size: 19px;
}
.visionlaw-section-transition p {
font-size: 13px;
line-height: 1.75;
}
/* Title */
.visionlaw-section-title {
margin-bottom: 25px;
}
.visionlaw-section-title h3 {
font-size: 23px;
}
/* Cards */
.visionlaw-section-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.visionlaw-section-card {
padding: 25px 20px;
}
.visionlaw-section-card-top {
margin-bottom: 20px;
}
.visionlaw-section-card h4 {
font-size: 17px;
}
.visionlaw-section-card p {
font-size: 12px;
line-height: 1.75;
}
/* Aspiration */
.visionlaw-section-aspiration {
margin-top: 50px;
padding: 35px 25px;
}
.visionlaw-section-aspiration-content h3 {
font-size: 25px;
}
.visionlaw-section-aspiration-content p {
font-size: 13px;
line-height: 1.75;
}
.visionlaw-section-aspiration-pattern {
font-size: 65px;
right: 15px;
top: 15px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.visionlaw-section {
padding: 50px 12px;
}
.visionlaw-section-header h2 {
font-size: 25px;
}
.visionlaw-section-intro {
padding: 27px 20px;
}
.visionlaw-section-intro-content h3 {
font-size: 21px;
}
.visionlaw-section-card {
padding: 22px 17px;
}
.visionlaw-section-card h4 {
font-size: 16px;
}
.visionlaw-section-aspiration {
padding: 30px 20px;
}
.visionlaw-section-aspiration-content h3 {
font-size: 22px;
}
}
/* =========================================
CLAWS POPUP
========================================= */
.ag-popup-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(11, 17, 34, 0.82);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 999999;
opacity: 1;
visibility: visible;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
/* Hide Popup */
.ag-popup-overlay.ag-popup-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Popup Box */
.ag-popup-box {
position: relative;
width: 100%;
max-width: 850px;
/* background: #ffffff; */
padding: 8px;
border-radius: 4px;
/* box-shadow:0 25px 70px rgba(0, 0, 0, 0.45); */
transform: scale(1);
transition: transform 0.35s ease;
}
/* Image */
#ag-popup-img {
display: block;
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
border-radius: 2px;
}
/* Close Button */
#popup-close-btn {
position: absolute;
top: -45px;
right: 0;
min-width: 80px;
height: 34px;
padding: 0 15px;
border: 1px solid #c9a227;
border-radius: 3px;
background: #0b1122;
color: #ffffff;
font-family: sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
#popup-close-btn:hover {
background: #c9a227;
color: #0b1122;
transform: translateY(-2px);
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.ag-popup-overlay {
padding: 25px;
}
.ag-popup-box {
max-width: 750px;
}
#ag-popup-img {
max-height: 75vh;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.ag-popup-overlay {
padding: 15px;
}
.ag-popup-box {
max-width: 100%;
padding: 5px;
}
#ag-popup-img {
width: 100%;
max-height: 70vh;
}
#popup-close-btn {
top: -42px;
right: 0;
min-width: 70px;
height: 32px;
font-size: 10px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.ag-popup-overlay {
padding: 10px;
}
.ag-popup-box {
padding: 4px;
}
#ag-popup-img {
max-height: 65vh;
}
#popup-close-btn {
top: -40px;
min-width: 65px;
height: 30px;
font-size: 9px;
}
}
/* =========================================================
HERO / VIDEO SECTION
========================================================= */
.hero {
/* position: relative; */
width: 100%;
min-height: 620px;
height: 82vh;
max-height: 820px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.7) 100%);
z-index: 1;
}
.hero__content {
position: relative;
z-index: 2;
color: #fff;
padding: 0 60px 90px;
max-width: 900px;
}
.hero__content h1 {
font-family: 'Poppins';
font-weight: 700;
font-size: 50px;
margin: 0 0 18px;
line-height: 1.1;
color: #fff;
}
.hero__content p {
font-size: 17px;
max-width: 640px;
margin: 0 0 16px;
color: #f1f1f1;
line-height: 1.5;
}
.hero__link {
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
.hero__link:hover { color: var(--orange); }
.hero__controls {
position: absolute;
z-index: 2;
bottom: 34px;
right: 40px;
display: flex;
gap: 12px;
}
.hero__btn {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.45);
border: 1px solid rgba(255,255,255,.6);
color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease, transform .2s ease;
}
.hero__btn:hover { background: rgba(0,0,0,.7); transform: scale(1.06); }
/* =========================================================
RESPONSIVE / RWD
========================================================= */
/* Tablet */
@media (max-width: 1200px) {
.menu { gap: 20px; }
.primary-nav__right { gap: 14px; }
.hero__content h1 { font-size: 44px; }
}
@media (max-width: 992px) {
.site-header__inner { flex-wrap: wrap; }
.nav-toggle { display: flex; }
.primary-nav {
display: none;
flex-direction: column;
align-items: stretch;
width: 100%;
order: 3;
margin-top: 16px;
border-top: 1px solid rgba(255,255,255,.15);
padding-top: 16px;
}
.primary-nav.is-open { display: flex; }
.primary-nav__utility {
display: flex;
justify-content: space-between;
align-items: center;
order: 2;
margin-top: 10px;
}
.quicklinks-mobile { display: flex; gap: 14px; }
.quicklinks-mobile a { color: #fff; font-size: 12.5px; font-weight: 600; }
.menu {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.menu__item { border-bottom: 1px solid rgba(255,255,255,.12); }
.menu__item > a, .menu__link {
width: 100%;
justify-content: space-between;
padding: 14px 4px;
}
.submenu {
position: static;
min-width: 0;
width: 100%;
box-shadow: none;
border-radius: 0;
flex-direction: column;
gap: 20px;
padding: 18px 10px 22px;
}
.primary-nav__right {
order: 1;
flex-wrap: wrap;
justify-content: flex-start;
gap: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.apply-btn--desktop { display: none; }
.hero { height: 70vh; min-height: 480px; }
.hero__content { padding: 0 28px 60px; }
.hero__content h1 { font-size: 32px; }
.hero__content p { font-size: 15px; }
}
@media (max-width: 560px) {
.top-bar__links span.top-link-hide { display: none; }
.top-bar__inner { padding: 0 14px; }
.site-header__inner {
display: flex;
flex-direction: column;
padding: 12px 14px;
}
.brand__logo { width: 44px; height: 44px; }
.brand__title { font-size: 16px; }
.brand__tagline { font-size: 11px; }
.hero__content h1 { font-size: 26px; }
.hero__controls { right: 16px; bottom: 20px; gap: 8px; }
.hero__btn { width: 34px; height: 34px; }
.top-bar__links { font-size: 10.5px; gap: 6px; }
.submenu__col { gap: 14px; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ===== Management & Committee - cmci- ===== */
.cmci-section{
background:#ffffff;
padding:60px 20px;
font-family:sans-serif;
}
.cmci-shell{
max-width:1200px;
margin:0 auto;
}
.cmci-title{
text-align:center;
color:#16213d;
font-size:32px;
font-weight:700;
margin:0 0 10px;
letter-spacing:.5px;
}
.cmci-title-sm{
margin-top:60px;
}
.cmci-title-underline{
width:70px;
height:4px;
background:#c99a16;
margin:0 auto 40px;
}
/* Top office bearers */
.cmci-top-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px 25px;
}
.cmci-card{
background:#ffffff;
border:1px solid #eee;
border-top:4px solid #16213d;
border-radius:6px;
text-align:center;
padding:25px 15px 30px;
box-shadow:0 3px 12px rgba(22,33,61,0.08);
transition:transform .3s ease, box-shadow .3s ease;
}
.cmci-card:hover{
transform:translateY(-6px);
box-shadow:0 8px 20px rgba(22,33,61,0.15);
}
.cmci-card-president{
border-top:4px solid #c99a16;
}
.cmci-photo{
width:130px;
height:130px;
border-radius:50%;
overflow:hidden;
margin:0 auto 18px;
border:3px solid #c99a16;
}
.cmci-photo img{
width:100%;
/* height:100%; */
object-fit:cover;
display:block;
}
.cmci-name{
color:#16213d;
font-size:18px;
font-weight:700;
margin:0 0 6px;
}
.cmci-role{
display:inline-block;
color:#ffffff;
background:#c99a16;
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.5px;
padding:4px 14px;
border-radius:20px;
}
/* President bio */
.cmci-bio{
background:#f8f8f8;
border-left:5px solid #16213d;
border-radius:4px;
padding:28px 32px;
margin:40px 0 60px;
}
.cmci-bio-name{
color:#16213d;
font-size:18px;
font-weight:700;
margin:0 0 4px;
display:inline-block;
}
.cmci-bio-role{
display:inline-block;
color:#ffffff;
background:#c99a16;
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.5px;
padding:3px 12px;
border-radius:20px;
margin-left:12px;
vertical-align:middle;
}
.cmci-bio-text{
color:#333333;
font-size:15px;
line-height:1.8;
margin:14px 0 0;
}
/* Executive committee members */
.cmci-members-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px 20px;
}
.cmci-member-card{
background:#ffffff;
border:1px solid #eee;
border-radius:6px;
text-align:center;
padding:20px 10px 22px;
box-shadow:0 3px 10px rgba(22,33,61,0.06);
transition:transform .3s ease, box-shadow .3s ease;
}
.cmci-member-card:hover{
transform:translateY(-5px);
box-shadow:0 6px 16px rgba(22,33,61,0.12);
}
.cmci-member-photo{
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
margin:0 auto 14px;
border:3px solid #16213d;
}
.cmci-member-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.cmci-member-name{
color:#16213d;
font-size:15px;
font-weight:600;
margin:0;
line-height:1.4;
}
/* ===== RWD ===== */
@media(max-width:991px){
.cmci-top-grid{
grid-template-columns:repeat(2,1fr);
}
.cmci-members-grid{
grid-template-columns:repeat(3,1fr);
}
.cmci-title{
font-size:28px;
}
}
@media(max-width:767px){
.cmci-section{
padding:45px 15px;
}
.cmci-top-grid{
grid-template-columns:repeat(2,1fr);
gap:25px 15px;
}
.cmci-members-grid{
grid-template-columns:repeat(2,1fr);
gap:22px 15px;
}
.cmci-photo{
width:110px;
height:110px;
}
.cmci-title{
font-size:24px;
}
.cmci-bio{
padding:22px 20px;
}
.cmci-bio-role{
display:block;
width:fit-content;
margin:8px 0 0;
}
}
@media(max-width:575px){
.cmci-top-grid{
grid-template-columns:1fr;
}
.cmci-members-grid{
grid-template-columns:repeat(2,1fr);
gap:18px 12px;
}
.cmci-card{
padding:20px 15px 25px;
}
.cmci-title{
font-size:22px;
}
.cmci-member-photo{
width:85px;
height:85px;
}
}
/*POPUP TEXT START*/
/* =========================================================
SRVA WEBSITE LAUNCH POPUP
========================================================= */
.srva-popup {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease;
}
.srva-popup.active {
visibility: visible;
opacity: 1;
}
/* =========================================================
OVERLAY
========================================================= */
.srva-popup-overlay {
position: absolute;
inset: 0;
background: rgba(8, 14, 28, 0.78);
backdrop-filter: blur(5px);
}
/* =========================================================
MAIN BOX
========================================================= */
.srva-popup-box {
width: 100%;
max-width: 900px;
min-height: 500px;
background: #ffffff;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 42% 58%;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
transform: scale(0.85) translateY(30px);
transition: all 0.5s ease;
}
.srva-popup.active .srva-popup-box {
transform: scale(1) translateY(0);
}
/* =========================================================
LAW IMAGE
========================================================= */
.srva-popup-image {
position: relative;
min-height: 500px;
overflow: hidden;
}
.srva-popup-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(18, 28, 61, 0.15),
rgba(18, 28, 61, 0.65)
);
}
.srva-popup-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================================
CONTENT
========================================================= */
.srva-popup-content {
position: relative;
padding: 65px 55px 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: #ffffff;
}
.srva-popup-line {
width: 55px;
height: 4px;
display: block;
margin-bottom: 18px;
background: linear-gradient(
90deg,
#b08d32,
#d4af57
);
}
.srva-popup-content h2 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #b08d32;
}
.srva-popup-content h3 {
margin: 0 0 25px;
font-size: 35px;
line-height: 1.2;
font-weight: 600;
color: #ffffff;
background: #121c61;
text-align: center;
border-radius: 5px;
padding: 5px;
}
.srva-popup-content p {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.8;
color: #555;
}
.srva-popup-content strong {
color: #121c61;
}
.srva-popup-note {
padding: 15px 18px;
margin-top: 5px !important;
border-left: 3px solid #b08d32;
background: #faf8f2;
color: #555;
}
/* =========================================================
FOOTER
========================================================= */
.srva-popup-footer {
margin-top: 22px;
}
.srva-popup-footer span {
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #121c61;
}
/* =========================================================
CLOSE BUTTON
========================================================= */
.srva-popup-close {
position: absolute;
bottom: 15px;
right: 15px;
z-index: 10;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: #ffffff;
color: #121c61;
font-size: 27px;
line-height: 40px;
cursor: pointer;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.srva-popup-close:hover {
background: #121c61;
color: #ffffff;
transform: rotate(90deg);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.srva-popup-box {
max-width: 700px;
grid-template-columns: 38% 62%;
}
.srva-popup-content {
padding: 50px 40px;
}
.srva-popup-content h3 {
font-size: 32px;
}
.srva-popup-content p {
font-size: 15px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.srva-popup {
padding: 15px;
}
.srva-popup-box {
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
display: block;
}
.srva-popup-image {
height: 190px;
min-height: 190px;
}
.srva-popup-content {
padding: 35px 25px 30px;
}
.srva-popup-content h2 {
font-size: 15px;
letter-spacing: 2px;
}
.srva-popup-content h3 {
font-size: 28px;
margin-bottom: 18px;
}
.srva-popup-content p {
font-size: 14px;
line-height: 1.7;
}
.srva-popup-close {
width: 36px;
height: 36px;
line-height: 36px;
font-size: 24px;
top: 10px;
right: 10px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.srva-popup-image {
height: 160px;
min-height: 160px;
}
.srva-popup-content {
padding: 30px 20px 25px;
}
.srva-popup-content h3 {
font-size: 24px;
}
.srva-popup-note {
padding: 12px 14px;
}
}
/*COMMITTEE MEMBERS START*/
.claws-table-section,
.claws-table-section *,
.claws-table-section *::before,
.claws-table-section *::after {
box-sizing: border-box;
}
.claws-table-section {
position: relative;
padding: 80px 20px;
/* background-color: #faf6ee; */
background-image:
radial-gradient(circle at 8% 12%, rgba(184,145,74,0.10) 0, rgba(184,145,74,0) 38%),
radial-gradient(circle at 92% 88%, rgba(18,33,63,0.07) 0, rgba(18,33,63,0) 40%);
font-family: Arial, sans-serif;
color: #2a3345;
overflow: hidden;
}
.claws-table-section__wrap {
max-width: 1180px;
margin: 0 auto;
}
/* ---------- Heading ---------- */
.claws-table-section__head {
text-align: center;
max-width: 760px;
margin: 0 auto 46px;
}
.claws-table-section__eyebrow {
display: inline-block;
padding: 6px 18px;
border: 1px solid #b8914a;
border-radius: 40px;
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #b8914a;
background: #ffffff;
}
.claws-table-section__title {
margin: 18px 0 0;
font-family: Arial, sans-serif;
font-size: 40px;
line-height: 1.2;
font-weight: 700;
color: #12213f;
}
.claws-table-section__divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 16px 0 18px;
}
.claws-table-section__divider::before,
.claws-table-section__divider::after {
content: "";
width: 70px;
height: 2px;
background: linear-gradient(90deg, rgba(184,145,74,0), #b8914a);
}
.claws-table-section__divider::after {
background: linear-gradient(90deg, #b8914a, rgba(184,145,74,0));
}
.claws-table-section__divider span {
font-size: 22px;
line-height: 1;
color: #b8914a;
}
.claws-table-section__intro {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: #6b7488;
}
/* ---------- Table (desktop) ---------- */
.claws-table-section__scroll {
width: 100%;
}
.claws-table-section__table {
width: 100%;
border-collapse: separate;
border-spacing: 0 12px;
}
.claws-table-section__table thead th {
padding: 18px 22px;
background: #12213f;
color: #e6d3a3;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
.claws-table-section__table thead th:first-child {
border-radius: 14px 0 0 14px;
text-align: center;
width: 90px;
}
.claws-table-section__table thead th:last-child {
border-radius: 0 14px 14px 0;
}
.claws-table-section__table tbody td {
padding: 18px 22px;
background: #ffffff;
font-size: 14.5px;
line-height: 1.7;
vertical-align: middle;
border-top: 1px solid #e7dfcd;
border-bottom: 1px solid #e7dfcd;
transition: background-color .3s ease, border-color .3s ease;
}
.claws-table-section__table tbody td:first-child {
position: relative;
text-align: center;
border-left: 1px solid #e7dfcd;
border-radius: 14px 0 0 14px;
}
.claws-table-section__table tbody td:first-child::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 4px;
border-radius: 0 4px 4px 0;
background: #e6d3a3;
transition: background-color .3s ease, top .3s ease, bottom .3s ease;
}
.claws-table-section__table tbody td:last-child {
border-right: 1px solid #e7dfcd;
border-radius: 0 14px 14px 0;
}
.claws-table-section__row {
box-shadow: 0 6px 18px rgba(18,33,63,0.05);
transition: transform .3s ease, box-shadow .3s ease;
}
.claws-table-section__row:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(18,33,63,0.12);
}
.claws-table-section__row:hover td {
background: #fffaf0;
border-color: #d9c18a;
}
.claws-table-section__row:hover td:first-child::before {
background: #b8914a;
top: 8px;
bottom: 8px;
}
/* Office bearers get a gold-tinted accent */
.claws-table-section__row--lead td:first-child::before {
background: #b8914a;
}
/* Serial number badge */
.claws-table-section__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #12213f;
color: #e6d3a3;
font-size: 13.5px;
font-weight: 600;
box-shadow: 0 0 0 4px #f3ead4;
}
.claws-table-section__row--lead .claws-table-section__num {
background: #b8914a;
color: #ffffff;
box-shadow: 0 0 0 4px #f1e4c2;
}
/* Name */
.claws-table-section__name {
display: block;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 700;
color: #12213f;
white-space: nowrap;
}
/* Position pill */
.claws-table-section__pill {
display: inline-block;
padding: 6px 14px;
border-radius: 40px;
border: 1px solid #d9c18a;
background: #faf3df;
color: #8a6a2c;
font-size: 12px;
font-weight: 600;
letter-spacing: .4px;
white-space: nowrap;
}
.claws-table-section__pill--navy {
background: #12213f;
border-color: #12213f;
color: #e6d3a3;
}
.claws-table-section__pill--gold {
background: #b8914a;
border-color: #b8914a;
color: #ffffff;
}
/* Footer note */
.claws-table-section__note {
max-width: 760px;
margin: 28px auto 0;
padding: 16px 22px;
text-align: center;
font-size: 14px;
line-height: 1.7;
color: #12213f;
background: #ffffff;
border: 1px dashed #b8914a;
border-radius: 12px;
}
/* ---------- Tablet ---------- */
@media (max-width: 991px) {
.claws-table-section { padding: 64px 16px; }
.claws-table-section__title { font-size: 34px; }
.claws-table-section__table thead th,
.claws-table-section__table tbody td { padding: 14px 14px; }
.claws-table-section__table thead th:first-child { width: 70px; }
.claws-table-section__name { white-space: normal; }
.claws-table-section__pill { white-space: normal; }
}
/* ---------- Mobile : table rows become cards ---------- */
@media (max-width: 767px) {
.claws-table-section { padding: 52px 14px; }
.claws-table-section__head { margin-bottom: 32px; }
.claws-table-section__title { font-size: 28px; }
.claws-table-section__intro { font-size: 14px; line-height: 1.7; }
.claws-table-section__table,
.claws-table-section__table tbody,
.claws-table-section__table tr,
.claws-table-section__table td {
display: block;
width: 100%;
}
.claws-table-section__table { border-spacing: 0; }
/* hide header visually, keep for screen readers */
.claws-table-section__table thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.claws-table-section__row {
position: relative;
margin-bottom: 18px;
padding: 6px 0 8px;
background: #ffffff;
border: 1px solid #e7dfcd;
border-top: 4px solid #e6d3a3;
border-radius: 14px;
overflow: hidden;
}
.claws-table-section__row--lead { border-top-color: #b8914a; }
.claws-table-section__row:hover { transform: none; }
.claws-table-section__table tbody td,
.claws-table-section__table tbody td:first-child,
.claws-table-section__table tbody td:last-child {
padding: 10px 18px 10px 118px;
min-height: 44px;
position: relative;
border: 0;
border-radius: 0;
background: transparent;
text-align: left;
font-size: 14px;
}
.claws-table-section__table tbody td + td {
border-top: 1px dashed #ece4d0;
}
.claws-table-section__table tbody td:first-child::before { display: none; }
.claws-table-section__table tbody td::after {
content: attr(data-label);
position: absolute;
left: 18px;
top: 12px;
width: 90px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #b8914a;
}
.claws-table-section__row:hover td { background: transparent; }
.claws-table-section__num { width: 32px; height: 32px; font-size: 12.5px; }
.claws-table-section__name { font-size: 17px; }
}
/* ---------- Small phones ---------- */
@media (max-width: 400px) {
.claws-table-section__table tbody td,
.claws-table-section__table tbody td:first-child,
.claws-table-section__table tbody td:last-child {
padding: 34px 16px 10px;
}
.claws-table-section__table tbody td::after {
top: 10px;
left: 16px;
width: auto;
}
}
/*COMMITTEE MEMBERS END*/