.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 13px;
padding: 24px;
max-width: 1400px;
margin: 0 auto;
} .project-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding:0 !important;
}
.project-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
} .project-image {
position: relative;
padding-top: 66%; overflow: hidden;
}
.project-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 10px 10px 0 0;
} .project-badge {
position: absolute;
top: 12px;
left: 12px;
background: #fff;
color: #000;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
z-index: 1;
} .project-info {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.project-list-title {
font-size: 20px;
font-weight: 600;
color: #333 !important;
margin: 0;
line-height: 1.3;
}
.project-location {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
}
.project-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: auto;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.meta-label {
color: #666;
font-size: 12px;
}
.meta-value {
color: #333;
font-weight: 500;
font-size: 14px;
} .developer-info {
margin-top: 12px;
font-size: 14px;
color: #666;
}
.meta-item:nth-of-type(2) {
text-align: end;
}
.view-all-wrapper {
grid-column: 1 / -1;
text-align: center;
margin-top: 2rem;
}
.view-all-button {
display: inline-block;
padding: 12px 30px;
background-color: #4CAF50 !important;
color: white !important;
text-decoration: none !important;
border-radius: 6px;
font-weight: 500;
transition: background-color 0.3s ease;
}
.view-all-button:hover {
background-color: #45a049;
} .projects-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 2rem;
padding: 1rem;
}
.page-numbers {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
color: #333;
display: flex;
gap: 10px;
}
.page-numbers.current {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
.page-numbers:hover:not(.current) {
background-color: #f5f5f5;
}
@media (max-width: 768px) {
.projects-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
padding: 16px;
}
} .project-detail-wrapper { margin: 0 auto; }
.project-hero-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.project-title {
font-size: 64px;
text-transform: uppercase;
margin: 0;
font-weight: bold;
letter-spacing: 10.67px;
line-height: 84px;
-webkit-text-stroke-width: 2px;
-webkit-text-fill-color: transparent;
transition: transform 1s cubic-bezier(.165,.84,.44,1);
-webkit-text-stroke-color: currentColor;
color: white !important;
}
@media (max-width: 1199px) {
.project-title {
font-size: 50px;
letter-spacing: 8px;
line-height: 70px;
}
}
@media (max-width: 767px) {
.project-title {
font-size: 30px;
}
}
.property_location svg{
height: 50px;
margin-left: -6px;
min-width: 50px;
width: 50px;
}
.property_location span{
color: #fff;
font-size: 26px;
}
@media (max-width: 767px) {
.property_location span {
font-size: 20px;
}
}
.property_price_completion {
display: flex;
gap: 10px;
justify-content: space-between;
}
.property_price_completion>div{
display: flex;
flex-direction: column;
}
.property_price_completion > div > span:first-child {
color: #fff;
font-size: 30px;
font-weight: 500;
}
@media (max-width: 767px) {
.property_price_completion > div > span:first-child {
font-size: 25px;
}
}
@media (max-width: 767px) {
.property_price_completion>div>span:last-child, .property_updated_at span {
font-size: 16px;
}
}
.property_price_completion > div > span:last-child {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.property_updated_at {
margin-top: 20px;
}
.property_updated_at span {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.property_developer {
align-items: center;
border-radius: 5px;
display: flex;
gap: 15px;
padding: 20px 0;
}
.property_developer img {
border: 1px solid #052844;
height: 80px;
-o-object-fit: contain;
object-fit: contain;
width: 80px;
}
@media (max-width: 767px) {
.property_developer img {
height: 50px;
width: 50px;
}
}
@media (max-width: 767px) {
.property_developer span {
font-size: 20px;
}
}
.property_developer span {
color: #fff;
font-size: 25px;
font-weight: 500;
}
.project_detail-type {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
padding: 5px 15px;
border-radius: 20px;
margin-bottom: 20px;
}
.project-detail-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; }
.project-detail-meta > div {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
}
.project-hero-image {
position: relative;
}
.project-hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 10px;
}        .project-navigation {
background: white;
padding: 15px 0; border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 100;
}
.project-navigation nav {
display: flex;
gap: 35px;
overflow-x: auto;
padding: 0 20px;
}
.project-navigation a {
color: #666;
text-decoration: none;
padding: 10px 0;
position: relative;
white-space: nowrap;
}
.project-navigation a.active {
color: #1a365d;
font-weight: bold;
}
.project-navigation a.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #1a365d;
}
.project-section { }
.section-content {
max-width: 1200px;
margin: 0 auto; }
.section-title {
font-size: 1.8rem;
color: #052844;
margin-bottom: 30px;
font-weight: 600;
}
.project-facts {
background: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.project-facts h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
font-weight: 500;
}
.project-description {
color: #4a5568;
line-height: 1.6;
}
.description-content {
margin-bottom: 20px;
}
.description-content.truncated {
max-height: 120px;
overflow: hidden;
position: relative;
}
.description-content.truncated:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(transparent, #fff);
}
.read-more-btn {
background: none;
border: none;
color: #2b6cb0;
cursor: pointer;
font-weight: 500;
padding: 0;
font-size: 0.9rem;
}
.read-more-btn:hover {
text-decoration: underline;
}
.project-contact {
background: #fff;
border-radius: 10px;
padding: 20px 30px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-icon {
font-size: 1.2rem;
}
.contact-label {
color: #718096;
font-size: 0.9rem;
min-width: 60px;
}
.contact-value {
color: #2b6cb0;
text-decoration: none;
}
.contact-value:hover {
text-decoration: underline;
}
.general-plan {
margin-top: 40px;
}
.general-plan h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
}
.plan-image img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.section-title {
font-size: 1.5rem;
}
.project-facts,
.project-contact {
padding: 20px;
}
} .filter-drawer-container {
position: relative;
}
.filter-button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.filter-button i {
margin-right: 8px; font-size: 16px;
} .close-drawer-button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
} .apply-filters-button-drawer {
background-color: #28a745; color: white;
border: none;
padding: 10px 15px;
margin-top: 10px;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 5px;
justify-content: center;
width: 100%;
}
.clear-filters-button {
background-color: #f44336; color: white;
border: none;
padding: 10px 15px;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.clear-filters-button i {
margin-right: 8px; font-size: 16px;
}
.clear-filters-button:hover {
background-color: #d32f2f; } .filter-drawer {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 400px;
height: 100%;
background-color: #f8f9fa;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
transition: right 0.3s ease-in-out;
z-index: 9999;
overflow-y: auto;
padding: 20px;
} .filter-drawer.open {
right: 0;
} .filter-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
margin-top: 35px;
}  .filter-drawer-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-drawer-content input,
.filter-drawer-content select {
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
} .apply-filters-button {
background-color: #28a745;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
} .project-detail-wrapper { margin: 0 auto; }
.project-hero-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.project_detail-type {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
padding: 5px 15px;
border-radius: 20px;
margin-bottom: 20px;
}
.project-detail-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; }
.project-detail-meta > div {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
}
.project-hero-image {
position: relative;
}
.project-hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 10px;
}        .project-navigation a {
color: #666;
text-decoration: none;
padding: 10px 0;
position: relative;
white-space: nowrap;
}
.project-navigation a.active {
color: #1a365d;
font-weight: bold;
}
.project-navigation a.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #1a365d;
}
.project-navigation a:hover {
color:#052844
}
.project-facts {
background: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.project-facts h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
font-weight: 500;
}
.project-description {
color: #4a5568;
line-height: 1.6;
}
.description-content {
margin-bottom: 20px;
}
.description-content.truncated {
max-height: 120px;
overflow: hidden;
position: relative;
}
.description-content.truncated:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(transparent, #fff);
}
.read-more-btn {
background: none;
border: none;
color: #2b6cb0;
cursor: pointer;
font-weight: 500;
padding: 0;
font-size: 0.9rem;
}
.read-more-btn:hover {
text-decoration: underline;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-icon {
font-size: 1.2rem;
}
.contact-label {
color: #718096;
font-size: 0.9rem;
min-width: 60px;
}
.contact-value {
color: #2b6cb0;
text-decoration: none;
}
.contact-value:hover {
text-decoration: underline;
}
.general-plan {
margin-top: 40px;
}
.general-plan h3 {
font-size: 1.2rem;
color: #2d3748;
margin-bottom: 20px;
}
.plan-image img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.section-title {
font-size: 1.5rem;
}
.project-facts,
.project-contact {
padding: 20px;
}
}/*/*/.project-hero-swiper {
position: relative;
width: 55%;
height: 400px;
}
@media (max-width: 991px) {
.project-hero-swiper {
width: 100%;
}
}
.project-hero-swiper .swiper {
width: 100%;
height: 100%;
}
.project-hero-swiper .swiper-slide {
position: relative;
}
.project-hero-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.project-hero-swiper .swiper-pagination {
position: absolute;
bottom: 20px;
z-index: 10;
}
.project-hero-swiper .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.9);
opacity: 0.5;
}
.project-hero-swiper .swiper-pagination-bullet-active {
opacity: 1;
}/**/         .property-type{ border-radius: 5px;
color: #fff;
display: inline-flex;
font-weight: 500;
padding: 6px;
}
.units-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1rem;
}
.units-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.unit-card {
background: white;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.unit-card:hover {
transform: translateY(-4px);
}
.unit-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.unit-details {
padding: 1.5rem;
}
.unit-type {
font-size: 1.25rem;
font-weight: 600;
color: #052844;
margin-bottom: 1rem;
}
.unit-price {
font-size: 1.125rem;
font-weight: 600;
color: #052844;
margin-bottom: 0.5rem;
}
.unit-area {
color: #6b7280;
font-size: 0.875rem;
}
.location-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1rem;
}
.map-container {
width: 100%;
margin-top: 1.5rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.location-name {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: #4b5563;
font-size: 1rem;
}
.map-pin-icon {
width: 20px;
height: 20px; background-size: contain;
background-repeat: no-repeat;
}
.no-location {
padding: 2rem;
text-align: center;
background-color: #f3f4f6;
border-radius: 8px;
color: #6b7280;
} @media (max-width: 768px) {
.map-container iframe {
height: 350px;
}
}
.project-hero {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: linear-gradient(90deg, #0b2b45, #fff 135.22%);
padding: 30px 70px;
color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
gap: 30px;
}
@media (max-width: 1199px) {
.project-hero{
padding: 30px 30px;
}
}
@media (max-width: 991px) {
.project-hero{
flex-direction: column;
padding: 30px 20px;
align-items: unset !important;
}
}
.project-hero-content {
flex: 1;
margin-right: 20px;
}
.property-type span,
.project_detail-type,
.project-detail-meta div {
margin: 10px 0;
font-size: 1.1em;
}
.project-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.location img {
width: 20px;
height: 20px;
margin-right: 8px;
}
.detail_price,
.detail_completion {
font-size: 1.2em;
background: rgba(0, 0, 0, 0.2);
padding: 5px 10px;
border-radius: 5px;
}         .image-count {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 1em;
} .nearby-places-section {
margin-top: 2rem;
margin-bottom: 40px;
padding: 1.5rem;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.nearby-places-section .section-title {
font-size: 1.75rem;
font-weight: bold;
color: #333;
margin-bottom: 1rem;
text-align: left;
}
.nearby-places-list {
list-style: none;
padding: 0;
margin: 0;
}
.nearby-place-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid #ddd;
}
.nearby-place-item:last-child {
border-bottom: none;
}
.place-name {
display: flex;
align-items: center;
gap: 8px;
font-size: 1rem;
color: #333;
}
.place-icon {
width: 16px;
height: 16px;
}
.place-distance {
font-size: 1rem;
color: #666;
}
@media (max-width: 768px) {
.nearby-place-item {
flex-direction: column;
align-items: flex-start;
}
.place-name {
margin-bottom: 0.5rem;
}
.place-distance {
font-size: 0.9rem;
color: #666;
}
} .buildings-section { font-family: Arial, sans-serif;
}
.section-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.buildings-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.building-card {
width: 250px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}
.building-image img {
width: 100%;
height: 150px;
object-fit: cover;
background-color: #f9f9f9;
}
.building-info {
padding: 15px;
}
.building-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.building-description {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.building-properties {
font-size: 14px;
font-weight: bold;
color: #333;
}
.facilities-section {
padding: 40px;
background-color: #f9f9f9;
text-align: center;
}
.facilities-section h2 {
font-size: 28px;
margin-bottom: 20px;
color: #052844;
}
.facilities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
justify-items: center;
align-items: start;
}
.facility-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.facility-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.facility-image { width: 245px;
height: 200px;
object-fit: cover;
}
@media (max-width: 920px) {
.facility-image{
width:320px;
}
}
@media (max-width: 750px) {
.facility-image{
width:260px;
}
}
@media (max-width: 650px) {
.facility-image{
width:320px;
}
}
@media (max-width: 350px) {
.facility-image{
width:250px;
}
}
.facility-name {
font-size: 18px;
font-weight: bold;
margin: 15px 0 5px;
color: #052844;
}
.facility-description {
font-size: 14px;
color: #555;
margin-bottom: 15px;
}
.features-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.feature-pill {
display: inline-block;
background-color: #f0f0f0;
color: #333;
padding: 10px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
.feature-pill:hover {
background-color: #e0e0e0;
cursor: pointer;
}                                                         .payment-plans-section {
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width : 1160px !important;
margin: 0 auto;
}
.payment-plans-section h2 {
color: #003047;
margin-bottom: 30px;
font-weight: 600;
}                            .payment-plan-tabs-container {
margin-bottom: 20px;
border-bottom: 1px solid #eee;
overflow: hidden; }
.payment-tabs-swiper {
width: 100%;
overflow: visible; }
.payment-tabs-swiper .swiper-slide {
width: auto; }
.payment-plan-tab {
padding: 10px 20px;
cursor: pointer;
color: #666;
position: relative;
font-weight: 500;
white-space: nowrap; }
.payment-plan-tab.active {
color: #003047;
font-weight: 600;
}
.payment-plan-tab.active:after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: #003047;
}
.original_payment_plane_section{
max-width: 1200px;
margin: 0 auto !important;
padding: 20px;
} @media (max-width: 768px) {
.payment-plan-tab {
padding: 10px 15px;
font-size: 14px;
}
} .payment-plan-content {
display: none;
padding: 20px 0;
}
.payment-plan-content.active {
display: block;
} .payment-timeline {
position: relative;
height: 120px;
margin: 30px 0 50px;
padding: 0 20px; } .timeline-wrapper {
display: flex;
width: 100%;
margin: 40px 0;
position: relative;
}
.timeline-line {
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 4px;
background-color: #e0e0e0;
z-index: 1;
} .timeline-wrapper .timeline-step {
flex: 1;
text-align: center;
padding: 0 4px;
position: relative;
z-index: 2;
} .timeline-step::before {
content: '';
display: block;
height: 40px;  border-radius: 4px;
margin-bottom: 15px;
} .timeline-step .dot {
width: 16px;
height: 16px;
background-color: #cfd8dc; border-radius: 50%;
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
} .timeline-step .label .percent {
font-weight: 600;
font-size: 18px;
color: #263238;
margin-bottom: 4px;
} .timeline-step .label .text {
font-size: 14px;
} .milestone-group {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 15px;
}
.milestone-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
cursor: pointer;
}
.milestone-header .info {
flex: 1;
}
.milestone-header .info strong {
display: block;
color: #263238;
font-size: 16px;
margin-bottom: 4px;
}
.milestone-header .info small {
color: #607D8B;
font-size: 12px;
}
.milestone-header .info .count {
color: #607D8B;
font-size: 14px;
margin-top: 4px;
}
.milestone-header .right {
display: flex;
align-items: center;
}
.milestone-header .right span {
font-weight: 600;
color: #263238;
margin-right: 10px;
}
.toggle-icon {
width: 18px;
height: 18px;
transition: transform 0.3s;
}
.milestone-header.active .toggle-icon {
transform: rotate(180deg);
}
.milestone-body {
padding: 0 0 15px;
}
.milestone-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px dashed #e5e5e5;
}
.milestone-item:last-child {
border-bottom: none;
}
.milestone-item .title {
font-weight: 500;
color: #263238;
}
.milestone-item .date {
color: #607D8B;
font-size: 12px;
margin-top: 4px;
}
.fee-badge {
display: inline-block;
background-color: #F5F5F5;
color: #607D8B;
border-radius: 3px;
padding: 2px 6px;
font-size: 11px;
font-weight: 500;
}
@media (max-width: 768px) {
.timeline-step .label .text {
font-size: 12px;
white-space: normal;
word-break: break-word;
}
} .payment-details {
margin-top: 30px;
}
.payment-stage {
border-bottom: 1px solid #eeee;
padding: 15px 0;
}
.stage-header {
display: flex;
justify-content: space-between;
align-items: center; cursor: pointer;
}
.stage-header h4 {
flex: 1;
margin: 0;
color: #003047;
font-weight: 500;
}
.stage-payments {
margin-right: 20px;
color: #666;
font-size: 14px;
}
.stage-percentage {
font-weight: 600;
color: #003047;
font-size: 16px;
width: 80px;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
}
.stage-details {
padding: 15px 0;
display: none;
}
.stage-header.active + .stage-details {
display: block;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed #eeee;
border-top: 1px dashed #eeee;
}
.detail-row:last-child {
border-bottom: none;
}
.detail-row.fee-item {
color: #666;
}
.detail-label {
flex: 1;
font-weight: 600;
}
.detail-value {
font-weight: 500;
text-align: right;
padding-left: 15px;
} .payment-conditions {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
}
.payment-conditions h4 {
margin-top: 0;
margin-bottom: 15px;
color: #003047;
}
.condition-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.condition-label {
color: #666;
flex: 1;
}
.condition-value {
font-weight: 500;
text-align: right;
padding-left: 15px;
}
@media (max-width: 768px) {
.payment-timeline {
margin: 30px 0;
height: 150px;
} .timeline-label {
font-size: 12px;
max-width: 80px;
}
.stage-header {
flex-wrap: wrap;
}
.stage-payments {
order: 3;
width: 100%;
margin-top: 5px;
margin-right: 0;
}
.stage-percentage {
order: 2;
width: auto;
}
.detail-row, .condition-row {
flex-direction: column;
}
.detail-value, .condition-value {
text-align: left;
padding-left: 0;
padding-top: 5px;
}
}
.sales-executive-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.sale_card {
flex: 1 1 calc(33.333% - 20px);
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 10px;
width: 300px;
max-width: 300px;
padding: 20px;
text-align: center;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.sale_card:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.profile-pic {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
}
.designation {
font-size: 14px;
color: #777;
margin-bottom: 10px;
}
.email {
font-size: 14px;
color: #007BFF;
text-decoration: none;
}
.email:hover {
text-decoration: underline;
}
.buttons {
display: flex;
justify-content: space-around;
margin: 15px 0;
}
.sale_btn {
border: none !important;
border-radius: 5px !important;
padding: 10px 20px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background-color 0.3s ease, color 0.3s ease !important;
}
.whatsapp {
background-color: #25D366 !important;
color: #fff !important;
}
.whatsapp:hover {
background-color: #1aa552 !important;
}
.call {
background-color: #DC3545 !important;
color: #fff !important;
}
.call:hover {
background-color: #b72b37 !important;
}
.languages {
display: flex;
justify-content: space-around;
}
.lang-btn {
border: 1px solid #ccc;
background-color: #f8f9fa;
border-radius: 5px;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.lang-btn:hover {
background-color: #007BFF;
color: #fff;
}
.form-container { margin: 40px auto;
padding: 20px;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
font-family: Arial, sans-serif;
}
.form-container h2 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-size: 14px;
margin-bottom: 5px;
color: #555;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
background-color: #f9f9f9;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: #888;
background-color: #fff;
}
.form-group textarea {
height: 100px;
resize: vertical;
}
.submit-btn {
display: block;
width: 100%;
padding: 12px;
background-color: #0f172a;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
text-transform: uppercase;
}
.submit-btn:hover {
background-color: #0d4672;
} .attachments-section {
margin: 40px 0;
padding: 20px;
font-family: Arial, sans-serif;
}
.attachments-section h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.attachments-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.attachment-item {
display: flex;
align-items: center;
background: #f9f9f9;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.attachment-icon img {
width: 32px;
height: 32px;
margin-right: 10px;
}
.attachment-details {
display: flex;
align-items: center;
gap: 50px;
}
.attachment-title {
font-size: 16px;
color: #333;
}
.attachment-download img {
width: 24px;
height: 24px;
cursor: pointer;
}
.attachment-download:hover img {
opacity: 0.8;
}
.form-section{
padding: 20px;
}
.about-section{
margin-bottom: 45px;
}
.submit-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.7;
}
#form_alert {
display: none;
margin-top: 15px;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
color: #fff;
background-color: #28a745; text-align: center;
}
#form_alert.error {
background-color: #dc3545; }
@media (max-width: 768px) {
.project-hero {
flex-direction: column;
}
.project-hero-swiper{
width: 100%;
}
}
.last_updated{
padding-top: 10px;
padding-bottom: 10px;
}
.image-count-label {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
z-index: 10;
text-align: center;
}
.contact-item{
word-break: break-word;
}
.max-wdh{
max-width: 1200px !important;
margin: 0 auto !important;
}
.projects-archive-wrapper{
max-width: 1400px;
}
.main-projects-header {
text-align: center;
margin-bottom: 20px;
}
.project-filters {
display: flex;
justify-content: center;
margin-bottom: 10px;
gap: 10px;
flex-wrap: wrap;
padding: 0px 35px 0px 35px;
row-gap: 25px;
}
.main-filter-button {
padding: 10px 20px;
background-color: #f5f5f5;
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.main-filter-button.active {
background-color: #28a745;
color: #fff;
font-weight: bold;
}
.main-filter-button:hover {
background-color: #28a745;
color: #fff;
}
.projects-header p{
font-weight: 600;
}
.load_project{
text-align: center;
padding: 20px;
}
.projects-filter-form{
padding: 0 36px 0 36px;
}
.map-top-enabled{
margin-top: -34px;
position: relative;
z-index: 2;
}
.filter-div{
display: flex;
gap: 5px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.search_filter_input{
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.category_filter_select{
width: 30%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.filter_adv_btn{
width: 15%;
padding: 10px;
}
.dark-theme .project-item{
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.dark-theme .project-info{
background: #111010 !important;
}
.dark-theme .project-list-title{
color: #fff !important;
}
.dark-theme .project-location{
color: #fff !important;
}
.dark-theme .meta-label{
color: #fff !important;
}
.dark-theme .meta-value{
color:#fff !important;
}
.dark-theme .developer-info{
color:#fff !important;
}
.developer-description {
color: #4b5563;
margin-bottom: 1rem;
line-height: 1.5;
overflow: hidden;
}
.developer-description p {
margin: 0;
}
.developers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.developer-card {
border: 1px solid #ddd;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.2s;
overflow: hidden;
}
.developer-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.developer-image {
width: 100%;
height: 200px;
overflow: hidden;
background-color: #f5f5f5;
}
.developer-logo {
width: 100%;
height: 100%;
object-fit: cover;
}
.developer-logo-placeholder {
width: 100%;
height: 100%;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.developer-list-info {
padding: 20px;
}
.developer-name {
margin: 0 0 15px 0;
font-size: 1.5em;
color: #333;
}
.developer-description {
color: #666;
margin-bottom: 20px;
line-height: 1.5;
font-size: 0.9em;
}
.view-projects-btn {
display: inline-block;
padding: 12px 24px;
background-color: #007bff;
color: white !important;
text-decoration: none !important;
border-radius: 6px;
transition: all 0.2s;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.view-projects-btn:hover {
background-color: #0056b3;
color: white;
transform: translateY(-2px);
}
.developers-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 2rem;
list-style: none; padding: 0; }
.developers-pagination li {
display: inline-flex; }
.developers-pagination a,
.developers-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;  border: 1px solid #ddd;
border-radius: 6px;
background-color: #f1f1f1;
font-size: 16px;
color: #333 !important;
text-decoration: none !important;
transition: background-color 0.2s, color 0.2s;
}
.developers-pagination .current {
background-color: #007bff;
color: #fff !important;
border-color: #007bff;
font-weight: bold;
}
.developers-pagination a:hover {
background-color: #007bff;
color: #333 !important;
}
.page-numbers{
border: unset;
}
.initial-loading {
text-align: center;
padding: 40px;
font-size: 24px;
color: #333;
font-weight: 500;
} .loading-dots {
display: inline-block;
animation: loadingDots 1.5s infinite;
width: 24px;
} .error-message {
text-align: center;
padding: 20px;
color: #721c24;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
margin: 20px 0;
} @keyframes loadingDots {
0% { content: '.'; }
33% { content: '..'; }
66% { content: '...'; }
100% { content: '.'; }
} .developers-content.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.developers-content.loading:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .developers-search {
position: relative;
max-width: 600px;
margin: 0 auto 40px;
} .search-input {
width: 100%;
padding: 15px 45px 15px 20px;
font-size: 16px;
border: 1px solid #e0e0e0;
border-radius: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
outline: none;
}
.search-input:focus {
border-color: #4a90e2;
box-shadow: 0 3px 8px rgba(74, 144, 226, 0.1);
}
.search-input::placeholder {
color: #999;
} .search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #757575;
pointer-events: none;
} @media (max-width: 768px) {
.developers-search {
max-width: 100%;
padding: 0 15px;
}
.search-input {
padding: 12px 40px 12px 15px;
font-size: 15px;
}
}
@media (max-width: 768px) {
.filter-div{
flex-direction: column;
}
.search_filter_input{
width: 100%;
}
.category_filter_select{
width: 100%;
}
.filter_adv_btn{
width: 100%;
}
.projects-filter-form{
padding: 0 16px 0 16px;
}
}
.developers-archive-wrapper{
max-width: 1400px;
}