li.nav-item {
    margin-bottom: 0rem !important;
}

/* Base Styles for Desktop (Default) */
h1 {
  font-size: 24px !important;
}

h2 {
  font-size: 22px !important;
}

h3 {
  font-size: 20px !important;
}

h4 {
  font-size: 18px !important;
}

h5 {
  font-size: 16px !important;
}

p, span {
  font-size: 14px !important;
}

/* Media Query for Tablets */
@media (max-width: 1024px) {
  h1 {
    font-size: 20px !important;
  }
  
  h2 {
    font-size: 18px !important;
  }
  
  h3 {
    font-size: 16px !important;
  }
  
  h4 {
    font-size: 14px !important;
  }
  
  h5 {
    font-size: 12px !important;
  }
  
  p, span {
    font-size: 14px !important; /* No change for paragraph and span */
  }
}

/* Media Query for Mobile */
@media (max-width: 768px) {
  h1 {
    font-size: 20px !important;
  }
  
  h2 {
    font-size: 18px !important;
  }
  
  h3 {
    font-size: 16px !important;
  }
  
  h4 {
    font-size: 14px !important;
  }
  
  h5 {
    font-size: 12px !important;
  }
  
  p, span {
    font-size: 14px !important; /* No change for paragraph and span */
  }
}

/*Overide Code*/

    .custom-project-card {
        height: 100%; /* Make cards take full height of the column */
    }

    .carousel-item {
        display: flex; /* Use flexbox for alignment */
        align-items: stretch; /* Ensure all items stretch to the same height */
    }

    .carousel-inner {
        height: 100%; /* Ensure the carousel takes full height */
    }

    .custom-project-card-img {
        width: 100%; /* Make images responsive */
        height: auto; /* Maintain aspect ratio */
    }

    .custom-project-card-body {
        flex-grow: 1; /* Allow body to take available space */
    }



section.hero{
    padding: unset!important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Apply shadow */
    margin-bottom: 10px!important;
}

.hero-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 250px; /* Adjusted height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px; /* Apply rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Apply shadow */
    overflow: hidden; /* Ensure image covers the entire area */
    margin: 0 auto; /* Center the section if necessary */
}

.hero-content {
    color: white; /* Adjust color for contrast against the background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow for readability */
}

.hero-content h1 {
    margin: 0;
    font-size: 2.5rem; /* Adjust the size as needed */
}

.lead {
    font-size: 1.25rem;
}


/* Developer card styling */
.custom-developer-card {
    transition: transform 0.2s ease-in-out;
}

.custom-developer-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

/* Image for the developer card */
.custom-developer-card-img {
    object-fit: cover;
    width: 100%;
    height: 200px; /* Adjust as per design preference */
}

/* Card body styling */
.custom-developer-card-body {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 15px;
}

/* Title styling */
.custom-developer-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

/* Text styling for card */
.custom-developer-card-text {
    color: #555;
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-developer-card-title {
        font-size: 1.1rem;
    }

    .custom-developer-card-text {
        font-size: 0.85rem;
    }
}


/* Ensure the description wraps properly */
.developer-details p {
    word-wrap: break-word;
    white-space: pre-wrap; /* This will respect new lines and ensure proper wrapping */
    overflow-wrap: break-word;
}
.developer-description p {
    word-wrap: break-word;
    white-space: pre-wrap; /* This will respect new lines and ensure proper wrapping */
    overflow-wrap: break-word;
}

/* Add padding and spacing for the text */
.developer-details {
    padding: 20px;
}

/* Card styling to ensure consistency across screen sizes */
.custom-project-card {
    transition: transform 0.2s ease-in-out;
}

.custom-project-card:hover {
    transform: translateY(-5px);
}

/* Ensure images in the cards are responsive */
.custom-project-card-img {
    object-fit: cover;
    height: 250px;
    width: 100%;
}

/* Fix for the card body to ensure proper layout */
.custom-project-card-body {
    display: flex;
    flex-direction: column;
}

/* Adjust typography responsiveness */
.custom-project-card-title {
    font-size: 1.25rem; /* Make title responsive */
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    .developer-details {
        text-align: center;
    }
    
    .custom-project-card-title {
        font-size: 1.1rem;
    }
    
    .custom-project-card-text {
        font-size: 0.9rem;
    }
}


/*Social Sharing*/
/* CSS for Social Sharing Section */
    .social-sharing-section {
    }

    .section-title {
        font-size: 1.8rem; /* Font size for title */
        margin-bottom: 1.5rem; /* Spacing below the title */
        font-weight: bold; /* Bold title for emphasis */
        color: #333; /* Dark color for the title */
    }

    .social-sharing {
        display: block; /* Block layout for links */
        margin: 0; /* Remove margin */
        padding: 0; /* Remove padding */
    }

    .social-sharing a {
        color: #007BFF; /* Primary color for social links */
        font-size: 28px; /* Increase icon size */
        text-decoration: none; /* No underline on links */
        margin-right: 20px; /* Space between icons */
        transition: color 0.3s; /* Smooth transition for hover effect */
        display: inline-block; /* Inline block to allow margin */
    }

    .social-sharing a:hover {
        color: #0056b3; /* Darker color on hover */
    }

    .social-sharing i {
        vertical-align: middle; /* Align icons vertically */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .social-sharing {
            text-align: justify; /* Center align on smaller screens */
        }

        .social-sharing a {
            margin-bottom: 1rem; /* Space below each link on small screens */
            margin-right: 15px; /* Reset right margin for small screens */
        }
    }


/* CSS for Developer Section */
.developer-section {
    padding: 2rem; /* Increased padding for better spacing */
}

.section-title {
    font-size: 1.8rem; /* Font size for title */
    margin-bottom: 1.5rem; /* Spacing below the title */
}

.developer-content {
    display: flex; /* Flex container for developer info and logo */
    align-items: center; /* Align items in the center */
}

.developer-info {
    width: 70%; /* 70% width for info section */
}

.developer-logo {
    width: 30%; /* 30% width for logo section */
    text-align: right; /* Align logo to the right */
}

.developer-logo img {
    max-width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Slight rounding of logo */
}

.developer-description {
    width: 100%; /* Full width for description */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .developer-content {
        flex-direction: column; /* Stack on small screens */
        align-items: flex-start; /* Align items to the start */
    }

    .developer-info {
        width: 100%; /* Full width on small screens */
        margin-bottom: 1rem; /* Space below info on small screens */
    }

    .developer-logo {
        width: 100%; /* Full width for logo on small screens */
        text-align: center; /* Center logo on small screens */
    }
}



/*config section*/

.configuration-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    cursor: zoom-in; /* Indicate zoomable image */
    transition: transform 0.2s ease-in-out;
}

.configuration-image.zoom {
    cursor: zoom-in;
}

.configuration-image:hover {
    transform: scale(1.05); /* Zoom hover effect */
}


@media print {
    /* Hide unnecessary elements */
    #printPage, nav, footer {
        display: none;
    }

    /* Ensure content fits well on the printed page */
    body {
        font-size: 12px; /* Adjust font size */
        line-height: 1.6;
    }

    #project-content {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    h1, h2, h3, p {
        page-break-inside: avoid; /* Avoid breaking headers/paragraphs across pages */
    }

    /* Optional: You can adjust margins or make other layout adjustments */
    @page {
        size: auto; /* Auto page size */
        margin: 20mm; /* Adjust margins as needed */
    }
}


/* Search Form Container */
.search-form {
    margin-bottom: 1rem; /* Space below the form */
}

