/* Base Styles */
:root {
--primary-color: #2c484b;
--text-color: #2c484b;
--bg-color: #ECF0F1;
--white: #FFFFFF;
--heading-font: 'Gloock', serif;
--body-font: 'Outfit', sans-serif;
}
/* Performance Optimizations */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Optimize images for better performance */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Optimize animations for performance */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--body-font);
line-height: 1.6;
color: #2c484b;
background-color: var(--bg-color);
overflow-x: hidden;
}
/* Header & Navigation */
.header {
position: fixed;
width: 100%;
top: 20px;
left: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.header.scrolled {
top: 0;
padding: 0px 0;
background: rgba(255, 255, 255, 1.0);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.navbar {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.nav-container {
padding: 15px 40px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.header.scrolled .nav-container {
border-radius: 0;
background: rgba(255, 255, 255, 1.0);
box-shadow: none;
padding: 0px 40px;
}
.logo img {
height: 100px;
width: auto;
padding-top: 0px;
}
.nav-center {
display: flex;
justify-content: center;
border-radius: 50px;
padding: 15px 40px;
}
.nav-links {
display: flex;
list-style: none;
gap: 40px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: #2c484b;
font-size: 16px;
font-weight: 500;
position: relative;
padding-bottom: 5px;
transition: color 0.3s ease;
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: #2c484b;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-links a:hover::after {
width: 100%;
}
/* Keep the appointment button styling different */
.make-appointment {
color: #2c484b;
text-decoration: none;
font-weight: 600;
border: 1px solid #2c484b;
padding: 10px 20px;
border-radius: 100px;
}
.make-appointment:hover {
opacity: 0.8;
}
/* Hero Section */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../img/BG1.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: overlay;
overflow: hidden;
}
.background-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.1;
transform: scale(1.5) rotate(15deg);
pointer-events: none;
}
.hero-container {
position: relative;
z-index: 2;
text-align: center;
width: 100%;
max-width: 1400px;
padding: 100px 20px 0;
margin-top: 60px;
}
/* Global Heading Styles */
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
letter-spacing: 3.5px;
font-family: var(--heading-font);
color: #2c484b;
}
/* Update specific heading styles while maintaining their other properties */
.hero-section h1 {
font-size: 64px;
line-height: 68px;
font-weight: 400;
margin-bottom: 30px;
padding-top: 40px;
}
.hero-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 600px;
margin: 20px 0;
padding-top: 0;
}
.rotating-element {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
width: 180px;
height: 180px;
z-index: 3;
}
.rotating-text {
width: 100%;
height: 100%;
animation: rotate 20s linear infinite;
fill: #2c484b;
}
/* Remove the overlay effects */
.center-statue {
position: relative;
z-index: 2;
}
/* Remove previous overlay animations */
.center-statue::after {
display: none;
}
.justice-statue {
width: auto;
animation: statueColors 4s ease-in-out infinite;
}
@keyframes statueColors {
0%, 100% {
filter: hue-rotate(170deg) saturate(0.8) brightness(1.4) contrast(0.9) sepia(0.3);
/* For 2c484b - lighter teal */
}
33% {
filter: hue-rotate(180deg) saturate(0.9) brightness(1.2) contrast(1) sepia(0.4);
/* For 2c484b - medium teal */
}
66% {
filter: hue-rotate(190deg) saturate(1) brightness(1) contrast(2.1) sepia(0.5);
/* For 2c484b - darker teal */
}
}
.center-statue {
position: relative;
isolation: isolate;
}
.center-statue::before {
content: '';
position: absolute;
z-index: 1;
}
@keyframes colorShift {
0%, 100% {
background: #2c484b;
opacity: 0.8;
}
33% {
background: #2c484b;
opacity: 0.85;
}
66% {
background: #2c484b;
opacity: 0.9;
}
}
.hero-description {
font-family: var(--body-font);
font-size: 16px;
color: #2c484b;
line-height: 1.8;
text-align: center;
margin-top: -20px;
font-weight: 300;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.fa-solid, .fas {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* Responsive Design */
@media (max-width: 1400px) {
h1 {
font-size: 48px;
}
.justice-statue {
height: 500px;
}
.rotating-element {
width: 150px;
height: 150px;
}
}
@media (max-width: 1024px) {
.hero-section h1 {
font-size: 48px;
line-height: 56px;
}
.attorneys-section h2,
.practice-areas h2 {
font-size: 36px;
}
.attorney-info h3 {
font-size: 28px;
}
.hero-container {
padding: 100px 20px 0;
margin-top: 40px;
}
}
@media (max-width: 768px) {
.hero-section h1 {
font-size: 36px;
line-height: 44px;
}
.attorneys-section h2,
.practice-areas h2 {
font-size: 32px;
}
.attorney-info h3 {
font-size: 24px;
}
.service-card h3 {
font-size: 20px;
}
.rotating-element {
width: 100px;
height: 100px;
left: 10%;
}
.hero-container {
padding: 80px 20px 0;
margin-top: 30px;
}
.nav-center {
display: flex;
justify-content: center;
border-radius: 50px;
padding: 15px 0px;
}
.logo img {
height: 70px;
width: auto;
padding-top: 10px;
}
.hero-content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
margin: 20px 0;
padding-top: 0;
}
.header.scrolled .nav-container {
border-radius: 0;
background: rgba(255, 255, 255, 1.0);
box-shadow: none;
padding: 0px 0px;
}
.header.scrolled {
top: 0;
max-height: 100px;
}
}
@media (max-width: 480px) {
.hero-section h1 {
font-size: 28px;
line-height: 36px;
}
.attorneys-section h2,
.practice-areas h2 {
font-size: 24px;
}
.attorney-info h3 {
font-size: 20px;
}
.rotating-element {
width: 80px;
height: 80px;
left: 5%;
}
.hero-description {
font-size: 14px;
}
.hero-container {
padding: 50px 20px 0;
margin-top: 20px;
}
}
/* Practice Areas Section */
.practice-areas {
position: relative;
padding: 100px 0;
overflow: hidden;
}
.practice-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../img/BG2.png') center/cover no-repeat;
z-index: 1;
}
.practice-areas .container {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.practice-areas h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
line-height: 1.2;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.service-card {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 20px rgba(44, 72, 75, 0.05);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(44, 72, 75, 0.1);
}
.card-content {
padding: 30px;
}
.service-card h3 {
font-size: 24px;
margin-bottom: 20px;
}
.service-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.service-card li {
font-family: var(--body-font);
font-size: 16px;
color: #2c484b;
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}
.service-card li:before {
content: "•";
position: absolute;
left: 0;
color: #2c484b;
}
.service-card p {
font-family: var(--body-font);
font-size: 16px;
color: #2c484b;
line-height: 1.6;
}
/* Card Image Styling */
.card-image {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.service-card:hover .card-image img {
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.practice-areas {
padding: 60px 0;
}
.practice-areas h2 {
font-size: 36px;
margin-bottom: 40px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-card h3 {
font-size: 20px;
}
.card-image {
height: 180px;
}
}
@media (max-width: 480px) {
.practice-areas h2 {
font-size: 28px;
}
.card-content {
padding: 20px;
}
.service-card li {
font-size: 14px;
}
.card-image {
height: 150px;
}
}
/* Mobile Navigation */
@media (max-width: 768px) {
.header {
top: 10px;
}
.header.scrolled {
top: 0;
}
.nav-container {
padding: 12px 10px;
}
.nav-links {
position: fixed;
top: -100%;
left: 0;
width: 100%;
background: var(--white);
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.nav-links.active {
top: 140px;
opacity: 1;
visibility: visible;
}
.mobile-menu-btn {
display: block;
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 30px;
height: 20px;
position: relative;
z-index: 10;
}
.mobile-menu-btn span {
display: block;
width: 100%;
height: 2px;
background: var(--primary-color);
position: absolute;
transition: all 0.3s ease;
}
.mobile-menu-btn span:first-child {
top: 0;
}
.mobile-menu-btn span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.mobile-menu-btn span:last-child {
bottom: 0;
}
.mobile-menu-btn.active span:first-child {
transform: rotate(45deg);
top: 9px;
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:last-child {
transform: rotate(-45deg);
bottom: 9px;
}
.header.scrolled .nav-links.active {
top: 60px;
}
}
/* Attorneys Section */
.attorneys-section {
padding: 100px 0;
background-image: url('../img/BG3-REV1.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.attorneys-section h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
line-height: 1.2;
}
.attorneys-grid {
display: flex;
flex-direction: column;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
}
.attorney-card {
display: flex;
gap: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(44, 72, 75, 0.1);
transition: transform 0.3s ease;
}
.attorney-card:hover {
transform: translateY(-5px);
}
.attorney-card:nth-child(even) {
flex-direction: row-reverse;
}
.attorney-image {
flex: 0 0 400px;
position: relative;
overflow: hidden;
}
.attorney-image img {
width: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.attorney-card:hover .attorney-image img {
transform: scale(1.05);
}
.attorney-info {
flex: 1;
padding: 40px;
}
.attorney-info h3 {
font-size: 32px;
margin-bottom: 10px;
}
.attorney-info .position {
display: inline-block;
font-family: var(--body-font);
font-size: 18px;
color: #2c484b;
opacity: 0.8;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #2c484b;
}
.attorney-description {
font-family: var(--body-font);
color: #2c484b;
line-height: 1.8;
}
.attorney-description p {
margin-bottom: 15px;
}
.attorney-description p:last-child {
margin-bottom: 0;
}
/* Punjabi Criminal Defence Lawyers Section */
.punjabi-lawyers-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.punjabi-lawyers-section h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
color: var(--primary-color);
font-family: var(--heading-font);
}
.punjabi-lawyers-intro {
text-align: center;
margin-bottom: 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.punjabi-lawyers-intro {
margin-bottom: 50px;
}
.intro-content {
max-width: 1200px;
margin: 0 auto;
}
.intro-section {
display: flex;
align-items: flex-start;
gap: 25px;
margin-bottom: 40px;
padding: 30px;
background: var(--white);
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border-left: 4px solid var(--primary-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro-section:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.section-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color) 0%, #1a2f31 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.section-content {
flex: 1;
}
.section-content h3 {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 15px;
font-family: var(--heading-font);
font-weight: 600;
}
.section-content p {
font-size: 16px;
line-height: 1.7;
color: var(--text-color);
margin: 0;
}
.section-content strong {
color: var(--primary-color);
font-weight: 600;
}
.punjabi-lawyers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
}
.punjabi-lawyer-card,
.punjabi-areas-card {
background: var(--white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(44, 72, 75, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.punjabi-lawyer-card:hover,
.punjabi-areas-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.lawyer-info h3,
.areas-content h3 {
font-size: 28px;
color: var(--primary-color);
margin-bottom: 25px;
font-family: var(--heading-font);
}
.language-services {
margin-bottom: 30px;
}
.language-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
padding: 15px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10px;
border-left: 4px solid var(--primary-color);
}
.language-item i {
color: var(--primary-color);
font-size: 20px;
width: 25px;
text-align: center;
}
.language-item span {
font-size: 16px;
font-weight: 500;
color: var(--text-color);
}
.punjabi-services h4 {
font-size: 20px;
color: var(--primary-color);
margin-bottom: 15px;
font-family: var(--heading-font);
}
.punjabi-services ul {
list-style: none;
padding: 0;
}
.punjabi-services li {
padding: 8px 0;
position: relative;
padding-left: 25px;
font-size: 16px;
color: var(--text-color);
}
.punjabi-services li:before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
font-size: 16px;
}
.punjabi-commitment {
margin-top: 25px;
padding: 20px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 10px;
border-left: 4px solid var(--primary-color);
}
.punjabi-commitment p {
font-size: 16px;
line-height: 1.6;
color: var(--text-color);
margin: 0;
}
.service-areas {
margin-bottom: 30px;
}
.area-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10px;
border-left: 4px solid var(--primary-color);
}
.area-item i {
color: var(--primary-color);
font-size: 20px;
width: 25px;
text-align: center;
}
.area-item h4 {
font-size: 18px;
color: var(--primary-color);
margin: 0 0 5px 0;
font-weight: 600;
}
.area-item p {
font-size: 14px;
color: var(--text-color);
margin: 0;
opacity: 0.8;
}
.contact-info-punjabi {
padding: 20px;
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
border-radius: 10px;
border-left: 4px solid var(--primary-color);
}
.contact-info-punjabi h4 {
font-size: 18px;
color: var(--primary-color);
margin-bottom: 15px;
font-weight: 600;
}
.contact-info-punjabi p {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 16px;
color: var(--text-color);
}
.contact-info-punjabi p:last-child {
margin-bottom: 0;
}
.contact-info-punjabi i {
color: var(--primary-color);
width: 20px;
text-align: center;
}
/* Responsive Design */
@media (max-width: 1024px) {
.attorney-card,
.attorney-card:nth-child(even) {
flex-direction: column;
}
.attorney-image {
flex: 0 0 300px;
}
.attorneys-section h2 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.attorneys-section {
padding: 60px 0;
background-image: none;
}
.attorneys-section h2 {
font-size: 32px;
margin-bottom: 40px;
}
.attorneys-grid {
gap: 40px;
}
.attorney-info {
padding: 30px;
}
.attorney-info h3 {
font-size: 28px;
}
.locations-intro {
margin: 0 10px 60px !important;
}
/* Punjabi Lawyers Section Tablet */
.punjabi-lawyers-section h2 {
font-size: 36px;
}
.punjabi-lawyers-grid {
gap: 30px;
}
.punjabi-lawyer-card,
.punjabi-areas-card {
padding: 35px;
}
/* Punjabi Intro Section Tablet */
.intro-section {
padding: 25px;
gap: 20px;
}
.section-icon {
width: 55px;
height: 55px;
font-size: 22px;
}
.section-content h3 {
font-size: 22px;
}
}
@media (max-width: 480px) {
.locations-intro {
margin: 0 10px 60px !important;
}
.attorneys-section h2 {
font-size: 28px;
}
.attorney-info h3 {
font-size: 24px;
}
.attorney-info .position {
font-size: 16px;
}
.attorney-description {
font-size: 14px;
}
/* Punjabi Lawyers Section Responsive */
.punjabi-lawyers-section h2 {
font-size: 32px;
}
.punjabi-lawyers-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.punjabi-lawyer-card,
.punjabi-areas-card {
padding: 30px;
}
.lawyer-info h3,
.areas-content h3 {
font-size: 24px;
}
.language-item span {
font-size: 14px;
}
.punjabi-services li {
font-size: 14px;
}
/* Punjabi Intro Section Responsive */
.intro-section {
flex-direction: column;
text-align: center;
gap: 20px;
}
.section-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.section-content h3 {
font-size: 20px;
}
.section-content p {
font-size: 14px;
}
}
/* Affiliations Section */
.affiliations-section {
padding: 80px 0;
position: relative;
}
.affiliations-section h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
line-height: 1.2;
}
.affiliations-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.affiliation-logo {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
transition: transform 0.3s ease;
}
.affiliation-logo:hover {
transform: translateY(-5px);
}
.affiliation-logo img {
max-width: 100%;
height: auto;
max-height: 80px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.8;
transition: all 0.3s ease;
}
.affiliation-logo:hover img {
filter: grayscale(0);
opacity: 1;
}
/* Responsive Design */
@media (max-width: 1024px) {
.affiliations-grid {
gap: 30px;
}
.affiliation-logo img {
max-height: 70px;
}
}
@media (max-width: 768px) {
.affiliations-section {
padding: 60px 0;
}
.affiliations-grid {
flex-wrap: wrap;
gap: 20px;
}
.affiliation-logo {
flex: 0 0 calc(33.33% - 20px);
}
.affiliation-logo img {
max-height: 60px;
}
}
@media (max-width: 480px) {
.affiliations-grid {
gap: 15px;
}
.affiliation-logo {
flex: 0 0 calc(50% - 15px);
}
.affiliation-logo img {
max-height: 50px;
}
}
/* Notable Successes Section */
.successes-section {
padding: 100px 0;
background-color: #ffffff;
position: relative;
background-image: url('../img/BG4.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.successes-section h2 {
font-size: 48px;
text-align: center;
margin-bottom: 60px;
line-height: 1.2;
color: #2c484b;
}
.success-cases {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.case-card {
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(44, 72, 75, 0.1);
transition: transform 0.3s ease;
border: 1px solid rgba(44, 72, 75, 0.1);
}
.case-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(44, 72, 75, 0.15);
}
.case-content {
padding: 40px;
}
.case-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(44, 72, 75, 0.1);
}
.case-header h3 {
font-size: 28px;
color: #2c484b;
margin: 0;
}
.verdict {
display: inline-block;
padding: 8px 16px;
background-color: rgba(44, 72, 75, 0.1);
color: #2c484b;
border-radius: 30px;
font-weight: 500;
font-size: 16px;
}
.case-details {
color: #2c484b;
line-height: 1.8;
}
.case-details p {
margin-bottom: 20px;
}
.charges-list {
list-style: none;
padding-left: 20px;
margin-bottom: 20px;
}
.charges-list li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #2c484b;
}
.charges-list li::before {
content: "•";
position: absolute;
left: 0;
color: #2c484b;
font-size: 20px;
line-height: 1;
}
/* Responsive Design */
@media (max-width: 1024px) {
.case-content {
padding: 30px;
}
.case-header h3 {
font-size: 24px;
}
}
@media (max-width: 768px) {
.successes-section {
padding: 60px 0;
}
.case-content {
padding: 25px;
}
.case-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.case-header h3 {
font-size: 22px;
}
.verdict {
font-size: 14px;
}
}
@media (max-width: 480px) {
.case-content {
padding: 20px;
}
.case-header h3 {
font-size: 20px;
}
.charges-list li {
font-size: 14px;
}
}
/* Appointment Popup */
.appointment-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(44, 72, 75, 0.9);
z-index: 1000;
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.3s ease;
}
.appointment-popup.active {
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}
.popup-content {
background: #ffffff;
padding: 40px;
border-radius: 20px;
width: 100%;
max-width: 500px;
position: relative;
transform: translateY(-20px);
transition: transform 0.3s ease;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.appointment-popup.active .popup-content {
transform: translateY(0);
}
.close-popup {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 28px;
color: #2c484b;
cursor: pointer;
padding: 5px;
line-height: 1;
transition: transform 0.3s ease;
}
.close-popup:hover {
transform: rotate(90deg);
}
.popup-content h3 {
font-size: 28px;
color: #2c484b;
margin-bottom: 30px;
text-align: center;
}
.appointment-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 2px solid rgba(44, 72, 75, 0.1);
border-radius: 10px;
background: transparent;
font-size: 16px;
color: #2c484b;
transition: all 0.3s ease;
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-group label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: rgba(44, 72, 75, 0.6);
transition: all 0.3s ease;
pointer-events: none;
font-size: 16px;
background: #ffffff;
padding: 0 5px;
}
.form-group textarea + label {
top: 20px;
transform: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #2c484b;
outline: none;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
top: -10px;
font-size: 14px;
color: #2c484b;
}
.form-group select {
appearance: none;
padding-right: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c484b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
}
.submit-btn {
background: #2c484b;
color: #ffffff;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.submit-btn:hover {
background: #1a2c2e;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.popup-content {
margin: 20px;
padding: 30px;
}
.popup-content h3 {
font-size: 24px;
}
}
@media (max-width: 480px) {
.popup-content {
padding: 20px;
}
.form-group input,
.form-group select,
.form-group textarea {
font-size: 14px;
}
.form-group label {
font-size: 14px;
}
}
/* Top Bar */
.top-bar {
background-color: #2c484b;
padding: 2px 0;
font-size: 14px;
color: #ffffff;
position: relative;
z-index: 1001;
height: 30px;
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.assistance {
display: flex;
align-items: center;
gap: 8px;
}
.contact-info {
display: flex;
align-items: center;
gap: 20px;
}
.contact-info a {
color: #ffffff;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: opacity 0.3s ease;
}
.contact-info a:hover {
opacity: 0.8;
}
.top-bar i {
font-size: 14px;
color: #ffffff;
}
/* Update header positioning */
.header {
top: 36px;
}
.header.scrolled {
top: 0;
max-height: 100px;
}
/* Responsive Design */
@media (max-width: 768px) {
.top-bar {
padding: 10px 0;
height: 68px;
}
.top-bar-content {
flex-direction: column;
gap: 8px;
}
.contact-info {
flex-direction: row;
gap: 70px;
text-align: center;
display: flex;
}
.header {
top: 50px;
}
}
@media (max-width: 480px) {
.top-bar {
font-size: 12px;
height: 68px;
}
.contact-info a {
font-size: 12px;
}
}
/* Floating WhatsApp Button */
.floating-whatsapp {
position: fixed;
bottom: 90px;
right: 25px;
background-color: #25D366;
color: #ffffff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
z-index: 999;
}
.floating-whatsapp i {
font-size: 32px;
color: #ffffff;
}
.floating-whatsapp:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.floating-whatsapp .tooltip {
position: absolute;
right: 70px;
background-color: #333;
color: white;
padding: 8px 15px;
border-radius: 5px;
font-size: 14px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
white-space: nowrap;
}
.floating-whatsapp .tooltip::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
border-width: 8px 0 8px 8px;
border-style: solid;
border-color: transparent transparent transparent #333;
}
.floating-whatsapp:hover .tooltip {
opacity: 1;
visibility: visible;
right: 75px;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 25px;
right: 25px;
background-color: #2c484b;
color: #ffffff;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
box-shadow: 0 4px 15px rgba(44, 72, 75, 0.3);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 999;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
border: 1px solid #d0e3e6;
}
.back-to-top i {
font-size: 20px;
color: #ffffff;
}
.back-to-top:hover {
transform: translateY(-5px);
background-color: #1a2c2e;
box-shadow: 0 6px 20px rgba(44, 72, 75, 0.4);
}
/* Responsive Design */
@media (max-width: 768px) {
.floating-whatsapp {
width: 50px;
height: 50px;
bottom: 80px;
right: 20px;
}
.floating-whatsapp i {
font-size: 28px;
}
.back-to-top {
width: 40px;
height: 40px;
right: 20px;
border: 1px solid #c9dfe1;
}
.back-to-top i {
font-size: 18px;
}
}
@media (max-width: 480px) {
.floating-whatsapp .tooltip {
display: none;
}
}
/* Locations Section */
.locations-section {
background-image: url('../img/BG2.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
position: relative;
padding: 100px 0;
background-color: var(--white);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.locations-section h2 {
text-align: center;
margin-bottom: 20px;
font-size: 42px;
color: var(--primary-color);
}
.locations-description {
text-align: center;
max-width: 800px;
margin: 0 auto;
font-size: 18px;
color: var(--text-color);
line-height: 1.8;
}
.locations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.featured-locations {
margin-bottom: 50px;
}
.location-card {
background: var(--white);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(44, 72, 75, 0.1);
}
.location-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.location-card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(44, 72, 75, 0.1);
}
.location-icon {
width: 80px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), #1a3a3d);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 20px;
}
.location-card h3 {
color: var(--primary-color);
font-size: 18px;
margin: 0;
font-weight: 600;
}
.location-details {
color: var(--text-color);
}
.courthouse {
margin-bottom: 25px;
}
.courthouse-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.courthouse-header i {
color: var(--primary-color);
font-size: 18px;
}
.courthouse-header h4 {
color: var(--primary-color);
font-size: 14px;
margin: 0;
font-weight: 600;
}
.address {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
}
.address i {
color: var(--primary-color);
font-size: 16px;
margin-top: 3px;
}
.address p {
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.hours-contact {
display: grid;
gap: 15px;
padding-top: 20px;
border-top: 1px solid rgba(44, 72, 75, 0.1);
}
.hours, .contact {
display: flex;
align-items: flex-start;
gap: 12px;
}
.hours i, .contact i {
color: var(--primary-color);
font-size: 16px;
margin-top: 2px;
}
.hours div, .contact div {
flex: 1;
}
.hours strong, .contact strong {
display: block;
color: var(--primary-color);
font-size: 14px;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hours p, .contact p {
margin: 0;
font-size: 14px;
color: var(--text-color);
}
.explore-more {
text-align: center;
margin-top: 40px;
}
.explore-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--primary-color), #1a3a3d);
color: var(--white);
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}
.explore-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(44, 72, 75, 0.3);
}
.explore-btn i {
font-size: 12px;
transition: transform 0.3s ease;
}
.explore-btn:hover i {
transform: translateX(3px);
}
@media (max-width: 1024px) {
.locations-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.locations-section h2 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.locations-section {
padding: 60px 0;
}
.locations-description {
font-size: 16px;
margin-bottom: 40px;
}
.locations-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.location-card {
padding: 25px;
}
.location-card h3 {
font-size: 20px;
}
.courthouse-header h4 {
font-size: 16px;
}
}
@media (max-width: 480px) {
.locations-section h2 {
font-size: 28px;
}
.locations-description {
font-size: 15px;
padding: 0 20px;
}
.location-card {
padding: 20px;
}
.location-icon {
width: 40px;
height: 40px;
font-size: 16px;
}
.location-card h3 {
font-size: 18px;
}
.hours, .contact {
font-size: 13px;
}
}
/* Page Header */
.page-header {
background-color: var(--primary-color);
padding: 120px 0 60px;
text-align: center;
margin-bottom: 60px;
}
.page-header h1 {
color: var(--white);
font-size: 48px;
margin-bottom: 20px;
}
.page-header p {
color: var(--white);
font-size: 20px;
opacity: 0.9;
}
/* Detailed Locations */
.locations-header {
background: linear-gradient(rgba(44, 72, 75, 0.9), rgba(44, 72, 75, 0.9)), url('../img/BG3-REV1.png');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
max-width: 1440px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.locations-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.locations-header .container {
position: relative;
z-index: 2;
}
.location-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 40px;
}
.stat-item {
text-align: center;
color: var(--white);
}
.stat-item i {
font-size: 36px;
margin-bottom: 15px;
}
.stat-number {
display: block;
font-size: 42px;
font-weight: 600;
margin: 10px 0;
font-family: var(--heading-font);
}
.stat-label {
font-size: 18px;
opacity: 0.9;
}
/* Detailed Locations */
.detailed-locations {
padding: 80px 0;
background-color: #f8f9fa;
}
.detailed-locations .container {
max-width: 1440px;
margin: 0 auto;
padding: 0 30px;
}
.location-detail-card {
/* display: grid; */
grid-template-columns: 1.2fr 1fr;
gap: 30px;
padding: 0;
background: var(--white);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.location-detail-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.location-info {
padding: 40px;
}
.location-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(44, 72, 75, 0.1);
}
.location-header i {
font-size: 32px;
color: var(--primary-color);
background: rgba(44, 72, 75, 0.1);
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
}
.location-header h2 {
font-size: 32px;
margin: 0;
color: var(--primary-color);
}
.courthouse-info {
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
}
.courthouse-info:last-child {
margin-bottom: 0;
}
.courthouse-info h3 {
display: flex;
align-items: center;
gap: 10px;
color: var(--primary-color);
font-size: 18px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(44, 72, 75, 0.1);
}
.courthouse-info h3 i {
font-size: 24px;
}
.address-box {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.address-box i {
color: var(--primary-color);
font-size: 20px;
margin-top: 3px;
}
.contact-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
/* margin-top: 20px; */
/* padding-top: 15px; */
border-top: 1px solid rgba(44, 72, 75, 0.1);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.contact-item i {
color: var(--primary-color);
font-size: 18px;
margin-top: 3px;
}
.contact-item p {
margin: 0;
font-size: 15px;
}
.location-map-wrapper {
position: relative;
height: 100%;
min-height: 400px;
}
.location-map {
height: 100%;
}
.location-map iframe {
width: 100%;
height: 100%;
border: none;
}
.map-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(44, 72, 75, 0.95));
padding: 20px;
}
.hours-contact {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
color: var(--white);
text-align: center;
}
.hours, .contact {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.hours i, .contact i {
font-size: 24px;
margin-bottom: 5px;
background: rgba(255, 255, 255, 0.2);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.hours p, .contact p {
margin: 0;
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 1200px) {
.locations-grid {
grid-template-columns: 1fr;
}
.location-detail-card {
grid-template-columns: 1fr;
gap: 0;
}
.location-info {
padding: 30px;
}
.location-map-wrapper {
min-height: 350px;
}
.location-header i {
width: 60px;
height: 60px;
font-size: 28px;
}
.location-header h2 {
font-size: 28px;
}
}
@media (max-width: 768px) {
.detailed-locations .container {
padding: 0 20px;
}
.location-info {
padding: 25px;
}
.location-header {
gap: 15px;
margin-bottom: 25px;
}
.location-header i {
width: 50px;
height: 50px;
font-size: 24px;
}
.location-header h2 {
font-size: 24px;
}
.location-map-wrapper {
min-height: 300px;
}
}
@media (max-width: 480px) {
.detailed-locations .container {
padding: 0 15px;
}
.location-info {
padding: 20px;
}
.location-header {
gap: 12px;
margin-bottom: 20px;
}
.location-header i {
width: 40px;
height: 40px;
font-size: 20px;
}
.location-header h2 {
font-size: 20px;
}
.location-map-wrapper {
min-height: 250px;
}
}
/* Active Navigation Link */
.nav-links a.active {
color: var(--primary-color);
font-weight: 600;
}
.nav-links a.active::after {
width: 100%;
}
/* Footer Styles */
footer {
background-color: var(--primary-color);
color: var(--white);
padding: 60px 0 30px;
}
footer .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.footer-left {
max-width: 400px;
}
.footer-logo {
width: 120px;
height: auto;
filter: brightness(0) invert(1);
margin-bottom: 20px;
}
.footer-left p {
font-size: 15px;
line-height: 1.5;
color: var(--white);
opacity: 0.8;
}
.footer-right {
text-align: right;
padding-top: 10px;
}
.footer-right h3 {
color: var(--white);
font-size: 16px;
margin-bottom: 15px;
letter-spacing: 1px;
font-family: var(--body-font);
font-weight: 500;
}
.footer-right p {
font-size: 15px;
line-height: 1.5;
margin: 5px 0;
color: var(--white);
opacity: 0.8;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.footer-bottom-left {
display: flex;
align-items: center;
gap: 30px;
}
.footer-bottom-left p {
color: var(--white);
opacity: 0.8;
font-size: 14px;
}
.social-links {
display: flex;
gap: 20px;
}
.social-links a {
color: var(--white);
font-size: 16px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.social-links a i {
color: var(--white);
}
.social-links a:hover {
opacity: 1;
}
.footer-links {
display: flex;
gap: 30px;
}
.footer-links a {
color: var(--white);
text-decoration: none;
opacity: 0.8;
transition: opacity 0.3s ease;
font-size: 14px;
}
.footer-links a:hover {
opacity: 1;
}
.policy-links {
margin-top: 15px;
}
.policy-links a {
color: #666;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
padding: 5px 10px;
border-radius: 5px;
background: rgba(44, 72, 75, 0.1);
}
.policy-links a:hover {
color: var(--primary-color);
background: rgba(44, 72, 75, 0.2);
}
/* Footer Responsive Styles */
@media (max-width: 1024px) {
.footer-content,
.footer-bottom {
max-width: 900px;
}
}
@media (max-width: 768px) {
footer {
padding: 40px 0 20px;
}
.footer-content {
flex-direction: column;
align-items: center;
text-align: center;
gap: 30px;
}
.footer-left {
text-align: center;
display: contents;
}
.footer-right {
text-align: center;
padding-top: 0;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
}
.footer-bottom-left {
flex-direction: column;
gap: 20px;
}
.social-links {
justify-content: center;
}
.footer-links {
justify-content: center;
}
}
@media (max-width: 480px) {
.footer-logo {
width: 180px;
}
.footer-links {
gap: 20px;
}
.social-links {
gap: 15px;
}
}
/* Locations Hero Banner */
.locations-hero-banner {
position: relative;
height: 300px;
max-height: 300px;
overflow: hidden;
margin-top: 120px;
}
.hero-banner-image {
width: 100%;
height: 100%;
}
.hero-banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(44, 72, 75, 0.7), rgba(44, 72, 75, 0.7));
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-banner-overlay .container {
max-width: 800px;
padding: 0 20px;
}
.hero-banner-overlay h1 {
color: var(--white);
font-size: 48px;
font-weight: 400;
margin-bottom: 20px;
font-family: var(--heading-font);
letter-spacing: 3.5px;
text-transform: uppercase;
}
.hero-banner-overlay p {
color: var(--white);
font-size: 20px;
line-height: 1.6;
opacity: 0.9;
}
@media (max-width: 768px) {
.locations-hero-banner {
height: 250px;
margin-top: 60px;
}
.hero-banner-overlay h1 {
font-size: 32px;
}
.hero-banner-overlay p {
font-size: 16px;
}
}
@media (max-width: 480px) {
.locations-hero-banner {
height: 200px;
margin-top: 70px;
}
.hero-banner-overlay h1 {
font-size: 24px;
}
.hero-banner-overlay p {
font-size: 14px;
}
}
/* Location Details Page Styles */
.location-details-section {
padding: 20px 0 40px;
background: #f8f9fa;
width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}
.location-details-section * {
box-sizing: border-box;
}
.location-details-section .container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
display: block;
position: relative;
}
/* Ensure all content is visible */
.location-details-section .container > * {
visibility: visible !important;
opacity: 1 !important;
}
.location-details-section .main-title {
color: var(--text-color);
font-size: 36px;
font-weight: 400;
text-align: center;
margin-bottom: 15px;
font-family: var(--heading-font);
letter-spacing: 2px;
padding: 0 20px;
display: block;
width: 100%;
box-sizing: border-box;
}
.location-details-section .locations-intro {
text-align: center;
max-width: 800px;
margin: 0 auto 30px;
font-size: 16px;
line-height: 1.6;
color: var(--text-color);
padding: 0 20px;
display: block;
width: 100%;
box-sizing: border-box;
}
.location-details-section .location-details-grid {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.location-details-section .location-detail-card {
display: block !important;
background: var(--white);
border-radius: 15px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
.location-details-section .location-info {
padding-right: 20px;
width: 100%;
display: block;
}
.location-details-section .location-info h2 {
color: var(--text-color);
font-size: 24px;
margin-bottom: 15px;
display: block;
width: 100%;
}
.location-details-section .location-info-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 15px;
width: 100%;
box-sizing: border-box;
}
/* Ensure grid shows properly on mobile */
@media (max-width: 600px) {
.location-details-section .location-info-grid {
grid-template-columns: 1fr !important;
}
}
.location-details-section .info-block {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
border-left: 4px solid var(--primary-color);
display: block;
width: 100%;
box-sizing: border-box;
}
.location-details-section .info-block h3 {
color: var(--text-color);
font-size: 18px;
margin-bottom: 8px;
font-weight: 600;
display: block;
width: 100%;
}
.location-details-section .info-block p {
color: var(--text-color);
font-size: 14px;
line-height: 1.5;
margin-bottom: 4px;
display: block;
width: 100%;
}
.location-details-section .map-container {
position: relative;
width: 100%;
height: 100%;
min-height: 300px;
border-radius: 10px;
overflow: hidden;
display: block;
box-sizing: border-box;
}
.location-details-section .map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
@media (max-width: 1024px) {
.location-details-section .location-detail-card {
padding: 20px;
width: 100%;
box-sizing: border-box;
display: block !important;
}
.location-details-section .location-info {
padding-right: 0;
width: 100%;
display: block;
}
.location-details-section .location-info-grid {
grid-template-columns: 1fr !important;
width: 100%;
display: grid !important;
}
.location-details-section .map-container {
min-height: 280px;
margin-top: 20px;
width: 100%;
display: block;
}
}
@media (max-width: 768px) {
.location-details-section {
padding: 15px 0 30px;
overflow-x: visible;
}
.location-details-grid {
padding: 0 15px;
}
.location-details-section .main-title {
font-size: 28px;
display: block;
width: 100%;
}
.location-details-section .locations-intro {
font-size: 15px;
margin-bottom: 20px;
display: block;
width: 100%;
}
.location-details-section .location-detail-card {
padding: 18px;
margin-bottom: 18px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block !important;
}
.location-details-section .location-info {
padding-right: 0;
width: 100%;
display: block;
}
.location-details-section .location-info h2 {
font-size: 22px;
margin-bottom: 12px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .location-info-grid {
grid-template-columns: 1fr !important;
gap: 12px;
width: 100%;
display: grid !important;
}
.location-details-section .info-block {
padding: 12px;
width: 100%;
box-sizing: border-box;
display: block;
}
.location-details-section .info-block h3 {
font-size: 16px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .info-block p {
font-size: 13px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .map-container {
min-height: 250px;
margin-top: 15px;
width: 100%;
display: block;
}
}
@media (max-width: 480px) {
.location-details-section {
padding: 10px 0 20px;
overflow-x: visible;
}
.location-details-section .main-title {
font-size: 22px;
padding: 0 15px;
margin-bottom: 10px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .locations-intro {
font-size: 14px;
padding: 0 15px;
margin-bottom: 15px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-grid {
padding: 0 10px;
width: 100%;
box-sizing: border-box;
}
.location-details-section .location-detail-card {
padding: 15px;
margin-bottom: 15px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block !important;
}
.location-details-section .location-info {
padding-right: 0;
width: 100%;
display: block;
}
.location-details-section .location-info h2 {
font-size: 18px;
margin-bottom: 10px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .location-info-grid {
grid-template-columns: 1fr !important;
gap: 10px;
width: 100%;
display: grid !important;
}
.location-details-section .info-block {
padding: 10px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: block;
}
.location-details-section .info-block h3 {
font-size: 15px;
margin-bottom: 6px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .info-block p {
font-size: 12px;
word-wrap: break-word;
display: block;
width: 100%;
}
.location-details-section .map-container {
min-height: 200px;
margin-top: 12px;
width: 100%;
display: block;
}
}
/* Cookies Policy Styles */
.cookies-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #1a2f31 100%);
color: white;
padding: 120px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.cookies-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.header-content {
position: relative;
z-index: 2;
}
.cookies-header h1 {
font-family: var(--heading-font);
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.cookies-header p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.header-icon {
font-size: 4rem;
margin-top: 20px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.cookies-content {
padding: 80px 0;
background: var(--bg-color);
}
.policy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.policy-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(44, 72, 75, 0.1);
}
.policy-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #1a2f31 100%);
color: white;
padding: 30px;
display: flex;
align-items: center;
gap: 20px;
}
.icon-wrapper {
width: 60px;
height: 60px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
backdrop-filter: blur(10px);
}
.card-header h2 {
font-family: var(--heading-font);
font-size: 1.5rem;
margin: 0;
color: #ffffff;
}
.card-content {
padding: 30px;
}
.card-content p {
margin-bottom: 20px;
line-height: 1.8;
color: #555;
}
.cookie-types {
display: grid;
gap: 25px;
}
.cookie-type {
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
border-left: 4px solid var(--primary-color);
}
.cookie-type h3 {
display: flex;
align-items: center;
gap: 10px;
color: var(--primary-color);
margin-bottom: 10px;
font-size: 1.1rem;
}
.cookie-type h3 i {
color: var(--primary-color);
}
.management-options {
display: grid;
gap: 20px;
}
.option {
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
border-left: 4px solid #28a745;
}
.option h4 {
display: flex;
align-items: center;
gap: 10px;
color: #28a745;
margin-bottom: 10px;
font-size: 1rem;
}
.third-party-services {
display: grid;
gap: 20px;
}
.service {
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
border-left: 4px solid #007bff;
}
.service h4 {
display: flex;
align-items: center;
gap: 10px;
color: #007bff;
margin-bottom: 10px;
font-size: 1rem;
}
.last-updated {
background: #e3f2fd;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
border: 1px solid #bbdefb;
}
.contact-card .card-header {
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}
.contact-details {
display: grid;
gap: 15px;
margin-top: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.contact-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.contact-item i {
color: var(--primary-color);
font-size: 18px;
width: 20px;
}
/* Cookie Consent Banner */
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, var(--primary-color) 0%, #1a2f31 100%);
color: white;
padding: 20px;
z-index: 10000;
display: none;
box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
}
.consent-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.consent-text {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.consent-text i {
font-size: 24px;
color: #ffd700;
}
.consent-text p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
}
.consent-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.accept-btn, .decline-btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.accept-btn {
background: #28a745;
color: white;
}
.accept-btn:hover {
background: #1e7e34;
transform: translateY(-2px);
}
.decline-btn {
background: transparent;
color: white;
border: 2px solid rgba(255,255,255,0.3);
}
.decline-btn:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
.learn-more {
color: #ffd700;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.learn-more:hover {
color: #ffed4e;
text-decoration: underline;
}
/* Responsive Design for Cookies Policy */
@media (max-width: 1024px) {
.policy-grid {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.cookies-header h1 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.cookies-header {
padding: 100px 0 60px;
}
.cookies-header h1 {
font-size: 2.5rem;
}
.cookies-header p {
font-size: 1rem;
}
.header-icon {
font-size: 3rem;
}
.cookies-content {
padding: 60px 0;
}
.policy-grid {
grid-template-columns: 1fr;
gap: 25px;
padding: 0 20px;
}
.card-header {
padding: 25px;
flex-direction: column;
text-align: center;
gap: 15px;
}
.icon-wrapper {
width: 50px;
height: 50px;
font-size: 20px;
}
.card-content {
padding: 25px;
}
.consent-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.consent-buttons {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 480px) {
.cookies-header h1 {
font-size: 2rem;
}
.cookies-header p {
font-size: 0.9rem;
}
.header-icon {
font-size: 2.5rem;
}
.policy-grid {
padding: 0 15px;
}
.card-header {
padding: 20px;
}
.card-content {
padding: 20px;
}
.cookie-type, .option, .service {
padding: 15px;
}
.contact-details {
gap: 10px;
}
.contact-item {
padding: 12px;
}
.consent-text {
flex-direction: column;
gap: 10px;
}
.consent-buttons {
gap: 10px;
}
.accept-btn, .decline-btn {
padding: 8px 16px;
font-size: 0.8rem;
}
}
/* Contact Section Styles */
.contact-section {
margin-top: 80px;
padding: 60px 0;
background: linear-gradient(135deg, var(--primary-color) 0%, #1a3a3d 100%);
border-radius: 20px;
text-align: center;
color: var(--white);
}
.contact-section h2 {
font-family: var(--heading-font);
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--white);
}
.contact-section p {
font-size: 1.1rem;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.contact-buttons {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.contact-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 32px;
background: var(--white);
color: var(--primary-color);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
background: #f8f9fa;
border-color: var(--primary-color);
}
.contact-btn:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.contact-btn i {
font-size: 1.2rem;
transition: transform 0.3s ease;
color: var(--primary-color);
}
.contact-btn:hover i {
transform: scale(1.1);
}
/* Ensure call buttons are accessible */
.contact-btn:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Add a subtle animation for call buttons */
.contact-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.contact-btn:hover::before {
left: 100%;
}
/* Add pulse animation for call buttons */
@keyframes pulse {
0% {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0 4px 15px rgba(44, 72, 75, 0.3);
}
100% {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
}
.contact-btn {
animation: pulse 2s infinite;
}
.contact-btn:hover {
animation: none;
}
@media (max-width: 768px) {
.contact-section {
margin-top: 60px;
padding: 40px 20px;
}
.contact-section h2 {
font-size: 2rem;
}
.contact-section p {
font-size: 1rem;
}
.contact-buttons {
flex-direction: column;
gap: 20px;
}
.contact-btn {
padding: 16px 28px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.contact-section {
margin-top: 40px;
padding: 30px 15px;
}
.contact-section h2 {
font-size: 1.8rem;
}
.contact-section p {
font-size: 0.95rem;
}
.contact-btn {
padding: 14px 24px;
font-size: 0.95rem;
}
}
/* Google Reviews Slider Section */
.reviews-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
transition: background 0.3s ease;
}
.reviews-section:hover {
background: linear-gradient(135deg, #f1f3f4 0%, #e3e6e8 100%);
}
.reviews-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../img/BG7.png') center/cover no-repeat;
opacity: 0.05;
z-index: 1;
}
.reviews-section .container {
position: relative;
z-index: 2;
}
.reviews-header {
text-align: center;
margin-bottom: 60px;
}
.reviews-title {
text-align: center;
}
.reviews-header h2 {
font-size: 48px;
margin-bottom: 20px;
color: var(--primary-color);
}
.reviews-header p {
font-size: 18px;
color: var(--text-color);
opacity: 0.8;
margin: 0;
}
.view-all-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--primary-color);
color: var(--white);
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(44, 72, 75, 0.2);
white-space: nowrap;
}
.view-all-btn:hover {
background: #1a2f31;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(44, 72, 75, 0.3);
color: var(--white);
}
.view-all-btn::after {
content: '→';
font-size: 18px;
transition: transform 0.3s ease;
}
.view-all-btn:hover::after {
transform: translateX(3px);
}
.reviews-slider {
position: relative;
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
cursor: grab;
transition: all 0.3s ease;
}
.reviews-slider:hover {
cursor: grab;
transform: scale(1.01);
}
.reviews-slider::after {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 8px;
height: 8px;
background: rgba(44, 72, 75, 0.3);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.reviews-slider:hover::after {
opacity: 1;
background: rgba(44, 72, 75, 0.6);
}
.reviews-track {
display: flex;
transition: transform 1.2s ease-in-out;
gap: 30px;
}
.review-card {
min-width: 380px;
background: var(--white);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(44, 72, 75, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.review-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.reviewer-info {
display: flex;
align-items: center;
gap: 15px;
}
.reviewer-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ff6b35, #f7931e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 18px;
text-transform: uppercase;
}
.reviewer-details h4 {
font-size: 16px;
font-weight: 600;
color: var(--primary-color);
margin: 0 0 5px 0;
font-family: var(--body-font);
}
.review-date {
font-size: 14px;
color: #666;
font-family: var(--body-font);
}
.google-logo {
flex-shrink: 0;
}
.review-rating {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
color: #ffc107;
font-size: 18px;
}
.verified-badge {
width: 20px;
height: 20px;
background: #4285F4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
}
.review-content p {
font-size: 16px;
line-height: 1.6;
color: var(--text-color);
margin: 0;
font-family: var(--body-font);
}
.reviews-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 40px;
}
.prev-btn, .next-btn {
width: 50px;
height: 50px;
border: 2px solid var(--primary-color);
background: transparent;
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 18px;
}
.prev-btn:hover, .next-btn:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.prev-btn:disabled, .next-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.reviews-dots {
display: flex;
gap: 10px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(44, 72, 75, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: var(--primary-color);
transform: scale(1.2);
}
.reviews-footer {
text-align: center;
}
/* Responsive Design for Reviews */
@media (max-width: 1024px) {
.review-card {
min-width: 340px;
padding: 25px;
}
.reviews-header h2 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.reviews-section {
padding: 60px 0;
}
.reviews-header h2 {
font-size: 32px;
}
.reviews-header p {
font-size: 16px;
}
.view-all-btn {
padding: 10px 20px;
font-size: 14px;
}
.review-card {
min-width: 300px;
padding: 20px;
}
.reviewer-avatar {
width: 40px;
height: 40px;
font-size: 16px;
}
.reviewer-details h4 {
font-size: 15px;
}
.review-date {
font-size: 13px;
}
.stars i {
font-size: 16px;
}
.review-content p {
font-size: 15px;
}
.reviews-controls {
gap: 20px;
}
.prev-btn, .next-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.reviews-header h2 {
font-size: 28px;
}
.review-card {
min-width: 280px;
padding: 18px;
}
.reviewer-info {
gap: 12px;
}
.reviewer-avatar {
width: 35px;
height: 35px;
font-size: 14px;
}
.reviewer-details h4 {
font-size: 14px;
}
.review-date {
font-size: 12px;
}
.stars i {
font-size: 15px;
}
.review-content p {
font-size: 14px;
}
}
/* Read More Button Styles */
.read-more-btn {
display: inline-block;
margin-top: 18px;
padding: 12px 28px;
background: var(--primary-color);
color: var(--white);
border-radius: 30px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
box-shadow: 0 2px 10px rgba(44, 72, 75, 0.08);
letter-spacing: 0.5px;
}
.read-more-btn:hover {
background: #1a3a3d;
color: #fff;
box-shadow: 0 4px 18px rgba(44, 72, 75, 0.15);
text-decoration: none;
}
@media (max-width: 768px) {
.read-more-btn {
padding: 10px 20px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.read-more-btn {
padding: 8px 14px;
font-size: 0.92rem;
}
}
/* Features Section Styles */
.features-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.features-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.feature-card {
background: var(--white);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(44, 72, 75, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color) 0%, #4a6b6e 50%, var(--primary-color) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(44, 72, 75, 0.15);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg, var(--primary-color) 0%, #4a6b6e 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.3s ease;
}
.feature-icon::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--primary-color) 0%, #4a6b6e 100%);
border-radius: 50%;
z-index: -1;
opacity: 0.3;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.feature-card:hover .feature-icon::before {
opacity: 0.6;
transform: scale(1.2);
}
.feature-icon i {
font-size: 32px;
color: var(--white);
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon i {
transform: scale(1.1);
}
.feature-content h3 {
font-family: var(--heading-font);
font-size: 20px;
color: var(--primary-color);
margin-bottom: 15px;
font-weight: 600;
transition: color 0.3s ease;
}
.feature-card:hover .feature-content h3 {
color: #1a3a3d;
}
.feature-content p {
color: #666;
line-height: 1.6;
font-size: 16px;
margin: 0;
transition: color 0.3s ease;
}
.feature-card:hover .feature-content p {
color: #555;
}
/* Responsive Design for Features Section */
@media (max-width: 1024px) {
.features-grid {
gap: 25px;
}
.feature-card {
padding: 35px 25px;
}
.feature-icon {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.feature-icon i {
font-size: 28px;
}
.feature-content h3 {
font-size: 22px;
}
.feature-content p {
font-size: 15px;
}
}
@media (max-width: 768px) {
.features-section {
padding: 60px 0;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.feature-card {
padding: 30px 20px;
}
.feature-icon {
width: 60px;
height: 60px;
margin-bottom: 18px;
}
.feature-icon i {
font-size: 24px;
}
.feature-content h3 {
font-size: 20px;
margin-bottom: 12px;
}
.feature-content p {
font-size: 14px;
}
}
@media (max-width: 480px) {
.features-section {
padding: 50px 0;
}
.features-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.feature-card {
padding: 25px 20px;
}
.feature-icon {
width: 55px;
height: 55px;
margin-bottom: 15px;
}
.feature-icon i {
font-size: 22px;
}
.feature-content h3 {
font-size: 18px;
margin-bottom: 10px;
}
.feature-content p {
font-size: 13px;
}
}
/* ========================================
BRAMPTON LOCATION PAGE STYLES
======================================== */
/* Hero Banner CTA Buttons */
.hero-cta-buttons {
display: flex;
gap: 20px;
margin-top: 30px;
flex-wrap: wrap;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 35px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cta-button.primary {
background: var(--primary-color);
color: var(--white);
}
.cta-button.primary:hover {
background: #1a3a3d;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.cta-button.secondary {
background: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.cta-button.secondary:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
}
/* Location Overview Section */
.location-overview-section {
padding: 80px 0;
background: var(--white);
}
.overview-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.overview-text h2 {
font-family: var(--heading-font);
font-size: 42px;
color: var(--primary-color);
margin-bottom: 25px;
line-height: 1.2;
}
.overview-text p {
font-size: 18px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.overview-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.feature-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.feature-item i {
color: var(--primary-color);
font-size: 20px;
}
.feature-item span {
font-size: 16px;
color: var(--primary-color);
font-weight: 500;
}
.overview-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.overview-image img {
width: 100%;
height: auto;
display: block;
}
/* Brampton Practice Areas Section */
.brampton-practice-areas {
padding: 80px 0;
background: var(--bg-color);
}
.section-title {
font-family: var(--heading-font);
font-size: 48px;
color: var(--primary-color);
text-align: center;
margin-bottom: 15px;
}
.section-subtitle {
text-align: center;
font-size: 18px;
color: #666;
margin-bottom: 50px;
}
.practice-areas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.practice-area-card {
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.practice-area-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.practice-area-card .card-icon {
width: 100%;
height: 200px;
overflow: hidden;
}
.practice-area-card .card-icon img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.practice-area-card:hover .card-icon img {
transform: scale(1.1);
}
.practice-area-card h3 {
font-family: var(--heading-font);
font-size: 24px;
color: var(--primary-color);
padding: 20px 25px 10px;
margin: 0;
}
.practice-area-card p {
padding: 0 25px;
color: #666;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
.card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
padding: 0 25px 25px;
text-decoration: none;
transition: gap 0.3s ease;
}
.card-link:hover {
gap: 15px;
}
.card-link i {
font-size: 14px;
}
/* Courthouse Info Section */
.courthouse-info-section {
padding: 80px 0;
background: var(--white);
}
.courthouse-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-top: 40px;
}
.courthouse-details h3 {
font-family: var(--heading-font);
font-size: 28px;
color: var(--primary-color);
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 15px;
}
.courthouse-details h3 i {
font-size: 32px;
}
.info-item {
display: flex;
gap: 20px;
margin-bottom: 25px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
border-left: 4px solid var(--primary-color);
}
.info-item i {
color: var(--primary-color);
font-size: 24px;
margin-top: 5px;
min-width: 24px;
}
.info-item strong {
color: var(--primary-color);
font-size: 18px;
display: block;
margin-bottom: 5px;
}
.info-item div {
flex: 1;
line-height: 1.8;
color: #555;
}
.contact-highlight {
background: var(--primary-color);
color: var(--white);
}
.contact-highlight i,
.contact-highlight strong,
.contact-highlight div {
color: var(--white);
}
.contact-highlight a {
color: var(--white);
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid var(--white);
}
.contact-highlight a:hover {
opacity: 0.8;
}
.courthouse-map {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
height: 100%;
min-height: 500px;
}
.courthouse-map iframe {
width: 100%;
height: 100%;
border: none;
}
/* Why Choose Us Section */
.why-choose-us-section {
padding: 80px 0;
background: var(--bg-color);
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.why-choose-item {
background: var(--white);
padding: 40px 30px;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.why-choose-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.icon-wrapper {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: all 0.3s ease;
}
.why-choose-item:hover .icon-wrapper {
transform: scale(1.1) rotate(5deg);
}
.icon-wrapper i {
font-size: 36px;
color: var(--white);
}
.why-choose-item h3 {
font-family: var(--heading-font);
font-size: 22px;
color: var(--primary-color);
margin-bottom: 15px;
}
.why-choose-item p {
color: #666;
line-height: 1.7;
font-size: 16px;
}
/* FAQ Section */
.faq-section {
padding: 80px 0;
background: var(--white);
}
.faq-container {
max-width: 900px;
margin: 40px auto 0;
}
.faq-item {
background: #f8f9fa;
border-radius: 10px;
margin-bottom: 15px;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: var(--primary-color);
}
.faq-item.active {
border-color: var(--primary-color);
box-shadow: 0 5px 20px rgba(44, 72, 75, 0.15);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
cursor: pointer;
transition: all 0.3s ease;
}
.faq-question:hover {
background: #e9ecef;
}
.faq-question h3 {
font-family: var(--body-font);
font-size: 18px;
color: var(--primary-color);
font-weight: 600;
margin: 0;
flex: 1;
padding-right: 20px;
}
.faq-question i {
color: var(--primary-color);
font-size: 20px;
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 1000px;
}
.faq-answer p {
padding: 0 30px 25px;
color: #555;
line-height: 1.8;
font-size: 16px;
}
/* CTA Section */
.cta-section {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary-color) 0%, #1a3a3d 100%);
text-align: center;
}
.cta-content h2 {
font-family: var(--heading-font);
font-size: 42px;
color: var(--white);
margin-bottom: 20px;
}
.cta-content p {
font-size: 18px;
color: var(--white);
margin-bottom: 40px;
opacity: 0.95;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.cta-btn.primary {
background: var(--white);
color: var(--primary-color);
}
.cta-btn.primary:hover {
background: #f8f9fa;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.cta-btn.secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.cta-btn.secondary:hover {
background: var(--white);
color: var(--primary-color);
transform: translateY(-3px);
}
/* Dropdown Menu Styles */
.nav-links .dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--white);
min-width: 200px;
padding: 10px 0;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
list-style: none;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li {
padding: 0;
}
.dropdown-menu li a {
display: block;
padding: 12px 25px;
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.dropdown-menu li a:hover {
background: var(--bg-color);
padding-left: 30px;
}
.dropdown > a i {
font-size: 12px;
margin-left: 5px;
transition: transform 0.3s ease;
}
.dropdown:hover > a i {
transform: rotate(180deg);
}
/* ========================================
RESPONSIVE STYLES FOR BRAMPTON PAGE
======================================== */
@media (max-width: 1024px) {
.overview-content {
gap: 40px;
}
.overview-text h2 {
font-size: 36px;
}
.courthouse-info-grid {
gap: 40px;
}
.section-title {
font-size: 40px;
}
}
@media (max-width: 768px) {
.hero-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.cta-button {
justify-content: center;
}
.overview-content {
grid-template-columns: 1fr;
gap: 40px;
}
.overview-features {
grid-template-columns: 1fr;
}
.overview-text h2 {
font-size: 32px;
}
.courthouse-info-grid {
grid-template-columns: 1fr;
}
.courthouse-map {
min-height: 400px;
}
.section-title {
font-size: 36px;
}
.cta-content h2 {
font-size: 32px;
}
.cta-buttons {
flex-direction: column;
align-items: stretch;
}
.cta-btn {
justify-content: center;
}
.why-choose-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.location-overview-section,
.brampton-practice-areas,
.courthouse-info-section,
.why-choose-us-section,
.faq-section,
.cta-section {
padding: 50px 0;
}
.overview-text h2 {
font-size: 28px;
}
.overview-text p {
font-size: 16px;
}
.section-title {
font-size: 28px;
}
.section-subtitle {
font-size: 16px;
}
.practice-area-card h3 {
font-size: 20px;
}
.courthouse-details h3 {
font-size: 24px;
}
.info-item {
flex-direction: column;
gap: 10px;
}
.faq-question h3 {
font-size: 16px;
}
.faq-answer p {
font-size: 15px;
}
.cta-content h2 {
font-size: 26px;
}
.cta-content p {
font-size: 16px;
}
}