/* Brand Colors */
:root {
--primary: #8488D9;
--primary-dark: #6266b7;
--secondary: #94F285;
--secondary-dark: #70cc62;
--accent: #F2DF80;
--dark: #0D0D0D;
--light: #FFFFFF;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--text-dark: #212529;
--text-muted: #6c757d;
--danger: #F28585;
--info: #85B1F2;
--font-primary: 'Montserrat', sans-serif;
--font-secondary: 'Poppins', sans-serif;
--transition-speed: 0.3s;
}
/* General Styles */
body {
font-family: var(--font-primary);
color: var(--text-dark);
overflow-x: hidden;
background-color: var(--light);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 600;
}
a {
color: var(--primary);
text-decoration: none;
transition: all var(--transition-speed) ease;
}
a:hover {
color: var(--primary-dark);
}
/* Button Styles */
.btn {
font-family: var(--font-secondary);
font-weight: 500;
border-radius: 4px;
padding: 10px 24px;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
color: white;
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-secondary {
background-color: var(--secondary);
border-color: var(--secondary);
color: var(--dark);
}
.btn-secondary:hover, .btn-secondary:focus {
background-color: var(--secondary-dark);
border-color: var(--secondary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-outline-primary {
color: var(--primary);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: white;
transform: translateY(-2px);
}
.btn-outline-light {
color: var(--light);
border-color: var(--light);
}
.btn-outline-light:hover {
background-color: var(--light);
color: var(--primary);
transform: translateY(-2px);
}
.btn-glow {
box-shadow: 0 0 15px rgba(132, 136, 217, 0.5);
}
.btn-glow:hover {
box-shadow: 0 0 20px rgba(132, 136, 217, 0.7);
}
.btn-hover-effect:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.btn-with-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-with-icon i {
transition: transform 0.3s ease;
}
.btn-with-icon:hover i {
transform: translateX(5px);
}
/* Form Elements */
.form-select, .form-control {
height: 50px;
font-size: 16px;
border-radius: 4px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.form-select:focus, .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(132, 136, 217, 0.25);
}
.custom-select {
position: relative;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
/* Navbar Styles */
.navbar {
padding: 15px 0;
transition: all 0.4s ease;
background-color: rgba(13, 13, 13, 0.9);
}
.navbar.scrolled {
background-color: rgba(132, 136, 217, 0.95);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 10px 0;
}
.navbar-brand {
display: flex;
align-items: center;
}
.logo-image {
height: 40px;
transition: all 0.3s ease;
}
.navbar.scrolled .logo-image {
height: 35px;
object-fit: contain;
}
.nav-link {
color: var(--light) !important;
font-weight: 500;
padding: 8px 16px !important;
position: relative;
transition: all 0.3s ease;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: var(--secondary);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover:after, .nav-link.active:after {
width: 70%;
}
.nav-link.active {
color: var(--secondary) !important;
}
/* Navbar toggler */
.navbar-toggler {
border: none;
padding: 0;
width: 30px;
height: 30px;
position: relative;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
background-image: none;
position: relative;
transition: all 0.3s ease;
}
.navbar-toggler-icon:before,
.navbar-toggler-icon:after,
.navbar-toggler-icon span {
content: '';
position: absolute;
height: 2px;
width: 100%;
background-color: var(--light);
left: 0;
transition: all 0.3s ease;
}
.navbar-toggler-icon:before {
top: 0;
}
.navbar-toggler-icon:after {
bottom: 0;
}
.navbar-toggler-icon span {
top: 50%;
transform: translateY(-50%);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
transform: translateY(-8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
opacity: 0;
}
.navbar-contact-icons {
display: flex;
gap: 15px;
}
.navbar-contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: var(--light);
transition: all 0.3s ease;
}
.navbar-contact-icon:hover {
background-color: var(--secondary);
color: var(--dark);
transform: translateY(-3px);
}
/* Hero Section Styles */
.hero {
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
padding: 120px 0 60px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.hero-text-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: var(--light);
position: relative;
z-index: 2;
margin-bottom: 50px;
}
.hero-logo-container {
margin-bottom: 30px;
}
.hero-logo {
height: 80px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero p {
font-size: 1.25rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.animate-title {
opacity: 0;
animation: fadeInUp 1s ease forwards 0.5s;
}
.animate-subtitle {
opacity: 0;
animation: fadeInUp 1s ease forwards 0.8s;
}
.animate-buttons {
opacity: 0;
animation: fadeInUp 1s ease forwards 1.1s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-bar {
position: relative;
z-index: 10;
max-width: 1000px;
margin: 0 auto;
}
.search-form {
padding: 25px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.search-btn {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
background-color: var(--primary);
border-color: var(--primary);
transition: all 0.3s ease;
}
.search-btn:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Glass Effect */
.glass-effect {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
/* Section Styles */
section {
padding: 80px 0;
position: relative;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.title-underline {
height: 4px;
width: 80px;
background: var(--primary);
margin: 0 auto 20px;
position: relative;
}
.title-underline:before {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 40px;
height: 10px;
background: var(--secondary);
transform: translateX(-50%);
border-radius: 10px;
}
.section-title p {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 800px;
margin: 0 auto;
}
/* Featured Properties Styles (moved to tennats page) */
.featured-properties {
background-color: var(--light-gray);
}
.property-grid {
position: relative;
}
.property-item {
transition: transform 0.3s ease;
}
.property-item:hover {
transform: translateY(-10px);
}
.property-card {
height: 100%;
border-radius: 10px;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.property-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.property-img {
position: relative;
overflow: hidden;
height: 250px;
}
.property-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-card:hover .property-img img {
transform: scale(1.1);
}
.property-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(13, 13, 13, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.property-card:hover .property-overlay {
opacity: 1;
}
.btn-view {
background-color: var(--primary);
color: white;
padding: 10px 20px;
border-radius: 4px;
font-weight: 600;
transform: translateY(20px);
transition: all 0.3s ease;
}
.property-card:hover .btn-view {
transform: translateY(0);
}
.btn-view:hover {
background-color: var(--primary-dark);
color: white;
}
.property-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
z-index: 2;
}
.badge-sale {
background-color: var(--primary);
color: white;
}
.badge-rent {
background-color: var(--secondary);
color: var(--dark);
}
.property-details {
padding: 20px;
}
.property-type-badge {
display: inline-block;
font-size: 12px;
padding: 3px 10px;
margin-bottom: 10px;
border-radius: 20px;
background-color: var(--light-gray);
color: var(--text-muted);
}
.property-details h3 {
margin-bottom: 10px;
font-size: 1.25rem;
font-weight: 700;
}
.property-details h3 a {
color: var(--text-dark);
}
.property-details h3 a:hover {
color: var(--primary);
}
.property-location {
display: block;
font-size: 14px;
color: var(--text-muted);
margin-bottom: 10px;
}
.property-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
}
.property-details p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
height: 42px;
}
.property-info {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.property-info-item {
display: flex;
align-items: center;
font-size: 14px;
color: var(--text-muted);
}
.property-info-item i {
margin-right: 5px;
color: var(--primary);
}
/* Conditional display for property features */
.property-info-item:empty,
.property-info-item:blank {
display: none;
}
.property-beds:empty,
.property-baths:empty,
.property-size:empty {
display: none;
}
/* Testimonials Section Styles */
.testimonials {
background-color: var(--light-gray);
position: relative;
}
.testimonials::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center/100%;
opacity: 0.5;
z-index: 0;
}
.testimonial-container {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.testimonial-card {
border-radius: 10px;
overflow: hidden;
padding: 0;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.testimonial-profile {
padding: 30px;
text-align: center;
background-color: var(--primary);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.profile-image {
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.2);
}
.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-info h4 {
color: white;
margin-bottom: 5px;
font-weight: 600;
}
.profile-info p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 15px;
font-size: 14px;
}
.rating {
color: var(--accent);
}
.testimonial-content {
padding: 40px;
position: relative;
height: 100%;
display: flex;
align-items: center;
background-color: white;
}
.quote-mark {
position: absolute;
top: 20px;
right: 20px;
font-size: 36px;
color: rgba(132, 136, 217, 0.1);
}
.testimonial-controls {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.testimonial-indicators {
display: flex;
gap: 8px;
}
.testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(132, 136, 217, 0.3);
border: none;
padding: 0;
transition: all 0.3s ease;
}
.testimonial-indicators button.active {
background-color: var(--primary);
transform: scale(1.2);
}
.testimonial-arrows {
display: flex;
gap: 15px;
}
.testimonial-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
transition: all 0.3s ease;
}
.testimonial-arrow:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* CTA Section Styles */
.cta-section {
padding: 100px 0;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://portal.quranfluent.com/users/u3/3464/files/Stones/Stones%20properties%20Leeds%20-%20Hero%20Image.jpg') no-repeat fixed center center/cover;
position: relative;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.4), transparent);
pointer-events: none;
}
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 50px 30px;
border-radius: 10px;
position: relative;
z-index: 1;
}
.cta-content h2 {
color: white;
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 700;
}
.cta-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 30px;
}
.cta-buttons {
flex-wrap: wrap;
}
/* Footer Styles */
/* Certification Logos Section */
.certification-logos-section {
background-color: #ffffff;
padding: 30px 0;
border-top: none;
}
.certification-logos-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.certification-logos-row a {
display: block;
transition: all 0.3s ease;
}
.certification-logos-row a:hover {
transform: translateY(-5px);
}
.certification-logo {
height: 40px;
width: auto;
object-fit: contain;
}
/* Footer Styles */
#Global-footer {
background-color: #14151f;
color: rgba(255, 255, 255, 0.7);
padding: 20px 0 30px;
font-family: var(--font-primary);
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Social Section */
.footer-social-section {
margin: 15px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.social-links {
display: flex;
gap: 20px;
padding: 10px 0 5px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: white;
transition: all 0.3s ease;
font-size: 18px;
}
.social-link:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
}
/* Footer Links Section */
.footer-links-section {
margin-bottom: 20px;
margin-top: 5px;
width: 100%;
}
.footer-links-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
gap: 8px;
}
.footer-links-row a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
white-space: nowrap;
}
.footer-links-row a:hover {
color: white;
}
.link-divider {
color: rgba(255, 255, 255, 0.4);
}
/* Policy Links Row */
.footer-policy-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
gap: 8px;
}
.footer-policy-row a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
white-space: nowrap;
}
.footer-policy-row a:hover {
color: white;
}
/* Company Details */
.footer-company-details {
margin-bottom: 30px;
max-width: 800px;
}
.footer-company-details p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
}
/* Company Logo */
.footer-logo-section {
margin-top: 20px;
}
.footer-logo {
height: 30px;
width: auto;
}
/* Scroll to Top Button */
.scroll-to-top-btn {
position: fixed;
bottom: 25px;
right: 25px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.scroll-to-top-btn.visible {
opacity: 0.8;
visibility: visible;
}
.scroll-to-top-btn:hover {
opacity: 1;
}
/* Property Slider Container */
.property-slider-container {
position: relative;
padding: 0 30px 20px;
margin-bottom: 20px;
}
/* Properties Slider */
.properties-slider {
width: 100%;
overflow: hidden;
position: relative;
}
.property-slides {
display: flex;
transition: transform 0.5s ease;
}
.property-slide {
flex: 0 0 100%;
max-width: 100%;
padding: 0 10px;
}
/* Compact Property Cards */
.compact-property-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.compact-property-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.property-image {
position: relative;
height: 180px;
overflow: hidden;
}
.property-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.compact-property-card:hover .property-image img {
transform: scale(1.05);
}
.property-tag {
position: absolute;
top: 10px;
left: 10px;
background-color: var(--primary);
color: white;
padding: 4px 8px;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
z-index: 2;
}
/* For Let Agreed tags */
.property-tag:contains('Let Agreed') {
background-color: var(--secondary);
}
.property-overlay-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent);
color: white;
}
.property-price {
font-size: 18px;
font-weight: 700;
margin-bottom: 2px;
}
.property-location {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.property-location i {
color: var(--secondary);
margin-right: 3px;
}
.property-content {
padding: 12px;
}
.property-content h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
height: 42px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.property-content h3 a {
color: var(--text-dark);
text-decoration: none;
}
.property-content h3 a:hover {
color: var(--primary);
}
.property-features {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
color: var(--text-muted);
font-size: 13px;
}
.property-features span {
display: flex;
align-items: center;
}
.property-features i {
color: var(--primary);
margin-right: 5px;
font-size: 14px;
}
/* Slider Navigation */
.slider-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 10;
}
.slider-prev, .slider-next {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.slider-prev:hover, .slider-next:hover {
background-color: var(--primary-dark);
transform: scale(1.1);
}
.slider-prev {
margin-left: -10px;
}
.slider-next {
margin-right: -10px;
}
/* Property Slider Fixes */
.property-slider-container {
position: relative;
padding: 0 50px 30px; /* Increased side padding to make room for arrows */
margin-bottom: 20px;
}
.slider-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
padding: 0 10px; /* Add padding to prevent buttons from being cut off */
z-index: 10;
width: 100%;
}
.slider-prev,
.slider-next {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
position: relative; /* Add position relative */
z-index: 20; /* Ensure buttons appear above content */
}
.slider-prev:hover,
.slider-next:hover {
background-color: var(--primary-dark);
transform: scale(1.1);
}
/* Give more space to the navigation buttons */
.slider-prev {
left: 5px; /* Move slightly inside to prevent cut-off */
}
.slider-next {
right: 5px; /* Move slightly inside to prevent cut-off */
}
/* About Us Page Styles */
/* Page Banner */
.page-banner {
height: 400px;
display: flex;
align-items: center;
position: relative;
padding-top: 120px;
}
.banner-content {
color: var(--light);
text-align: center;
position: relative;
z-index: 2;
}
.banner-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.breadcrumb {
display: inline-flex;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 30px;
margin: 0 auto;
}
.breadcrumb-item, .breadcrumb-item.active {
color: var(--light);
font-weight: 500;
}
.breadcrumb-item a {
color: var(--secondary);
text-decoration: none;
}
.breadcrumb-item a:hover {
color: var(--secondary-dark);
}
.breadcrumb-item+.breadcrumb-item::before {
color: var(--light);
}
/* About Story Section */
.about-story {
position: relative;
padding: 80px 0;
}
.about-image-container {
position: relative;
}
.about-main-image {
position: relative;
z-index: 2;
border: 8px solid white;
}
.about-image-box {
position: absolute;
width: 80%;
height: 80%;
bottom: -30px;
right: -30px;
background-color: var(--primary);
z-index: 1;
}
/* Values Cards */
.value-card {
text-align: center;
padding: 40px 30px;
height: 100%;
transition: all 0.3s ease;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.value-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.value-icon i {
font-size: 36px;
color: var(--primary);
transition: all 0.3s ease;
}
.value-card:hover .value-icon {
background-color: var(--primary);
}
.value-card:hover .value-icon i {
color: white;
transform: scale(1.1);
}
.value-card h3 {
margin-bottom: 15px;
font-weight: 600;
}
.value-card p {
color: var(--text-muted);
}
/* Odd numbered items */
.timeline-item:nth-child(odd) {
padding-right: calc(50% + 30px);
text-align: right;
}
.timeline-item:nth-child(odd) .timeline-date {
right: calc(50% + 50px);
}
.timeline-item:nth-child(odd) .timeline-content {
float: right;
}
/* Even numbered items */
.timeline-item:nth-child(even) {
padding-left: calc(50% + 30px);
text-align: left;
}
.timeline-item:nth-child(even) .timeline-date {
left: calc(50% + 50px);
}
.timeline-item:nth-child(even) .timeline-content {
float: left;
}
.timeline-content {
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
background-color: white;
transition: all 0.3s ease;
width: 100%;
max-width: 450px;
position: relative;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.timeline-content h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--primary);
}
.timeline-content p {
font-size: 0.95rem;
color: var(--text-muted);
margin-bottom: 0;
}
/* CEO Section Styles */
.about-ceo {
position: relative;
overflow: hidden;
}
.ceo-image-container {
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.ceo-image-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.ceo-image {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.ceo-image-container:hover .ceo-image {
transform: scale(1.03);
}
.ceo-message {
height: 100%;
position: relative;
z-index: 1;
}
.ceo-message h3 {
color: var(--primary);
font-weight: 600;
position: relative;
padding-bottom: 15px;
}
.ceo-message h3:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
.ceo-message p {
margin-bottom: 15px;
line-height: 1.8;
}
.ceo-signature {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ceo-signature p {
margin-bottom: 5px;
line-height: 1.4;
}
/* Mobile view for timeline */
@media (max-width: 991.98px) {
.timeline::before {
left: 40px;
}
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
padding-left: 80px;
padding-right: 0;
text-align: left;
}
.timeline-dot {
left: 40px;
}
.timeline-date,
.timeline-item:nth-child(odd) .timeline-date,
.timeline-item:nth-child(even) .timeline-date {
left: 0;
right: auto;
top: 18px;
width: 80px;
font-size: 0.9rem;
text-align: center;
}
.timeline-content,
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
width: 100%;
max-width: calc(100% - 80px);
float: none;
}
}
/* About Us Page Additional Styles */
.animate-timeline {
opacity: 1 !important;
transform: translateY(0) !important;
}
.timeline-item {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.timeline-item.active .timeline-content {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
/* Glass card effect for About page */
.glass-card {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
/* Testimonial card specific styles */
.testimonial-card-about {
position: relative;
padding: 40px;
text-align: center;
border-radius: 10px;
}
.testimonial-quote {
margin-bottom: 20px;
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.testimonial-author-info {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.testimonial-avatar {
border: 3px solid var(--primary);
transition: all 0.3s ease;
}
.testimonial-card-about:hover .testimonial-avatar {
transform: scale(1.1);
}
.testimonial-controls {
margin-top: 30px;
}
/* Timeline additional styles */
.timeline-dot {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-dot {
transform: scale(1.3);
box-shadow: 0 0 0 5px rgba(132, 136, 217, 0.3);
}
.timeline-date {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-date {
font-weight: 700;
color: var(--primary-dark);
}
/* Stats counter animation */
.stat-number {
display: inline-block;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Responsive improvements */
@media (max-width: 991.98px) {
.timeline-item.animate-timeline {
opacity: 1;
transform: translateY(0);
}
.testimonial-card-about {
padding: 30px 20px;
}
}
@media (max-width: 767.98px) {
.timeline-content h3 {
font-size: 1.1rem;
}
.timeline-date {
font-size: 0.9rem;
}
}
/* About Testimonials */
.testimonial-slider {
max-width: 900px;
margin: 0 auto;
}
.testimonial-card-about {
padding: 40px;
text-align: center;
border-radius: 10px;
position: relative;
background-color: white;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.testimonial-quote {
font-size: 36px;
color: var(--primary);
margin-bottom: 20px;
opacity: 0.3;
}
.testimonial-text {
font-size: 1.1rem;
font-style: italic;
line-height: 1.6;
margin-bottom: 30px;
color: var(--text-muted);
}
.testimonial-author-info {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--primary);
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-author-details h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.testimonial-author-details p {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 5px;
}
.rating {
color: var(--accent);
}
/* Stats Section */
.about-stats {
padding: 80px 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80') no-repeat center center/cover;
position: relative;
}
.stats-container {
padding: 50px 20px;
border-radius: 10px;
}
.stat-item {
color: white;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--secondary);
font-family: var(--font-secondary);
}
.stat-title {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Media Queries for About Page */
@media (max-width: 991.98px) {
.page-banner {
height: 300px;
}
.banner-content h1 {
font-size: 2.5rem;
}
.about-image-box {
width: 70%;
height: 70%;
bottom: -20px;
right: -20px;
}
.stat-number {
font-size: 2.5rem;
}
.stat-title {
font-size: 0.9rem;
}
.timeline::before {
left: 40px;
}
.timeline-item,
.timeline-item:nth-child(even) {
justify-content: flex-start;
padding-left: 80px;
width: 100%;
}
.timeline-dot {
left: 40px;
}
.timeline-date,
.timeline-item:nth-child(odd) .timeline-date,
.timeline-item:nth-child(even) .timeline-date {
left: 0;
right: auto;
top: 18px;
width: 80px;
font-size: 0.9rem;
}
.timeline-content {
width: 100%;
}
}
@media (max-width: 767.98px) {
.page-banner {
height: 250px;
}
.banner-content h1 {
font-size: 2rem;
}
.about-image-box {
display: none;
}
.testimonial-card-about {
padding: 30px 20px;
}
.testimonial-text {
font-size: 1rem;
}
}
@media (max-width: 575.98px) {
.page-banner {
height: 200px;
}
.banner-content h1 {
font-size: 1.75rem;
}
.breadcrumb {
padding: 8px 15px;
}
.stat-number {
font-size: 2rem;
}
.stat-title {
font-size: 0.8rem;
}
.testimonial-author-info {
flex-direction: column;
text-align: center;
}
}
/* Fix for About Us Story section */
.about-image-box {
z-index: 0; /* Lower z-index so it doesn't overlap text */
opacity: 0.5; /* Make it slightly transparent */
width: 70%; /* Make it smaller */
height: 70%; /* Make it smaller */
right: -20px; /* Move it less to the right */
bottom: -20px; /* Move it less to the bottom */
}
/* Ensure text has proper background */
.section-title.text-start h2,
.section-title.text-start .title-underline,
.col-lg-6 p, .col-lg-6 .lead, .col-lg-6 strong {
position: relative;
z-index: 1;
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
padding: 2px 5px;
display: inline-block;
}
.section-title.text-start .title-underline {
display: block;
padding: 0;
margin-left: 0;
margin-bottom: 20px;
}
/* Careers Page Styles */
.careers-hero {
height: 60vh;
min-height: 500px;
display: flex;
align-items: center;
padding: 120px 0 60px;
position: relative;
color: var(--light);
text-align: center;
}
.careers-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.careers-hero-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.careers-hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.careers-hero p {
font-size: 1.25rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.careers-description, .careers-form {
border-radius: 10px;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
}
.careers-description:hover, .careers-form:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.careers-list {
list-style: none;
padding-left: 0;
margin-bottom: 20px;
}
.careers-list li {
margin-bottom: 10px;
display: flex;
align-items: baseline;
}
.careers-list li i {
color: var(--primary);
margin-right: 10px;
}
.careers-divider {
height: 4px;
width: 60px;
background: var(--primary);
position: relative;
}
.careers-divider:before {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 30px;
height: 10px;
background: var(--secondary);
transform: translateX(-50%);
border-radius: 10px;
}
.input-group-text {
background-color: var(--primary);
color: white;
border: 1px solid var(--primary);
}
.benefit-card {
transition: all 0.3s ease;
border-radius: 10px;
overflow: hidden;
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.benefit-icon {
width: 70px;
height: 70px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.benefit-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.benefit-card:hover .benefit-icon {
background-color: var(--primary);
}
.benefit-card:hover .benefit-icon i {
color: white;
transform: scale(1.1);
}
.testimonial-card {
border-radius: 10px;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.testimonial-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.testimonial-image {
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
border: 3px solid var(--primary);
}
.testimonial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-content i {
color: rgba(132, 136, 217, 0.2);
position: absolute;
top: 0;
left: 0;
}
.accordion-item {
border: none;
margin-bottom: 15px;
overflow: hidden;
}
.accordion-button {
padding: 20px;
font-weight: 600;
background-color: white;
border-radius: 10px !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: rgba(132, 136, 217, 0.05);
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.1);
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px;
background-color: white;
}
/* Contact Page Specific Styles */
.page-header {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/placeholder/banner.jpg') no-repeat center center/cover;
padding: 150px 0 80px;
color: var(--light);
text-align: center;
position: relative;
}
.page-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-header .lead {
font-size: 1.25rem;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.breadcrumb {
display: inline-flex;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 30px;
margin-top: 20px;
}
.breadcrumb-item a {
color: var(--light);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--secondary);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--light);
}
/* Contact Cards */
.contact-info-card {
padding: 30px;
text-align: center;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
}
.contact-info-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.info-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.info-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.contact-info-card:hover .info-icon {
background-color: var(--primary);
}
.contact-info-card:hover .info-icon i {
color: white;
transform: scale(1.1);
}
.info-title {
margin-bottom: 15px;
font-size: 1.25rem;
font-weight: 600;
}
.info-content p {
color: var(--text-muted);
margin-bottom: 15px;
}
/* Contact Form */
.contact-form-container {
padding: 40px;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-form-container h2 {
font-weight: 700;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.contact-form-container h2:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
.form-label {
font-weight: 500;
margin-bottom: 8px;
}
.form-control, .form-select {
padding: 12px 15px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 16px;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(132, 136, 217, 0.25);
}
.form-check-input:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.form-success-message {
padding: 15px;
background-color: rgba(148, 242, 133, 0.2);
border-left: 4px solid var(--secondary);
border-radius: 4px;
margin-bottom: 20px;
display: none;
}
/* Map Container */
.map-container {
overflow: hidden;
border-radius: 10px;
height: 450px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* FAQ Section */
.accordion-item {
border: none;
margin-bottom: 15px;
overflow: hidden;
}
.accordion-button {
padding: 20px;
font-weight: 600;
font-size: 18px;
background-color: white;
color: var(--text-dark);
box-shadow: none;
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: rgba(132, 136, 217, 0.05);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: transparent;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px;
background-color: white;
}
/* Media Queries for Contact Page */
@media (max-width: 991.98px) {
.page-header {
padding: 120px 0 60px;
}
.page-header h1 {
font-size: 2.5rem;
}
.contact-form-container {
padding: 30px;
}
}
@media (max-width: 767.98px) {
.page-header {
padding: 100px 0 50px;
}
.page-header h1 {
font-size: 2rem;
}
.contact-info-card {
padding: 20px;
}
.map-container {
height: 350px;
}
.accordion-button {
font-size: 16px;
padding: 15px;
}
}
@media (max-width: 575.98px) {
.page-header h1 {
font-size: 1.75rem;
}
.page-header .lead {
font-size: 1rem;
}
.contact-form-container {
padding: 20px;
}
.info-icon {
width: 60px;
height: 60px;
}
.info-icon i {
font-size: 24px;
}
.map-container {
height: 300px;
}
}
/* Insurance Page Specific Styles */
/* Hero Section */
.insurance-hero {
height: 80vh;
min-height: 600px;
display: flex;
align-items: center;
padding: 120px 0 60px;
position: relative;
color: var(--light);
}
.insurance-hero h1 {
font-weight: 700;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.insurance-hero .lead {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Features Section */
.insurance-features-section {
background-color: var(--light);
position: relative;
overflow: hidden;
}
.insurance-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat top center/100%;
opacity: 0.5;
z-index: 0;
}
.insurance-feature-card {
height: 100%;
padding: 30px;
background-color: white;
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.insurance-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.insurance-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.insurance-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.insurance-feature-card:hover .insurance-icon {
background-color: var(--primary);
}
.insurance-feature-card:hover .insurance-icon i {
color: white;
transform: scale(1.1);
}
.insurance-feature-card h3 {
font-weight: 600;
margin-bottom: 15px;
}
.insurance-feature-card p {
color: var(--text-muted);
margin-bottom: 0;
}
/* Insurance Products Section */
.insurance-products {
background: linear-gradient(to right, var(--primary-dark), var(--primary));
position: relative;
overflow: hidden;
}
.insurance-products::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center/100%;
opacity: 0.3;
z-index: 0;
}
.product-card {
height: 100%;
padding: 30px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
color: var(--light);
position: relative;
z-index: 1;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.15);
}
.product-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
}
.product-icon i {
font-size: 30px;
color: var(--light);
transition: all 0.3s ease;
}
.product-card:hover .product-icon {
background-color: var(--secondary);
}
.product-card:hover .product-icon i {
color: var(--dark);
transform: scale(1.1);
}
.product-card h3 {
font-weight: 600;
margin-bottom: 15px;
}
.product-card p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
flex-grow: 1;
}
/* Insurance Form Styles */
#insurance-form {
background-color: var(--light-gray);
position: relative;
}
#insurance-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center/100%;
opacity: 0.4;
z-index: 0;
}
.quote-form-container {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background-color: white;
position: relative;
z-index: 1;
}
.quote-form-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.form-header {
background-color: var(--primary);
color: white;
padding: 25px 30px;
text-align: center;
}
.form-header h3 {
font-weight: 600;
margin-bottom: 10px;
}
.form-header p {
margin-bottom: 0;
opacity: 0.9;
}
.form-body {
padding: 30px;
}
#insurance-quote-form .input-group-text {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
#insurance-quote-form .form-control:focus,
#insurance-quote-form .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(132, 136, 217, 0.25);
}
#insurance-quote-form .btn-glow {
box-shadow: 0 0 15px rgba(132, 136, 217, 0.5);
transition: all 0.3s ease;
}
#insurance-quote-form .btn-glow:hover {
transform: translateY(-3px);
box-shadow: 0 0 20px rgba(132, 136, 217, 0.7);
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80') no-repeat fixed center center/cover;
position: relative;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.4), transparent);
pointer-events: none;
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.insurance-hero {
min-height: 500px;
height: auto;
padding: 100px 0 40px;
}
.insurance-hero h1 {
font-size: 2.5rem;
}
.insurance-feature-card,
.product-card {
margin-bottom: 20px;
}
.form-header,
.form-body {
padding: 20px;
}
}
@media (max-width: 767.98px) {
.insurance-hero h1 {
font-size: 2rem;
}
.insurance-hero .lead {
font-size: 1rem;
}
.insurance-icon,
.product-icon {
width: 60px;
height: 60px;
}
.insurance-icon i,
.product-icon i {
font-size: 24px;
}
.form-header,
.form-body {
padding: 15px;
}
}
@media (max-width: 575.98px) {
.insurance-hero h1 {
font-size: 1.75rem;
}
.section-title h2 {
font-size: 1.75rem;
}
.insurance-feature-card,
.product-card {
padding: 20px;
}
.insurance-feature-card h3,
.product-card h3 {
font-size: 1.25rem;
}
.btn {
padding: 8px 16px;
font-size: 14px;
}
}
/* ===================================
Lettings Page Styles
=================================== */
/* ===== LANDLORD SERVICES SECTION SERVICES CARDS ===== */
.management-services-section {
position: relative;
overflow: hidden;
}
.management-services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat top center/100%;
opacity: 0.5;
z-index: 0;
pointer-events: none;
}
/* Section title styling */
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
}
.title-underline {
width: 80px;
height: 4px;
background: linear-gradient(to right, #8488d9, #94f285);
margin: 0 auto 1.5rem;
border-radius: 2px;
}
.section-title p {
font-size: 1.1rem;
color: #666;
max-width: 700px;
margin: 0 auto;
}
/* Service cards */
.service-card {
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, #8488d9, #94f285);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
/* Premium/Gold card specific styles */
.service-card.premium {
border-top: 5px solid #f2df80;
}
.service-card.premium::before {
background: linear-gradient(to right, #f2df80, #d4b82c);
}
.service-card.premium .service-icon {
background: rgba(242, 223, 128, 0.15);
color: #d4b82c;
}
.service-card.premium .service-icon i {
color: #d4b82c;
}
.service-card.premium:hover .service-icon {
background: #f2df80;
}
.service-card.premium:hover .service-icon i {
color: #333;
}
/* Standard/Bronze card specific styles */
.service-card.standard {
border-top: 5px solid #cd7f32;
}
.service-card.standard::before {
background: linear-gradient(to right, #cd7f32, #b06728);
}
.service-card.standard .service-icon {
background: rgba(205, 127, 50, 0.15);
}
.service-card.standard .service-icon i {
color: #cd7f32;
}
.service-card.standard:hover .service-icon {
background: #cd7f32;
}
.service-card.standard:hover .service-icon i {
color: white;
}
/* Bronze badge style */
.badge.bg-bronze {
background: linear-gradient(45deg, #cd7f32, #8c5c2c) !important;
color: white !important;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
}
/* Service card header */
.service-card-header {
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.service-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.service-icon i {
font-size: 2rem;
transition: all 0.3s ease;
}
.service-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #333;
line-height: 1.3;
}
.badge.bg-gold {
background: linear-gradient(45deg, #f2df80, #d4b82c) !important;
color: #333;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
}
/* Service features */
.service-features {
flex-grow: 1;
margin-bottom: 1.5rem;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
/* ===== ticks & crosses for features lists ===== */
/* base list items */
.features-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.features-list li {
position: relative;
padding-left: 2.25rem; /* room for symbol */
padding-top: 0.45rem;
padding-bottom: 0.45rem;
color: #555;
font-size: 0.95rem;
line-height: 1.5;
display: block;
word-break: break-word;
}
/* base pseudo for symbol (keeps positioning consistent) */
.features-list li::before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.15rem;
height: 1.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
line-height: 1;
pointer-events: none;
content: ''; /* default empty to avoid accidental inherit */
}
/* CROSS (high specificity so it always overrides) */
.service-card .features-list li.cross::before,
.features-list li.cross::before,
.service-card.standard .features-list li.strikethrough::before {
content: '✖' !important;
color: #e03b3b !important; /* red cross */
font-size: 1rem;
}
/* GOLD: every item shows gold tick */
.service-card.premium .features-list li::before {
content: '✔';
color: #d4b82c;
}
/* BRONZE/standard: show tick only for li NOT .strikethrough */
.service-card.standard .features-list li:not(.strikethrough)::before {
content: '✔';
color: #cd7f32;
}
/* Ensure crosses/ticks never overlap wrapped text — adjust spacing if needed */
@media (max-width: 767.98px) {
.features-list li {
padding-left: 2rem;
font-size: 0.9rem;
}
.features-list li::before {
width: 1rem;
height: 1rem;
font-size: 0.9rem;
}
}
/* strike crossed out text */
/* Strike out text for crossed items (visual only) */
.features-list li.strikethrough {
text-decoration: line-through;
text-decoration-thickness: 1.5px; /* slightly bolder strike for clarity */
text-decoration-color: rgba(0,0,0,0.25); /* muted strike colour */
color: rgba(0,0,0,0.45); /* muted text colour to match strike */
}
/* Prevent the strike from touching the symbol: ensure pseudo stays out of text flow */
.features-list li.strikethrough::before {
/* keep existing red cross; ensure background is transparent */
background: transparent;
}
/* Optional: better contrast on hover or focus (if interactive) */
.features-list li.strikethrough:hover,
.features-list li.strikethrough:focus {
color: rgba(0,0,0,0.5);
}
/* Responsive tweak if strike looks too thick on small screens */
@media (max-width: 767.98px) {
.features-list li.strikethrough {
text-decoration-thickness: 1.2px;
}
}
/* Service card footer */
.service-card-footer {
margin-top: auto;
}
.details-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid rgba(242, 223, 128, 0.3);
color: #d4b82c;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: all 0.3s ease;
cursor: pointer;
}
.details-btn:hover {
background: #f2df80;
color: #333;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(242, 223, 128, 0.3);
}
.details-btn.bronze {
border-color: rgba(205, 127, 50, 0.3);
color: #cd7f32;
}
.details-btn.bronze:hover {
background: #cd7f32;
color: white;
box-shadow: 0 5px 15px rgba(205, 127, 50, 0.3);
}
/* Details content */
.details-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.details-content.active {
max-height: 2000px;
}
.details-inner {
padding: 1.5rem;
background: #f8f9fa;
border-radius: 12px;
margin-top: 1.5rem;
}
.details-inner h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #333;
}
.details-inner p {
color: #666;
margin-bottom: 1rem;
line-height: 1.6;
}
.details-inner ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.details-inner li {
margin-bottom: 0.5rem;
color: #555;
}
/* Bottom section text */
.service-info {
font-size: 1.1rem;
color: #666;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Button styles */
.btn-with-icon {
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.btn-with-icon:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Completely isolate the X from the strikethrough effect */
.service-card.standard .features-list li.strikethrough {
position: relative;
}
.service-card.standard .features-list li.strikethrough::before {
content: '✖' !important;
color: #e03b3b !important;
font-size: 1rem;
text-decoration: none !important;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.15rem;
height: 1.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: white; /* Add background to cover any line */
z-index: 1;
}
/* Create the strikethrough effect that doesn't cover the X */
.service-card.standard .features-list li.strikethrough {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
text-decoration-color: rgba(0,0,0,0.25);
color: rgba(0,0,0,0.45);
padding-left: 2.25rem;
}
/* Ensure the text doesn't get the background */
.service-card.standard .features-list li.strikethrough {
background: transparent;
}
/* ===== IPHONE COLOR FIX ===== */
/* Force colors for iOS devices */
@supports (-webkit-touch-callout: none) {
.service-card.premium .features-list li::before {
color: #d4b82c !important;
content: '✔' !important;
}
.service-card.standard .features-list li:not(.strikethrough)::before {
color: #cd7f32 !important;
content: '✔' !important;
}
.service-card.standard .features-list li.strikethrough::before {
color: #e03b3b !important;
content: '✖' !important;
background: white !important;
z-index: 10 !important;
text-decoration: none !important;
}
}
/* Additional mobile-specific fixes */
@media (max-width: 767.98px) {
.service-card.premium .features-list li::before,
.service-card.standard .features-list li:not(.strikethrough)::before,
.service-card.standard .features-list li.strikethrough::before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure symbols are visible */
.features-list li::before {
font-weight: 900 !important;
}
}
/* Popup Styles */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow-y: auto;
justify-content: center;
align-items: flex-start;
padding: 50px 20px;
}
.popup-content {
position: relative;
background-color: white;
padding: 40px;
border-radius: 10px;
max-width: 900px;
width: 100%;
margin: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-height: 80vh;
overflow-y: auto;
}
.close-popup {
position: absolute;
top: 15px;
right: 20px;
font-size: 30px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1;
}
.close-popup:hover {
color: var(--primary);
}
.popup-table {
font-size: 14px;
margin: 20px 0;
}
.popup-table th,
.popup-table td {
padding: 10px;
text-align: left;
}
/* Enhanced Property Badge Styles */
.property-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 10px 16px !important; /* Increased padding for larger size */
font-size: 16px !important; /* Larger font size */
font-weight: 700 !important; /* Bolder text */
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
z-index: 3;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; /* Enhanced shadow */
transition: all 0.3s ease;
transform: scale(1.1); /* Slightly enlarged */
}
/* Hover effect for badges */
.property-badge:hover {
transform: translateY(-3px) scale(1.15);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
}
/* Badge colors based on property type as per your brand colors */
.badge-Sale,
.badge-For-Sale,
.badge-ForSale {
background-color: #8488D9 !important; /* Purple color from your brand */
color: white !important;
}
.badge-Rent,
.badge-To-Let,
.badge-ToLet {
background-color: #94F285 !important; /* Green color from your brand */
color: #0D0D0D !important; /* Dark text for contrast */
}
.badge-Let-Agreed,
.badge-LetAgreed,
.badge-Let,
.badge-Sold {
background-color: #F28585 !important; /* Red color from your brand */
color: white !important;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.property-badge {
padding: 8px 14px !important;
font-size: 14px !important;
}
}
@media (max-width: 575.98px) {
.property-badge {
padding: 7px 12px !important;
font-size: 13px !important;
}
}
/* Repair Info Card */
.repair-info,
.repair-form {
height: 100%;
}
.repair-method h5 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
}
.repair-method p {
padding-left: 30px;
}
.contact-highlight {
color: var(--primary);
font-weight: 600;
transition: all 0.3s ease;
}
.contact-highlight:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Tenant Hero Section Styles */
.insurance-hero {
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://admin.stonesproperties.co.uk/users/u24/24676/Website-assets/Site%20images/Stones%20proerties%20Lettings.webp') no-repeat center center/cover;
height: 80vh;
min-height: 600px;
display: flex;
align-items: center;
padding: 120px 0 60px;
color: var(--light);
}
.insurance-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.insurance-hero h1 {
font-weight: 700;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.insurance-hero .lead {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Tenant Application Process */
.process-timeline {
position: relative;
padding: 20px 0;
}
.process-timeline::before {
content: '';
position: absolute;
width: 4px;
background-color: var(--primary);
top: 0;
bottom: 0;
left: 20px;
margin-left: -2px;
}
.process-step {
position: relative;
margin-bottom: 50px;
padding-left: 60px;
transition: all 0.3s ease;
}
.process-step:last-child {
margin-bottom: 0;
}
.process-number {
position: absolute;
width: 40px;
height: 40px;
left: 0;
background-color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.25rem;
z-index: 1;
transition: all 0.3s ease;
}
.process-content {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.process-step:hover .process-number,
.process-step-active .process-number {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(132, 136, 217, 0.7);
}
.process-step:hover .process-content,
.process-step-active .process-content {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.process-content h4 {
color: var(--primary);
margin-bottom: 10px;
font-weight: 600;
}
/* Tenant Resources Styles */
.resources-container {
display: flex;
flex-direction: column;
gap: 25px;
margin-top: 20px;
}
.resource-item {
display: flex;
align-items: flex-start;
padding: 15px;
border-radius: 8px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.resource-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.resource-icon {
flex: 0 0 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 24px;
color: white;
}
.pdf-icon {
background-color: #e74c3c;
}
.advice-icon {
background-color: #3498db;
}
.deposit-icon {
background-color: #27ae60;
}
.council-icon {
background-color: #00bcd4;
}
.shelter-icon {
background-color: #f39c12;
}
.resource-content {
flex: 1;
}
.resource-content h4 {
margin-bottom: 5px;
font-weight: 600;
}
.resource-content h4 a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.resource-content h4 a:hover {
color: var(--primary);
}
.resource-content p {
color: var(--text-muted);
margin-bottom: 10px;
font-size: 0.95rem;
}
.resource-link {
display: inline-flex;
align-items: center;
font-size: 0.9rem;
color: var(--primary);
font-weight: 500;
transition: all 0.3s ease;
}
.resource-link:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Tenant Resources Accordion Styles */
.tenant-resources-accordion {
margin-top: 30px;
}
.resource-panel {
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 25px;
border-radius: 12px;
}
.resource-panel:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
.resource-header {
cursor: pointer;
position: relative;
}
.resource-toggle-btn {
background: transparent;
border: none;
color: var(--primary);
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
transition: all 0.3s ease;
padding: 10px 0;
}
.resource-toggle-btn:hover {
color: var(--primary-dark);
}
.resource-toggle-btn i {
transition: transform 0.3s ease;
}
.resource-toggle-btn.active i {
transform: rotate(180deg);
}
.resource-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.resource-content.active {
max-height: 5000px;
}
.resource-panel h3 {
display: flex;
align-items: center;
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
transition: color 0.3s ease;
}
.resource-panel h3 i {
font-size: 1.2rem;
color: var(--primary);
margin-right: 15px;
transition: all 0.3s ease;
}
.resource-panel:hover h3 {
color: var(--primary);
}
.resource-panel:hover h3 i {
transform: scale(1.2);
}
/* Process steps within resources */
.resource-content .process-timeline {
padding-top: 10px;
padding-bottom: 20px;
}
.resource-content .process-step {
opacity: 1;
transform: translateY(0);
}
.resource-content .process-step:hover .process-number {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(132, 136, 217, 0.6);
}
.resource-content .process-content h4 {
font-size: 1.2rem;
margin-bottom: 12px;
}
/* Table styles for fees */
.resource-content .table th {
background-color: rgba(132, 136, 217, 0.1);
color: var(--text-dark);
font-weight: 600;
}
.resource-content .card-header {
background-color: var(--primary);
color: white;
}
/* Make the opened panel stand out */
.resource-panel.active {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
border-left: 3px solid var(--primary);
}
/* Animate header when panel is active */
.resource-panel.active .resource-header h3 {
color: var(--primary);
}
.resource-panel.active .resource-header h3 i {
transform: scale(1.2);
}
/* Resource panel responsive adjustments */
@media (max-width: 991.98px) {
.resource-panel h3 {
font-size: 1.3rem;
}
.resource-toggle-btn {
font-size: 15px;
}
}
@media (max-width: 767.98px) {
.resource-panel h3 {
font-size: 1.2rem;
}
.resource-toggle-btn {
font-size: 14px;
}
.resource-header, .resource-content .card-body {
padding: 15px !important;
}
}
@media (max-width: 575.98px) {
.resource-panel h3 {
font-size: 1.1rem;
}
.resource-toggle-btn {
font-size: 13px;
}
.resource-panel h3 i {
font-size: 1rem;
margin-right: 10px;
}
.resource-header, .resource-content .card-body {
padding: 12px !important;
}
}
/* Resources Grid Styles */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.resources-grid .resource-item {
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 10px;
}
.resources-grid .resource-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.resources-grid .resource-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
flex-shrink: 0;
}
.resources-grid .pdf-icon {
background-color: #e74c3c;
}
.resources-grid .advice-icon {
background-color: #3498db;
}
.resources-grid .deposit-icon {
background-color: #2ecc71;
}
.resources-grid .council-icon {
background-color: #9b59b6;
}
.resources-grid h4 {
font-size: 1.1rem;
font-weight: 600;
}
.resources-grid p {
flex-grow: 1;
margin-bottom: 0.5rem;
}
@media (max-width: 767.98px) {
.resources-grid {
grid-template-columns: 1fr;
}
}
/* Modern Resource Cards */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.resource-item {
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 25px;
display: flex;
flex-direction: column;
height: 100%;
}
.resource-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.resource-item .d-flex {
margin-bottom: 15px;
}
/* Fixed-size icons with proper proportions */
.resource-icon {
width: 48px;
height: 48px;
min-width: 48px; /* Prevents stretching */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.resource-icon i {
font-size: 20px;
color: white;
}
.pdf-icon {
background-color: #e74c3c;
}
.advice-icon {
background-color: #3498db;
}
.deposit-icon {
background-color: #2ecc71;
}
.council-icon {
background-color: #9b59b6;
}
.resource-content h4 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0;
line-height: 1.4;
}
.resource-content h4 a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.resource-content h4 a:hover {
color: var(--primary);
}
.resource-item p {
color: var(--text-muted);
margin: 15px 0;
flex-grow: 1;
font-size: 0.95rem;
line-height: 1.6;
}
.btn-outline-primary {
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
width: fit-content;
}
.btn-outline-primary i {
transition: transform 0.3s ease;
}
.btn-outline-primary:hover i {
transform: translateX(3px);
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.resources-grid {
grid-template-columns: 1fr;
}
.resource-icon {
width: 40px;
height: 40px;
min-width: 40px;
}
.resource-icon i {
font-size: 18px;
}
}
@media (max-width: 575.98px) {
.resource-item {
padding: 20px;
}
.resource-content h4 {
font-size: 1.1rem;
}
}
/* Modern Tab Buttons */
.modern-tab-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.modern-tab-btn {
background-color: white;
color: var(--text-dark);
border: none;
border-radius: 30px;
padding: 15px 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.modern-tab-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(132, 136, 217, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.modern-tab-btn:hover::before,
.modern-tab-btn.active::before {
opacity: 1;
}
.modern-tab-btn.active {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(132, 136, 217, 0.25);
}
.modern-tab-btn:hover:not(.active) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Modern Info Box for Fees and Resources */
.modern-info-box {
border-radius: 10px;
overflow: hidden;
background-color: white;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.modern-info-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.info-box-header {
background-color: var(--primary);
color: white;
padding: 20px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.info-box-header h3 {
margin: 0;
font-weight: 600;
font-size: 1.4rem;
}
.info-box-body {
padding: 25px;
color: var(--text-muted);
}
.info-box-body p {
margin-bottom: 20px;
}
.info-box-body .btn {
font-weight: 600;
padding: 10px 25px;
}
/* Agency Terms Section (formerly Landlord Agreement) */
.terms-card {
padding: 40px !important;
border-radius: 10px;
transition: all 0.3s ease;
}
.terms-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}
/* Popup Styles for Terms Agreement */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
overflow-y: auto;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
}
.popup-content {
position: relative;
background-color: white;
padding: 40px;
border-radius: 10px;
max-width: 900px;
width: 100%;
margin: 40px auto;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.popup-content h1,
.popup-content h2,
.popup-content h3,
.popup-content h4 {
color: var(--primary);
margin-top: 30px;
margin-bottom: 20px;
}
.popup-content h1:first-child {
margin-top: 0;
}
.popup-content p {
margin-bottom: 15px;
line-height: 1.6;
}
.popup-content .section {
margin-bottom: 30px;
}
.popup-content .clause {
margin-bottom: 25px;
}
.popup-content .sub-clause {
padding-left: 20px;
margin-top: 15px;
}
.popup-content ul, .popup-content ol {
margin-bottom: 15px;
padding-left: 25px;
}
.popup-content li {
margin-bottom: 8px;
}
.popup-content table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
}
.popup-content table,
.popup-content th,
.popup-content td {
border: 1px solid #ddd;
}
.popup-content th,
.popup-content td {
padding: 12px 15px;
text-align: left;
}
.popup-content th {
background-color: var(--light-gray);
font-weight: 600;
}
.popup-content tr:nth-child(even) {
background-color: #f9f9f9;
}
.close-popup {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1;
font-weight: 700;
}
.close-popup:hover {
color: var(--primary);
transform: scale(1.1);
}
.page-break {
height: 1px;
background-color: #ddd;
margin: 40px 0;
}
/* Disable text selection (copy/paste) in popup */
/* Ensure focus outlines remain visible for keyboard users */
#agreementModal :focus {
outline: 2px solid rgba(0,123,255,0.6);
outline-offset: 2px;
}
/* Small visually-hidden region for ARIA live messages */
#agreementModal .sr-live {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Responsive Tab Buttons */
@media (max-width: 767.98px) {
.modern-tab-buttons {
gap: 15px;
}
.modern-tab-btn {
padding: 12px 20px;
font-size: 14px;
}
}
@media (max-width: 575.98px) {
.modern-tab-buttons {
flex-direction: column;
width: 100%;
gap: 10px;
}
.modern-tab-btn {
width: 100%;
justify-content: center;
}
.popup-content {
padding: 30px 20px;
}
}
/* Why Choose Us core styles */
/* Image wrapper and image styles (desktop) */
#io7aj4 .why-image-wrapper,
#io7aj4 .image-container {
max-width: 540px;
width: 100%;
box-shadow: 0 12px 30px rgba(13,13,13,0.06);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
#io7aj4 .why-image,
#io7aj4 .image-container img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform .45s ease, filter .45s ease;
}
#io7aj4 .why-image-wrapper:hover .why-image,
#io7aj4 .image-container:hover img {
transform: scale(1.03);
filter: saturate(1.02);
}
/* Card / feature block */
#io7aj4 .choose-us-card,
#io7aj4 .choose-card {
background: #fff;
border-radius: 10px;
border: 1px solid rgba(22, 24, 27, 0.06);
box-shadow: 0 6px 18px rgba(13,13,13,0.04);
transition: transform .25s ease, box-shadow .25s ease;
align-items: flex-start;
}
#io7aj4 .choose-us-card:hover,
#io7aj4 .choose-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(13,13,13,0.07);
}
/* Icon circle */
#io7aj4 .choose-us-icon,
#io7aj4 .icon-circle,
#io7aj4 .icon-wrap .icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
font-size: 18px;
}
/* Soft background used behind icons */
#io7aj4 .bg-soft-primary,
#io7aj4 .choose-us-icon {
background: linear-gradient(180deg, rgba(132,136,217,0.12), rgba(132,136,217,0.06));
color: var(--bs-primary);
}
/* Minor typography tweaks */
#io7aj4 h1,
#io7aj4 h2,
#io7aj4 h5,
#io7aj4 h4 {
color: #0f1720;
}
#io7aj4 .lead {
color: #495057;
}
/* Make sure the section doesn't hug the sides on small screens */
@media (max-width: 767.98px) {
#io7aj4 .container {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* ===== Planet Page Specific Styles ===== */
/* Planet Hero Section */
.planet-hero {
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
height: 60vh;
min-height: 400px;
display: flex;
align-items: center;
padding-top: 80px;
color: var(--light);
overflow: hidden;
}
.planet-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(148, 242, 133, 0.3), transparent);
pointer-events: none;
}
.planet-hero-content {
text-align: center;
position: relative;
z-index: 2;
}
.planet-hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.planet-hero .lead {
font-size: 1.25rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.planet-badge {
display: inline-block;
background-color: var(--secondary);
color: var(--dark);
padding: 10px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 1.1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
animation: float 3s ease-in-out infinite;
}
.planet-badge i {
margin-right: 8px;
animation: rotate 6s linear infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Initiative Cards */
.initiative-row {
margin-top: 40px;
}
.initiative-card {
padding: 30px;
height: 100%;
text-align: center;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.initiative-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.initiative-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(148, 242, 133, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
}
.initiative-icon i {
font-size: 32px;
color: var(--secondary-dark);
transition: all 0.3s ease;
}
.initiative-card:hover .initiative-icon {
background-color: var(--secondary);
}
.initiative-card:hover .initiative-icon i {
color: var(--dark);
transform: scale(1.1);
}
.initiative-card h3 {
margin-bottom: 15px;
font-size: 1.5rem;
font-weight: 600;
color: var(--dark);
}
.initiative-card p {
margin-bottom: 20px;
color: var(--text-muted);
}
.initiative-hover {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
background-color: var(--secondary);
color: var(--dark);
padding: 12px;
font-weight: 600;
transition: all 0.3s ease;
opacity: 0;
}
.initiative-card:hover .initiative-hover {
bottom: 0;
opacity: 1;
}
/* Progress Section */
.progress-wrapper {
padding: 30px;
border-radius: 10px;
background-color: white;
height: 100%;
}
.progress-text-container {
padding: 30px;
border-radius: 10px;
background-color: white;
height: 100%;
}
.progress-container {
margin-bottom: 20px;
}
.progress-container h5 {
font-weight: 600;
color: var(--dark);
margin-bottom: 10px;
}
.progress-percentage {
font-weight: 700;
color: var(--secondary-dark);
}
.progress {
height: 10px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
background-color: var(--secondary);
position: relative;
transition: width 1.5s ease;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
background-size: 20px 20px;
animation: progressStripes 1s linear infinite;
}
@keyframes progressStripes {
0% {
background-position: 0 0;
}
100% {
background-position: 20px 0;
}
}
/* Stats Counter Section */
.stats-counter {
background-color: var(--secondary);
position: relative;
overflow: hidden;
}
.stats-counter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,') no-repeat center center/cover;
opacity: 0.3;
}
.counter-row {
padding: 40px 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.counter-box {
text-align: center;
color: var(--dark);
padding: 20px;
transition: all 0.3s ease;
}
.counter-box:hover {
transform: translateY(-5px);
}
.counter-number {
font-size: 3rem;
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
display: inline-block;
}
.percent {
font-size: 2rem;
font-weight: 700;
display: inline-block;
}
.counter-text {
font-size: 1.1rem;
font-weight: 600;
margin-top: 10px;
}
/* Commitment Section */
.commitment-image-container {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.commitment-image {
transition: transform 0.5s ease;
}
.commitment-image-container:hover .commitment-image {
transform: scale(1.05);
}
.commitment-list {
padding: 30px;
height: 100%;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.commitment-list h3 {
color: var(--dark);
font-weight: 600;
}
.commitment-items {
list-style-type: none;
padding-left: 0;
}
.commitment-items li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.commitment-items li i {
margin-right: 10px;
margin-top: 5px;
}
/* Timeline Section */
.timeline-wrapper {
position: relative;
max-width: 1200px;
margin: 50px auto;
}
.timeline {
position: relative;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--secondary);
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
border-radius: 3px;
}
.timeline-container {
padding: 10px 40px;
position: relative;
width: 50%;
animation: fadeInUp 1s;
}
.timeline-container.left {
left: 0;
}
.timeline-container.right {
left: 50%;
}
.timeline-container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -13px;
background-color: white;
border: 4px solid var(--secondary);
top: 15px;
border-radius: 50%;
z-index: 1;
}
.timeline-container.right::after {
left: -13px;
}
.timeline-content {
padding: 20px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.timeline-year {
position: absolute;
top: -30px;
font-size: 14px;
background-color: var(--secondary);
color: var(--dark);
padding: 5px 15px;
border-radius: 20px;
font-weight: 600;
}
.timeline-container.left .timeline-year {
right: 15px;
}
.timeline-container.right .timeline-year {
left: 15px;
}
.timeline-content h3 {
margin: 0 0 15px;
color: var(--dark);
font-weight: 600;
font-size: 1.3rem;
}
.timeline-content p {
margin: 0;
color: var(--text-muted);
}
/* CTA Eco Section */
.cta-eco {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1586974710160-55f48f417990?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80') no-repeat fixed center center/cover;
position: relative;
padding: 100px 0;
}
.cta-eco::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(148, 242, 133, 0.4), transparent);
pointer-events: none;
}
/* Responsive Styles for Planet Page */
@media (max-width: 991.98px) {
.planet-hero h1 {
font-size: 2.5rem;
}
.timeline::after {
left: 31px;
}
.timeline-container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.timeline-container.right {
left: 0;
}
.timeline-container.left::after, .timeline-container.right::after {
left: 18px;
}
.timeline-container.left .timeline-year,
.timeline-container.right .timeline-year {
left: 15px;
}
}
@media (max-width: 767.98px) {
.planet-hero {
min-height: 350px;
}
.planet-hero h1 {
font-size: 2rem;
}
.planet-badge {
font-size: 0.9rem;
padding: 8px 16px;
}
.counter-number {
font-size: 2.5rem;
}
.counter-text {
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.planet-hero h1 {
font-size: 1.75rem;
}
.planet-badge {
font-size: 0.8rem;
padding: 6px 12px;
}
.counter-number {
font-size: 2rem;
}
.timeline-content {
padding: 15px;
}
.timeline-year {
font-size: 12px;
padding: 4px 10px;
}
}
/* Sales page CSS */
/* Page Banner Styles */
.page-banner {
padding: 180px 0 100px;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('../images/placeholder/banner.jpg') no-repeat center center/cover;
position: relative;
color: var(--light);
text-align: center;
}
.page-banner h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-banner .lead {
font-size: 1.25rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Process Timeline Styles */
.process-timeline {
position: relative;
padding: 20px 0;
}
.process-timeline::before {
content: '';
position: absolute;
width: 4px;
background-color: var(--primary);
top: 0;
bottom: 0;
left: 20px;
margin-left: -2px;
}
.process-step {
position: relative;
margin-bottom: 50px;
padding-left: 60px;
transition: all 0.3s ease;
}
.process-step:last-child {
margin-bottom: 0;
}
.process-number {
position: absolute;
width: 40px;
height: 40px;
left: 0;
background-color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.25rem;
z-index: 1;
transition: all 0.3s ease;
}
.process-content {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.process-step:hover .process-number,
.process-step-active .process-number {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(132, 136, 217, 0.7);
}
.process-step:hover .process-content,
.process-step-active .process-content {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.process-content h4 {
color: var(--primary);
margin-bottom: 10px;
font-weight: 600;
}
/* Feature List Styles */
.feature-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.feature-list li {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
font-size: 1rem;
}
.feature-list li i {
margin-top: 3px;
flex-shrink: 0;
}
/* Valuation Form Styles */
.valuation-form {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.form-section {
position: relative;
}
.form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat top center/100%;
opacity: 0.5;
z-index: -1;
}
.btn-submit {
background-color: var(--primary);
color: white;
font-weight: 600;
padding: 12px 30px;
transition: all 0.3s ease;
}
.btn-submit:hover {
background-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(132, 136, 217, 0.3);
}
.success-alert {
display: none;
margin-top: 20px;
}
/* Direct Purchase Card Styles */
.direct-purchase-card {
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.direct-purchase-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.direct-purchase-card h3 {
color: var(--primary);
font-weight: 600;
}
/* FAQ Accordion Styles */
.accordion-item {
margin-bottom: 15px;
border: none;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.accordion-button {
font-weight: 600;
font-family: var(--font-secondary);
padding: 20px 25px;
background-color: white;
color: var(--text-dark);
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(132, 136, 217, 0.25);
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px 25px;
color: var(--text-muted);
line-height: 1.6;
}
/* Contact Highlight Styles */
.contact-highlight {
color: var(--primary);
font-weight: 600;
transition: all 0.3s ease;
}
.contact-highlight:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Responsive adjustments for the sales page */
@media (max-width: 991.98px) {
.page-banner {
padding: 150px 0 80px;
}
.page-banner h1 {
font-size: 2.5rem;
}
.process-timeline::before {
left: 15px;
}
.process-step {
padding-left: 50px;
}
}
@media (max-width: 767.98px) {
.page-banner {
padding: 120px 0 60px;
}
.page-banner h1 {
font-size: 2rem;
}
.process-step {
padding-left: 45px;
}
.process-number {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
@media (max-width: 575.98px) {
.page-banner h1 {
font-size: 1.75rem;
}
.page-banner .lead {
font-size: 1rem;
}
.feature-list li {
font-size: 0.9rem;
}
}
/* Valuation page styles */
/* Page Header Styles */
.page-header {
position: relative;
height: 300px;
display: flex;
align-items: center;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://portal.quranfluent.com/users/u3/3464/files/Stones/Stones%20properties%20Leeds%20-%20Hero%20Image.jpg') no-repeat center center/cover;
margin-top: 76px;
padding: 0 20px;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.page-header-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: var(--light);
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-header .lead {
font-size: 1.2rem;
margin-bottom: 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Valuation Section Styles */
.valuation-section {
position: relative;
background-color: var(--light);
}
/* Feature Cards */
.feature-card {
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
text-align: center;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.feature-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
background-color: var(--primary);
}
.feature-card:hover .feature-icon i {
color: white;
transform: scale(1.1);
}
.feature-card h3 {
margin-bottom: 15px;
font-size: 1.4rem;
font-weight: 600;
}
.feature-card p {
color: var(--text-muted);
margin-bottom: 0;
}
/* Valuation Form Styles */
.valuation-form-container {
border-radius: 10px;
overflow: hidden;
margin-bottom: 50px;
}
.form-header {
padding: 25px 30px;
background-color: var(--primary);
color: white;
text-align: center;
}
.form-header h3 {
margin-bottom: 10px;
font-weight: 600;
}
.form-header p {
margin-bottom: 0;
opacity: 0.9;
}
.form-body {
padding: 30px;
background-color: white;
}
/* Step Indicator */
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 20px;
width: 100%;
height: 2px;
background-color: #e9ecef;
left: 50%;
z-index: 0;
}
.step.active:not(:last-child)::after {
background-color: var(--primary);
}
.step-number {
width: 40px;
height: 40px;
background-color: #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 10px;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.step.active .step-number {
background-color: var(--primary);
color: white;
}
.step-title {
font-size: 14px;
color: var(--text-muted);
text-align: center;
transition: all 0.3s ease;
}
.step.active .step-title {
color: var(--primary);
font-weight: 600;
}
/* Form Steps */
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
/* Success Message */
.success-message {
text-align: center;
padding: 30px;
}
.success-icon {
font-size: 70px;
color: #28a745;
margin-bottom: 20px;
}
.success-message h3 {
color: var(--primary);
margin-bottom: 15px;
}
/* Why Choose Us Section */
.choose-us-card {
padding: 25px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.choose-us-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.choose-us-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
margin: 0 auto;
transition: all 0.3s ease;
}
.choose-us-icon i {
font-size: 20px;
color: var(--primary);
transition: all 0.3s ease;
}
.choose-us-card:hover .choose-us-icon {
background-color: var(--primary);
}
.choose-us-card:hover .choose-us-icon i {
color: white;
}
.choose-us-content {
padding-left: 15px;
}
.choose-us-content h4 {
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: 600;
}
.choose-us-content p {
color: var(--text-muted);
margin-bottom: 0;
font-size: 0.95rem;
}
/* FAQ Section Styles */
.accordion-item {
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.accordion-button {
font-weight: 600;
padding: 20px 25px;
background-color: white;
color: var(--text-dark);
}
.accordion-button:not(.collapsed) {
background-color: var(--primary);
color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(132, 136, 217, 0.25);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px 25px;
background-color: white;
color: var(--text-muted);
}
/* Properties Page Specific Styles */
.page-header {
padding: 120px 0 60px;
position: relative;
margin-bottom: 30px;
}
.page-header-content {
color: var(--light);
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.breadcrumb {
background-color: transparent;
padding: 0;
margin: 0;
}
.breadcrumb-item {
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb-item.active {
color: var(--secondary);
}
.breadcrumb-item a {
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.breadcrumb-item a:hover {
color: var(--secondary);
text-decoration: none;
}
/* Property Category Tabs */
.property-tabs .nav-pills {
background-color: var(--light-gray);
border-radius: 50px;
padding: 5px;
display: inline-flex;
}
.property-tabs .nav-link {
color: var(--text-dark);
border-radius: 50px;
padding: 10px 25px;
margin: 0 5px;
transition: all 0.3s ease;
font-weight: 500;
}
.property-tabs .nav-link:hover {
color: var(--primary);
}
.property-tabs .nav-link.active {
background-color: var(--primary);
color: white;
}
/* Property Badge Colors */
.property-badge {
font-size: 14px;
padding: 6px 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.badge-Sale, .badge-For-Sale, .badge-ForSale {
background-color: var(--primary);
color: white;
}
.badge-Rent, .badge-To-Let, .badge-ToLet {
background-color: var(--secondary);
color: var(--dark);
}
.badge-Let-Agreed, .badge-LetAgreed, .badge-Let {
background-color: #F28585;
color: white;
}
.badge-Sold {
background-color: #dc3545;
color: white;
}
/* Property Slider View */
.property-slider-container {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 50px;
}
.property-swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
height: auto;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--primary);
background-color: rgba(255, 255, 255, 0.8);
width: 40px;
height: 40px;
border-radius: 50%;
transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: var(--primary);
color: white;
transform: scale(1.1);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 18px;
}
.swiper-pagination-bullet {
background: var(--primary);
opacity: 0.7;
}
.swiper-pagination-bullet-active {
background: var(--primary);
opacity: 1;
}
/* View Selector Controls */
.view-selector .btn {
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
border-color: var(--primary);
color: var(--primary);
transition: all 0.3s ease;
}
.view-selector .btn.active {
background-color: var(--primary);
color: white;
}
.view-selector .btn:hover:not(.active) {
background-color: rgba(132, 136, 217, 0.1);
}
.view-selector .btn i {
margin-right: 4px;
}
/* Make property cards same height in grid view */
.property-grid .property-card {
height: 100%;
display: flex;
flex-direction: column;
}
.property-grid .property-details {
flex: 1;
display: flex;
flex-direction: column;
}
.property-grid .property-details p {
flex-grow: 1;
}
/* Property badges styling improvement */
.property-badge {
top: 10px;
left: 10px;
border-radius: 4px;
z-index: 3;
transform: translateY(-50%);
top: 15%;
}
/* Fix for mobile grid view */
@media (max-width: 767.98px) {
.property-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 15px;
margin-bottom: 15px;
-webkit-overflow-scrolling: touch;
}
.property-grid::-webkit-scrollbar {
height: 4px;
}
.property-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.property-grid::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 10px;
}
.property-grid .property-item {
flex: 0 0 90%;
max-width: 90%;
scroll-snap-align: start;
padding-right: 15px;
}
}
/* Mobile grid view adjustments */
@media (max-width: 767.98px) {
/* Ensure property grid and slider have proper display */
#grid-view {
display: none !important;
}
#slider-view {
display: block !important;
width: 100%;
visibility: visible !important;
opacity: 1 !important;
}
/* Make the slider container visible */
.property-slider-container {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
/* Fix swiper visibility */
.property-swiper {
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Make sure swiper wrapper and slides are visible */
.swiper-wrapper, .swiper-slide {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}
/* Force display of navigation controls */
.swiper-button-next, .swiper-button-prev {
display: flex !important;
visibility: visible !important;
}
/* Ensure pagination is visible */
.swiper-pagination {
display: block !important;
visibility: visible !important;
}
}
/* Property slider general fixes */
.property-slider-container {
position: relative;
padding-bottom: 50px;
}
.swiper-button-next,
.swiper-button-prev {
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
color: var(--primary);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 18px;
}
.swiper-pagination-bullet-active {
background-color: var(--primary) !important;
}
/* Property Details Page Specific Styles */
/* General page setup */
.property-detail-section {
padding-top: 120px;
padding-bottom: 80px;
}
/* Breadcrumb navigation */
.property-breadcrumb {
margin-bottom: 30px;
}
.breadcrumb {
background-color: transparent;
padding: 10px 0;
}
.breadcrumb-item a {
color: var(--primary);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: var(--primary-dark);
}
.breadcrumb-item.active {
color: var(--text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
content: "›";
color: var(--text-muted);
}
/* Property Gallery */
.property-gallery {
margin-bottom: 30px;
}
.property-main-image {
position: relative;
height: 500px;
overflow: hidden;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.property-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-main-image:hover img {
transform: scale(1.03);
}
.gallery-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.property-main-image:hover .gallery-controls {
opacity: 1;
pointer-events: all;
}
.gallery-control {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--primary);
font-size: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.gallery-control:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.property-thumbnails {
margin-bottom: 30px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1);
}
.property-thumbnails::-webkit-scrollbar {
height: 6px;
}
.property-thumbnails::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.property-thumbnails::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 10px;
}
.thumbnail-slider {
display: flex;
gap: 10px;
padding-bottom: 5px;
}
.property-thumbnail {
flex: 0 0 120px;
height: 80px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
}
.property-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.property-thumbnail.active {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.property-thumbnail:hover {
transform: translateY(-3px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* Property Header */
.property-header {
margin-bottom: 30px;
}
.property-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--text-dark);
}
.property-location {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 20px;
}
.property-location i {
color: var(--primary);
margin-right: 5px;
}
.property-price {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
padding: 10px 20px;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 8px;
display: inline-block;
margin-bottom: 20px;
}
/* Property Quick Actions */
.property-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.property-action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 6px;
color: var(--text-dark);
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.property-action-btn i {
color: var(--primary);
font-size: 16px;
transition: color 0.3s ease;
}
.property-action-btn:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.property-action-btn:hover i {
color: white;
}
/* Property Key Features */
.property-key-features {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-icon-item {
display: flex;
align-items: center;
gap: 10px;
flex: 1 0 calc(20% - 15px);
min-width: 150px;
}
.feature-icon-item i {
font-size: 24px;
color: var(--primary);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.feature-icon-item:hover i {
background-color: var(--primary);
color: white;
transform: scale(1.1);
}
.feature-text {
display: flex;
flex-direction: column;
}
.feature-value {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
}
.feature-label {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Property Tabs */
.property-tabs {
margin-bottom: 40px;
}
.nav-tabs {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.nav-tabs .nav-link {
border: none;
color: var(--text-muted);
font-weight: 500;
padding: 10px 20px;
transition: all 0.3s ease;
position: relative;
}
.nav-tabs .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background-color: var(--primary);
transition: width 0.3s ease;
}
.nav-tabs .nav-link:hover {
color: var(--primary);
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--primary);
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link.active::after {
width: 100%;
}
.tab-content {
padding: 20px 0;
}
/* Property Description Tab */
.property-description {
font-size: 1rem;
line-height: 1.8;
color: var(--text-dark);
}
.property-description p {
margin-bottom: 15px;
}
/* Property Details Tab */
.property-details-info {
padding: 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 10px;
}
.property-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.property-info-list li {
padding: 10px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
font-size: 0.95rem;
}
.property-info-list li:last-child {
border-bottom: none;
}
.property-info-list li strong {
color: var(--text-dark);
margin-right: 5px;
}
/* Property Features Tab */
.property-features-list {
padding: 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 10px;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.features-list li {
display: flex;
align-items: center;
padding: 8px 0;
font-size: 0.95rem;
}
.features-list li i {
color: var(--secondary);
margin-right: 10px;
font-size: 14px;
}
/* Property Map Tab */
.property-map {
margin-bottom: 20px;
}
.map-container {
height: 400px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Sidebar Styles */
.sidebar-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.sidebar-card:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.sidebar-card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.sidebar-card-title::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
/* Agent Card */
.agent-card {
text-align: center;
}
.agent-profile {
margin-bottom: 20px;
}
.agent-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 15px;
border: 3px solid rgba(132, 136, 217, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.agent-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.agent-name {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--text-dark);
}
.agent-title {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 15px;
}
.agent-contact {
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-agent {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
}
/* Inquiry Form */
.inquiry-card {
background-color: var(--light-gray);
}
/* Handle empty dynamic content */
.feature-icon-item:empty,
.feature-icon-item .feature-value:empty,
.property-info-list li:empty,
.features-list li:empty,
.agent-card:empty,
.similar-property-item:empty {
display: none;
}
/* Additional utility classes for empty content */
.empty-hide {
display: none !important;
}
/* Property Tabs Visibility Fix */
.property-detail-tabs .nav-link {
color: var(--text-dark) !important;
background-color: #f8f9fa;
border-radius: 4px 4px 0 0;
margin-right: 5px;
font-weight: 600;
}
.property-detail-tabs .nav-link:hover {
background-color: #e9ecef;
}
.property-detail-tabs .nav-link.active {
color: var(--primary) !important;
background-color: white;
border-bottom-color: white;
}
.property-detail-tabs .nav-link::after {
display: none;
}
/* Property thumbnail visibility fix */
.property-thumbnail {
display: block !important;
}
.property-thumbnail img[src=""],
.property-thumbnail img:not([src]),
.property-thumbnail img[src="undefined"],
.property-thumbnail img[src*="{{record"],
.property-thumbnail:empty {
display: none;
}
/* Map container styling */
.map-container {
height: 400px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #f8f9fa;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Floating Contact Button Styles */
.floating-contact-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
transition: all 0.3s ease;
}
.floating-contact-btn .btn {
border-radius: 50px;
padding: 12px 24px;
box-shadow: 0 4px 20px rgba(132, 136, 217, 0.4);
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
animation: pulse-light 2s infinite;
}
.floating-contact-btn .btn:hover {
transform: translateY(-5px);
box-shadow: 0 6px 25px rgba(132, 136, 217, 0.6);
animation: none;
}
@keyframes pulse-light {
0% {
box-shadow: 0 0 0 0 rgba(132, 136, 217, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(132, 136, 217, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(132, 136, 217, 0);
}
}
/* Scroll to top button visibility */
.floating-contact-btn.hideBtn {
opacity: 0;
pointer-events: none;
}
/* Button visible at top of form - hide the floating one */
.floating-contact-btn.near-form {
opacity: 0;
pointer-events: none;
}
/* Responsive styles */
@media (max-width: 991.98px) {
.property-main-image {
height: 400px;
}
.property-title {
font-size: 2rem;
}
.property-price {
font-size: 1.5rem;
}
.feature-icon-item {
flex: 1 0 calc(33.333% - 15px);
}
}
@media (max-width: 767.98px) {
.property-main-image {
height: 300px;
}
.property-title {
font-size: 1.75rem;
}
.property-actions {
justify-content: center;
}
.feature-icon-item {
flex: 1 0 calc(50% - 15px);
}
.sidebar-card {
padding: 20px;
}
}
@media (max-width: 575.98px) {
.property-detail-section {
padding-top: 100px;
}
.property-main-image {
height: 250px;
}
.property-title {
font-size: 1.5rem;
}
.property-price {
font-size: 1.25rem;
padding: 8px 15px;
}
.property-action-btn {
padding: 8px 12px;
font-size: 0.9rem;
}
.feature-icon-item {
flex: 1 0 100%;
}
.property-thumbnail {
flex: 0 0 100px;
height: 70px;
}
.similar-property-image {
flex: 0 0 80px;
}
}
/* CSS TO FIT ON MENU ON ONE LINE */
/* Navigation single line optimization */
@media (min-width: 992px) {
/* Smaller logo on larger screens */
.navbar-brand .logo-image {
height: 34px;
max-width: 170px;
}
/* Adjust navbar layout - more balanced spacing */
.navbar > .container {
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
}
/* Left side group (logo + menu) */
.navbar-brand, #navbarNav {
display: flex;
align-items: center;
}
/* Adjust the navbar collapse */
.navbar-collapse {
flex-grow: 1;
margin-left: 15px;
display: flex !important;
justify-content: center;
}
/* Nav items with better spacing */
.navbar .nav-link {
padding: 8px 12px !important;
font-size: 15px;
white-space: nowrap;
}
/* Contact icons */
.navbar-contact-icons.d-none.d-lg-flex {
margin-left: 15px;
gap: 10px;
}
.navbar-contact-icon {
width: 34px;
height: 34px;
}
/* Center the nav items relative to available space */
#navbarNav .navbar-nav {
width: 100%;
display: flex;
justify-content: space-between;
}
/* Extra large screens - more comfortable spacing */
@media (min-width: 1200px) {
.navbar .nav-link {
padding: 8px 14px !important;
font-size: 16px;
}
.navbar-collapse {
margin-left: 25px;
}
.navbar-contact-icons.d-none.d-lg-flex {
margin-left: 25px;
}
}
/* Very large screens - even more space */
@media (min-width: 1400px) {
.navbar .nav-link {
padding: 8px 16px !important;
}
.navbar-brand .logo-image {
height: 38px;
max-width: 190px;
}
}
}
/* Special handling for medium-large screens where space is tightest */
@media (min-width: 992px) and (max-width: 1199.98px) {
.navbar-brand {
margin-right: 0;
}
.navbar-brand .logo-image {
height: 30px;
max-width: 150px;
}
.navbar .nav-link {
padding: 8px 8px !important;
font-size: 14px;
}
.navbar-collapse {
margin-left: 10px;
}
.navbar-contact-icons.d-none.d-lg-flex {
margin-left: 10px;
gap: 8px;
}
.navbar-contact-icon {
width: 32px;
height: 32px;
}
}
/* Override Bootstrap's navbar-expand-lg default margin for nav */
@media (min-width: 992px) {
/* Reset Bootstrap's ms-auto on navbar-nav */
#navbarNav .navbar-nav.ms-auto {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Mobile Navigation Underline Fix */
@media (max-width: 991.98px) {
.nav-link:after {
width: 0;
height: 2px;
bottom: 0;
left: 0;
transform: none;
transition: width 0.3s ease;
}
.nav-link:hover:after,
.nav-link.active:after {
width: 40px;
transform: none;
left: 0;
}
.navbar-nav .nav-item {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0;
}
.navbar-nav .nav-item:last-child {
border-bottom: none;
}
.nav-link {
padding: 12px 15px !important;
}
/* Ensure the active indicator is properly aligned with text */
.nav-link.active {
position: relative;
padding-left: 15px !important;
}
.nav-link.active:after {
position: absolute;
left: 15px;
bottom: 6px;
background-color: var(--secondary);
}
}
/* Additional fix for very small screens */
@media (max-width: 575.98px) {
.nav-link {
padding: 10px 15px !important;
}
.nav-link.active:after {
bottom: 5px;
}
}
/* Page Banner (Hero) Consistent Styling */
.page-banner {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
padding: 150px 0 80px;
text-align: center;
color: var(--light);
position: relative;
margin-top: 76px; /* Account for fixed navbar */
}
.page-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.page-banner h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-banner p {
font-size: 1.25rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Responsive adjustments for the page banner */
@media (max-width: 991.98px) {
.page-banner {
padding: 120px 0 60px;
}
.page-banner h1 {
font-size: 2.5rem;
}
}
@media (max-width: 767.98px) {
.page-banner {
padding: 100px 0 50px;
}
.page-banner h1 {
font-size: 2rem;
}
}
@media (max-width: 575.98px) {
.page-banner {
padding: 90px 0 40px;
}
.page-banner h1 {
font-size: 1.75rem;
}
.page-banner p {
font-size: 1rem;
}
}
/* ==== HOMEPAGE FIXES ==== */
/* Hero Section Background Fix */
.hero {
color: var(--light);
}
/* Hero text and animations fixes */
.hero-text-container,
.hero h1,
.hero p {
color: var(--light);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.animate-title {
animation: fadeInUp 1s ease forwards 0.5s !important;
opacity: 0;
}
.animate-subtitle {
animation: fadeInUp 1s ease forwards 0.8s !important;
opacity: 0;
}
.animate-buttons {
animation: fadeInUp 1s ease forwards 1.1s !important;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Search form fixes */
.search-form {
background-color: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
/* Property card fixes */
.property-card {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.property-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.property-img {
position: relative;
overflow: hidden;
height: 250px;
}
.property-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-card:hover .property-img img {
transform: scale(1.1);
}
.property-overlay {
opacity: 0;
}
.property-card:hover .property-overlay {
opacity: 1;
}
.btn-view {
transform: translateY(20px);
transition: all 0.3s ease;
}
.property-card:hover .btn-view {
transform: translateY(0);
}
/* Testimonial section fixes */
.testimonial-card {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.testimonial-profile {
background-color: var(--primary);
}
.profile-info h4 {
color: white;
}
.profile-info p {
color: rgba(255, 255, 255, 0.8);
}
.testimonial-controls {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.testimonial-indicators {
display: flex;
gap: 8px;
}
.testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(132, 136, 217, 0.3);
border: none;
padding: 0;
transition: all 0.3s ease;
}
.testimonial-indicators button.active {
background-color: var(--primary);
transform: scale(1.2);
}
.testimonial-arrows {
display: flex;
gap: 15px;
}
/* Button style fixes */
.btn-glow {
box-shadow: 0 0 15px rgba(132, 136, 217, 0.5);
}
.btn-glow:hover {
box-shadow: 0 0 20px rgba(132, 136, 217, 0.7);
}
.btn-outline-light {
color: var(--light);
border-color: var(--light);
}
.btn-outline-light:hover {
background-color: var(--light);
color: var(--primary);
}
.btn-with-icon i {
transition: transform 0.3s ease;
}
.btn-with-icon:hover i {
transform: translateX(5px);
}
/* Section titles fix */
.title-underline {
height: 4px;
width: 80px;
background: var(--primary);
margin: 0 auto 20px;
position: relative;
}
.title-underline:before {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 40px;
height: 10px;
background: var(--secondary);
transform: translateX(-50%);
border-radius: 10px;
}
/* Glass card effect enhancement */
.glass-card {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
/* Fix for hero logo animation */
.hero-logo {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Special green header for Planet page when scrolled */
.navbar.scrolled-planet {
background-color: rgba(148, 242, 133, 0.95) !important; /* Using secondary color */
}
/* Adjust the nav-link text color for better contrast on green background */
.navbar.scrolled-planet .nav-link {
color: var(--dark) !important;
}
.navbar.scrolled-planet .nav-link:hover,
.navbar.scrolled-planet .nav-link.active {
color: var(--dark) !important;
}
.navbar.scrolled-planet .nav-link:after {
background-color: var(--dark);
}
/* Contact icons color adjustment for Planet page */
.navbar.scrolled-planet .navbar-contact-icon {
color: var(--dark);
}
.navbar.scrolled-planet .navbar-contact-icon:hover {
background-color: rgba(255, 255, 255, 0.3);
color: var(--dark);
}
/* Navbar toggler color for Planet page */
.navbar.scrolled-planet .navbar-toggler-icon:before,
.navbar.scrolled-planet .navbar-toggler-icon:after,
.navbar.scrolled-planet .navbar-toggler-icon span {
background-color: var(--dark);
}
/* Improved tab buttons for CMS compatibility */
.nav-pills.modern-tab-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
.nav-pills.modern-tab-buttons .nav-item {
margin: 0;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn {
background-color: white;
color: var(--text-dark);
border: none;
border-radius: 30px;
padding: 15px 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(132, 136, 217, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn:hover::before,
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn.active::before {
opacity: 1;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn.active {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(132, 136, 217, 0.25);
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn:hover:not(.active) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Tenant Fees Table Styles */
.tenant-fees .card {
transition: all 0.3s ease;
border-radius: 10px;
overflow: hidden;
}
.tenant-fees .card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.tenant-fees .card-header {
background-color: var(--primary);
padding: 20px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tenant-fees .card-header h3 {
margin: 0;
font-weight: 600;
font-size: 1.4rem;
}
.tenant-fees .card-body {
padding: 25px;
}
.tenant-fees .table {
margin-bottom: 0;
}
.tenant-fees .table th {
background-color: rgba(132, 136, 217, 0.1);
font-weight: 600;
}
.tenant-fees .list-unstyled li {
margin-bottom: 10px;
}
.tenant-fees .text-success {
color: var(--secondary-dark) !important;
}
/* Responsive adjustments for tenant fees */
@media (max-width: 767.98px) {
.tenant-fees .card-header {
padding: 15px 20px;
}
.tenant-fees .card-header h3 {
font-size: 1.2rem;
}
.tenant-fees .card-body {
padding: 20px;
}
.tenant-fees .table {
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.tenant-fees .card-header {
padding: 12px 15px;
}
.tenant-fees .card-body {
padding: 15px;
}
.tenant-fees .alert {
padding: 10px 15px;
font-size: 0.9rem;
}
}
/* FORM Confirmation Page / thanks page Styles */
.confirmation-section {
padding: 150px 0 60px;
background: linear-gradient(rgba(132, 136, 217, 0.05), rgba(132, 136, 217, 0.1));
position: relative;
}
.confirmation-card {
padding: 40px;
text-align: center;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
background-color: white;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.confirmation-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.confirmation-icon {
width: 100px;
height: 100px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(148, 242, 133, 0.15);
border-radius: 50%;
position: relative;
}
.confirmation-icon i {
font-size: 50px;
color: var(--secondary-dark);
animation: pulse 2s infinite;
}
.confirmation-card h1 {
font-weight: 700;
margin-bottom: 15px;
color: var(--primary);
}
.confirmation-card .lead {
font-size: 1.25rem;
margin-bottom: 25px;
color: var(--text-dark);
}
.confirmation-details {
max-width: 600px;
margin: 0 auto 30px;
}
.confirmation-details p {
color: var(--text-muted);
line-height: 1.6;
}
.confirmation-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.confirmation-actions .btn {
min-width: 180px;
transition: all 0.3s ease;
}
.confirmation-actions .btn:hover {
transform: translateY(-3px);
}
.btn-success {
background-color: #25D366;
border-color: #25D366;
color: white;
}
.btn-success:hover {
background-color: #128C7E;
border-color: #128C7E;
color: white;
}
/* Next Steps Section */
.next-steps-section {
padding: 80px 0;
background-color: var(--light);
}
.next-step-card {
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border-radius: 10px;
}
.next-step-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.step-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.step-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.next-step-card:hover .step-icon {
background-color: var(--primary);
}
.next-step-card:hover .step-icon i {
color: white;
transform: scale(1.1);
}
.next-step-card h3 {
font-weight: 600;
margin-bottom: 15px;
color: var(--text-dark);
}
.next-step-card p {
color: var(--text-muted);
margin-bottom: 0;
}
.btn-with-icon i {
margin-right: 12px; /* Increase this value for more spacing */
}
/* Privacy page*/
/* Page container adjustments */
#privacy-page.privacy-page {
background: linear-gradient(180deg, rgba(244,244,248,0.6), rgba(255,255,255,1));
color: var(--dark);
padding-top: 100px; /* allow for fixed header */
padding-bottom: 70px;
font-family: var(--font-primary, "Montserrat", sans-serif);
}
/* Hero */
.privacy-hero {
padding: 48px 0;
background: linear-gradient(90deg, rgba(132,136,217,0.06), rgba(148,242,133,0.02));
border-bottom: 1px solid rgba(13,13,13,0.04);
}
.privacy-hero-inner {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.privacy-title {
font-family: var(--font-secondary, "Poppins", sans-serif);
font-size: 2.25rem;
margin: 0 0 8px;
color: var(--dark);
letter-spacing: -0.3px;
}
.privacy-subtitle {
margin: 0;
color: var(--text-muted, #6c757d);
font-size: 1.05rem;
}
/* Main card */
.privacy-content {
margin-top: 36px;
max-width: 1100px;
padding-left: 16px;
padding-right: 16px;
}
.privacy-card {
background: linear-gradient(180deg, #fff, #fbfbff);
border-radius: 12px;
padding: 26px;
box-shadow: 0 10px 30px rgba(13,13,13,0.06);
border: 1px solid rgba(132,136,217,0.08);
}
/* Two-column grid inside card */
.privacy-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
}
/* Privacy list (left column) */
.privacy-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
}
.privacy-list li {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px;
border-radius: 10px;
background-color: rgba(132,136,217,0.03);
border: 1px solid rgba(132,136,217,0.04);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.privacy-list li:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(13,13,13,0.06);
}
.privacy-list .icon {
min-width: 52px;
height: 52px;
border-radius: 10px;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(132,136,217,0.14), rgba(132,136,217,0.06));
color: var(--primary);
font-size: 22px;
flex-shrink: 0;
}
.privacy-list .text h3 {
margin: 0 0 6px;
font-size: 1.05rem;
color: var(--dark);
font-weight: 600;
}
.privacy-list .text p {
margin: 0;
color: var(--text-muted, #6c757d);
font-size: 0.97rem;
line-height: 1.5;
}
/* Aside (contact block) */
.privacy-contact {
background: linear-gradient(180deg, #ffffff, #fbfefb);
border-radius: 10px;
padding: 18px;
border: 1px solid rgba(148,242,133,0.08);
box-shadow: 0 8px 24px rgba(13,13,13,0.04);
position: relative;
}
.privacy-contact h4 {
margin: 0 0 10px;
font-size: 1.05rem;
color: var(--dark);
font-weight: 600;
}
.privacy-contact p {
margin: 0 0 12px;
color: var(--text-muted);
font-size: 0.95rem;
}
.contact-block {
font-style: normal;
color: var(--text-dark);
margin-bottom: 14px;
font-size: 0.95rem;
line-height: 1.5;
}
.contact-block a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.contact-block a:hover {
color: var(--primary-dark, #6266b7);
text-decoration: underline;
}
.policy-dates .muted {
color: var(--text-muted);
font-size: 0.9rem;
}
/* Return button */
.btn-return {
display: inline-block;
margin-top: 8px;
padding: 10px 18px;
font-weight: 600;
border-radius: 8px;
text-transform: none;
}
/* Full policy text area */
.policy-details {
margin-top: 20px;
padding-top: 12px;
border-top: 1px dashed rgba(13,13,13,0.04);
}
.policy-details h3 {
margin: 0 0 12px;
font-size: 1.05rem;
color: var(--dark);
font-weight: 600;
}
.policy-body p {
margin: 0 0 12px;
color: var(--text-muted);
line-height: 1.7;
font-size: 0.98rem;
}
/* Utility */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Small screens fallback: stack columns */
@media (max-width: 991.98px) {
.privacy-grid {
grid-template-columns: 1fr;
}
.privacy-contact {
order: 2;
}
.privacy-list {
order: 1;
}
}
/* Tiny screens: spacing and text sizes */
@media (max-width: 575.98px) {
.privacy-hero {
padding: 28px 0;
}
.privacy-title {
font-size: 1.6rem;
}
.privacy-subtitle {
font-size: 0.98rem;
}
.privacy-card {
padding: 18px;
}
.privacy-list .icon {
min-width: 46px;
height: 46px;
font-size: 20px;
}
.privacy-list .text h3 {
font-size: 1rem;
}
.privacy-list .text p,
.policy-body p,
.contact-block {
font-size: 0.95rem;
}
.privacy-contact {
padding: 14px;
}
}
/* terms of service */
/* Page container */
#terms-page.terms-page {
background: linear-gradient(180deg, rgba(248,248,252,0.6), #ffffff);
color: var(--dark);
padding-top: 100px; /* allow for fixed header */
padding-bottom: 70px;
font-family: var(--font-primary);
}
/* Hero */
.terms-hero {
padding: 44px 0;
background: linear-gradient(90deg, rgba(132,136,217,0.04), rgba(148,242,133,0.02));
border-bottom: 1px solid rgba(13,13,13,0.04);
}
.terms-hero-inner {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.terms-title {
font-family: var(--font-secondary);
font-size: 2.1rem;
margin: 0 0 8px;
letter-spacing: -0.3px;
color: var(--dark);
}
.terms-subtitle {
margin: 0;
color: var(--text-muted);
font-size: 1.02rem;
}
/* Content card */
.terms-content {
margin-top: 28px;
max-width: 1100px;
padding-left: 16px;
padding-right: 16px;
}
.terms-card {
background: linear-gradient(180deg, #fff, #fbfbff);
border-radius: 12px;
padding: 24px;
box-shadow: 0 10px 30px rgba(13,13,13,0.06);
border: 1px solid var(--card-border);
}
/* Grid layout: main + aside */
.terms-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
}
/* Main column */
.terms-main {
min-width: 0;
}
.terms-section {
margin-bottom: 18px;
padding: 12px;
border-radius: 10px;
background-color: rgba(132,136,217,0.03);
border: 1px solid rgba(132,136,217,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.terms-section:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(13,13,13,0.05);
}
.terms-section-title {
margin: 0 0 8px;
font-size: 1.02rem;
color: var(--dark);
font-weight: 600;
}
.terms-body p {
margin: 0 0 10px;
color: var(--text-muted);
line-height: 1.6;
font-size: 0.98rem;
}
/* Lists inside terms */
.terms-list {
margin: 8px 0 10px 20px;
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.6;
}
/* Aside */
.terms-aside {
background: linear-gradient(180deg, #ffffff, #fbfefb);
border-radius: 10px;
padding: 18px;
border: 1px solid rgba(148,242,133,0.08);
box-shadow: 0 8px 24px rgba(13,13,13,0.04);
}
.terms-aside-title {
margin: 0 0 8px;
font-size: 1.02rem;
color: var(--dark);
font-weight: 600;
}
.terms-aside-text {
margin: 0 0 12px;
color: var(--text-muted);
font-size: 0.95rem;
}
/* Contact block */
.contact-block {
font-style: normal;
color: var(--dark);
margin-bottom: 12px;
font-size: 0.95rem;
line-height: 1.5;
}
.contact-block a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.contact-block a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.terms-contact h5 {
margin: 0 0 8px;
font-size: 0.95rem;
color: var(--dark);
}
/* Buttons */
.btn-return {
display: inline-block;
margin-top: 8px;
padding: 10px 18px;
font-weight: 600;
border-radius: 8px;
text-transform: none;
background: var(--primary);
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
}
/* Small note */
.terms-note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed rgba(13,13,13,0.04);
}
.small.muted {
color: var(--text-muted);
font-size: 0.9rem;
}
/* Visually hidden utility */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Focus visibility for keyboard users */
.terms-card :focus {
outline: 3px solid rgba(132,136,217,0.18);
outline-offset: 3px;
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
.terms-section,
.terms-card,
.terms-aside {
transition: none !important;
animation: none !important;
}
}
/* Print friendly */
@media print {
.terms-hero,
.btn-return,
.terms-aside {
display: none;
}
.terms-card {
box-shadow: none;
border: none;
}
.terms-body p, .terms-list {
color: #000;
}
}
/* Mobile logo size adjustments */
@media (max-width: 991.98px) {
/* Smaller logo on mobile */
.navbar-brand .logo-image {
height: 28px;
max-width: 140px;
}
/* Adjust spacing between logo and contact icons */
.navbar-brand {
margin-right: 0;
padding-right: 0;
}
/* Make container more compact */
.navbar > .container {
padding-left: 10px;
padding-right: 10px;
}
/* Reduce contact icons size slightly */
.navbar-contact-icon {
width: 32px;
height: 32px;
}
/* Add gap between contact icons */
.navbar-contact-icons {
gap: 8px;
}
}
/* Extra small devices */
@media (max-width: 575.98px) {
.navbar-brand .logo-image {
height: 24px;
max-width: 120px;
}
.navbar-contact-icon {
width: 30px;
height: 30px;
}
.navbar-contact-icons {
gap: 6px;
}
}
/* TESTOMONIALS FINAL FIX */
/* Fix for testimonial content display */
.testimonial-content p {
display: block !important;
overflow: visible !important;
height: auto !important;
line-height: 1.6;
color: var(--text-muted);
font-style: italic;
margin-bottom: 0;
/* Remove any properties that limit height or truncate text */
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
line-clamp: unset;
text-overflow: unset;
white-space: normal;
}
/* Ensure testimonial content has proper padding and fits content */
.testimonial-content {
padding: 30px;
position: relative;
height: auto !important;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background-color: white;
}
/* Fix for specific testimonial paragraphs with IDs */
#icxt2j, #if2k5a, #ic64zj, #is65xb, .p1 {
display: block !important;
height: auto !important;
overflow: visible !important;
margin-bottom: 10px;
}
/* Adjust testimonial card structure */
.testimonial-card {
height: auto !important;
display: flex;
flex-direction: column;
}
.testimonial-card .row {
flex: 1;
height: 100%;
}
/* Make profile section height auto */
.testimonial-profile {
height: auto !important;
padding: 30px 20px;
}
/* Adjust carousel to adapt to content height */
.carousel-item {
height: auto !important;
}
/* Adjust quote mark position */
.quote-mark {
position: absolute;
top: 15px;
right: 15px;
font-size: 28px;
color: rgba(132, 136, 217, 0.1);
}
/* ===== RESPONSIVE FORM STYLING FOR STONES PROPERTIES ===== */
.dataforms {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 2rem 0;
width: 100%;
}
.custom-form {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 12px 36px rgba(13, 13, 13, 0.12);
border: 1px solid rgba(132, 136, 217, 0.15);
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
}
.custom-form fieldset {
border: none;
padding: 0;
margin: 0;
width: 100%;
}
.custom-form ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
.custom-form li {
margin-bottom: 0;
position: relative;
width: 100%;
}
/* Make specific form elements span full width */
#datafieldwrapper-0-116878, /* Repair details textarea */
#datafieldwrapper-0-116879, /* Photos file input */
.submit-li {
grid-column: 1 / -1;
}
/* Form Labels */
.form-field-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: #0D0D0D;
font-size: 0.95rem;
letter-spacing: 0.3px;
width: 100%;
}
/* Input Fields - Keep red left border for required fields */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid #e8e8e8;
border-left: 4px solid #F28585; /* Red left border for required fields */
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
background-color: #f8f9fa;
box-sizing: border-box;
color: #0D0D0D;
font-family: inherit;
-webkit-appearance: none; /* Remove iOS shadow */
}
.custom-form input[type="text"]:hover,
.custom-form input[type="email"]:hover,
.custom-form input[type="tel"]:hover,
.custom-form textarea:hover,
.custom-form select:hover {
border-color: #c0c3e5;
border-left-color: #F28585; /* Maintain red on hover */
}
.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form textarea:focus,
.custom-form select:focus {
outline: none;
border-color: #8488D9;
border-left-color: #8488D9; /* Purple left border on focus */
background-color: white;
box-shadow: 0 0 0 4px rgba(132, 136, 217, 0.18);
transform: translateY(-2px);
}
/* Valid fields get green left border */
.custom-form input:required:valid,
.custom-form select:required:valid,
.custom-form textarea:required:valid {
border-left: 4px solid #94F285 !important;
}
/* Textarea specific styling */
.custom-form textarea {
min-height: 130px;
resize: vertical;
line-height: 1.5;
}
/* Select dropdown styling */
.custom-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238488D9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 16px;
padding-right: 3rem;
cursor: pointer;
}
/* File input styling */
.custom-form input[type="file"] {
width: 100%;
padding: 1rem;
border: 2px dashed #e8e8e8;
border-radius: 10px;
background-color: #f8f9fa;
cursor: pointer;
transition: all 0.3s ease;
}
.custom-form input[type="file"]:hover {
border-color: #8488D9;
background-color: #f0f1fa;
}
/* Submit button styling */
.submit-li {
text-align: center;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(132, 136, 217, 0.2);
width: 100%;
}
.submit {
background: linear-gradient(145deg, #8488D9, #6a6fc7);
color: white;
border: none;
border-radius: 12px;
padding: 1.125rem 3rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 6px 16px rgba(132, 136, 217, 0.35),
0 2px 6px rgba(132, 136, 217, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.75px;
position: relative;
overflow: hidden;
width: 100%;
max-width: 300px;
}
.submit::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: 0.5s;
}
.submit:hover {
background: linear-gradient(145deg, #6a6fc7, #8488D9);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(132, 136, 217, 0.45),
0 4px 8px rgba(132, 136, 217, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.submit:hover::before {
left: 100%;
}
.submit:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(132, 136, 217, 0.4),
inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Placeholder styling */
.custom-form ::placeholder {
color: #a0a0a0;
opacity: 1;
font-style: italic;
font-weight: 400;
}
/* Focus states for accessibility */
.custom-form input:focus,
.custom-form select:focus,
.custom-form textarea:focus {
outline: 2px solid #8488D9;
outline-offset: 2px;
}
/* Animation for form elements */
.custom-form li {
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
transform: translateY(15px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stagger animations for form items */
.custom-form li:nth-child(1) { animation-delay: 0.05s; }
.custom-form li:nth-child(2) { animation-delay: 0.1s; }
.custom-form li:nth-child(3) { animation-delay: 0.15s; }
.custom-form li:nth-child(4) { animation-delay: 0.2s; }
.custom-form li:nth-child(5) { animation-delay: 0.25s; }
.custom-form li:nth-child(6) { animation-delay: 0.3s; }
.custom-form li:nth-child(7) { animation-delay: 0.35s; }
.custom-form li:nth-child(8) { animation-delay: 0.4s; }
/* Mobile-specific adjustments */
@media (max-width: 768px) {
.dataforms {
margin: 1.5rem 0;
}
.custom-form {
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(13, 13, 13, 0.1);
}
.custom-form ul {
grid-template-columns: 1fr; /* Switch to single column on mobile */
gap: 1.25rem;
}
/* Reset full-width elements since we're now single column */
#datafieldwrapper-0-116878,
#datafieldwrapper-0-116879,
.submit-li {
grid-column: 1;
}
.form-field-label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
padding: 0.875rem 1rem;
font-size: 16px; /* Prevents zoom on iOS */
}
.submit {
padding: 1rem 2rem;
font-size: 1rem;
max-width: 100%;
}
.submit-li {
margin-top: 1.25rem;
padding-top: 1.25rem;
}
}
@media (max-width: 480px) {
.custom-form {
padding: 1.25rem;
border-radius: 10px;
}
.custom-form ul {
gap: 1rem;
}
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
padding: 0.75rem 0.875rem;
}
.submit {
padding: 0.875rem 1.5rem;
}
}
/* Fix for iOS form elements */
@supports (-webkit-overflow-scrolling: touch) {
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
font-size: 16px; /* Prevents zoom on focus in iOS */
}
}
/* Fix for the double checkbox issue */
.multi-checkbox-options-wrapper {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.8rem;
margin-top: 0.5rem;
}
.form_group-0-116895 {
display: flex !important;
align-items: center;
width: 100%;
margin-bottom: 0;
}
.checkbox-input {
width: 20px !important;
height: 20px !important;
margin: 0 12px 0 0 !important;
accent-color: #8488D9;
flex-shrink: 0;
/* Reset any conflicting styles */
-webkit-appearance: checkbox !important;
appearance: checkbox !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
display: inline-block !important;
}
.multi-checkbox-options-wrapper label {
margin: 0;
font-weight: 500;
cursor: pointer;
color: #0D0D0D;
/* Ensure no pseudo-elements creating extra boxes */
position: relative;
}
.multi-checkbox-options-wrapper label::before,
.multi-checkbox-options-wrapper label::after {
display: none !important;
}
/* Ensure checkbox container spans full width */
#datafieldwrapper-0-116895 {
grid-column: 1 / -1 !important;
}
/* Remove any duplicate styling */
.multi-checkbox-options-wrapper input[type="checkbox"]::before,
.multi-checkbox-options-wrapper input[type="checkbox"]::after {
display: none !important;
}
/* Mobile adjustments for checkboxes */
@media (max-width: 768px) {
.checkbox-input {
width: 18px !important;
height: 18px !important;
}
}
@media (max-width: 480px) {
.checkbox-input {
width: 16px !important;
height: 16px !important;
margin-right: 10px !important;
}
}
/* Active page indicator - Green text */
.navbar-nav .nav-link.active {
color: var(--secondary) !important;
}
/* Optional: Add a more prominent green indicator for active state */
.navbar-nav .nav-item.active .nav-link {
color: var(--secondary) !important;
font-weight: 600;
}
/* Ensure hover state doesn't override active state */
.navbar-nav .nav-link.active:hover {
color: var(--secondary) !important;
}
/* =========================
VIDEO HOLDER
========================= */
/* Container wrap */
.video-holder-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* --- Frame (outer) --- */
.video-frame.sleek-frame {
--frame-radius: 18px;
--inner-radius: var(--frame-radius);
--glow-blur: 10px;
position: relative;
width: 960px;
max-width: 100%;
margin: 0 auto;
padding: 8px;
border-radius: var(--frame-radius);
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.50));
box-shadow:
0 20px 40px rgba(0,0,0,0.35),
0 3px 10px rgba(0,0,0,0.18);
overflow: visible;
transition: transform 0.32s cubic-bezier(.2,.9,.2,1), box-shadow 0.32s;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.04);
}
/* Lift on hover/focus */
.video-frame.sleek-frame:hover,
.video-frame.sleek-frame:focus-within {
transform: translateY(-6px);
box-shadow:
0 34px 80px rgba(0,0,0,0.40),
0 8px 26px rgba(0,0,0,0.22);
}
/* --- Video element styling (inside frame) --- */
.video-frame.sleek-frame .video-el {
display: block;
width: 100%;
height: auto;
border-radius: calc(var(--inner-radius) - 6px);
overflow: hidden;
background: #000;
z-index: 6;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
/* --- Play overlay button --- */
.video-play-overlay {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.30));
cursor: pointer;
transition: transform 0.22s ease, background 0.22s ease;
-webkit-tap-highlight-color: transparent;
}
/* Play icon circle */
.video-play-overlay .play-icon {
width: 78px;
height: 78px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.20), rgba(255,255,255,0.03) 20%),
linear-gradient(180deg, rgba(20,20,20,0.85), rgba(20,20,20,0.55));
box-shadow:
0 10px 30px rgba(0,0,0,0.55),
0 0 36px rgba(132,136,217,0.14);
position: relative;
z-index: 14;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Triangle play symbol */
.video-play-overlay .play-icon::before {
content: "";
width: 0;
height: 0;
border-left: 20px solid rgba(255,255,255,0.98);
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
margin-left: 4px;
display: inline-block;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
/* Hover / focus effect */
.video-play-overlay:hover .play-icon,
.video-play-overlay:focus-visible .play-icon {
transform: scale(1.06);
box-shadow:
0 18px 48px rgba(0,0,0,0.55),
0 0 50px rgba(132,136,217,0.20);
outline: none;
}
/* --- Favicon in top-right (decorative) --- */
.video-frame.sleek-frame .video-favicon {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
object-fit: contain;
border-radius: 6px;
background: rgba(255,255,255,0.04);
box-shadow: 0 6px 16px rgba(0,0,0,0.30);
z-index: 16;
pointer-events: none;
user-select: none;
border: 1px solid rgba(255,255,255,0.04);
}
/* --- Accessibility focus ring --- */
.video-frame.sleek-frame:focus-within {
outline: 3px solid rgba(132,136,217,0.16);
outline-offset: 4px;
}
/* --- Hide play overlay when playing (JS toggles data-playing="true") --- */
.video-frame.sleek-frame[data-playing="true"] .video-play-overlay { display: none; }
/* --- Optional: smoother edges on some browsers --- */
.video-frame.sleek-frame,
.video-frame.sleek-frame .video-el {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* ABOUT US CARDS */
/* Brand Colors */
:root {
--primary: #8488D9;
--primary-dark: #6266b7;
--secondary: #94F285;
--secondary-dark: #70cc62;
--accent: #F2DF80;
--dark: #0D0D0D;
--light: #FFFFFF;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--text-dark: #212529;
--text-muted: #6c757d;
--danger: #F28585;
--info: #85B1F2;
--font-primary: 'Montserrat', sans-serif;
--font-secondary: 'Poppins', sans-serif;
--transition-speed: 0.3s;
}
/* General Styles */
body {
font-family: var(--font-primary);
color: var(--text-dark);
overflow-x: hidden;
background-color: var(--light);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 600;
}
a {
color: var(--primary);
text-decoration: none;
transition: all var(--transition-speed) ease;
}
a:hover {
color: var(--primary-dark);
}
/* Button Styles */
.btn {
font-family: var(--font-secondary);
font-weight: 500;
border-radius: 4px;
padding: 10px 24px;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
color: white;
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-secondary {
background-color: var(--secondary);
border-color: var(--secondary);
color: var(--dark);
}
.btn-secondary:hover, .btn-secondary:focus {
background-color: var(--secondary-dark);
border-color: var(--secondary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-outline-primary {
color: var(--primary);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: white;
transform: translateY(-2px);
}
.btn-outline-light {
color: var(--light);
border-color: var(--light);
}
.btn-outline-light:hover {
background-color: var(--light);
color: var(--primary);
transform: translateY(-2px);
}
.btn-glow {
box-shadow: 0 0 15px rgba(132, 136, 217, 0.5);
}
.btn-glow:hover {
box-shadow: 0 0 20px rgba(132, 136, 217, 0.7);
}
.btn-hover-effect:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.btn-with-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-with-icon i {
transition: transform 0.3s ease;
}
.btn-with-icon:hover i {
transform: translateX(5px);
}
/* Form Elements */
.form-select, .form-control {
height: 50px;
font-size: 16px;
border-radius: 4px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.form-select:focus, .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(132, 136, 217, 0.25);
}
.custom-select {
position: relative;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
/* Navbar Styles */
.navbar {
padding: 15px 0;
transition: all 0.4s ease;
background-color: rgba(13, 13, 13, 0.9);
}
.navbar.scrolled {
background-color: rgba(132, 136, 217, 0.95);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 10px 0;
}
.navbar-brand {
display: flex;
align-items: center;
}
.logo-image {
height: 40px;
transition: all 0.3s ease;
}
.navbar.scrolled .logo-image {
height: 35px;
object-fit: contain;
}
.nav-link {
color: var(--light) !important;
font-weight: 500;
padding: 8px 16px !important;
position: relative;
transition: all 0.3s ease;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: var(--secondary);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover:after, .nav-link.active:after {
width: 70%;
}
.nav-link.active {
color: var(--secondary) !important;
}
/* Navbar toggler */
.navbar-toggler {
border: none;
padding: 0;
width: 30px;
height: 30px;
position: relative;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
background-image: none;
position: relative;
transition: all 0.3s ease;
}
.navbar-toggler-icon:before,
.navbar-toggler-icon:after,
.navbar-toggler-icon span {
content: '';
position: absolute;
height: 2px;
width: 100%;
background-color: var(--light);
left: 0;
transition: all 0.3s ease;
}
.navbar-toggler-icon:before {
top: 0;
}
.navbar-toggler-icon:after {
bottom: 0;
}
.navbar-toggler-icon span {
top: 50%;
transform: translateY(-50%);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
transform: translateY(8px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
transform: translateY(-8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
opacity: 0;
}
.navbar-contact-icons {
display: flex;
gap: 15px;
}
.navbar-contact-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: var(--light);
transition: all 0.3s ease;
}
.navbar-contact-icon:hover {
background-color: var(--secondary);
color: var(--dark);
transform: translateY(-3px);
}
/* Hero Section Styles */
.hero {
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
padding: 120px 0 60px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.hero-text-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: var(--light);
position: relative;
z-index: 2;
margin-bottom: 50px;
}
.hero-logo-container {
margin-bottom: 30px;
}
.hero-logo {
height: 80px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero p {
font-size: 1.25rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.animate-title {
opacity: 0;
animation: fadeInUp 1s ease forwards 0.5s;
}
.animate-subtitle {
opacity: 0;
animation: fadeInUp 1s ease forwards 0.8s;
}
.animate-buttons {
opacity: 0;
animation: fadeInUp 1s ease forwards 1.1s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-bar {
position: relative;
z-index: 10;
max-width: 1000px;
margin: 0 auto;
}
.search-form {
padding: 25px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.search-btn {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
background-color: var(--primary);
border-color: var(--primary);
transition: all 0.3s ease;
}
.search-btn:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Glass Effect */
.glass-effect {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
/* Section Styles */
section {
padding: 80px 0;
position: relative;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.title-underline {
height: 4px;
width: 80px;
background: var(--primary);
margin: 0 auto 20px;
position: relative;
}
.title-underline:before {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 40px;
height: 10px;
background: var(--secondary);
transform: translateX(-50%);
border-radius: 10px;
}
.section-title p {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 800px;
margin: 0 auto;
}
/* Featured Properties Styles (moved to tennats page) */
.featured-properties {
background-color: var(--light-gray);
}
.property-grid {
position: relative;
}
.property-item {
transition: transform 0.3s ease;
}
.property-item:hover {
transform: translateY(-10px);
}
.property-card {
height: 100%;
border-radius: 10px;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.property-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.property-img {
position: relative;
overflow: hidden;
height: 250px;
}
.property-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-card:hover .property-img img {
transform: scale(1.1);
}
.property-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(13, 13, 13, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.property-card:hover .property-overlay {
opacity: 1;
}
.btn-view {
background-color: var(--primary);
color: white;
padding: 10px 20px;
border-radius: 4px;
font-weight: 600;
transform: translateY(20px);
transition: all 0.3s ease;
}
.property-card:hover .btn-view {
transform: translateY(0);
}
.btn-view:hover {
background-color: var(--primary-dark);
color: white;
}
.property-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 4px;
z-index: 2;
}
.badge-sale {
background-color: var(--primary);
color: white;
}
.badge-rent {
background-color: var(--secondary);
color: var(--dark);
}
.property-details {
padding: 20px;
}
.property-type-badge {
display: inline-block;
font-size: 12px;
padding: 3px 10px;
margin-bottom: 10px;
border-radius: 20px;
background-color: var(--light-gray);
color: var(--text-muted);
}
.property-details h3 {
margin-bottom: 10px;
font-size: 1.25rem;
font-weight: 700;
}
.property-details h3 a {
color: var(--text-dark);
}
.property-details h3 a:hover {
color: var(--primary);
}
.property-location {
display: block;
font-size: 14px;
color: var(--text-muted);
margin-bottom: 10px;
}
.property-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
}
.property-details p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
height: 42px;
}
.property-info {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.property-info-item {
display: flex;
align-items: center;
font-size: 14px;
color: var(--text-muted);
}
.property-info-item i {
margin-right: 5px;
color: var(--primary);
}
/* Conditional display for property features */
.property-info-item:empty,
.property-info-item:blank {
display: none;
}
.property-beds:empty,
.property-baths:empty,
.property-size:empty {
display: none;
}
/* Testimonials Section Styles */
.testimonials {
background-color: var(--light-gray);
position: relative;
}
.testimonials::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center/100%;
opacity: 0.5;
z-index: 0;
}
.testimonial-container {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.testimonial-card {
border-radius: 10px;
overflow: hidden;
padding: 0;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.testimonial-profile {
padding: 30px;
text-align: center;
background-color: var(--primary);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.profile-image {
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.2);
}
.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-info h4 {
color: white;
margin-bottom: 5px;
font-weight: 600;
}
.profile-info p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 15px;
font-size: 14px;
}
.rating {
color: var(--accent);
}
.testimonial-content {
padding: 40px;
position: relative;
height: 100%;
display: flex;
align-items: center;
background-color: white;
}
.quote-mark {
position: absolute;
top: 20px;
right: 20px;
font-size: 36px;
color: rgba(132, 136, 217, 0.1);
}
.testimonial-controls {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.testimonial-indicators {
display: flex;
gap: 8px;
}
.testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(132, 136, 217, 0.3);
border: none;
padding: 0;
transition: all 0.3s ease;
}
.testimonial-indicators button.active {
background-color: var(--primary);
transform: scale(1.2);
}
.testimonial-arrows {
display: flex;
gap: 15px;
}
.testimonial-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
transition: all 0.3s ease;
}
.testimonial-arrow:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* CTA Section Styles */
.cta-section {
padding: 100px 0;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://portal.quranfluent.com/users/u3/3464/files/Stones/Stones%20properties%20Leeds%20-%20Hero%20Image.jpg') no-repeat fixed center center/cover;
position: relative;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.4), transparent);
pointer-events: none;
}
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 50px 30px;
border-radius: 10px;
position: relative;
z-index: 1;
}
.cta-content h2 {
color: white;
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 700;
}
.cta-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 30px;
}
.cta-buttons {
flex-wrap: wrap;
}
/* Footer Styles */
/* Certification Logos Section */
.certification-logos-section {
background-color: #ffffff;
padding: 30px 0;
border-top: none;
}
.certification-logos-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.certification-logos-row a {
display: block;
transition: all 0.3s ease;
}
.certification-logos-row a:hover {
transform: translateY(-5px);
}
.certification-logo {
height: 40px;
width: auto;
object-fit: contain;
}
/* Footer Styles */
#Global-footer {
background-color: #14151f;
color: rgba(255, 255, 255, 0.7);
padding: 20px 0 30px;
font-family: var(--font-primary);
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Social Section */
.footer-social-section {
margin: 15px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.social-links {
display: flex;
gap: 20px;
padding: 10px 0 5px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: white;
transition: all 0.3s ease;
font-size: 18px;
}
.social-link:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
}
/* Footer Links Section */
.footer-links-section {
margin-bottom: 20px;
margin-top: 5px;
width: 100%;
}
.footer-links-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
gap: 8px;
}
.footer-links-row a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
white-space: nowrap;
}
.footer-links-row a:hover {
color: white;
}
.link-divider {
color: rgba(255, 255, 255, 0.4);
}
/* Policy Links Row */
.footer-policy-row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
gap: 8px;
}
.footer-policy-row a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
white-space: nowrap;
}
.footer-policy-row a:hover {
color: white;
}
/* Company Details */
.footer-company-details {
margin-bottom: 30px;
max-width: 800px;
}
.footer-company-details p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
}
/* Company Logo */
.footer-logo-section {
margin-top: 20px;
}
.footer-logo {
height: 30px;
width: auto;
}
/* Scroll to Top Button */
.scroll-to-top-btn {
position: fixed;
bottom: 25px;
right: 25px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.scroll-to-top-btn.visible {
opacity: 0.8;
visibility: visible;
}
.scroll-to-top-btn:hover {
opacity: 1;
}
/* Property Slider Container */
.property-slider-container {
position: relative;
padding: 0 30px 20px;
margin-bottom: 20px;
}
/* Properties Slider */
.properties-slider {
width: 100%;
overflow: hidden;
position: relative;
}
.property-slides {
display: flex;
transition: transform 0.5s ease;
}
.property-slide {
flex: 0 0 100%;
max-width: 100%;
padding: 0 10px;
}
/* Compact Property Cards */
.compact-property-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.compact-property-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.property-image {
position: relative;
height: 180px;
overflow: hidden;
}
.property-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.compact-property-card:hover .property-image img {
transform: scale(1.05);
}
.property-tag {
position: absolute;
top: 10px;
left: 10px;
background-color: var(--primary);
color: white;
padding: 4px 8px;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
z-index: 2;
}
/* For Let Agreed tags */
.property-tag:contains('Let Agreed') {
background-color: var(--secondary);
}
.property-overlay-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent);
color: white;
}
.property-price {
font-size: 18px;
font-weight: 700;
margin-bottom: 2px;
}
.property-location {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.property-location i {
color: var(--secondary);
margin-right: 3px;
}
.property-content {
padding: 12px;
}
.property-content h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
height: 42px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.property-content h3 a {
color: var(--text-dark);
text-decoration: none;
}
.property-content h3 a:hover {
color: var(--primary);
}
.property-features {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
color: var(--text-muted);
font-size: 13px;
}
.property-features span {
display: flex;
align-items: center;
}
.property-features i {
color: var(--primary);
margin-right: 5px;
font-size: 14px;
}
/* Slider Navigation */
.slider-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 10;
}
.slider-prev, .slider-next {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.slider-prev:hover, .slider-next:hover {
background-color: var(--primary-dark);
transform: scale(1.1);
}
.slider-prev {
margin-left: -10px;
}
.slider-next {
margin-right: -10px;
}
/* Property Slider Fixes */
.property-slider-container {
position: relative;
padding: 0 50px 30px; /* Increased side padding to make room for arrows */
margin-bottom: 20px;
}
.slider-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
padding: 0 10px; /* Add padding to prevent buttons from being cut off */
z-index: 10;
width: 100%;
}
.slider-prev,
.slider-next {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary);
color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
position: relative; /* Add position relative */
z-index: 20; /* Ensure buttons appear above content */
}
.slider-prev:hover,
.slider-next:hover {
background-color: var(--primary-dark);
transform: scale(1.1);
}
/* Give more space to the navigation buttons */
.slider-prev {
left: 5px; /* Move slightly inside to prevent cut-off */
}
.slider-next {
right: 5px; /* Move slightly inside to prevent cut-off */
}
/* About Us Page Styles */
/* Page Banner */
.page-banner {
height: 400px;
display: flex;
align-items: center;
position: relative;
padding-top: 120px;
}
.banner-content {
color: var(--light);
text-align: center;
position: relative;
z-index: 2;
}
.banner-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.breadcrumb {
display: inline-flex;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 30px;
margin: 0 auto;
}
.breadcrumb-item, .breadcrumb-item.active {
color: var(--light);
font-weight: 500;
}
.breadcrumb-item a {
color: var(--secondary);
text-decoration: none;
}
.breadcrumb-item a:hover {
color: var(--secondary-dark);
}
.breadcrumb-item+.breadcrumb-item::before {
color: var(--light);
}
/* About Story Section */
.about-story {
position: relative;
padding: 80px 0;
}
.about-image-container {
position: relative;
}
.about-main-image {
position: relative;
z-index: 2;
border: 8px solid white;
}
.about-image-box {
position: absolute;
width: 80%;
height: 80%;
bottom: -30px;
right: -30px;
background-color: var(--primary);
z-index: 1;
}
/* Values Cards */
.value-card {
text-align: center;
padding: 40px 30px;
height: 100%;
transition: all 0.3s ease;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.value-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.value-icon i {
font-size: 36px;
color: var(--primary);
transition: all 0.3s ease;
}
.value-card:hover .value-icon {
background-color: var(--primary);
}
.value-card:hover .value-icon i {
color: white;
transform: scale(1.1);
}
.value-card h3 {
margin-bottom: 15px;
font-weight: 600;
}
.value-card p {
color: var(--text-muted);
}
/* Odd numbered items */
.timeline-item:nth-child(odd) {
padding-right: calc(50% + 30px);
text-align: right;
}
.timeline-item:nth-child(odd) .timeline-date {
right: calc(50% + 50px);
}
.timeline-item:nth-child(odd) .timeline-content {
float: right;
}
/* Even numbered items */
.timeline-item:nth-child(even) {
padding-left: calc(50% + 30px);
text-align: left;
}
.timeline-item:nth-child(even) .timeline-date {
left: calc(50% + 50px);
}
.timeline-item:nth-child(even) .timeline-content {
float: left;
}
.timeline-content {
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
background-color: white;
transition: all 0.3s ease;
width: 100%;
max-width: 450px;
position: relative;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.timeline-content h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--primary);
}
.timeline-content p {
font-size: 0.95rem;
color: var(--text-muted);
margin-bottom: 0;
}
/* CEO Section Styles */
.about-ceo {
position: relative;
overflow: hidden;
}
.ceo-image-container {
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.ceo-image-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.ceo-image {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.ceo-image-container:hover .ceo-image {
transform: scale(1.03);
}
.ceo-message {
height: 100%;
position: relative;
z-index: 1;
}
.ceo-message h3 {
color: var(--primary);
font-weight: 600;
position: relative;
padding-bottom: 15px;
}
.ceo-message h3:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
.ceo-message p {
margin-bottom: 15px;
line-height: 1.8;
}
.ceo-signature {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ceo-signature p {
margin-bottom: 5px;
line-height: 1.4;
}
/* Mobile view for timeline */
@media (max-width: 991.98px) {
.timeline::before {
left: 40px;
}
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
padding-left: 80px;
padding-right: 0;
text-align: left;
}
.timeline-dot {
left: 40px;
}
.timeline-date,
.timeline-item:nth-child(odd) .timeline-date,
.timeline-item:nth-child(even) .timeline-date {
left: 0;
right: auto;
top: 18px;
width: 80px;
font-size: 0.9rem;
text-align: center;
}
.timeline-content,
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
width: 100%;
max-width: calc(100% - 80px);
float: none;
}
}
/* About Us Page Additional Styles */
.animate-timeline {
opacity: 1 !important;
transform: translateY(0) !important;
}
.timeline-item {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.timeline-item.active .timeline-content {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
/* Glass card effect for About page */
.glass-card {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
/* Testimonial card specific styles */
.testimonial-card-about {
position: relative;
padding: 40px;
text-align: center;
border-radius: 10px;
}
.testimonial-quote {
margin-bottom: 20px;
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.testimonial-author-info {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.testimonial-avatar {
border: 3px solid var(--primary);
transition: all 0.3s ease;
}
.testimonial-card-about:hover .testimonial-avatar {
transform: scale(1.1);
}
.testimonial-controls {
margin-top: 30px;
}
/* Timeline additional styles */
.timeline-dot {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-dot {
transform: scale(1.3);
box-shadow: 0 0 0 5px rgba(132, 136, 217, 0.3);
}
.timeline-date {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-date {
font-weight: 700;
color: var(--primary-dark);
}
/* Stats counter animation */
.stat-number {
display: inline-block;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Responsive improvements */
@media (max-width: 991.98px) {
.timeline-item.animate-timeline {
opacity: 1;
transform: translateY(0);
}
.testimonial-card-about {
padding: 30px 20px;
}
}
@media (max-width: 767.98px) {
.timeline-content h3 {
font-size: 1.1rem;
}
.timeline-date {
font-size: 0.9rem;
}
}
/* About Testimonials */
.testimonial-slider {
max-width: 900px;
margin: 0 auto;
}
.testimonial-card-about {
padding: 40px;
text-align: center;
border-radius: 10px;
position: relative;
background-color: white;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.testimonial-quote {
font-size: 36px;
color: var(--primary);
margin-bottom: 20px;
opacity: 0.3;
}
.testimonial-text {
font-size: 1.1rem;
font-style: italic;
line-height: 1.6;
margin-bottom: 30px;
color: var(--text-muted);
}
.testimonial-author-info {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--primary);
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-author-details h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.testimonial-author-details p {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 5px;
}
.rating {
color: var(--accent);
}
/* Stats Section */
.about-stats {
padding: 80px 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80') no-repeat center center/cover;
position: relative;
}
.stats-container {
padding: 50px 20px;
border-radius: 10px;
}
.stat-item {
color: white;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--secondary);
font-family: var(--font-secondary);
}
.stat-title {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Media Queries for About Page */
@media (max-width: 991.98px) {
.page-banner {
height: 300px;
}
.banner-content h1 {
font-size: 2.5rem;
}
.about-image-box {
width: 70%;
height: 70%;
bottom: -20px;
right: -20px;
}
.stat-number {
font-size: 2.5rem;
}
.stat-title {
font-size: 0.9rem;
}
.timeline::before {
left: 40px;
}
.timeline-item,
.timeline-item:nth-child(even) {
justify-content: flex-start;
padding-left: 80px;
width: 100%;
}
.timeline-dot {
left: 40px;
}
.timeline-date,
.timeline-item:nth-child(odd) .timeline-date,
.timeline-item:nth-child(even) .timeline-date {
left: 0;
right: auto;
top: 18px;
width: 80px;
font-size: 0.9rem;
}
.timeline-content {
width: 100%;
}
}
@media (max-width: 767.98px) {
.page-banner {
height: 250px;
}
.banner-content h1 {
font-size: 2rem;
}
.about-image-box {
display: none;
}
.testimonial-card-about {
padding: 30px 20px;
}
.testimonial-text {
font-size: 1rem;
}
}
@media (max-width: 575.98px) {
.page-banner {
height: 200px;
}
.banner-content h1 {
font-size: 1.75rem;
}
.breadcrumb {
padding: 8px 15px;
}
.stat-number {
font-size: 2rem;
}
.stat-title {
font-size: 0.8rem;
}
.testimonial-author-info {
flex-direction: column;
text-align: center;
}
}
/* Fix for About Us Story section */
.about-image-box {
z-index: 0; /* Lower z-index so it doesn't overlap text */
opacity: 0.5; /* Make it slightly transparent */
width: 70%; /* Make it smaller */
height: 70%; /* Make it smaller */
right: -20px; /* Move it less to the right */
bottom: -20px; /* Move it less to the bottom */
}
/* Ensure text has proper background */
.section-title.text-start h2,
.section-title.text-start .title-underline,
.col-lg-6 p, .col-lg-6 .lead, .col-lg-6 strong {
position: relative;
z-index: 1;
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
padding: 2px 5px;
display: inline-block;
}
.section-title.text-start .title-underline {
display: block;
padding: 0;
margin-left: 0;
margin-bottom: 20px;
}
/* Modern map container with purple border */
.map-container {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
border: 3px solid #8488D9; /* Your brand's purple color */
transition: all 0.3s ease;
position: relative;
}
/* Add a subtle glow effect on hover */
.map-container:hover {
border-color: #6b6fbf; /* Slightly darker purple on hover */
box-shadow: 0 12px 40px rgba(132, 136, 217, 0.2);
}
/* Optional: Add a decorative corner accent */
.map-container::before {
content: '';
position: absolute;
top: -3px;
right: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #8488D9 transparent transparent;
z-index: 10;
pointer-events: none;
}
/* Style the iframe to match the container */
.map-container iframe {
border-radius: 10px;
display: block;
}
/* Optional: Add a subtle gradient overlay effect */
.map-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(132, 136, 217, 0.03) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
border-radius: 10px;
}
/* Optional: Add a floating label */
.map-label {
position: absolute;
top: 15px;
left: 15px;
background: rgba(132, 136, 217, 0.9);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
z-index: 2;
}
/* Careers Page Styles */
.careers-hero {
height: 60vh;
min-height: 500px;
display: flex;
align-items: center;
padding: 120px 0 60px;
position: relative;
color: var(--light);
text-align: center;
}
.careers-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.careers-hero-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.careers-hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.careers-hero p {
font-size: 1.25rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.careers-description, .careers-form {
border-radius: 10px;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
}
.careers-description:hover, .careers-form:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.careers-list {
list-style: none;
padding-left: 0;
margin-bottom: 20px;
}
.careers-list li {
margin-bottom: 10px;
display: flex;
align-items: baseline;
}
.careers-list li i {
color: var(--primary);
margin-right: 10px;
}
.careers-divider {
height: 4px;
width: 60px;
background: var(--primary);
position: relative;
}
.careers-divider:before {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 30px;
height: 10px;
background: var(--secondary);
transform: translateX(-50%);
border-radius: 10px;
}
.input-group-text {
background-color: var(--primary);
color: white;
border: 1px solid var(--primary);
}
.benefit-card {
transition: all 0.3s ease;
border-radius: 10px;
overflow: hidden;
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.benefit-icon {
width: 70px;
height: 70px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.benefit-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.benefit-card:hover .benefit-icon {
background-color: var(--primary);
}
.benefit-card:hover .benefit-icon i {
color: white;
transform: scale(1.1);
}
.testimonial-card {
border-radius: 10px;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.testimonial-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.testimonial-image {
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
border: 3px solid var(--primary);
}
.testimonial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-content i {
color: rgba(132, 136, 217, 0.2);
position: absolute;
top: 0;
left: 0;
}
.accordion-item {
border: none;
margin-bottom: 15px;
overflow: hidden;
}
.accordion-button {
padding: 20px;
font-weight: 600;
background-color: white;
border-radius: 10px !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: rgba(132, 136, 217, 0.05);
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.1);
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px;
background-color: white;
}
/* Contact Page Specific Styles */
.page-header {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/placeholder/banner.jpg') no-repeat center center/cover;
padding: 150px 0 80px;
color: var(--light);
text-align: center;
position: relative;
}
.page-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-header .lead {
font-size: 1.25rem;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.breadcrumb {
display: inline-flex;
background-color: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 30px;
margin-top: 20px;
}
.breadcrumb-item a {
color: var(--light);
text-decoration: none;
}
.breadcrumb-item.active {
color: var(--secondary);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--light);
}
/* Contact Cards */
.contact-info-card {
padding: 30px;
text-align: center;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
}
.contact-info-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.info-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.info-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.contact-info-card:hover .info-icon {
background-color: var(--primary);
}
.contact-info-card:hover .info-icon i {
color: white;
transform: scale(1.1);
}
.info-title {
margin-bottom: 15px;
font-size: 1.25rem;
font-weight: 600;
}
.info-content p {
color: var(--text-muted);
margin-bottom: 15px;
}
/* Contact Form */
.contact-form-container {
padding: 40px;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-form-container h2 {
font-weight: 700;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.contact-form-container h2:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
.form-label {
font-weight: 500;
margin-bottom: 8px;
}
.form-control, .form-select {
padding: 12px 15px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 16px;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(132, 136, 217, 0.25);
}
.form-check-input:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.form-success-message {
padding: 15px;
background-color: rgba(148, 242, 133, 0.2);
border-left: 4px solid var(--secondary);
border-radius: 4px;
margin-bottom: 20px;
display: none;
}
/* Map Container */
.map-container {
overflow: hidden;
border-radius: 10px;
height: 450px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* FAQ Section */
.accordion-item {
border: none;
margin-bottom: 15px;
overflow: hidden;
}
.accordion-button {
padding: 20px;
font-weight: 600;
font-size: 18px;
background-color: white;
color: var(--text-dark);
box-shadow: none;
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: rgba(132, 136, 217, 0.05);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: transparent;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px;
background-color: white;
}
/* Media Queries for Contact Page */
@media (max-width: 991.98px) {
.page-header {
padding: 120px 0 60px;
}
.page-header h1 {
font-size: 2.5rem;
}
.contact-form-container {
padding: 30px;
}
}
@media (max-width: 767.98px) {
.page-header {
padding: 100px 0 50px;
}
.page-header h1 {
font-size: 2rem;
}
.contact-info-card {
padding: 20px;
}
.map-container {
height: 350px;
}
.accordion-button {
font-size: 16px;
padding: 15px;
}
}
@media (max-width: 575.98px) {
.page-header h1 {
font-size: 1.75rem;
}
.page-header .lead {
font-size: 1rem;
}
.contact-form-container {
padding: 20px;
}
.info-icon {
width: 60px;
height: 60px;
}
.info-icon i {
font-size: 24px;
}
.map-container {
height: 300px;
}
}
/* Insurance Page Specific Styles */
/* Hero Section */
.insurance-hero {
height: 80vh;
min-height: 600px;
display: flex;
align-items: center;
padding: 120px 0 60px;
position: relative;
color: var(--light);
}
.insurance-hero h1 {
font-weight: 700;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.insurance-hero .lead {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Features Section */
.insurance-features-section {
background-color: var(--light);
position: relative;
overflow: hidden;
}
.insurance-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat top center/100%;
opacity: 0.5;
z-index: 0;
}
.insurance-feature-card {
height: 100%;
padding: 30px;
background-color: white;
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.insurance-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.insurance-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.insurance-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.insurance-feature-card:hover .insurance-icon {
background-color: var(--primary);
}
.insurance-feature-card:hover .insurance-icon i {
color: white;
transform: scale(1.1);
}
.insurance-feature-card h3 {
font-weight: 600;
margin-bottom: 15px;
}
.insurance-feature-card p {
color: var(--text-muted);
margin-bottom: 0;
}
/* Insurance Products Section */
.insurance-products {
background: linear-gradient(to right, var(--primary-dark), var(--primary));
position: relative;
overflow: hidden;
}
.insurance-products::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center/100%;
opacity: 0.3;
z-index: 0;
}
.product-card {
height: 100%;
padding: 30px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
color: var(--light);
position: relative;
z-index: 1;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.15);
}
.product-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
}
.product-icon i {
font-size: 30px;
color: var(--light);
transition: all 0.3s ease;
}
.product-card:hover .product-icon {
background-color: var(--secondary);
}
.product-card:hover .product-icon i {
color: var(--dark);
transform: scale(1.1);
}
.product-card h3 {
font-weight: 600;
margin-bottom: 15px;
}
.product-card p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
flex-grow: 1;
}
/* Insurance Form Styles */
#insurance-form {
background-color: var(--light-gray);
position: relative;
}
#insurance-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat bottom center/100%;
opacity: 0.4;
z-index: 0;
}
.quote-form-container {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background-color: white;
position: relative;
z-index: 1;
}
.quote-form-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.form-header {
background-color: var(--primary);
color: white;
padding: 25px 30px;
text-align: center;
}
.form-header h3 {
font-weight: 600;
margin-bottom: 10px;
}
.form-header p {
margin-bottom: 0;
opacity: 0.9;
}
.form-body {
padding: 30px;
}
#insurance-quote-form .input-group-text {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
#insurance-quote-form .form-control:focus,
#insurance-quote-form .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(132, 136, 217, 0.25);
}
#insurance-quote-form .btn-glow {
box-shadow: 0 0 15px rgba(132, 136, 217, 0.5);
transition: all 0.3s ease;
}
#insurance-quote-form .btn-glow:hover {
transform: translateY(-3px);
box-shadow: 0 0 20px rgba(132, 136, 217, 0.7);
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80') no-repeat fixed center center/cover;
position: relative;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.4), transparent);
pointer-events: none;
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.insurance-hero {
min-height: 500px;
height: auto;
padding: 100px 0 40px;
}
.insurance-hero h1 {
font-size: 2.5rem;
}
.insurance-feature-card,
.product-card {
margin-bottom: 20px;
}
.form-header,
.form-body {
padding: 20px;
}
}
@media (max-width: 767.98px) {
.insurance-hero h1 {
font-size: 2rem;
}
.insurance-hero .lead {
font-size: 1rem;
}
.insurance-icon,
.product-icon {
width: 60px;
height: 60px;
}
.insurance-icon i,
.product-icon i {
font-size: 24px;
}
.form-header,
.form-body {
padding: 15px;
}
}
@media (max-width: 575.98px) {
.insurance-hero h1 {
font-size: 1.75rem;
}
.section-title h2 {
font-size: 1.75rem;
}
.insurance-feature-card,
.product-card {
padding: 20px;
}
.insurance-feature-card h3,
.product-card h3 {
font-size: 1.25rem;
}
.btn {
padding: 8px 16px;
font-size: 14px;
}
}
/* ===================================
Lettings Page Styles
=================================== */
/* ===== LANDLORD SERVICES SECTION SERVICES CARDS ===== */
.management-services-section {
position: relative;
overflow: hidden;
}
.management-services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat top center/100%;
opacity: 0.5;
z-index: 0;
pointer-events: none;
}
/* Section title styling */
.section-title h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
}
.title-underline {
width: 80px;
height: 4px;
background: linear-gradient(to right, #8488d9, #94f285);
margin: 0 auto 1.5rem;
border-radius: 2px;
}
.section-title p {
font-size: 1.1rem;
color: #666;
max-width: 700px;
margin: 0 auto;
}
/* Service cards */
.service-card {
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(to right, #8488d9, #94f285);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
/* Premium/Gold card specific styles */
.service-card.premium {
border-top: 5px solid #f2df80;
}
.service-card.premium::before {
background: linear-gradient(to right, #f2df80, #d4b82c);
}
.service-card.premium .service-icon {
background: rgba(242, 223, 128, 0.15);
color: #d4b82c;
}
.service-card.premium .service-icon i {
color: #d4b82c;
}
.service-card.premium:hover .service-icon {
background: #f2df80;
}
.service-card.premium:hover .service-icon i {
color: #333;
}
/* Standard/Bronze card specific styles */
.service-card.standard {
border-top: 5px solid #cd7f32;
}
.service-card.standard::before {
background: linear-gradient(to right, #cd7f32, #b06728);
}
.service-card.standard .service-icon {
background: rgba(205, 127, 50, 0.15);
}
.service-card.standard .service-icon i {
color: #cd7f32;
}
.service-card.standard:hover .service-icon {
background: #cd7f32;
}
.service-card.standard:hover .service-icon i {
color: white;
}
/* Bronze badge style */
.badge.bg-bronze {
background: linear-gradient(45deg, #cd7f32, #8c5c2c) !important;
color: white !important;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
}
/* Service card header */
.service-card-header {
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.service-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.service-icon i {
font-size: 2rem;
transition: all 0.3s ease;
}
.service-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #333;
line-height: 1.3;
}
.badge.bg-gold {
background: linear-gradient(45deg, #f2df80, #d4b82c) !important;
color: #333;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
}
/* Service features */
.service-features {
flex-grow: 1;
margin-bottom: 1.5rem;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.features-list li {
padding: 0.6rem 0;
position: relative;
padding-left: 1.75rem;
color: #555;
font-size: 0.95rem;
line-height: 1.5;
display: flex;
align-items: flex-start;
}
.features-list li::before {
content: '✓';
position: static;
margin-right: 0.75rem;
font-weight: bold;
flex-shrink: 0;
margin-top: 0.1rem;
}
.features-list li.strikethrough {
text-decoration: line-through;
color: #999;
}
.features-list li.strikethrough::before {
content: '✕';
color: #dc3545;
}
.service-card.premium .features-list li::before {
color: #d4b82c;
}
.service-card.standard .features-list li::before {
color: #cd7f32;
}
/* Service card footer */
.service-card-footer {
margin-top: auto;
}
.details-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid rgba(242, 223, 128, 0.3);
color: #d4b82c;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: all 0.3s ease;
cursor: pointer;
}
.details-btn:hover {
background: #f2df80;
color: #333;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(242, 223, 128, 0.3);
}
.details-btn.bronze {
border-color: rgba(205, 127, 50, 0.3);
color: #cd7f32;
}
.details-btn.bronze:hover {
background: #cd7f32;
color: white;
box-shadow: 0 5px 15px rgba(205, 127, 50, 0.3);
}
/* Details content */
.details-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.details-content.active {
max-height: 2000px;
}
.details-inner {
padding: 1.5rem;
background: #f8f9fa;
border-radius: 12px;
margin-top: 1.5rem;
}
.details-inner h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #333;
}
.details-inner p {
color: #666;
margin-bottom: 1rem;
line-height: 1.6;
}
.details-inner ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.details-inner li {
margin-bottom: 0.5rem;
color: #555;
}
/* Bottom section text */
.service-info {
font-size: 1.1rem;
color: #666;
max-width: 800px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Button styles */
.btn-with-icon {
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.btn-with-icon:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Popup Styles */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow-y: auto;
justify-content: center;
align-items: flex-start;
padding: 50px 20px;
}
.popup-content {
position: relative;
background-color: white;
padding: 40px;
border-radius: 10px;
max-width: 900px;
width: 100%;
margin: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-height: 80vh;
overflow-y: auto;
}
.close-popup {
position: absolute;
top: 15px;
right: 20px;
font-size: 30px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1;
}
.close-popup:hover {
color: var(--primary);
}
.popup-table {
font-size: 14px;
margin: 20px 0;
}
.popup-table th,
.popup-table td {
padding: 10px;
text-align: left;
}
/* Enhanced Property Badge Styles */
.property-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 10px 16px !important; /* Increased padding for larger size */
font-size: 16px !important; /* Larger font size */
font-weight: 700 !important; /* Bolder text */
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
z-index: 3;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; /* Enhanced shadow */
transition: all 0.3s ease;
transform: scale(1.1); /* Slightly enlarged */
}
/* Hover effect for badges */
.property-badge:hover {
transform: translateY(-3px) scale(1.15);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
}
/* Badge colors based on property type as per your brand colors */
.badge-Sale,
.badge-For-Sale,
.badge-ForSale {
background-color: #8488D9 !important; /* Purple color from your brand */
color: white !important;
}
.badge-Rent,
.badge-To-Let,
.badge-ToLet {
background-color: #94F285 !important; /* Green color from your brand */
color: #0D0D0D !important; /* Dark text for contrast */
}
.badge-Let-Agreed,
.badge-LetAgreed,
.badge-Let,
.badge-Sold {
background-color: #F28585 !important; /* Red color from your brand */
color: white !important;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.property-badge {
padding: 8px 14px !important;
font-size: 14px !important;
}
}
@media (max-width: 575.98px) {
.property-badge {
padding: 7px 12px !important;
font-size: 13px !important;
}
}
/* Repair Info Card */
.repair-info,
.repair-form {
height: 100%;
}
.repair-method h5 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
}
.repair-method p {
padding-left: 30px;
}
.contact-highlight {
color: var(--primary);
font-weight: 600;
transition: all 0.3s ease;
}
.contact-highlight:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Tenant Hero Section Styles */
.insurance-hero {
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://admin.stonesproperties.co.uk/users/u24/24676/Website-assets/Site%20images/Stones%20proerties%20Lettings.webp') no-repeat center center/cover;
height: 80vh;
min-height: 600px;
display: flex;
align-items: center;
padding: 120px 0 60px;
color: var(--light);
}
.insurance-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.insurance-hero h1 {
font-weight: 700;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.insurance-hero .lead {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Tenant Application Process */
.process-timeline {
position: relative;
padding: 20px 0;
}
.process-timeline::before {
content: '';
position: absolute;
width: 4px;
background-color: var(--primary);
top: 0;
bottom: 0;
left: 20px;
margin-left: -2px;
}
.process-step {
position: relative;
margin-bottom: 50px;
padding-left: 60px;
transition: all 0.3s ease;
}
.process-step:last-child {
margin-bottom: 0;
}
.process-number {
position: absolute;
width: 40px;
height: 40px;
left: 0;
background-color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.25rem;
z-index: 1;
transition: all 0.3s ease;
}
.process-content {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.process-step:hover .process-number,
.process-step-active .process-number {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(132, 136, 217, 0.7);
}
.process-step:hover .process-content,
.process-step-active .process-content {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.process-content h4 {
color: var(--primary);
margin-bottom: 10px;
font-weight: 600;
}
/* Tenant Resources Styles */
.resources-container {
display: flex;
flex-direction: column;
gap: 25px;
margin-top: 20px;
}
.resource-item {
display: flex;
align-items: flex-start;
padding: 15px;
border-radius: 8px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.resource-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.resource-icon {
flex: 0 0 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 24px;
color: white;
}
.pdf-icon {
background-color: #e74c3c;
}
.advice-icon {
background-color: #3498db;
}
.deposit-icon {
background-color: #27ae60;
}
.council-icon {
background-color: #00bcd4;
}
.shelter-icon {
background-color: #f39c12;
}
.resource-content {
flex: 1;
}
.resource-content h4 {
margin-bottom: 5px;
font-weight: 600;
}
.resource-content h4 a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.resource-content h4 a:hover {
color: var(--primary);
}
.resource-content p {
color: var(--text-muted);
margin-bottom: 10px;
font-size: 0.95rem;
}
.resource-link {
display: inline-flex;
align-items: center;
font-size: 0.9rem;
color: var(--primary);
font-weight: 500;
transition: all 0.3s ease;
}
.resource-link:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Tenant Resources Accordion Styles */
.tenant-resources-accordion {
margin-top: 30px;
}
.resource-panel {
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 25px;
border-radius: 12px;
}
.resource-panel:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
.resource-header {
cursor: pointer;
position: relative;
}
.resource-toggle-btn {
background: transparent;
border: none;
color: var(--primary);
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
transition: all 0.3s ease;
padding: 10px 0;
}
.resource-toggle-btn:hover {
color: var(--primary-dark);
}
.resource-toggle-btn i {
transition: transform 0.3s ease;
}
.resource-toggle-btn.active i {
transform: rotate(180deg);
}
.resource-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.resource-content.active {
max-height: 5000px;
}
.resource-panel h3 {
display: flex;
align-items: center;
font-size: 1.4rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
transition: color 0.3s ease;
}
.resource-panel h3 i {
font-size: 1.2rem;
color: var(--primary);
margin-right: 15px;
transition: all 0.3s ease;
}
.resource-panel:hover h3 {
color: var(--primary);
}
.resource-panel:hover h3 i {
transform: scale(1.2);
}
/* Process steps within resources */
.resource-content .process-timeline {
padding-top: 10px;
padding-bottom: 20px;
}
.resource-content .process-step {
opacity: 1;
transform: translateY(0);
}
.resource-content .process-step:hover .process-number {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(132, 136, 217, 0.6);
}
.resource-content .process-content h4 {
font-size: 1.2rem;
margin-bottom: 12px;
}
/* Table styles for fees */
.resource-content .table th {
background-color: rgba(132, 136, 217, 0.1);
color: var(--text-dark);
font-weight: 600;
}
.resource-content .card-header {
background-color: var(--primary);
color: white;
}
/* Make the opened panel stand out */
.resource-panel.active {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
border-left: 3px solid var(--primary);
}
/* Animate header when panel is active */
.resource-panel.active .resource-header h3 {
color: var(--primary);
}
.resource-panel.active .resource-header h3 i {
transform: scale(1.2);
}
/* Resource panel responsive adjustments */
@media (max-width: 991.98px) {
.resource-panel h3 {
font-size: 1.3rem;
}
.resource-toggle-btn {
font-size: 15px;
}
}
@media (max-width: 767.98px) {
.resource-panel h3 {
font-size: 1.2rem;
}
.resource-toggle-btn {
font-size: 14px;
}
.resource-header, .resource-content .card-body {
padding: 15px !important;
}
}
@media (max-width: 575.98px) {
.resource-panel h3 {
font-size: 1.1rem;
}
.resource-toggle-btn {
font-size: 13px;
}
.resource-panel h3 i {
font-size: 1rem;
margin-right: 10px;
}
.resource-header, .resource-content .card-body {
padding: 12px !important;
}
}
/* Resources Grid Styles */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.resources-grid .resource-item {
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 10px;
}
.resources-grid .resource-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.resources-grid .resource-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
flex-shrink: 0;
}
.resources-grid .pdf-icon {
background-color: #e74c3c;
}
.resources-grid .advice-icon {
background-color: #3498db;
}
.resources-grid .deposit-icon {
background-color: #2ecc71;
}
.resources-grid .council-icon {
background-color: #9b59b6;
}
.resources-grid h4 {
font-size: 1.1rem;
font-weight: 600;
}
.resources-grid p {
flex-grow: 1;
margin-bottom: 0.5rem;
}
@media (max-width: 767.98px) {
.resources-grid {
grid-template-columns: 1fr;
}
}
/* Modern Resource Cards */
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.resource-item {
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 25px;
display: flex;
flex-direction: column;
height: 100%;
}
.resource-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.resource-item .d-flex {
margin-bottom: 15px;
}
/* Fixed-size icons with proper proportions */
.resource-icon {
width: 48px;
height: 48px;
min-width: 48px; /* Prevents stretching */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.resource-icon i {
font-size: 20px;
color: white;
}
.pdf-icon {
background-color: #e74c3c;
}
.advice-icon {
background-color: #3498db;
}
.deposit-icon {
background-color: #2ecc71;
}
.council-icon {
background-color: #9b59b6;
}
.resource-content h4 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0;
line-height: 1.4;
}
.resource-content h4 a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.resource-content h4 a:hover {
color: var(--primary);
}
.resource-item p {
color: var(--text-muted);
margin: 15px 0;
flex-grow: 1;
font-size: 0.95rem;
line-height: 1.6;
}
.btn-outline-primary {
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
width: fit-content;
}
.btn-outline-primary i {
transition: transform 0.3s ease;
}
.btn-outline-primary:hover i {
transform: translateX(3px);
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.resources-grid {
grid-template-columns: 1fr;
}
.resource-icon {
width: 40px;
height: 40px;
min-width: 40px;
}
.resource-icon i {
font-size: 18px;
}
}
@media (max-width: 575.98px) {
.resource-item {
padding: 20px;
}
.resource-content h4 {
font-size: 1.1rem;
}
}
/* Modern Tab Buttons */
.modern-tab-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.modern-tab-btn {
background-color: white;
color: var(--text-dark);
border: none;
border-radius: 30px;
padding: 15px 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.modern-tab-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(132, 136, 217, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.modern-tab-btn:hover::before,
.modern-tab-btn.active::before {
opacity: 1;
}
.modern-tab-btn.active {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(132, 136, 217, 0.25);
}
.modern-tab-btn:hover:not(.active) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Modern Info Box for Fees and Resources */
.modern-info-box {
border-radius: 10px;
overflow: hidden;
background-color: white;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.modern-info-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.info-box-header {
background-color: var(--primary);
color: white;
padding: 20px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.info-box-header h3 {
margin: 0;
font-weight: 600;
font-size: 1.4rem;
}
.info-box-body {
padding: 25px;
color: var(--text-muted);
}
.info-box-body p {
margin-bottom: 20px;
}
.info-box-body .btn {
font-weight: 600;
padding: 10px 25px;
}
/* Agency Terms Section (formerly Landlord Agreement) */
.terms-card {
padding: 40px !important;
border-radius: 10px;
transition: all 0.3s ease;
}
.terms-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}
/* Popup Styles for Terms Agreement */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
overflow-y: auto;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
}
.popup-content {
position: relative;
background-color: white;
padding: 40px;
border-radius: 10px;
max-width: 900px;
width: 100%;
margin: 40px auto;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.popup-content h1,
.popup-content h2,
.popup-content h3,
.popup-content h4 {
color: var(--primary);
margin-top: 30px;
margin-bottom: 20px;
}
.popup-content h1:first-child {
margin-top: 0;
}
.popup-content p {
margin-bottom: 15px;
line-height: 1.6;
}
.popup-content .section {
margin-bottom: 30px;
}
.popup-content .clause {
margin-bottom: 25px;
}
.popup-content .sub-clause {
padding-left: 20px;
margin-top: 15px;
}
.popup-content ul, .popup-content ol {
margin-bottom: 15px;
padding-left: 25px;
}
.popup-content li {
margin-bottom: 8px;
}
.popup-content table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
}
.popup-content table,
.popup-content th,
.popup-content td {
border: 1px solid #ddd;
}
.popup-content th,
.popup-content td {
padding: 12px 15px;
text-align: left;
}
.popup-content th {
background-color: var(--light-gray);
font-weight: 600;
}
.popup-content tr:nth-child(even) {
background-color: #f9f9f9;
}
.close-popup {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
z-index: 1;
font-weight: 700;
}
.close-popup:hover {
color: var(--primary);
transform: scale(1.1);
}
.page-break {
height: 1px;
background-color: #ddd;
margin: 40px 0;
}
/* Disable text selection (copy/paste) in popup */
/* Ensure focus outlines remain visible for keyboard users */
#agreementModal :focus {
outline: 2px solid rgba(0,123,255,0.6);
outline-offset: 2px;
}
/* Small visually-hidden region for ARIA live messages */
#agreementModal .sr-live {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Responsive Tab Buttons */
@media (max-width: 767.98px) {
.modern-tab-buttons {
gap: 15px;
}
.modern-tab-btn {
padding: 12px 20px;
font-size: 14px;
}
}
@media (max-width: 575.98px) {
.modern-tab-buttons {
flex-direction: column;
width: 100%;
gap: 10px;
}
.modern-tab-btn {
width: 100%;
justify-content: center;
}
.popup-content {
padding: 30px 20px;
}
}
/* Why Choose Us core styles */
/* Image wrapper and image styles (desktop) */
#io7aj4 .why-image-wrapper,
#io7aj4 .image-container {
max-width: 540px;
width: 100%;
box-shadow: 0 12px 30px rgba(13,13,13,0.06);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
#io7aj4 .why-image,
#io7aj4 .image-container img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform .45s ease, filter .45s ease;
}
#io7aj4 .why-image-wrapper:hover .why-image,
#io7aj4 .image-container:hover img {
transform: scale(1.03);
filter: saturate(1.02);
}
/* Card / feature block */
#io7aj4 .choose-us-card,
#io7aj4 .choose-card {
background: #fff;
border-radius: 10px;
border: 1px solid rgba(22, 24, 27, 0.06);
box-shadow: 0 6px 18px rgba(13,13,13,0.04);
transition: transform .25s ease, box-shadow .25s ease;
align-items: flex-start;
}
#io7aj4 .choose-us-card:hover,
#io7aj4 .choose-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(13,13,13,0.07);
}
/* Icon circle */
#io7aj4 .choose-us-icon,
#io7aj4 .icon-circle,
#io7aj4 .icon-wrap .icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
font-size: 18px;
}
/* Soft background used behind icons */
#io7aj4 .bg-soft-primary,
#io7aj4 .choose-us-icon {
background: linear-gradient(180deg, rgba(132,136,217,0.12), rgba(132,136,217,0.06));
color: var(--bs-primary);
}
/* Minor typography tweaks */
#io7aj4 h1,
#io7aj4 h2,
#io7aj4 h5,
#io7aj4 h4 {
color: #0f1720;
}
#io7aj4 .lead {
color: #495057;
}
/* Make sure the section doesn't hug the sides on small screens */
@media (max-width: 767.98px) {
#io7aj4 .container {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* ===== Planet Page Specific Styles ===== */
/* Planet Hero Section */
.planet-hero {
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
height: 60vh;
min-height: 400px;
display: flex;
align-items: center;
padding-top: 80px;
color: var(--light);
overflow: hidden;
}
.planet-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(148, 242, 133, 0.3), transparent);
pointer-events: none;
}
.planet-hero-content {
text-align: center;
position: relative;
z-index: 2;
}
.planet-hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.planet-hero .lead {
font-size: 1.25rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.planet-badge {
display: inline-block;
background-color: var(--secondary);
color: var(--dark);
padding: 10px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 1.1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
animation: float 3s ease-in-out infinite;
}
.planet-badge i {
margin-right: 8px;
animation: rotate 6s linear infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Initiative Cards */
.initiative-row {
margin-top: 40px;
}
.initiative-card {
padding: 30px;
height: 100%;
text-align: center;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.initiative-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.initiative-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(148, 242, 133, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
}
.initiative-icon i {
font-size: 32px;
color: var(--secondary-dark);
transition: all 0.3s ease;
}
.initiative-card:hover .initiative-icon {
background-color: var(--secondary);
}
.initiative-card:hover .initiative-icon i {
color: var(--dark);
transform: scale(1.1);
}
.initiative-card h3 {
margin-bottom: 15px;
font-size: 1.5rem;
font-weight: 600;
color: var(--dark);
}
.initiative-card p {
margin-bottom: 20px;
color: var(--text-muted);
}
.initiative-hover {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
background-color: var(--secondary);
color: var(--dark);
padding: 12px;
font-weight: 600;
transition: all 0.3s ease;
opacity: 0;
}
.initiative-card:hover .initiative-hover {
bottom: 0;
opacity: 1;
}
/* Progress Section */
.progress-wrapper {
padding: 30px;
border-radius: 10px;
background-color: white;
height: 100%;
}
.progress-text-container {
padding: 30px;
border-radius: 10px;
background-color: white;
height: 100%;
}
.progress-container {
margin-bottom: 20px;
}
.progress-container h5 {
font-weight: 600;
color: var(--dark);
margin-bottom: 10px;
}
.progress-percentage {
font-weight: 700;
color: var(--secondary-dark);
}
.progress {
height: 10px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
background-color: var(--secondary);
position: relative;
transition: width 1.5s ease;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
background-size: 20px 20px;
animation: progressStripes 1s linear infinite;
}
@keyframes progressStripes {
0% {
background-position: 0 0;
}
100% {
background-position: 20px 0;
}
}
/* Stats Counter Section */
.stats-counter {
background-color: var(--secondary);
position: relative;
overflow: hidden;
}
.stats-counter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,') no-repeat center center/cover;
opacity: 0.3;
}
.counter-row {
padding: 40px 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.counter-box {
text-align: center;
color: var(--dark);
padding: 20px;
transition: all 0.3s ease;
}
.counter-box:hover {
transform: translateY(-5px);
}
.counter-number {
font-size: 3rem;
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
display: inline-block;
}
.percent {
font-size: 2rem;
font-weight: 700;
display: inline-block;
}
.counter-text {
font-size: 1.1rem;
font-weight: 600;
margin-top: 10px;
}
/* Commitment Section */
.commitment-image-container {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.commitment-image {
transition: transform 0.5s ease;
}
.commitment-image-container:hover .commitment-image {
transform: scale(1.05);
}
.commitment-list {
padding: 30px;
height: 100%;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.commitment-list h3 {
color: var(--dark);
font-weight: 600;
}
.commitment-items {
list-style-type: none;
padding-left: 0;
}
.commitment-items li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}
.commitment-items li i {
margin-right: 10px;
margin-top: 5px;
}
/* Timeline Section */
.timeline-wrapper {
position: relative;
max-width: 1200px;
margin: 50px auto;
}
.timeline {
position: relative;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--secondary);
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
border-radius: 3px;
}
.timeline-container {
padding: 10px 40px;
position: relative;
width: 50%;
animation: fadeInUp 1s;
}
.timeline-container.left {
left: 0;
}
.timeline-container.right {
left: 50%;
}
.timeline-container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -13px;
background-color: white;
border: 4px solid var(--secondary);
top: 15px;
border-radius: 50%;
z-index: 1;
}
.timeline-container.right::after {
left: -13px;
}
.timeline-content {
padding: 20px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.timeline-year {
position: absolute;
top: -30px;
font-size: 14px;
background-color: var(--secondary);
color: var(--dark);
padding: 5px 15px;
border-radius: 20px;
font-weight: 600;
}
.timeline-container.left .timeline-year {
right: 15px;
}
.timeline-container.right .timeline-year {
left: 15px;
}
.timeline-content h3 {
margin: 0 0 15px;
color: var(--dark);
font-weight: 600;
font-size: 1.3rem;
}
.timeline-content p {
margin: 0;
color: var(--text-muted);
}
/* CTA Eco Section */
.cta-eco {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1586974710160-55f48f417990?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80') no-repeat fixed center center/cover;
position: relative;
padding: 100px 0;
}
.cta-eco::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(148, 242, 133, 0.4), transparent);
pointer-events: none;
}
/* Responsive Styles for Planet Page */
@media (max-width: 991.98px) {
.planet-hero h1 {
font-size: 2.5rem;
}
.timeline::after {
left: 31px;
}
.timeline-container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.timeline-container.right {
left: 0;
}
.timeline-container.left::after, .timeline-container.right::after {
left: 18px;
}
.timeline-container.left .timeline-year,
.timeline-container.right .timeline-year {
left: 15px;
}
}
@media (max-width: 767.98px) {
.planet-hero {
min-height: 350px;
}
.planet-hero h1 {
font-size: 2rem;
}
.planet-badge {
font-size: 0.9rem;
padding: 8px 16px;
}
.counter-number {
font-size: 2.5rem;
}
.counter-text {
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.planet-hero h1 {
font-size: 1.75rem;
}
.planet-badge {
font-size: 0.8rem;
padding: 6px 12px;
}
.counter-number {
font-size: 2rem;
}
.timeline-content {
padding: 15px;
}
.timeline-year {
font-size: 12px;
padding: 4px 10px;
}
}
/* Sales page CSS */
/* Page Banner Styles */
.page-banner {
padding: 180px 0 100px;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('../images/placeholder/banner.jpg') no-repeat center center/cover;
position: relative;
color: var(--light);
text-align: center;
}
.page-banner h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-banner .lead {
font-size: 1.25rem;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Process Timeline Styles */
.process-timeline {
position: relative;
padding: 20px 0;
}
.process-timeline::before {
content: '';
position: absolute;
width: 4px;
background-color: var(--primary);
top: 0;
bottom: 0;
left: 20px;
margin-left: -2px;
}
.process-step {
position: relative;
margin-bottom: 50px;
padding-left: 60px;
transition: all 0.3s ease;
}
.process-step:last-child {
margin-bottom: 0;
}
.process-number {
position: absolute;
width: 40px;
height: 40px;
left: 0;
background-color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.25rem;
z-index: 1;
transition: all 0.3s ease;
}
.process-content {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.process-step:hover .process-number,
.process-step-active .process-number {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(132, 136, 217, 0.7);
}
.process-step:hover .process-content,
.process-step-active .process-content {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.process-content h4 {
color: var(--primary);
margin-bottom: 10px;
font-weight: 600;
}
/* Feature List Styles */
.feature-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.feature-list li {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
font-size: 1rem;
}
.feature-list li i {
margin-top: 3px;
flex-shrink: 0;
}
/* Valuation Form Styles */
.valuation-form {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.form-section {
position: relative;
}
.form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') no-repeat top center/100%;
opacity: 0.5;
z-index: -1;
}
.btn-submit {
background-color: var(--primary);
color: white;
font-weight: 600;
padding: 12px 30px;
transition: all 0.3s ease;
}
.btn-submit:hover {
background-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(132, 136, 217, 0.3);
}
.success-alert {
display: none;
margin-top: 20px;
}
/* Direct Purchase Card Styles */
.direct-purchase-card {
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.direct-purchase-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.direct-purchase-card h3 {
color: var(--primary);
font-weight: 600;
}
/* FAQ Accordion Styles */
.accordion-item {
margin-bottom: 15px;
border: none;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.accordion-button {
font-weight: 600;
font-family: var(--font-secondary);
padding: 20px 25px;
background-color: white;
color: var(--text-dark);
}
.accordion-button:not(.collapsed) {
color: var(--primary);
background-color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(132, 136, 217, 0.25);
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238488D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px 25px;
color: var(--text-muted);
line-height: 1.6;
}
/* Contact Highlight Styles */
.contact-highlight {
color: var(--primary);
font-weight: 600;
transition: all 0.3s ease;
}
.contact-highlight:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Responsive adjustments for the sales page */
@media (max-width: 991.98px) {
.page-banner {
padding: 150px 0 80px;
}
.page-banner h1 {
font-size: 2.5rem;
}
.process-timeline::before {
left: 15px;
}
.process-step {
padding-left: 50px;
}
}
@media (max-width: 767.98px) {
.page-banner {
padding: 120px 0 60px;
}
.page-banner h1 {
font-size: 2rem;
}
.process-step {
padding-left: 45px;
}
.process-number {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
@media (max-width: 575.98px) {
.page-banner h1 {
font-size: 1.75rem;
}
.page-banner .lead {
font-size: 1rem;
}
.feature-list li {
font-size: 0.9rem;
}
}
/* Valuation page styles */
/* Page Header Styles */
.page-header {
position: relative;
height: 300px;
display: flex;
align-items: center;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://portal.quranfluent.com/users/u3/3464/files/Stones/Stones%20properties%20Leeds%20-%20Hero%20Image.jpg') no-repeat center center/cover;
margin-top: 76px;
padding: 0 20px;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.page-header-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: var(--light);
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-header .lead {
font-size: 1.2rem;
margin-bottom: 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Valuation Section Styles */
.valuation-section {
position: relative;
background-color: var(--light);
}
/* Feature Cards */
.feature-card {
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
text-align: center;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.feature-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
background-color: var(--primary);
}
.feature-card:hover .feature-icon i {
color: white;
transform: scale(1.1);
}
.feature-card h3 {
margin-bottom: 15px;
font-size: 1.4rem;
font-weight: 600;
}
.feature-card p {
color: var(--text-muted);
margin-bottom: 0;
}
/* Valuation Form Styles */
.valuation-form-container {
border-radius: 10px;
overflow: hidden;
margin-bottom: 50px;
}
.form-header {
padding: 25px 30px;
background-color: var(--primary);
color: white;
text-align: center;
}
.form-header h3 {
margin-bottom: 10px;
font-weight: 600;
}
.form-header p {
margin-bottom: 0;
opacity: 0.9;
}
.form-body {
padding: 30px;
background-color: white;
}
/* Step Indicator */
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 20px;
width: 100%;
height: 2px;
background-color: #e9ecef;
left: 50%;
z-index: 0;
}
.step.active:not(:last-child)::after {
background-color: var(--primary);
}
.step-number {
width: 40px;
height: 40px;
background-color: #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 10px;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.step.active .step-number {
background-color: var(--primary);
color: white;
}
.step-title {
font-size: 14px;
color: var(--text-muted);
text-align: center;
transition: all 0.3s ease;
}
.step.active .step-title {
color: var(--primary);
font-weight: 600;
}
/* Form Steps */
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
/* Success Message */
.success-message {
text-align: center;
padding: 30px;
}
.success-icon {
font-size: 70px;
color: #28a745;
margin-bottom: 20px;
}
.success-message h3 {
color: var(--primary);
margin-bottom: 15px;
}
/* Why Choose Us Section */
.choose-us-card {
padding: 25px;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.choose-us-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.choose-us-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
margin: 0 auto;
transition: all 0.3s ease;
}
.choose-us-icon i {
font-size: 20px;
color: var(--primary);
transition: all 0.3s ease;
}
.choose-us-card:hover .choose-us-icon {
background-color: var(--primary);
}
.choose-us-card:hover .choose-us-icon i {
color: white;
}
.choose-us-content {
padding-left: 15px;
}
.choose-us-content h4 {
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: 600;
}
.choose-us-content p {
color: var(--text-muted);
margin-bottom: 0;
font-size: 0.95rem;
}
/* FAQ Section Styles */
.accordion-item {
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.accordion-button {
font-weight: 600;
padding: 20px 25px;
background-color: white;
color: var(--text-dark);
}
.accordion-button:not(.collapsed) {
background-color: var(--primary);
color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(132, 136, 217, 0.25);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body {
padding: 20px 25px;
background-color: white;
color: var(--text-muted);
}
/* Properties Page Specific Styles */
.page-header {
padding: 120px 0 60px;
position: relative;
margin-bottom: 30px;
}
.page-header-content {
color: var(--light);
position: relative;
z-index: 2;
}
.page-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.breadcrumb {
background-color: transparent;
padding: 0;
margin: 0;
}
.breadcrumb-item {
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb-item.active {
color: var(--secondary);
}
.breadcrumb-item a {
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.breadcrumb-item a:hover {
color: var(--secondary);
text-decoration: none;
}
/* Property Category Tabs */
.property-tabs .nav-pills {
background-color: var(--light-gray);
border-radius: 50px;
padding: 5px;
display: inline-flex;
}
.property-tabs .nav-link {
color: var(--text-dark);
border-radius: 50px;
padding: 10px 25px;
margin: 0 5px;
transition: all 0.3s ease;
font-weight: 500;
}
.property-tabs .nav-link:hover {
color: var(--primary);
}
.property-tabs .nav-link.active {
background-color: var(--primary);
color: white;
}
/* Property Badge Colors */
.property-badge {
font-size: 14px;
padding: 6px 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.badge-Sale, .badge-For-Sale, .badge-ForSale {
background-color: var(--primary);
color: white;
}
.badge-Rent, .badge-To-Let, .badge-ToLet {
background-color: var(--secondary);
color: var(--dark);
}
.badge-Let-Agreed, .badge-LetAgreed, .badge-Let {
background-color: #F28585;
color: white;
}
.badge-Sold {
background-color: #dc3545;
color: white;
}
/* Property Slider View */
.property-slider-container {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 50px;
}
.property-swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
height: auto;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--primary);
background-color: rgba(255, 255, 255, 0.8);
width: 40px;
height: 40px;
border-radius: 50%;
transition: all 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: var(--primary);
color: white;
transform: scale(1.1);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 18px;
}
.swiper-pagination-bullet {
background: var(--primary);
opacity: 0.7;
}
.swiper-pagination-bullet-active {
background: var(--primary);
opacity: 1;
}
/* View Selector Controls */
.view-selector .btn {
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
border-color: var(--primary);
color: var(--primary);
transition: all 0.3s ease;
}
.view-selector .btn.active {
background-color: var(--primary);
color: white;
}
.view-selector .btn:hover:not(.active) {
background-color: rgba(132, 136, 217, 0.1);
}
.view-selector .btn i {
margin-right: 4px;
}
/* Make property cards same height in grid view */
.property-grid .property-card {
height: 100%;
display: flex;
flex-direction: column;
}
.property-grid .property-details {
flex: 1;
display: flex;
flex-direction: column;
}
.property-grid .property-details p {
flex-grow: 1;
}
/* Property badges styling improvement */
.property-badge {
top: 10px;
left: 10px;
border-radius: 4px;
z-index: 3;
transform: translateY(-50%);
top: 15%;
}
/* Fix for mobile grid view */
@media (max-width: 767.98px) {
.property-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 15px;
margin-bottom: 15px;
-webkit-overflow-scrolling: touch;
}
.property-grid::-webkit-scrollbar {
height: 4px;
}
.property-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.property-grid::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 10px;
}
.property-grid .property-item {
flex: 0 0 90%;
max-width: 90%;
scroll-snap-align: start;
padding-right: 15px;
}
}
/* Mobile grid view adjustments */
@media (max-width: 767.98px) {
/* Ensure property grid and slider have proper display */
#grid-view {
display: none !important;
}
#slider-view {
display: block !important;
width: 100%;
visibility: visible !important;
opacity: 1 !important;
}
/* Make the slider container visible */
.property-slider-container {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
/* Fix swiper visibility */
.property-swiper {
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Make sure swiper wrapper and slides are visible */
.swiper-wrapper, .swiper-slide {
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}
/* Force display of navigation controls */
.swiper-button-next, .swiper-button-prev {
display: flex !important;
visibility: visible !important;
}
/* Ensure pagination is visible */
.swiper-pagination {
display: block !important;
visibility: visible !important;
}
}
/* Property slider general fixes */
.property-slider-container {
position: relative;
padding-bottom: 50px;
}
.swiper-button-next,
.swiper-button-prev {
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
color: var(--primary);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 18px;
}
.swiper-pagination-bullet-active {
background-color: var(--primary) !important;
}
/* Property Details Page Specific Styles */
/* General page setup */
.property-detail-section {
padding-top: 120px;
padding-bottom: 80px;
}
/* Breadcrumb navigation */
.property-breadcrumb {
margin-bottom: 30px;
}
.breadcrumb {
background-color: transparent;
padding: 10px 0;
}
.breadcrumb-item a {
color: var(--primary);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: var(--primary-dark);
}
.breadcrumb-item.active {
color: var(--text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
content: "›";
color: var(--text-muted);
}
/* Property Gallery */
.property-gallery {
margin-bottom: 30px;
}
.property-main-image {
position: relative;
height: 500px;
overflow: hidden;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.property-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-main-image:hover img {
transform: scale(1.03);
}
.gallery-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.property-main-image:hover .gallery-controls {
opacity: 1;
pointer-events: all;
}
.gallery-control {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--primary);
font-size: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.gallery-control:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.property-thumbnails {
margin-bottom: 30px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--primary) rgba(0, 0, 0, 0.1);
}
.property-thumbnails::-webkit-scrollbar {
height: 6px;
}
.property-thumbnails::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.property-thumbnails::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 10px;
}
.thumbnail-slider {
display: flex;
gap: 10px;
padding-bottom: 5px;
}
.property-thumbnail {
flex: 0 0 120px;
height: 80px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
}
.property-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.property-thumbnail.active {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.property-thumbnail:hover {
transform: translateY(-3px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* Property Header */
.property-header {
margin-bottom: 30px;
}
.property-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--text-dark);
}
.property-location {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 20px;
}
.property-location i {
color: var(--primary);
margin-right: 5px;
}
.property-price {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
padding: 10px 20px;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 8px;
display: inline-block;
margin-bottom: 20px;
}
/* Property Quick Actions */
.property-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.property-action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 6px;
color: var(--text-dark);
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.property-action-btn i {
color: var(--primary);
font-size: 16px;
transition: color 0.3s ease;
}
.property-action-btn:hover {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.property-action-btn:hover i {
color: white;
}
/* Property Key Features */
.property-key-features {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-icon-item {
display: flex;
align-items: center;
gap: 10px;
flex: 1 0 calc(20% - 15px);
min-width: 150px;
}
.feature-icon-item i {
font-size: 24px;
color: var(--primary);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.feature-icon-item:hover i {
background-color: var(--primary);
color: white;
transform: scale(1.1);
}
.feature-text {
display: flex;
flex-direction: column;
}
.feature-value {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
}
.feature-label {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Property Tabs */
.property-tabs {
margin-bottom: 40px;
}
.nav-tabs {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.nav-tabs .nav-link {
border: none;
color: var(--text-muted);
font-weight: 500;
padding: 10px 20px;
transition: all 0.3s ease;
position: relative;
}
.nav-tabs .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background-color: var(--primary);
transition: width 0.3s ease;
}
.nav-tabs .nav-link:hover {
color: var(--primary);
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--primary);
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link.active::after {
width: 100%;
}
.tab-content {
padding: 20px 0;
}
/* Property Description Tab */
.property-description {
font-size: 1rem;
line-height: 1.8;
color: var(--text-dark);
}
.property-description p {
margin-bottom: 15px;
}
/* Property Details Tab */
.property-details-info {
padding: 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 10px;
}
.property-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.property-info-list li {
padding: 10px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
font-size: 0.95rem;
}
.property-info-list li:last-child {
border-bottom: none;
}
.property-info-list li strong {
color: var(--text-dark);
margin-right: 5px;
}
/* Property Features Tab */
.property-features-list {
padding: 20px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 10px;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.features-list li {
display: flex;
align-items: center;
padding: 8px 0;
font-size: 0.95rem;
}
.features-list li i {
color: var(--secondary);
margin-right: 10px;
font-size: 14px;
}
/* Property Map Tab */
.property-map {
margin-bottom: 20px;
}
.map-container {
height: 400px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Sidebar Styles */
.sidebar-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.sidebar-card:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.sidebar-card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.sidebar-card-title::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 50px;
height: 3px;
background-color: var(--primary);
}
/* Agent Card */
.agent-card {
text-align: center;
}
.agent-profile {
margin-bottom: 20px;
}
.agent-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 15px;
border: 3px solid rgba(132, 136, 217, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.agent-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.agent-name {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--text-dark);
}
.agent-title {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 15px;
}
.agent-contact {
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-agent {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
}
/* Inquiry Form */
.inquiry-card {
background-color: var(--light-gray);
}
/* Handle empty dynamic content */
.feature-icon-item:empty,
.feature-icon-item .feature-value:empty,
.property-info-list li:empty,
.features-list li:empty,
.agent-card:empty,
.similar-property-item:empty {
display: none;
}
/* Additional utility classes for empty content */
.empty-hide {
display: none !important;
}
/* Property Tabs Visibility Fix */
.property-detail-tabs .nav-link {
color: var(--text-dark) !important;
background-color: #f8f9fa;
border-radius: 4px 4px 0 0;
margin-right: 5px;
font-weight: 600;
}
.property-detail-tabs .nav-link:hover {
background-color: #e9ecef;
}
.property-detail-tabs .nav-link.active {
color: var(--primary) !important;
background-color: white;
border-bottom-color: white;
}
.property-detail-tabs .nav-link::after {
display: none;
}
/* Property thumbnail visibility fix */
.property-thumbnail {
display: block !important;
}
.property-thumbnail img[src=""],
.property-thumbnail img:not([src]),
.property-thumbnail img[src="undefined"],
.property-thumbnail img[src*="{{record"],
.property-thumbnail:empty {
display: none;
}
/* Map container styling */
.map-container {
height: 400px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: #f8f9fa;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Floating Contact Button Styles */
.floating-contact-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
transition: all 0.3s ease;
}
.floating-contact-btn .btn {
border-radius: 50px;
padding: 12px 24px;
box-shadow: 0 4px 20px rgba(132, 136, 217, 0.4);
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
animation: pulse-light 2s infinite;
}
.floating-contact-btn .btn:hover {
transform: translateY(-5px);
box-shadow: 0 6px 25px rgba(132, 136, 217, 0.6);
animation: none;
}
@keyframes pulse-light {
0% {
box-shadow: 0 0 0 0 rgba(132, 136, 217, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(132, 136, 217, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(132, 136, 217, 0);
}
}
/* Scroll to top button visibility */
.floating-contact-btn.hideBtn {
opacity: 0;
pointer-events: none;
}
/* Button visible at top of form - hide the floating one */
.floating-contact-btn.near-form {
opacity: 0;
pointer-events: none;
}
/* Responsive styles */
@media (max-width: 991.98px) {
.property-main-image {
height: 400px;
}
.property-title {
font-size: 2rem;
}
.property-price {
font-size: 1.5rem;
}
.feature-icon-item {
flex: 1 0 calc(33.333% - 15px);
}
}
@media (max-width: 767.98px) {
.property-main-image {
height: 300px;
}
.property-title {
font-size: 1.75rem;
}
.property-actions {
justify-content: center;
}
.feature-icon-item {
flex: 1 0 calc(50% - 15px);
}
.sidebar-card {
padding: 20px;
}
}
@media (max-width: 575.98px) {
.property-detail-section {
padding-top: 100px;
}
.property-main-image {
height: 250px;
}
.property-title {
font-size: 1.5rem;
}
.property-price {
font-size: 1.25rem;
padding: 8px 15px;
}
.property-action-btn {
padding: 8px 12px;
font-size: 0.9rem;
}
.feature-icon-item {
flex: 1 0 100%;
}
.property-thumbnail {
flex: 0 0 100px;
height: 70px;
}
.similar-property-image {
flex: 0 0 80px;
}
}
/* CSS TO FIT ON MENU ON ONE LINE */
/* Navigation single line optimization */
@media (min-width: 992px) {
/* Smaller logo on larger screens */
.navbar-brand .logo-image {
height: 34px;
max-width: 170px;
}
/* Adjust navbar layout - more balanced spacing */
.navbar > .container {
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
}
/* Left side group (logo + menu) */
.navbar-brand, #navbarNav {
display: flex;
align-items: center;
}
/* Adjust the navbar collapse */
.navbar-collapse {
flex-grow: 1;
margin-left: 15px;
display: flex !important;
justify-content: center;
}
/* Nav items with better spacing */
.navbar .nav-link {
padding: 8px 12px !important;
font-size: 15px;
white-space: nowrap;
}
/* Contact icons */
.navbar-contact-icons.d-none.d-lg-flex {
margin-left: 15px;
gap: 10px;
}
.navbar-contact-icon {
width: 34px;
height: 34px;
}
/* Center the nav items relative to available space */
#navbarNav .navbar-nav {
width: 100%;
display: flex;
justify-content: space-between;
}
/* Extra large screens - more comfortable spacing */
@media (min-width: 1200px) {
.navbar .nav-link {
padding: 8px 14px !important;
font-size: 16px;
}
.navbar-collapse {
margin-left: 25px;
}
.navbar-contact-icons.d-none.d-lg-flex {
margin-left: 25px;
}
}
/* Very large screens - even more space */
@media (min-width: 1400px) {
.navbar .nav-link {
padding: 8px 16px !important;
}
.navbar-brand .logo-image {
height: 38px;
max-width: 190px;
}
}
}
/* Special handling for medium-large screens where space is tightest */
@media (min-width: 992px) and (max-width: 1199.98px) {
.navbar-brand {
margin-right: 0;
}
.navbar-brand .logo-image {
height: 30px;
max-width: 150px;
}
.navbar .nav-link {
padding: 8px 8px !important;
font-size: 14px;
}
.navbar-collapse {
margin-left: 10px;
}
.navbar-contact-icons.d-none.d-lg-flex {
margin-left: 10px;
gap: 8px;
}
.navbar-contact-icon {
width: 32px;
height: 32px;
}
}
/* Override Bootstrap's navbar-expand-lg default margin for nav */
@media (min-width: 992px) {
/* Reset Bootstrap's ms-auto on navbar-nav */
#navbarNav .navbar-nav.ms-auto {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Mobile Navigation Underline Fix */
@media (max-width: 991.98px) {
.nav-link:after {
width: 0;
height: 2px;
bottom: 0;
left: 0;
transform: none;
transition: width 0.3s ease;
}
.nav-link:hover:after,
.nav-link.active:after {
width: 40px;
transform: none;
left: 0;
}
.navbar-nav .nav-item {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 0;
}
.navbar-nav .nav-item:last-child {
border-bottom: none;
}
.nav-link {
padding: 12px 15px !important;
}
/* Ensure the active indicator is properly aligned with text */
.nav-link.active {
position: relative;
padding-left: 15px !important;
}
.nav-link.active:after {
position: absolute;
left: 15px;
bottom: 6px;
background-color: var(--secondary);
}
}
/* Additional fix for very small screens */
@media (max-width: 575.98px) {
.nav-link {
padding: 10px 15px !important;
}
.nav-link.active:after {
bottom: 5px;
}
}
/* Page Banner (Hero) Consistent Styling */
.page-banner {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
padding: 150px 0 80px;
text-align: center;
color: var(--light);
position: relative;
margin-top: 76px; /* Account for fixed navbar */
}
.page-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(132, 136, 217, 0.3), transparent);
pointer-events: none;
}
.page-banner h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-banner p {
font-size: 1.25rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* Responsive adjustments for the page banner */
@media (max-width: 991.98px) {
.page-banner {
padding: 120px 0 60px;
}
.page-banner h1 {
font-size: 2.5rem;
}
}
@media (max-width: 767.98px) {
.page-banner {
padding: 100px 0 50px;
}
.page-banner h1 {
font-size: 2rem;
}
}
@media (max-width: 575.98px) {
.page-banner {
padding: 90px 0 40px;
}
.page-banner h1 {
font-size: 1.75rem;
}
.page-banner p {
font-size: 1rem;
}
}
/* ==== HOMEPAGE FIXES ==== */
/* Hero Section Background Fix */
.hero {
color: var(--light);
}
/* Hero text and animations fixes */
.hero-text-container,
.hero h1,
.hero p {
color: var(--light);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.animate-title {
animation: fadeInUp 1s ease forwards 0.5s !important;
opacity: 0;
}
.animate-subtitle {
animation: fadeInUp 1s ease forwards 0.8s !important;
opacity: 0;
}
.animate-buttons {
animation: fadeInUp 1s ease forwards 1.1s !important;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Search form fixes */
.search-form {
background-color: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
/* Property card fixes */
.property-card {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.property-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.property-img {
position: relative;
overflow: hidden;
height: 250px;
}
.property-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-card:hover .property-img img {
transform: scale(1.1);
}
.property-overlay {
opacity: 0;
}
.property-card:hover .property-overlay {
opacity: 1;
}
.btn-view {
transform: translateY(20px);
transition: all 0.3s ease;
}
.property-card:hover .btn-view {
transform: translateY(0);
}
/* Testimonial section fixes */
.testimonial-card {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.testimonial-profile {
background-color: var(--primary);
}
.profile-info h4 {
color: white;
}
.profile-info p {
color: rgba(255, 255, 255, 0.8);
}
.testimonial-controls {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.testimonial-indicators {
display: flex;
gap: 8px;
}
.testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(132, 136, 217, 0.3);
border: none;
padding: 0;
transition: all 0.3s ease;
}
.testimonial-indicators button.active {
background-color: var(--primary);
transform: scale(1.2);
}
.testimonial-arrows {
display: flex;
gap: 15px;
}
/* Button style fixes */
.btn-glow {
box-shadow: 0 0 15px rgba(132, 136, 217, 0.5);
}
.btn-glow:hover {
box-shadow: 0 0 20px rgba(132, 136, 217, 0.7);
}
.btn-outline-light {
color: var(--light);
border-color: var(--light);
}
.btn-outline-light:hover {
background-color: var(--light);
color: var(--primary);
}
.btn-with-icon i {
transition: transform 0.3s ease;
}
.btn-with-icon:hover i {
transform: translateX(5px);
}
/* Section titles fix */
.title-underline {
height: 4px;
width: 80px;
background: var(--primary);
margin: 0 auto 20px;
position: relative;
}
.title-underline:before {
content: '';
position: absolute;
left: 50%;
bottom: -3px;
width: 40px;
height: 10px;
background: var(--secondary);
transform: translateX(-50%);
border-radius: 10px;
}
/* Glass card effect enhancement */
.glass-card {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
/* Fix for hero logo animation */
.hero-logo {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Special green header for Planet page when scrolled */
.navbar.scrolled-planet {
background-color: rgba(148, 242, 133, 0.95) !important; /* Using secondary color */
}
/* Adjust the nav-link text color for better contrast on green background */
.navbar.scrolled-planet .nav-link {
color: var(--dark) !important;
}
.navbar.scrolled-planet .nav-link:hover,
.navbar.scrolled-planet .nav-link.active {
color: var(--dark) !important;
}
.navbar.scrolled-planet .nav-link:after {
background-color: var(--dark);
}
/* Contact icons color adjustment for Planet page */
.navbar.scrolled-planet .navbar-contact-icon {
color: var(--dark);
}
.navbar.scrolled-planet .navbar-contact-icon:hover {
background-color: rgba(255, 255, 255, 0.3);
color: var(--dark);
}
/* Navbar toggler color for Planet page */
.navbar.scrolled-planet .navbar-toggler-icon:before,
.navbar.scrolled-planet .navbar-toggler-icon:after,
.navbar.scrolled-planet .navbar-toggler-icon span {
background-color: var(--dark);
}
/* Improved tab buttons for CMS compatibility */
.nav-pills.modern-tab-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
.nav-pills.modern-tab-buttons .nav-item {
margin: 0;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn {
background-color: white;
color: var(--text-dark);
border: none;
border-radius: 30px;
padding: 15px 30px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(132, 136, 217, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn:hover::before,
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn.active::before {
opacity: 1;
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn.active {
background-color: var(--primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(132, 136, 217, 0.25);
}
.nav-pills.modern-tab-buttons .nav-link.modern-tab-btn:hover:not(.active) {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Tenant Fees Table Styles */
.tenant-fees .card {
transition: all 0.3s ease;
border-radius: 10px;
overflow: hidden;
}
.tenant-fees .card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.tenant-fees .card-header {
background-color: var(--primary);
padding: 20px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tenant-fees .card-header h3 {
margin: 0;
font-weight: 600;
font-size: 1.4rem;
}
.tenant-fees .card-body {
padding: 25px;
}
.tenant-fees .table {
margin-bottom: 0;
}
.tenant-fees .table th {
background-color: rgba(132, 136, 217, 0.1);
font-weight: 600;
}
.tenant-fees .list-unstyled li {
margin-bottom: 10px;
}
.tenant-fees .text-success {
color: var(--secondary-dark) !important;
}
/* Responsive adjustments for tenant fees */
@media (max-width: 767.98px) {
.tenant-fees .card-header {
padding: 15px 20px;
}
.tenant-fees .card-header h3 {
font-size: 1.2rem;
}
.tenant-fees .card-body {
padding: 20px;
}
.tenant-fees .table {
font-size: 0.9rem;
}
}
@media (max-width: 575.98px) {
.tenant-fees .card-header {
padding: 12px 15px;
}
.tenant-fees .card-body {
padding: 15px;
}
.tenant-fees .alert {
padding: 10px 15px;
font-size: 0.9rem;
}
}
/* FORM Confirmation Page Styles */
.confirmation-section {
padding: 150px 0 60px;
background: linear-gradient(rgba(132, 136, 217, 0.05), rgba(132, 136, 217, 0.1));
position: relative;
}
.confirmation-card {
padding: 40px;
text-align: center;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
background-color: white;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.confirmation-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.confirmation-icon {
width: 100px;
height: 100px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(148, 242, 133, 0.15);
border-radius: 50%;
position: relative;
}
.confirmation-icon i {
font-size: 50px;
color: var(--secondary-dark);
animation: pulse 2s infinite;
}
.confirmation-card h1 {
font-weight: 700;
margin-bottom: 15px;
color: var(--primary);
}
.confirmation-card .lead {
font-size: 1.25rem;
margin-bottom: 25px;
color: var(--text-dark);
}
.confirmation-details {
max-width: 600px;
margin: 0 auto 30px;
}
.confirmation-details p {
color: var(--text-muted);
line-height: 1.6;
}
.confirmation-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.confirmation-actions .btn {
min-width: 180px;
transition: all 0.3s ease;
}
.confirmation-actions .btn:hover {
transform: translateY(-3px);
}
.btn-success {
background-color: #25D366;
border-color: #25D366;
color: white;
}
.btn-success:hover {
background-color: #128C7E;
border-color: #128C7E;
color: white;
}
/* Next Steps Section */
.next-steps-section {
padding: 80px 0;
background-color: var(--light);
}
.next-step-card {
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border-radius: 10px;
}
.next-step-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.step-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(132, 136, 217, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.step-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.3s ease;
}
.next-step-card:hover .step-icon {
background-color: var(--primary);
}
.next-step-card:hover .step-icon i {
color: white;
transform: scale(1.1);
}
.next-step-card h3 {
font-weight: 600;
margin-bottom: 15px;
color: var(--text-dark);
}
.next-step-card p {
color: var(--text-muted);
margin-bottom: 0;
}
/* Follow Us Section */
.follow-section {
padding: 60px 0 80px;
background-color: var(--light-gray);
}
.follow-card {
padding: 40px;
text-align: center;
border-radius: 10px;
position: relative;
z-index: 1;
}
.follow-card h2 {
font-weight: 700;
margin-bottom: 15px;
color: var(--light);
}
.follow-card p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
}
.social-links-large {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.social-link-large {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.15);
color: white;
font-size: 24px;
transition: all 0.3s ease;
}
.social-link-large:hover {
background-color: var(--light);
color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Privacy page*/
/* Page container adjustments */
#privacy-page.privacy-page {
background: linear-gradient(180deg, rgba(244,244,248,0.6), rgba(255,255,255,1));
color: var(--dark);
padding-top: 100px; /* allow for fixed header */
padding-bottom: 70px;
font-family: var(--font-primary, "Montserrat", sans-serif);
}
/* Hero */
.privacy-hero {
padding: 48px 0;
background: linear-gradient(90deg, rgba(132,136,217,0.06), rgba(148,242,133,0.02));
border-bottom: 1px solid rgba(13,13,13,0.04);
}
.privacy-hero-inner {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.privacy-title {
font-family: var(--font-secondary, "Poppins", sans-serif);
font-size: 2.25rem;
margin: 0 0 8px;
color: var(--dark);
letter-spacing: -0.3px;
}
.privacy-subtitle {
margin: 0;
color: var(--text-muted, #6c757d);
font-size: 1.05rem;
}
/* Main card */
.privacy-content {
margin-top: 36px;
max-width: 1100px;
padding-left: 16px;
padding-right: 16px;
}
.privacy-card {
background: linear-gradient(180deg, #fff, #fbfbff);
border-radius: 12px;
padding: 26px;
box-shadow: 0 10px 30px rgba(13,13,13,0.06);
border: 1px solid rgba(132,136,217,0.08);
}
/* Two-column grid inside card */
.privacy-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
}
/* Privacy list (left column) */
.privacy-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
}
.privacy-list li {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px;
border-radius: 10px;
background-color: rgba(132,136,217,0.03);
border: 1px solid rgba(132,136,217,0.04);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.privacy-list li:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(13,13,13,0.06);
}
.privacy-list .icon {
min-width: 52px;
height: 52px;
border-radius: 10px;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(132,136,217,0.14), rgba(132,136,217,0.06));
color: var(--primary);
font-size: 22px;
flex-shrink: 0;
}
.privacy-list .text h3 {
margin: 0 0 6px;
font-size: 1.05rem;
color: var(--dark);
font-weight: 600;
}
.privacy-list .text p {
margin: 0;
color: var(--text-muted, #6c757d);
font-size: 0.97rem;
line-height: 1.5;
}
/* Aside (contact block) */
.privacy-contact {
background: linear-gradient(180deg, #ffffff, #fbfefb);
border-radius: 10px;
padding: 18px;
border: 1px solid rgba(148,242,133,0.08);
box-shadow: 0 8px 24px rgba(13,13,13,0.04);
position: relative;
}
.privacy-contact h4 {
margin: 0 0 10px;
font-size: 1.05rem;
color: var(--dark);
font-weight: 600;
}
.privacy-contact p {
margin: 0 0 12px;
color: var(--text-muted);
font-size: 0.95rem;
}
.contact-block {
font-style: normal;
color: var(--text-dark);
margin-bottom: 14px;
font-size: 0.95rem;
line-height: 1.5;
}
.contact-block a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.contact-block a:hover {
color: var(--primary-dark, #6266b7);
text-decoration: underline;
}
.policy-dates .muted {
color: var(--text-muted);
font-size: 0.9rem;
}
/* Return button */
.btn-return {
display: inline-block;
margin-top: 8px;
padding: 10px 18px;
font-weight: 600;
border-radius: 8px;
text-transform: none;
}
/* Full policy text area */
.policy-details {
margin-top: 20px;
padding-top: 12px;
border-top: 1px dashed rgba(13,13,13,0.04);
}
.policy-details h3 {
margin: 0 0 12px;
font-size: 1.05rem;
color: var(--dark);
font-weight: 600;
}
.policy-body p {
margin: 0 0 12px;
color: var(--text-muted);
line-height: 1.7;
font-size: 0.98rem;
}
/* Utility */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Small screens fallback: stack columns */
@media (max-width: 991.98px) {
.privacy-grid {
grid-template-columns: 1fr;
}
.privacy-contact {
order: 2;
}
.privacy-list {
order: 1;
}
}
/* Tiny screens: spacing and text sizes */
@media (max-width: 575.98px) {
.privacy-hero {
padding: 28px 0;
}
.privacy-title {
font-size: 1.6rem;
}
.privacy-subtitle {
font-size: 0.98rem;
}
.privacy-card {
padding: 18px;
}
.privacy-list .icon {
min-width: 46px;
height: 46px;
font-size: 20px;
}
.privacy-list .text h3 {
font-size: 1rem;
}
.privacy-list .text p,
.policy-body p,
.contact-block {
font-size: 0.95rem;
}
.privacy-contact {
padding: 14px;
}
}
/* terms of service */
/* Page container */
#terms-page.terms-page {
background: linear-gradient(180deg, rgba(248,248,252,0.6), #ffffff);
color: var(--dark);
padding-top: 100px; /* allow for fixed header */
padding-bottom: 70px;
font-family: var(--font-primary);
}
/* Hero */
.terms-hero {
padding: 44px 0;
background: linear-gradient(90deg, rgba(132,136,217,0.04), rgba(148,242,133,0.02));
border-bottom: 1px solid rgba(13,13,13,0.04);
}
.terms-hero-inner {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.terms-title {
font-family: var(--font-secondary);
font-size: 2.1rem;
margin: 0 0 8px;
letter-spacing: -0.3px;
color: var(--dark);
}
.terms-subtitle {
margin: 0;
color: var(--text-muted);
font-size: 1.02rem;
}
/* Content card */
.terms-content {
margin-top: 28px;
max-width: 1100px;
padding-left: 16px;
padding-right: 16px;
}
.terms-card {
background: linear-gradient(180deg, #fff, #fbfbff);
border-radius: 12px;
padding: 24px;
box-shadow: 0 10px 30px rgba(13,13,13,0.06);
border: 1px solid var(--card-border);
}
/* Grid layout: main + aside */
.terms-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
}
/* Main column */
.terms-main {
min-width: 0;
}
.terms-section {
margin-bottom: 18px;
padding: 12px;
border-radius: 10px;
background-color: rgba(132,136,217,0.03);
border: 1px solid rgba(132,136,217,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.terms-section:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(13,13,13,0.05);
}
.terms-section-title {
margin: 0 0 8px;
font-size: 1.02rem;
color: var(--dark);
font-weight: 600;
}
.terms-body p {
margin: 0 0 10px;
color: var(--text-muted);
line-height: 1.6;
font-size: 0.98rem;
}
/* Lists inside terms */
.terms-list {
margin: 8px 0 10px 20px;
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.6;
}
/* Aside */
.terms-aside {
background: linear-gradient(180deg, #ffffff, #fbfefb);
border-radius: 10px;
padding: 18px;
border: 1px solid rgba(148,242,133,0.08);
box-shadow: 0 8px 24px rgba(13,13,13,0.04);
}
.terms-aside-title {
margin: 0 0 8px;
font-size: 1.02rem;
color: var(--dark);
font-weight: 600;
}
.terms-aside-text {
margin: 0 0 12px;
color: var(--text-muted);
font-size: 0.95rem;
}
/* Contact block */
.contact-block {
font-style: normal;
color: var(--dark);
margin-bottom: 12px;
font-size: 0.95rem;
line-height: 1.5;
}
.contact-block a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.contact-block a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.terms-contact h5 {
margin: 0 0 8px;
font-size: 0.95rem;
color: var(--dark);
}
/* Buttons */
.btn-return {
display: inline-block;
margin-top: 8px;
padding: 10px 18px;
font-weight: 600;
border-radius: 8px;
text-transform: none;
background: var(--primary);
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
}
/* Small note */
.terms-note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed rgba(13,13,13,0.04);
}
.small.muted {
color: var(--text-muted);
font-size: 0.9rem;
}
/* Visually hidden utility */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Focus visibility for keyboard users */
.terms-card :focus {
outline: 3px solid rgba(132,136,217,0.18);
outline-offset: 3px;
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
.terms-section,
.terms-card,
.terms-aside {
transition: none !important;
animation: none !important;
}
}
/* Print friendly */
@media print {
.terms-hero,
.btn-return,
.terms-aside {
display: none;
}
.terms-card {
box-shadow: none;
border: none;
}
.terms-body p, .terms-list {
color: #000;
}
}
/* Mobile logo size adjustments */
@media (max-width: 991.98px) {
/* Smaller logo on mobile */
.navbar-brand .logo-image {
height: 28px;
max-width: 140px;
}
/* Adjust spacing between logo and contact icons */
.navbar-brand {
margin-right: 0;
padding-right: 0;
}
/* Make container more compact */
.navbar > .container {
padding-left: 10px;
padding-right: 10px;
}
/* Reduce contact icons size slightly */
.navbar-contact-icon {
width: 32px;
height: 32px;
}
/* Add gap between contact icons */
.navbar-contact-icons {
gap: 8px;
}
}
/* Extra small devices */
@media (max-width: 575.98px) {
.navbar-brand .logo-image {
height: 24px;
max-width: 120px;
}
.navbar-contact-icon {
width: 30px;
height: 30px;
}
.navbar-contact-icons {
gap: 6px;
}
}
/* TESTOMONIALS FINAL FIX */
/* Fix for testimonial content display */
.testimonial-content p {
display: block !important;
overflow: visible !important;
height: auto !important;
line-height: 1.6;
color: var(--text-muted);
font-style: italic;
margin-bottom: 0;
/* Remove any properties that limit height or truncate text */
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
line-clamp: unset;
text-overflow: unset;
white-space: normal;
}
/* Ensure testimonial content has proper padding and fits content */
.testimonial-content {
padding: 30px;
position: relative;
height: auto !important;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background-color: white;
}
/* Fix for specific testimonial paragraphs with IDs */
#icxt2j, #if2k5a, #ic64zj, #is65xb, .p1 {
display: block !important;
height: auto !important;
overflow: visible !important;
margin-bottom: 10px;
}
/* Adjust testimonial card structure */
.testimonial-card {
height: auto !important;
display: flex;
flex-direction: column;
}
.testimonial-card .row {
flex: 1;
height: 100%;
}
/* Make profile section height auto */
.testimonial-profile {
height: auto !important;
padding: 30px 20px;
}
/* Adjust carousel to adapt to content height */
.carousel-item {
height: auto !important;
}
/* Adjust quote mark position */
.quote-mark {
position: absolute;
top: 15px;
right: 15px;
font-size: 28px;
color: rgba(132, 136, 217, 0.1);
}
/* ===== RESPONSIVE FORM STYLING FOR STONES PROPERTIES ===== */
.dataforms {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 2rem 0;
width: 100%;
}
.custom-form {
background: white;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 12px 36px rgba(13, 13, 13, 0.12);
border: 1px solid rgba(132, 136, 217, 0.15);
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
}
.custom-form fieldset {
border: none;
padding: 0;
margin: 0;
width: 100%;
}
.custom-form ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
.custom-form li {
margin-bottom: 0;
position: relative;
width: 100%;
}
/* Make specific form elements span full width */
#datafieldwrapper-0-116878, /* Repair details textarea */
#datafieldwrapper-0-116879, /* Photos file input */
.submit-li {
grid-column: 1 / -1;
}
/* Form Labels */
.form-field-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: #0D0D0D;
font-size: 0.95rem;
letter-spacing: 0.3px;
width: 100%;
}
/* Input Fields - Keep red left border for required fields */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid #e8e8e8;
border-left: 4px solid #F28585; /* Red left border for required fields */
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
background-color: #f8f9fa;
box-sizing: border-box;
color: #0D0D0D;
font-family: inherit;
-webkit-appearance: none; /* Remove iOS shadow */
}
.custom-form input[type="text"]:hover,
.custom-form input[type="email"]:hover,
.custom-form input[type="tel"]:hover,
.custom-form textarea:hover,
.custom-form select:hover {
border-color: #c0c3e5;
border-left-color: #F28585; /* Maintain red on hover */
}
.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form textarea:focus,
.custom-form select:focus {
outline: none;
border-color: #8488D9;
border-left-color: #8488D9; /* Purple left border on focus */
background-color: white;
box-shadow: 0 0 0 4px rgba(132, 136, 217, 0.18);
transform: translateY(-2px);
}
/* Valid fields get green left border */
.custom-form input:required:valid,
.custom-form select:required:valid,
.custom-form textarea:required:valid {
border-left: 4px solid #94F285 !important;
}
/* Textarea specific styling */
.custom-form textarea {
min-height: 130px;
resize: vertical;
line-height: 1.5;
}
/* Select dropdown styling */
.custom-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238488D9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-size: 16px;
padding-right: 3rem;
cursor: pointer;
}
/* File input styling */
.custom-form input[type="file"] {
width: 100%;
padding: 1rem;
border: 2px dashed #e8e8e8;
border-radius: 10px;
background-color: #f8f9fa;
cursor: pointer;
transition: all 0.3s ease;
}
.custom-form input[type="file"]:hover {
border-color: #8488D9;
background-color: #f0f1fa;
}
/* Submit button styling */
.submit-li {
text-align: center;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(132, 136, 217, 0.2);
width: 100%;
}
.submit {
background: linear-gradient(145deg, #8488D9, #6a6fc7);
color: white;
border: none;
border-radius: 12px;
padding: 1.125rem 3rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 6px 16px rgba(132, 136, 217, 0.35),
0 2px 6px rgba(132, 136, 217, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.75px;
position: relative;
overflow: hidden;
width: 100%;
max-width: 300px;
}
.submit::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: 0.5s;
}
.submit:hover {
background: linear-gradient(145deg, #6a6fc7, #8488D9);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(132, 136, 217, 0.45),
0 4px 8px rgba(132, 136, 217, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.submit:hover::before {
left: 100%;
}
.submit:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(132, 136, 217, 0.4),
inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Placeholder styling */
.custom-form ::placeholder {
color: #a0a0a0;
opacity: 1;
font-style: italic;
font-weight: 400;
}
/* Focus states for accessibility */
.custom-form input:focus,
.custom-form select:focus,
.custom-form textarea:focus {
outline: 2px solid #8488D9;
outline-offset: 2px;
}
/* Animation for form elements */
.custom-form li {
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
transform: translateY(15px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stagger animations for form items */
.custom-form li:nth-child(1) { animation-delay: 0.05s; }
.custom-form li:nth-child(2) { animation-delay: 0.1s; }
.custom-form li:nth-child(3) { animation-delay: 0.15s; }
.custom-form li:nth-child(4) { animation-delay: 0.2s; }
.custom-form li:nth-child(5) { animation-delay: 0.25s; }
.custom-form li:nth-child(6) { animation-delay: 0.3s; }
.custom-form li:nth-child(7) { animation-delay: 0.35s; }
.custom-form li:nth-child(8) { animation-delay: 0.4s; }
/* Mobile-specific adjustments */
@media (max-width: 768px) {
.dataforms {
margin: 1.5rem 0;
}
.custom-form {
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(13, 13, 13, 0.1);
}
.custom-form ul {
grid-template-columns: 1fr; /* Switch to single column on mobile */
gap: 1.25rem;
}
/* Reset full-width elements since we're now single column */
#datafieldwrapper-0-116878,
#datafieldwrapper-0-116879,
.submit-li {
grid-column: 1;
}
.form-field-label {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
padding: 0.875rem 1rem;
font-size: 16px; /* Prevents zoom on iOS */
}
.submit {
padding: 1rem 2rem;
font-size: 1rem;
max-width: 100%;
}
.submit-li {
margin-top: 1.25rem;
padding-top: 1.25rem;
}
}
@media (max-width: 480px) {
.custom-form {
padding: 1.25rem;
border-radius: 10px;
}
.custom-form ul {
gap: 1rem;
}
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
padding: 0.75rem 0.875rem;
}
.submit {
padding: 0.875rem 1.5rem;
}
}
/* Fix for iOS form elements */
@supports (-webkit-overflow-scrolling: touch) {
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
font-size: 16px; /* Prevents zoom on focus in iOS */
}
}
/* Fix for the double checkbox issue */
.multi-checkbox-options-wrapper {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.8rem;
margin-top: 0.5rem;
}
.form_group-0-116895 {
display: flex !important;
align-items: center;
width: 100%;
margin-bottom: 0;
}
.checkbox-input {
width: 20px !important;
height: 20px !important;
margin: 0 12px 0 0 !important;
accent-color: #8488D9;
flex-shrink: 0;
/* Reset any conflicting styles */
-webkit-appearance: checkbox !important;
appearance: checkbox !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
display: inline-block !important;
}
.multi-checkbox-options-wrapper label {
margin: 0;
font-weight: 500;
cursor: pointer;
color: #0D0D0D;
/* Ensure no pseudo-elements creating extra boxes */
position: relative;
}
.multi-checkbox-options-wrapper label::before,
.multi-checkbox-options-wrapper label::after {
display: none !important;
}
/* Ensure checkbox container spans full width */
#datafieldwrapper-0-116895 {
grid-column: 1 / -1 !important;
}
/* Remove any duplicate styling */
.multi-checkbox-options-wrapper input[type="checkbox"]::before,
.multi-checkbox-options-wrapper input[type="checkbox"]::after {
display: none !important;
}
/* Mobile adjustments for checkboxes */
@media (max-width: 768px) {
.checkbox-input {
width: 18px !important;
height: 18px !important;
}
}
@media (max-width: 480px) {
.checkbox-input {
width: 16px !important;
height: 16px !important;
margin-right: 10px !important;
}
}
/* about us cards full click */
/* Full-card clickable layer for contact cards */
.contact-info-card {
position: relative; /* ensure the absolute link is anchored */
overflow: visible;
}
.contact-info-card .card-link {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; */
z-index: 1;
display: block;
text-decoration: none;
background: transparent;
/* prevent the link from stealing focus outline appearance on click if you prefer custom outline */
}
/* ensure interactive children remain clickable and on top */
.contact-info-card .btn,
.contact-info-card a.btn,
.contact-info-card .form-control,
.contact-info-card input,
.contact-info-card textarea,
.contact-info-card select {
position: relative;
z-index: 2;
}
/* pointer cursor on whole card */
.contact-info-card:hover {
cursor: pointer;
}
/* preserve existing hover transform */
.contact-info-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
/* Optional — visible focus style for accessibility when card-link receives keyboard focus */
.contact-info-card .card-link:focus {
outline: 3px solid rgba(132,136,217,0.35);
outline-offset: -3px;
}
/* =========================
VIDEO HOLDER
========================= */
/* Container wrap */
.video-holder-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* --- Frame (outer) --- */
.video-frame.sleek-frame {
--frame-radius: 18px;
--inner-radius: var(--frame-radius);
--glow-blur: 10px;
position: relative;
width: 960px;
max-width: 100%;
margin: 0 auto;
padding: 8px;
border-radius: var(--frame-radius);
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.50));
box-shadow:
0 20px 40px rgba(0,0,0,0.35),
0 3px 10px rgba(0,0,0,0.18);
overflow: visible;
transition: transform 0.32s cubic-bezier(.2,.9,.2,1), box-shadow 0.32s;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.04);
}
/* Lift on hover/focus */
.video-frame.sleek-frame:hover,
.video-frame.sleek-frame:focus-within {
transform: translateY(-6px);
box-shadow:
0 34px 80px rgba(0,0,0,0.40),
0 8px 26px rgba(0,0,0,0.22);
}
/* --- Video element styling (inside frame) --- */
.video-frame.sleek-frame .video-el {
display: block;
width: 100%;
height: auto;
border-radius: calc(var(--inner-radius) - 6px);
overflow: hidden;
background: #000;
z-index: 6;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
/* --- Play overlay button --- */
.video-play-overlay {
position: absolute;
z-index: 12;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.30));
cursor: pointer;
transition: transform 0.22s ease, background 0.22s ease;
-webkit-tap-highlight-color: transparent;
}
/* Play icon circle */
.video-play-overlay .play-icon {
width: 78px;
height: 78px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.20), rgba(255,255,255,0.03) 20%),
linear-gradient(180deg, rgba(20,20,20,0.85), rgba(20,20,20,0.55));
box-shadow:
0 10px 30px rgba(0,0,0,0.55),
0 0 36px rgba(132,136,217,0.14);
position: relative;
z-index: 14;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Triangle play symbol */
.video-play-overlay .play-icon::before {
content: "";
width: 0;
height: 0;
border-left: 20px solid rgba(255,255,255,0.98);
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
margin-left: 4px;
display: inline-block;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
/* Hover / focus effect */
.video-play-overlay:hover .play-icon,
.video-play-overlay:focus-visible .play-icon {
transform: scale(1.06);
box-shadow:
0 18px 48px rgba(0,0,0,0.55),
0 0 50px rgba(132,136,217,0.20);
outline: none;
}
/* --- Favicon in top-right (decorative) --- */
.video-frame.sleek-frame .video-favicon {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
object-fit: contain;
border-radius: 6px;
background: rgba(255,255,255,0.04);
box-shadow: 0 6px 16px rgba(0,0,0,0.30);
z-index: 16;
pointer-events: none;
user-select: none;
border: 1px solid rgba(255,255,255,0.04);
}
/* --- Accessibility focus ring --- */
.video-frame.sleek-frame:focus-within {
outline: 3px solid rgba(132,136,217,0.16);
outline-offset: 4px;
}
/* --- Hide play overlay when playing (JS toggles data-playing="true") --- */
.video-frame.sleek-frame[data-playing="true"] .video-play-overlay { display: none; }
/* --- Optional: smoother edges on some browsers --- */
.video-frame.sleek-frame,
.video-frame.sleek-frame .video-el {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Fix for About Us cards text color */
.about-values .service-card {
text-align: center;
padding: 40px 30px;
height: 100%;
transition: all 0.3s ease;
background-color: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
color: var(--text-dark) !important; /* Force black text */
}
.about-values .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.about-values .service-card h3 {
color: var(--text-dark) !important; /* Force black text for headings */
margin-bottom: 15px;
font-weight: 600;
}
.about-values .service-card p {
color: var(--text-dark) !important; /* Force black text for paragraphs */
}