#searchp{
    padding-top: 0px!important;
    padding-bottom:  0px!important;
    padding-left: 5px!important;
    padding-right: 5px!important;
}

/* Search Inputs and Selects */
.search-input,
.search-select {
    width: 100%;
    padding: 0.75rem;
    box-sizing: border-box;
}

/* General Styling for Search Fields */
.search-input {
    margin-bottom: 1rem; /* Space below the search input */
}

/* Dropdown Styling */
.search-select {
    margin-bottom: 1rem; /* Space below dropdowns */
}

/* Responsive Layout for Search Form Elements */
@media (max-width: 768px) {
    .search-form .row > div {
        margin-bottom: 1rem; /* Space below each form element */
    }
}

/* Styling for Search Button */
.search-button {
    width: 100%; /* Ensure button takes full width */
}

/* Amenities Section */
#amenitiesCollapse {
    margin-top: 1rem; /* Space above the amenities section */
}

.amenities-grid {
    display: flex;
    flex-wrap: wrap;
}

.amenity-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem; /* Space between checkboxes */
}

.amenity-checkbox .form-check-input {
    margin-right: 0rem; /* Space between checkbox and label */
}

.amenity-checkbox .form-check-label {
    margin-bottom: 0; /* Remove default bottom margin */
}

/* Ensure the amenities checkboxes are laid out in a grid */
.amenities-grid .form-check {
    flex: 1 1 30%; /* Adjust as needed for responsive design */
}

/* Stack amenities checkboxes vertically on small screens */
@media (max-width: 768px) {
    .amenities-grid .form-check {
        flex: 1 1 100%; /* Stack checkboxes vertically on small screens */
    }
}
/* Features Section */
#featuresCollapse {
    margin-top: 1rem; /* Space above the features section */
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
}

.feature-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem; /* Space between checkboxes */
}

.feature-checkbox .form-check-input {
    margin-right: 0rem; /* Space between checkbox and label */
}

.feature-checkbox .form-check-label {
    margin-bottom: 0; /* Remove default bottom margin */
}

/* Ensure the features checkboxes are laid out in a grid */
.features-grid .form-check {
    flex: 1 1 30%; /* Adjust as needed for responsive design */
}

/* Stack features checkboxes vertically on small screens */
@media (max-width: 768px) {
    .features-grid .form-check {
        flex: 1 1 100%; /* Stack checkboxes vertically on small screens */
    }
}
/* Styling for the Filter Section */
#filterCollapse {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9f9f9;
}

#filterCollapse .form-control {
    margin-bottom: 10px;
}

#amenitiesCollapse .form-check {
    margin-bottom: 10px;
}

.custom-project-card {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
}

.custom-project-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.custom-project-card-body {
    padding: 15px;
}

.custom-project-card-title {
    font-size: 1.25rem;
}

.custom-project-card-text {
    font-size: 0.875rem;
}


@import url('https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800');

body {
    font-family: "Montserrat", sans-serif !important;
}

.hero h1 {
    font-family: "Montserrat";
    font-weight: 500;
    color: #ffffff;
}

.parent {
    margin-top: 50px;
    gap: 2%;
}


.sticky-contact-form{
    top: 125px !important;
}
.price h3 {
    background: #fbff00;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 20px;
    box-shadow: 2px 3px 6px 1px #eaf5ffa1;
    color: #282727;
}

.price {
    display: flex;
    width: auto;
    justify-content: center;
}

/*key features*/
section#key-features {
    padding: 22px 0px;
}

.galleries {
    padding: 22px 0px !important;
}

.about-section{
    padding: 22px 0px !important;
}
.about-text p{
    margin: 0;
}

.floor-plans{
    padding: 22px 0px !important;
}

.price-sheet{
    padding: 22px 0px !important;
    background-color: unset !important;
}

.location-section {
    padding: 22px 0px !important;
}
.video-section {
    padding-bottom: 22px !important;
    padding-top: 6px !important;
}
.construction-status {
    padding-top: 22px;
}
.location-advantages {
    padding-top: 22px !important;
}
.construction-status {
    padding-top: 22px !important;
}
.master-plan {
    padding-top: 22px !important;
}
.developer-section {
    padding-top: 22px !important;
}
.faq-section {
    padding-top: 22px !important;
}
.rera-section {
    padding-top: 22px !important;
}
.projects-by-locality {
    padding: 22px 0px !important;
}
/*.location-advantages .tabs{
    flex-wrap: nowrap !important;
}*/
/*Override End*/


/*Project Document*/
/* Project Documents Section */
.project-documents {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
    margin-bottom: 20px;
}

/* Heading Styles */
.project-documents .section-title {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Documents Grid Container */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 items per row on large screens */
    gap: 20px; /* Space between grid items */
}

/* Document Item */
.document-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Rounded corners */
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for effects */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Use parent color */
}

.document-name{
    text-transform: capitalize;
}

.document-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
    transform: translateY(-5px); /* Slight lift effect on hover */
}

/* Document Content */
.document-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Document Icon */
.document-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; /* Space below the icon */
}

.icon-size {
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Adjust size as needed */
    color: #333; /* Icon color */
}
    
/* Responsive Design */
@media (max-width: 992px) {
    .documents-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 items per row on medium screens */
    }
}

@media (max-width: 768px) {
    .documents-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 items per row on small screens */
    }
}

@media (max-width: 480px) {
    .documents-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row on extra small screens */
    }
}



/* Price Sheet */
/* Price Sheet Section */
.price-sheet {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
    background-color: #f9f9f9; /* Light background color */
}

/* Heading Styles */
.price-sheet h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Price Sheet Table Styles */
.price-sheet-table {
    width: 100%; /* Full width of the section */
    border-collapse: collapse; /* Collapse table borders */
    background-color: #ffffff; /* White background for table */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for table */
    table-layout: auto; /* Allow table to auto-adjust column width */
}

.price-sheet-table thead {
    background-color: #007bff; /* Background color for header */
    color: #ffffff; /* White text color */
}

.price-sheet-table th,
.price-sheet-table td {
    padding: 6px; /* Reduced padding for all screens */
    text-align: left; /* Align text to the left */
    border-bottom: 1px solid #ddd; /* Border for table rows */
    font-size: 12px; /* Reduced font size for table data */
    white-space: normal; /* Allow text to wrap */
}

.price-sheet-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Alternating row color */
}

.price-sheet-table th {
    font-size: 13px; /* Slightly reduced font size for headers */
    font-weight: bold; /* Bold text for headers */
}

