:root {
     /* Brand Colors */
     --primary: #00c79a;
     --secondary: #002D5B;
     /* --secondary: #0d6e74; */

     /* Text Colors */
     --text-main: #1f2937;
     --text-muted: #6b7280;

     /* Backgrounds */
     --bg-light: #f9fafb;
     --white: #ffffff;

     /* Shadows & Effects */
     --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
     --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

     /* Layout */
     --radius: 16px;
     --timeline-line: #e5e7eb;
 }

 .buying-guide-section {
     background-image: linear-gradient(rgb(0 0 0 / 46%), rgb(0 0 0 / 46%)), url('../buying-guide-bg.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding: 100px 0;
     font-family: "Mulish", sans-serif;
 }

 .timeline-container {
     position: relative;
     max-width: 900px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Vertical Line */
 .timeline-container::before {
     content: '';
     position: absolute;
     left: 51px;
     top: 25px;
     bottom: 20px;
     width: 2px;
     background-color: var(--timeline-line);
     z-index: 1;
 }

 .timeline-item {
     position: relative;
     margin-bottom: 40px;
     padding-left: 80px;
     z-index: 2;
 }

 .timeline-item:last-child {
     margin-bottom: 0;
 }

 /* Circle Marker */
 .timeline-marker {
     position: absolute;
     left: 20px;
     top: 24px;
     width: 24px;
     height: 24px;
     background-color: #fff;
     border: 4px solid var(--primary);
     border-radius: 50%;
     z-index: 3;
     transition: transform 0.3s ease;
 }

 .timeline-item:hover .timeline-marker {
     transform: scale(1.2);
 }

 /* Card Decoration */
 .timeline-card {
     background: #fff;
     border-radius: var(--radius);
     padding: 32px;
     box-shadow: var(--shadow);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(0, 0, 0, 0.03);
     cursor: default;
 }

 .timeline-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
 }

 .timeline-header {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 16px;
 }

 .step-number {
     font-size: 14px;
     font-weight: 700;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .timeline-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-main);
     margin: 0;
 }

 .timeline-list {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .timeline-list li {
     position: relative;
     padding-left: 24px;
     margin-bottom: 12px;
     color: var(--text-main);
     font-size: 16px;
     line-height: 1.5;
 }

 .timeline-list li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--primary);
     font-weight: 700;
 }

 .timeline-footer {
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid #f3f4f6;
     color: var(--text-muted);
     font-size: 15px;
     line-height: 1.6;
     font-style: italic;
 }

 .guide-hero {
     text-align: center;
     margin-bottom: 80px;
     color: #fff;
 }

 .guide-hero h1 {
     font-size: 48px;
     font-weight: 800;
     margin-bottom: 24px;
     letter-spacing: -1px;
     line-height: 1.2;
     color: #fff;
 }

 .guide-hero p {
     font-size: 20px;
     line-height: 1.8;
     max-width: 850px;
     margin: 0 auto;
     opacity: 0.95;
     font-weight: 400;
     color: #f3f4f6;
 }

 @media (max-width: 768px) {
     .buying-guide-section {
         padding: 60px 0;
     }

     .guide-hero h1 {
         font-size: 32px;
     }

     .guide-hero p {
         font-size: 16px;
     }

     .timeline-container::before {
         left: 38px;
     }

     .timeline-item {
         padding-left: 50px;
     }

     .timeline-marker {
         left: 10px;
         width: 20px;
         height: 20px;
     }

     .timeline-card {
         padding: 24px;
     }

     .timeline-title {
         font-size: 20px;
     }


 }

 @media (max-width: 425px) {
     .section-header {
         padding-bottom: 10px !important;
     }

 }

 /* Appraisal Page specific styles */
 .appraisal-hero {
     position: relative;
     background: linear-gradient(rgba(0, 45, 91, 0.8), rgba(0, 45, 91, 0.8)), url('../images/background/appraisal-bg.png');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding: 150px 0;
     color: var(--white);
     text-align: center;
 }

 .appraisal-hero h1 {
     font-size: 56px;
     font-weight: 800;
     margin-bottom: 24px;
     letter-spacing: -1px;
     line-height: 1.1;
     color: var(--white);
 }

 .appraisal-hero p {
     font-size: 20px;
     max-width: 800px;
     margin: 0 auto 40px;
     opacity: 0.9;
 }

 .btn-primary-custom {
     background-color: var(--primary) !important;
     color: var(--white) !important;
     padding: 16px 40px;
     border-radius: 50px;
     font-weight: 700;
     text-decoration: none;
     display: inline-block;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
 }

 .btn-primary-custom:hover {
     background-color: #00a884 !important;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 199, 154, 0.3);
     color: var(--white) !important;
 }

 .section-padding {
     padding: 100px 0;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: -60px;
     position: relative;
     z-index: 10;
 }

 .feature-card {
     background: var(--white);
     padding: 40px 30px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     text-align: center;
     transition: all 0.3s ease;
     border-bottom: 4px solid transparent;
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
     border-bottom-color: var(--primary);
 }

 .feature-icon {
     font-size: 32px;
     color: var(--primary);
     margin-bottom: 20px;
 }

 .feature-card h3 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 12px;
     color: var(--secondary);
 }

 .feature-card p {
     font-size: 14px;
     color: var(--text-muted);
     margin: 0;
 }

 .why-us-section {
     background-color: var(--bg-light);
 }

 .why-us-image {
     border-radius: 24px;
     box-shadow: var(--shadow-lg);
     transition: transform 0.5s ease;
 }

 .why-us-image:hover {
     transform: scale(1.02);
 }

 .benefit-list {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .benefit-item {
     display: flex;
     gap: 20px;
     padding: 24px;
     background: var(--white);
     border-radius: 20px;
     box-shadow: var(--shadow);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(0, 0, 0, 0.02);
 }

 .benefit-item:hover {
     transform: translateX(10px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(0, 199, 154, 0.1);
 }

 .benefit-icon {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
     background: rgba(0, 199, 154, 0.1);
     color: var(--primary);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
 }

 .benefit-content h4 {
     font-size: 18px;
     font-weight: 800;
     color: var(--secondary);
     margin-bottom: 8px;
 }

 .benefit-content p {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.6;
     margin: 0;
 }

 .section-header {
     text-align: center;
     padding-bottom: 20px;
 }

 .section-header h2 {
     font-size: 36px;
     font-weight: 800;
     color: var(--secondary);
     margin-bottom: 0px;
 }

 .section-header p {
     max-width: 700px;
     margin: 0 auto;
 }

 .section-header .divider {
     width: 60px;
     height: 4px;
     background: var(--primary);
     margin: 0 auto;
 }

 .process-steps {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 40px;
     position: relative;
     margin-top: 50px;
 }

 .process-steps::before {
     content: "";
     position: absolute;
     top: 25px;
     /* Half of circle height (50px / 2) */
     left: 12.5%;
     /* Center of first step */
     right: 12.5%;
     /* Center of last step */
     height: 2px;
     background-color: #e5e7eb;
     z-index: 0;
 }

 .process-step {
     text-align: center;
     position: relative;
 }

 .step-number-circle {
     width: 50px;
     height: 50px;
     background-color: var(--primary);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     margin: 0 auto 20px;
     position: relative;
     z-index: 1;
 }

 .form-container {
     max-width: 900px;
     margin: 0 auto;
     background: var(--white);
     border-radius: 24px;
     box-shadow: var(--shadow-lg);
     overflow: hidden;
     display: grid;
     grid-template-columns: 1fr;
 }

 .form-header {
     background: transparent;
     color: var(--secondary);
     padding: 40px;
     text-align: center;
 }

 .form-body {
     padding: 50px;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-group.full-width {
     grid-column: span 2;
 }

 .form-group label {
     display: block;
     font-weight: 600;
     margin-bottom: 8px;
     font-size: 14px;
 }

 .form-control-custom {
     width: 100%;
     padding: 14px 20px;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     background: #fdfdfd;
     font-family: inherit;
     transition: all 0.3s ease;
 }

 .form-control-custom:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(0, 199, 154, 0.1);
 }

 .form-submit-btn {
     width: 100%;
     margin-top: 20px;
 }

 textarea.form-control-custom {
     min-height: 120px;
     resize: vertical;
 }

 @media (max-width: 1024px) {
     .process-steps {
         grid-template-columns: repeat(2, 1fr);
     }

     .process-steps::before {
         display: none;
     }
 }

 @media (max-width: 768px) {
     .appraisal-hero h1 {
         font-size: 32px;
     }

     .section-padding {
         padding: 60px 0;
     }

     .features-grid {
         grid-template-columns: 1fr;
         margin-top: 40px;
     }

     .process-steps {
         grid-template-columns: 1fr;
     }

     .form-grid {
         grid-template-columns: 1fr;
     }

     .form-group.full-width {
         grid-column: span 1;
     }

     .form-body {
         padding: 30px;
     }
 }

 /* ==========================================================================
   Management Page specific styles
   ========================================================================== */
 .management-hero {
     position: relative;
     background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/background/management-hero.png');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding: 160px 0;
     color: var(--white);
     text-align: center;
 }

 .management-hero h1 {
     font-size: 64px;
     font-weight: 800;
     margin-bottom: 24px;
     letter-spacing: -1.5px;
     line-height: 1.1;
     color: var(--white);
 }

 .management-hero p {
     font-size: 22px;
     max-width: 850px;
     margin: 0 auto 40px;
     opacity: 0.95;
     line-height: 1.6;
 }

 /* Services Grid (3+2 Layout) */
 .services-flex-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: -80px;
     position: relative;
     z-index: 10;
 }

 .service-card-premium {
     background: var(--white);
     flex: 1 1 calc(33.333% - 30px);
     min-width: 300px;
     max-width: 400px;
     padding: 45px 35px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     text-align: center;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 1px solid rgba(0, 0, 0, 0.03);
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .service-card-premium:hover {
     transform: translateY(-12px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(0, 199, 154, 0.2);
 }

 .service-card-premium .icon-box {
     width: 70px;
     height: 70px;
     background: rgba(0, 199, 154, 0.1);
     color: var(--primary);
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     margin-bottom: 25px;
     transition: all 0.3s ease;
 }

 .service-card-premium:hover .icon-box {
     background: var(--primary);
     color: var(--white);
     transform: rotate(10deg);
 }

 .service-card-premium h3 {
     font-size: 20px;
     font-weight: 800;
     color: var(--secondary);
     margin-bottom: 15px;
 }

 .service-card-premium p {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .service-card-premium ul {
     list-style: none;
     padding: 0;
     margin: 0 0 25px 0;
     text-align: left;
 }

 .service-card-premium ul li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 12px;
     color: #4b5563;
     font-size: 15px;
     line-height: 1.5;
 }

 .service-card-premium ul li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--primary);
     font-weight: bold;
 }

 .service-card-premium .closing-sentence {
     font-weight: 600;
     color: var(--secondary);
     border-top: 1px solid #f1f5f9;
     padding-top: 15px;
     margin-top: auto;
     font-size: 14px;
 }

 /* CTA Buttons */
 .cta-button-row {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
     /* margin-top: 40px; */
     position: relative;
     z-index: 2;
 }

 .cta-button-row .btn-primary,
 .cta-button-row .btn-outline {
     min-width: 220px;
     padding: 18px 35px;
     font-weight: 700;
     border-radius: 12px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-decoration: none;
     display: inline-block;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 14px;
 }

 .cta-button-row .btn-primary {
     background: var(--primary);
     color: var(--white);
     border: none;
 }

 .cta-button-row .btn-primary:hover {
     background: var(--white);
     color: var(--primary);
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .cta-button-row .btn-outline {
     background: transparent;
     border: 2px solid var(--white);
     color: var(--white);
 }

 .cta-button-row .btn-outline:hover {
     background: var(--white);
     color: var(--secondary);
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 /* Call to Action Section */
 .management-cta-section {
     background: #0d6e74;
     padding: 100px 0;
     color: var(--white);
     text-align: center;
     border-radius: 30px;
     margin: 0 20px 100px;
     position: relative;
     overflow: hidden;
 }

 .management-cta-section::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -20%;
     width: 60%;
     height: 200%;
     background: radial-gradient(circle, rgba(0, 199, 154, 0.1) 0%, transparent 70%);
     pointer-events: none;
 }

 .management-cta-section h2 {
     font-size: 42px;
     font-weight: 800;
     color: var(--white);
     margin-bottom: 24px;
 }

 .management-cta-section p {
     font-size: 18px;
     max-width: 600px;
     margin: 0 auto 40px;
     opacity: 0.9;
 }

 /* Responsiveness */
 @media (max-width: 1024px) {
     .service-card-premium {
         flex: 1 1 calc(45% - 30px);
     }
 }

 @media (max-width: 768px) {
     .management-hero {
         padding: 80px 0;
     }

     .management-hero h1 {
         font-size: 38px;
     }

     .management-hero p {
         font-size: 16px;
     }

     .service-card-premium {
         flex: 1 1 100%;
         max-width: 100%;
     }

     .services-flex-container {
         margin-top: 40px;
     }

     .management-cta-section {
         padding: 60px 20px;
         margin: 0 10px 60px;
         border-radius: 20px;
     }

     .management-cta-section h2 {
         font-size: 30px;
     }
 }

 /* ==========================================================================
   Switch to MK Group Page specific styles
   ========================================================================== */
 .switch-hero {
     position: relative;
     background: linear-gradient(rgba(0, 20, 45, 0.8), rgba(0, 20, 45, 0.8)), url('../images/background/switch-hero.png');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     padding: 160px 0;
     color: var(--white);
     text-align: center;
 }

 .solution-steps {
     grid-template-columns: repeat(3, 1fr) !important;
 }

 .switch-hero h1 {
     font-size: 64px;
     font-weight: 800;
     margin-bottom: 24px;
     letter-spacing: -1.5px;
     line-height: 1.1;
     color: var(--white);
 }

 .switch-hero p {
     font-size: 22px;
     max-width: 850px;
     margin: 0 auto 40px;
     opacity: 0.95;
     line-height: 1.6;
 }

 .pain-points-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 .pain-point-card {
     background: var(--white);
     padding: 35px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     display: flex;
     gap: 20px;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.02);
 }

 .pain-point-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(239, 68, 68, 0.1);
 }

 .pain-point-icon {
     flex-shrink: 0;
     width: 54px;
     height: 54px;
     background: rgba(239, 68, 68, 0.08);
     color: #00c79a;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
 }

 .pain-point-content h3 {
     font-size: 19px;
     font-weight: 800;
     color: var(--secondary);
     margin-bottom: 10px;
 }

 .pain-point-content p {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.6;
     margin: 0;
 }

 .handover-process-section {
     background-color: var(--bg-light);
 }

 .handover-card {
     text-align: center;
     padding: 40px 30px;
     background: var(--white);
     border-radius: 24px;
     box-shadow: var(--shadow);
     height: 100%;
     transition: all 0.3s ease;
 }

 .handover-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-5px);
 }

 .handover-icon-circle {
     width: 80px;
     height: 80px;
     background: rgba(0, 199, 154, 0.1);
     color: var(--primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 32px;
     margin: 0 auto 25px;
     border: 2px solid rgba(0, 199, 154, 0.2);
 }

 .handover-card h3 {
     font-size: 22px;
     font-weight: 800;
     margin-bottom: 15px;
     color: var(--secondary);
 }

 .handover-card p {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.6;
 }

 .switch-form-grid {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 50px;
     align-items: center;
 }

 .relief-image-container {
     position: relative;
     border-radius: 24px;
     overflow: hidden;
     box-shadow: var(--shadow-lg);
 }

 .relief-image-container img {
     width: 100%;
     height: auto;
     display: block;
 }

 .relief-badge {
     position: absolute;
     bottom: 30px;
     left: 30px;
     background: var(--white);
     padding: 20px 25px;
     border-radius: 16px;
     box-shadow: var(--shadow-lg);
     display: flex;
     align-items: center;
     gap: 15px;
     width: calc(100% - 60px);
 }

 .relief-badge .icon {
     font-size: 24px;
     color: var(--primary);
 }

 .relief-badge p {
     font-size: 14px;
     font-weight: 700;
     color: var(--secondary);
     margin: 0;
     line-height: 1.2;
 }

 .accent-text {
     color: var(--primary);
 }

 .bg-light-red {
     background-color: #fffafb;
 }

 @media (max-width: 991px) {
     .pain-points-grid {
         grid-template-columns: 1fr;
     }

     .switch-form-grid {
         grid-template-columns: 1fr;
     }

     .relief-image-container {
         order: 2;
     }
 }

 @media (max-width: 768px) {
     .switch-hero h1 {
         font-size: 38px;
     }

     .switch-hero p {
         font-size: 16px;
     }
 }

 /* ==========================================================================
   Switch Page Specific Enhancements
   ========================================================================== */

 .why-mk-section h2 {
     font-size: 48px;
     font-weight: 800;
     line-height: 1.1;
     color: var(--secondary);
     margin-top: 10px;
 }

 .subtitle {
     display: inline-block;
     color: var(--primary);
     font-size: 14px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 0;
 }

 /* Premium Feature Checklist */
 .feature-checklist {
     list-style: none;
     padding: 0;
     margin: 30px 0;
 }

 .feature-checklist li {
     position: relative;
     padding-left: 35px;
     margin-bottom: 20px;
     font-size: 17px;
     color: var(--text-main);
     line-height: 1.5;
 }

 .feature-checklist li::before {
     content: '\f058';
     font-family: 'Font Awesome 5 Pro';
     position: absolute;
     left: 0;
     top: 2px;
     color: var(--primary);
     font-size: 22px;
     font-weight: 900;
 }

 .feature-checklist li strong {
     color: var(--secondary);
     display: block;
     font-size: 18px;
     margin-bottom: 2px;
 }

 /* Centered Form Container */
 .form-container {
     max-width: 850px;
     margin: 0 auto;
     background: var(--white);
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 30px 60px -12px rgba(0, 45, 91, 0.15);
 }

 .form-header {
     padding: 50px 60px 40px;
 }

 .form-header h2 {
     font-size: 36px;
     font-weight: 800;
     margin-bottom: 15px;
 }

 .form-body {
     padding: 40px 60px 60px;
 }

 .form-control-custom {
     width: 100%;
     padding: 15px 20px;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     font-size: 16px;
     transition: all 0.3s ease;
 }

 .form-control-custom:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(0, 199, 154, 0.1);
 }

 .btn-primary-custom {
     background: var(--primary);
     color: var(--white);
     border: none;
     padding: 18px 30px;
     border-radius: 12px;
     font-weight: 800;
     font-size: 18px;
     width: auto;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .btn-primary-custom:hover {
     background: #00b38a;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 199, 154, 0.2);
 }

 /* Centered Relief Badge */
 .relief-badge.centered {
     position: relative;
     bottom: auto;
     left: auto;
     width: 100%;
     justify-content: center;
     text-align: center;
     background: var(--white);
     padding: 25px 40px;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .bg-light-2 {
     background-color: #f8fafc;
 }

 @media (max-width: 768px) {
     .why-mk-section h2 {
         font-size: 32px;
     }

     .form-header,
     .form-body {
         padding: 30px 20px;
     }

     .form-header h2 {
         font-size: 28px;
     }
 }

 /* ==========================================================================
   Renting Tips Page specific styles
   ========================================================================== */
 .renting-tips-page {
     background-color: var(--bg-light);
     font-family: inherit;
     color: var(--text-main);
     line-height: 1.6;
     padding-bottom: 80px;
 }

 .tips-container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .tips-hero {
     padding: 100px 0 60px;
     text-align: center;
 }

 .tips-hero h1 {
     font-size: 3rem;
     font-weight: 800;
     color: var(--secondary);
     margin-bottom: 20px;
     letter-spacing: -1px;
 }

 .tips-hero p {
     font-size: 1.25rem;
     color: var(--text-muted);
     max-width: 600px;
     margin: 0 auto;
 }

 .tip-card {
     background: var(--white);
     border-radius: var(--radius);
     padding: 40px;
     margin-bottom: 30px;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
     display: flex;
     gap: 30px;
     align-items: flex-start;
     border: 1px solid rgba(0, 0, 0, 0.03);
 }

 .tip-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
     border-color: rgba(0, 199, 154, 0.2);
 }

 .tip-icon {
     flex-shrink: 0;
     width: 60px;
     height: 60px;
     background: rgba(0, 199, 154, 0.1);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 24px;
 }

 .tip-content h2 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 15px;
     color: var(--secondary);
 }

 .tip-content p {
     color: var(--text-muted);
     margin-bottom: 20px;
 }

 .tip-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .tip-list li {
     position: relative;
     padding-left: 28px;
     margin-bottom: 12px;
     color: var(--text-main);
     font-size: 0.95rem;
 }

 .tip-list li::before {
     content: "→";
     position: absolute;
     left: 0;
     color: var(--primary);
     font-weight: bold;
 }

 .section-tag {
     display: inline-block;
     background: rgba(0, 199, 154, 0.1);
     color: var(--primary);
     padding: 6px 16px;
     border-radius: 100px;
     font-size: 0.85rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 20px;
 }

 .tips-cta {
     background: var(--secondary);
     color: #ffffff;
     border-radius: var(--radius);
     padding: 60px;
     text-align: center;
     margin-top: 50px;
     box-shadow: 0 20px 50px rgba(0, 45, 91, 0.2);
 }

 .tips-cta h2 {
     font-size: 2.25rem;
     color: #ffffff;
     margin-bottom: 20px;
 }

 .tips-cta p {
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 35px;
     font-size: 1.1rem;
 }

 .cta-buttons {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn-premium {
     padding: 16px 32px;
     border-radius: 50px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }

 .btn-primary-tips {
     background: var(--primary);
     color: #ffffff !important;
 }

 .btn-primary-tips:hover {
     background: #00b38a;
     transform: scale(1.05);
 }

 .btn-outline-tips {
     border: 2px solid rgba(255, 255, 255, 0.2);
     color: #ffffff !important;
 }

 .btn-outline-tips:hover {
     border-color: #ffffff;
     background: rgba(255, 255, 255, 0.05);
     transform: translateY(-2px);
 }

 @media (max-width: 768px) {
     .tips-hero {
         padding: 60px 0 40px;
     }

     .tip-card {
         flex-direction: column;
         padding: 30px;
         gap: 20px;
     }

     .tips-hero h1 {
         font-size: 2.25rem;
     }

     .tips-cta {
         padding: 40px 20px;
     }

     .tips-cta h2 {
         font-size: 1.75rem;
     }
 }

 /* ==========================================================================
   Renting With Us - Apple Minimalist Design System
   ========================================================================== */

 :root {
     /* Status-Coded Accents */
     --emergency-red: #d32f2f;
     --procedure-blue: #00c79a;
     --trust-green: #28a745;

     /* Premium Neutrals */
     --deep-charcoal: #1a1a1a;
     --border-light: #eeeeee;
     --apple-bg: #ffffff;

     /* Layout Tokens */
     --radius-premium: 24px;
     --max-content-width: 950px;
 }

 .renting-with-us-page {
     background-color: var(--apple-bg) !important;
     color: var(--text-main);
     font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
     line-height: 1.7;
 }

 .rent-container {
     max-width: var(--max-content-width);
     margin: 0 auto;
     padding: 0 24px;
 }

 /* Typography Hierarchy */
 .rent-h1 {
     font-size: clamp(32px, 5vw, 48px);
     font-weight: 800;
     color: var(--deep-charcoal);
     letter-spacing: -0.02em;
     margin-bottom: 16px;
     line-height: 1.1;
 }

 .rent-h2 {
     font-size: clamp(24px, 4vw, 32px);
     font-weight: 700;
     color: var(--deep-charcoal);
     letter-spacing: -0.01em;
     margin-bottom: 24px;
     margin-top: 0;
 }

 .rent-h3 {
     font-size: 20px;
     font-weight: 600;
     color: var(--deep-charcoal);
     margin-bottom: 12px;
 }

 .rent-lead {
     font-size: 18px;
     color: var(--text-muted);
     max-width: 700px;
     margin-bottom: 48px;
 }

 /* Premium Card Component */
 .rent-card {
     background: var(--white);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-premium);
     padding: 40px;
     margin-bottom: 32px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .rent-card:hover {
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
 }

 /* Section Specific Styling */

 /* Emergency Section - RED */
 .section-emergency {
     border-top: 4px solid var(--emergency-red);
 }

 .emergency-badge {
     display: inline-block;
     background: var(--emergency-red);
     color: white;
     padding: 6px 14px;
     border-radius: 100px;
     font-size: 13px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 20px;
 }

 /* Transition Section - BLUE */
 .section-transition-wrap {
     background: #fbfdff;
     /* Extremely light blue tint */
     padding: 80px 0;
 }

 .transition-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
 }

 .transition-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 24px;
 }

 .transition-icon {
     width: 40px;
     height: 40px;
     background: rgba(0, 113, 227, 0.1);
     color: var(--procedure-blue);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
 }

 .transition-card {
     border-top: 4px solid var(--procedure-blue);
 }

 /* Commitment Section - GREEN */
 .section-commitment {
     background: #fafffb;
     border: 1px solid rgba(40, 167, 69, 0.1);
     border-top: 4px solid var(--trust-green);
 }

 .commitment-header {
     color: var(--trust-green);
     display: flex;
     align-items: center;
     justify-self: center;
     gap: 12px;
 }

 /* List Styling */
 .rent-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .rent-list li {
     position: relative;
     padding-left: 28px;
     margin-bottom: 16px;
     font-size: 15px;
     color: var(--text-main);
 }

 .rent-list li::before {
     content: "•";
     position: absolute;
     left: 0;
     color: var(--text-muted);
     font-weight: bold;
 }

 .rent-list.check li::before {
     content: "✓";
     color: var(--primary);
 }

 /* Icons */
 .rent-icon-small {
     font-size: 1.25rem;
     color: var(--primary);
 }

 /* Hero Section */
 .rent-hero-section {
     padding: 100px 0 60px;
     background: white;
 }

 /* Contact Card */
 .contact-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 24px;
     margin-top: 40px;
 }

 /* Button Refinement */
 .rent-btn {
     display: inline-flex;
     align-items: center;
     padding: 14px 28px;
     background: var(--deep-charcoal);
     color: white;
     border-radius: 100px;
     font-weight: 600;
     text-decoration: none;
     transition: opacity 0.2s ease;
     border: none;
     cursor: pointer;
 }

 .rent-btn:hover {
     opacity: 0.9;
     color: white;
 }

 /* Sections spacing */
 .rent-section-padding {
     padding: 80px 0;
 }

 /* Responsive Overrides */
 @media (max-width: 768px) {
     .transition-grid {
         grid-template-columns: 1fr;
     }

     .rent-card {
         padding: 24px;
     }

     .rent-h1 {
         font-size: 32px;
     }

     .rent-hero-section {
         padding: 60px 0 40px;
     }

     .rent-section-padding {
         padding: 60px 0;
     }
 }

 .emergency-situations-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 40px;
 }

 @media (max-width: 992px) {
     .emergency-situations-grid {
         grid-template-columns: 1fr;
     }
 }

 #appraisalForm input,
 #appraisalForm textarea,
 #appraisalForm input[type=text],
 #appraisalForm input[type=password],
 #appraisalForm input[type=datetime],
 #appraisalForm input[type=datetime-local],
 #appraisalForm input[type=date],
 #appraisalForm input[type=month],
 #appraisalForm input[type=time],
 #appraisalForm input[type=week],
 #appraisalForm input[type=number],
 #appraisalForm input[type=email],
 #appraisalForm input[type=url],
 #appraisalForm input[type=search],
 #appraisalForm input[type=tel],
 #appraisalForm input[type=color] {
     color: var(--text-main);
 }

 #rentalAppraisalForm input,
 #rentalAppraisalForm textarea,
 #rentalAppraisalForm input[type=text],
 #rentalAppraisalForm input[type=password],
 #rentalAppraisalForm input[type=datetime],
 #rentalAppraisalForm input[type=datetime-local],
 #rentalAppraisalForm input[type=date],
 #rentalAppraisalForm input[type=month],
 #rentalAppraisalForm input[type=time],
 #rentalAppraisalForm input[type=week],
 #rentalAppraisalForm input[type=number],
 #rentalAppraisalForm input[type=email],
 #rentalAppraisalForm input[type=url],
 #rentalAppraisalForm input[type=search],
 #rentalAppraisalForm input[type=tel],
 #rentalAppraisalForm input[type=color] {
     color: var(--text-main);
 }

 #switch-form input,
 #switch-form textarea,
 #switch-form input[type=text],
 #switch-form input[type=password],
 #switch-form input[type=datetime],
 #switch-form input[type=datetime-local],
 #switch-form input[type=date],
 #switch-form input[type=month],
 #switch-form input[type=time],
 #switch-form input[type=week],
 #switch-form input[type=number],
 #switch-form input[type=email],
 #switch-form input[type=url],
 #switch-form input[type=search],
 #switch-form input[type=tel],
 #switch-form input[type=color] {
     color: var(--text-main);
 }

 #switch-form input::placeholder,
 #switch-form textarea::placeholder {
     color: #1a1a1a50;
 }


 .invalid-feedback {
     color: var(--emergency-red);
     font-size: 0.875rem;
     margin-top: 0.25rem;
 }

 .mt-4 {
     margin-top: 24px !important;
 }

 /* Make Offer Form Styles */
 .mo-page-wrapper {
     background-color: #f8fafc;
     padding: 60px 20px;
     font-family: "Mulish", sans-serif;
     position: relative;
     overflow: hidden;
 }

 .mo-bg-decor {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(circle at 100% 0%, rgba(0, 184, 148, 0.05) 0%, transparent 40%),
         radial-gradient(circle at 0% 100%, rgba(0, 184, 148, 0.05) 0%, transparent 40%);
     pointer-events: none;
     z-index: 0;
 }

 .mo-container {
     max-width: 900px;
     margin: 0 auto;
     position: relative;
     background: #fff;
     padding: 20px;
     border-radius: 19px;
     box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.06);
     z-index: 1;
 }

 .mo-header {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 30px;
 }

 .mo-header-icon {
     width: 60px;
     height: 60px;
     background-color: #ebf8f5;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #00b894;
     font-size: 24px;
 }

 .mo-header-text h1 {
     font-size: 28px;
     font-weight: 800;
     color: #1e293b;
     margin: 0 0 5px 0;
 }

 .mo-header-text p {
     font-size: 14px;
     color: #64748b;
     margin: 0;
 }

 .mo-card {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.04);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
     border-radius: 12px;
     padding: 30px;
     margin-bottom: 25px;
 }

 .mo-card-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px;
 }

 .mo-card-header .icon {
     width: 32px;
     height: 32px;
     background-color: #ebf8f5;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #00b894;
     font-size: 14px;
 }

 .mo-card-header h3 {
     font-size: 18px;
     font-weight: 700;
     color: #1e293b;
     margin: 0;
 }

 .mo-row {
     display: flex;
     flex-wrap: wrap;
     margin: -10px;
 }

 .mo-col-12 {
     width: 100%;
     padding: 10px;
 }

 .mo-col-6 {
     width: 50%;
     padding: 10px;
 }

 .mo-col-4 {
     width: 33.333%;
     padding: 10px;
 }

 .mo-form-group {
     display: flex;
     flex-direction: column;
 }

 .mo-form-label {
     font-size: 13px;
     font-weight: 600;
     color: #1e293b;
     margin-bottom: 8px;
     display: block;
 }

 .mo-req {
     color: #00b894;
     font-size: 11px;
     font-weight: 500;
     margin-left: 5px;
 }

 .mo-input-wrapper {
     position: relative;
     display: flex;
     align-items: center;
 }

 .mo-input-icon {
     position: absolute;
     left: 7px;
     color: #00b894;
     font-size: 14px;
     pointer-events: none;
 }

 .mo-input {
     width: 100%;
     height: 46px;
     padding: 10px 15px 10px 40px;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     font-size: 14px;
     color: #334155;
     background-color: #ffffff;
     transition: all 0.3s ease;
     font-family: inherit;
 }

 .mo-input:focus {
     border-color: #00b894;
     box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.1);
     outline: none;
 }

 .mo-input::placeholder {
     color: #94a3b8;
 }

 .mo-select {
     appearance: none;
     -webkit-appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 15px center;
 }

 .mo-help-text {
     font-size: 11px;
     color: #64748b;
     margin-top: 5px;
 }

 .mo-radio-group {
     display: flex;
     gap: 20px;
     margin-top: 8px;
 }

 .mo-radio-item {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
 }

 .mo-radio-item input[type="radio"] {
     appearance: none;
     width: 18px;
     height: 18px;
     border: 2px solid #cbd5e1;
     border-radius: 50%;
     outline: none;
     cursor: pointer;
     position: relative;
     transition: all 0.2s ease;
     margin: 0;
 }

 .mo-radio-item input[type="radio"]:checked {
     border-color: #00b894;
 }

 .mo-radio-item input[type="radio"]:checked::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 10px;
     height: 10px;
     background-color: #00b894;
     border-radius: 50%;
 }

 .mo-radio-label {
     font-size: 14px;
     color: #334155;
 }

 .mo-checkbox-group {
     display: flex;
     flex-wrap: wrap;
     gap: 15px 0;
     margin-top: 5px;
 }

 .mo-checkbox-col {
     width: 50%;
 }

 .mo-checkbox-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     cursor: pointer;
     margin-bottom: 12px;
 }

 .mo-checkbox-item:last-child {
     margin-bottom: 0;
 }

 .mo-checkbox-item input[type="checkbox"] {
     appearance: none;
     width: 18px;
     height: 18px;
     border: 2px solid #a7dfd3;
     border-radius: 4px;
     outline: none;
     cursor: pointer;
     position: relative;
     transition: all 0.2s ease;
     flex-shrink: 0;
     background-color: #fff;
     margin: 0;
 }

 .mo-checkbox-item input[type="checkbox"]:checked {
     background-color: #fff;
 }

 .mo-checkbox-item input[type="checkbox"]:checked::after {
     content: '';
     position: absolute;
     top: 1px;
     left: 5px;
     width: 5px;
     height: 10px;
     border: solid #00b894;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .mo-checkbox-label {
     font-size: 13px;
     color: #334155;
     line-height: 1.4;
 }

 .mo-captcha {
     margin: 20px 0;
 }

 .mo-submit-btn {
     background-color: #00b894;
     color: #fff;
     border: none;
     border-radius: 8px;
     padding: 12px 30px;
     font-size: 15px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .mo-submit-btn:hover {
     background-color: #00a080;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 184, 148, 0.2);
 }

 @media (max-width: 768px) {

     .mo-col-6,
     .mo-col-4,
     .mo-checkbox-col {
         width: 100%;
     }

     .mo-card {
         padding: 20px;
     }
 }