/* Responsive Design for Tablets */
@media (max-width: 768px) {
    .price-sheet {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .price-sheet h2 {
        /* Maintain original styling */
    }

    .price-sheet-table th,
    .price-sheet-table td {
        padding: 5px; /* Adjust padding for smaller screens */
        font-size: 10px; /* Reduced font size for smaller screens */
    }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .price-sheet {
        padding: 10px; /* Further reduced padding */
    }

    .price-sheet h2 {
        /* Maintain original styling */
    }

    .price-sheet-table th,
    .price-sheet-table td {
        padding: 4px; /* Further reduced padding for small screens */
        font-size: 9px; /* Further reduced font size for mobile */
        white-space: normal; /* Allow text to wrap */
    }
}




/*Home Page*/
/* General Styles */
body {
    font-family: Arial, sans-serif;
}

.container {
    max-width: 1200px;
}

/* Hero Section */
.hero {
    background: linear-gradient(to bottom right, #007bff, #0056b3);
    color: #fff;
    border-radius: 25px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.hero p {
    font-size: 1.25rem;
}

.hero .btn {
    background-color: #f8f9fa;
    color: #007bff;
}

/* Carousel */
.carousel-item {
    padding: 1rem;
}

.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.carousel-control-prev, .carousel-control-next {
    filter: invert(1);
}

/* Card Design */
.card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-img-top {
    border-bottom: 1px solid #ddd;
    transition: transform 0.3s;
}

.card-img-top:hover {
    transform: scale(1.05);
}

.card-body {
    padding: 1rem;
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.card-text {
    font-size: 0.875rem;
}

/* Sections */
section {
    padding: 3rem 0;
}

section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.testimonials .card {
    border: 1px solid #ddd;
    border-radius: 8px;
}

.testimonials blockquote {
    font-size: 1rem;
    margin-bottom: 0;
}

.call-to-action {
    background: #007bff;
}

.call-to-action h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.call-to-action .btn {
    background-color: #f8f9fa;
    color: #007bff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-item {
        padding: 0.5rem;
    }

    .carousel-item img {
        height: 200px;
        object-fit: cover;
    }

    .card-body {
        padding: 0.75rem;
    }

    .card-title {
        font-size: 1.125rem;
    }

    .card-text {
        font-size: 0.75rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .call-to-action h2 {
        font-size: 2rem;
    }
}
/*About Us Page*/
/* General Styles */
body {
    font-family: Arial, sans-serif;
}

.container {
    max-width: 1200px;
}

/* About Section */
img.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Company Overview Section */
.company-overview {
    padding: 2rem 0;
}

.company-overview .row {
    align-items: center;
}

.company-overview img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.company-overview h1, 
.company-overview p {
    margin-bottom: 1rem;
}

.company-overview h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.company-overview p.lead {
    font-size: 1.125rem;
    text-align: justify;
}

/* Mission Statement Section */
.mission-statement {
    padding: 2rem 0;
}

.mission-statement h2 {
    font-size: 2.25rem;
    font-weight: 700;
}

.mission-statement p.lead {
    font-size: 1.125rem;
    text-align: justify;
}

/* Our Values Section */
.values {
    padding: 2rem 0;
}

.values h2 {
    font-size: 2.25rem;
    font-weight: 700;
}

.values .d-flex {
    align-items: center;
}

.values i {
    color: #007bff;
}

.values h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

.values p {
    font-size: 1rem;
}

/* Team Members Section */
.team-members {
    padding: 2rem 0;
}

.team-members h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.team-members .card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.team-members .card-img-top {
    height: 200px;
    object-fit: cover;
}

.team-members .card-body {
    padding: 1.5rem;
}

.team-members .card-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.team-members .card-text {
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .company-overview h1 {
        font-size: 2rem;
    }

    .company-overview p.lead {
        font-size: 1rem;
    }

    .mission-statement h2 {
        font-size: 1.75rem;
    }

    .mission-statement p.lead {
        font-size: 1rem;
    }

    .values h2 {
        font-size: 1.75rem;
    }

    .values h4 {
        font-size: 1.125rem;
    }

    .team-members h3 {
        font-size: 1.5rem;
    }

    .team-members .card-img-top {
        height: 150px;
    }

    .team-members .card-body {
        padding: 1rem;
    }
}

/*Contact Page*/
/* General Contact Page Styling */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

/* Contact Details */
.contact-details {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-details h2 {
    font-size: 1.8rem;
}

.contact-details ul {
    list-style: none;
    padding: 0;
    font-size: 1rem;
}

.contact-details li {
    padding: 8px 0;
    font-size: 1.1rem;
}

.contact-details i {
    color: #007bff;
    margin-right: 10px;
}

/* Social Media Links */
.social-media a {
    font-size: 1.5rem;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: #007bff;
}

/* Contact Form */
.contact-form {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-form h2 {
    font-size: 1.8rem;
}

/* Form Inputs */
.contact-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Submit Button */
.contact-form button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.contact-form button[type="submit"]:hover {
    background-color: #0056b3;
}

.contact-form button[type="submit"] span {
    margin-left: 8px;
}

/* Spinner */
#spinner i {
    font-size: 1rem;
}

/* Success/Error Messages */
#responseMessage {
    font-size: 1rem;
    margin-top: 10px;
}

/* Google Map */
.google-map iframe {
    border-radius: 8px;
    border: 0;
}

/* Media Queries */
@media (max-width: 768px) {
    .contact-form,
    .contact-details {
        margin-bottom: 30px;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}


/*Privacy Page*/
/* General Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1140px;
}

/* Page Header */
h1 {
    font-weight: bold;
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* Sections */
h2, h3 {
    font-weight: bold;
    margin-top: 2rem;
}

h3 {
    margin-top: 1rem;
}

/* Lists */
ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

ul li {
    margin-bottom: 0.5rem;
}

/* Contact Info */
ul li i {
    font-size: 1.2rem;
    color: #007bff;
    margin-right: 0.5rem;
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/*T&C Page*/
/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

h1, h2, h3 {
    color: #333;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    margin-top: 2rem;
}

h3 {
    font-size: 1.75rem;
    margin-top: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

ul {
    list-style-type: disc;
    margin-left: 2rem;
}

li {
    margin-bottom: 0.5rem;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* FontAwesome Icons */
.fas {
    margin-right: 0.5rem;
}

/* Specific Styles for Terms & Conditions */
.terms-container {
    padding: 3rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.terms-container h1,
.terms-container h2,
.terms-container h3 {
    font-weight: bold;
}

.terms-container ul {
    padding-left: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}
/*All Project Page*/
/* Custom Project Card Styles */
.custom-project-card {
    border: 1px solid #e0e0e0; /* Adjust border color if needed */
    border-radius: 0.5rem; /* Use a different border-radius if needed */
    overflow: hidden;
    background-color: #ffffff; /* Ensure card background is white */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for scale and shadow */
}

.custom-project-card:hover {
    transform: scale(1.05); /* Slightly enlarge the card on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */
}

.custom-project-card-img {
    height: 200px;
    object-fit: cover;
    width: 100%; /* Ensure the image fills the card width */
    transition: opacity 0.3s ease; /* Smooth transition for image opacity */
}

.custom-project-card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem; /* Adjust padding if needed */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.custom-project-card:hover .custom-project-card-body {
    background-color: #f8f9fa; /* Change background color on hover */
}

.custom-project-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333; /* Adjust color if needed */
    transition: color 0.3s ease; /* Smooth transition for title color */
}

.custom-project-card:hover .custom-project-card-title {
    color: #007bff; /* Change title color on hover */
}

.custom-project-card-text {
    font-size: 0.9rem;
    color: #555; /* Adjust color if needed */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

.custom-project-card:hover .custom-project-card-text {
    color: #333; /* Change text color on hover */
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition for button */
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .custom-project-card {
        margin: 0.5rem; /* Adjust margin for medium screens */
    }
}

@media (max-width: 992px) {
    .custom-project-card {
        margin: 0.5rem; /* Adjust margin for smaller screens */
    }

    .custom-project-card-img {
        height: 180px; /* Adjust image height for smaller screens */
    }

    .custom-project-card-title {
        font-size: 1.125rem; /* Slightly smaller font size for titles */
    }

    .custom-project-card-text {
        font-size: 0.85rem; /* Slightly smaller font size for text */
    }
}

@media (max-width: 768px) {
    .custom-project-card {
        margin: 0.5rem 0; /* Stack cards vertically with margins */
    }

    .custom-project-card-img {
        height: 150px; /* Further reduce image height for small screens */
    }

    .custom-project-card-title {
        font-size: 1rem; /* Further reduce font size for titles */
    }

    .custom-project-card-text {
        font-size: 0.8rem; /* Further reduce font size for text */
    }
}

@media (max-width: 576px) {
    .custom-project-card-img {
        height: 120px; /* Adjust image height for extra-small screens */
    }

    .custom-project-card-title {
        font-size: 0.875rem; /* Reduce font size for titles */
    }

    .custom-project-card-text {
        font-size: 0.75rem; /* Reduce font size for text */
    }
}
/*All Developer Page*/
/* Custom Developer Card Styles */
.custom-developer-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-developer-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.custom-developer-card-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    transition: opacity 0.3s ease;
}

.custom-developer-card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    transition: background-color 0.3s ease;
}

.custom-developer-card:hover .custom-developer-card-body {
    background-color: #f8f9fa;
}

.custom-developer-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    transition: color 0.3s ease;
}

.custom-developer-card:hover .custom-developer-card-title {
    color: #007bff;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .custom-developer-card {
        margin: 0.5rem;
    }
}

@media (max-width: 992px) {
    .custom-developer-card {
        margin: 0.5rem;
    }

    .custom-developer-card-img {
        height: 180px;
    }

    .custom-developer-card-title {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .custom-developer-card {
        margin: 0.5rem 0;
    }

    .custom-developer-card-img {
        height: 150px;
    }

    .custom-developer-card-title {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .custom-developer-card-img {
        height: 120px;
    }

    .custom-developer-card-title {
        font-size: 0.875rem;
    }
}
/* Footer */
/* Footer Styles */
.footer {
    background-color: #343a40;
    color: #ffffff;
    padding: 2rem 0; /* Added padding for spacing */
}

.footer-logo {
    width: 150px;
    height: auto;
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.1);
}

.footer-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 5rem;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

.footer a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #cccccc;
}

.social-media a {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: #cccccc;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .footer-logo {
        width: 120px;
    }
}

@media (max-width: 992px) {
    .footer-logo {
        width: 100px;
    }
}

@media (max-width: 768px) {
    .footer-logo {
        width: 80px;
    }

    .footer-title {
        font-size: 1.1rem;
    }

    .social-media a {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .footer-logo {
        width: 60px;
    }

    .footer-title {
        font-size: 1rem;
    }

    .social-media a {
        font-size: 1rem;
    }

    .footer ul {
        padding-left: 0; /* Remove padding for alignment */
    }

    .footer ul li {
        display: flex;
        justify-content: flex-start; /* Align list items to the left */
    }
}

/* Header */
/* Header Styles */
.header {
    background-color: #ffffff;
}

.navbar {
    padding: 1rem;
}

.logo {
    width: 150px;
    height: auto;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.nav-link {
    color: #333;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #007bff;
}

.form-control {
    border-radius: 20px;
}

.btn-primary {
    border-radius: 20px;
}

button.btn.btn-primary.my-2.my-sm-0 {
    margin-left: 0px !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .logo {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .logo {
        width: 100px;
    }
}

@media (max-width: 576px) {
    .logo {
        width: 80px;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: flex-start; /* Align items to the start */
    }

    .navbar-toggler {
        margin-right: 0; /* Remove margin for alignment */
    }

    .form-inline {
        margin-top: 1rem; /* Add margin for spacing */
    }
}


/* Parent Container */
.parent {
    display: flex; /* Flexbox layout for children */
}

/* Right Div */
.right {
    width: 35%; /* 35% width */
    position: relative; /* Positioning context for the sticky form */
}

/* Sticky Contact Form Section */
.sticky-contact-form {
    position: -webkit-sticky; /* For Safari */
    position: sticky; /* Make the form sticky */
    top: 100px; /* Offset from the top of the viewport */
    background-color: #f8f9fa; /* Background color matching UI theme */
    border: 1px solid #ddd; /* Border to distinguish from the rest of the page */
    padding: 20px; /* Padding for the content inside */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 8px; /* Rounded corners */
    z-index: 999; /* Ensure it is on top of other content */
    max-height: calc(100vh - 40px); /* Prevent overflowing viewport */
    overflow-y: auto; /* Scrollable content if the form is long */
}

/* Heading Styles */
.sticky-contact-form h2 {
    font-size: 20px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 15px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Form Styles */
.sticky-contact-form form {
    display: flex;
    flex-direction: column;
}

.sticky-contact-form label {
    font-size: 14px; /* Font size for labels */
    margin-bottom: 5px; /* Space below labels */
    color: #333; /* Text color */
}

.sticky-contact-form input,
.sticky-contact-form textarea {
    font-size: 14px; /* Font size for input fields */
    padding: 10px; /* Padding inside fields */
    margin-bottom: 15px; /* Space below fields */
    border: 1px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    width: 100%; /* Full width of container */
    box-sizing: border-box; /* Include padding/border in width */
}

.sticky-contact-form input[type="tel"] {
    -moz-appearance: textfield; /* Remove default number styling */
}

.sticky-contact-form input::-webkit-inner-spin-button,
.sticky-contact-form input::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Remove default number styling */
    margin: 0; /* Remove margin */
}

.sticky-contact-form button {
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    padding: 10px 15px; /* Padding inside button */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size for button text */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.sticky-contact-form button:hover {
    background-color: #0056b3; /* Darker background on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .sticky-contact-form {
        top: 200px; /* Adjust top position for smaller screens */
    }

    .sticky-contact-form h2 {
        font-size: 18px; /* Slightly smaller font size */
    }

    .sticky-contact-form input,
    .sticky-contact-form textarea {
        font-size: 12px; /* Smaller font size */
    }

    .sticky-contact-form button {
        font-size: 14px; /* Smaller font size for button */
    }
}

@media (max-width: 480px) {
    .sticky-contact-form {
        top: 150px; /* Further adjusted top position */
        width: 100%; /* Full width on small screens */
        box-shadow: none; /* Remove shadow for small screens */
        padding: 10px; /* Reduced padding */
    }

    .sticky-contact-form h2 {
        font-size: 16px; /* Further reduced font size */
    }

    .sticky-contact-form input,
    .sticky-contact-form textarea {
        font-size: 11px; /* Further reduced font size */
    }

    .sticky-contact-form button {
        font-size: 12px; /* Further reduced font size for button */
    }
}


/* Header Styles */
.header {
    margin-bottom: 0px;
}

.navbar {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.mr{
    margin: 0;
}

.navbar-brand .logo {
    max-height: 50px; /* Adjust logo size as needed */
}

.navbar-nav .nav-item {
    margin-left: 20px;
}

.navbar-nav .nav-link {
    color: #333;
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: #007bff;
    text-decoration: none;
}

.navbar-light .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="rgba(0,0,0,.54)" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

.form-inline .form-control {
    width: 200px; /* Adjust width as needed */
}

.form-inline .btn {
    margin-left: 10px;
    background-color: #007bff;
    border: none;
    color: white;
}

.form-inline .btn:hover {
    background-color: #0056b3;
}

/* Footer Styles */
.footer {
    background-color: #212529; /* Dark background */
    color: #ffffff; /* White text */
    width: 100%;
    padding: 2rem 0;
}

.footer-title {
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-logo {
    width: 150px; /* Adjust size as needed */
    height: auto;
}

.footer p {
    font-size: 14px;
    line-height: 1.6;
}

.footer ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer ul li i {
    margin-right: 10px;
}

.footer a {
    color: #ffffff;
    transition: color 0.3s;
}

.footer a:hover {
    color: #17a2b8; /* Accent color on hover */
}

.footer .social-media a {
    font-size: 24px; /* Adjust size as needed */
}

.footer .social-media a:hover {
    color: #17a2b8; /* Accent color on hover */
}

/* About Page Styles */
.container {
    max-width: 1140px; /* Adjust as needed */
}

.display-4 {
    font-size: 2.5rem;
}

.display-5 {
    font-size: 2rem;
}

.display-6 {
    font-size: 1.75rem;
}

.font-weight-bold {
    font-weight: 700;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.6;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #dee2e6;
}

.card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.card-text {
    font-size: 0.9rem;
    color: #6c757d;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 0.25rem;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .navbar-nav {
        margin-top: 10px;
    }

    .form-inline {
        margin-top: 10px;
        width: 100%;
    }

    .form-inline .form-control {
        width: 100%;
        border-radius: 0;
    }

    .form-inline .btn {
        width: 100%;
        margin-top: 10px;
    }

    .footer-logo {
        width: 120px; /* Adjust size for smaller screens */
    }

    .footer .social-media a {
        font-size: 20px;
    }

    .footer ul {
        padding-left: 0;
        width: 100%;
        margin: 0px;
    }

    .footer ul li {
        display: inline;
        margin: 0px;
        float: left;
        width: 100%;
    }

    .display-4 {
        font-size: 2rem;
    }

    .display-5 {
        font-size: 1.5rem;
    }

    .display-6 {
        font-size: 1.25rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-title {
        font-size: 1.1rem;
    }

    .card-text {
        font-size: 0.85rem;
    }

    .hero-content h1 {
        font-size: 2rem; /* Slightly smaller on mobile */
    }

    .hero-content p {
        font-size: 1rem; /* Slightly smaller on mobile */
    }
}

/* Sticky Tab Navigation Container */
/* Sticky Tab Navigation Container */
.project-tabs-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scroll */
    white-space: nowrap; /* Prevent wrapping */
    position: sticky; /* Stick the container to the top */
    top: 0; /* Position at the top */
    background-color: #ffffff; /* Background color */
    z-index: 1000; /* Stay above other content */
    border-bottom: 1px solid #ddd; /* Optional border */
    padding: 10px 0; /* Padding for tabs */
}

/* Tabs menu */
.project-tabs-menu {
    display: flex; /* Flex container for horizontal layout */
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    overflow-x: auto; /* Allow horizontal scrolling */
}

/* Tab items */
.project-tabs-menu .nav-item {
    flex: 0 0 auto; /* Prevent flex items from growing/shrinking */
}

/* Tab links */
.project-tabs-menu .nav-link {
    display: block; /* Full clickable area */
    padding: 10px 15px; /* Padding for tabs */
    text-decoration: none; /* Remove underline */
    color: #007bff; /* Default link color */
    font-size: 1rem; /* Font size */
    border-radius: 5px; /* Rounded corners */
    margin-right: 5px; /* Space between tabs */
    background-color: #ffffff; /* Inactive tab background */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    white-space: nowrap; /* Prevent text wrapping */
    border: 1px solid transparent; /* Border for spacing */
}

/* Active tab */
.project-tabs-menu .nav-link.active {
    background-color: #007bff; /* Active tab background */
    color: #ffffff; /* Active tab text color */
    border: 1px solid #007bff; /* Border to highlight active tab */
}

/* Hover and focus states */
.project-tabs-menu .nav-link:hover,
.project-tabs-menu .nav-link:focus {
    background-color: #0056b3; /* Darker background on hover */
    color: #ffffff; /* White text color on hover */
}

/* Horizontal scroll bar customization */
.project-tabs-menu::-webkit-scrollbar {
    height: 8px; /* Height of the scrollbar */
}

.project-tabs-menu::-webkit-scrollbar-thumb {
    background-color: #007bff; /* Color of the scrollbar */
    border-radius: 10px; /* Rounded edges */
}

.project-tabs-menu::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Scrollbar track color */
}

/* Additional scrollbar for Firefox */
.project-tabs-menu {
    scrollbar-width: thin; /* Firefox scrollbar style */
    scrollbar-color: #007bff #f1f1f1; /* Firefox scrollbar thumb and track color */
}

/* Parent container */
.parent {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Left div - 65% width */
.left {
    flex: 0 0 65%;
    padding: 0px; /* Adjust padding as needed */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

/*Override css*/
.left {
    flex: 0 0 64% ;
    width: 64%;
}
/*end*/

/* Right div - 35% width */
.right {
    flex: 0 0 35%;
    padding: 0px; /* Adjust padding as needed */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.right {
    flex: 0 0 34% ;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .left, .right {
        flex: 0 0 100%; /* Stack divs on top of each other on smaller screens */
    }
}


/* Section Overview */
.overview {
    padding: 0px; /* Added padding for better spacing */
    max-width: 1200px; /* Maximum width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Table Layout */
.overview-table {
    width: 100%; /* Full width table */
    border-collapse: collapse; /* Merge borders */
    margin-bottom: 20px; /* Space between table and price */
}

/* Table Header Styles */
.overview-table th {
    background-color: #f5f5f5; /* Light gray background for headers */
    color: #333; /* Dark text color for headers */
    text-align: left; /* Align text to the left */
    padding: 10px; /* Padding inside header cells */
    font-weight: bold; /* Bold text for headers */
}

/* Table Cell Styles */
.overview-table td {
    padding: 10px; /* Space inside cells */
    border: 1px solid #ddd; /* Border for visual separation */
    vertical-align: top; /* Align text to the top */
    background-color: #fafafa; /* Slight background color for cells */
}

/* Heading Styles */
.overview h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 15px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Heading Styles */
.overview-table span {
    font-size: 14px; /* Set font size for headings */
    font-weight: bold; /* Bold text for headings */
    margin: 0; /* Remove default margin */
}

/* Value Styles */
.overview-table .value {
    font-size: 14px; /* Set font size for values */
    color: #666; /* Slightly lighter text color for values */
    font-weight: normal; /* Normal weight for values */
}

/* Center Align Price */
.price {
    text-align: center;
    margin-top: 20px; /* Space above price */
}

/* Responsive Design */
@media (max-width: 768px) {
    .overview-table span, .overview-table .value {
        font-size: 12px; /* Slightly smaller font size for smaller screens */
    }
    
    .overview {
        padding: 10px; /* Reduced padding on smaller screens */
    }
}

/* Mobile and Tablet Adjustments */
@media (max-width: 480px) {
    .overview-table {
        font-size: 0.9rem; /* Adjust font size for small screens */
    }
    
    .overview-table span, .overview-table .value {
        font-size: 10px; /* Further reduced font size for small screens */
    }
    
    .price span {
        font-size: 1.2rem; /* Adjust font size for price */
    }
}
/* Key Features Section */
.key-features {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Heading Styles */
.key-features h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 15px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Key Features Content */
.key-features-content {
    font-size: 14px; /* Font size for content */
    line-height: 1.6; /* Line height for readability */
    color: #333; /* Text color */
    text-align: justify; /* Justified text */
}

/* Responsive Design */
@media (max-width: 768px) {
    .key-features {
        padding: 15px; /* Adjust padding for smaller screens */
    }
    
    .key-features h2 {
        font-size: 20px; /* Slightly smaller font size */
    }
    
    .key-features-content {
        font-size: 12px; /* Smaller font size */
    }
}

/* Mobile and Tablet Adjustments */
@media (max-width: 480px) {
    .key-features {
        padding: 10px; /* Further reduced padding */
    }
    
    .key-features h2 {
        font-size: 18px; /* Further reduced font size */
    }
    
    .key-features-content {
        font-size: 11px; /* Further reduced font size */
    }
}

/* Gallery Section */
.galleries {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Heading Styles */
.galleries h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 15px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Tabs Container */
.tabs {
    display: flex;
    margin-bottom: 20px; /* Space below tabs */
}

/* Tab Buttons */
.tab-button {
    background-color: #f1f1f1; /* Background color for buttons */
    border: 1px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
    margin-right: 5px; /* Space between buttons */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.tab-button.active {
    background-color: #007bff; /* Active tab background color */
    color: white; /* Active tab text color */
}

.tab-button:hover {
    background-color: #ddd; /* Hover effect */
}

/* Tab Content */
.tab-content {
    position: relative;
}

.tab-pane {
    display: none; /* Hide inactive tabs */
}

.tab-pane.active {
    display: block; /* Show active tab */
}

/* Tab Buttons */
.tab-button-g {
    background-color: #f1f1f1; /* Background color for buttons */
    border: 1px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
    margin-right: 5px; /* Space between buttons */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.tab-button-g.active {
    background-color: #007bff; /* Active tab background color */
    color: white; /* Active tab text color */
}

.tab-button-g:hover {
    background-color: #ddd; /* Hover effect */
}

/* Tab Content */
.tab-content-g {
    position: relative;
}

.tab-pane-g {
    display: none; /* Hide inactive tabs */
}

.tab-pane-g.active {
    display: block; /* Show active tab */
}

/* Tab Buttons */
.tab-button-fp {
    background-color: #f1f1f1; /* Background color for buttons */
    border: 1px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
    margin-right: 5px; /* Space between buttons */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.tab-button-fp.active {
    background-color: #007bff; /* Active tab background color */
    color: white; /* Active tab text color */
}

.tab-button-fp:hover {
    background-color: #ddd; /* Hover effect */
}

/* Tab Content */
.tab-content-fp {
    position: relative;
}

.tab-pane-fp {
    display: none; /* Hide inactive tabs */
}

.tab-pane-fp.active {
    display: block; /* Show active tab */
}

/* Swiper Container */
.swiper-container {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd; /* Border around the gallery */
    border-radius: 5px; /* Rounded corners */
}

/* Ensure slides are displayed in a row */
.swiper-wrapper {
    display: flex; /* Flexbox for smooth transitions */
    transition: transform 0.5s ease-in-out; /* Smooth transition effect */
}

/* Ensure each slide takes full width */
.swiper-slide {
    flex: 0 0 100%; /* Full width slides */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
}

/* Style for images */
.swiper-slide img {
    width: 100%;
    height: 300px; /* Fixed height for all images */
    object-fit: cover; /* Cover the area without distortion */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in effect */
}

/* Swiper Pagination */
.swiper-pagination {
    position: absolute;
    bottom: 10px; /* Position at the bottom of the container */
    left: 50%;
    transform: translateX(-50%); /* Center the pagination */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-pagination-bullet {
    background-color: #007bff; /* Bullet color */
    opacity: 0.8; /* Slightly transparent */
    width: 10px; /* Bullet width */
    height: 10px; /* Bullet height */
    border-radius: 50%; /* Rounded bullets */
    margin: 0 4px; /* Space between bullets */
    transition: background-color 0.3s, opacity 0.3s; /* Smooth transition */
}

.swiper-pagination-bullet-active {
    background-color: #0056b3; /* Active bullet color */
    opacity: 1; /* Fully opaque */
}

/* Responsive Design */
@media (max-width: 768px) {
    .galleries {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .galleries h2 {
        font-size: 20px; /* Slightly smaller font size */
    }
}

@media (max-width: 480px) {
    .galleries {
        padding: 10px; /* Further reduced padding */
    }

    .galleries h2 {
        font-size: 18px; /* Further reduced font size */
    }
}
/* About Section */
.about-section {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Heading Styles */
.about-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 15px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* About Content */
.about-text {
    font-size: 14px; /* Font size for content */
    line-height: 1.6; /* Line height for readability */
    color: #333; /* Text color */
    text-align: justify; /* Justified text */
}

/* Responsive Design */
@media (max-width: 768px) {
    .about-section {
        padding: 15px; /* Adjust padding for smaller screens */
    }
    
    .about-section h2 {
        font-size: 20px; /* Slightly smaller font size */
    }
    
    .about-text {
        font-size: 12px; /* Smaller font size */
    }
}

/* Mobile and Tablet Adjustments */
@media (max-width: 480px) {
    .about-section {
        padding: 10px; /* Further reduced padding */
    }
    
    .about-section h2 {
        font-size: 18px; /* Further reduced font size */
    }
    
    .about-text {
        font-size: 11px; /* Further reduced font size */
    }
}

/* Floor Plans Section */
.floor-plans {
    padding: 0; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Floor Plan Heading */
.floor-plans h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Floor Plan Container */
.floor-plan {
    margin-bottom: 30px; /* Space below each floor plan section */
}

/* Tabs Container */
.floor-plan-tabs {
    margin-bottom: 20px; /* Space below tabs */
}

/* Tab Buttons */
.tab-button {
    background-color: #f1f1f1; /* Background color for buttons */
    border: 1px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
    margin-right: 5px; /* Space between buttons */
    transition: background-color 0.3s, color 0.3s; /* Smooth background color transition */
    font-size: 16px; /* Font size for button text */
}

.tab-button.active {
    background-color: #007bff; /* Active tab background color */
    color: white; /* Active tab text color */
}

.tab-button:hover {
    background-color: #ddd; /* Hover effect */
}

/* Tab Content */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    transition: opacity 0.3s ease-in-out;
}

/* Configuration Cards */
.configuration-card {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
    margin-bottom: 20px; /* Increased spacing between cards */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for effects */
}

.configuration-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
    transform: translateY(-5px); /* Slight lift effect on hover */
}

.configuration-image {
    max-width: 250px; /* Slightly larger max width */
    height: auto;
    border-radius: 8px; /* Match the card's rounded corners */
    margin-right: 20px; /* Increased spacing between image and text */
}

.configuration-details {
    flex: 1;
}

.configuration-details h6 {
    margin: 0 0 15px 0; /* Space below heading */
    font-size: 20px; /* Larger font size for headings */
    font-weight: 600; /* Slightly bolder font weight */
    color: #333; /* Darker color for better readability */
}

.configuration-details p {
    margin: 8px 0; /* Spacing between paragraphs */
    font-size: 16px; /* Increased font size for better readability */
    line-height: 1.5; /* Improved line height for readability */
    color: #555; /* Slightly lighter text color */
}

.configuration-details p strong {
    color: #007bff; /* Highlighted color for strong text */
}

/* Responsive Design */
@media (max-width: 768px) {
    .configuration-card {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        align-items: center; /* Center align items */
    }

    .configuration-image {
        margin-right: 0;
        margin-bottom: 15px; /* Space below image */
    }
}

@media (max-width: 480px) {
    .configuration-details h6 {
        font-size: 18px; /* Slightly smaller heading font size */
    }

    .configuration-details p {
        font-size: 14px; /* Smaller font size for paragraphs */
    }
}
/* Amenities Section */
.amenities-section {
    padding: 0 0px; /* Adjust padding if needed */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

.amenities-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Grid Layout for Amenities */
.amenity-item {
    display: flex;
    align-items: center; /* Align items vertically center */
    margin-bottom: 20px; /* Space below each item */
}

.amenity-icon {
    color: #007bff; /* Color for the tick icon */
    font-size: 20px; /* Size of the icon */
    margin-right: 10px; /* Space between icon and text */
}

.amenity-text {
    font-size: 16px; /* Font size for text */
    color: #333; /* Dark color for readability */
}

/* Responsive Design */
@media (max-width: 768px) {
    .amenity-item {
        margin-bottom: 15px; /* Reduce space below items on smaller screens */
    }
}

@media (max-width: 480px) {
    .amenity-text {
        font-size: 14px; /* Smaller font size for text on very small screens */
    }
}

/* Features Section */
.features-section {
    padding: 0 0px; /* Adjust padding if needed */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

.features-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Grid Layout for Features */
.feature-item {
    display: flex;
    align-items: center; /* Align items vertically center */
    margin-bottom: 20px; /* Space below each item */
}

.feature-icon {
    color: #007bff; /* Color for the tick icon */
    font-size: 20px; /* Size of the icon */
    margin-right: 10px; /* Space between icon and text */
}

.feature-text {
    font-size: 16px; /* Font size for text */
    color: #333; /* Dark color for readability */
}

/* Responsive Design */
@media (max-width: 768px) {
    .feature-item {
        margin-bottom: 15px; /* Reduce space below items on smaller screens */
    }
}

@media (max-width: 480px) {
    .feature-text {
        font-size: 14px; /* Smaller font size for text on very small screens */
    }
}
/* Walkthrough Video Section */
.video-section {
    padding: 0px; /* Padding around the section */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
/*    text-align: center; /* Center align text */*/
}

.video-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px; /* Rounded corners for the video */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.video-container iframe,
.video-container embed,
.video-container object,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-section h2 {
        font-size: 20px; /* Slightly smaller font size on smaller screens */
    }
}

@media (max-width: 480px) {
    .video-section h2 {
        font-size: 18px; /* Further reduced font size on very small screens */
    }
}

/* Location Section */
.location-section {
    padding: 0px; /* Padding around the section */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
/*    text-align: center; /* Center align text */*/
}

.location-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Map Container */
.map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px; /* Rounded corners for the map */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .location-section h2 {
        font-size: 20px; /* Slightly smaller font size on smaller screens */
    }
}

@media (max-width: 480px) {
    .location-section h2 {
        font-size: 18px; /* Further reduced font size on very small screens */
    }
}

/* Location Advantages Section */
.location-advantages {
    padding: 0; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Location Advantages Heading */
.location-advantages h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Tabs Container */
.location-advantages .tabs {
    margin-bottom: 20px; /* Space below tabs */
    display: flex;
    flex-wrap: wrap;
}

/* Tab Buttons */
.location-advantages .tab-button {
    background-color: #f1f1f1; /* Background color for buttons */
    border: 1px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
    margin-right: 5px; /* Space between buttons */
    transition: background-color 0.3s, color 0.3s; /* Smooth background color transition */
    font-size: 16px; /* Font size for button text */
}

.location-advantages .tab-button.active {
    background-color: #007bff; /* Active tab background color */
    color: white; /* Active tab text color */
}

.location-advantages .tab-button:hover {
    background-color: #ddd; /* Hover effect */
}

/* Tab Content */
.location-advantages .tab-content {
    position: relative;
}

/* Tab Panes */
.location-advantages .tab-pane {
    display: none;
}

.location-advantages .tab-pane.active {
    display: block;
    transition: opacity 0.3s ease-in-out;
}

/* Grid Layout for Tab Content */
.location-advantages .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px; /* Space between items */
}

/* Grid Items */
.location-advantages .grid-item {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for effects */
}

.location-advantages .grid-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
    transform: translateY(-5px); /* Slight lift effect on hover */
}

.location-advantages .grid-item i {
    font-size: 24px; /* Larger icon size */
    margin-right: 20px; /* Increased spacing between icon and text */
}

.location-advantages .info {
    flex: 1;
}

.location-advantages .name {
    font-size: 18px; /* Font size for item name */
    font-weight: 600; /* Bolder text for name */
    margin-bottom: 8px; /* Space below name */
    color: #333; /* Dark color for readability */
}

.location-advantages .distance {
    font-size: 16px; /* Font size for distance */
    color: #555; /* Slightly lighter color for text */
}

/* Responsive Design */
@media (max-width: 768px) {
    .location-advantages .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 480px) {
    .location-advantages .grid-container {
        grid-template-columns: 1fr; /* 1 column on smaller screens */
    }

    .location-advantages .name {
        font-size: 16px; /* Smaller font size for item name */
    }

    .location-advantages .distance {
        font-size: 14px; /* Smaller font size for distance */
    }
}
/* Construction Status Section */
.construction-status {
    padding: 0px; /* Add side padding for better spacing on small screens */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center align */
}

.construction-status h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #222;
/*    text-align: center; /* Center align heading for a cleaner look */*/
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 images per row for larger screens */
    gap: 15px; /* Spacing between grid items */
}

.grid-item {
    position: relative;
}

.grid-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}

/* Image Hover Effect */
.grid-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow on hover */
}

/* Lightbox Close Button */
.lightbox .lb-close {
    background-color: #222; /* Custom close button color */
}

/* Responsive Design */

/* For screens between 768px and 1024px (tablets) */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 images per row on medium screens */
    }

    .construction-status h2 {
        font-size: 22px; /* Slightly smaller heading font size */
    }
}

/* For screens between 480px and 768px (smaller tablets and large phones) */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 images per row */
        gap: 10px; /* Reduced spacing for smaller screens */
    }

    .construction-status h2 {
        font-size: 20px; /* Adjust heading size */
    }

    .grid-item img {
        border-radius: 6px; /* Slightly reduce corner radius */
    }
}

/* For screens less than 480px (mobile phones) */
@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 1 image per row on mobile */
        gap: 10px; /* Maintain small gap */
    }

    .construction-status h2 {
        font-size: 18px; /* Smaller heading for mobile */
    }

    .grid-item img {
        border-radius: 5px; /* Smaller radius on mobile */
    }
}

/* Master Plan Section */
.master-plan {
    padding: 0px; /* Add side padding for better spacing on small screens */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center align */
}

.master-plan h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #222;
/*    text-align: center; /* Center align heading for a cleaner look */*/
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 images per row for larger screens */
    gap: 15px; /* Spacing between grid items */
}

.grid-item {
    position: relative;
}

.grid-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}

/* Image Hover Effect */
.grid-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow on hover */
}

/* Lightbox Close Button */
.lightbox .lb-close {
    background-color: #222; /* Custom close button color */
}

/* Responsive Design */

/* For screens between 768px and 1024px (tablets) */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 images per row on medium screens */
    }

    .master-plan h2 {
        font-size: 22px; /* Slightly smaller heading font size */
    }
}

/* For screens between 480px and 768px (smaller tablets and large phones) */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 images per row */
        gap: 10px; /* Reduced spacing for smaller screens */
    }

    .master-plan h2 {
        font-size: 20px; /* Adjust heading size */
    }

    .grid-item img {
        border-radius: 6px; /* Slightly reduce corner radius */
    }
}

/* For screens less than 480px (mobile phones) */
@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 1 image per row on mobile */
        gap: 10px; /* Maintain small gap */
    }

    .master-plan h2 {
        font-size: 18px; /* Smaller heading for mobile */
    }

    .grid-item img {
        border-radius: 5px; /* Smaller radius on mobile */
    }
}

/* Developer Section */
.developer-section {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Heading Styles */
.developer-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 15px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Developer Content */
.developer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap; /* Responsive layout */
}

/* Developer Text */
.developer-text {
    flex: 1;
    padding-right: 20px; /* Space between text and logo */
}

.developer-name,
.developer-description {
    margin-bottom: 10px; /* Space between paragraphs */
    font-size: 14px; /* Font size for content */
    line-height: 1.6; /* Line height for readability */
    color: #333; /* Text color */
    text-align: justify; /* Justified text */
}

.developer-name strong,
.developer-description strong {
    color: #222; /* Stronger emphasis color */
}

/* Developer Logo */
.developer-logo {
    max-width: 200px; /* Logo max width */
    flex-shrink: 0;
}

.developer-logo img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners */
}

/* Responsive Design */
@media (max-width: 768px) {
    .developer-section {
        padding: 15px; /* Adjust padding for smaller screens */
    }
    
    .developer-section h2 {
        font-size: 20px; /* Slightly smaller font size */
    }
    
    .developer-text {
        padding-right: 0; /* Remove padding on smaller screens */
        font-size: 12px; /* Smaller font size */
    }
    
    .developer-logo {
        max-width: 150px; /* Smaller logo on tablets */
        margin: 0 auto; /* Center the logo */
    }
}

@media (max-width: 480px) {
    .developer-section {
        padding: 10px; /* Further reduced padding */
    }
    
    .developer-section h2 {
        font-size: 18px; /* Further reduced font size */
    }
    
    .developer-text {
        font-size: 11px; /* Further reduced font size */
    }
    
    .developer-logo {
        max-width: 120px; /* Smaller logo on mobile */
    }
}

/* FAQs Section */
.faq-section {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Heading Styles */
.faq-section h2 {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* FAQ Content */
.faq-content {
    margin-top: 10px; /* Space above content */
}

.faq-item {
    border-bottom: 1px solid #ddd; /* Border between items */
}

/* FAQ Question */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px;
    font-size: 16px; /* Font size for questions */
    font-weight: bold; /* Bold text */
    color: #333; /* Text color */
    background-color: #f9f9f9; /* Background color */
    border: none;
    text-align: left;
    cursor: pointer; /* Cursor on hover */
    outline: none;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.faq-question:hover {
    background-color: #e2e2e2; /* Hover effect */
}

.faq-icon {
    font-size: 18px; /* Font size for icons */
    transition: transform 0.3s; /* Smooth transition for rotation */
}

/* FAQ Answer */
.faq-answer {
    display: none; /* Hidden by default */
    padding: 15px;
    font-size: 14px; /* Font size for answers */
    line-height: 1.6; /* Line height for readability */
    color: #555; /* Slightly lighter text color */
    background-color: #f9f9f9; /* Background color */
    max-height: 0; /* Start with zero height */
    overflow: hidden; /* Hide content overflow */
    transition: max-height 0.5s ease-out; /* Smooth transition for height */
}

/* FAQ Answer Visible */
.faq-answer.open {
    display: block; /* Ensure block display when visible */
    max-height: 500px; /* Arbitrary large value for smooth transition */
}

/* Expand Icon */
.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg); /* Rotate icon for expanded state */
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-section {
        padding: 15px; /* Adjust padding for smaller screens */
    }
    
    .faq-section h2 {
        font-size: 20px; /* Slightly smaller font size */
    }
    
    .faq-question {
        font-size: 14px; /* Smaller font size */
    }
    
    .faq-answer {
        font-size: 12px; /* Smaller font size */
    }
}

/* Mobile and Tablet Adjustments */
@media (max-width: 480px) {
    .faq-section {
        padding: 10px; /* Further reduced padding */
    }
    
    .faq-section h2 {
        font-size: 18px; /* Further reduced font size */
    }
    
    .faq-question {
        font-size: 12px; /* Further reduced font size */
    }
    
    .faq-answer {
        font-size: 11px; /* Further reduced font size */
    }
}

/* RERA Section */
.rera-section {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Heading Styles */
.rera-section .section-title {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* RERA Grid Container */
.rera-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 items per row on large screens */
    gap: 20px; /* Space between grid items */
}

/* RERA Item */
.rera-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Rounded corners */
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for effects */
}

.rera-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
    transform: translateY(-5px); /* Slight lift effect on hover */
}

.rera-image {
    max-width: 100%; /* Responsive image width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Match the item’s rounded corners */
    margin-bottom: 10px; /* Space below the image */
}

.rera-text {
    font-size: 14px; /* Font size for text */
    color: #333; /* Text color */
    line-height: 1.6; /* Line height for readability */
}

/* Responsive Design */
@media (max-width: 992px) {
    .rera-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 items per row on medium screens */
    }
}

@media (max-width: 768px) {
    .rera-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 items per row on small screens */
    }
}

@media (max-width: 480px) {
    .rera-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row on extra small screens */
    }
}
/* Projects by Locality Section */
.projects-by-locality {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Section Title */
.projects-by-locality .section-title {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Projects Grid */
.projects-grid {
    display: inline-flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid with flexible columns */
    gap: 15px; /* Space between items */
    justify-content: center; /* Center items horizontally */
}

/* Project Button */
.project-button {
    display: block;
    background-color: #007bff; /* Primary color for the button */
    color: #fff; /* White text color */
    padding: 10px 15px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline from links */
    font-size: 14px; /* Font size */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    max-width: 300px; /* Limit button width */
    margin: 0 auto; /* Center button horizontally */
}

.project-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .projects-by-locality {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .projects-by-locality .section-title {
        font-size: 20px; /* Slightly smaller font size */
    }

    .project-button {
        font-size: 12px; /* Smaller font size */
        padding: 8px 12px; /* Adjust padding */
    }
}

@media (max-width: 480px) {
    .projects-by-locality {
        padding: 10px; /* Further reduced padding */
    }

    .projects-by-locality .section-title {
        font-size: 18px; /* Further reduced font size */
    }

    .project-button {
        font-size: 11px; /* Further reduced font size */
        padding: 6px 10px; /* Further reduced padding */
    }
}
/* Projects by Developer Section */
.projects-by-developer {
    padding: 0px; /* Padding for spacing */
    max-width: 1200px; /* Max width for large screens */
    margin: 0 auto; /* Center the section */
}

/* Section Title */
.projects-by-developer .section-title {
    font-size: 24px; /* Font size for heading */
    font-weight: bold; /* Bold text */
    margin-bottom: 20px; /* Space below heading */
    color: #222; /* Dark color for readability */
}

/* Projects Grid */
.projects-by-developer .projects-grid {
    display: inline-flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid with flexible columns */
    gap: 15px; /* Space between items */
    justify-content: center; /* Center items horizontally */
}

/* Project Button */
.projects-by-developer .project-button {
    display: block;
    background-color: #007bff; /* Primary color for the button */
    color: #fff; /* White text color */
    padding: 10px 15px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline from links */
    font-size: 14px; /* Font size */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
    max-width: 300px; /* Limit button width */
    margin: 0 auto; /* Center button horizontally */
}

.projects-by-developer .project-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .projects-by-developer {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .projects-by-developer .section-title {
        font-size: 20px; /* Slightly smaller font size */
    }

    .projects-by-developer .project-button {
        font-size: 12px; /* Smaller font size */
        padding: 8px 12px; /* Adjust padding */
    }
}

@media (max-width: 480px) {
    .projects-by-developer {
        padding: 10px; /* Further reduced padding */
    }

    .projects-by-developer .section-title {
        font-size: 18px; /* Further reduced font size */
    }

    .projects-by-developer .project-button {
        font-size: 11px; /* Further reduced font size */
        padding: 6px 10px; /* Further reduced padding */
    }
}


/*---------CODE BY ZUBAIR--------*/
.custom-project-card img {
    max-height: 175px;
    min-height: 175px;
    object-fit: cover;
}

@media (min-wdth: 1266px) {
.navbar-light .navbar-brand {
    width: 33% !important;
}
}