diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 2.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 2.zip
new file mode 100644
index 0000000..3e9e1e5
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 2.zip differ
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 3.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 3.zip
new file mode 100644
index 0000000..b312836
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 3.zip differ
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 4.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 4.zip
new file mode 100644
index 0000000..3a8f3b9
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder 4.zip differ
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html
index 1e3c430..f1ae359 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html
@@ -50,6 +50,9 @@
         </ng-container></clr-dg-column>
 
 
+      <clr-dg-column [clrDgField]="'html'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Html
+        </ng-container></clr-dg-column>
+
       <clr-dg-column [clrDgField]="'Json'"> <ng-container *clrDgHideableColumn="{hidden: false}"> htmljson
         </ng-container></clr-dg-column>
 
@@ -91,7 +94,9 @@
 
 
 
-
+        <clr-dg-cell (click)="goToReplaceStringhtmljson (user.html)"
+          style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+        </clr-dg-cell>
 
         <clr-dg-cell (click)="goToReplaceStringhtmljson (user.htmljson)"
           style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
@@ -128,8 +133,8 @@
               </clr-signpost-content>
             </clr-signpost>
             <!-- View HTML Button -->
-            <button class="btn btn-sm btn-outline" (click)="openHtmlPreview(user.id)">
-              <clr-icon shape="eye"></clr-icon>
+            <button class="btn btn-sm btn-outline" (click)="openHtmlPreview(user.id)" title="Open Preview in New Page">
+              <clr-icon shape="eye"></clr-icon> Preview
             </button>
           </div>
         </clr-dg-cell>
@@ -359,6 +364,10 @@
         </div>
 
 
+        <div class="clr-col-sm-12">
+          <label> Html</label>
+          <textarea cols="10" rows="2" [(ngModel)]="rowSelected.html" name="html " placeholder="Textarea">  </textarea>
+        </div>
         <div class="clr-col-sm-12">
           <label> Json</label>
           <textarea cols="10" rows="2" [(ngModel)]="rowSelected.htmljson" name="htmljson "
@@ -482,6 +491,10 @@
           <input type="checkbox" formControlName="active" clrToggle />
         </div>
 
+        <div class="clr-col-sm-12">
+          <label> Html</label>
+          <textarea cols="15" rows="3" formControlName="html" placeholder="Textarea">  </textarea>
+        </div>
         <div class="clr-col-sm-12">
           <label> Json</label>
           <textarea cols="15" rows="3" formControlName="htmljson" placeholder="Textarea">  </textarea>
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts
index 4f6d789..f49ca07 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts
@@ -9,6 +9,8 @@ import { Design_lbrarycardvariable } from './Design_lbrary_cardvariable';
 import { UserInfoService } from 'src/app/services/user-info.service';
 import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
 import { COMMON_CSS } from '../WireframesUi/common-css';
+import { Download_Css } from '../WireframesUi/download-css';
+// import { Download_Css } from '../WireframesUi/download-css';
 declare var JsBarcode: any;
 @Component({
   selector: 'app-Design_lbrary',
@@ -79,11 +81,13 @@ export class Design_lbraryComponent implements OnInit {
       htmljson: [null],
 
       css: [null],
-      templatetype:[null],
-      uitype:[null],
+      templatetype: [null],
+      uitype: [null],
       javacode: [null],
       typerender: [null],
       techstack: [null],
+      html: [null],
+
 
 
 
@@ -352,12 +356,16 @@ export class Design_lbraryComponent implements OnInit {
   //     this.modalHtmlPreview = true;
   //   });
   // }
-
   openHtmlPreview(id: number): void {
     console.log('preview html start..');
 
     this.siteTreeService.generateHtmlwithcss(id).subscribe((response: any) => {
       const bodyContent = response.msg || '<div>Empty</div>'; // fallback
+
+      // Store raw content for download/copy
+      const rawHtmlContent = bodyContent;
+
+      // Full HTML with styles and controls
       const fullHtml = `
         <!DOCTYPE html>
         <html lang="en">
@@ -366,38 +374,204 @@ export class Design_lbraryComponent implements OnInit {
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>HTML Preview</title>
           <style>
-            ${COMMON_CSS}
+        ${Download_Css}
+        
+        /* Additional styles for controls */
+        .preview-controls {
+          position: fixed !important;
+          top: 10px !important;
+          right: 10px !important;
+          background-color: rgba(255, 255, 255, 0.9) !important;
+          border: 1px solid #ccc !important;
+          border-radius: 4px !important;
+          padding: 10px;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
+          z-index: 1000 !important;
+        }
+        .preview-controls button {
+          margin: 5px !important;
+          padding: 8px 12px !important;
+          background-color: #0072a3 !important;
+          color: white !important;
+          border: none !important;
+          border-radius: 3px !important; 
+          cursor: pointer !important;
+          font-size: 14px !important;
+        }
+        .preview-controls button:hover {
+          background-color: #005a80 !important;
+        }
+        .toast {
+          position: fixed !important;
+          top: 70px !important;
+          right: 10px !important;
+          padding: 10px 20px !important;
+          background-color: #4CAF50 !important;
+          color: white !important;
+          border-radius: 4px !important;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
+          opacity: 0 !important;
+          transition: opacity 0.3s !important;
+          z-index: 1001 !important;
+        }
+        .toast.show {
+          opacity: 1 !important;
+        }
+        .html-source {
+          display: none !important;
+          margin-top: 20px !important;
+          width: 100% !important;
+          height: 300px !important;
+          font-family: monospace !important;
+          resize: vertical !important;
+          white-space: pre !important;
+          overflow: auto !important;
+          background-color: #f5f5f5 !important;
+          border: 1px solid #ddd !important;
+          padding: 10px !important;
+        }
+        .show-source {
+          display: block !important;
+        }
           </style>
         </head>
         <body>
-          ${bodyContent}
+          <div class="preview-controls">
+        <button id="download-btn">Download HTML</button>
+        <button id="copy-btn">Copy to Clipboard</button>
+        <button id="toggle-source-btn">View Source</button>
+          </div>
+          
+          <div id="toast" class="toast">Copied to clipboard!</div>
+          
+          <div id="content-preview">
+        ${bodyContent}
+          </div>
+          
+          <pre id="html-source" class="html-source"></pre>
+          
+          <script>
+        // Format HTML for display in the source view
+        function formatHtml(html) {
+          return html.replace(/&/g, '&amp;')
+             .replace(/</g, '&lt;')
+             .replace(/>/g, '&gt;');
+        }
+        
+        // Store the raw HTML content
+        const rawHtml = \`${rawHtmlContent.replace(/`/g, '\\`')}\`;
+        
+        // Download functionality with full HTML and CSS
+        document.getElementById('download-btn').addEventListener('click', function() {
+          const fullHtmlContent = \`
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Downloaded HTML</title>
+          <style>
+            ${Download_Css}
+          </style>
+            </head>
+            <body>
+          \${rawHtml}
+            </body>
+            </html>
+          \`;
+  
+          const blob = new Blob([fullHtmlContent], { type: 'text/html' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'preview-' + new Date().toISOString().slice(0, 10) + '.html';
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+        });
+        
+        // Copy to clipboard functionality
+        document.getElementById('copy-btn').addEventListener('click', function() {
+          navigator.clipboard.writeText(rawHtml).then(function() {
+            const toast = document.getElementById('toast');
+            toast.textContent = 'Copied to clipboard!';
+            toast.classList.add('show');
+            setTimeout(function() {
+          toast.classList.remove('show');
+            }, 2000);
+          }).catch(function(err) {
+            console.error('Could not copy text: ', err);
+            const toast = document.getElementById('toast');
+            toast.textContent = 'Failed to copy to clipboard';
+            toast.style.backgroundColor = '#f44336';
+            toast.classList.add('show');
+            setTimeout(function() {
+          toast.classList.remove('show');
+            }, 2000);
+          });
+        });
+        
+        // Toggle source view
+        document.getElementById('toggle-source-btn').addEventListener('click', function() {
+          const sourceElem = document.getElementById('html-source');
+          if (!sourceElem.classList.contains('show-source')) {
+            sourceElem.textContent = rawHtml;
+            sourceElem.innerHTML = formatHtml(rawHtml);
+            sourceElem.classList.add('show-source');
+            this.textContent = 'Hide Source';
+          } else {
+            sourceElem.classList.remove('show-source');
+            this.textContent = 'View Source';
+          }
+        });
+          </script>
         </body>
         </html>
       `;
 
-      this.htmlContent = fullHtml;
-      console.log('html code ..', this.htmlContent);
-      this.modalHtmlPreview = true;
+      // Open the HTML in a new window/tab
+      const newWindow = window.open('', '_blank');
+      if (newWindow) {
+        newWindow.document.write(fullHtml);
+        newWindow.document.close();
+      } else {
+        // If popup is blocked, inform the user
+        this.toastr.warning('Pop-up blocked. Please allow pop-ups for this site to see the preview.');
+      }
     }, error => {
-      this.htmlContent = `
+      // Handle error by opening a new window with error message
+      const errorHtml = `
         <!DOCTYPE html>
-        <html><head><style>${COMMON_CSS}</style></head>
-        <body><p style="color:red;">Error loading HTML.</p></body></html>
+        <html>
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Error Preview</title>
+          <style>${COMMON_CSS}</style>
+        </head>
+        <body>
+          <div style="padding: 20px; text-align: center;">
+            <h2 style="color:red;">Error Loading Preview</h2>
+            <p>The preview content could not be loaded. Error details:</p>
+            <pre style="background-color: #f8f8f8; padding: 10px; border-radius: 5px; text-align: left;">${error ? JSON.stringify(error, null, 2) : 'Unknown error'}</pre>
+          </div>
+        </body>
+        </html>
       `;
-      this.modalHtmlPreview = true;
+
+      const newWindow = window.open('', '_blank');
+      if (newWindow) {
+        newWindow.document.write(errorHtml);
+        newWindow.document.close();
+      } else {
+        this.toastr.error('Error loading preview. Pop-up blocked. Please allow pop-ups for this site.');
+      }
     });
   }
-
-
 }
 
 
 
 
 
-
-
-
-
-
-
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
index 89e353e..a5d5e63 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
@@ -64,7 +64,18 @@ export class SiteTreeservice {
     return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
   }
 
+  createHtmlfile(siteNmae: String, data: any): Observable<any> {
 
+    const _http = this.baseURL + "/createFile?siteBuilderName=" + siteNmae;
+    return this.apiRequest.post(_http, data);
+  }
 
-  // updateaction
+  readPages(siteNmae: String, pageNmae: String): Observable<any> {
+
+    const _http = this.baseURL + "/read?siteBuilderName=" + siteNmae + '&filename=' + pageNmae;
+
+    return this.apiRequest.get(_http, undefined, 'text');
+  }
+
+  // updateactionƒ
 }
\ No newline at end of file
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.css b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.css
index ea29224..fc8e929 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.css
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.css
@@ -198,7 +198,15 @@
   margin-bottom: 8px;
   color: #333;
 }
-
+.offcanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+  z-index: 1040;
+}
 .section-content {
   font-size: 13px;
   color: #555;
@@ -385,12 +393,15 @@
 }
 
 .btn {
-  padding: 8px 15px;
-  border-radius: 4px;
+  padding: 10px 16px;
+  border-radius: 6px;
   cursor: pointer;
   font-weight: 500;
   border: 1px solid transparent;
   transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-primary {
@@ -398,10 +409,19 @@
   color: white;
 }
 
-.btn-primary:hover {
+.btn-primary:hover:not([disabled]) {
   background-color: #0069d9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
+.btn-primary[disabled] {
+  background-color: #7fb6ff;
+  cursor: not-allowed;
+}
+
+
+
 .btn-secondary {
   background-color: #6c757d;
   color: white;
@@ -409,20 +429,70 @@
 
 .btn-secondary:hover {
   background-color: #5a6268;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.mt-3 {
+  margin-top: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1.5rem;
+}
+
+@keyframes slideIn {
+  from { right: -400px; }
+  to { right: 0; }
+}
+
+@keyframes slideOut {
+  from { right: 0; }
+  to { right: -400px; }
+}
+
+.offcanvas.show {
+  animation: slideIn 0.3s forwards;
+}
+
+.offcanvas:not(.show) {
+  animation: slideOut 0.3s forwards;
+}
+
+
 .form-control {
-  display: block;
-  width: 100%;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #495057;
-  background-color: #fff;
-  background-clip: padding-box;
+  border-radius: 6px;
   border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  padding: 10px 12px;
+  transition: all 0.2s ease;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+}
+
+textarea.form-control {
+  min-height: 120px;
+  resize: vertical;
+}
+.custom-section-form {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px dashed #ddd;
+}
+
+.custom-section-form h4 {
+  margin-bottom: 15px;
+  color: #444;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .mb-3 {
@@ -438,7 +508,7 @@
   background-color: white;
   box-shadow: -5px 0 15px rgba(0,0,0,0.1);
   z-index: 1050;
-  transition: right 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
   overflow-y: auto;
 }
 
@@ -450,27 +520,47 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 15px 20px;
-  border-bottom: 1px solid #ddd;
+  padding: 18px 20px;
+  border-bottom: 1px solid #eaeaea;
+  background-color: #f8f9fa;
 }
 
 .offcanvas-title {
   font-size: 18px;
   font-weight: 600;
+  color: #333;
 }
 
 .close-btn {
   background: none;
   border: none;
-  font-size: 24px;
   cursor: pointer;
   color: #666;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.close-btn:hover {
+  background-color: #f1f1f1;
+  color: #333;
+  transform: rotate(90deg);
 }
 
 .offcanvas-body {
   padding: 20px;
 }
 
+.section-templates-container {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
 .section-template {
   padding: 15px;
   border: 1px solid #ddd;
@@ -478,11 +568,30 @@
   margin-bottom: 15px;
   cursor: pointer;
   transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.section-template:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 0;
+  background-color: #007bff;
+  transition: height 0.3s ease;
 }
 
 .section-template:hover {
   background-color: #f8f9fa;
   border-color: #007bff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+.section-template:hover:before {
+  height: 100%;
 }
 
 .section-template-title {
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.html
index f27d129..9919914 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.html
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.html
@@ -47,31 +47,40 @@
       </div>
     </div>
   </div>
-  <div class="editor-form" *ngIf="editMode">
+  <!-- <div class="editor-form" *ngIf="editMode">
     <div *ngIf="editMode === 'section' && selectedSection && selectedPage">
       <div class="editor-title">Edit Section: {{ selectedSection.type }}</div>
       <div class="form-group">
         <label class="form-label">Content</label>
-        <textarea class="form-textarea" [(ngModel)]="selectedSection.content"></textarea>
+        <textarea 
+          class="form-textarea" 
+          [(ngModel)]="selectedSection.content"></textarea>
       </div>
       <div class="form-actions">
         <button class="btn btn-secondary" (click)="cancelEdit()">Cancel</button>
         <button class="btn btn-primary" (click)="saveEdit()">Save Changes</button>
       </div>
     </div>
-  </div>
-  <div class="offcanvas" [class.show]="showOffcanvas">
+  </div> -->
+  <!-- Replace your current offcanvas with these two separate ones -->
+
+  <!-- Add Section Offcanvas -->
+  <div class="offcanvas add-section" [class.show]="showAddSectionOffcanvas">
     <div class="offcanvas-header">
       <div class="offcanvas-title">Add Section</div>
-      <button class="close-btn" (click)="closeOffcanvas()">&times;</button>
+      <button class="close-btn" (click)="closeAddSectionOffcanvas()">
+        <i class="fas fa-times"></i>
+      </button>
     </div>
     <div class="offcanvas-body">
-      <div class="section-template" *ngFor="let template of sectionTemplates"
-        (click)="addSectionFromTemplate(template)">
-        <div class="section-template-title">{{ template.type }}</div>
-        <div class="section-template-desc">{{ template.description }}</div>
+      <div class="section-templates-container">
+        <div class="section-template" *ngFor="let template of sectionTemplates"
+          (click)="addSectionFromTemplate(template)">
+          <div class="section-template-title">{{ template.type }}</div>
+          <div class="section-template-desc">{{ template.description }}</div>
+        </div>
       </div>
-      <div class="form-group" style="margin-top: 20px;">
+      <div class="custom-section-form">
         <h4>Custom Section</h4>
         <div class="mb-3">
           <label class="form-label">Section Type</label>
@@ -88,6 +97,32 @@
       </div>
     </div>
   </div>
+
+  <!-- Edit Section Offcanvas -->
+  <div class="offcanvas edit-section" [class.show]="showEditSectionOffcanvas">
+    <div class="offcanvas-header">
+      <div class="offcanvas-title">Edit Section: {{ selectedSection?.type }}</div>
+      <button class="close-btn" (click)="closeEditSectionOffcanvas()">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    <div class="offcanvas-body">
+      <div class="form-group">
+        <label class="form-label">Section Type</label>
+        <input type="text" class="form-control" [(ngModel)]="selectedSection.type" *ngIf="selectedSection"
+          placeholder="Section type">
+      </div>
+      <div class="form-group mt-3">
+        <label class="form-label">Content</label>
+        <textarea class="form-control" [(ngModel)]="selectedSection && selectedSection.content" rows="8"
+          placeholder="Enter content"></textarea>
+      </div>
+      <div class="form-actions mt-4">
+        <button class="btn btn-secondary" (click)="closeEditSectionOffcanvas()">Cancel</button>
+        <button class="btn btn-primary" (click)="saveSection()">Save Changes</button>
+      </div>
+    </div>
+  </div>
   <div class="modal" [class.show]="showAddChildModal">
     <div class="modal-backdrop" *ngIf="showAddChildModal" (click)="closeAddChildModal()"></div>
     <div class="modal-dialog" *ngIf="showAddChildModal">
@@ -123,11 +158,13 @@
           <i class="node-icon" [class]="getNodeIcon(page)"></i>
           <span class="node-title">{{ page.name }}</span>
         </div>
-        <div class="sections-container" cdkDropList [cdkDropListData]="page.sections">
+        <div class="sections-container" cdkDropList [cdkDropListData]="page.sections"
+          (cdkDropListDropped)="onSectionDrop($event)">
           <!-- Update the section card template within the #pageTemplate -->
           <!-- Section card with improved hover button placement -->
-          <div class="section-card" *ngFor="let section of page.sections; let i = index" cdkDrag
+          <div class="section-card" *ngFor="let section of page.sections; let i = index" cdkDrag [cdkDragData]="section"
             (click)="selectSection(section); $event.stopPropagation()">
+
             <div class="section-title">{{ section.type }}</div>
             <div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
             <div class="section-actions">
@@ -139,7 +176,7 @@
               </button>
             </div>
             <!-- Repositioned add button that appears on hover -->
-            <div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
+            <div class="add-section-hover-btn" (click)="openAddSectionOffcanvas(page, i, $event)" title="Add Section">
               <i class="fas fa-plus"></i>
             </div>
           </div>
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts
index 870fb78..70105bd 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/TreeNode/tree-node.component.ts
@@ -73,6 +73,11 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   currentSectionIndex: number = -1;
 
+  //off canvas 
+  showAddSectionOffcanvas = false;
+  showEditSectionOffcanvas = false;
+
+
 
   // Section templates with better descriptions
   sectionTemplates = [
@@ -131,8 +136,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     private siteTreeService: SiteTreeservice,
     private route: ActivatedRoute,
-    private toastr: ToastrService
-
+    private toastr: ToastrService,
 
   ) { }
 
@@ -157,6 +161,9 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnDestroy(): void {
+    // Remove event listener if component is destroyed while offcanvas is open
+    document.removeEventListener('click', this.handleOutsideClick);
+
     // Auto-save changes before component destruction
     if (this.hasUnsavedChanges) {
       this.saveTreeData(true);
@@ -622,6 +629,80 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
     this.currentSectionIndex = -1;
   }
 
+  openAddSectionOffcanvas(page: Page, sectionIndex: number = -1, event?: Event): void {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.currentParentPage = page;
+    this.currentSectionIndex = sectionIndex;
+    this.customSectionType = '';
+    this.customSectionContent = '';
+    this.showAddSectionOffcanvas = true;
+
+    // Listen for clicks outside offcanvas
+    setTimeout(() => {
+      document.addEventListener('click', this.handleOutsideClick);
+    }, 10);
+  }
+
+  // Open edit section offcanvas
+  openEditSectionOffcanvas(section: Section, page: Page, event: Event): void {
+    event.stopPropagation();
+    this.selectedSection = { ...section }; // Clone to avoid direct mutation until save
+    this.currentParentPage = page;
+    this.editMode = 'section';
+    this.showEditSectionOffcanvas = true;
+
+    // Listen for clicks outside offcanvas
+    setTimeout(() => {
+      document.addEventListener('click', this.handleOutsideClick);
+    }, 10);
+  }
+
+  handleOutsideClick = (event: MouseEvent): void => {
+    const addOffcanvas = document.querySelector('.offcanvas.add-section');
+    const editOffcanvas = document.querySelector('.offcanvas.edit-section');
+
+    if (addOffcanvas && !addOffcanvas.contains(event.target as Node) && this.showAddSectionOffcanvas) {
+      this.closeAddSectionOffcanvas();
+    }
+
+    if (editOffcanvas && !editOffcanvas.contains(event.target as Node) && this.showEditSectionOffcanvas) {
+      this.closeEditSectionOffcanvas();
+    }
+  }
+
+  closeAddSectionOffcanvas(): void {
+    this.showAddSectionOffcanvas = false;
+    this.currentParentPage = null;
+    this.currentSectionIndex = -1;
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  // Close edit section offcanvas
+  closeEditSectionOffcanvas(): void {
+    this.showEditSectionOffcanvas = false;
+    this.selectedSection = null;
+    this.editMode = null;
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  // Save section changes
+  saveSection(): void {
+    if (this.selectedSection && this.currentParentPage) {
+      // Find the section in the parent page
+      const index = this.currentParentPage.sections.findIndex(s =>
+        s.type === this.selectedSection.type && s.content === this.selectedSection.content);
+
+      if (index !== -1) {
+        // Update the section with edited values
+        this.currentParentPage.sections[index] = { ...this.selectedSection };
+        this.hasUnsavedChanges = true;
+      }
+    }
+    this.closeEditSectionOffcanvas();
+  }
+
   // Add section from a template
   addSectionFromTemplate(template: any): void {
     if (this.currentParentPage) {
@@ -651,20 +732,23 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
   // Similar update for addCustomSection
   addCustomSection(): void {
     if (this.currentParentPage && this.customSectionType) {
-      const newSection: Section = {
-        type: this.customSectionType,
-        content: this.customSectionContent || ''
-      };
-
-      // Insert at specific position if provided, otherwise add to end
-      if (this.currentSectionIndex >= 0) {
-        this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
+      // If in edit mode, update the selected section
+      if (this.editMode === 'section' && this.selectedSection) {
+        this.selectedSection.type = this.customSectionType;
+        this.selectedSection.content = this.customSectionContent || '';
       } else {
-        this.currentParentPage.sections.push(newSection);
-      }
+        // Otherwise, create a new section
+        const newSection: Section = {
+          type: this.customSectionType,
+          content: this.customSectionContent || ''
+        };
 
-      if (!this.availableSectionTypes.includes(this.customSectionType)) {
-        this.availableSectionTypes.push(this.customSectionType);
+        // Insert at specific position if provided, otherwise add to end
+        if (this.currentSectionIndex >= 0) {
+          this.currentParentPage.sections.splice(this.currentSectionIndex + 1, 0, newSection);
+        } else {
+          this.currentParentPage.sections.push(newSection);
+        }
       }
 
       this.hasUnsavedChanges = true;
@@ -673,10 +757,10 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   // Edit section
+  // Edit section - modify this function
   editSection(section: Section, event: Event): void {
     event.stopPropagation();
-    this.selectedSection = section;
-    this.editMode = 'section';
+    this.openEditSectionOffcanvas(section, this.selectedPage, event);
   }
 
   // Cancel edit
@@ -762,6 +846,8 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
       );
     }
 
+    // Force change detection
+    this.selectedPage = { ...this.selectedPage! };
     this.hasUnsavedChanges = true;
   }
 
@@ -795,7 +881,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
 
           if (!silent) {
             // alert('Site structure saved successfully');
-            this.toastr.success("Site structure saved successfully");
+            this.toastr.success(`Site structure saved successfully`);
 
           }
         },
@@ -804,9 +890,7 @@ export class TreeNodeComponent implements OnInit, OnDestroy, AfterViewInit {
           console.error('Error saving data:', err);
 
           if (!silent) {
-            // alert('Failed to save site structure');
-            this.toastr.error("Failed to save site structure");
-
+            alert('Failed to save site structure');
           }
         }
       });
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 3.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 3.zip
new file mode 100644
index 0000000..5583374
Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 3.zip differ
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts
index 30cbbf7..f28bbf8 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts
@@ -1,3350 +1,214 @@
 export const COMMON_CSS = `
-/* ===== RESET & BASE ===== */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
 body {
-  font-family: 'Segoe UI', sans-serif;
-  background: #f9f9f9;
-  color: #222;
-  line-height: 1.6;
-}
-
-/* 🧱 Extended for Mega Navbar Dropdown */
-.mega-navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 40px;
-  background: #fff;
-  border-bottom: 1px solid #eee;
-  position: relative;
-}
-
-.nav-1 {
-  display: flex;
-  list-style: none;
-  gap: 20px;
-  position: relative;
-}
-
-.nav-1 li {
-  position: relative;
-}
-
-.nav-1 li a {
-  text-decoration: none;
-  color: #222;
-  font-weight: 500;
-  padding: 8px 12px;
-  display: inline-block;
-}
-
-.nav-1 li:hover > .dropdown-content {
-  display: block;
-}
-
-/* Dropdown content for mega menu */
-.dropdown-content {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background: white;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  z-index: 999;
-  width: 800px;
-}
-
-.dropdown-columns {
-  display: flex;
-  gap: 30px;
-}
-
-.column {
-  flex: 1;
-}
-
-.column h4 {
-  margin-bottom: 10px;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.column ul {
-  list-style: none;
-  padding: 0;
-}
-
-.column ul li {
-  margin-bottom: 12px;
-}
-
-.column ul li span {
-  display: inline-block;
-  margin-right: 8px;
-}
-
-.column ul li strong {
-  display: block;
-  font-weight: bold;
-  margin-bottom: 2px;
-}
-
-.column ul li p {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.footer-link {
-  margin-top: 15px;
-}
-
-.footer-link a {
-  color: #007bff;
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.footer-link a:hover {
-  text-decoration: underline;
-}
-
-/* Responsive */
-@media (max-width: 960px) {
-  .dropdown-columns {
-    flex-direction: column;
-  }
-
-  .dropdown-content {
-    width: 100%;
-    left: 0;
-    right: 0;
-  }
-
-  .mega-navbar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .nav-1 {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .navbar-actions {
-    margin-top: 10px;
-  }
-}
-
-/* ======= NAVBAR ======= */
-.navbar-1 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 40px;
-  background: #fff;
-  border-bottom: 1px solid #eee;
-}
-
-.logo-1 {
-  width: 100px;
-  height: 30px;
-  background: #ccc;
-}
-
-.nav-1 {
-  display: flex;
-  gap: 20px;
-  list-style: none;
-}
-
-.nav-1 li a {
-  text-decoration: none;
-  color: #222;
-  font-weight: 500;
-}
-
-.join-btn {
-  background: black;
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* ======= HERO / HEADER SECTION ======= */
-.hero-header {
-  text-align: center;
-  padding: 60px 20px;
-  background: #fdfdfd;
-}
-
-.hero-header h1 {
-  font-size: 36px;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.hero-header p {
-  font-size: 16px;
-  color: #555;
-  margin-bottom: 30px;
-  max-width: 700px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.cta-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
-}
-
-.cta-buttons button {
-  padding: 10px 20px;
-  background: black;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-  /* ✅ Generic button fix */
-button {
-  font-size: 15px;
-  padding: 10px 20px;
-  background-color: black;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: #333;
-}
-
-.cta-buttons button,
-.footer-1 button,
-.testimonial-section button {
-  font-size: 15px;
-  padding: 10px 20px;
-}
-
-
-/* ======= IMAGE GRID ======= */
-.image-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 15px;
-  padding: 40px;
-}
-
-.image-grid div {
-  background: #ddd;
-  aspect-ratio: 1;
-  border-radius: 4px;
-}
-
-/* ======= BODY SECTION (2 COLUMN) ======= */
-.feature-section {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 60px 40px;
-  align-items: center;
-  gap: 40px;
-}
-
-.feature-section img {
-  width: 300px;
-  height: 300px;
-  background: #ccc;
-  object-fit: cover;
-}
-
-.feature-content {
-  flex: 1;
-}
-
-.feature-content h2 {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 15px;
-}
-
-.feature-content p {
-  font-size: 16px;
-  color: #444;
-  margin-bottom: 20px;
-}
-
-.feature-content ul {
-  list-style: none;
-  padding: 0;
-}
-
-.feature-content ul li {
-  padding-left: 20px;
-  position: relative;
-  margin-bottom: 10px;
-}
-
-.feature-content ul li::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  color: #007bff;
-}
-
-/* ======= TESTIMONIAL SECTION ======= */
-/* 🔲 Main Section */
-.testimonial-section {
-  padding: 80px 40px;
-  text-align: center;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  color: #fff;
-}
-
-/* 🔳 Optional Background Overlay */
-.testimonial-section::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 0;
-}
-
-.testimonial-section > * {
-  position: relative;
-  z-index: 1;
-}
-
-/* 🏷️ Heading */
-.testimonial-heading {
-  font-size: 2rem;
-  font-weight: bold;
-  margin-bottom: 10px;
-  letter-spacing: 1px;
-}
-
-.testimonial-subtitle {
-  color: #ddd;
-  margin-bottom: 40px;
-  font-size: 1rem;
-}
-
-/* 🧑‍💼 Grid Layout */
-.testimonial-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 30px;
-  justify-content: center;
-}
-
-/* 📦 Testimonial Card */
-.testimonial-card {
-  background: #fff;
-  color: #222;
-  padding: 25px;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-  max-width: 320px;
-  margin: 0 auto;
-  text-align: center;
-  transition: transform 0.3s ease;
-}
-
-.testimonial-card:hover {
-  transform: translateY(-5px);
-}
-
-/* 🖼️ Avatar Wrapper with fallback */
-.testimonial-avatar {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background-color: #ccc;
-  overflow: hidden;
-  margin: 0 auto 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.testimonial-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-/* 🗣️ Quote Text */
-.testimonial-card blockquote {
-  font-style: italic;
-  color: #444;
-  margin: 15px 0;
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
-
-/* ⭐ Star Ratings */
-.stars {
-  color: #f39c12;
-  font-size: 1.2rem;
-  margin-bottom: 8px;
-}
-  /* 🔲 Placeholder block */
-.profile {
-  width: 40px;
-  height: 40px;
-  background: #ccc;
-  border-radius: 50%;
-  margin: 0 auto 10px;
-}
-
-/* 🧑 Avatar image */
-.avatar {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  object-fit: cover;
-  display: block;
-  margin: 0 auto;
-}
-
-/* 🧾 Author Info */
-.author {
-  margin-top: 15px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  color: #333;
-}
-
-/* 🟡 CTA Button */
-.testimonial-cta {
-  display: inline-block;
-  margin-top: 40px;
-  background: #ffc107;
-  color: #000;
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: 0.3s ease;
-}
-
-.testimonial-cta:hover {
-  background: #e6ac00;
-}
-
-/* 📞 Contact Info */
-.testimonial-contact {
-  margin-top: 30px;
-  font-size: 14px;
-  color: #ccc;
-}
-
-.testimonial-contact p {
-  margin: 5px 0;
-}
-
-/* 📱 Responsive Adjustments */
-@media (max-width: 768px) {
-  .testimonial-heading {
-    font-size: 1.5rem;
-  }
-
-  .testimonial-subtitle {
-    font-size: 0.95rem;
-  }
-
-  .testimonial-card {
-    max-width: 100%;
-  }
-
-  .testimonial-grid {
-    gap: 20px;
-  }
-
-  .testimonial-cta {
-    width: 100%;
-    max-width: 300px;
-  }
-}
-
-
-
-/* ======= FOOTER ======= */
-.footer-1 {
-  background: #f8f8f8;
-  padding: 40px 20px;
-  font-size: 15px;
-}
-
-.footer-top,
-.footer-bottom {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.footer-nav,
-.footer-legal {
-  display: flex;
-  gap: 15px;
-  list-style: none;
-  flex-wrap: wrap;
-}
-
-.footer-social {
-  display: flex;
-  gap: 10px;
-}
-
-.footer-social div {
-  width: 24px;
-  height: 24px;
-  background: #bbb;
-  border-radius: 50%;
-}
-
-/* Reset */
-* {
-  box-sizing: border-box;
   margin: 0;
   padding: 0;
-}
-
-body, html {
-  width: 100%;
-  font-family: 'Segoe UI', sans-serif;
-}
-
-/* 🧱 All section wrapper spacing */
-section, header, footer, nav, div {
-  margin-bottom: 30px;
-}
-
-/* Layout blocks stay inside */
-.canvas-page {
-  overflow-wrap: break-word;
-}
-
-/* Prevent buttons from floating off */
-button {
-  display: inline-block;
-  white-space: nowrap;
-}
-
-/* Keep max-width structure */
-.container,
-.feature-section,
-.hero-header {
-  max-width: 100%;
-  width: 100%;
-}
-
-.cta-section {
-  text-align: center;
-  padding: 60px 20px;
-}
-
-.cta-button {
-  background: black;
-  color: white;
-  padding: 12px 24px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: inline-block;
-  margin-top: 20px;
-  text-decoration: none;
-}
-
-.hero-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 40px;
-  padding: 40px;
-  background-color: #ffffff;
   font-family: sans-serif;
-  flex-wrap: wrap;
-}
-
-.hero-left {
-  flex: 1;
-  min-width: 300px;
-}
-
-.hero-right {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-  justify-content: center;
-  background-color: #e5e5e5;
-}
-
-.hero-right-img {
-  width: 100%;
-  height: auto;
-}
-
-.hero-buttons {
-  margin-top: 20px;
-  display: flex;
-  gap: 16px;
-}
-
-.btn {
-  padding: 10px 20px;
-  font-weight: 500;
-  text-decoration: none;
-  border-radius: 4px;
-  transition: all 0.3s ease;
-}
-
-.btn-filled {
-  background-color: #000;
-  color: #fff;
-}
-
-.btn-outlined {
   background-color: #fff;
-  color: #000;
-  border: 1px solid #000;
+  color: #111;
 }
 
-.hero-centered {
-  background: #ffffff;
-  font-family: sans-serif;
-  text-align: center;
-  padding: 60px 20px;
-}
-
-.hero-heading {
-  font-size: 32px;
-  font-weight: bold;
-  color: #000000;
-  margin-bottom: 20px;
-}
-
-.hero-description {
-  font-size: 16px;
-  color: #333333;
-  max-width: 600px;
-  margin: 0 auto 30px;
-}
-
-.btn-filled {
-  padding: 10px 20px;
-  background-color: #000000;
-  color: #ffffff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-right: 10px;
-}
-
-.btn-outlined {
-  padding: 10px 20px;
-  background-color: #ffffff;
-  color: #000000;
-  border: 1px solid #000000;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.hero-image {
-  width: 100%;
-  height: auto;
-  display: block;
-  margin-top: 40px;
-  background-color: #e5e5e5;
-}
-
-
-/* ======= HERO SECTION (Two Column) ======= */
-.feature-section {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 60px 40px;
-  gap: 40px;
-}
-
-.feature-content {
-  flex: 1;
-  min-width: 300px;
-}
-
-.feature-content h2 {
-  font-size: 36px;
-  font-weight: bold;
-  margin-bottom: 15px;
-}
-
-.feature-content p {
-  font-size: 16px;
-  color: #444;
-  margin-bottom: 20px;
-}
-
-.cta-buttons {
-  display: flex;
-  gap: 15px;
-  margin-top: 20px;
-  flex-wrap: wrap;
-}
-
-.cta-buttons a {
-  padding: 10px 20px;
-  border-radius: 6px;
-  text-decoration: none;
-  font-weight: 500;
-  transition: 0.3s ease;
-}
-
-.cta-buttons a:hover {
-  opacity: 0.9;
-}
-
-.feature-section img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  display: block;
-}
-
-/* ======= PARTNER LOGOS ======= */
-.feature-content .partners-logos {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
-}
-
-.feature-content .partners-logos img {
-  height: 24px;
-  object-fit: contain;
-}
-
-/* ======= DECORATIONS ======= */
-.decoration {
-  width: 50px;
-  height: 50px;
-  position: absolute;
-  z-index: 0;
-  opacity: 0.4;
-}
-
-.decoration.circle {
-  border-radius: 50%;
-}
-
-.decoration.abstract-green {
-  clip-path: polygon(0 0, 100% 20%, 80% 100%, 0 100%);
-}
-
-.decoration.abstract-orange {
-  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
-}
-
-/* ======= SCROLL INDICATOR ======= */
-.scroll-indicator {
-  font-size: 20px;
-  position: absolute;
-  animation: bounce 2s infinite;
-  color: #666;
-}
-
-.scroll-indicator.bottom-left {
-  bottom: 20px;
-  left: 20px;
-}
-
-.scroll-indicator.bottom-right {
-  bottom: 20px;
-  right: 20px;
-}
-
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(8px); }
-}
-
-.hero-left-cards {
-  background: radial-gradient(circle, #1a1f1c, #2d3430);
-  color: white;
-  font-family: sans-serif;
-  padding: 60px 40px;
-}
-
-.hero-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-  align-items: center;
-}
-
-.hero-left {
-  flex: 1;
-  min-width: 300px;
-}
-
-.hero-logo {
-  width: 48px;
-  margin-bottom: 10px;
-}
-
-.hero-label {
-  font-size: 14px;
-  text-transform: uppercase;
-  color: #aaa;
-}
-
-.hero-heading {
-  font-size: 36px;
-  font-weight: bold;
-  margin-top: 10px;
-}
-
-.hero-right {
-  flex: 1;
-  display: grid;
-  gap: 20px;
-  min-width: 300px;
-}
-
-.hero-card {
-  background: #1c1f1e;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.hero-card img.card-img {
-  width: 100%;
-  border-radius: 4px;
-  margin-bottom: 10px;
-}
-
-.card-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 10px;
-}
-
-.btn-filled {
-  background: #506c4f;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  text-decoration: none;
-}
-
-.btn-outlined {
-  border: 1px solid #fff;
-  background: transparent;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 4px;
-  text-decoration: none;
-}
-
-.hero-centered-art {
-  text-align: center;
-  background: #fff;
-  padding: 80px 20px;
-  position: relative;
-}
-
-.hero-centered-art .hero-heading {
-  font-size: 36px;
-  color: #333;
-  font-family: sans-serif;
-  max-width: 700px;
-  margin: 0 auto 30px;
-  line-height: 1.3;
-}
-
-.hero-centered-art .btn-teal {
-  background-color: #00b3b3;
-  color: white;
-  padding: 12px 24px;
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: 500;
-  display: inline-block;
-}
-
-.hero-art-left {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100px;
-}
-
-.hero-art-right {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 100px;
-}
-
-.subsection-centered {
-  text-align: center;
-  padding: 60px 20px;
-  max-width: 700px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-.subsection-centered h2 {
-  font-size: 28px;
-  margin-bottom: 15px;
-}
-
-.subsection-centered p {
-  font-size: 16px;
-  color: #444;
-}
-
-.testimonial-section.simple-testimonial {
-  padding: 60px 20px;
-  text-align: center;
-  background: #fff;
-  color: #222;
-}
-
-.testimonial-logo img {
-  height: 40px;
-  margin-bottom: 20px;
-}
-
-.testimonial-quote {
-  font-size: 20px;
-  font-style: italic;
-  margin-bottom: 30px;
-  color: #444;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.testimonial-author {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.testimonial-author .author-img {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: #ccc;
-  object-fit: cover;
-}
-
-.testimonial-author .author-details {
-  font-size: 14px;
-  color: #555;
-  line-height: 1.4;
-}
-.testimonial-section.dark {
-  background: #111;
-  color: #fff;
-  padding: 60px 20px;
-  text-align: center;
-}
-
-.testimonial-section.dark .testimonial-heading {
-  font-size: 32px;
-  margin-bottom: 30px;
-}
-
-.testimonial-section.dark .testimonial-grid {
-  display: flex;
-  gap: 30px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.testimonial-section.dark .testimonial-card {
-  background: #1a1a1a;
-  padding: 30px;
-  border-radius: 12px;
-  max-width: 350px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-}
-
-.testimonial-section.dark .stars {
-  font-size: 18px;
-  color: gold;
-  margin-bottom: 10px;
-}
-
-.testimonial-section.dark .author {
-  margin-top: 20px;
-}
-
-.testimonial-section.dark .author .avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-bottom: 10px;
-}
-.client-testimonial-section {
-  padding: 60px 20px;
-  background-color: #111;
-  color: #fff;
-  font-family: sans-serif;
-  position: relative;
-  text-align: center;
-}
-
-.testimonial-bg {
-  position: absolute;
-  inset: 0;
-  background-size: cover;
-  background-position: center;
-  opacity: 0.1;
-  z-index: -1;
-}
-
-.testimonial-logo {
-  width: 80px;
-  margin-bottom: 20px;
-}
-
-.testimonial-title {
-  font-size: 32px;
-  margin-bottom: 40px;
-}
-
-.testimonial-cards {
-  display: flex;
-  gap: 30px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.testimonial-card {
-  background: #222;
-  border-radius: 8px;
-  padding: 20px;
-  max-width: 300px;
-}
-
-.testimonial-card .avatar {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.testimonial-card blockquote {
-  font-style: italic;
-  margin: 20px 0;
-}
-
-.testimonial-card .author {
-  font-size: 14px;
-  color: #aaa;
-}
-
-.testimonial-card .stars {
-  color: gold;
-  font-size: 18px;
-}
-
-.testimonial-cta .btn-filled {
-  margin-top: 30px;
-  background: teal;
-  color: white;
-  padding: 12px 24px;
-  text-decoration: none;
-  border-radius: 4px;
-}
-
-.testimonial-contact p {
-  margin-top: 10px;
-}
-
-.testimonial-landing {
-  padding: 60px 20px;
-  text-align: center;
-  font-family: sans-serif;
-}
-
-.testimonial-landing.orange {
-  background-color: #fff3e0;
-  color: #bf360c;
-}
-
-.landing-title {
-  font-size: 32px;
-  margin-bottom: 10px;
-}
-
-.landing-description {
-  font-size: 16px;
-  margin-bottom: 40px;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.testimonial-grid {
-  display: flex;
-  gap: 30px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.testimonial-box {
-  background: #ffffff;
-  border: 1px solid #eee;
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 300px;
-  box-shadow: 0 0 5px rgba(0,0,0,0.05);
-}
-
-.testimonial-box.highlight {
-  background: #ffe0b2;
-  border-color: #ff9800;
-}
-
-.testimonial-box blockquote {
-  font-style: italic;
-  margin-bottom: 16px;
-}
-
-.author-name {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-/* Team secction */
-.team-slider-section {
-  text-align: center;
-  padding: 40px;
-  font-family: sans-serif;
-}
-
-.team-slider-section h2 {
-  font-size: 32px;
-  margin-bottom: 10px;
-}
-
-.team-slider-section p {
-  color: gray;
-}
-
-.team-slider {
-  margin-top: 40px;
-  display: flex;
-  justify-content: center;
-  gap: 20px;
-  overflow-x: auto;
-  padding-bottom: 10px;
-}
-
-.team-member {
-  min-width: 300px;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  padding: 20px;
-  background: #fff;
-  flex-shrink: 0;
-  text-align: center;
-}
-
-.team-member img {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  border-radius: 50%;
-  margin-bottom: 15px;
-}
-
-.team-member h4 {
-  margin: 10px 0 5px;
-}
-
-.team-member .social-icons a {
-  margin: 0 5px;
-  color: #555;
-  text-decoration: none;
-  font-size: 16px;
-}
-
-.team-member .profile-link {
-  color: #007BFF;
-  text-decoration: underline;
-  display: inline-block;
-  margin-top: 10px;
-}
 .team-section {
-  padding: 60px 20px;
-  background: #fff;
   text-align: center;
-}
-.team-member {
-  display: inline-block;
-  margin: 20px;
-}
-.team-member img {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-}
-.team-member .name {
-  margin-top: 10px;
-  font-weight: bold;
-}
-.team-member .role {
-  color: #777;
+  padding: 60px 20px;
+  max-width: 1200px;
+  margin: auto;
 }
 
-/* === Team Showcase === */
-#team-showcase {
-  padding: 60px 20px;
-  text-align: center;
-  background-color: #fff;
+.subheading {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 5px;
 }
-#team-showcase .heading {
-  font-size: 2.5rem;
+
+.heading {
+  font-size: 36px;
+  font-weight: 700;
   margin-bottom: 10px;
 }
-#team-showcase .subtitle {
-  color: #666;
-  margin-bottom: 40px;
+
+.description {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 50px;
 }
-#team-showcase .group-list {
+
+.team-grid {
   display: flex;
-  flex-direction: column;
-  gap: 50px;
-}
-#team-showcase .group {
-  padding: 0 10px;
-}
-#team-showcase .group .groupName {
-  font-size: 1.6rem;
-  font-weight: 600;
-  margin-bottom: 20px;
-}
-#team-showcase .group .team-member-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 20px;
-  justify-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 40px;
 }
+
 .team-member {
-  text-align: center;
-}
-.team-member img {
-  width: 140px;
-  height: 140px;
-  object-fit: cover;
-  border-radius: 50%;
-  margin-bottom: 10px;
-}
-.team-member .name {
-  font-weight: bold;
-}
-.team-member .role {
-  font-size: 0.95rem;
-  color: #777;
-}
-.team-showcase {
-  padding: 60px 20px;
-  background: #f9f9f9;
-  text-align: center;
-}
-
-.team-showcase .group {
-  margin-bottom: 40px;
-}
-
-.team-showcase .group h3 {
-  font-size: 1.8rem;
-  margin-bottom: 20px;
-}
-
-.team-showcase .member-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 20px;
-  justify-items: center;
-}
-
-.team-showcase .member {
-  background: white;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0,0,0,0.05);
-  max-width: 200px;
-}
-
-.team-showcase .member img {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  border-radius: 50%;
-  margin-bottom: 10px;
-}
-
-.team-showcase .member .name {
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.team-showcase .member .role {
-  font-size: 0.9rem;
-  color: #777;
-}
-
-
-/* === Team Grid Section === */
-#team-grid {
-  padding: 60px 20px;
-  background-color: #f9f9f9;
-  text-align: center;
-}
-#team-grid .tag {
-  text-transform: uppercase;
-  font-weight: 600;
-  color: #ff6600;
-  margin-bottom: 10px;
-}
-#team-grid .heading {
-  font-size: 2.2rem;
-  margin-bottom: 10px;
-}
-#team-grid .description {
-  font-size: 1.1rem;
-  color: #666;
-  margin-bottom: 40px;
-}
-#team-member-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 30px;
-  justify-items: center;
-}
-.team-member {
-  background: white;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
   max-width: 250px;
   text-align: center;
 }
-.team-member img {
+
+.photo-placeholder {
   width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-.team-member .name {
-  font-weight: bold;
-  margin-top: 12px;
-}
-.team-member .description {
-  font-size: 0.95rem;
-  color: #555;
-  margin-top: 6px;
+  aspect-ratio: 1 / 1;
+  background-color: #ddd;
+  background-image: url('https://via.placeholder.com/100x100?text=Photo');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 40px;
+  border-radius: 5px;
+  margin-bottom: 15px;
 }
 
-
-/* === FAQ === */
-/* 🔲 Base Layout */
-.faq-section {
-  padding: 60px 20px;
-  max-width: 1200px;
-  margin: auto;
+.team-member h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 5px 0;
 }
 
-/*  Title and Subtitle */
-.faq-title {
-  font-size: 2rem;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.faq-subtitle {
-  font-size: 1rem;
+.role {
   color: #666;
-  margin-bottom: 30px;
-  text-align: center;
+  font-size: 14px;
+  margin-bottom: 10px;
 }
 
-/* 🔍 Search Bar */
-.faq-search {
-  padding: 12px 20px;
-  width: 100%;
-  max-width: 400px;
-  font-size: 16px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-  margin: 0 auto 40px;
-  display: block;
-}
-
-/* 📦 Illustration + List Wrapper */
-.faq-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-/* 🖼️ Left Illustration */
-.faq-illustration {
-  flex: 1 1 40%;
-  max-width: 400px;
-}
-
-.faq-image {
-  width: 100%;
-  height: auto;
-  object-fit: contain;
-}
-
-/* ❓ Q&A List */
-.faq-list {
-  flex: 1 1 55%;
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-}
-
-.faq-item {
-  border-bottom: 1px solid #eee;
-  padding-bottom: 15px;
-}
-
-/* 🗂️ Q & A */
-.faq-question {
-  font-weight: bold;
-  margin-top: 15px;
-  font-size: 1.1rem;
-}
-
-.faq-answer {
-  margin-bottom: 20px;
+.bio {
+  font-size: 13px;
   color: #444;
-  font-size: 0.95rem;
+  margin-bottom: 10px;
+}
+
+.social-icons i {
+  margin: 0 6px;
+  font-size: 16px;
+  color: #000;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.social-icons i:hover {
+  color: #0077b5; /* LinkedIn blue as hover */
 }
 
-/* 📱 Responsive */
 @media (max-width: 768px) {
-  .faq-content {
+  .team-grid {
     flex-direction: column;
     align-items: center;
   }
-
-  .faq-illustration,
-  .faq-list {
-    max-width: 100%;
-  }
-
-  .faq-title {
-    font-size: 1.5rem;
-  }
-
-  .faq-question {
-    font-size: 1rem;
-  }
 }
 
-/* === Logo Showcase === */
-.logo-showcase {
-  padding: 60px 20px;
-  text-align: center;
-}
-.logo-showcase img {
-  height: 40px;
-  margin: 10px 20px;
-  opacity: 0.8;
-}
-
-/* === HEADER === */
-header[ref="header-1"] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 40px;
-  background: #fff;
-  border-bottom: 1px solid #eee;
-}
-.logo-1 {
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-.nav-1 {
-  display: flex;
-  gap: 20px;
-  list-style: none;
-}
-.nav-1 li a {
-  text-decoration: none;
-  color: #333;
-  font-weight: 500;
-}
-.button-join, .button {
-  background: black;
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* === HERO SECTION === */
-.hero-section {
-  text-align: center;
-  padding: 80px 20px;
-  background: #fff;
-}
-.hero-heading {
-  font-size: 2.5rem;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-.hero-paragraph {
-  font-size: 1.2rem;
-  margin-bottom: 30px;
-  max-width: 700px;
-  margin-inline: auto;
-}
-.button-group {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
-}
-.button-group .button:first-child {
-  background-color: black;
-  color: white;
-}
-.button-group .button:last-child {
-  background-color: transparent;
-  border: 1px solid #222;
-  color: #222;
-}
-
-/* === IMAGE GRID === */
-.image-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 20px;
-  padding: 40px;
-  background: #fafafa;
-}
-.image-tile img {
-  width: 100%;
-  border-radius: 8px;
-  display: block;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-/* Header */
-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 40px;
-  background: #fff;
-  border-bottom: 1px solid #eee;
-}
-.logo-1 {
-  font-size: 20px;
-  font-weight: bold;
-}
-.nav-1 {
-  display: flex;
-  list-style: none;
-  gap: 20px;
-}
-.nav-1 li a {
-  text-decoration: none;
-  color: #333;
-  font-weight: 500;
-}
-.join-btn {
-  background: black;
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* Hero */
-.hero-section {
-  text-align: center;
-  padding: 80px 20px;
-  background: #f9f9f9;
-}
-.hero-heading {
-  font-size: 32px;
-  margin-bottom: 20px;
-}
-.hero-paragraph {
-  max-width: 600px;
-  margin: auto;
-  color: #555;
-}
-.button-group {
-  margin-top: 20px;
-}
-.button-group .join-btn {
-  margin-right: 10px;
-}
-
-/* Image Grid */
-.image-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 20px;
-  padding: 40px;
-}
-.image-tile img {
-  width: 100%;
-  border-radius: 8px;
-}
-/* ======= HERO SECTION CENTERED ======= */
-.hero-centered {
-  text-align: center;
-  padding: 60px 20px;
-  background: #fdfdfd;
-  max-width: 100%;
-}
-
-.hero-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: #007bff;
-  margin-bottom: 10px;
-  display: block;
-}
-
-.hero-heading {
-  font-size: 32px;
-  font-weight: bold;
-  margin-bottom: 20px;
-  color: #222;
-}
-
-.hero-description {
-  font-size: 16px;
-  color: #555;
-  max-width: 700px;
-  margin: 0 auto 30px auto;
-  line-height: 1.6;
-}
-
-.hero-centered .btn {
-  font-size: 15px;
-  padding: 10px 20px;
-  border-radius: 4px;
-  text-decoration: none;
-  display: inline-block;
-  margin: 0 8px;
-  cursor: pointer;
-}
-
-/* Button Filled */
-.btn-filled {
-  background-color: black;
-  color: white;
-  border: none;
-}
-
-.btn-filled:hover {
-  background-color: #333;
-}
-
-/* Button Outlined */
-.btn-outlined {
-  border: 1px solid black;
-  background: transparent;
-  color: black;
-}
-
-.btn-outlined:hover {
-  background-color: black;
-  color: white;
-}
-
-.text-dark {
-  color: #333333;
-}
-.text-blue {
-  color: #3b82f6;
-}
-.site-info {
-  margin-left: 20px;
-}
-
-.site-info h2 {
-  font-size: 18px;
-  margin-bottom: 5px;
-}
-
-.site-info p {
-  font-size: 14px;
-  color: #777;
-}
-.feature-list-section {
-  padding: 60px 20px;
-  background-color: #ffffff;
+/*Feature */
+body {
+  margin: 0;
   font-family: sans-serif;
-}
-
-.feature-heading {
-  font-size: 28px;
-  font-weight: bold;
-  color: #000;
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.feature-list-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 30px;
-}
-
-.feature-card {
-  background: white;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-  text-align: center;
-}
-
-.feature-card img {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 20px;
-}
-
-.feature-card h4 {
-  font-size: 18px;
-  margin-bottom: 10px;
-}
-
-.feature-card p {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 15px;
-}
-
-.text-button {
-  background: none;
-  color: #000;
-  font-weight: 500;
-  text-decoration: underline;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-.subscription-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 60px 40px;
-  background-color: #ffffff;
-  flex-wrap: wrap;
-  gap: 40px;
-}
-
-.subscription-heading {
-  font-size: 24px;
-  font-weight: bold;
-  color: #000000;
-  margin-bottom: 10px;
-}
-
-.subscription-description {
-  font-size: 14px;
-  color: #555555;
-  margin-bottom: 20px;
-}
-
-.subscription-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-width: 400px;
-  width: 100%;
-}
-
-.form-input {
-  padding: 10px 15px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-}
-
-.form-submit {
-  background-color: black;
-  color: white;
-  padding: 12px 20px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.form-submit:hover {
-  background-color: #222;
-}
-
-.subscription-form .disclaimer {
-  font-size: 12px;
-  color: #777;
-}
-
-.subscription-form .link-text {
-  color: #2563eb;
-  text-decoration: underline;
-  margin-left: 4px;
-  font-weight: 500;
-}
-.cta-gradient-section {
-  background: linear-gradient(90deg, #fbb034, #ffdd00);
-  text-align: center;
-  padding: 40px 20px;
-  border-radius: 10px;
-  font-family: sans-serif;
-}
-.contact-signup-section {
-  display: flex;
-  justify-content: space-between;
-  background-color: #fafafa;
-  padding: 40px 20px;
-  border-radius: 12px;
-  font-family: sans-serif;
-  flex-wrap: wrap;
-  gap: 30px;
-}
-
-.contact-form {
-  display: flex;
-  align-items: stretch;
-  gap: 0;
-  max-width: 300px;
-}
-
-.contact-form input[type="email"] {
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px 0 0 4px;
-  flex: 1;
-}
-
-.btn-filled-orange {
-  background-color: #f5a623;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 0 4px 4px 0;
-  cursor: pointer;
-}
-.hero-banner {
-  background-color: #fcd34d;
-  text-align: center;
-  padding: 80px 20px;
-  position: relative;
-  font-family: sans-serif;
-}
-
-.hero-subheading {
-  font-size: 24px;
-  color: #333333;
-  font-weight: 500;
-  margin-top: 10px;
-}
-
-.hero-button {
-  background-color: #1f2937;
-  color: #ffffff;
-  padding: 10px 24px;
-  border-radius: 999px;
-  font-weight: bold;
-  display: inline-block;
-  margin-top: 20px;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.decoration {
-  position: absolute;
-  z-index: 0;
-  opacity: 0.5;
-}
-
-.decoration.top-left {
-  top: 0;
-  left: 0;
-}
-
-.decoration.top-right {
-  top: 0;
-  right: 0;
-}
-.pricing-section {
-  padding: 60px 20px;
-  text-align: center;
-  background: #fff;
-  font-family: sans-serif;
-}
-
-.pricing-section .hero-label {
-  font-size: 14px;
-  color: #888;
-  margin-bottom: 10px;
-}
-
-.pricing-section .hero-heading {
-  font-size: 32px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.pricing-section .hero-description {
-  font-size: 16px;
-  color: #555;
-  max-width: 600px;
-  margin: 0 auto 40px;
-}
-
-.pricing-section .pricing-cards {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 30px;
-}
-
-.pricing-card {
-  background: #f9f9f9;
-  padding: 30px;
-  border-radius: 8px;
-  width: 280px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-  text-align: left;
-}
-
-.pricing-card h3 {
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-.pricing-card .price {
-  font-size: 24px;
-  font-weight: bold;
-  color: #000;
-  margin: 10px 0;
-}
-
-.pricing-card ul {
-  list-style: none;
-  padding: 0;
-  margin: 20px 0;
-}
-
-.pricing-card ul li {
-  margin-bottom: 10px;
-  color: #444;
-}
-
-.pricing-card .btn-filled {
-  display: inline-block;
-  padding: 10px 20px;
-  background: black;
-  color: white;
-  border-radius: 4px;
-  text-decoration: none;
-}
-.pricing-section-dark {
-  background: #111;
-  color: #fff;
-  padding: 60px 20px;
-  text-align: center;
-  font-family: sans-serif;
-}
-
-.pricing-section-dark .badge {
-  text-transform: uppercase;
-  color: #facc15;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.pricing-section-dark .title {
-  font-size: 32px;
-  margin-bottom: 10px;
-}
-
-.pricing-section-dark .description {
-  color: #ccc;
-  margin-bottom: 40px;
-  max-width: 700px;
-  margin-inline: auto;
-}
-
-.pricing-section-dark .card-grid {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.pricing-card {
-  background: #1a1a1a;
-  padding: 30px;
-  border-radius: 8px;
-  width: 280px;
-  text-align: left;
-}
-
-.pricing-card.highlight {
-  border: 2px solid #facc15;
-}
-
-.pricing-card .badge {
-  color: #facc15;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.pricing-card .price {
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0;
-  color: #fff;
-}
-
-.pricing-card ul {
-  list-style: none;
-  padding: 0;
-  color: #bbb;
-  margin-bottom: 20px;
-}
-
-.pricing-card ul li {
-  margin-bottom: 8px;
-}
-
-.pricing-card button {
-  padding: 10px 20px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-button.filled {
-  background: #facc15;
-  color: #000;
-  border: none;
-}
-
-button.outline {
-  background: transparent;
-  color: #facc15;
-  border: 1px solid #facc15;
-}
-
-button.light {
-  background: #fff;
+  background-color: #fff;
   color: #111;
-  border: none;
 }
-/* ======= PRICING SECTION ======= */
-.pricing-section {
+
+.feature-section {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
   padding: 60px 40px;
-  background: #fff;
-   text-align: center;
+  max-width: 1200px;
+  margin: auto;
+  gap: 40px;
 }
 
-.pricing-header {
-  text-align: center;
-  margin-bottom: 40px;
+.feature-text {
+  flex: 1 1 500px;
 }
 
-.pricing-header h2 {
-  font-size: 28px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.pricing-header p {
-  color: #666;
-  font-size: 16px;
-}
-
-.pricing-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content: center;
-  list-style: none;
-  padding: 0;
-  margin: 20px 0 40px 0;
-}
-
-.pricing-tabs li {
-  background: #f2f2f2;
-  padding: 8px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.pricing-tabs li:hover {
-  background: #ddd;
-}
-
-.pricing-hub {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.pricing-hub h3 {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.pricing-hub p {
-  color: #444;
-  font-size: 15px;
-  margin-bottom: 10px;
-}
-
-.hub-link {
-  color: #007bff;
-  font-weight: 500;
-  text-decoration: underline;
-}
-
-.pricing-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 20px;
-}
-
-.pricing-card {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 20px;
-  background: #fdfdfd;
-  text-align: center;
-}
-
-.pricing-card h4 {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.pricing-card .price {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
-.price-yearly {
-  display: block;
-  font-size: 14px;
-  color: #888;
-}
-
-.pricing-card .contacts {
-  font-size: 14px;
-  color: #444;
-  margin-bottom: 10px;
-}
-
-.pricing-card .notes {
-  font-size: 13px;
-  color: #777;
-  margin-bottom: 15px;
-}
-
-.buy-btn {
-  background: black;
-  color: white;
-  padding: 10px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.buy-btn:hover {
-  background: #333;
-}
-
-
-
-.pricing-header {
-  margin-bottom: 30px;
-}
-
-.pricing-toggle {
-  display: inline-flex;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  overflow: hidden;
-  margin-bottom: 30px;
-}
-
-.pricing-toggle button {
-  padding: 10px 20px;
-  border: none;
-  background: #eee;
-  cursor: pointer;
-}
-
-.pricing-toggle button.active {
-  background: #000;
-  color: #fff;
-}
-
-.pricing-cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: center;
-}
-
-.pricing-card {
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  padding: 30px 20px;
-  width: 300px;
-  text-align: left;
-  box-shadow: 0 0 6px rgba(0,0,0,0.05);
-}
-
-.pricing-card.highlight {
-  border: 2px solid #000;
-}
-
-.pricing-card h3 {
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-.pricing-card .price {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
-.pricing-card .savings,
-.pricing-card .bonus {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 10px;
-}
-
-.pricing-card ul {
-  list-style: none;
-  padding: 0;
-  margin: 15px 0;
-}
-
-.pricing-card ul li {
-  margin-bottom: 8px;
-}
-
-.pricing-card button {
-  background: #000;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.pricing-single-plan {
-  padding: 60px 20px;
-  background-color: #fff;
-  text-align: center;
-  font-family: sans-serif;
-}
-
-.pricing-header .pricing-title {
-  font-size: 32px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.pricing-header .pricing-subtitle {
-  color: #555;
-  margin-bottom: 40px;
-  font-size: 16px;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 30px;
-  margin-bottom: 40px;
-}
-
-.feature-item {
-  background: #f9f9f9;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.feature-icon {
-  font-size: 24px;
-  display: block;
-  margin-bottom: 10px;
-}
-
-.feature-title {
-  font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 5px;
-}
-
-.feature-description {
-  font-size: 14px;
-  color: #666;
-}
-
-.plan-card {
-  background: #f0f4ff;
-  padding: 30px;
-  border-radius: 10px;
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.plan-title {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.plan-price {
-  font-size: 20px;
-  color: #333;
-  margin-bottom: 10px;
-}
-
-.plan-description {
+.tag {
   font-size: 14px;
   color: #555;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 36px;
+  font-weight: 800;
   margin-bottom: 20px;
 }
-.contact-form-section {
-  padding: 60px 20px;
-  background-color: #fff;
-  font-family: sans-serif;
-  text-align: center;
-}
 
-.contact-header .contact-title {
-  font-size: 28px;
-  font-weight: bold;
-  color: #000;
-  margin-bottom: 10px;
-}
-
-.contact-description {
-  color: #555;
-  font-size: 14px;
+.subtitle {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #333;
   margin-bottom: 30px;
 }
 
-.contact-form {
-  max-width: 600px;
-  margin: 0 auto;
-  display: grid;
-  gap: 20px;
+.benefits {
+  display: flex;
+  gap: 40px;
+  margin-bottom: 30px;
+  flex-wrap: wrap;
 }
 
-.contact-form input[type="text"],
-.contact-form input[type="email"],
-.contact-form textarea {
-  width: 100%;
-  padding: 12px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
+.benefit {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  max-width: 250px;
+}
+
+.benefit i {
+  font-size: 24px;
+  color: #000;
+}
+
+.benefit h4 {
+  margin: 0 0 5px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.benefit p {
+  margin: 0;
   font-size: 14px;
-  font-family: inherit;
+  color: #444;
 }
 
-.contact-form textarea {
-  resize: vertical;
-  min-height: 120px;
-}
-
-.checkbox-label {
+.actions {
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-size: 14px;
-  color: #444;
-  justify-content: start;
-  text-align: left;
+  gap: 20px;
 }
 
-.contact-form .btn-filled {
-  background-color: black;
-  color: white;
-  padding: 12px 24px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 500;
-  font-size: 16px;
-}
-.contact-info-section {
-  text-align: center;
-  padding: 60px 20px;
+.btn.primary {
+  padding: 10px 20px;
   background-color: #fff;
+  border: 2px solid #111;
+  font-weight: 600;
+  cursor: pointer;
 }
 
-.contact-profile-image {
-  width: 80px;
-  height: 80px;
-  object-fit: cover;
-  border-radius: 50%;
-  margin-bottom: 20px;
-}
-
-.contact-heading {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.contact-description {
-  font-size: 14px;
-  color: #666;
-  max-width: 600px;
-  margin: 0 auto 40px;
-  white-space: pre-line;
-}
-
-.contact-columns {
-  display: flex;
-  justify-content: center;
-  gap: 30px;
-  flex-wrap: wrap;
-}
-
-.contact-column {
-  flex: 1;
-  min-width: 240px;
-  max-width: 300px;
-  text-align: left;
-}
-
-.contact-icon {
-  font-size: 24px;
-  display: block;
-  margin-bottom: 10px;
-}
-
-.contact-title {
-  font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 6px;
-}
-
-.contact-text {
-  font-size: 14px;
-  color: #444;
-  white-space: pre-line;
-}
-.contact-split-section {
-  display: flex;
-  flex-wrap: wrap;
-  min-height: 100vh;
-}
-
-.contact-left-panel {
-  flex: 1;
-  background-size: cover;
-  background-position: center;
-  color: white;
-  padding: 40px;
-}
-
-.contact-right-panel {
-  flex: 1;
-  background-color: #ffffff;
-  padding: 60px 40px;
-}
-
-.contact-section {
-  margin-bottom: 30px;
-}
-
-.section-heading {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.section-content {
-  white-space: pre-line;
-  color: #eee;
-}
-
-.section-highlight {
-  color: #00ff99;
+.btn-link {
   font-weight: 500;
-  white-space: pre-line;
-}
-
-.form-heading {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.contact-form input,
-.contact-form textarea {
-  display: block;
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 16px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
   font-size: 14px;
+  text-decoration: none;
+  color: #111;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
 }
 
-.contact-form textarea {
-  height: 120px;
-  resize: vertical;
-}
-
-.contact-form .btn-filled {
-  background-color: #00c981;
-  color: white;
-  padding: 12px 24px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.contact-page {
-  font-family: sans-serif;
-}
-
-.hero-banner {
-  background-size: cover;
-  background-position: center;
-  padding: 80px 20px;
-  color: #fff;
-  text-align: center;
-}
-
-.contact-three-column {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-  padding: 60px 20px;
-  justify-content: space-between;
-  background: #fff;
-}
-
-.contact-map {
-  flex: 1;
-  min-width: 280px;
-  border: none;
-  height: 300px;
-}
-
-.contact-info {
-  flex: 1;
-  min-width: 280px;
-}
-
-.contact-form {
-  flex: 1;
-  min-width: 280px;
-}
-
-.contact-form input,
-.contact-form textarea {
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 16px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-}
-
-.contact-form textarea {
-  resize: vertical;
-  height: 100px;
-}
-
-.contact-form button {
-  background-color: #007bff;
-  color: #fff;
-  padding: 12px 24px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.contact-getintouch {
-  background-color: #084c61;
-  color: #ffffff;
-  padding: 60px 20px;
-  text-align: center;
-}
-
-.contact-getintouch h2 {
-  font-size: 28px;
-  margin-bottom: 30px;
-}
-
-.contact-getintouch .columns {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
-  justify-content: center;
-}
-
-.contact-getintouch .column {
-  flex: 1 1 250px;
-  text-align: left;
-}
-
-.contact-getintouch .column h4 {
-  margin-top: 10px;
-  font-size: 18px;
-}
-
-.contact-getintouch .column p {
-  font-size: 14px;
-  margin: 4px 0;
-}
-
-.contact-messageus {
-  background-color: #ffffff;
-  padding: 60px 20px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-  align-items: flex-start;
-}
-
-.contact-messageus .left-column {
-  flex: 1 1 300px;
-}
-
-.contact-messageus .left-column h2 {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.contact-messageus .left-column p {
-  font-size: 14px;
-  color: #444;
-  margin-bottom: 15px;
-}
-
-.contact-messageus .form {
+.feature-image {
   flex: 1 1 400px;
 }
 
-.contact-messageus form {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.contact-messageus form input,
-.contact-messageus form textarea {
-  padding: 10px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-}
-
-.contact-messageus form button {
-  background-color: #c3d500;
-  color: #000;
-  border: none;
-  padding: 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-/* blog thumbnail grid*/
-
-.blog-thumbnail-grid {
-  padding: 40px;
-  font-family: 'Segoe UI', sans-serif;
-  background: #f9f9f9;
-}
-
-.blog-thumbnail-grid h2 {
-  text-align: center;
-  margin-bottom: 30px;
-  font-size: 28px;
-  font-weight: bold;
-  color: #222;
-}
-
-.blog-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 20px;
-}
-
-.blog-card {
-  border: 1px solid #eee;
-  border-radius: 8px;
-  overflow: hidden;
-  background: #fff;
-  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
-  display: flex;
-  flex-direction: column;
-}
-
-.blog-card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-}
-
-.blog-card img {
-  width: 100%;
-  height: 180px;
-  object-fit: cover;
-  background-color: #ddd;
-}
-
-.blog-card-content {
-  padding: 15px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.blog-card-content p {
-  color: gray;
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-
-.blog-card-content h4 {
-  margin: 0 0 10px 0;
-  font-size: 16px;
-}
-
-.blog-card-content h4 a {
-  text-decoration: none;
-  color: black;
-}
-
-.blog-card-content .read-more {
-  margin-top: auto;
-  font-size: 14px;
-  color: #007bff;
-  text-decoration: none;
-}
-
-.blog-card-content .read-more:hover {
-  text-decoration: underline;
-}
-
-/* 🌓 Dark Mode */
-.dark-mode .blog-thumbnail-grid {
-  background: #1a1a1a;
-}
-
-.dark-mode .blog-thumbnail-grid h2 {
-  color: #fff;
-}
-
-.dark-mode .blog-card {
-  background: #2a2a2a;
-  border: 1px solid #444;
-}
-
-.dark-mode .blog-card-content p,
-.dark-mode .blog-card-content h4 a {
-  color: #ddd;
-}
-
-.dark-mode .blog-card-content .read-more {
-  color: #1e90ff;
-}
-
-.dark-mode .blog-card:hover {
-  box-shadow: 0 8px 16px rgba(255,255,255,0.1);
-}
-
-/* 📱 Responsive Tuning */
-@media (max-width: 600px) {
-  .blog-thumbnail-grid {
-    padding: 20px;
-  }
-  .blog-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.blog-template {
-  padding: 60px 30px;
-  max-width: 1200px;
-  margin: auto;
-  font-family: sans-serif;
-}
-
-.blog-header {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.blog-icon {
-  font-size: 2rem;
-  display: block;
-  margin-bottom: 10px;
-}
-
-.blog-title {
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.blog-nav ul {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-  padding: 0;
-  list-style: none;
-  margin-bottom: 40px;
-}
-
-.blog-nav li {
-  font-weight: 500;
-  cursor: pointer;
-  color: #007bff;
-}
-
-.blog-layout {
-  display: flex;
-  gap: 40px;
-  flex-wrap: wrap;
-}
-
-.blog-main {
-  flex: 1 1 65%;
-}
-
-.content-block {
-  margin-bottom: 30px;
-}
-
-.content-heading {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.content-text {
-  font-size: 1rem;
-  color: #444;
-  line-height: 1.6;
-}
-
-.blog-sidebar {
-  flex: 1 1 30%;
-  background: #f9f9f9;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.sidebar-widget {
-  margin-bottom: 20px;
-  font-weight: 500;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .blog-layout {
-    flex-direction: column;
-  }
-  .blog-nav ul {
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-  }
-}
-
-
-/* ✅ Clean and responsive logo section */
-.logo-cloud {
-  padding: 60px 20px;
-  background-color: #ffffff;
-  text-align: center;
-}
-
-.logo-cloud-heading h2 {
-  font-size: 2.2rem;
-  font-weight: 700;
-  color: #222;
-  margin-bottom: 40px;
-}
-
-.logo-cloud-logos {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 30px;
-}
-
-.logo-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-
-
-.placeholder-img {
-  width: 120px;
-  height: 120px;
-  background-repeat: no-repeat;
-  background-image: url('/src/assets/images/placeholder.png');
-  background-position: center center;
-  background-size: contain;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-
-/* Responsive */
-@media (max-width: 768px) {
-  .placeholder-img {
-    width: 80px;
-    height: 80px;
-  }
-}
-
-
-/* 🟰 New Theme specific background for wellness */
-.theme-wellness {
-  background-color: #f0f8f5; /* Light green spa-like background */
-}
-
-/* 🟰 CTA Button Specific Styling */
-.logo-cta .cta-button {
-  padding: 10px 20px;
-  background: #222;
-  color: #fff;
-  text-decoration: none;
-  font-weight: bold;
-  border-radius: 4px;
-  display: inline-block;
-  transition: background 0.3s ease;
-  margin-top: 20px;
-}
-
-.logo-cta .cta-button:hover {
-  background: #555;
-}
-
- /* feature section */
-/* 🔲 Feature Section Base */
-.feature-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 40px;
-  gap: 40px;
-  flex-wrap: wrap;
-}
-
-/* 🖼️ Image Block */
- .feature-image {
-  flex: 1 1 40%;
-  width: 100%;
-  max-width: 500px;
-  height: auto;
-  object-fit: contain;
-  display: block;
-  align-self: center;
-}
-
-/* 📄 Text Content */
-.feature-content {
-  flex: 1 1 50%;
-  max-width: 600px;
-}
-
-.feature-title {
-  font-size: 28px;
-  font-weight: 700;
-  margin-bottom: 20px;
-  line-height: 1.3;
-}
-
-.feature-description {
-  font-size: 16px;
-  color: #555;
-  margin-bottom: 20px;
-}
-
-/* 📋 Feature List */
-.feature-list {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-.feature-list li {
-  position: relative;
-  padding-left: 30px;
-  margin-bottom: 10px;
-  font-size: 15px;
-  color: #444;
-}
-
-.feature-list li::before {
-  content: "✔";
-  position: absolute;
-  left: 0;
-  color: #008060;
-  font-weight: bold;
-}
-
-/* 🔁 Responsive Layout */
-@media (max-width: 768px) {
-  .feature-section {
-    flex-direction: column;
-    text-align: center;
-    gap: 30px;
-  }
-
-  .feature-content {
-    max-width: 100%;
-  }
-
-  .feature-title {
-    font-size: 22px;
-  }
-
-  .feature-description {
-    font-size: 15px;
-  }
-
-  .feature-image {
-    max-width: 100%;
-  }
-}
-/* 🔲 SECTION WRAPPER */
-.brand-guideline {
-  padding: 60px 30px;
-  max-width: 1000px;
-  margin: auto;
-  font-family: sans-serif;
-}
-
-/* 🧾 PROJECT INFO */
-.project-info {
-  margin-bottom: 40px;
-  text-align: center;
-}
-.brand-title {
-  font-size: 2rem;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-.brand-meta {
-  font-size: 0.95rem;
-  color: #555;
-}
-
-/* 🖼️ LOGO SECTION */
-.logo-section {
-  margin-bottom: 40px;
-}
-.section-heading {
-  font-size: 1.3rem;
-  font-weight: bold;
-  margin-bottom: 20px;
-  text-align: center;
-}
-.logo-label {
-  font-weight: 600;
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-.logo-img,
-.logo-mono-group,
-.logo-social-group {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-/* 🔳 INDIVIDUAL LOGOS */
-.default-img {
-  max-height: 60px;
-  object-fit: contain;
-  background-color: #f0f0f0;
-  padding: 6px;
-  border-radius: 6px;
-  display: block;
-}
-.logo-primary {
-  height: 60px;
-  width: auto;
-}
-
-.logo-icon {
-  height: 40px;
-  width: 40px;
-}
-
-.logo-mono {
-  height: 40px;
-  width: auto;
-}
-
-.logo-social-square,
-.logo-social-round {
-  height: 40px;
-  width: 40px;
-}
-
-
-/* 🎨 BRAND COLORS */
-.brand-colors {
-  margin-bottom: 40px;
-}
-.color-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: center;
-}
-.color-block {
-  width: 160px;
-  height: 100px;
-  border-radius: 8px;
-  padding: 10px;
-  color: #000;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  font-size: 0.85rem;
-  text-align: center;
-}
-.color-name {
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-.color-usage {
-  font-style: italic;
-  font-size: 0.8rem;
-  color: #444;
-}
-
-/* 🎨 COLOR BACKGROUNDS */
-.color-block.primary-blue {
-  background-color: #1E9FFF;
-}
-.color-block.light-grey {
-  background-color: #C6CBD6;
-}
-.color-block.charcoal-black {
-  background-color: #2B2B2B;
-  color: #fff;
-}
-.color-block.white {
-  background-color: #FFFFFF;
-  border: 1px solid #ddd;
-}
-
-/* ✍️ TYPOGRAPHY */
-.typography-section {
-  margin-top: 40px;
-  text-align: center;
-}
-.font-block {
-  margin-bottom: 20px;
-}
-.font-role {
-  font-weight: 600;
-  font-size: 1rem;
-}
-.font-family {
-  font-family: monospace;
-  font-size: 0.95rem;
-  color: #333;
-}
-
-/* 📱 RESPONSIVE */
-@media (max-width: 768px) {
-  .logo-img,
-  .logo-mono-group,
-  .logo-social-group,
-  .color-group {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .color-block {
-    width: 100%;
-    max-width: 300px;
-  }
-
-  .logo-primary,
-  .logo-icon,
-  .logo-mono,
-  .logo-social-square,
-  .logo-social-round {
-    max-width: 100%;
-    height: auto;
-  }
-}
-
-.logo-grid-section {
-  padding: 60px 30px;
-  max-width: 1200px;
-  margin: auto;
-}
-
-.logo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 30px;
-}
-
-.logo-card {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-  padding: 20px;
-  text-align: center;
-}
-
-.logo-img.placeholder {
-  width: 100%;
-  height: 140px;
-  background-color: #eee;
-  border-radius: 6px;
-  margin-bottom: 15px;
-  background-image: url('/assets/images/placeholder.png');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.logo-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.logo-meta {
-  font-size: 0.9rem;
-  color: #666;
-}
-
-
-.logo-guideline {
-  padding: 60px 30px;
-  max-width: 1000px;
-  margin: auto;
-  font-family: sans-serif;
-}
-.guideline-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-.guideline-title {
-  font-size: 2rem;
-  font-weight: bold;
-}
-.guideline-meta {
-  color: #666;
-  font-size: 0.95rem;
-}
-.guideline-section {
-  margin-bottom: 50px;
-}
-.section-title {
-  font-size: 1.3rem;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-.section-description {
-  font-size: 1rem;
-  color: #444;
-  margin-bottom: 15px;
-}
-.cover-version {
-  font-weight: 600;
-  font-size: 1rem;
-  color: #888;
-}
-.cover-title {
-  font-size: 1.6rem;
-  font-weight: bold;
-  margin: 8px 0;
-}
-.cover-subtitle {
-  color: #666;
-  font-size: 0.95rem;
-}
-.font-preview {
-  background: #f9f9f9;
-  padding: 15px;
-  border-radius: 6px;
-  text-align: center;
-}
-.font-name {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-.font-usage {
-  font-size: 0.95rem;
-  color: #555;
-}
 .placeholder {
-  background: #eee;
-  border-radius: 6px;
-  height: 180px;
-  background-image: url('/assets/images/placeholder.png');
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background-color: #ddd;
+  background-image: url('https://via.placeholder.com/100x100?text=Image');
   background-repeat: no-repeat;
   background-position: center;
-  background-size: contain;
-  margin-top: 10px;
+  background-size: 40px;
 }
 
 `;
+
+
+
+
+
+
+
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts
new file mode 100644
index 0000000..dbd3437
--- /dev/null
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css2.ts
@@ -0,0 +1,5987 @@
+export const COMMON_CSS2 = `
+
+.section-preview {
+/* ===== RESET & BASE ===== */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Segoe UI', sans-serif;
+  background: #f9f9f9;
+  color: #222;
+  line-height: 1.6;
+}
+
+/* 🧱 Extended for Mega Navbar Dropdown */
+.mega-navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+  position: relative;
+}
+
+.nav-1 {
+  display: flex;
+  list-style: none;
+  gap: 20px;
+  position: relative;
+}
+
+.nav-1 li {
+  position: relative;
+}
+
+.nav-1 li a {
+  text-decoration: none;
+  color: #222;
+  font-weight: 500;
+  padding: 8px 12px;
+  display: inline-block;
+}
+
+.nav-1 li:hover > .dropdown-content {
+  display: block;
+}
+
+/* Dropdown content for mega menu */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  z-index: 999;
+  width: 800px;
+}
+
+.dropdown-columns {
+  display: flex;
+  gap: 30px;
+}
+
+.column {
+  flex: 1;
+}
+
+.column h4 {
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.column ul {
+  list-style: none;
+  padding: 0;
+}
+
+.column ul li {
+  margin-bottom: 12px;
+}
+
+.column ul li span {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.column ul li strong {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.column ul li p {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.footer-link {
+  margin-top: 15px;
+}
+
+.footer-link a {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-link a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 960px) {
+  .dropdown-columns {
+    flex-direction: column;
+  }
+
+  .dropdown-content {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .mega-navbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nav-1 {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .navbar-actions {
+    margin-top: 10px;
+  }
+}
+
+/* ======= NAVBAR ======= */
+ /* Mega Navbar */
+  .mega-navbar {
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+   padding: 20px 40px !important;
+   background: #fff !important;
+   border-bottom: 1px solid #eee !important;
+  }
+  
+  /* Logo */
+  .logo-1 {
+   font-size: 1.6rem !important;
+   font-weight: 800 !important;
+   color: #222 !important;
+   padding: 0.5rem 0 !important;
+   letter-spacing: -0.5px !important;
+   position: relative !important;
+   display: inline-flex !important;
+   align-items: center !important;
+  }
+  
+  /* Navigation List */
+  .nav-1 {
+   display: flex !important;
+   list-style: none !important;
+   gap: 20px !important;
+   margin: 0 !important;
+   padding: 0 !important;
+  }
+  
+  .nav-1 li {
+   position: relative !important;
+   padding: 0 !important;
+  }
+  
+  .nav-1 li a {
+   position: relative !important;
+   transition: color 0.3s ease !important;
+  }
+  
+  .nav-1 li a::after {
+   content: "" !important;
+   position: absolute !important;
+   width: 0 !important;
+   height: 2px !important;
+   bottom: 0 !important;
+   left: 50% !important;
+   background-color: #3366ff !important;
+   transition: all 0.3s ease !important;
+   transform: translateX(-50%) !important;
+  }
+   .nav-1 li a:hover {
+   color: #3366ff !important;
+  }
+  
+  .nav-1 li a:hover::after {
+   width: 70% !important;
+  }
+  
+  /* Dropdown */
+  .nav-1 li:hover > .dropdown-content {
+   display: block !important;
+  }
+  
+  .dropdown-content {
+   display: none !important;
+   position: absolute !important;
+   top: 100% !important;
+   left: 0 !important;
+   background: white !important;
+   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+   padding: 20px !important;
+   z-index: 999 !important;
+   width: 800px !important;
+  }
+  
+  .dropdown-columns {
+   display: flex !important;
+   gap: 30px !important;
+  }
+  
+  .column {
+   flex: 1 !important;
+  }
+  
+  .column h4 {
+   margin-bottom: 10px !important;
+   font-size: 16px !important;
+   font-weight: bold !important;
+  }
+  
+  .column ul {
+   list-style: none !important;
+   padding: 0 !important;
+  }
+  
+  .column ul li {
+   margin-bottom: 12px !important;
+  }
+  
+  .column ul li span {
+   display: inline-block !important;
+   margin-right: 8px !important;
+  }
+  
+  .column ul li strong {
+   display: block !important;
+   font-weight: bold !important;
+   margin-bottom: 2px !important;
+  }
+  
+  .column ul li p {
+   margin: 0 !important;
+   font-size: 14px !important;
+   color: #666 !important;
+  }
+  
+  /* Footer link in dropdown */
+  .footer-link {
+   margin-top: 15px !important;
+  }
+  
+  .footer-link a {
+   color: #007bff !important;
+   text-decoration: none !important;
+   font-weight: 500 !important;
+  }
+  
+  .footer-link a:hover {
+   text-decoration: underline !important;
+  }
+  
+  /* Navbar actions */
+  .navbar-actions {
+   display: flex !important;
+   gap: 18px !important;
+   align-items: center !important;
+   font-weight: 600 !important;
+   text-transform: uppercase !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   position: relative !important;
+   display: flex !important;
+   gap: 15px !important;
+   align-items: center !important;
+  }
+   .navbar-actions::before:hover {
+   background-color: rgba(51, 102, 255, 0.1) !important;
+   transform: translateY(-2px) !important;
+  }
+  
+  
+  .navbar-actions::after {
+   content: "Apply" !important;
+   display: inline-block !important;
+   padding: 8px 18px !important;
+   background-color: #3366ff !important;
+   color: white !important;
+   border: 2px solid #3366ff !important;
+   border-radius: 6px !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.3s ease !important;
+   cursor: pointer !important;
+   box-shadow: 0 4px 12px rgba(51, 102, 255, 0.2) !important;
+  }
+  
+  .navbar-actions::after:hover {
+   background-color: #2952cc !important;
+   border-color: #2952cc !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 6px 16px rgba(51, 102, 255, 0.25) !important;
+  }
+  .navbar-actions::before {
+   content: "Join" !important;
+   display: inline-block !important;
+   padding: 8px 18px !important;
+   background-color: transparent !important;
+   color: #3366ff !important;
+   border: 2px solid #3366ff !important;
+   border-radius: 6px !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.3s ease !important;
+   cursor: pointer !important;
+   margin-right: 12px !important;
+  }
+  
+  
+  /* Simple Nav */
+  nav {
+   background-color: #fff !important;
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+   margin-bottom: 25px !important;
+   border-bottom: 1px solid #e0e0e0 !important;
+   position: sticky !important;
+   top: 0 !important;
+   z-index: 1000 !important;
+   padding: 18px 40px !important;
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+  }
+  
+  nav ul {
+   display: flex !important;
+   justify-content: center !important;
+   gap: 30px !important;
+   margin: 0 !important;
+   list-style: none !important;
+  }
+  
+  nav ul li a {
+   color: #222 !important;
+   font-weight: 500 !important;
+   padding: 10px 0 !important;
+   font-size: 14px !important;
+   text-transform: uppercase !important;
+   letter-spacing: 0.5px !important;
+   position: relative !important;
+   text-decoration: none !important;
+  }
+  
+  /* Header with navbar-1 class */
+  header.navbar-1 {
+   background-color: #111827 !important;
+   color: #fff !important;
+   padding: 18px 40px !important;
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+  }
+  
+  header.navbar-1::after {
+   content: "Join" !important;
+   display: inline-block !important;
+   padding: 10px 20px !important;
+   background-color: #3366ff !important;
+   color: white !important;
+   border-radius: 6px !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.3s ease !important;
+   cursor: pointer !important;
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  }
+  header.navbar-1::after:hover {
+   background-color: #2952cc !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
+  }
+  header.navbar-1 .logo-1 {
+   color: #fff !important;
+  }
+  
+  
+  header.navbar-1 .nav-1 li a {
+   color: #fff !important;
+   font-weight: 500 !important;
+  }
+  
+  /* Responsive styles */
+  @media (max-width: 960px) {
+   .mega-navbar {
+     flex-direction: column !important;
+     align-items: flex-start !important;
+   }
+   
+   .nav-1 {
+     flex-direction: column !important;
+     gap: 10px !important;
+   }
+   
+   .dropdown-columns {
+     flex-direction: column !important;
+   }
+   
+   .dropdown-content {
+     width: 100% !important;
+     left: 0 !important;
+     right: 0 !important;
+   }
+  }
+  
+  @media (max-width: 768px) {
+   .mega-navbar, .navbar-1, header.navbar-1, nav {
+     padding: 15px !important;
+   }
+   
+   .nav-1, nav ul, .navbar-actions {
+     display: none !important;
+   }
+   
+   .dropdown-content {
+     position: static !important;
+     min-width: 100% !important;
+     transform: none !important;
+     box-shadow: none !important;
+     border: 1px solid #e0e0e0 !important;
+     padding: 15px !important;
+   }
+  }
+ /* ======= HERO / HEADER SECTION ======= */
+  
+  /* Base hero section styling */
+  section {
+   padding: 100px 20px !important;
+   background-color: #fff !important;
+   font-family: 'Inter', sans-serif !important;
+   position: relative !important;
+   overflow: hidden !important;
+  }
+  
+  section > div {
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   display: flex !important;
+   flex-wrap: wrap !important;
+   align-items: center !important;
+   justify-content: space-between !important;
+   gap: 50px !important;
+  }
+  
+  /* Hero headings */
+  h1 {
+   font-size: 52px !important;
+   font-weight: 800 !important;
+   line-height: 1.1 !important;
+   margin-bottom: 25px !important;
+   color: #000 !important;
+   letter-spacing: -0.02em !important;
+  }
+  
+  /* Standard hero paragraph */
+  section p {
+   font-size: 18px !important;
+   line-height: 1.6 !important;
+   color: #333 !important;
+   margin-bottom: 30px !important;
+   max-width: 600px !important;
+  }
+  
+  /* CTA button container */
+  .cta-buttons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 40px !important;
+   flex-wrap: wrap !important;
+  }
+  
+  /* CTA buttons styling */
+  .cta-buttons a {
+   display: inline-block !important;
+   padding: 15px 32px !important;
+   text-decoration: none !important;
+   font-weight: 600 !important;
+   font-size: 16px !important;
+   border-radius: 4px !important;
+   transition: all 0.3s ease !important;
+   width: 200px !important;
+  }
+  
+  /* Primary CTA button */
+  .cta-buttons a:first-child {
+   background-color: #000 !important;
+   color: #fff !important;
+   border: 2px solid #000 !important;
+  }
+  
+  .cta-buttons a:first-child:hover {
+   background-color: #333 !important;
+   border-color: #333 !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  /* Secondary CTA button */
+  .cta-buttons a:nth-child(2) {
+   background-color: #fff !important;
+   color: #000 !important;
+   border: 2px solid #000 !important;
+  }
+  
+  .cta-buttons a:nth-child(2):hover {
+   background-color: #f5f5f5 !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  /* Hero image styling */
+  section img {
+   max-width: 100% !important;
+   height: auto !important;
+   border-radius: 8px !important;
+   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
+  }
+  
+  /* Centered hero variant */
+  .hero-section.centered-hero {
+   text-align: center !important;
+  }
+  
+  .hero-section.centered-hero h1,
+  .hero-section.centered-hero p {
+   margin-left: auto !important;
+   margin-right: auto !important;
+  }
+  
+  .hero-section.centered-hero .cta-buttons {
+   justify-content: center !important;
+  }
+  
+  .hero-section.centered-hero img {
+   margin-top: 50px !important;
+   max-width: 800px !important;
+   margin-left: auto !important;
+   margin-right: auto !important;
+  }
+  
+  /* Hero with cards variant */
+  .hero-left-cards {
+   padding: 100px 20px !important;
+   background-color: #f8f8f8 !important;
+   overflow: hidden !important;
+  }
+  
+  .hero-left-cards .hero-container {
+   display: flex !important;
+   justify-content: space-between !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   gap: 60px !important;
+  }
+  
+  .hero-left-cards .hero-left {
+   flex: 1 !important;
+   max-width: 500px !important;
+   display: flex !important;
+   flex-direction: column !important;
+   justify-content: center !important;
+  }
+  
+  .hero-left-cards .hero-logo {
+   height: 50px !important;
+   width: auto !important;
+   margin-bottom: 30px !important;
+   /* Temporary logo styling if image is missing */
+   background-color: #000 !important;
+   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M10,5 h80 v20 h-80 Z'/%3E%3C/svg%3E") !important;
+   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M10,5 h80 v20 h-80 Z'/%3E%3C/svg%3E") !important;
+   mask-size: contain !important;
+   -webkit-mask-size: contain !important;
+   mask-repeat: no-repeat !important;
+   -webkit-mask-repeat: no-repeat !important;
+   mask-position: center !important;
+   -webkit-mask-position: center !important;
+  }
+  
+  .hero-left-cards .hero-label {
+   display: inline-block !important;
+   font-size: 14px !important;
+   font-weight: 700 !important;
+   letter-spacing: 1.5px !important;
+   text-transform: uppercase !important;
+   color: #555 !important;
+   margin-bottom: 20px !important;
+   position: relative !important;
+   padding-bottom: 10px !important;
+  }
+  
+  .hero-left-cards .hero-label:after {
+   content: '' !important;
+   position: absolute !important;
+   bottom: 0 !important;
+   left: 0 !important;
+   width: 40px !important;
+   height: 3px !important;
+   background-color: #000 !important;
+  }
+  
+  .hero-left-cards .hero-heading {
+   font-size: 48px !important;
+   font-weight: 800 !important;
+   line-height: 1.1 !important;
+   color: #000 !important;
+   margin-top: 0 !important;
+  }
+  
+  .hero-left-cards .hero-right {
+   flex: 1 !important;
+   display: grid !important;
+   grid-template-columns: 1fr 1fr !important;
+   grid-template-rows: auto auto !important;
+   gap: 30px !important;
+   align-items: stretch !important;
+  }
+  
+  .hero-left-cards .hero-card {
+   background-color: #fff !important;
+   padding: 25px !important;
+   border-radius: 12px !important;
+   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
+   display: flex !important;
+   flex-direction: column !important;
+   transform: translateY(0) !important;
+   transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+   height: 100% !important;
+   position: relative !important;
+   z-index: 1 !important;
+  }
+  
+  .hero-left-cards .hero-card:hover {
+   transform: translateY(-8px) !important;
+   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-left-cards .hero-card:first-child {
+   grid-column: 1 / 2 !important;
+   grid-row: 1 / 2 !important;
+  }
+  
+  .hero-left-cards .hero-card:last-child {
+   grid-column: 2 / 3 !important;
+   grid-row: 1 / 3 !important;
+  }
+  
+  .hero-left-cards .hero-card h3 {
+   font-size: 22px !important;
+   font-weight: 700 !important;
+   margin-top: 0 !important;
+   margin-bottom: 20px !important;
+   color: #000 !important;
+  }
+  
+  .hero-left-cards .card-img {
+   width: 100% !important;
+   height: 200px !important;
+   border-radius: 6px !important;
+   margin-bottom: 20px !important;
+   object-fit: cover !important;
+   background: linear-gradient(135deg, #e6e6e6 0%, #d9d9d9 100%) !important;
+   position: relative !important;
+   overflow: hidden !important;
+  }
+  
+  .hero-left-cards .card-buttons {
+   display: flex !important;
+   gap: 12px !important;
+   margin-top: 25px !important;
+   width: 100% !important;
+  }
+  
+  .hero-left-cards .btn-filled {
+   flex: 1 !important;
+   display: inline-block !important;
+   padding: 14px 0 !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   text-decoration: none !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   border-radius: 8px !important;
+   transition: all 0.3s ease !important;
+   text-align: center !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  .hero-left-cards .btn-filled:hover {
+   background-color: #333 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
+  }
+  
+  .hero-left-cards .btn-outlined {
+   flex: 1 !important;
+   display: inline-block !important;
+   padding: 14px 0 !important;
+   background-color: transparent !important;
+   color: #000 !important;
+   border: 2px solid #000 !important;
+   text-decoration: none !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   border-radius: 8px !important;
+   transition: all 0.3s ease !important;
+   text-align: center !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  .hero-left-cards .btn-outlined:hover {
+   background-color: rgba(0,0,0,0.05) !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
+  }
+  
+  /* Centered art hero variant */
+  .hero-centered-art {
+   text-align: center !important;
+   padding: 140px 20px !important;
+   position: relative !important;
+   overflow: hidden !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   min-height: 600px !important;
+   display: flex !important;
+   flex-direction: column !important;
+   justify-content: center !important;
+   align-items: center !important;
+  }
+  
+  .hero-centered-art:before {
+   content: '' !important;
+   position: absolute !important;
+   top: 0 !important;
+   left: 0 !important;
+   right: 0 !important;
+   bottom: 0 !important;
+   background: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 100%) !important;
+   z-index: 1 !important;
+  }
+  
+  .hero-centered-art .hero-art-left,
+  .hero-centered-art .hero-art-right {
+   position: absolute !important;
+   z-index: 0 !important;
+   height: 100% !important;
+   width: 40% !important;
+   opacity: 0.15 !important;
+   background-size: contain !important;
+   background-repeat: no-repeat !important;
+   background-position: center !important;
+   filter: blur(1px) !important;
+  }
+  
+  .hero-centered-art .hero-art-left {
+   left: -5% !important;
+   top: 0 !important;
+   background-image: radial-gradient(circle at 30% 50%, #fff 0%, transparent 60%) !important;
+   transform: rotate(-10deg) !important;
+  }
+  
+  .hero-centered-art .hero-art-right {
+   right: -5% !important;
+   top: 0 !important;
+   background-image: radial-gradient(circle at 70% 50%, #fff 0%, transparent 60%) !important;
+   transform: rotate(10deg) !important;
+  }
+  
+  .hero-centered-art .hero-heading {
+   position: relative !important;
+   z-index: 2 !important;
+   font-size: 64px !important;
+   font-weight: 800 !important;
+   line-height: 1.1 !important;
+   margin-bottom: 40px !important;
+   color: #fff !important;
+   max-width: 800px !important;
+   text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
+  }
+  
+  .hero-centered-art .btn-teal {
+   position: relative !important;
+   z-index: 2 !important;
+   display: inline-block !important;
+   padding: 20px 48px !important;
+   background-color: #fff !important;
+   color: #000 !important;
+   text-decoration: none !important;
+   font-weight: 700 !important;
+   font-size: 18px !important;
+   border-radius: 100px !important;
+   transition: all 0.3s ease !important;
+   box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  .hero-centered-art .btn-teal:hover {
+   background-color: #f0f0f0 !important;
+   transform: translateY(-5px) !important;
+   box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
+  }
+  
+  .hero-centered-art .btn-teal:active {
+   transform: translateY(-2px) !important;
+   box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
+  }
+  
+  .subsection-centered {
+   text-align: center !important;
+   padding: 100px 20px !important;
+   background-color: #fff !important;
+   position: relative !important;
+   border-top: 1px solid #f0f0f0 !important;
+   display: flex !important;
+   justify-self: center !important;
+   align-items: center !important;
+   flex-direction: column !important;
+  }
+  
+  .subsection-centered:before {
+   content: '' !important;
+   position: absolute !important;
+   top: -50px !important;
+   left: 50% !important;
+   transform: translateX(-50%) !important;
+   width: 100px !important;
+   height: 100px !important;
+   background-color: #fff !important;
+   border-radius: 50% !important;
+   box-shadow: 0 -10px 30px rgba(0,0,0,0.05) !important;
+   z-index: 10 !important;
+   display: flex !important;
+   justify-content: center !important;
+   align-items: center !important;
+  }
+  
+  .subsection-centered:after {
+   content: '↓' !important;
+   position: absolute !important;
+   top: -25px !important;
+   left: 50% !important;
+   transform: translateX(-50%) !important;
+   color: #000 !important;
+   font-size: 24px !important;
+   font-weight: 700 !important;
+   z-index: 11 !important;
+  }
+  
+  .subsection-centered h2 {
+   font-size: 48px !important;
+   font-weight: 800 !important;
+   margin-bottom: 30px !important;
+   color: #000 !important;
+   position: relative !important;
+   display: inline-block !important;
+  }
+  
+  .subsection-centered h2:after {
+   content: '' !important;
+   position: absolute !important;
+   bottom: -10px !important;
+   left: 50% !important;
+   transform: translateX(-50%) !important;
+   width: 60px !important;
+   height: 4px !important;
+   background-color: #000 !important;
+  }
+  
+  .subsection-centered p {
+   font-size: 20px !important;
+   line-height: 1.7 !important;
+   color: #333 !important;
+   max-width: 800px !important;
+   margin: 0 auto !important;
+   font-weight: 400 !important;
+  }
+  
+  /* Responsive styling */
+  /* Image fix for missing images */
+  img[src="placeholder.png"], 
+  img[src="image-top-right.jpg"], 
+  img[src="image-bottom-left.jpg"],
+  img[src="divi-logo.svg"],
+  img[src="abstract-left.png"],
+  img[src="abstract-right.png"] {
+   position: relative !important;
+  }
+  
+  img[src="placeholder.png"]:after,
+  img[src="image-top-right.jpg"]:after,
+  img[src="image-bottom-left.jpg"]:after,
+  img[src="abstract-left.png"]:after,
+  img[src="abstract-right.png"]:after {
+   content: '' !important;
+   position: absolute !important;
+   top: 0 !important;
+   left: 0 !important;
+   width: 100% !important;
+   height: 100% !important;
+   background-color: #e0e0e0 !important;
+   background-image: linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 75%, #d0d0d0 75%, #d0d0d0), 
+                     linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 75%, #d0d0d0 75%, #d0d0d0) !important;
+   background-size: 20px 20px !important;
+   background-position: 0 0, 10px 10px !important;
+   z-index: 1 !important;
+  }
+  
+  img[src="divi-logo.svg"]:after {
+   content: 'LOGO' !important;
+   position: absolute !important;
+   top: 0 !important;
+   left: 0 !important;
+   width: 100% !important;
+   height: 100% !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-weight: bold !important;
+   z-index: 1 !important;
+  }
+  
+  /* Responsive styles */
+  @media (max-width: 992px) {
+   section > div {
+     flex-direction: column !important;
+     text-align: center !important;
+   }
+   
+   h1 {
+     font-size: 42px !important;
+   }
+   
+   .cta-buttons {
+     justify-content: center !important;
+   }
+   
+   section p {
+     margin-left: auto !important;
+     margin-right: auto !important;
+   }
+   
+   /* Card hero responsive fixes */
+   .hero-left-cards .hero-container {
+     flex-direction: column !important;
+     gap: 40px !important;
+   }
+   
+   .hero-left-cards .hero-left {
+     text-align: center !important;
+     max-width: 100% !important;
+     align-items: center !important;
+   }
+   
+   .hero-left-cards .hero-label:after {
+     left: 50% !important;
+     transform: translateX(-50%) !important;
+     width: 60px !important;
+   }
+   
+   .hero-left-cards .hero-right {
+     grid-template-columns: repeat(2, 1fr) !important;
+     grid-template-rows: auto !important;
+   }
+   
+   .hero-left-cards .hero-card:last-child {
+     grid-column: auto !important;
+     grid-row: auto !important;
+   }
+   
+   /* Art hero responsive fixes */
+   .hero-centered-art {
+     padding: 100px 20px !important;
+   }
+   
+   .hero-centered-art .hero-heading {
+     font-size: 48px !important;
+     padding: 0 20px !important;
+   }
+   
+   .hero-centered-art .hero-art-left,
+   .hero-centered-art .hero-art-right {
+     width: 50% !important;
+     opacity: 0.1 !important;
+   }
+   
+   .subsection-centered:before {
+     width: 80px !important;
+     height: 80px !important;
+     top: -40px !important;
+   }
+  }
+  
+  @media (max-width: 768px) {
+   section {
+     padding: 60px 20px !important;
+   }
+   
+   h1 {
+     font-size: 36px !important;
+   }
+   
+   section p {
+     font-size: 16px !important;
+   }
+   
+   .cta-buttons {
+     flex-direction: column !important;
+     width: 100% !important;
+   }
+   
+   .cta-buttons a {
+     width: 100% !important;
+     text-align: center !important;
+     margin-bottom: 10px !important;
+   }
+   
+   /* Card hero mobile fixes */
+   .hero-left-cards {
+     padding: 60px 20px !important;
+   }
+   
+   .hero-left-cards .hero-heading {
+     font-size: 36px !important;
+   }
+   
+   .hero-left-cards .hero-right {
+     grid-template-columns: 1fr !important;
+   }
+   
+   .hero-left-cards .hero-card {
+     padding: 20px !important;
+   }
+   
+   .hero-left-cards .card-img {
+     height: 180px !important;
+   }
+   
+   /* Art hero mobile fixes */
+   .hero-centered-art {
+     padding: 80px 20px !important;
+     min-height: 500px !important;
+   }
+   
+   .hero-centered-art .hero-heading {
+     font-size: 36px !important;
+   }
+   
+   .hero-centered-art .btn-teal {
+     padding: 16px 32px !important;
+     font-size: 16px !important;
+     width: calc(100% - 40px) !important;
+     max-width: 300px !important;
+   }
+   
+   .subsection-centered h2 {
+     font-size: 36px !important;
+   }
+   
+   .subsection-centered p {
+     font-size: 16px !important;
+   }
+  }
+  
+  /* Extra small devices */
+  @media (max-width: 480px) {
+   .hero-centered-art .hero-heading {
+     font-size: 32px !important;
+   }
+   
+   .hero-left-cards .hero-heading {
+     font-size: 32px !important;
+   }
+   
+   .subsection-centered:before {
+     width: 60px !important;
+     height: 60px !important;
+     top: -30px !important;
+   }
+   
+   .subsection-centered:after {
+     font-size: 20px !important;
+     top: -20px !important;
+   }
+  }
+
+/* ======= IMAGE GRID ======= */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  padding: 40px;
+}
+
+.image-grid div {
+  background: #ddd;
+  aspect-ratio: 1;
+  border-radius: 4px;
+}
+
+/* ======= BODY SECTION (2 COLUMN) ======= */
+.feature-section {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 60px 40px;
+  align-items: center;
+  gap: 40px;
+}
+
+.feature-section img {
+  width: 300px;
+  height: 300px;
+  background: #ccc;
+  object-fit: cover;
+}
+
+.feature-content {
+  flex: 1;
+}
+
+.feature-content h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.feature-content p {
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 20px;
+}
+
+.feature-content ul {
+  list-style: none;
+  padding: 0;
+}
+
+.feature-content ul li {
+  padding-left: 20px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.feature-content ul li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: #007bff;
+}
+
+/* ======= TESTIMONIAL SECTION ======= */
+/* 🔲 Main Section */
+.testimonial-section {
+  padding: 80px 40px;
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  color: #fff;
+}
+
+/* 🔳 Optional Background Overlay */
+.testimonial-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+}
+
+.testimonial-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* 🏷️ Heading */
+.testimonial-heading {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+}
+
+.testimonial-subtitle {
+  color: #ddd;
+  margin-bottom: 40px;
+  font-size: 1rem;
+}
+
+/* 🧑‍💼 Grid Layout */
+.testimonial-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 30px;
+  justify-content: center;
+}
+
+/* 📦 Testimonial Card */
+.testimonial-card {
+  background: #fff;
+  color: #222;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+  max-width: 320px;
+  margin: 0 auto;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.testimonial-card:hover {
+  transform: translateY(-5px);
+}
+
+/* 🖼️ Avatar Wrapper with fallback */
+.testimonial-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #ccc;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.testimonial-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 🗣️ Quote Text */
+.testimonial-card blockquote {
+  font-style: italic;
+  color: #444;
+  margin: 15px 0;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+/* ⭐ Star Ratings */
+.stars {
+  color: #f39c12;
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+}
+  /* 🔲 Placeholder block */
+.profile {
+  width: 40px;
+  height: 40px;
+  background: #ccc;
+  border-radius: 50%;
+  margin: 0 auto 10px;
+}
+
+/* 🧑 Avatar image */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}
+
+/* 🧾 Author Info */
+.author {
+  margin-top: 15px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 🟡 CTA Button */
+.testimonial-cta {
+  display: inline-block;
+  margin-top: 40px;
+  background: #ffc107;
+  color: #000;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.testimonial-cta:hover {
+  background: #e6ac00;
+}
+
+/* 📞 Contact Info */
+.testimonial-contact {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #ccc;
+}
+
+.testimonial-contact p {
+  margin: 5px 0;
+}
+
+/* 📱 Responsive Adjustments */
+@media (max-width: 768px) {
+  .testimonial-heading {
+    font-size: 1.5rem;
+  }
+
+  .testimonial-subtitle {
+    font-size: 0.95rem;
+  }
+
+  .testimonial-card {
+    max-width: 100%;
+  }
+
+  .testimonial-grid {
+    gap: 20px;
+  }
+
+  .testimonial-cta {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+
+
+  /* ======= FOOTER ======= */
+  /* Modern Footer Styles - Refined & Elegant */
+  * {
+   margin: 0 !important;
+   padding: 0 !important;
+   box-sizing: border-box !important;
+  }
+  
+  body {
+   font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
+   line-height: 1.6 !important;
+   color: #333 !important;
+  }
+  
+  /* Footer 1 - Clean Modern Style */
+  .footer-1 {
+       background: linear-gradient(to right, #f8faff, #ffffff) !important;
+       padding: 60px 5% 40px !important;
+       font-size: 15px !important;
+       border-top: 1px solid #eaeaea !important;
+     }
+  
+     .footer-1 .footer-top,
+     .footer-1 .footer-bottom {
+       display: flex !important;
+       justify-content: space-between !important;
+       flex-wrap: wrap !important;
+       gap: 30px !important;
+       margin-bottom: 30px !important;
+       align-items: center !important;
+     }
+  
+     .footer-1 .logo-1 {
+       height: 38px !important;
+       filter: brightness(1.1) !important;
+     }
+  
+     .footer-1 .footer-nav,
+     .footer-1 .footer-legal {
+       display: flex !important;
+       gap: 25px !important;
+       list-style: none !important;
+       flex-wrap: wrap !important;
+     }
+  
+     .footer-1 .footer-nav {
+       font-weight: 500 !important;
+     }
+  
+     .footer-1 .footer-nav a,
+     .footer-1 .footer-legal a {
+       color: #4a5568 !important;
+       text-decoration: none !important;
+       transition: all 0.25s ease !important;
+       position: relative !important;
+     }
+  
+     .footer-1 .footer-nav a:hover,
+     .footer-1 .footer-legal a:hover {
+       color: #3366ff !important;
+     }
+  
+     .footer-1 .footer-nav a::after {
+       content: '' !important;
+       position: absolute !important;
+       width: 0 !important;
+       height: 2px !important;
+       bottom: -6px !important;
+       left: 0 !important;
+       background-color: #3366ff !important;
+       transition: width 0.3s ease !important;
+     }
+  
+     .footer-1 .footer-nav a:hover::after {
+       width: 100% !important;
+     }
+  
+     .footer-1 .footer-social {
+       display: flex !important;
+       gap: 16px !important;
+     }
+  
+     .footer-1 .footer-social a {
+       width: 38px !important;
+       height: 38px !important;
+       background: #fff !important;
+       border-radius: 50% !important;
+       display: flex !important;
+       align-items: center !important;
+       justify-content: center !important;
+       font-size: 18px !important;
+       color: #4a5568 !important;
+       transition: all 0.3s ease !important;
+       border: 1px solid #e2e8f0 !important;
+       text-decoration: none !important;
+       box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
+     }
+  
+     .footer-1 .footer-social a:hover {
+       background: #333 !important;
+       color: #fff !important;
+       transform: translateY(-3px) !important;
+       box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
+     }
+  
+     .footer-1 .footer-bottom {
+       color: #888 !important;
+       font-size: 14px !important;
+       padding-top: 20px !important;
+       border-top: 1px solid #eaeaea !important;
+     }
+  
+     .footer-1 .footer-legal a {
+       color: #888 !important;
+     }
+  
+     .footer-1 .footer-legal a:hover {
+       color: #555 !important;
+     }
+  
+     /* Responsive Adjustments */
+     @media (max-width: 768px) {
+       .footer-1 .footer-top,
+       .footer-1 .footer-bottom {
+         flex-direction: column !important;
+         align-items: flex-start !important;
+       }
+       
+       .footer-1 .footer-bottom {
+         text-align: center !important;
+         align-items: center !important;
+       }
+     }
+  
+     /* Animation Effects */
+     @keyframes fadeIn {
+       from { opacity: 0; transform: translateY(10px); !important }
+       to { opacity: 1; transform: translateY(0); !important }
+     }
+  
+     .footer-1 {
+       animation: fadeIn 0.8s ease-out forwards !important;
+     }
+  
+  /* Footer 2 - Address & Links Style */
+  footer:not([class]) {
+   background: #fafafa !important;
+   padding: 50px 5% !important;
+   display: grid !important;
+   grid-template-columns: 1fr 2fr !important;
+   gap: 40px !important;
+   color: #333 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  footer:not([class]) > div:first-child {
+   display: flex !important;
+   flex-direction: column !important;
+   gap: 15px !important;
+  }
+  
+  footer:not([class]) > div:first-child img {
+   max-width: 140px !important;
+   margin-bottom: 10px !important;
+  }
+  
+  footer:not([class]) a {
+   color: #555 !important;
+   text-decoration: none !important;
+   transition: color 0.2s ease !important;
+  }
+  
+  footer:not([class]) a:hover {
+   color: #000 !important;
+  }
+  
+  footer:not([class]) p {
+   margin-bottom: 10px !important;
+   color: #555 !important;
+   font-size: 15px !important;
+  }
+  
+  footer:not([class]) > div:nth-child(2) {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
+   gap: 30px !important;
+  }
+  
+  footer:not([class]) .link-column p {
+   margin-bottom: 12px !important;
+  }
+  
+  footer:not([class]) .social-icons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 20px !important;
+  }
+  
+  footer:not([class]) .social-icons a {
+   width: 34px !important;
+   height: 34px !important;
+   background: #fff !important;
+   border-radius: 50% !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-size: 16px !important;
+   color: #333 !important;
+   transition: all 0.3s ease !important;
+   border: 1px solid #eaeaea !important;
+  }
+  
+  footer:not([class]) .social-icons a:hover {
+   background: #333 !important;
+   color: #fff !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
+  }
+  
+  /* Footer MDB - Professional Multi-Section */
+  .footer-mdb {
+   background: #fff !important;
+   color: #333 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  .footer-mdb.dark {
+   background: #f8f8f8 !important;
+   color: #333 !important;
+  }
+  
+  .footer-mdb .top-bar {
+   background-color: #f0f0f0 !important;
+   padding: 12px 5% !important;
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+   border-bottom: 1px solid #eaeaea !important;
+  }
+  
+  .footer-mdb .top-bar p {
+   margin: 0 !important;
+   font-size: 14px !important;
+   color: #666 !important;
+  }
+  
+  .footer-mdb .top-bar a {
+   margin-left: 15px !important;
+   color: #555 !important;
+   transition: color 0.2s ease !important;
+   font-size: 16px !important;
+  }
+  
+  .footer-mdb .top-bar a:hover {
+   color: #000 !important;
+  }
+  
+  .footer-mdb .footer-columns {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
+   gap: 40px !important;
+   padding: 50px 5% !important;
+  }
+  
+  .footer-mdb .footer-col h4 {
+   margin-bottom: 25px !important;
+   font-weight: 600 !important;
+   letter-spacing: 0.5px !important;
+   position: relative !important;
+   padding-bottom: 12px !important;
+   color: #222 !important;
+   font-size: 17px !important;
+  }
+  
+  .footer-mdb .footer-col h4::after {
+   content: '' !important;
+   position: absolute !important;
+   width: 40px !important;
+   height: 2px !important;
+   background-color: #333 !important;
+   bottom: 0 !important;
+   left: 0 !important;
+  }
+  
+  .footer-mdb .footer-col p {
+   margin-bottom: 12px !important;
+   color: #555 !important;
+   font-size: 15px !important;
+  }
+  
+  .footer-mdb .footer-col p a {
+   color: #555 !important;
+   text-decoration: none !important;
+   transition: color 0.2s ease !important;
+   position: relative !important;
+   display: inline-block !important;
+  }
+  
+  .footer-mdb .footer-col p a:hover {
+   color: #000 !important;
+   padding-left: 5px !important;
+  }
+  
+  .footer-mdb .footer-bottom {
+   text-align: center !important;
+   padding: 20px 0 !important;
+   background-color: #f0f0f0 !important;
+   font-size: 14px !important;
+   color: #666 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  /* Footer 4 - Company Style */
+  footer:nth-of-type(2) {
+   background: #fafafa !important;
+   padding: 60px 5% 30px !important;
+   color: #333 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  footer:nth-of-type(2) > div:first-child {
+   margin-bottom: 40px !important;
+   text-align: center !important;
+  }
+  
+  footer:nth-of-type(2) h2 {
+   font-size: 26px !important;
+   letter-spacing: 1px !important;
+   margin-bottom: 5px !important;
+   font-weight: 700 !important;
+   color: #222 !important;
+  }
+  
+  footer:nth-of-type(2) > div:first-child p {
+   color: #666 !important;
+   font-size: 15px !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  footer:nth-of-type(2) > div:nth-child(2) {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
+   gap: 30px !important;
+   max-width: 900px !important;
+   margin: 0 auto 40px !important;
+  }
+  
+  footer:nth-of-type(2) .link-col p {
+   margin-bottom: 12px !important;
+  }
+  
+  footer:nth-of-type(2) .link-col a {
+   color: #555 !important;
+   text-decoration: none !important;
+   transition: all 0.2s ease !important;
+   position: relative !important;
+   display: inline-block !important;
+  }
+  
+  footer:nth-of-type(2) .link-col a:hover {
+   color: #000 !important;
+   transform: translateX(5px) !important;
+  }
+  
+  footer:nth-of-type(2) .social-icons {
+   display: flex !important;
+   gap: 15px !important;
+   justify-content: center !important;
+   margin-bottom: 30px !important;
+  }
+  
+  footer:nth-of-type(2) .social-icons a {
+   width: 38px !important;
+   height: 38px !important;
+   background: #fff !important;
+   border-radius: 50% !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-size: 18px !important;
+   color: #333 !important;
+   transition: all 0.3s ease !important;
+   border: 1px solid #eaeaea !important;
+   text-decoration: none !important;
+  }
+  
+  footer:nth-of-type(2) .social-icons a:hover {
+   background: #333 !important;
+   color: #fff !important;
+   transform: translateY(-5px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+  }
+  
+  footer:nth-of-type(2) > p {
+   text-align: center !important;
+   color: #888 !important;
+   font-size: 14px !important;
+   padding-top: 20px !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  /* Contact Section - Modern Clean */
+  section {
+   background: linear-gradient(to right, #f8f8f8, #fff) !important;
+   color: #333 !important;
+   padding: 80px 5% !important;
+  }
+  
+  section > div {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
+   gap: 60px !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+  }
+  
+  section > div > div {
+   display: flex !important;
+   flex-direction: column !important;
+   justify-content: center !important;
+   text-align: center !important;
+  }
+  
+  section h2 {
+   font-size: 36px !important;
+   margin-bottom: 25px !important;
+   font-weight: 700 !important;
+   color: #222 !important;
+   position: relative !important;
+  }
+  
+  
+  section p {
+   margin-bottom: 25px !important;
+   line-height: 1.8 !important;
+   color: #555 !important;
+   font-size: 16px !important;
+  }
+  
+  section a {
+   color: #333 !important;
+   text-decoration: none !important;
+   transition: all 0.3s ease !important;
+  }
+  
+  section a[href^="#"] {
+   display: inline-block !important;
+   padding: 14px 28px !important;
+   background-color: #333 !important;
+   color: #fff !important;
+   font-weight: 600 !important;
+   border-radius: 4px !important;
+   letter-spacing: 0.5px !important;
+   margin-top: 10px !important;
+   transition: all 0.3s ease !important;
+   border: 2px solid #333 !important;
+  }
+  
+  section a[href^="#"]:hover {
+   background-color: transparent !important;
+   color: #333 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+  }
+  
+  section strong {
+   color: #222 !important;
+   font-weight: 600 !important;
+  }
+  
+  section div p:has(strong) {
+   display: flex !important;
+   align-items: center !important;
+   gap: 10px !important;
+  }
+  
+  section div p:has(strong) strong {
+   min-width: 70px !important;
+  }
+  
+  section .social-icons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 20px !important;
+  }
+  
+  section .social-icons a {
+   width: 40px !important;
+   height: 40px !important;
+   background: #fff !important;
+   border-radius: 50% !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-size: 18px !important;
+   color: #333 !important;
+   transition: all 0.3s ease !important;
+   border: 1px solid #eaeaea !important;
+  }
+  
+  section .social-icons a:hover {
+   background: #333 !important;
+   color: #fff !important;
+   transform: translateY(-5px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+  }
+  
+  /* Responsive Adjustments */
+  @media (max-width: 768px) {
+   .footer-1 .footer-top,
+   .footer-1 .footer-bottom {
+     flex-direction: column !important;
+     align-items: flex-start !important;
+   }
+   
+   .footer-1 .footer-bottom {
+     text-align: center !important;
+     align-items: center !important;
+   }
+   
+   .footer-mdb .top-bar {
+     flex-direction: column !important;
+     gap: 10px !important;
+     text-align: center !important;
+     padding: 15px 5% !important;
+   }
+   
+   footer:not([class]) {
+     grid-template-columns: 1fr !important;
+   }
+   
+   section > div {
+     grid-template-columns: 1fr !important;
+   }
+  }
+  
+  /* Animation Effects */
+  @keyframes fadeIn {
+   from { opacity: 0 !important; transform: translateY(10px) !important; }
+   to { opacity: 1 !important; transform: translateY(0) !important; }
+  }
+  
+  .footer-1, 
+  .footer-mdb,
+  footer:not([class]),
+  footer:nth-of-type(2),
+  section {
+   animation: fadeIn 0.8s ease-out forwards !important;
+  }
+  
+/* Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body, html {
+  width: 100%;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+/* 🧱 All section wrapper spacing */
+section, header, footer, nav, div {
+  margin-bottom: 30px;
+}
+
+/* Layout blocks stay inside */
+.canvas-page {
+  overflow-wrap: break-word;
+}
+
+/* Prevent buttons from floating off */
+button {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* Keep max-width structure */
+.container,
+.feature-section,
+.hero-header {
+  max-width: 100%;
+  width: 100%;
+}
+
+.cta-section {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+  /* ========== CTA SECTION STYLES ========== */
+  /* Common Section Styles */
+  .subscriptionsection,
+  .ctablock,
+  .ctasection,
+  .contactsignupsection,
+  .herobanner {
+   padding: 80px 0 !important;
+   width: 100vw !important;
+   background-color: #fff !important;
+   color: #000 !important;
+   box-sizing: border-box !important;
+  }
+  
+  /* Improved Subscription Section */
+  .subscriptionsection {
+   padding: 80px 0 !important;
+   width: 100vw !important;
+   background-color: #fff !important;
+   box-sizing: border-box !important;
+  }
+  
+  .subscription-section {
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   width: 100% !important;
+   max-width: 1000px !important;
+   margin: 0 auto !important;
+   text-align: center !important;
+   padding: 70px 5% !important;
+   border: 2px solid #000 !important;
+   border-radius: 0 !important;
+   background-color: #fff !important;
+   box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
+  }
+  
+  .subscription-heading {
+   font-size: 38px !important;
+   font-weight: 800 !important;
+   margin-bottom: 20px !important;
+   color: #000 !important;
+   letter-spacing: -0.5px !important;
+   line-height: 1.2 !important;
+  }
+  
+  .subscription-description {
+   font-size: 18px !important;
+   color: #444 !important;
+   margin-bottom: 40px !important;
+   max-width: 600px !important;
+   line-height: 1.7 !important;
+  }
+  
+  .subscription-section div {
+   margin-bottom: 35px !important;
+  }
+  
+  /* Add this to your CSS to style the "Sign Up" text as a button */
+  .subscription-section > :nth-child(2) {
+   padding: 16px 36px !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   border: 2px solid #000 !important;
+   border-radius: 8px !important;
+   font-weight: 600 !important;
+   font-size: 16px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
+   cursor: auto !important;
+   display: inline-block !important;
+   text-transform: uppercase !important;
+   margin-bottom: 25px !important;
+   position: relative !important;
+   overflow: hidden !important;
+  }
+  
+  .subscription-section > :nth-child(2):hover {
+   background-color: #fff !important;
+   color: #000 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
+  }
+  
+  .disclaimer {
+   font-size: 14px !important;
+   color: #666 !important;
+   max-width: 800px !important;
+   line-height: 1.5 !important;
+   margin: 0 auto !important;
+  }
+  
+  .link-text {
+   color: #000 !important;
+   text-decoration: underline !important;
+   font-weight: 500 !important;
+   position: relative !important;
+   transition: all 0.3s ease-out !important;
+   padding-bottom: 2px !important;
+  }
+  
+  .link-text:hover {
+   color: #000 !important;
+   text-decoration: none !important;
+  }
+  
+  .link-text:after {
+   content: '' !important;
+   position: absolute !important;
+   width: 0 !important;
+   height: 2px !important;
+   bottom: 0 !important;
+   left: 0 !important;
+   background-color: #000 !important;
+   transition: width 0.3s ease !important;
+  }
+  
+  .link-text:hover:after {
+   width: 100% !important;
+  }
+  
+  /* CTA Block */
+  .cta-section {
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   text-align: center !important;
+   padding: 70px 5% !important;
+   background-color: #f2f2f2 !important;
+   border-radius: 0 !important;
+   width: 100% !important;
+   max-width: 100vw !important;
+   margin: 0 !important;
+   box-sizing: border-box !important;
+  }
+  
+  .cta-buttons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 25px !important;
+  }
+  
+  .btn-filled {
+   padding: 12px 28px !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   border: 2px solid #000 !important;
+   border-radius: 4px !important;
+   font-weight: 600 !important;
+   transition: all 0.3s ease !important;
+  }
+  
+  .btn-filled:hover {
+   background-color: #333 !important;
+  }
+  
+  .btn-outlined {
+   padding: 12px 28px !important;
+   background-color: transparent !important;
+   color: #000 !important;
+   border: 2px solid #000 !important;
+   border-radius: 4px !important;
+   font-weight: 600 !important;
+   transition: all 0.3s ease !important;
+  }
+  
+  .btn-outlined:hover {
+   background-color: #000 !important;
+   color: #fff !important;
+  }
+  
+  /* CTA Gradient Section */
+  .cta-gradient-section {
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   text-align: center !important;
+   padding: 80px 20px !important;
+   background: linear-gradient(135deg, #f5f5f5, #e0e0e0) !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   border-radius: 8px !important;
+  }
+  
+  /* Contact Signup Section */
+  .contact-signup-section {
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+   padding: 60px 40px !important;
+   background-color: #f8f8f8 !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   border-radius: 8px !important;
+   border: 1px solid #e0e0e0 !important;
+  }
+  
+  .contact-signup-section div {
+   max-width: 60% !important;
+  }
+  
+  /* Hero Banner */
+  .hero-banner {
+   position: relative !important;
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   justify-content: center !important;
+   text-align: center !important;
+   padding: 100px 20px !important;
+   background-color: #f2f2f2 !important;
+   overflow: hidden !important;
+   border-radius: 8px !important;
+  }
+  
+  .hero-heading {
+   font-size: 48px !important;
+   font-weight: 800 !important;
+   margin-bottom: 10px !important;
+   color: #000 !important;
+   position: relative !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-subheading {
+   font-size: 24px !important;
+   color: #555 !important;
+   margin-bottom: 30px !important;
+   position: relative !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-description {
+   font-size: 18px !important;
+   color: #555 !important;
+   margin-bottom: 30px !important;
+   max-width: 600px !important;
+   line-height: 1.6 !important;
+  }
+  
+  .hero-button {
+   padding: 14px 32px !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   border: none !important;
+   border-radius: 4px !important;
+   font-weight: 600 !important;
+   letter-spacing: 1px !important;
+   text-transform: uppercase !important;
+   transition: all 0.3s ease !important;
+   position: relative !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-button:hover {
+   background-color: #333 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+  }
+  
+  .decoration {
+   position: absolute !important;
+   z-index: 1 !important;
+   opacity: 0.1 !important;
+  }
+  
+  .top-left {
+   top: 0 !important;
+   left: 0 !important;
+   max-width: 30% !important;
+  }
+  
+  .top-right {
+   top: 0 !important;
+   right: 0 !important;
+   max-width: 30% !important;
+  }
+  
+  /* Responsive Adjustments */
+  @media (max-width: 768px) {
+   .contact-signup-section {
+     flex-direction: column !important;
+     text-align: center !important;
+   }
+   
+   .contact-signup-section div {
+     max-width: 100% !important;
+     margin-bottom: 30px !important;
+   }
+   
+   .cta-buttons {
+     flex-direction: column !important;
+     width: 100% !important;
+     max-width: 300px !important;
+   }
+   
+   .hero-heading {
+     font-size: 36px !important;
+   }
+   
+   .hero-subheading {
+     font-size: 20px !important;
+   }
+   
+   .subscription-section {
+     padding: 50px 20px !important;
+     width: 100vw !important;
+   }
+   
+   .subscription-heading {
+     font-size: 32px !important;
+   }
+   
+   .subscription-description {
+     font-size: 16px !important;
+     padding: 0 15px !important;
+   }
+   
+   .disclaimer {
+     padding: 0 15px !important;
+     max-width: 100% !important;
+   }
+  }
+  
+  .cta-button {
+   background: black;
+   color: white;
+   padding: 12px 24px;
+   border-radius: 6px;
+   cursor: pointer;
+   display: inline-block;
+   margin-top: 20px;
+   text-decoration: none;
+  }
+  
+  .hero-section {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   gap: 40px;
+   padding: 40px;
+   background-color: #ffffff;
+   font-family: sans-serif;
+   flex-wrap: wrap;
+  }
+  
+  .hero-left {
+   flex: 1;
+   min-width: 300px;
+  }
+  
+  .hero-right {
+   flex: 1;
+   min-width: 300px;
+   display: flex;
+   justify-content: center;
+   background-color: #e5e5e5;
+  }
+  
+  .hero-right-img {
+   width: 100%;
+   height: auto;
+  }
+  
+  .hero-buttons {
+   margin-top: 20px;
+   display: flex;
+   gap: 16px;
+  }
+  
+  .btn {
+   padding: 10px 20px;
+   font-weight: 500;
+   text-decoration: none;
+   border-radius: 4px;
+   transition: all 0.3s ease;
+  }
+  
+  .hero-centered {
+   background: #ffffff;
+   font-family: sans-serif;
+   text-align: center;
+   padding: 60px 20px;
+  }
+  
+  .hero-image {
+   width: 100%;
+   height: auto;
+   display: block;
+   margin-top: 40px;
+   background-color: #e5e5e5;
+  }
+.cta-button {
+  background: black;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-block;
+  margin-top: 20px;
+  text-decoration: none;
+}
+
+.hero-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+  padding: 40px;
+  background-color: #ffffff;
+  font-family: sans-serif;
+  flex-wrap: wrap;
+}
+
+.hero-left {
+  flex: 1;
+  min-width: 300px;
+}
+
+.hero-right {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  justify-content: center;
+  background-color: #e5e5e5;
+}
+
+.hero-right-img {
+  width: 100%;
+  height: auto;
+}
+
+.hero-buttons {
+  margin-top: 20px;
+  display: flex;
+  gap: 16px;
+}
+
+.btn {
+  padding: 10px 20px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.btn-filled {
+  background-color: #000;
+  color: #fff;
+}
+
+.btn-outlined {
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #000;
+}
+
+.hero-centered {
+  background: #ffffff;
+  font-family: sans-serif;
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.hero-heading {
+  font-size: 32px;
+  font-weight: bold;
+  color: #000000;
+  margin-bottom: 20px;
+}
+
+.hero-description {
+  font-size: 16px;
+  color: #333333;
+  max-width: 600px;
+  margin: 0 auto 30px;
+}
+
+.btn-filled {
+  padding: 10px 20px;
+  background-color: #000000;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.btn-outlined {
+  padding: 10px 20px;
+  background-color: #ffffff;
+  color: #000000;
+  border: 1px solid #000000;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.hero-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin-top: 40px;
+  background-color: #e5e5e5;
+}
+
+
+/* ======= HERO SECTION (Two Column) ======= */
+.feature-section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 60px 40px;
+  gap: 40px;
+}
+
+.feature-content {
+  flex: 1;
+  min-width: 300px;
+}
+
+.feature-content h2 {
+  font-size: 36px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.feature-content p {
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 20px;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+
+.cta-buttons a {
+  padding: 10px 20px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: 0.3s ease;
+}
+
+.cta-buttons a:hover {
+  opacity: 0.9;
+}
+
+.feature-section img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  display: block;
+}
+
+/* ======= PARTNER LOGOS ======= */
+.feature-content .partners-logos {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.feature-content .partners-logos img {
+  height: 24px;
+  object-fit: contain;
+}
+
+/* ======= DECORATIONS ======= */
+.decoration {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  z-index: 0;
+  opacity: 0.4;
+}
+
+.decoration.circle {
+  border-radius: 50%;
+}
+
+.decoration.abstract-green {
+  clip-path: polygon(0 0, 100% 20%, 80% 100%, 0 100%);
+}
+
+.decoration.abstract-orange {
+  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
+}
+
+/* ======= SCROLL INDICATOR ======= */
+.scroll-indicator {
+  font-size: 20px;
+  position: absolute;
+  animation: bounce 2s infinite;
+  color: #666;
+}
+
+.scroll-indicator.bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+.scroll-indicator.bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(8px); }
+}
+
+.hero-left-cards {
+  background: radial-gradient(circle, #1a1f1c, #2d3430);
+  color: white;
+  font-family: sans-serif;
+  padding: 60px 40px;
+}
+
+.hero-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: center;
+}
+
+.hero-left {
+  flex: 1;
+  min-width: 300px;
+}
+
+.hero-logo {
+  width: 48px;
+  margin-bottom: 10px;
+}
+
+.hero-label {
+  font-size: 14px;
+  text-transform: uppercase;
+  color: #aaa;
+}
+
+.hero-heading {
+  font-size: 36px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.hero-right {
+  flex: 1;
+  display: grid;
+  gap: 20px;
+  min-width: 300px;
+}
+
+.hero-card {
+  background: #1c1f1e;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.hero-card img.card-img {
+  width: 100%;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.card-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn-filled {
+  background: #506c4f;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.btn-outlined {
+  border: 1px solid #fff;
+  background: transparent;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.hero-centered-art {
+  text-align: center;
+  background: #fff;
+  padding: 80px 20px;
+  position: relative;
+}
+
+.hero-centered-art .hero-heading {
+  font-size: 36px;
+  color: #333;
+  font-family: sans-serif;
+  max-width: 700px;
+  margin: 0 auto 30px;
+  line-height: 1.3;
+}
+
+.hero-centered-art .btn-teal {
+  background-color: #00b3b3;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.hero-art-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+}
+
+.hero-art-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+}
+
+.subsection-centered {
+  text-align: center;
+  padding: 60px 20px;
+  max-width: 700px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+.subsection-centered h2 {
+  font-size: 28px;
+  margin-bottom: 15px;
+}
+
+.subsection-centered p {
+  font-size: 16px;
+  color: #444;
+}
+
+.testimonial-section.simple-testimonial {
+  padding: 60px 20px;
+  text-align: center;
+  background: #fff;
+  color: #222;
+}
+
+.testimonial-logo img {
+  height: 40px;
+  margin-bottom: 20px;
+}
+
+.testimonial-quote {
+  font-size: 20px;
+  font-style: italic;
+  margin-bottom: 30px;
+  color: #444;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.testimonial-author {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.testimonial-author .author-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #ccc;
+  object-fit: cover;
+}
+
+.testimonial-author .author-details {
+  font-size: 14px;
+  color: #555;
+  line-height: 1.4;
+}
+.testimonial-section.dark {
+  background: #111;
+  color: #fff;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.testimonial-section.dark .testimonial-heading {
+  font-size: 32px;
+  margin-bottom: 30px;
+}
+
+.testimonial-section.dark .testimonial-grid {
+  display: flex;
+  gap: 30px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.testimonial-section.dark .testimonial-card {
+  background: #1a1a1a;
+  padding: 30px;
+  border-radius: 12px;
+  max-width: 350px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.testimonial-section.dark .stars {
+  font-size: 18px;
+  color: gold;
+  margin-bottom: 10px;
+}
+
+.testimonial-section.dark .author {
+  margin-top: 20px;
+}
+
+.testimonial-section.dark .author .avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+.client-testimonial-section {
+  padding: 60px 20px;
+  background-color: #111;
+  color: #fff;
+  font-family: sans-serif;
+  position: relative;
+  text-align: center;
+}
+
+.testimonial-bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  opacity: 0.1;
+  z-index: -1;
+}
+
+.testimonial-logo {
+  width: 80px;
+  margin-bottom: 20px;
+}
+
+.testimonial-title {
+  font-size: 32px;
+  margin-bottom: 40px;
+}
+
+.testimonial-cards {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.testimonial-card {
+  background: #222;
+  border-radius: 8px;
+  padding: 20px;
+  max-width: 300px;
+}
+
+.testimonial-card .avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.testimonial-card blockquote {
+  font-style: italic;
+  margin: 20px 0;
+}
+
+.testimonial-card .author {
+  font-size: 14px;
+  color: #aaa;
+}
+
+.testimonial-card .stars {
+  color: gold;
+  font-size: 18px;
+}
+
+.testimonial-cta .btn-filled {
+  margin-top: 30px;
+  background: teal;
+  color: white;
+  padding: 12px 24px;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.testimonial-contact p {
+  margin-top: 10px;
+}
+
+.testimonial-landing {
+  padding: 60px 20px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.testimonial-landing.orange {
+  background-color: #fff3e0;
+  color: #bf360c;
+}
+
+.landing-title {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.landing-description {
+  font-size: 16px;
+  margin-bottom: 40px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.testimonial-grid {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.testimonial-box {
+  background: #ffffff;
+  border: 1px solid #eee;
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 300px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.05);
+}
+
+.testimonial-box.highlight {
+  background: #ffe0b2;
+  border-color: #ff9800;
+}
+
+.testimonial-box blockquote {
+  font-style: italic;
+  margin-bottom: 16px;
+}
+
+.author-name {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+/* Team secction */
+.team-slider-section {
+  text-align: center;
+  padding: 40px;
+  font-family: sans-serif;
+}
+
+.team-slider-section h2 {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.team-slider-section p {
+  color: gray;
+}
+
+.team-slider {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  overflow-x: auto;
+  padding-bottom: 10px;
+}
+
+.team-member {
+  min-width: 300px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 20px;
+  background: #fff;
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.team-member img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 15px;
+}
+
+.team-member h4 {
+  margin: 10px 0 5px;
+}
+
+.team-member .social-icons a {
+  margin: 0 5px;
+  color: #555;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.team-member .profile-link {
+  color: #007BFF;
+  text-decoration: underline;
+  display: inline-block;
+  margin-top: 10px;
+}
+.team-section {
+  padding: 60px 20px;
+  background: #fff;
+  text-align: center;
+}
+.team-member {
+  display: inline-block;
+  margin: 20px;
+}
+.team-member img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+.team-member .name {
+  margin-top: 10px;
+  font-weight: bold;
+}
+.team-member .role {
+  color: #777;
+}
+
+/* === Team Showcase === */
+#team-showcase {
+  padding: 60px 20px;
+  text-align: center;
+  background-color: #fff;
+}
+#team-showcase .heading {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+#team-showcase .subtitle {
+  color: #666;
+  margin-bottom: 40px;
+}
+#team-showcase .group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+}
+#team-showcase .group {
+  padding: 0 10px;
+}
+#team-showcase .group .groupName {
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+#team-showcase .group .team-member-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 20px;
+  justify-items: center;
+}
+.team-member {
+  text-align: center;
+}
+.team-member img {
+  width: 140px;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+.team-member .name {
+  font-weight: bold;
+}
+.team-member .role {
+  font-size: 0.95rem;
+  color: #777;
+}
+.team-showcase {
+  padding: 60px 20px;
+  background: #f9f9f9;
+  text-align: center;
+}
+
+.team-showcase .group {
+  margin-bottom: 40px;
+}
+
+.team-showcase .group h3 {
+  font-size: 1.8rem;
+  margin-bottom: 20px;
+}
+
+.team-showcase .member-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 20px;
+  justify-items: center;
+}
+
+.team-showcase .member {
+  background: white;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.05);
+  max-width: 200px;
+}
+
+.team-showcase .member img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.team-showcase .member .name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.team-showcase .member .role {
+  font-size: 0.9rem;
+  color: #777;
+}
+
+
+/* === Team Grid Section === */
+#team-grid {
+  padding: 60px 20px;
+  background-color: #f9f9f9;
+  text-align: center;
+}
+#team-grid .tag {
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #ff6600;
+  margin-bottom: 10px;
+}
+#team-grid .heading {
+  font-size: 2.2rem;
+  margin-bottom: 10px;
+}
+#team-grid .description {
+  font-size: 1.1rem;
+  color: #666;
+  margin-bottom: 40px;
+}
+#team-member-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 30px;
+  justify-items: center;
+}
+.team-member {
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
+  max-width: 250px;
+  text-align: center;
+}
+.team-member img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+.team-member .name {
+  font-weight: bold;
+  margin-top: 12px;
+}
+.team-member .description {
+  font-size: 0.95rem;
+  color: #555;
+  margin-top: 6px;
+}
+
+
+/* === FAQ === */
+/* 🔲 Base Layout */
+.faq-section {
+  padding: 60px 20px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+/*  Title and Subtitle */
+.faq-title {
+  font-size: 2rem;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.faq-subtitle {
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+/* 🔍 Search Bar */
+.faq-search {
+  padding: 12px 20px;
+  width: 100%;
+  max-width: 400px;
+  font-size: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  margin: 0 auto 40px;
+  display: block;
+}
+
+/* 📦 Illustration + List Wrapper */
+.faq-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+/* 🖼️ Left Illustration */
+.faq-illustration {
+  flex: 1 1 40%;
+  max-width: 400px;
+}
+
+.faq-image {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* ❓ Q&A List */
+.faq-list {
+  flex: 1 1 55%;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.faq-item {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 15px;
+}
+
+/* 🗂️ Q & A */
+.faq-question {
+  font-weight: bold;
+  margin-top: 15px;
+  font-size: 1.1rem;
+}
+
+.faq-answer {
+  margin-bottom: 20px;
+  color: #444;
+  font-size: 0.95rem;
+}
+
+/* 📱 Responsive */
+@media (max-width: 768px) {
+  .faq-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .faq-illustration,
+  .faq-list {
+    max-width: 100%;
+  }
+
+  .faq-title {
+    font-size: 1.5rem;
+  }
+
+  .faq-question {
+    font-size: 1rem;
+  }
+}
+
+/* === Logo Showcase === */
+.logo-showcase {
+  padding: 60px 20px;
+  text-align: center;
+}
+.logo-showcase img {
+  height: 40px;
+  margin: 10px 20px;
+  opacity: 0.8;
+}
+
+/* === HEADER === */
+header[ref="header-1"] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+.logo-1 {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.nav-1 {
+  display: flex;
+  gap: 20px;
+  list-style: none;
+}
+.nav-1 li a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
+.button-join, .button {
+  background: black;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* === HERO SECTION === */
+.hero-section {
+  text-align: center;
+  padding: 80px 20px;
+  background: #fff;
+}
+.hero-heading {
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+.hero-paragraph {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  max-width: 700px;
+  margin-inline: auto;
+}
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+.button-group .button:first-child {
+  background-color: black;
+  color: white;
+}
+.button-group .button:last-child {
+  background-color: transparent;
+  border: 1px solid #222;
+  color: #222;
+}
+
+/* === IMAGE GRID === */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+  padding: 40px;
+  background: #fafafa;
+}
+.image-tile img {
+  width: 100%;
+  border-radius: 8px;
+  display: block;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+.logo-1 {
+  font-size: 20px;
+  font-weight: bold;
+}
+.nav-1 {
+  display: flex;
+  list-style: none;
+  gap: 20px;
+}
+.nav-1 li a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
+.join-btn {
+  background: black;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Hero */
+.hero-section {
+  text-align: center;
+  padding: 80px 20px;
+  background: #f9f9f9;
+}
+.hero-heading {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+.hero-paragraph {
+  max-width: 600px;
+  margin: auto;
+  color: #555;
+}
+.button-group {
+  margin-top: 20px;
+}
+.button-group .join-btn {
+  margin-right: 10px;
+}
+
+/* Image Grid */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 20px;
+  padding: 40px;
+}
+.image-tile img {
+  width: 100%;
+  border-radius: 8px;
+}
+/* ======= HERO SECTION CENTERED ======= */
+.hero-centered {
+  text-align: center;
+  padding: 60px 20px;
+  background: #fdfdfd;
+  max-width: 100%;
+}
+
+.hero-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #007bff;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.hero-heading {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #222;
+}
+
+.hero-description {
+  font-size: 16px;
+  color: #555;
+  max-width: 700px;
+  margin: 0 auto 30px auto;
+  line-height: 1.6;
+}
+
+.hero-centered .btn {
+  font-size: 15px;
+  padding: 10px 20px;
+  border-radius: 4px;
+  text-decoration: none;
+  display: inline-block;
+  margin: 0 8px;
+  cursor: pointer;
+}
+
+/* Button Filled */
+.btn-filled {
+  background-color: black;
+  color: white;
+  border: none;
+}
+
+.btn-filled:hover {
+  background-color: #333;
+}
+
+/* Button Outlined */
+.btn-outlined {
+  border: 1px solid black;
+  background: transparent;
+  color: black;
+}
+
+.btn-outlined:hover {
+  background-color: black;
+  color: white;
+}
+
+.text-dark {
+  color: #333333;
+}
+.text-blue {
+  color: #3b82f6;
+}
+.site-info {
+  margin-left: 20px;
+}
+
+.site-info h2 {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.site-info p {
+  font-size: 14px;
+  color: #777;
+}
+.feature-list-section {
+  padding: 60px 20px;
+  background-color: #ffffff;
+  font-family: sans-serif;
+}
+
+.feature-heading {
+  font-size: 28px;
+  font-weight: bold;
+  color: #000;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.feature-list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 30px;
+}
+
+.feature-card {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  text-align: center;
+}
+
+.feature-card img {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 20px;
+}
+
+.feature-card h4 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.feature-card p {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.text-button {
+  background: none;
+  color: #000;
+  font-weight: 500;
+  text-decoration: underline;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.subscription-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 60px 40px;
+  background-color: #ffffff;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+
+.subscription-heading {
+  font-size: 24px;
+  font-weight: bold;
+  color: #000000;
+  margin-bottom: 10px;
+}
+
+.subscription-description {
+  font-size: 14px;
+  color: #555555;
+  margin-bottom: 20px;
+}
+
+.subscription-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 400px;
+  width: 100%;
+}
+
+.form-input {
+  padding: 10px 15px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.form-submit {
+  background-color: black;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.form-submit:hover {
+  background-color: #222;
+}
+
+.subscription-form .disclaimer {
+  font-size: 12px;
+  color: #777;
+}
+
+.subscription-form .link-text {
+  color: #2563eb;
+  text-decoration: underline;
+  margin-left: 4px;
+  font-weight: 500;
+}
+.cta-gradient-section {
+  background: linear-gradient(90deg, #fbb034, #ffdd00);
+  text-align: center;
+  padding: 40px 20px;
+  border-radius: 10px;
+  font-family: sans-serif;
+}
+.contact-signup-section {
+  display: flex;
+  justify-content: space-between;
+  background-color: #fafafa;
+  padding: 40px 20px;
+  border-radius: 12px;
+  font-family: sans-serif;
+  flex-wrap: wrap;
+  gap: 30px;
+}
+
+.contact-form {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  max-width: 300px;
+}
+
+.contact-form input[type="email"] {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px 0 0 4px;
+  flex: 1;
+}
+
+.btn-filled-orange {
+  background-color: #f5a623;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+}
+.hero-banner {
+  background-color: #fcd34d;
+  text-align: center;
+  padding: 80px 20px;
+  position: relative;
+  font-family: sans-serif;
+}
+
+.hero-subheading {
+  font-size: 24px;
+  color: #333333;
+  font-weight: 500;
+  margin-top: 10px;
+}
+
+.hero-button {
+  background-color: #1f2937;
+  color: #ffffff;
+  padding: 10px 24px;
+  border-radius: 999px;
+  font-weight: bold;
+  display: inline-block;
+  margin-top: 20px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.decoration {
+  position: absolute;
+  z-index: 0;
+  opacity: 0.5;
+}
+
+.decoration.top-left {
+  top: 0;
+  left: 0;
+}
+
+.decoration.top-right {
+  top: 0;
+  right: 0;
+}
+.pricing-section {
+  padding: 60px 20px;
+  text-align: center;
+  background: #fff;
+  font-family: sans-serif;
+}
+
+.pricing-section .hero-label {
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 10px;
+}
+
+.pricing-section .hero-heading {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-section .hero-description {
+  font-size: 16px;
+  color: #555;
+  max-width: 600px;
+  margin: 0 auto 40px;
+}
+
+.pricing-section .pricing-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 30px;
+}
+
+.pricing-card {
+  background: #f9f9f9;
+  padding: 30px;
+  border-radius: 8px;
+  width: 280px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  text-align: left;
+}
+
+.pricing-card h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  color: #000;
+  margin: 10px 0;
+}
+
+.pricing-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 20px 0;
+}
+
+.pricing-card ul li {
+  margin-bottom: 10px;
+  color: #444;
+}
+
+.pricing-card .btn-filled {
+  display: inline-block;
+  padding: 10px 20px;
+  background: black;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+}
+.pricing-section-dark {
+  background: #111;
+  color: #fff;
+  padding: 60px 20px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.pricing-section-dark .badge {
+  text-transform: uppercase;
+  color: #facc15;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.pricing-section-dark .title {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.pricing-section-dark .description {
+  color: #ccc;
+  margin-bottom: 40px;
+  max-width: 700px;
+  margin-inline: auto;
+}
+
+.pricing-section-dark .card-grid {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.pricing-card {
+  background: #1a1a1a;
+  padding: 30px;
+  border-radius: 8px;
+  width: 280px;
+  text-align: left;
+}
+
+.pricing-card.highlight {
+  border: 2px solid #facc15;
+}
+
+.pricing-card .badge {
+  color: #facc15;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 10px 0;
+  color: #fff;
+}
+
+.pricing-card ul {
+  list-style: none;
+  padding: 0;
+  color: #bbb;
+  margin-bottom: 20px;
+}
+
+.pricing-card ul li {
+  margin-bottom: 8px;
+}
+
+.pricing-card button {
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+button.filled {
+  background: #facc15;
+  color: #000;
+  border: none;
+}
+
+button.outline {
+  background: transparent;
+  color: #facc15;
+  border: 1px solid #facc15;
+}
+
+button.light {
+  background: #fff;
+  color: #111;
+  border: none;
+}
+/* ======= PRICING SECTION ======= */
+.pricing-section {
+  padding: 60px 40px;
+  background: #fff;
+   text-align: center;
+}
+
+.pricing-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.pricing-header h2 {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-header p {
+  color: #666;
+  font-size: 16px;
+}
+
+.pricing-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 20px 0 40px 0;
+}
+
+.pricing-tabs li {
+  background: #f2f2f2;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.pricing-tabs li:hover {
+  background: #ddd;
+}
+
+.pricing-hub {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.pricing-hub h3 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.pricing-hub p {
+  color: #444;
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.hub-link {
+  color: #007bff;
+  font-weight: 500;
+  text-decoration: underline;
+}
+
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+
+.pricing-card {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 20px;
+  background: #fdfdfd;
+  text-align: center;
+}
+
+.pricing-card h4 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.price-yearly {
+  display: block;
+  font-size: 14px;
+  color: #888;
+}
+
+.pricing-card .contacts {
+  font-size: 14px;
+  color: #444;
+  margin-bottom: 10px;
+}
+
+.pricing-card .notes {
+  font-size: 13px;
+  color: #777;
+  margin-bottom: 15px;
+}
+
+.buy-btn {
+  background: black;
+  color: white;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.buy-btn:hover {
+  background: #333;
+}
+
+
+
+.pricing-header {
+  margin-bottom: 30px;
+}
+
+.pricing-toggle {
+  display: inline-flex;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+
+.pricing-toggle button {
+  padding: 10px 20px;
+  border: none;
+  background: #eee;
+  cursor: pointer;
+}
+
+.pricing-toggle button.active {
+  background: #000;
+  color: #fff;
+}
+
+.pricing-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+.pricing-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 30px 20px;
+  width: 300px;
+  text-align: left;
+  box-shadow: 0 0 6px rgba(0,0,0,0.05);
+}
+
+.pricing-card.highlight {
+  border: 2px solid #000;
+}
+
+.pricing-card h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.pricing-card .savings,
+.pricing-card .bonus {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.pricing-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 15px 0;
+}
+
+.pricing-card ul li {
+  margin-bottom: 8px;
+}
+
+.pricing-card button {
+  background: #000;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.pricing-single-plan {
+  padding: 60px 20px;
+  background-color: #fff;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.pricing-header .pricing-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-header .pricing-subtitle {
+  color: #555;
+  margin-bottom: 40px;
+  font-size: 16px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.feature-item {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.feature-icon {
+  font-size: 24px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.feature-title {
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.feature-description {
+  font-size: 14px;
+  color: #666;
+}
+
+.plan-card {
+  background: #f0f4ff;
+  padding: 30px;
+  border-radius: 10px;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.plan-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.plan-price {
+  font-size: 20px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.plan-description {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+  /* ======= PRICING SECTION ======= */
+  
+  /* General Pricing Section Styles */
+  .pricing-section, .pricingsection, .pricingsectiondark {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 30px 15px !important;
+    color: #000 !important;
+    background-color: #fff !important;
+  }
+  
+  .pricingsectiondark {
+    background-color: #222 !important;
+    color: #fff !important;
+  }
+  
+  /* Header Styles */
+  .pricing-header, .header, .title, .hero-heading {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+  }
+  
+  .pricing-title, .title, .hero-heading {
+    font-size: 32px !important;
+          font-weight: 700 !important;
+          margin-bottom: 8px !important;
+          letter-spacing: -0.5px !important;
+          color: #000 !important;
+          margin: 0 !important;
+          padding: 0 !important;
+          text-align: center !important;
+  }
+  
+  .pricingsectiondark .title {
+    color: #000 !important;
+          margin: 0 !important;
+          padding: 10px !important;
+  }
+  
+  .pricing-subtitle, .subtitle, .description, .hero-description {
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    color: #000 !important;
+    max-width: 600px !important;
+    margin: 0 auto 20px !important;
+    line-height: 1.5 !important;
+    padding: 21px !important
+  }
+  
+  .pricingsectiondark .subtitle, 
+  .pricingsectiondark .description {
+    color: #000 !important;
+          text-align: center;
+          /* margin: 0 !important; */
+          /* padding: 0 !important; */
+          display: flex !important;
+          /* justify-content: center !important; */
+          /* align-items: center !important; */
+          margin-top: -7px !important;
+        }
+  
+  .hero-label, .badge {
+    display: inline-block !important;
+    padding: 6px 12px !important;
+    background: #f4f4f4 !important;
+    border-radius: 20px !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    margin-bottom: 16px !important;
+    color: #333 !important;
+  }
+  
+  .pricingsectiondark .badge {
+    background: #444 !important;
+          color: #fff !important;
+          font-size: xxx-large !important;
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+          width: 100% !important;
+  }
+  
+  /* Features Grid */
+  .features-grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
+    gap: 15px !important;
+    margin-bottom: 25px !important;
+  }
+  
+  .feature-item {
+    background: #f9f9f9 !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    transition: all 0.3s ease !important;
+    border: 1px solid #eee !important;
+  }
+  
+  .feature-icon {
+    font-size: 28px !important;
+    margin-bottom: 15px !important;
+    display: block !important;
+  }
+  
+  .feature-title {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    margin-bottom: 5px !important;
+    color: #000 !important;
+  }
+  
+  .feature-description {
+    font-size: 14px !important;
+    color: #000 !important;
+    line-height: 1.4 !important;
+  }
+  
+  /* Plan Cards */
+  .plan-card, .pricing-card {
+    background: #fff !important;
+    border-radius: 8px !important;
+    padding: 20px 15px !important;
+    text-align: center !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
+    transition: all 0.3s ease !important;
+    border: 1px solid #eee !important;
+    max-width: 447px !important;
+    margin: 0 auto !important;
+  }
+  
+  .plan-title, .pricing-card h3 {
+    font-size: 22px !important;
+    font-weight: 700 !important;
+    margin-bottom: 10px !important;
+    color: #000 !important;
+  }
+  
+  .plan-price, .price, .pricing-card .price {
+    font-size: 30px !important;
+    font-weight: 700 !important;
+    margin-bottom: 10px !important;
+    color: #000 !important;
+  }
+  
+  .pricemonthly, .priceyearly {
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    margin-bottom: 5px !important;
+    color: #000 !important;
+  }
+  
+  .plan-description {
+    font-size: 16px !important;
+    color: #666 !important;
+    margin-bottom: 30px !important;
+    line-height: 1.5 !important;
+  }
+  
+  /* Buttons */
+  .btn-filled, .button, .buttonlabel {
+    display: inline-block !important;
+    padding: 12px 24px !important;
+    background: #222 !important;
+    color: #fff !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    text-decoration: none !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+    cursor: pointer !important;
+    font-size: 16px !important;
+  }
+  
+  .btn-filled:hover, .button:hover {
+    background: #000 !important;
+    transform: translateY(-2px) !important;
+  }
+  
+  .pricingsectiondark .btn-filled {
+    background: #fff !important;
+    color: #222 !important;
+  }
+  
+  .pricingsectiondark .btn-filled:hover {
+    background: #f4f4f4 !important;
+  }
+  
+  /* Multiple Plan Layout */
+  .pricing-cards, .plans {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
+    gap: 15px !important;
+    margin-top: 20px !important;
+  }
+  
+  /* Features List */
+  .pricing-card ul {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 0 30px !important;
+    text-align: left !important;
+  }
+  
+  .pricing-card li {
+    padding: 8px 0 !important;
+    border-bottom: 1px solid #eee !important;
+    font-size: 14px !important;
+    color: #000 !important;
+    position: relative !important;
+    padding-left: 20px !important;
+  }
+  
+  .pricing-card li:before {
+    content: "✓" !important;
+    position: absolute !important;
+    left: 0 !important;
+    color: #222 !important;
+    font-weight: bold !important;
+  }
+  
+  /* Toggle */
+  .toggle {
+    display: flex !important;
+    justify-content: center !important;
+    margin-bottom: -90px !important;
+  }
+  
+  .options {
+    display: inline-flex !important;
+    background: #f4f4f4 !important;
+    border-radius: 30px !important;
+    padding: 4px !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: #666 !important;
+  }
+  
+  .default {
+    background: #222 !important;
+    color: #fff !important;
+    padding: 10px 20px !important;
+    border-radius: 25px !important;
+  }
+  
+  /* Highlighting */
+  .highlight, [highlight="true"] {
+    border: 2px solid #222 !important;
+    transform: scale(1.05) !important;
+    position: relative !important;
+    overflow: hidden !important;
+  }
+  
+  .highlight:before, [highlight="true"]:before {
+    content: "POPULAR" !important;
+    position: absolute !important;
+    top: 15px !important;
+    right: -30px !important;
+    background: #222 !important;
+    color: #fff !important;
+    padding: 5px 40px !important;
+    font-size: 12px !important;
+    transform: rotate(45deg) !important;
+    font-weight: 600 !important;
+  }
+  
+  /* Savings and Bonus */
+  .savings, .bonus {
+    display: inline-block !important;
+    padding: 4px 8px !important;
+    background: #f0f0f0 !important;
+    border-radius: 4px !important;
+    font-size: 14px !important;
+    color: #333 !important;
+    margin: 5px 0 15px !important;
+    font-weight: 600 !important;
+  }
+  
+  .bonus {
+    background: #222 !important;
+    color: #fff !important;
+  }
+  
+  /* Features */
+  .features {
+    margin: 20px 0 !important;
+    text-align: left !important;
+  }
+  
+  /* Hub Section */
+  .hub {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+    padding: 15px !important;
+    background: #f9f9f9 !important;
+    border-radius: 8px !important;
+  }
+  
+  .hub .name {
+    font-size: 20px !important;
+    font-weight: 700 !important;
+    margin-bottom: 5px !important;
+    color: #000 !important;
+  }
+  
+  .hub .description {
+    font-size: 14px !important;
+    color: #000 !important;
+    margin-bottom: 10px !important;
+  }
+  
+  .hub .link {
+    color: #222 !important;
+    text-decoration: underline !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+  }
+  
+  /* Tabs */
+  .tabs {
+    display: flex !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    margin-bottom: 30px !important;
+    gap: 10px !important;
+  }
+  
+  /* Media Queries for Responsiveness */
+  @media (max-width: 768px) {
+    .pricing-cards, .plans, .features-grid {
+      grid-template-columns: 1fr !important;
+    }
+    
+    .highlight, [highlight="true"] {
+      transform: none !important;
+    }
+    
+    .pricing-title, .title, .hero-heading {
+      font-size: 28px !important;
+    }
+    
+    .plan-price, .price, .pricing-card .price {
+      font-size: 28px !important;
+    }
+  }
+
+
+
+
+  /*================= CONTACT FORM SECTION =================*/
+  .contact-form-section {
+    padding: 25px 15px !important;
+    background-color: #f5f5f5 !important;
+    text-align: center !important;
+    max-width: 600px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-header .contact-title {
+    font-size: 24px !important;
+    font-weight: 600 !important;
+    color: #1a365d !important;
+    margin-bottom: 5px !important;
+  }
+  
+  .hero-label {
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+    color: #2b6cb0 !important;
+    font-size: 11px !important;
+    margin: 0 0 2px 0 !important;
+    font-weight: 600 !important;
+  }
+  
+  .contact-description {
+    color: #4a5568 !important;
+    font-size: 14px !important;
+    margin: 0 auto 12px auto !important;
+    max-width: 400px !important;
+    line-height: 1.4 !important;
+  }
+  
+  .contact-form {
+    max-width: 400px !important;
+    margin: 0 auto !important;
+    display: grid !important;
+    gap: 10px !important;
+  }
+  
+  .contact-form input[type="text"],
+  .contact-form input[type="email"],
+  .contact-form textarea {
+    width: 100% !important;
+    padding: 8px 10px !important;
+    border-radius: 3px !important;
+    border: 1px solid #cbd5e0 !important;
+    font-size: 13px !important;
+    background-color: #fff !important;
+  }
+  
+  .contact-form input[type="text"]:focus,
+  .contact-form input[type="email"]:focus,
+  .contact-form textarea:focus {
+    outline: none !important;
+    border-color: #4299e1 !important;
+  }
+  
+  .contact-form textarea {
+    resize: vertical !important;
+    min-height: 80px !important;
+  }
+  
+  .label {
+    display: block !important;
+    text-align: center !important;
+    margin-bottom: 5px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    color: #4a5568 !important;
+    text-transform: uppercase !important;
+  }
+  
+  .checkbox-label {
+    display: flex !important;
+    align-items: center !important;
+    gap: 5px !important;
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    justify-content: flex-start !important;
+    text-align: left !important;
+    margin: 2px 0 !important;
+  }
+  
+  .contact-form .btn-filled,
+  .contact-right-panel .btn-filled {
+    background-color: #2b6cb0 !important;
+    color: white !important;
+    padding: 8px 15px !important;
+    border: none !important;
+    border-radius: 3px !important;
+    cursor: pointer !important;
+    font-weight: 600 !important;
+    font-size: 13px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    margin-top: 5px !important;
+    width: 100% !important;
+  }
+  
+  .contact-form .btn-filled:hover,
+  .contact-right-panel .btn-filled:hover {
+    background-color: #2c5282 !important;
+  }
+  
+  .contact-info-section {
+    text-align: center !important;
+    padding: 25px 15px !important;
+    background-color: #f5f5f5 !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-profile-image {
+    width: 50px !important;
+    height: 50px !important;
+    object-fit: cover !important;
+    border-radius: 50% !important;
+    margin-bottom: 10px !important;
+    border: 2px solid #2b6cb0 !important;
+  }
+  
+  .contact-heading {
+    font-size: 22px !important;
+    font-weight: 600 !important;
+    margin-bottom: 5px !important;
+    color: #1a365d !important;
+  }
+  
+  .contact-columns {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 15px !important;
+    flex-wrap: wrap !important;
+    margin-top: 15px !important;
+  }
+  
+  .contact-column {
+    flex: 1 !important;
+    min-width: 180px !important;
+    max-width: 230px !important;
+    text-align: left !important;
+    padding: 12px !important;
+    border: 1px solid #e2e8f0 !important;
+    background-color: #fff !important;
+    border-radius: 3px !important;
+  }
+  
+  .contact-icon {
+    font-size: 16px !important;
+    display: block !important;
+    margin-bottom: 5px !important;
+    color: #2b6cb0 !important;
+  }
+  
+  .contact-title {
+    font-weight: 600 !important;
+    font-size: 11px !important;
+    margin-bottom: 4px !important;
+    color: #1a365d !important;
+    text-transform: uppercase !important;
+  }
+  
+  .contact-text {
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    white-space: pre-line !important;
+    line-height: 1.4 !important;
+  }
+  
+  .contact-split-section {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    min-height: 400px !important;
+    max-width: 1000px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-left-panel {
+    flex: 1 !important;
+    background-color: #1a365d !important;
+    background-size: cover !important;
+    background-position: center !important;
+    color: white !important;
+    padding: 25px !important;
+    min-width: 250px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+  }
+  
+  .contact-right-panel {
+    flex: 1 !important;
+    background-color: #ffffff !important;
+    padding: 25px !important;
+    min-width: 250px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+  }
+  
+  .contact-section {
+    margin-bottom: 12px !important;
+  }
+  
+  .section-heading {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    margin-bottom: 4px !important;
+    color: #4299e1 !important;
+    text-transform: uppercase !important;
+  }
+  
+  .section-content {
+    white-space: pre-line !important;
+    color: #e2e8f0 !important;
+    line-height: 1.4 !important;
+    font-size: 12px !important;
+  }
+  
+  .section-highlight {
+    color: #fff !important;
+    font-weight: 600 !important;
+    white-space: pre-line !important;
+    font-size: 13px !important;
+  }
+  
+  .form-heading {
+    font-size: 20px !important;
+    font-weight: 600 !important;
+    margin-bottom: 12px !important;
+    color: #1a365d !important;
+  }
+  
+  .contact-page {
+    background-color: #f5f5f5 !important;
+    
+  }
+  .contact-page > .hero-banner > .hero-heading{
+    color: #fff !important;
+    margin-top: -10px !important;
+  }
+  
+  .hero-banner {
+    background-color: #1a365d !important;
+    background-size: cover !important;
+    background-position: center !important;
+    padding: 25px 15px !important;
+    color: #fff !important;
+    text-align: center !important;
+  }
+  
+  .hero-heading {
+    font-size: 28px !important;
+    font-weight: bold !important;
+    margin-bottom: 5px !important;
+    letter-spacing: 0.5px !important;
+  }
+  
+  .logo-1 {
+    font-weight: bold !important;
+    font-size: 16px !important;
+    margin-bottom: 5px !important;
+    letter-spacing: 0.5px !important;
+    color: #4299e1 !important;
+  }
+  
+  .nav-1 {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 20px !important;
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 0 12px 0 !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+  }
+  
+  .contact-three-column {
+          display: flex !important;
+          flex-wrap: wrap !important;
+          flex-direction: column;
+          gap: 12px !important;
+          padding: 0 15px !important;
+          justify-content: center !important;
+          background: #fff !important;
+          max-width: 1178px !important;
+          margin: 0 auto !important;
+          align-items: center !important;
+          justify-content: center !important;
+      }
+  
+  .contact-map {
+    flex: 1 !important;
+    min-width: 250px !important;
+    border: 1px solid #e2e8f0 !important;
+    height: 220px !important;
+    border-radius: 3px !important;
+  }
+  
+  .contact-info {
+          flex: 1 !important;
+          min-width: 1110px !important;
+          padding: 12px !important;
+          border: 1px solid #e2e8f0 !important;
+          border-radius: 3px !important;
+          background-color: #f5f5f5 !important;
+          align-items: center !important;
+  }
+  
+  .info-heading {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin-bottom: 10px !important;
+    color: #1a365d !important;
+  }
+  
+  .info-phone, 
+  .info-email, 
+  .info-address {
+    margin-bottom: 6px !important;
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    line-height: 1.4 !important;
+  }
+  
+  .form-heading {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin-bottom: 10px !important;
+    color: #1a365d !important;
+  }
+  
+  .contact-getintouch,
+  .getintouch {
+    background-color: #1a365d !important;
+    color: #ffffff !important;
+    padding: 25px 15px !important;
+    text-align: center !important;
+  }
+  
+  .contact-getintouch h2,
+  .getintouch .heading {
+    font-size: 18px !important;
+    margin-bottom: 12px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    font-weight: 600 !important;
+    color: #4299e1 !important;
+  }
+  
+  .contact-getintouch .columns,
+  .getintouch .columns {
+          padding: 0px !important;
+          display: flex !important;
+          flex-wrap: wrap !important;
+          gap: 12px !important;
+          justify-content: center !important;
+          max-width: 800px !important;
+          margin: 0 auto !important;
+  }
+  
+  .contact-getintouch .column,
+  .getintouch .columns section {
+    flex: 1 1 200px !important;
+    text-align: left !important;
+    padding: 12px !important;
+    border: 1px solid #2c5282 !important;
+    background-color: rgba(0, 0, 0, 0.1) !important;
+    border-radius: 3px !important;
+  
+  }
+  
+  .getintouch .icon {
+    font-size: 16px !important;
+    margin-bottom: 4px !important;
+    color: #000 !important;
+  }
+  
+  .contact-getintouch .column h4,
+  .getintouch .title {
+    margin-top: 2px !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    color: #000 !important;
+    margin-bottom: 4px !important;
+    text-transform: uppercase !important;
+    text-align: center !important;
+  }
+  .contact-getintouch .column, .getintouch .columns section {
+    text-align: center !important;
+  }
+  
+  .contact-getintouch .column p,
+  .getintouch .lines {
+    font-size: 12px !important;
+    margin: 2px 0 !important;
+    line-height: 1.4 !important;
+    white-space: pre-line !important;
+    color: #000 !important;
+    text-align: center !important;
+  }
+  
+  .contact-messageus,
+  .messageus {
+    background-color: #ffffff !important;
+    padding: 20px 15px !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 15px !important;
+    align-items: flex-start !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-messageus .left-column,
+  .messageus .leftcolumn {
+    flex: 1 1 250px !important;
+    padding: 10px !important;
+  }
+  
+  .contact-messageus .left-column h2,
+  .messageus .heading {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    margin-bottom: 8px !important;
+    color: #1a365d !important;
+    text-transform: uppercase !important;
+    position: relative !important;
+    display: inline-block !important;
+    padding-bottom: 5px !important;
+    border-bottom: 2px solid #4299e1 !important;
+  }
+  
+  .contact-messageus .left-column p,
+  .messageus .description {
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    margin-bottom: 10px !important;
+    line-height: 1.4 !important;
+  }
+  section > .class{
+    margin: 0 !important ;
+    padding: 0 !important;
+  }
+  section > .heading *{
+    margin: 0 !important ;
+    padding: 0 !important;
+  
+  }
+  
+  .getintouch > *{
+    color: black !important;
+  }
+  
+  .messageus .awardtext {
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    color: #1a365d !important;
+    margin-top: 12px !important;
+    border-top: 1px solid #e2e8f0 !important;
+    padding-top: 8px !important;
+  }
+  
+  .contact-messageus .form,
+  .messageus .form {
+    flex: 1 1 300px !important;
+    border: 1px solid #e2e8f0 !important;
+    padding: 15px !important;
+    background-color: #f5f5f5 !important;
+    border-radius: 3px !important;
+  }
+  
+  .contact-messageus form,
+  .messageus .fields {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 8px !important;
+  }
+  
+  .contact-messageus form input,
+  .contact-messageus form textarea,
+  .messageus .fields input,
+  .messageus .fields textarea {
+    padding: 8px 10px !important;
+    border-radius: 3px !important;
+    border: 1px solid #cbd5e0 !important;
+    font-size: 12px !important;
+    background-color: #fff !important;
+  }
+.contact-form-section {
+  padding: 60px 20px;
+  background-color: #fff;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.contact-header .contact-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.contact-description {
+  color: #555;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.contact-form {
+  max-width: 600px;
+  margin: 0 auto;
+  display: grid;
+  gap: 20px;
+}
+
+.contact-form input[type="text"],
+.contact-form input[type="email"],
+.contact-form textarea {
+  width: 100%;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.contact-form textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: #444;
+  justify-content: start;
+  text-align: left;
+}
+
+.contact-form .btn-filled {
+  background-color: black;
+  color: white;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 16px;
+}
+.contact-info-section {
+  text-align: center;
+  padding: 60px 20px;
+  background-color: #fff;
+}
+
+.contact-profile-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.contact-heading {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.contact-description {
+  font-size: 14px;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto 40px;
+  white-space: pre-line;
+}
+
+.contact-columns {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+
+.contact-column {
+  flex: 1;
+  min-width: 240px;
+  max-width: 300px;
+  text-align: left;
+}
+
+.contact-icon {
+  font-size: 24px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.contact-title {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 6px;
+}
+
+.contact-text {
+  font-size: 14px;
+  color: #444;
+  white-space: pre-line;
+}
+.contact-split-section {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 100vh;
+}
+
+.contact-left-panel {
+  flex: 1;
+  background-size: cover;
+  background-position: center;
+  color: white;
+  padding: 40px;
+}
+
+.contact-right-panel {
+  flex: 1;
+  background-color: #ffffff;
+  padding: 60px 40px;
+}
+
+.contact-section {
+  margin-bottom: 30px;
+}
+
+.section-heading {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.section-content {
+  white-space: pre-line;
+  color: #eee;
+}
+
+.section-highlight {
+  color: #00ff99;
+  font-weight: 500;
+  white-space: pre-line;
+}
+
+.form-heading {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.contact-form input,
+.contact-form textarea {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.contact-form textarea {
+  height: 120px;
+  resize: vertical;
+}
+
+.contact-form .btn-filled {
+  background-color: #00c981;
+  color: white;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.contact-page {
+  font-family: sans-serif;
+}
+
+.hero-banner {
+  background-size: cover;
+  background-position: center;
+  padding: 80px 20px;
+  color: #fff;
+  text-align: center;
+}
+
+.contact-three-column {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  padding: 60px 20px;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.contact-map {
+  flex: 1;
+  min-width: 280px;
+  border: none;
+  height: 300px;
+}
+
+.contact-info {
+  flex: 1;
+  min-width: 280px;
+}
+
+.contact-form {
+  flex: 1;
+  min-width: 280px;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.contact-form textarea {
+  resize: vertical;
+  height: 100px;
+}
+
+.contact-form button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.contact-getintouch {
+  background-color: #084c61;
+  color: #ffffff;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.contact-getintouch h2 {
+  font-size: 28px;
+  margin-bottom: 30px;
+}
+
+.contact-getintouch .columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
+  justify-content: center;
+}
+
+.contact-getintouch .column {
+  flex: 1 1 250px;
+  text-align: left;
+}
+
+.contact-getintouch .column h4 {
+  margin-top: 10px;
+  font-size: 18px;
+}
+
+.contact-getintouch .column p {
+  font-size: 14px;
+  margin: 4px 0;
+}
+
+.contact-messageus {
+  background-color: #ffffff;
+  padding: 60px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-start;
+}
+
+.contact-messageus .left-column {
+  flex: 1 1 300px;
+}
+
+.contact-messageus .left-column h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.contact-messageus .left-column p {
+  font-size: 14px;
+  color: #444;
+  margin-bottom: 15px;
+}
+
+.contact-messageus .form {
+  flex: 1 1 400px;
+}
+
+.contact-messageus form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.contact-messageus form input,
+.contact-messageus form textarea {
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.contact-messageus form button {
+  background-color: #c3d500;
+  color: #000;
+  border: none;
+  padding: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* blog thumbnail grid*/
+
+.blog-thumbnail-grid {
+  padding: 40px;
+  font-family: 'Segoe UI', sans-serif;
+  background: #f9f9f9;
+}
+
+.blog-thumbnail-grid h2 {
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 28px;
+  font-weight: bold;
+  color: #222;
+}
+
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+
+.blog-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+}
+
+.blog-card img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  background-color: #ddd;
+}
+
+.blog-card-content {
+  padding: 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.blog-card-content p {
+  color: gray;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.blog-card-content h4 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+}
+
+.blog-card-content h4 a {
+  text-decoration: none;
+  color: black;
+}
+
+.blog-card-content .read-more {
+  margin-top: auto;
+  font-size: 14px;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.blog-card-content .read-more:hover {
+  text-decoration: underline;
+}
+
+/* 🌓 Dark Mode */
+.dark-mode .blog-thumbnail-grid {
+  background: #1a1a1a;
+}
+
+.dark-mode .blog-thumbnail-grid h2 {
+  color: #fff;
+}
+
+.dark-mode .blog-card {
+  background: #2a2a2a;
+  border: 1px solid #444;
+}
+
+.dark-mode .blog-card-content p,
+.dark-mode .blog-card-content h4 a {
+  color: #ddd;
+}
+
+.dark-mode .blog-card-content .read-more {
+  color: #1e90ff;
+}
+
+.dark-mode .blog-card:hover {
+  box-shadow: 0 8px 16px rgba(255,255,255,0.1);
+}
+
+/* 📱 Responsive Tuning */
+@media (max-width: 600px) {
+  .blog-thumbnail-grid {
+    padding: 20px;
+  }
+  .blog-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.blog-template {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+.blog-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.blog-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.blog-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.blog-nav ul {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 40px;
+}
+
+.blog-nav li {
+  font-weight: 500;
+  cursor: pointer;
+  color: #007bff;
+}
+
+.blog-layout {
+  display: flex;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+.blog-main {
+  flex: 1 1 65%;
+}
+
+.content-block {
+  margin-bottom: 30px;
+}
+
+.content-heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.content-text {
+  font-size: 1rem;
+  color: #444;
+  line-height: 1.6;
+}
+
+.blog-sidebar {
+  flex: 1 1 30%;
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.sidebar-widget {
+  margin-bottom: 20px;
+  font-weight: 500;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .blog-layout {
+    flex-direction: column;
+  }
+  .blog-nav ul {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+
+/* ✅ Clean and responsive logo section */
+.logo-cloud {
+  padding: 60px 20px;
+  background-color: #ffffff;
+  text-align: center;
+}
+
+.logo-cloud-heading h2 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #222;
+  margin-bottom: 40px;
+}
+
+.logo-cloud-logos {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+}
+
+.logo-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+.placeholder-img {
+  width: 120px;
+  height: 120px;
+  background-repeat: no-repeat;
+  background-image: url('/src/assets/images/placeholder.png');
+  background-position: center center;
+  background-size: contain;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+
+/* Responsive */
+@media (max-width: 768px) {
+  .placeholder-img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+
+/* 🟰 New Theme specific background for wellness */
+.theme-wellness {
+  background-color: #f0f8f5; /* Light green spa-like background */
+}
+
+/* 🟰 CTA Button Specific Styling */
+.logo-cta .cta-button {
+  padding: 10px 20px;
+  background: #222;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  border-radius: 4px;
+  display: inline-block;
+  transition: background 0.3s ease;
+  margin-top: 20px;
+}
+
+.logo-cta .cta-button:hover {
+  background: #555;
+}
+
+ /* feature section */
+/* 🔲 Feature Section Base */
+.feature-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+/* 🖼️ Image Block */
+ .feature-image {
+  flex: 1 1 40%;
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  align-self: center;
+}
+
+/* 📄 Text Content */
+.feature-content {
+  flex: 1 1 50%;
+  max-width: 600px;
+}
+
+.feature-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.3;
+}
+
+.feature-description {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+/* 📋 Feature List */
+.feature-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #444;
+}
+
+.feature-list li::before {
+  content: "✔";
+  position: absolute;
+  left: 0;
+  color: #008060;
+  font-weight: bold;
+}
+
+/* 🔁 Responsive Layout */
+@media (max-width: 768px) {
+  .feature-section {
+    flex-direction: column;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .feature-content {
+    max-width: 100%;
+  }
+
+  .feature-title {
+    font-size: 22px;
+  }
+
+  .feature-description {
+    font-size: 15px;
+  }
+
+  .feature-image {
+    max-width: 100%;
+  }
+}
+/* 🔲 SECTION WRAPPER */
+.brand-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+/* 🧾 PROJECT INFO */
+.project-info {
+  margin-bottom: 40px;
+  text-align: center;
+}
+.brand-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.brand-meta {
+  font-size: 0.95rem;
+  color: #555;
+}
+
+/* 🖼️ LOGO SECTION */
+.logo-section {
+  margin-bottom: 40px;
+}
+.section-heading {
+  font-size: 1.3rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+.logo-label {
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.logo-img,
+.logo-mono-group,
+.logo-social-group {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 🔳 INDIVIDUAL LOGOS */
+.default-img {
+  max-height: 60px;
+  object-fit: contain;
+  background-color: #f0f0f0;
+  padding: 6px;
+  border-radius: 6px;
+  display: block;
+}
+.logo-primary {
+  height: 60px;
+  width: auto;
+}
+
+.logo-icon {
+  height: 40px;
+  width: 40px;
+}
+
+.logo-mono {
+  height: 40px;
+  width: auto;
+}
+
+.logo-social-square,
+.logo-social-round {
+  height: 40px;
+  width: 40px;
+}
+
+
+/* 🎨 BRAND COLORS */
+.brand-colors {
+  margin-bottom: 40px;
+}
+.color-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+.color-block {
+  width: 160px;
+  height: 100px;
+  border-radius: 8px;
+  padding: 10px;
+  color: #000;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: 0.85rem;
+  text-align: center;
+}
+.color-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.color-usage {
+  font-style: italic;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+/* 🎨 COLOR BACKGROUNDS */
+.color-block.primary-blue {
+  background-color: #1E9FFF;
+}
+.color-block.light-grey {
+  background-color: #C6CBD6;
+}
+.color-block.charcoal-black {
+  background-color: #2B2B2B;
+  color: #fff;
+}
+.color-block.white {
+  background-color: #FFFFFF;
+  border: 1px solid #ddd;
+}
+
+/* ✍️ TYPOGRAPHY */
+.typography-section {
+  margin-top: 40px;
+  text-align: center;
+}
+.font-block {
+  margin-bottom: 20px;
+}
+.font-role {
+  font-weight: 600;
+  font-size: 1rem;
+}
+.font-family {
+  font-family: monospace;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 📱 RESPONSIVE */
+@media (max-width: 768px) {
+  .logo-img,
+  .logo-mono-group,
+  .logo-social-group,
+  .color-group {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .color-block {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .logo-primary,
+  .logo-icon,
+  .logo-mono,
+  .logo-social-square,
+  .logo-social-round {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.logo-grid-section {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 30px;
+}
+
+.logo-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  padding: 20px;
+  text-align: center;
+}
+
+.logo-img.placeholder {
+  width: 100%;
+  height: 140px;
+  background-color: #eee;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  background-image: url('/assets/images/placeholder.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.logo-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.logo-meta {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+
+.logo-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+.guideline-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.guideline-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.guideline-meta {
+  color: #666;
+  font-size: 0.95rem;
+}
+.guideline-section {
+  margin-bottom: 50px;
+}
+.section-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.section-description {
+  font-size: 1rem;
+  color: #444;
+  margin-bottom: 15px;
+}
+.cover-version {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #888;
+}
+.cover-title {
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 8px 0;
+}
+.cover-subtitle {
+  color: #666;
+  font-size: 0.95rem;
+}
+.font-preview {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 6px;
+  text-align: center;
+}
+.font-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.font-usage {
+  font-size: 0.95rem;
+  color: #555;
+}
+.placeholder {
+  background: #eee;
+  border-radius: 6px;
+  height: 180px;
+  background-image: url('/assets/images/placeholder.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-top: 10px;
+}
+  
+  }
+  
+
+`;
+
+
+  
+  
+
+
+
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts
new file mode 100644
index 0000000..44198f7
--- /dev/null
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts
@@ -0,0 +1,18 @@
+export const Download_Css = `
+  
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: #fff;
+  color: #111;
+}
+
+`;
+
+
+
+
+
+
+
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts
new file mode 100644
index 0000000..a72e615
--- /dev/null
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts
@@ -0,0 +1,5976 @@
+export const Download_Css2= `
+
+ /* ===== RESET & BASE ===== */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Segoe UI', sans-serif;
+  background: #f9f9f9;
+  color: #222;
+  line-height: 1.6;
+}
+
+/* 🧱 Extended for Mega Navbar Dropdown */
+.mega-navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+  position: relative;
+}
+
+.nav-1 {
+  display: flex;
+  list-style: none;
+  gap: 20px;
+  position: relative;
+}
+
+.nav-1 li {
+  position: relative;
+}
+
+.nav-1 li a {
+  text-decoration: none;
+  color: #222;
+  font-weight: 500;
+  padding: 8px 12px;
+  display: inline-block;
+}
+
+.nav-1 li:hover > .dropdown-content {
+  display: block;
+}
+
+/* Dropdown content for mega menu */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  z-index: 999;
+  width: 800px;
+}
+
+.dropdown-columns {
+  display: flex;
+  gap: 30px;
+}
+
+.column {
+  flex: 1;
+}
+
+.column h4 {
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.column ul {
+  list-style: none;
+  padding: 0;
+}
+
+.column ul li {
+  margin-bottom: 12px;
+}
+
+.column ul li span {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.column ul li strong {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.column ul li p {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.footer-link {
+  margin-top: 15px;
+}
+
+.footer-link a {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.footer-link a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 960px) {
+  .dropdown-columns {
+    flex-direction: column;
+  }
+
+  .dropdown-content {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  .mega-navbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nav-1 {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .navbar-actions {
+    margin-top: 10px;
+  }
+}
+
+/* ======= NAVBAR ======= */
+ /* Mega Navbar */
+  .mega-navbar {
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+   padding: 20px 40px !important;
+   background: #fff !important;
+   border-bottom: 1px solid #eee !important;
+  }
+  
+  /* Logo */
+  .logo-1 {
+   font-size: 1.6rem !important;
+   font-weight: 800 !important;
+   color: #222 !important;
+   padding: 0.5rem 0 !important;
+   letter-spacing: -0.5px !important;
+   position: relative !important;
+   display: inline-flex !important;
+   align-items: center !important;
+  }
+  
+  /* Navigation List */
+  .nav-1 {
+   display: flex !important;
+   list-style: none !important;
+   gap: 20px !important;
+   margin: 0 !important;
+   padding: 0 !important;
+  }
+  
+  .nav-1 li {
+   position: relative !important;
+   padding: 0 !important;
+  }
+  
+  .nav-1 li a {
+   position: relative !important;
+   transition: color 0.3s ease !important;
+  }
+  
+  .nav-1 li a::after {
+   content: "" !important;
+   position: absolute !important;
+   width: 0 !important;
+   height: 2px !important;
+   bottom: 0 !important;
+   left: 50% !important;
+   background-color: #3366ff !important;
+   transition: all 0.3s ease !important;
+   transform: translateX(-50%) !important;
+  }
+   .nav-1 li a:hover {
+   color: #3366ff !important;
+  }
+  
+  .nav-1 li a:hover::after {
+   width: 70% !important;
+  }
+  
+  /* Dropdown */
+  .nav-1 li:hover > .dropdown-content {
+   display: block !important;
+  }
+  
+  .dropdown-content {
+   display: none !important;
+   position: absolute !important;
+   top: 100% !important;
+   left: 0 !important;
+   background: white !important;
+   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+   padding: 20px !important;
+   z-index: 999 !important;
+   width: 800px !important;
+  }
+  
+  .dropdown-columns {
+   display: flex !important;
+   gap: 30px !important;
+  }
+  
+  .column {
+   flex: 1 !important;
+  }
+  
+  .column h4 {
+   margin-bottom: 10px !important;
+   font-size: 16px !important;
+   font-weight: bold !important;
+  }
+  
+  .column ul {
+   list-style: none !important;
+   padding: 0 !important;
+  }
+  
+  .column ul li {
+   margin-bottom: 12px !important;
+  }
+  
+  .column ul li span {
+   display: inline-block !important;
+   margin-right: 8px !important;
+  }
+  
+  .column ul li strong {
+   display: block !important;
+   font-weight: bold !important;
+   margin-bottom: 2px !important;
+  }
+  
+  .column ul li p {
+   margin: 0 !important;
+   font-size: 14px !important;
+   color: #666 !important;
+  }
+  
+  /* Footer link in dropdown */
+  .footer-link {
+   margin-top: 15px !important;
+  }
+  
+  .footer-link a {
+   color: #007bff !important;
+   text-decoration: none !important;
+   font-weight: 500 !important;
+  }
+  
+  .footer-link a:hover {
+   text-decoration: underline !important;
+  }
+  
+  /* Navbar actions */
+  .navbar-actions {
+   display: flex !important;
+   gap: 18px !important;
+   align-items: center !important;
+   font-weight: 600 !important;
+   text-transform: uppercase !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   position: relative !important;
+   display: flex !important;
+   gap: 15px !important;
+   align-items: center !important;
+  }
+   .navbar-actions::before:hover {
+   background-color: rgba(51, 102, 255, 0.1) !important;
+   transform: translateY(-2px) !important;
+  }
+  
+  
+  .navbar-actions::after {
+   content: "Apply" !important;
+   display: inline-block !important;
+   padding: 8px 18px !important;
+   background-color: #3366ff !important;
+   color: white !important;
+   border: 2px solid #3366ff !important;
+   border-radius: 6px !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.3s ease !important;
+   cursor: pointer !important;
+   box-shadow: 0 4px 12px rgba(51, 102, 255, 0.2) !important;
+  }
+  
+  .navbar-actions::after:hover {
+   background-color: #2952cc !important;
+   border-color: #2952cc !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 6px 16px rgba(51, 102, 255, 0.25) !important;
+  }
+  .navbar-actions::before {
+   content: "Join" !important;
+   display: inline-block !important;
+   padding: 8px 18px !important;
+   background-color: transparent !important;
+   color: #3366ff !important;
+   border: 2px solid #3366ff !important;
+   border-radius: 6px !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.3s ease !important;
+   cursor: pointer !important;
+   margin-right: 12px !important;
+  }
+  
+  
+  /* Simple Nav */
+  nav {
+   background-color: #fff !important;
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+   margin-bottom: 25px !important;
+   border-bottom: 1px solid #e0e0e0 !important;
+   position: sticky !important;
+   top: 0 !important;
+   z-index: 1000 !important;
+   padding: 18px 40px !important;
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+  }
+  
+  nav ul {
+   display: flex !important;
+   justify-content: center !important;
+   gap: 30px !important;
+   margin: 0 !important;
+   list-style: none !important;
+  }
+  
+  nav ul li a {
+   color: #222 !important;
+   font-weight: 500 !important;
+   padding: 10px 0 !important;
+   font-size: 14px !important;
+   text-transform: uppercase !important;
+   letter-spacing: 0.5px !important;
+   position: relative !important;
+   text-decoration: none !important;
+  }
+  
+  /* Header with navbar-1 class */
+  header.navbar-1 {
+   background-color: #111827 !important;
+   color: #fff !important;
+   padding: 18px 40px !important;
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+  }
+  
+  header.navbar-1::after {
+   content: "Join" !important;
+   display: inline-block !important;
+   padding: 10px 20px !important;
+   background-color: #3366ff !important;
+   color: white !important;
+   border-radius: 6px !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.3s ease !important;
+   cursor: pointer !important;
+   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+  }
+  header.navbar-1::after:hover {
+   background-color: #2952cc !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
+  }
+  header.navbar-1 .logo-1 {
+   color: #fff !important;
+  }
+  
+  
+  header.navbar-1 .nav-1 li a {
+   color: #fff !important;
+   font-weight: 500 !important;
+  }
+  
+  /* Responsive styles */
+  @media (max-width: 960px) {
+   .mega-navbar {
+     flex-direction: column !important;
+     align-items: flex-start !important;
+   }
+   
+   .nav-1 {
+     flex-direction: column !important;
+     gap: 10px !important;
+   }
+   
+   .dropdown-columns {
+     flex-direction: column !important;
+   }
+   
+   .dropdown-content {
+     width: 100% !important;
+     left: 0 !important;
+     right: 0 !important;
+   }
+  }
+  
+  @media (max-width: 768px) {
+   .mega-navbar, .navbar-1, header.navbar-1, nav {
+     padding: 15px !important;
+   }
+   
+   .nav-1, nav ul, .navbar-actions {
+     display: none !important;
+   }
+   
+   .dropdown-content {
+     position: static !important;
+     min-width: 100% !important;
+     transform: none !important;
+     box-shadow: none !important;
+     border: 1px solid #e0e0e0 !important;
+     padding: 15px !important;
+   }
+  }
+ /* ======= HERO / HEADER SECTION ======= */
+  
+  /* Base hero section styling */
+  section {
+   padding: 100px 20px !important;
+   background-color: #fff !important;
+   font-family: 'Inter', sans-serif !important;
+   position: relative !important;
+   overflow: hidden !important;
+  }
+  
+  section > div {
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   display: flex !important;
+   flex-wrap: wrap !important;
+   align-items: center !important;
+   justify-content: space-between !important;
+   gap: 50px !important;
+  }
+  
+  /* Hero headings */
+  h1 {
+   font-size: 52px !important;
+   font-weight: 800 !important;
+   line-height: 1.1 !important;
+   margin-bottom: 25px !important;
+   color: #000 !important;
+   letter-spacing: -0.02em !important;
+  }
+  
+  /* Standard hero paragraph */
+  section p {
+   font-size: 18px !important;
+   line-height: 1.6 !important;
+   color: #333 !important;
+   margin-bottom: 30px !important;
+   max-width: 600px !important;
+  }
+  
+  /* CTA button container */
+  .cta-buttons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 40px !important;
+   flex-wrap: wrap !important;
+  }
+  
+  /* CTA buttons styling */
+  .cta-buttons a {
+   display: inline-block !important;
+   padding: 15px 32px !important;
+   text-decoration: none !important;
+   font-weight: 600 !important;
+   font-size: 16px !important;
+   border-radius: 4px !important;
+   transition: all 0.3s ease !important;
+   width: 200px !important;
+  }
+  
+  /* Primary CTA button */
+  .cta-buttons a:first-child {
+   background-color: #000 !important;
+   color: #fff !important;
+   border: 2px solid #000 !important;
+  }
+  
+  .cta-buttons a:first-child:hover {
+   background-color: #333 !important;
+   border-color: #333 !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  /* Secondary CTA button */
+  .cta-buttons a:nth-child(2) {
+   background-color: #fff !important;
+   color: #000 !important;
+   border: 2px solid #000 !important;
+  }
+  
+  .cta-buttons a:nth-child(2):hover {
+   background-color: #f5f5f5 !important;
+   transform: translateY(-2px) !important;
+   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  /* Hero image styling */
+  section img {
+   max-width: 100% !important;
+   height: auto !important;
+   border-radius: 8px !important;
+   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
+  }
+  
+  /* Centered hero variant */
+  .hero-section.centered-hero {
+   text-align: center !important;
+  }
+  
+  .hero-section.centered-hero h1,
+  .hero-section.centered-hero p {
+   margin-left: auto !important;
+   margin-right: auto !important;
+  }
+  
+  .hero-section.centered-hero .cta-buttons {
+   justify-content: center !important;
+  }
+  
+  .hero-section.centered-hero img {
+   margin-top: 50px !important;
+   max-width: 800px !important;
+   margin-left: auto !important;
+   margin-right: auto !important;
+  }
+  
+  /* Hero with cards variant */
+  .hero-left-cards {
+   padding: 100px 20px !important;
+   background-color: #f8f8f8 !important;
+   overflow: hidden !important;
+  }
+  
+  .hero-left-cards .hero-container {
+   display: flex !important;
+   justify-content: space-between !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   gap: 60px !important;
+  }
+  
+  .hero-left-cards .hero-left {
+   flex: 1 !important;
+   max-width: 500px !important;
+   display: flex !important;
+   flex-direction: column !important;
+   justify-content: center !important;
+  }
+  
+  .hero-left-cards .hero-logo {
+   height: 50px !important;
+   width: auto !important;
+   margin-bottom: 30px !important;
+   /* Temporary logo styling if image is missing */
+   background-color: #000 !important;
+   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M10,5 h80 v20 h-80 Z'/%3E%3C/svg%3E") !important;
+   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M10,5 h80 v20 h-80 Z'/%3E%3C/svg%3E") !important;
+   mask-size: contain !important;
+   -webkit-mask-size: contain !important;
+   mask-repeat: no-repeat !important;
+   -webkit-mask-repeat: no-repeat !important;
+   mask-position: center !important;
+   -webkit-mask-position: center !important;
+  }
+  
+  .hero-left-cards .hero-label {
+   display: inline-block !important;
+   font-size: 14px !important;
+   font-weight: 700 !important;
+   letter-spacing: 1.5px !important;
+   text-transform: uppercase !important;
+   color: #555 !important;
+   margin-bottom: 20px !important;
+   position: relative !important;
+   padding-bottom: 10px !important;
+  }
+  
+  .hero-left-cards .hero-label:after {
+   content: '' !important;
+   position: absolute !important;
+   bottom: 0 !important;
+   left: 0 !important;
+   width: 40px !important;
+   height: 3px !important;
+   background-color: #000 !important;
+  }
+  
+  .hero-left-cards .hero-heading {
+   font-size: 48px !important;
+   font-weight: 800 !important;
+   line-height: 1.1 !important;
+   color: #000 !important;
+   margin-top: 0 !important;
+  }
+  
+  .hero-left-cards .hero-right {
+   flex: 1 !important;
+   display: grid !important;
+   grid-template-columns: 1fr 1fr !important;
+   grid-template-rows: auto auto !important;
+   gap: 30px !important;
+   align-items: stretch !important;
+  }
+  
+  .hero-left-cards .hero-card {
+   background-color: #fff !important;
+   padding: 25px !important;
+   border-radius: 12px !important;
+   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
+   display: flex !important;
+   flex-direction: column !important;
+   transform: translateY(0) !important;
+   transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+   height: 100% !important;
+   position: relative !important;
+   z-index: 1 !important;
+  }
+  
+  .hero-left-cards .hero-card:hover {
+   transform: translateY(-8px) !important;
+   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-left-cards .hero-card:first-child {
+   grid-column: 1 / 2 !important;
+   grid-row: 1 / 2 !important;
+  }
+  
+  .hero-left-cards .hero-card:last-child {
+   grid-column: 2 / 3 !important;
+   grid-row: 1 / 3 !important;
+  }
+  
+  .hero-left-cards .hero-card h3 {
+   font-size: 22px !important;
+   font-weight: 700 !important;
+   margin-top: 0 !important;
+   margin-bottom: 20px !important;
+   color: #000 !important;
+  }
+  
+  .hero-left-cards .card-img {
+   width: 100% !important;
+   height: 200px !important;
+   border-radius: 6px !important;
+   margin-bottom: 20px !important;
+   object-fit: cover !important;
+   background: linear-gradient(135deg, #e6e6e6 0%, #d9d9d9 100%) !important;
+   position: relative !important;
+   overflow: hidden !important;
+  }
+  
+  .hero-left-cards .card-buttons {
+   display: flex !important;
+   gap: 12px !important;
+   margin-top: 25px !important;
+   width: 100% !important;
+  }
+  
+  .hero-left-cards .btn-filled {
+   flex: 1 !important;
+   display: inline-block !important;
+   padding: 14px 0 !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   text-decoration: none !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   border-radius: 8px !important;
+   transition: all 0.3s ease !important;
+   text-align: center !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  .hero-left-cards .btn-filled:hover {
+   background-color: #333 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
+  }
+  
+  .hero-left-cards .btn-outlined {
+   flex: 1 !important;
+   display: inline-block !important;
+   padding: 14px 0 !important;
+   background-color: transparent !important;
+   color: #000 !important;
+   border: 2px solid #000 !important;
+   text-decoration: none !important;
+   font-weight: 600 !important;
+   font-size: 14px !important;
+   border-radius: 8px !important;
+   transition: all 0.3s ease !important;
+   text-align: center !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  .hero-left-cards .btn-outlined:hover {
+   background-color: rgba(0,0,0,0.05) !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
+  }
+  
+  /* Centered art hero variant */
+  .hero-centered-art {
+   text-align: center !important;
+   padding: 140px 20px !important;
+   position: relative !important;
+   overflow: hidden !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   min-height: 600px !important;
+   display: flex !important;
+   flex-direction: column !important;
+   justify-content: center !important;
+   align-items: center !important;
+  }
+  
+  .hero-centered-art:before {
+   content: '' !important;
+   position: absolute !important;
+   top: 0 !important;
+   left: 0 !important;
+   right: 0 !important;
+   bottom: 0 !important;
+   background: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 100%) !important;
+   z-index: 1 !important;
+  }
+  
+  .hero-centered-art .hero-art-left,
+  .hero-centered-art .hero-art-right {
+   position: absolute !important;
+   z-index: 0 !important;
+   height: 100% !important;
+   width: 40% !important;
+   opacity: 0.15 !important;
+   background-size: contain !important;
+   background-repeat: no-repeat !important;
+   background-position: center !important;
+   filter: blur(1px) !important;
+  }
+  
+  .hero-centered-art .hero-art-left {
+   left: -5% !important;
+   top: 0 !important;
+   background-image: radial-gradient(circle at 30% 50%, #fff 0%, transparent 60%) !important;
+   transform: rotate(-10deg) !important;
+  }
+  
+  .hero-centered-art .hero-art-right {
+   right: -5% !important;
+   top: 0 !important;
+   background-image: radial-gradient(circle at 70% 50%, #fff 0%, transparent 60%) !important;
+   transform: rotate(10deg) !important;
+  }
+  
+  .hero-centered-art .hero-heading {
+   position: relative !important;
+   z-index: 2 !important;
+   font-size: 64px !important;
+   font-weight: 800 !important;
+   line-height: 1.1 !important;
+   margin-bottom: 40px !important;
+   color: #fff !important;
+   max-width: 800px !important;
+   text-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
+  }
+  
+  .hero-centered-art .btn-teal {
+   position: relative !important;
+   z-index: 2 !important;
+   display: inline-block !important;
+   padding: 20px 48px !important;
+   background-color: #fff !important;
+   color: #000 !important;
+   text-decoration: none !important;
+   font-weight: 700 !important;
+   font-size: 18px !important;
+   border-radius: 100px !important;
+   transition: all 0.3s ease !important;
+   box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  .hero-centered-art .btn-teal:hover {
+   background-color: #f0f0f0 !important;
+   transform: translateY(-5px) !important;
+   box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
+  }
+  
+  .hero-centered-art .btn-teal:active {
+   transform: translateY(-2px) !important;
+   box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
+  }
+  
+  .subsection-centered {
+   text-align: center !important;
+   padding: 100px 20px !important;
+   background-color: #fff !important;
+   position: relative !important;
+   border-top: 1px solid #f0f0f0 !important;
+   display: flex !important;
+   justify-self: center !important;
+   align-items: center !important;
+   flex-direction: column !important;
+  }
+  
+  .subsection-centered:before {
+   content: '' !important;
+   position: absolute !important;
+   top: -50px !important;
+   left: 50% !important;
+   transform: translateX(-50%) !important;
+   width: 100px !important;
+   height: 100px !important;
+   background-color: #fff !important;
+   border-radius: 50% !important;
+   box-shadow: 0 -10px 30px rgba(0,0,0,0.05) !important;
+   z-index: 10 !important;
+   display: flex !important;
+   justify-content: center !important;
+   align-items: center !important;
+  }
+  
+  .subsection-centered:after {
+   content: '↓' !important;
+   position: absolute !important;
+   top: -25px !important;
+   left: 50% !important;
+   transform: translateX(-50%) !important;
+   color: #000 !important;
+   font-size: 24px !important;
+   font-weight: 700 !important;
+   z-index: 11 !important;
+  }
+  
+  .subsection-centered h2 {
+   font-size: 48px !important;
+   font-weight: 800 !important;
+   margin-bottom: 30px !important;
+   color: #000 !important;
+   position: relative !important;
+   display: inline-block !important;
+  }
+  
+  .subsection-centered h2:after {
+   content: '' !important;
+   position: absolute !important;
+   bottom: -10px !important;
+   left: 50% !important;
+   transform: translateX(-50%) !important;
+   width: 60px !important;
+   height: 4px !important;
+   background-color: #000 !important;
+  }
+  
+  .subsection-centered p {
+   font-size: 20px !important;
+   line-height: 1.7 !important;
+   color: #333 !important;
+   max-width: 800px !important;
+   margin: 0 auto !important;
+   font-weight: 400 !important;
+  }
+  
+  /* Responsive styling */
+  /* Image fix for missing images */
+  img[src="placeholder.png"], 
+  img[src="image-top-right.jpg"], 
+  img[src="image-bottom-left.jpg"],
+  img[src="divi-logo.svg"],
+  img[src="abstract-left.png"],
+  img[src="abstract-right.png"] {
+   position: relative !important;
+  }
+  
+  img[src="placeholder.png"]:after,
+  img[src="image-top-right.jpg"]:after,
+  img[src="image-bottom-left.jpg"]:after,
+  img[src="abstract-left.png"]:after,
+  img[src="abstract-right.png"]:after {
+   content: '' !important;
+   position: absolute !important;
+   top: 0 !important;
+   left: 0 !important;
+   width: 100% !important;
+   height: 100% !important;
+   background-color: #e0e0e0 !important;
+   background-image: linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 75%, #d0d0d0 75%, #d0d0d0), 
+                     linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 75%, #d0d0d0 75%, #d0d0d0) !important;
+   background-size: 20px 20px !important;
+   background-position: 0 0, 10px 10px !important;
+   z-index: 1 !important;
+  }
+  
+  img[src="divi-logo.svg"]:after {
+   content: 'LOGO' !important;
+   position: absolute !important;
+   top: 0 !important;
+   left: 0 !important;
+   width: 100% !important;
+   height: 100% !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-weight: bold !important;
+   z-index: 1 !important;
+  }
+  
+  /* Responsive styles */
+  @media (max-width: 992px) {
+   section > div {
+     flex-direction: column !important;
+     text-align: center !important;
+   }
+   
+   h1 {
+     font-size: 42px !important;
+   }
+   
+   .cta-buttons {
+     justify-content: center !important;
+   }
+   
+   section p {
+     margin-left: auto !important;
+     margin-right: auto !important;
+   }
+   
+   /* Card hero responsive fixes */
+   .hero-left-cards .hero-container {
+     flex-direction: column !important;
+     gap: 40px !important;
+   }
+   
+   .hero-left-cards .hero-left {
+     text-align: center !important;
+     max-width: 100% !important;
+     align-items: center !important;
+   }
+   
+   .hero-left-cards .hero-label:after {
+     left: 50% !important;
+     transform: translateX(-50%) !important;
+     width: 60px !important;
+   }
+   
+   .hero-left-cards .hero-right {
+     grid-template-columns: repeat(2, 1fr) !important;
+     grid-template-rows: auto !important;
+   }
+   
+   .hero-left-cards .hero-card:last-child {
+     grid-column: auto !important;
+     grid-row: auto !important;
+   }
+   
+   /* Art hero responsive fixes */
+   .hero-centered-art {
+     padding: 100px 20px !important;
+   }
+   
+   .hero-centered-art .hero-heading {
+     font-size: 48px !important;
+     padding: 0 20px !important;
+   }
+   
+   .hero-centered-art .hero-art-left,
+   .hero-centered-art .hero-art-right {
+     width: 50% !important;
+     opacity: 0.1 !important;
+   }
+   
+   .subsection-centered:before {
+     width: 80px !important;
+     height: 80px !important;
+     top: -40px !important;
+   }
+  }
+  
+  @media (max-width: 768px) {
+   section {
+     padding: 60px 20px !important;
+   }
+   
+   h1 {
+     font-size: 36px !important;
+   }
+   
+   section p {
+     font-size: 16px !important;
+   }
+   
+   .cta-buttons {
+     flex-direction: column !important;
+     width: 100% !important;
+   }
+   
+   .cta-buttons a {
+     width: 100% !important;
+     text-align: center !important;
+     margin-bottom: 10px !important;
+   }
+   
+   /* Card hero mobile fixes */
+   .hero-left-cards {
+     padding: 60px 20px !important;
+   }
+   
+   .hero-left-cards .hero-heading {
+     font-size: 36px !important;
+   }
+   
+   .hero-left-cards .hero-right {
+     grid-template-columns: 1fr !important;
+   }
+   
+   .hero-left-cards .hero-card {
+     padding: 20px !important;
+   }
+   
+   .hero-left-cards .card-img {
+     height: 180px !important;
+   }
+   
+   /* Art hero mobile fixes */
+   .hero-centered-art {
+     padding: 80px 20px !important;
+     min-height: 500px !important;
+   }
+   
+   .hero-centered-art .hero-heading {
+     font-size: 36px !important;
+   }
+   
+   .hero-centered-art .btn-teal {
+     padding: 16px 32px !important;
+     font-size: 16px !important;
+     width: calc(100% - 40px) !important;
+     max-width: 300px !important;
+   }
+   
+   .subsection-centered h2 {
+     font-size: 36px !important;
+   }
+   
+   .subsection-centered p {
+     font-size: 16px !important;
+   }
+  }
+  
+  /* Extra small devices */
+  @media (max-width: 480px) {
+   .hero-centered-art .hero-heading {
+     font-size: 32px !important;
+   }
+   
+   .hero-left-cards .hero-heading {
+     font-size: 32px !important;
+   }
+   
+   .subsection-centered:before {
+     width: 60px !important;
+     height: 60px !important;
+     top: -30px !important;
+   }
+   
+   .subsection-centered:after {
+     font-size: 20px !important;
+     top: -20px !important;
+   }
+  }
+
+/* ======= IMAGE GRID ======= */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  padding: 40px;
+}
+
+.image-grid div {
+  background: #ddd;
+  aspect-ratio: 1;
+  border-radius: 4px;
+}
+
+/* ======= BODY SECTION (2 COLUMN) ======= */
+.feature-section {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 60px 40px;
+  align-items: center;
+  gap: 40px;
+}
+
+.feature-section img {
+  width: 300px;
+  height: 300px;
+  background: #ccc;
+  object-fit: cover;
+}
+
+.feature-content {
+  flex: 1;
+}
+
+.feature-content h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.feature-content p {
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 20px;
+}
+
+.feature-content ul {
+  list-style: none;
+  padding: 0;
+}
+
+.feature-content ul li {
+  padding-left: 20px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.feature-content ul li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: #007bff;
+}
+
+/* ======= TESTIMONIAL SECTION ======= */
+/* 🔲 Main Section */
+.testimonial-section {
+  padding: 80px 40px;
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  color: #fff;
+}
+
+/* 🔳 Optional Background Overlay */
+.testimonial-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+}
+
+.testimonial-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* 🏷️ Heading */
+.testimonial-heading {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+}
+
+.testimonial-subtitle {
+  color: #ddd;
+  margin-bottom: 40px;
+  font-size: 1rem;
+}
+
+/* 🧑‍💼 Grid Layout */
+.testimonial-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 30px;
+  justify-content: center;
+}
+
+/* 📦 Testimonial Card */
+.testimonial-card {
+  background: #fff;
+  color: #222;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+  max-width: 320px;
+  margin: 0 auto;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.testimonial-card:hover {
+  transform: translateY(-5px);
+}
+
+/* 🖼️ Avatar Wrapper with fallback */
+.testimonial-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #ccc;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.testimonial-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* 🗣️ Quote Text */
+.testimonial-card blockquote {
+  font-style: italic;
+  color: #444;
+  margin: 15px 0;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+/* ⭐ Star Ratings */
+.stars {
+  color: #f39c12;
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+}
+  /* 🔲 Placeholder block */
+.profile {
+  width: 40px;
+  height: 40px;
+  background: #ccc;
+  border-radius: 50%;
+  margin: 0 auto 10px;
+}
+
+/* 🧑 Avatar image */
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}
+
+/* 🧾 Author Info */
+.author {
+  margin-top: 15px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 🟡 CTA Button */
+.testimonial-cta {
+  display: inline-block;
+  margin-top: 40px;
+  background: #ffc107;
+  color: #000;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: 0.3s ease;
+}
+
+.testimonial-cta:hover {
+  background: #e6ac00;
+}
+
+/* 📞 Contact Info */
+.testimonial-contact {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #ccc;
+}
+
+.testimonial-contact p {
+  margin: 5px 0;
+}
+
+/* 📱 Responsive Adjustments */
+@media (max-width: 768px) {
+  .testimonial-heading {
+    font-size: 1.5rem;
+  }
+
+  .testimonial-subtitle {
+    font-size: 0.95rem;
+  }
+
+  .testimonial-card {
+    max-width: 100%;
+  }
+
+  .testimonial-grid {
+    gap: 20px;
+  }
+
+  .testimonial-cta {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+
+
+  /* ======= FOOTER ======= */
+  /* Modern Footer Styles - Refined & Elegant */
+  * {
+   margin: 0 !important;
+   padding: 0 !important;
+   box-sizing: border-box !important;
+  }
+  
+  body {
+   font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
+   line-height: 1.6 !important;
+   color: #333 !important;
+  }
+  
+  /* Footer 1 - Clean Modern Style */
+  .footer-1 {
+       background: linear-gradient(to right, #f8faff, #ffffff) !important;
+       padding: 60px 5% 40px !important;
+       font-size: 15px !important;
+       border-top: 1px solid #eaeaea !important;
+     }
+  
+     .footer-1 .footer-top,
+     .footer-1 .footer-bottom {
+       display: flex !important;
+       justify-content: space-between !important;
+       flex-wrap: wrap !important;
+       gap: 30px !important;
+       margin-bottom: 30px !important;
+       align-items: center !important;
+     }
+  
+     .footer-1 .logo-1 {
+       height: 38px !important;
+       filter: brightness(1.1) !important;
+     }
+  
+     .footer-1 .footer-nav,
+     .footer-1 .footer-legal {
+       display: flex !important;
+       gap: 25px !important;
+       list-style: none !important;
+       flex-wrap: wrap !important;
+     }
+  
+     .footer-1 .footer-nav {
+       font-weight: 500 !important;
+     }
+  
+     .footer-1 .footer-nav a,
+     .footer-1 .footer-legal a {
+       color: #4a5568 !important;
+       text-decoration: none !important;
+       transition: all 0.25s ease !important;
+       position: relative !important;
+     }
+  
+     .footer-1 .footer-nav a:hover,
+     .footer-1 .footer-legal a:hover {
+       color: #3366ff !important;
+     }
+  
+     .footer-1 .footer-nav a::after {
+       content: '' !important;
+       position: absolute !important;
+       width: 0 !important;
+       height: 2px !important;
+       bottom: -6px !important;
+       left: 0 !important;
+       background-color: #3366ff !important;
+       transition: width 0.3s ease !important;
+     }
+  
+     .footer-1 .footer-nav a:hover::after {
+       width: 100% !important;
+     }
+  
+     .footer-1 .footer-social {
+       display: flex !important;
+       gap: 16px !important;
+     }
+  
+     .footer-1 .footer-social a {
+       width: 38px !important;
+       height: 38px !important;
+       background: #fff !important;
+       border-radius: 50% !important;
+       display: flex !important;
+       align-items: center !important;
+       justify-content: center !important;
+       font-size: 18px !important;
+       color: #4a5568 !important;
+       transition: all 0.3s ease !important;
+       border: 1px solid #e2e8f0 !important;
+       text-decoration: none !important;
+       box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
+     }
+  
+     .footer-1 .footer-social a:hover {
+       background: #333 !important;
+       color: #fff !important;
+       transform: translateY(-3px) !important;
+       box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
+     }
+  
+     .footer-1 .footer-bottom {
+       color: #888 !important;
+       font-size: 14px !important;
+       padding-top: 20px !important;
+       border-top: 1px solid #eaeaea !important;
+     }
+  
+     .footer-1 .footer-legal a {
+       color: #888 !important;
+     }
+  
+     .footer-1 .footer-legal a:hover {
+       color: #555 !important;
+     }
+  
+     /* Responsive Adjustments */
+     @media (max-width: 768px) {
+       .footer-1 .footer-top,
+       .footer-1 .footer-bottom {
+         flex-direction: column !important;
+         align-items: flex-start !important;
+       }
+       
+       .footer-1 .footer-bottom {
+         text-align: center !important;
+         align-items: center !important;
+       }
+     }
+  
+     /* Animation Effects */
+     @keyframes fadeIn {
+       from { opacity: 0; transform: translateY(10px); !important }
+       to { opacity: 1; transform: translateY(0); !important }
+     }
+  
+     .footer-1 {
+       animation: fadeIn 0.8s ease-out forwards !important;
+     }
+  
+  /* Footer 2 - Address & Links Style */
+  footer:not([class]) {
+   background: #fafafa !important;
+   padding: 50px 5% !important;
+   display: grid !important;
+   grid-template-columns: 1fr 2fr !important;
+   gap: 40px !important;
+   color: #333 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  footer:not([class]) > div:first-child {
+   display: flex !important;
+   flex-direction: column !important;
+   gap: 15px !important;
+  }
+  
+  footer:not([class]) > div:first-child img {
+   max-width: 140px !important;
+   margin-bottom: 10px !important;
+  }
+  
+  footer:not([class]) a {
+   color: #555 !important;
+   text-decoration: none !important;
+   transition: color 0.2s ease !important;
+  }
+  
+  footer:not([class]) a:hover {
+   color: #000 !important;
+  }
+  
+  footer:not([class]) p {
+   margin-bottom: 10px !important;
+   color: #555 !important;
+   font-size: 15px !important;
+  }
+  
+  footer:not([class]) > div:nth-child(2) {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
+   gap: 30px !important;
+  }
+  
+  footer:not([class]) .link-column p {
+   margin-bottom: 12px !important;
+  }
+  
+  footer:not([class]) .social-icons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 20px !important;
+  }
+  
+  footer:not([class]) .social-icons a {
+   width: 34px !important;
+   height: 34px !important;
+   background: #fff !important;
+   border-radius: 50% !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-size: 16px !important;
+   color: #333 !important;
+   transition: all 0.3s ease !important;
+   border: 1px solid #eaeaea !important;
+  }
+  
+  footer:not([class]) .social-icons a:hover {
+   background: #333 !important;
+   color: #fff !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
+  }
+  
+  /* Footer MDB - Professional Multi-Section */
+  .footer-mdb {
+   background: #fff !important;
+   color: #333 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  .footer-mdb.dark {
+   background: #f8f8f8 !important;
+   color: #333 !important;
+  }
+  
+  .footer-mdb .top-bar {
+   background-color: #f0f0f0 !important;
+   padding: 12px 5% !important;
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+   border-bottom: 1px solid #eaeaea !important;
+  }
+  
+  .footer-mdb .top-bar p {
+   margin: 0 !important;
+   font-size: 14px !important;
+   color: #666 !important;
+  }
+  
+  .footer-mdb .top-bar a {
+   margin-left: 15px !important;
+   color: #555 !important;
+   transition: color 0.2s ease !important;
+   font-size: 16px !important;
+  }
+  
+  .footer-mdb .top-bar a:hover {
+   color: #000 !important;
+  }
+  
+  .footer-mdb .footer-columns {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
+   gap: 40px !important;
+   padding: 50px 5% !important;
+  }
+  
+  .footer-mdb .footer-col h4 {
+   margin-bottom: 25px !important;
+   font-weight: 600 !important;
+   letter-spacing: 0.5px !important;
+   position: relative !important;
+   padding-bottom: 12px !important;
+   color: #222 !important;
+   font-size: 17px !important;
+  }
+  
+  .footer-mdb .footer-col h4::after {
+   content: '' !important;
+   position: absolute !important;
+   width: 40px !important;
+   height: 2px !important;
+   background-color: #333 !important;
+   bottom: 0 !important;
+   left: 0 !important;
+  }
+  
+  .footer-mdb .footer-col p {
+   margin-bottom: 12px !important;
+   color: #555 !important;
+   font-size: 15px !important;
+  }
+  
+  .footer-mdb .footer-col p a {
+   color: #555 !important;
+   text-decoration: none !important;
+   transition: color 0.2s ease !important;
+   position: relative !important;
+   display: inline-block !important;
+  }
+  
+  .footer-mdb .footer-col p a:hover {
+   color: #000 !important;
+   padding-left: 5px !important;
+  }
+  
+  .footer-mdb .footer-bottom {
+   text-align: center !important;
+   padding: 20px 0 !important;
+   background-color: #f0f0f0 !important;
+   font-size: 14px !important;
+   color: #666 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  /* Footer 4 - Company Style */
+  footer:nth-of-type(2) {
+   background: #fafafa !important;
+   padding: 60px 5% 30px !important;
+   color: #333 !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  footer:nth-of-type(2) > div:first-child {
+   margin-bottom: 40px !important;
+   text-align: center !important;
+  }
+  
+  footer:nth-of-type(2) h2 {
+   font-size: 26px !important;
+   letter-spacing: 1px !important;
+   margin-bottom: 5px !important;
+   font-weight: 700 !important;
+   color: #222 !important;
+  }
+  
+  footer:nth-of-type(2) > div:first-child p {
+   color: #666 !important;
+   font-size: 15px !important;
+   letter-spacing: 0.5px !important;
+  }
+  
+  footer:nth-of-type(2) > div:nth-child(2) {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
+   gap: 30px !important;
+   max-width: 900px !important;
+   margin: 0 auto 40px !important;
+  }
+  
+  footer:nth-of-type(2) .link-col p {
+   margin-bottom: 12px !important;
+  }
+  
+  footer:nth-of-type(2) .link-col a {
+   color: #555 !important;
+   text-decoration: none !important;
+   transition: all 0.2s ease !important;
+   position: relative !important;
+   display: inline-block !important;
+  }
+  
+  footer:nth-of-type(2) .link-col a:hover {
+   color: #000 !important;
+   transform: translateX(5px) !important;
+  }
+  
+  footer:nth-of-type(2) .social-icons {
+   display: flex !important;
+   gap: 15px !important;
+   justify-content: center !important;
+   margin-bottom: 30px !important;
+  }
+  
+  footer:nth-of-type(2) .social-icons a {
+   width: 38px !important;
+   height: 38px !important;
+   background: #fff !important;
+   border-radius: 50% !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-size: 18px !important;
+   color: #333 !important;
+   transition: all 0.3s ease !important;
+   border: 1px solid #eaeaea !important;
+   text-decoration: none !important;
+  }
+  
+  footer:nth-of-type(2) .social-icons a:hover {
+   background: #333 !important;
+   color: #fff !important;
+   transform: translateY(-5px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+  }
+  
+  footer:nth-of-type(2) > p {
+   text-align: center !important;
+   color: #888 !important;
+   font-size: 14px !important;
+   padding-top: 20px !important;
+   border-top: 1px solid #eaeaea !important;
+  }
+  
+  /* Contact Section - Modern Clean */
+  section {
+   background: linear-gradient(to right, #f8f8f8, #fff) !important;
+   color: #333 !important;
+   padding: 80px 5% !important;
+  }
+  
+  section > div {
+   display: grid !important;
+   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
+   gap: 60px !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+  }
+  
+  section > div > div {
+   display: flex !important;
+   flex-direction: column !important;
+   justify-content: center !important;
+   text-align: center !important;
+  }
+  
+  section h2 {
+   font-size: 36px !important;
+   margin-bottom: 25px !important;
+   font-weight: 700 !important;
+   color: #222 !important;
+   position: relative !important;
+  }
+  
+  
+  section p {
+   margin-bottom: 25px !important;
+   line-height: 1.8 !important;
+   color: #555 !important;
+   font-size: 16px !important;
+  }
+  
+  section a {
+   color: #333 !important;
+   text-decoration: none !important;
+   transition: all 0.3s ease !important;
+  }
+  
+  section a[href^="#"] {
+   display: inline-block !important;
+   padding: 14px 28px !important;
+   background-color: #333 !important;
+   color: #fff !important;
+   font-weight: 600 !important;
+   border-radius: 4px !important;
+   letter-spacing: 0.5px !important;
+   margin-top: 10px !important;
+   transition: all 0.3s ease !important;
+   border: 2px solid #333 !important;
+  }
+  
+  section a[href^="#"]:hover {
+   background-color: transparent !important;
+   color: #333 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+  }
+  
+  section strong {
+   color: #222 !important;
+   font-weight: 600 !important;
+  }
+  
+  section div p:has(strong) {
+   display: flex !important;
+   align-items: center !important;
+   gap: 10px !important;
+  }
+  
+  section div p:has(strong) strong {
+   min-width: 70px !important;
+  }
+  
+  section .social-icons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 20px !important;
+  }
+  
+  section .social-icons a {
+   width: 40px !important;
+   height: 40px !important;
+   background: #fff !important;
+   border-radius: 50% !important;
+   display: flex !important;
+   align-items: center !important;
+   justify-content: center !important;
+   font-size: 18px !important;
+   color: #333 !important;
+   transition: all 0.3s ease !important;
+   border: 1px solid #eaeaea !important;
+  }
+  
+  section .social-icons a:hover {
+   background: #333 !important;
+   color: #fff !important;
+   transform: translateY(-5px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
+  }
+  
+  /* Responsive Adjustments */
+  @media (max-width: 768px) {
+   .footer-1 .footer-top,
+   .footer-1 .footer-bottom {
+     flex-direction: column !important;
+     align-items: flex-start !important;
+   }
+   
+   .footer-1 .footer-bottom {
+     text-align: center !important;
+     align-items: center !important;
+   }
+   
+   .footer-mdb .top-bar {
+     flex-direction: column !important;
+     gap: 10px !important;
+     text-align: center !important;
+     padding: 15px 5% !important;
+   }
+   
+   footer:not([class]) {
+     grid-template-columns: 1fr !important;
+   }
+   
+   section > div {
+     grid-template-columns: 1fr !important;
+   }
+  }
+  
+  /* Animation Effects */
+  @keyframes fadeIn {
+   from { opacity: 0 !important; transform: translateY(10px) !important; }
+   to { opacity: 1 !important; transform: translateY(0) !important; }
+  }
+  
+  .footer-1, 
+  .footer-mdb,
+  footer:not([class]),
+  footer:nth-of-type(2),
+  section {
+   animation: fadeIn 0.8s ease-out forwards !important;
+  }
+  
+/* Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body, html {
+  width: 100%;
+  font-family: 'Segoe UI', sans-serif;
+}
+
+/* 🧱 All section wrapper spacing */
+section, header, footer, nav, div {
+  margin-bottom: 30px;
+}
+
+/* Layout blocks stay inside */
+.canvas-page {
+  overflow-wrap: break-word;
+}
+
+/* Prevent buttons from floating off */
+button {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* Keep max-width structure */
+.container,
+.feature-section,
+.hero-header {
+  max-width: 100%;
+  width: 100%;
+}
+
+.cta-section {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+  /* ========== CTA SECTION STYLES ========== */
+  /* Common Section Styles */
+  .subscriptionsection,
+  .ctablock,
+  .ctasection,
+  .contactsignupsection,
+  .herobanner {
+   padding: 80px 0 !important;
+   width: 100vw !important;
+   background-color: #fff !important;
+   color: #000 !important;
+   box-sizing: border-box !important;
+  }
+  
+  /* Improved Subscription Section */
+  .subscriptionsection {
+   padding: 80px 0 !important;
+   width: 100vw !important;
+   background-color: #fff !important;
+   box-sizing: border-box !important;
+  }
+  
+  .subscription-section {
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   width: 100% !important;
+   max-width: 1000px !important;
+   margin: 0 auto !important;
+   text-align: center !important;
+   padding: 70px 5% !important;
+   border: 2px solid #000 !important;
+   border-radius: 0 !important;
+   background-color: #fff !important;
+   box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
+  }
+  
+  .subscription-heading {
+   font-size: 38px !important;
+   font-weight: 800 !important;
+   margin-bottom: 20px !important;
+   color: #000 !important;
+   letter-spacing: -0.5px !important;
+   line-height: 1.2 !important;
+  }
+  
+  .subscription-description {
+   font-size: 18px !important;
+   color: #444 !important;
+   margin-bottom: 40px !important;
+   max-width: 600px !important;
+   line-height: 1.7 !important;
+  }
+  
+  .subscription-section div {
+   margin-bottom: 35px !important;
+  }
+  
+  /* Add this to your CSS to style the "Sign Up" text as a button */
+  .subscription-section > :nth-child(2) {
+   padding: 16px 36px !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   border: 2px solid #000 !important;
+   border-radius: 8px !important;
+   font-weight: 600 !important;
+   font-size: 16px !important;
+   letter-spacing: 0.5px !important;
+   transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
+   cursor: auto !important;
+   display: inline-block !important;
+   text-transform: uppercase !important;
+   margin-bottom: 25px !important;
+   position: relative !important;
+   overflow: hidden !important;
+  }
+  
+  .subscription-section > :nth-child(2):hover {
+   background-color: #fff !important;
+   color: #000 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
+  }
+  
+  .disclaimer {
+   font-size: 14px !important;
+   color: #666 !important;
+   max-width: 800px !important;
+   line-height: 1.5 !important;
+   margin: 0 auto !important;
+  }
+  
+  .link-text {
+   color: #000 !important;
+   text-decoration: underline !important;
+   font-weight: 500 !important;
+   position: relative !important;
+   transition: all 0.3s ease-out !important;
+   padding-bottom: 2px !important;
+  }
+  
+  .link-text:hover {
+   color: #000 !important;
+   text-decoration: none !important;
+  }
+  
+  .link-text:after {
+   content: '' !important;
+   position: absolute !important;
+   width: 0 !important;
+   height: 2px !important;
+   bottom: 0 !important;
+   left: 0 !important;
+   background-color: #000 !important;
+   transition: width 0.3s ease !important;
+  }
+  
+  .link-text:hover:after {
+   width: 100% !important;
+  }
+  
+  /* CTA Block */
+  .cta-section {
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   text-align: center !important;
+   padding: 70px 5% !important;
+   background-color: #f2f2f2 !important;
+   border-radius: 0 !important;
+   width: 100% !important;
+   max-width: 100vw !important;
+   margin: 0 !important;
+   box-sizing: border-box !important;
+  }
+  
+  .cta-buttons {
+   display: flex !important;
+   gap: 15px !important;
+   margin-top: 25px !important;
+  }
+  
+  .btn-filled {
+   padding: 12px 28px !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   border: 2px solid #000 !important;
+   border-radius: 4px !important;
+   font-weight: 600 !important;
+   transition: all 0.3s ease !important;
+  }
+  
+  .btn-filled:hover {
+   background-color: #333 !important;
+  }
+  
+  .btn-outlined {
+   padding: 12px 28px !important;
+   background-color: transparent !important;
+   color: #000 !important;
+   border: 2px solid #000 !important;
+   border-radius: 4px !important;
+   font-weight: 600 !important;
+   transition: all 0.3s ease !important;
+  }
+  
+  .btn-outlined:hover {
+   background-color: #000 !important;
+   color: #fff !important;
+  }
+  
+  /* CTA Gradient Section */
+  .cta-gradient-section {
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   text-align: center !important;
+   padding: 80px 20px !important;
+   background: linear-gradient(135deg, #f5f5f5, #e0e0e0) !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   border-radius: 8px !important;
+  }
+  
+  /* Contact Signup Section */
+  .contact-signup-section {
+   display: flex !important;
+   justify-content: space-between !important;
+   align-items: center !important;
+   padding: 60px 40px !important;
+   background-color: #f8f8f8 !important;
+   max-width: 1200px !important;
+   margin: 0 auto !important;
+   border-radius: 8px !important;
+   border: 1px solid #e0e0e0 !important;
+  }
+  
+  .contact-signup-section div {
+   max-width: 60% !important;
+  }
+  
+  /* Hero Banner */
+  .hero-banner {
+   position: relative !important;
+   display: flex !important;
+   flex-direction: column !important;
+   align-items: center !important;
+   justify-content: center !important;
+   text-align: center !important;
+   padding: 100px 20px !important;
+   background-color: #f2f2f2 !important;
+   overflow: hidden !important;
+   border-radius: 8px !important;
+  }
+  
+  .hero-heading {
+   font-size: 48px !important;
+   font-weight: 800 !important;
+   margin-bottom: 10px !important;
+   color: #000 !important;
+   position: relative !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-subheading {
+   font-size: 24px !important;
+   color: #555 !important;
+   margin-bottom: 30px !important;
+   position: relative !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-description {
+   font-size: 18px !important;
+   color: #555 !important;
+   margin-bottom: 30px !important;
+   max-width: 600px !important;
+   line-height: 1.6 !important;
+  }
+  
+  .hero-button {
+   padding: 14px 32px !important;
+   background-color: #000 !important;
+   color: #fff !important;
+   border: none !important;
+   border-radius: 4px !important;
+   font-weight: 600 !important;
+   letter-spacing: 1px !important;
+   text-transform: uppercase !important;
+   transition: all 0.3s ease !important;
+   position: relative !important;
+   z-index: 2 !important;
+  }
+  
+  .hero-button:hover {
+   background-color: #333 !important;
+   transform: translateY(-3px) !important;
+   box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+  }
+  
+  .decoration {
+   position: absolute !important;
+   z-index: 1 !important;
+   opacity: 0.1 !important;
+  }
+  
+  .top-left {
+   top: 0 !important;
+   left: 0 !important;
+   max-width: 30% !important;
+  }
+  
+  .top-right {
+   top: 0 !important;
+   right: 0 !important;
+   max-width: 30% !important;
+  }
+  
+  /* Responsive Adjustments */
+  @media (max-width: 768px) {
+   .contact-signup-section {
+     flex-direction: column !important;
+     text-align: center !important;
+   }
+   
+   .contact-signup-section div {
+     max-width: 100% !important;
+     margin-bottom: 30px !important;
+   }
+   
+   .cta-buttons {
+     flex-direction: column !important;
+     width: 100% !important;
+     max-width: 300px !important;
+   }
+   
+   .hero-heading {
+     font-size: 36px !important;
+   }
+   
+   .hero-subheading {
+     font-size: 20px !important;
+   }
+   
+   .subscription-section {
+     padding: 50px 20px !important;
+     width: 100vw !important;
+   }
+   
+   .subscription-heading {
+     font-size: 32px !important;
+   }
+   
+   .subscription-description {
+     font-size: 16px !important;
+     padding: 0 15px !important;
+   }
+   
+   .disclaimer {
+     padding: 0 15px !important;
+     max-width: 100% !important;
+   }
+  }
+  
+  .cta-button {
+   background: black;
+   color: white;
+   padding: 12px 24px;
+   border-radius: 6px;
+   cursor: pointer;
+   display: inline-block;
+   margin-top: 20px;
+   text-decoration: none;
+  }
+  
+  .hero-section {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   gap: 40px;
+   padding: 40px;
+   background-color: #ffffff;
+   font-family: sans-serif;
+   flex-wrap: wrap;
+  }
+  
+  .hero-left {
+   flex: 1;
+   min-width: 300px;
+  }
+  
+  .hero-right {
+   flex: 1;
+   min-width: 300px;
+   display: flex;
+   justify-content: center;
+   background-color: #e5e5e5;
+  }
+  
+  .hero-right-img {
+   width: 100%;
+   height: auto;
+  }
+  
+  .hero-buttons {
+   margin-top: 20px;
+   display: flex;
+   gap: 16px;
+  }
+  
+  .btn {
+   padding: 10px 20px;
+   font-weight: 500;
+   text-decoration: none;
+   border-radius: 4px;
+   transition: all 0.3s ease;
+  }
+  
+  .hero-centered {
+   background: #ffffff;
+   font-family: sans-serif;
+   text-align: center;
+   padding: 60px 20px;
+  }
+  
+  .hero-image {
+   width: 100%;
+   height: auto;
+   display: block;
+   margin-top: 40px;
+   background-color: #e5e5e5;
+  }
+.cta-button {
+  background: black;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-block;
+  margin-top: 20px;
+  text-decoration: none;
+}
+
+.hero-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+  padding: 40px;
+  background-color: #ffffff;
+  font-family: sans-serif;
+  flex-wrap: wrap;
+}
+
+.hero-left {
+  flex: 1;
+  min-width: 300px;
+}
+
+.hero-right {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  justify-content: center;
+  background-color: #e5e5e5;
+}
+
+.hero-right-img {
+  width: 100%;
+  height: auto;
+}
+
+.hero-buttons {
+  margin-top: 20px;
+  display: flex;
+  gap: 16px;
+}
+
+.btn {
+  padding: 10px 20px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.btn-filled {
+  background-color: #000;
+  color: #fff;
+}
+
+.btn-outlined {
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #000;
+}
+
+.hero-centered {
+  background: #ffffff;
+  font-family: sans-serif;
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.hero-heading {
+  font-size: 32px;
+  font-weight: bold;
+  color: #000000;
+  margin-bottom: 20px;
+}
+
+.hero-description {
+  font-size: 16px;
+  color: #333333;
+  max-width: 600px;
+  margin: 0 auto 30px;
+}
+
+.btn-filled {
+  padding: 10px 20px;
+  background-color: #000000;
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.btn-outlined {
+  padding: 10px 20px;
+  background-color: #ffffff;
+  color: #000000;
+  border: 1px solid #000000;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.hero-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin-top: 40px;
+  background-color: #e5e5e5;
+}
+
+
+/* ======= HERO SECTION (Two Column) ======= */
+.feature-section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 60px 40px;
+  gap: 40px;
+}
+
+.feature-content {
+  flex: 1;
+  min-width: 300px;
+}
+
+.feature-content h2 {
+  font-size: 36px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.feature-content p {
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 20px;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+
+.cta-buttons a {
+  padding: 10px 20px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: 0.3s ease;
+}
+
+.cta-buttons a:hover {
+  opacity: 0.9;
+}
+
+.feature-section img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  display: block;
+}
+
+/* ======= PARTNER LOGOS ======= */
+.feature-content .partners-logos {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.feature-content .partners-logos img {
+  height: 24px;
+  object-fit: contain;
+}
+
+/* ======= DECORATIONS ======= */
+.decoration {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  z-index: 0;
+  opacity: 0.4;
+}
+
+.decoration.circle {
+  border-radius: 50%;
+}
+
+.decoration.abstract-green {
+  clip-path: polygon(0 0, 100% 20%, 80% 100%, 0 100%);
+}
+
+.decoration.abstract-orange {
+  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
+}
+
+/* ======= SCROLL INDICATOR ======= */
+.scroll-indicator {
+  font-size: 20px;
+  position: absolute;
+  animation: bounce 2s infinite;
+  color: #666;
+}
+
+.scroll-indicator.bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+
+.scroll-indicator.bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(8px); }
+}
+
+.hero-left-cards {
+  background: radial-gradient(circle, #1a1f1c, #2d3430);
+  color: white;
+  font-family: sans-serif;
+  padding: 60px 40px;
+}
+
+.hero-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: center;
+}
+
+.hero-left {
+  flex: 1;
+  min-width: 300px;
+}
+
+.hero-logo {
+  width: 48px;
+  margin-bottom: 10px;
+}
+
+.hero-label {
+  font-size: 14px;
+  text-transform: uppercase;
+  color: #aaa;
+}
+
+.hero-heading {
+  font-size: 36px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.hero-right {
+  flex: 1;
+  display: grid;
+  gap: 20px;
+  min-width: 300px;
+}
+
+.hero-card {
+  background: #1c1f1e;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.hero-card img.card-img {
+  width: 100%;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.card-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn-filled {
+  background: #506c4f;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.btn-outlined {
+  border: 1px solid #fff;
+  background: transparent;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.hero-centered-art {
+  text-align: center;
+  background: #fff;
+  padding: 80px 20px;
+  position: relative;
+}
+
+.hero-centered-art .hero-heading {
+  font-size: 36px;
+  color: #333;
+  font-family: sans-serif;
+  max-width: 700px;
+  margin: 0 auto 30px;
+  line-height: 1.3;
+}
+
+.hero-centered-art .btn-teal {
+  background-color: #00b3b3;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.hero-art-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+}
+
+.hero-art-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+}
+
+.subsection-centered {
+  text-align: center;
+  padding: 60px 20px;
+  max-width: 700px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+.subsection-centered h2 {
+  font-size: 28px;
+  margin-bottom: 15px;
+}
+
+.subsection-centered p {
+  font-size: 16px;
+  color: #444;
+}
+
+.testimonial-section.simple-testimonial {
+  padding: 60px 20px;
+  text-align: center;
+  background: #fff;
+  color: #222;
+}
+
+.testimonial-logo img {
+  height: 40px;
+  margin-bottom: 20px;
+}
+
+.testimonial-quote {
+  font-size: 20px;
+  font-style: italic;
+  margin-bottom: 30px;
+  color: #444;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.testimonial-author {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.testimonial-author .author-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #ccc;
+  object-fit: cover;
+}
+
+.testimonial-author .author-details {
+  font-size: 14px;
+  color: #555;
+  line-height: 1.4;
+}
+.testimonial-section.dark {
+  background: #111;
+  color: #fff;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.testimonial-section.dark .testimonial-heading {
+  font-size: 32px;
+  margin-bottom: 30px;
+}
+
+.testimonial-section.dark .testimonial-grid {
+  display: flex;
+  gap: 30px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.testimonial-section.dark .testimonial-card {
+  background: #1a1a1a;
+  padding: 30px;
+  border-radius: 12px;
+  max-width: 350px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.testimonial-section.dark .stars {
+  font-size: 18px;
+  color: gold;
+  margin-bottom: 10px;
+}
+
+.testimonial-section.dark .author {
+  margin-top: 20px;
+}
+
+.testimonial-section.dark .author .avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+.client-testimonial-section {
+  padding: 60px 20px;
+  background-color: #111;
+  color: #fff;
+  font-family: sans-serif;
+  position: relative;
+  text-align: center;
+}
+
+.testimonial-bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  opacity: 0.1;
+  z-index: -1;
+}
+
+.testimonial-logo {
+  width: 80px;
+  margin-bottom: 20px;
+}
+
+.testimonial-title {
+  font-size: 32px;
+  margin-bottom: 40px;
+}
+
+.testimonial-cards {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.testimonial-card {
+  background: #222;
+  border-radius: 8px;
+  padding: 20px;
+  max-width: 300px;
+}
+
+.testimonial-card .avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.testimonial-card blockquote {
+  font-style: italic;
+  margin: 20px 0;
+}
+
+.testimonial-card .author {
+  font-size: 14px;
+  color: #aaa;
+}
+
+.testimonial-card .stars {
+  color: gold;
+  font-size: 18px;
+}
+
+.testimonial-cta .btn-filled {
+  margin-top: 30px;
+  background: teal;
+  color: white;
+  padding: 12px 24px;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.testimonial-contact p {
+  margin-top: 10px;
+}
+
+.testimonial-landing {
+  padding: 60px 20px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.testimonial-landing.orange {
+  background-color: #fff3e0;
+  color: #bf360c;
+}
+
+.landing-title {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.landing-description {
+  font-size: 16px;
+  margin-bottom: 40px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.testimonial-grid {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.testimonial-box {
+  background: #ffffff;
+  border: 1px solid #eee;
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 300px;
+  box-shadow: 0 0 5px rgba(0,0,0,0.05);
+}
+
+.testimonial-box.highlight {
+  background: #ffe0b2;
+  border-color: #ff9800;
+}
+
+.testimonial-box blockquote {
+  font-style: italic;
+  margin-bottom: 16px;
+}
+
+.author-name {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+/* Team secction */
+.team-slider-section {
+  text-align: center;
+  padding: 40px;
+  font-family: sans-serif;
+}
+
+.team-slider-section h2 {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.team-slider-section p {
+  color: gray;
+}
+
+.team-slider {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  overflow-x: auto;
+  padding-bottom: 10px;
+}
+
+.team-member {
+  min-width: 300px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 20px;
+  background: #fff;
+  flex-shrink: 0;
+  text-align: center;
+}
+
+.team-member img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 15px;
+}
+
+.team-member h4 {
+  margin: 10px 0 5px;
+}
+
+.team-member .social-icons a {
+  margin: 0 5px;
+  color: #555;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.team-member .profile-link {
+  color: #007BFF;
+  text-decoration: underline;
+  display: inline-block;
+  margin-top: 10px;
+}
+.team-section {
+  padding: 60px 20px;
+  background: #fff;
+  text-align: center;
+}
+.team-member {
+  display: inline-block;
+  margin: 20px;
+}
+.team-member img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+.team-member .name {
+  margin-top: 10px;
+  font-weight: bold;
+}
+.team-member .role {
+  color: #777;
+}
+
+/* === Team Showcase === */
+#team-showcase {
+  padding: 60px 20px;
+  text-align: center;
+  background-color: #fff;
+}
+#team-showcase .heading {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+#team-showcase .subtitle {
+  color: #666;
+  margin-bottom: 40px;
+}
+#team-showcase .group-list {
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+}
+#team-showcase .group {
+  padding: 0 10px;
+}
+#team-showcase .group .groupName {
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+#team-showcase .group .team-member-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 20px;
+  justify-items: center;
+}
+.team-member {
+  text-align: center;
+}
+.team-member img {
+  width: 140px;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+.team-member .name {
+  font-weight: bold;
+}
+.team-member .role {
+  font-size: 0.95rem;
+  color: #777;
+}
+.team-showcase {
+  padding: 60px 20px;
+  background: #f9f9f9;
+  text-align: center;
+}
+
+.team-showcase .group {
+  margin-bottom: 40px;
+}
+
+.team-showcase .group h3 {
+  font-size: 1.8rem;
+  margin-bottom: 20px;
+}
+
+.team-showcase .member-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 20px;
+  justify-items: center;
+}
+
+.team-showcase .member {
+  background: white;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.05);
+  max-width: 200px;
+}
+
+.team-showcase .member img {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.team-showcase .member .name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.team-showcase .member .role {
+  font-size: 0.9rem;
+  color: #777;
+}
+
+
+/* === Team Grid Section === */
+#team-grid {
+  padding: 60px 20px;
+  background-color: #f9f9f9;
+  text-align: center;
+}
+#team-grid .tag {
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #ff6600;
+  margin-bottom: 10px;
+}
+#team-grid .heading {
+  font-size: 2.2rem;
+  margin-bottom: 10px;
+}
+#team-grid .description {
+  font-size: 1.1rem;
+  color: #666;
+  margin-bottom: 40px;
+}
+#team-member-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 30px;
+  justify-items: center;
+}
+.team-member {
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
+  max-width: 250px;
+  text-align: center;
+}
+.team-member img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+.team-member .name {
+  font-weight: bold;
+  margin-top: 12px;
+}
+.team-member .description {
+  font-size: 0.95rem;
+  color: #555;
+  margin-top: 6px;
+}
+
+
+/* === FAQ === */
+/* 🔲 Base Layout */
+.faq-section {
+  padding: 60px 20px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+/*  Title and Subtitle */
+.faq-title {
+  font-size: 2rem;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.faq-subtitle {
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+/* 🔍 Search Bar */
+.faq-search {
+  padding: 12px 20px;
+  width: 100%;
+  max-width: 400px;
+  font-size: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  margin: 0 auto 40px;
+  display: block;
+}
+
+/* 📦 Illustration + List Wrapper */
+.faq-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+/* 🖼️ Left Illustration */
+.faq-illustration {
+  flex: 1 1 40%;
+  max-width: 400px;
+}
+
+.faq-image {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* ❓ Q&A List */
+.faq-list {
+  flex: 1 1 55%;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.faq-item {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 15px;
+}
+
+/* 🗂️ Q & A */
+.faq-question {
+  font-weight: bold;
+  margin-top: 15px;
+  font-size: 1.1rem;
+}
+
+.faq-answer {
+  margin-bottom: 20px;
+  color: #444;
+  font-size: 0.95rem;
+}
+
+/* 📱 Responsive */
+@media (max-width: 768px) {
+  .faq-content {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .faq-illustration,
+  .faq-list {
+    max-width: 100%;
+  }
+
+  .faq-title {
+    font-size: 1.5rem;
+  }
+
+  .faq-question {
+    font-size: 1rem;
+  }
+}
+
+/* === Logo Showcase === */
+.logo-showcase {
+  padding: 60px 20px;
+  text-align: center;
+}
+.logo-showcase img {
+  height: 40px;
+  margin: 10px 20px;
+  opacity: 0.8;
+}
+
+/* === HEADER === */
+header[ref="header-1"] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+.logo-1 {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.nav-1 {
+  display: flex;
+  gap: 20px;
+  list-style: none;
+}
+.nav-1 li a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
+.button-join, .button {
+  background: black;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* === HERO SECTION === */
+.hero-section {
+  text-align: center;
+  padding: 80px 20px;
+  background: #fff;
+}
+.hero-heading {
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+.hero-paragraph {
+  font-size: 1.2rem;
+  margin-bottom: 30px;
+  max-width: 700px;
+  margin-inline: auto;
+}
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+}
+.button-group .button:first-child {
+  background-color: black;
+  color: white;
+}
+.button-group .button:last-child {
+  background-color: transparent;
+  border: 1px solid #222;
+  color: #222;
+}
+
+/* === IMAGE GRID === */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+  padding: 40px;
+  background: #fafafa;
+}
+.image-tile img {
+  width: 100%;
+  border-radius: 8px;
+  display: block;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 40px;
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+.logo-1 {
+  font-size: 20px;
+  font-weight: bold;
+}
+.nav-1 {
+  display: flex;
+  list-style: none;
+  gap: 20px;
+}
+.nav-1 li a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
+.join-btn {
+  background: black;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Hero */
+.hero-section {
+  text-align: center;
+  padding: 80px 20px;
+  background: #f9f9f9;
+}
+.hero-heading {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+.hero-paragraph {
+  max-width: 600px;
+  margin: auto;
+  color: #555;
+}
+.button-group {
+  margin-top: 20px;
+}
+.button-group .join-btn {
+  margin-right: 10px;
+}
+
+/* Image Grid */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 20px;
+  padding: 40px;
+}
+.image-tile img {
+  width: 100%;
+  border-radius: 8px;
+}
+/* ======= HERO SECTION CENTERED ======= */
+.hero-centered {
+  text-align: center;
+  padding: 60px 20px;
+  background: #fdfdfd;
+  max-width: 100%;
+}
+
+.hero-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #007bff;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.hero-heading {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #222;
+}
+
+.hero-description {
+  font-size: 16px;
+  color: #555;
+  max-width: 700px;
+  margin: 0 auto 30px auto;
+  line-height: 1.6;
+}
+
+.hero-centered .btn {
+  font-size: 15px;
+  padding: 10px 20px;
+  border-radius: 4px;
+  text-decoration: none;
+  display: inline-block;
+  margin: 0 8px;
+  cursor: pointer;
+}
+
+/* Button Filled */
+.btn-filled {
+  background-color: black;
+  color: white;
+  border: none;
+}
+
+.btn-filled:hover {
+  background-color: #333;
+}
+
+/* Button Outlined */
+.btn-outlined {
+  border: 1px solid black;
+  background: transparent;
+  color: black;
+}
+
+.btn-outlined:hover {
+  background-color: black;
+  color: white;
+}
+
+.text-dark {
+  color: #333333;
+}
+.text-blue {
+  color: #3b82f6;
+}
+.site-info {
+  margin-left: 20px;
+}
+
+.site-info h2 {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.site-info p {
+  font-size: 14px;
+  color: #777;
+}
+.feature-list-section {
+  padding: 60px 20px;
+  background-color: #ffffff;
+  font-family: sans-serif;
+}
+
+.feature-heading {
+  font-size: 28px;
+  font-weight: bold;
+  color: #000;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.feature-list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 30px;
+}
+
+.feature-card {
+  background: white;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  text-align: center;
+}
+
+.feature-card img {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 20px;
+}
+
+.feature-card h4 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.feature-card p {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.text-button {
+  background: none;
+  color: #000;
+  font-weight: 500;
+  text-decoration: underline;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.subscription-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 60px 40px;
+  background-color: #ffffff;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+
+.subscription-heading {
+  font-size: 24px;
+  font-weight: bold;
+  color: #000000;
+  margin-bottom: 10px;
+}
+
+.subscription-description {
+  font-size: 14px;
+  color: #555555;
+  margin-bottom: 20px;
+}
+
+.subscription-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 400px;
+  width: 100%;
+}
+
+.form-input {
+  padding: 10px 15px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.form-submit {
+  background-color: black;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.form-submit:hover {
+  background-color: #222;
+}
+
+.subscription-form .disclaimer {
+  font-size: 12px;
+  color: #777;
+}
+
+.subscription-form .link-text {
+  color: #2563eb;
+  text-decoration: underline;
+  margin-left: 4px;
+  font-weight: 500;
+}
+.cta-gradient-section {
+  background: linear-gradient(90deg, #fbb034, #ffdd00);
+  text-align: center;
+  padding: 40px 20px;
+  border-radius: 10px;
+  font-family: sans-serif;
+}
+.contact-signup-section {
+  display: flex;
+  justify-content: space-between;
+  background-color: #fafafa;
+  padding: 40px 20px;
+  border-radius: 12px;
+  font-family: sans-serif;
+  flex-wrap: wrap;
+  gap: 30px;
+}
+
+.contact-form {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  max-width: 300px;
+}
+
+.contact-form input[type="email"] {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px 0 0 4px;
+  flex: 1;
+}
+
+.btn-filled-orange {
+  background-color: #f5a623;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+}
+.hero-banner {
+  background-color: #fcd34d;
+  text-align: center;
+  padding: 80px 20px;
+  position: relative;
+  font-family: sans-serif;
+}
+
+.hero-subheading {
+  font-size: 24px;
+  color: #333333;
+  font-weight: 500;
+  margin-top: 10px;
+}
+
+.hero-button {
+  background-color: #1f2937;
+  color: #ffffff;
+  padding: 10px 24px;
+  border-radius: 999px;
+  font-weight: bold;
+  display: inline-block;
+  margin-top: 20px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.decoration {
+  position: absolute;
+  z-index: 0;
+  opacity: 0.5;
+}
+
+.decoration.top-left {
+  top: 0;
+  left: 0;
+}
+
+.decoration.top-right {
+  top: 0;
+  right: 0;
+}
+.pricing-section {
+  padding: 60px 20px;
+  text-align: center;
+  background: #fff;
+  font-family: sans-serif;
+}
+
+.pricing-section .hero-label {
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 10px;
+}
+
+.pricing-section .hero-heading {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-section .hero-description {
+  font-size: 16px;
+  color: #555;
+  max-width: 600px;
+  margin: 0 auto 40px;
+}
+
+.pricing-section .pricing-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 30px;
+}
+
+.pricing-card {
+  background: #f9f9f9;
+  padding: 30px;
+  border-radius: 8px;
+  width: 280px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  text-align: left;
+}
+
+.pricing-card h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  color: #000;
+  margin: 10px 0;
+}
+
+.pricing-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 20px 0;
+}
+
+.pricing-card ul li {
+  margin-bottom: 10px;
+  color: #444;
+}
+
+.pricing-card .btn-filled {
+  display: inline-block;
+  padding: 10px 20px;
+  background: black;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+}
+.pricing-section-dark {
+  background: #111;
+  color: #fff;
+  padding: 60px 20px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.pricing-section-dark .badge {
+  text-transform: uppercase;
+  color: #facc15;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.pricing-section-dark .title {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.pricing-section-dark .description {
+  color: #ccc;
+  margin-bottom: 40px;
+  max-width: 700px;
+  margin-inline: auto;
+}
+
+.pricing-section-dark .card-grid {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.pricing-card {
+  background: #1a1a1a;
+  padding: 30px;
+  border-radius: 8px;
+  width: 280px;
+  text-align: left;
+}
+
+.pricing-card.highlight {
+  border: 2px solid #facc15;
+}
+
+.pricing-card .badge {
+  color: #facc15;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 10px 0;
+  color: #fff;
+}
+
+.pricing-card ul {
+  list-style: none;
+  padding: 0;
+  color: #bbb;
+  margin-bottom: 20px;
+}
+
+.pricing-card ul li {
+  margin-bottom: 8px;
+}
+
+.pricing-card button {
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+button.filled {
+  background: #facc15;
+  color: #000;
+  border: none;
+}
+
+button.outline {
+  background: transparent;
+  color: #facc15;
+  border: 1px solid #facc15;
+}
+
+button.light {
+  background: #fff;
+  color: #111;
+  border: none;
+}
+/* ======= PRICING SECTION ======= */
+.pricing-section {
+  padding: 60px 40px;
+  background: #fff;
+   text-align: center;
+}
+
+.pricing-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.pricing-header h2 {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-header p {
+  color: #666;
+  font-size: 16px;
+}
+
+.pricing-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 20px 0 40px 0;
+}
+
+.pricing-tabs li {
+  background: #f2f2f2;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.pricing-tabs li:hover {
+  background: #ddd;
+}
+
+.pricing-hub {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.pricing-hub h3 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.pricing-hub p {
+  color: #444;
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.hub-link {
+  color: #007bff;
+  font-weight: 500;
+  text-decoration: underline;
+}
+
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+
+.pricing-card {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 20px;
+  background: #fdfdfd;
+  text-align: center;
+}
+
+.pricing-card h4 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.price-yearly {
+  display: block;
+  font-size: 14px;
+  color: #888;
+}
+
+.pricing-card .contacts {
+  font-size: 14px;
+  color: #444;
+  margin-bottom: 10px;
+}
+
+.pricing-card .notes {
+  font-size: 13px;
+  color: #777;
+  margin-bottom: 15px;
+}
+
+.buy-btn {
+  background: black;
+  color: white;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.buy-btn:hover {
+  background: #333;
+}
+
+
+
+.pricing-header {
+  margin-bottom: 30px;
+}
+
+.pricing-toggle {
+  display: inline-flex;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+
+.pricing-toggle button {
+  padding: 10px 20px;
+  border: none;
+  background: #eee;
+  cursor: pointer;
+}
+
+.pricing-toggle button.active {
+  background: #000;
+  color: #fff;
+}
+
+.pricing-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+.pricing-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 30px 20px;
+  width: 300px;
+  text-align: left;
+  box-shadow: 0 0 6px rgba(0,0,0,0.05);
+}
+
+.pricing-card.highlight {
+  border: 2px solid #000;
+}
+
+.pricing-card h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.pricing-card .price {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.pricing-card .savings,
+.pricing-card .bonus {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.pricing-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 15px 0;
+}
+
+.pricing-card ul li {
+  margin-bottom: 8px;
+}
+
+.pricing-card button {
+  background: #000;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.pricing-single-plan {
+  padding: 60px 20px;
+  background-color: #fff;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.pricing-header .pricing-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.pricing-header .pricing-subtitle {
+  color: #555;
+  margin-bottom: 40px;
+  font-size: 16px;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.feature-item {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.feature-icon {
+  font-size: 24px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.feature-title {
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.feature-description {
+  font-size: 14px;
+  color: #666;
+}
+
+.plan-card {
+  background: #f0f4ff;
+  padding: 30px;
+  border-radius: 10px;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.plan-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.plan-price {
+  font-size: 20px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.plan-description {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+  /* ======= PRICING SECTION ======= */
+  
+  /* General Pricing Section Styles */
+  .pricing-section, .pricingsection, .pricingsectiondark {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 30px 15px !important;
+    color: #000 !important;
+    background-color: #fff !important;
+  }
+  
+  .pricingsectiondark {
+    background-color: #222 !important;
+    color: #fff !important;
+  }
+  
+  /* Header Styles */
+  .pricing-header, .header, .title, .hero-heading {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+  }
+  
+  .pricing-title, .title, .hero-heading {
+    font-size: 32px !important;
+          font-weight: 700 !important;
+          margin-bottom: 8px !important;
+          letter-spacing: -0.5px !important;
+          color: #000 !important;
+          margin: 0 !important;
+          padding: 0 !important;
+          text-align: center !important;
+  }
+  
+  .pricingsectiondark .title {
+    color: #000 !important;
+          margin: 0 !important;
+          padding: 10px !important;
+  }
+  
+  .pricing-subtitle, .subtitle, .description, .hero-description {
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    color: #000 !important;
+    max-width: 600px !important;
+    margin: 0 auto 20px !important;
+    line-height: 1.5 !important;
+    padding: 21px !important
+  }
+  
+  .pricingsectiondark .subtitle, 
+  .pricingsectiondark .description {
+    color: #000 !important;
+          text-align: center;
+          /* margin: 0 !important; */
+          /* padding: 0 !important; */
+          display: flex !important;
+          /* justify-content: center !important; */
+          /* align-items: center !important; */
+          margin-top: -7px !important;
+        }
+  
+  .hero-label, .badge {
+    display: inline-block !important;
+    padding: 6px 12px !important;
+    background: #f4f4f4 !important;
+    border-radius: 20px !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    margin-bottom: 16px !important;
+    color: #333 !important;
+  }
+  
+  .pricingsectiondark .badge {
+    background: #444 !important;
+          color: #fff !important;
+          font-size: xxx-large !important;
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+          width: 100% !important;
+  }
+  
+  /* Features Grid */
+  .features-grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
+    gap: 15px !important;
+    margin-bottom: 25px !important;
+  }
+  
+  .feature-item {
+    background: #f9f9f9 !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    transition: all 0.3s ease !important;
+    border: 1px solid #eee !important;
+  }
+  
+  .feature-icon {
+    font-size: 28px !important;
+    margin-bottom: 15px !important;
+    display: block !important;
+  }
+  
+  .feature-title {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    margin-bottom: 5px !important;
+    color: #000 !important;
+  }
+  
+  .feature-description {
+    font-size: 14px !important;
+    color: #000 !important;
+    line-height: 1.4 !important;
+  }
+  
+  /* Plan Cards */
+  .plan-card, .pricing-card {
+    background: #fff !important;
+    border-radius: 8px !important;
+    padding: 20px 15px !important;
+    text-align: center !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
+    transition: all 0.3s ease !important;
+    border: 1px solid #eee !important;
+    max-width: 447px !important;
+    margin: 0 auto !important;
+  }
+  
+  .plan-title, .pricing-card h3 {
+    font-size: 22px !important;
+    font-weight: 700 !important;
+    margin-bottom: 10px !important;
+    color: #000 !important;
+  }
+  
+  .plan-price, .price, .pricing-card .price {
+    font-size: 30px !important;
+    font-weight: 700 !important;
+    margin-bottom: 10px !important;
+    color: #000 !important;
+  }
+  
+  .pricemonthly, .priceyearly {
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    margin-bottom: 5px !important;
+    color: #000 !important;
+  }
+  
+  .plan-description {
+    font-size: 16px !important;
+    color: #666 !important;
+    margin-bottom: 30px !important;
+    line-height: 1.5 !important;
+  }
+  
+  /* Buttons */
+  .btn-filled, .button, .buttonlabel {
+    display: inline-block !important;
+    padding: 12px 24px !important;
+    background: #222 !important;
+    color: #fff !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    text-decoration: none !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+    cursor: pointer !important;
+    font-size: 16px !important;
+  }
+  
+  .btn-filled:hover, .button:hover {
+    background: #000 !important;
+    transform: translateY(-2px) !important;
+  }
+  
+  .pricingsectiondark .btn-filled {
+    background: #fff !important;
+    color: #222 !important;
+  }
+  
+  .pricingsectiondark .btn-filled:hover {
+    background: #f4f4f4 !important;
+  }
+  
+  /* Multiple Plan Layout */
+  .pricing-cards, .plans {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
+    gap: 15px !important;
+    margin-top: 20px !important;
+  }
+  
+  /* Features List */
+  .pricing-card ul {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 0 30px !important;
+    text-align: left !important;
+  }
+  
+  .pricing-card li {
+    padding: 8px 0 !important;
+    border-bottom: 1px solid #eee !important;
+    font-size: 14px !important;
+    color: #000 !important;
+    position: relative !important;
+    padding-left: 20px !important;
+  }
+  
+  .pricing-card li:before {
+    content: "✓" !important;
+    position: absolute !important;
+    left: 0 !important;
+    color: #222 !important;
+    font-weight: bold !important;
+  }
+  
+  /* Toggle */
+  .toggle {
+    display: flex !important;
+    justify-content: center !important;
+    margin-bottom: -90px !important;
+  }
+  
+  .options {
+    display: inline-flex !important;
+    background: #f4f4f4 !important;
+    border-radius: 30px !important;
+    padding: 4px !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    color: #666 !important;
+  }
+  
+  .default {
+    background: #222 !important;
+    color: #fff !important;
+    padding: 10px 20px !important;
+    border-radius: 25px !important;
+  }
+  
+  /* Highlighting */
+  .highlight, [highlight="true"] {
+    border: 2px solid #222 !important;
+    transform: scale(1.05) !important;
+    position: relative !important;
+    overflow: hidden !important;
+  }
+  
+  .highlight:before, [highlight="true"]:before {
+    content: "POPULAR" !important;
+    position: absolute !important;
+    top: 15px !important;
+    right: -30px !important;
+    background: #222 !important;
+    color: #fff !important;
+    padding: 5px 40px !important;
+    font-size: 12px !important;
+    transform: rotate(45deg) !important;
+    font-weight: 600 !important;
+  }
+  
+  /* Savings and Bonus */
+  .savings, .bonus {
+    display: inline-block !important;
+    padding: 4px 8px !important;
+    background: #f0f0f0 !important;
+    border-radius: 4px !important;
+    font-size: 14px !important;
+    color: #333 !important;
+    margin: 5px 0 15px !important;
+    font-weight: 600 !important;
+  }
+  
+  .bonus {
+    background: #222 !important;
+    color: #fff !important;
+  }
+  
+  /* Features */
+  .features {
+    margin: 20px 0 !important;
+    text-align: left !important;
+  }
+  
+  /* Hub Section */
+  .hub {
+    text-align: center !important;
+    margin-bottom: 20px !important;
+    padding: 15px !important;
+    background: #f9f9f9 !important;
+    border-radius: 8px !important;
+  }
+  
+  .hub .name {
+    font-size: 20px !important;
+    font-weight: 700 !important;
+    margin-bottom: 5px !important;
+    color: #000 !important;
+  }
+  
+  .hub .description {
+    font-size: 14px !important;
+    color: #000 !important;
+    margin-bottom: 10px !important;
+  }
+  
+  .hub .link {
+    color: #222 !important;
+    text-decoration: underline !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+  }
+  
+  /* Tabs */
+  .tabs {
+    display: flex !important;
+    justify-content: center !important;
+    flex-wrap: wrap !important;
+    margin-bottom: 30px !important;
+    gap: 10px !important;
+  }
+  
+  /* Media Queries for Responsiveness */
+  @media (max-width: 768px) {
+    .pricing-cards, .plans, .features-grid {
+      grid-template-columns: 1fr !important;
+    }
+    
+    .highlight, [highlight="true"] {
+      transform: none !important;
+    }
+    
+    .pricing-title, .title, .hero-heading {
+      font-size: 28px !important;
+    }
+    
+    .plan-price, .price, .pricing-card .price {
+      font-size: 28px !important;
+    }
+  }
+
+
+
+
+  /*================= CONTACT FORM SECTION =================*/
+  .contact-form-section {
+    padding: 25px 15px !important;
+    background-color: #f5f5f5 !important;
+    text-align: center !important;
+    max-width: 600px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-header .contact-title {
+    font-size: 24px !important;
+    font-weight: 600 !important;
+    color: #1a365d !important;
+    margin-bottom: 5px !important;
+  }
+  
+  .hero-label {
+    text-transform: uppercase !important;
+    letter-spacing: 1px !important;
+    color: #2b6cb0 !important;
+    font-size: 11px !important;
+    margin: 0 0 2px 0 !important;
+    font-weight: 600 !important;
+  }
+  
+  .contact-description {
+    color: #4a5568 !important;
+    font-size: 14px !important;
+    margin: 0 auto 12px auto !important;
+    max-width: 400px !important;
+    line-height: 1.4 !important;
+  }
+  
+  .contact-form {
+    max-width: 400px !important;
+    margin: 0 auto !important;
+    display: grid !important;
+    gap: 10px !important;
+  }
+  
+  .contact-form input[type="text"],
+  .contact-form input[type="email"],
+  .contact-form textarea {
+    width: 100% !important;
+    padding: 8px 10px !important;
+    border-radius: 3px !important;
+    border: 1px solid #cbd5e0 !important;
+    font-size: 13px !important;
+    background-color: #fff !important;
+  }
+  
+  .contact-form input[type="text"]:focus,
+  .contact-form input[type="email"]:focus,
+  .contact-form textarea:focus {
+    outline: none !important;
+    border-color: #4299e1 !important;
+  }
+  
+  .contact-form textarea {
+    resize: vertical !important;
+    min-height: 80px !important;
+  }
+  
+  .label {
+    display: block !important;
+    text-align: center !important;
+    margin-bottom: 5px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    color: #4a5568 !important;
+    text-transform: uppercase !important;
+  }
+  
+  .checkbox-label {
+    display: flex !important;
+    align-items: center !important;
+    gap: 5px !important;
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    justify-content: flex-start !important;
+    text-align: left !important;
+    margin: 2px 0 !important;
+  }
+  
+  .contact-form .btn-filled,
+  .contact-right-panel .btn-filled {
+    background-color: #2b6cb0 !important;
+    color: white !important;
+    padding: 8px 15px !important;
+    border: none !important;
+    border-radius: 3px !important;
+    cursor: pointer !important;
+    font-weight: 600 !important;
+    font-size: 13px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    margin-top: 5px !important;
+    width: 100% !important;
+  }
+  
+  .contact-form .btn-filled:hover,
+  .contact-right-panel .btn-filled:hover {
+    background-color: #2c5282 !important;
+  }
+  
+  .contact-info-section {
+    text-align: center !important;
+    padding: 25px 15px !important;
+    background-color: #f5f5f5 !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-profile-image {
+    width: 50px !important;
+    height: 50px !important;
+    object-fit: cover !important;
+    border-radius: 50% !important;
+    margin-bottom: 10px !important;
+    border: 2px solid #2b6cb0 !important;
+  }
+  
+  .contact-heading {
+    font-size: 22px !important;
+    font-weight: 600 !important;
+    margin-bottom: 5px !important;
+    color: #1a365d !important;
+  }
+  
+  .contact-columns {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 15px !important;
+    flex-wrap: wrap !important;
+    margin-top: 15px !important;
+  }
+  
+  .contact-column {
+    flex: 1 !important;
+    min-width: 180px !important;
+    max-width: 230px !important;
+    text-align: left !important;
+    padding: 12px !important;
+    border: 1px solid #e2e8f0 !important;
+    background-color: #fff !important;
+    border-radius: 3px !important;
+  }
+  
+  .contact-icon {
+    font-size: 16px !important;
+    display: block !important;
+    margin-bottom: 5px !important;
+    color: #2b6cb0 !important;
+  }
+  
+  .contact-title {
+    font-weight: 600 !important;
+    font-size: 11px !important;
+    margin-bottom: 4px !important;
+    color: #1a365d !important;
+    text-transform: uppercase !important;
+  }
+  
+  .contact-text {
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    white-space: pre-line !important;
+    line-height: 1.4 !important;
+  }
+  
+  .contact-split-section {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    min-height: 400px !important;
+    max-width: 1000px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-left-panel {
+    flex: 1 !important;
+    background-color: #1a365d !important;
+    background-size: cover !important;
+    background-position: center !important;
+    color: white !important;
+    padding: 25px !important;
+    min-width: 250px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+  }
+  
+  .contact-right-panel {
+    flex: 1 !important;
+    background-color: #ffffff !important;
+    padding: 25px !important;
+    min-width: 250px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+  }
+  
+  .contact-section {
+    margin-bottom: 12px !important;
+  }
+  
+  .section-heading {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    margin-bottom: 4px !important;
+    color: #4299e1 !important;
+    text-transform: uppercase !important;
+  }
+  
+  .section-content {
+    white-space: pre-line !important;
+    color: #e2e8f0 !important;
+    line-height: 1.4 !important;
+    font-size: 12px !important;
+  }
+  
+  .section-highlight {
+    color: #fff !important;
+    font-weight: 600 !important;
+    white-space: pre-line !important;
+    font-size: 13px !important;
+  }
+  
+  .form-heading {
+    font-size: 20px !important;
+    font-weight: 600 !important;
+    margin-bottom: 12px !important;
+    color: #1a365d !important;
+  }
+  
+  .contact-page {
+    background-color: #f5f5f5 !important;
+    
+  }
+  .contact-page > .hero-banner > .hero-heading{
+    color: #fff !important;
+    margin-top: -10px !important;
+  }
+  
+  .hero-banner {
+    background-color: #1a365d !important;
+    background-size: cover !important;
+    background-position: center !important;
+    padding: 25px 15px !important;
+    color: #fff !important;
+    text-align: center !important;
+  }
+  
+  .hero-heading {
+    font-size: 28px !important;
+    font-weight: bold !important;
+    margin-bottom: 5px !important;
+    letter-spacing: 0.5px !important;
+  }
+  
+  .logo-1 {
+    font-weight: bold !important;
+    font-size: 16px !important;
+    margin-bottom: 5px !important;
+    letter-spacing: 0.5px !important;
+    color: #4299e1 !important;
+  }
+  
+  .nav-1 {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 20px !important;
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 0 12px 0 !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+  }
+  
+  .contact-three-column {
+          display: flex !important;
+          flex-wrap: wrap !important;
+          flex-direction: column;
+          gap: 12px !important;
+          padding: 0 15px !important;
+          justify-content: center !important;
+          background: #fff !important;
+          max-width: 1178px !important;
+          margin: 0 auto !important;
+          align-items: center !important;
+          justify-content: center !important;
+      }
+  
+  .contact-map {
+    flex: 1 !important;
+    min-width: 250px !important;
+    border: 1px solid #e2e8f0 !important;
+    height: 220px !important;
+    border-radius: 3px !important;
+  }
+  
+  .contact-info {
+          flex: 1 !important;
+          min-width: 1110px !important;
+          padding: 12px !important;
+          border: 1px solid #e2e8f0 !important;
+          border-radius: 3px !important;
+          background-color: #f5f5f5 !important;
+          align-items: center !important;
+  }
+  
+  .info-heading {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin-bottom: 10px !important;
+    color: #1a365d !important;
+  }
+  
+  .info-phone, 
+  .info-email, 
+  .info-address {
+    margin-bottom: 6px !important;
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    line-height: 1.4 !important;
+  }
+  
+  .form-heading {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin-bottom: 10px !important;
+    color: #1a365d !important;
+  }
+  
+  .contact-getintouch,
+  .getintouch {
+    background-color: #1a365d !important;
+    color: #ffffff !important;
+    padding: 25px 15px !important;
+    text-align: center !important;
+  }
+  
+  .contact-getintouch h2,
+  .getintouch .heading {
+    font-size: 18px !important;
+    margin-bottom: 12px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    font-weight: 600 !important;
+    color: #4299e1 !important;
+  }
+  
+  .contact-getintouch .columns,
+  .getintouch .columns {
+          padding: 0px !important;
+          display: flex !important;
+          flex-wrap: wrap !important;
+          gap: 12px !important;
+          justify-content: center !important;
+          max-width: 800px !important;
+          margin: 0 auto !important;
+  }
+  
+  .contact-getintouch .column,
+  .getintouch .columns section {
+    flex: 1 1 200px !important;
+    text-align: left !important;
+    padding: 12px !important;
+    border: 1px solid #2c5282 !important;
+    background-color: rgba(0, 0, 0, 0.1) !important;
+    border-radius: 3px !important;
+  
+  }
+  
+  .getintouch .icon {
+    font-size: 16px !important;
+    margin-bottom: 4px !important;
+    color: #000 !important;
+  }
+  
+  .contact-getintouch .column h4,
+  .getintouch .title {
+    margin-top: 2px !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    color: #000 !important;
+    margin-bottom: 4px !important;
+    text-transform: uppercase !important;
+    text-align: center !important;
+  }
+  .contact-getintouch .column, .getintouch .columns section {
+    text-align: center !important;
+  }
+  
+  .contact-getintouch .column p,
+  .getintouch .lines {
+    font-size: 12px !important;
+    margin: 2px 0 !important;
+    line-height: 1.4 !important;
+    white-space: pre-line !important;
+    color: #000 !important;
+    text-align: center !important;
+  }
+  
+  .contact-messageus,
+  .messageus {
+    background-color: #ffffff !important;
+    padding: 20px 15px !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 15px !important;
+    align-items: flex-start !important;
+    max-width: 800px !important;
+    margin: 0 auto !important;
+  }
+  
+  .contact-messageus .left-column,
+  .messageus .leftcolumn {
+    flex: 1 1 250px !important;
+    padding: 10px !important;
+  }
+  
+  .contact-messageus .left-column h2,
+  .messageus .heading {
+    font-size: 18px !important;
+    font-weight: 600 !important;
+    margin-bottom: 8px !important;
+    color: #1a365d !important;
+    text-transform: uppercase !important;
+    position: relative !important;
+    display: inline-block !important;
+    padding-bottom: 5px !important;
+    border-bottom: 2px solid #4299e1 !important;
+  }
+  
+  .contact-messageus .left-column p,
+  .messageus .description {
+    font-size: 12px !important;
+    color: #4a5568 !important;
+    margin-bottom: 10px !important;
+    line-height: 1.4 !important;
+  }
+  section > .class{
+    margin: 0 !important ;
+    padding: 0 !important;
+  }
+  section > .heading *{
+    margin: 0 !important ;
+    padding: 0 !important;
+  
+  }
+  
+  .getintouch > *{
+    color: black !important;
+  }
+  
+  .messageus .awardtext {
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    color: #1a365d !important;
+    margin-top: 12px !important;
+    border-top: 1px solid #e2e8f0 !important;
+    padding-top: 8px !important;
+  }
+  
+  .contact-messageus .form,
+  .messageus .form {
+    flex: 1 1 300px !important;
+    border: 1px solid #e2e8f0 !important;
+    padding: 15px !important;
+    background-color: #f5f5f5 !important;
+    border-radius: 3px !important;
+  }
+  
+  .contact-messageus form,
+  .messageus .fields {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 8px !important;
+  }
+  
+  .contact-messageus form input,
+  .contact-messageus form textarea,
+  .messageus .fields input,
+  .messageus .fields textarea {
+    padding: 8px 10px !important;
+    border-radius: 3px !important;
+    border: 1px solid #cbd5e0 !important;
+    font-size: 12px !important;
+    background-color: #fff !important;
+  }
+.contact-form-section {
+  padding: 60px 20px;
+  background-color: #fff;
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.contact-header .contact-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.contact-description {
+  color: #555;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.contact-form {
+  max-width: 600px;
+  margin: 0 auto;
+  display: grid;
+  gap: 20px;
+}
+
+.contact-form input[type="text"],
+.contact-form input[type="email"],
+.contact-form textarea {
+  width: 100%;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.contact-form textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: #444;
+  justify-content: start;
+  text-align: left;
+}
+
+.contact-form .btn-filled {
+  background-color: black;
+  color: white;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 16px;
+}
+.contact-info-section {
+  text-align: center;
+  padding: 60px 20px;
+  background-color: #fff;
+}
+
+.contact-profile-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.contact-heading {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.contact-description {
+  font-size: 14px;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto 40px;
+  white-space: pre-line;
+}
+
+.contact-columns {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+
+.contact-column {
+  flex: 1;
+  min-width: 240px;
+  max-width: 300px;
+  text-align: left;
+}
+
+.contact-icon {
+  font-size: 24px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.contact-title {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 6px;
+}
+
+.contact-text {
+  font-size: 14px;
+  color: #444;
+  white-space: pre-line;
+}
+.contact-split-section {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 100vh;
+}
+
+.contact-left-panel {
+  flex: 1;
+  background-size: cover;
+  background-position: center;
+  color: white;
+  padding: 40px;
+}
+
+.contact-right-panel {
+  flex: 1;
+  background-color: #ffffff;
+  padding: 60px 40px;
+}
+
+.contact-section {
+  margin-bottom: 30px;
+}
+
+.section-heading {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.section-content {
+  white-space: pre-line;
+  color: #eee;
+}
+
+.section-highlight {
+  color: #00ff99;
+  font-weight: 500;
+  white-space: pre-line;
+}
+
+.form-heading {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.contact-form input,
+.contact-form textarea {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.contact-form textarea {
+  height: 120px;
+  resize: vertical;
+}
+
+.contact-form .btn-filled {
+  background-color: #00c981;
+  color: white;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.contact-page {
+  font-family: sans-serif;
+}
+
+.hero-banner {
+  background-size: cover;
+  background-position: center;
+  padding: 80px 20px;
+  color: #fff;
+  text-align: center;
+}
+
+.contact-three-column {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  padding: 60px 20px;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.contact-map {
+  flex: 1;
+  min-width: 280px;
+  border: none;
+  height: 300px;
+}
+
+.contact-info {
+  flex: 1;
+  min-width: 280px;
+}
+
+.contact-form {
+  flex: 1;
+  min-width: 280px;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.contact-form textarea {
+  resize: vertical;
+  height: 100px;
+}
+
+.contact-form button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.contact-getintouch {
+  background-color: #084c61;
+  color: #ffffff;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.contact-getintouch h2 {
+  font-size: 28px;
+  margin-bottom: 30px;
+}
+
+.contact-getintouch .columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
+  justify-content: center;
+}
+
+.contact-getintouch .column {
+  flex: 1 1 250px;
+  text-align: left;
+}
+
+.contact-getintouch .column h4 {
+  margin-top: 10px;
+  font-size: 18px;
+}
+
+.contact-getintouch .column p {
+  font-size: 14px;
+  margin: 4px 0;
+}
+
+.contact-messageus {
+  background-color: #ffffff;
+  padding: 60px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  align-items: flex-start;
+}
+
+.contact-messageus .left-column {
+  flex: 1 1 300px;
+}
+
+.contact-messageus .left-column h2 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.contact-messageus .left-column p {
+  font-size: 14px;
+  color: #444;
+  margin-bottom: 15px;
+}
+
+.contact-messageus .form {
+  flex: 1 1 400px;
+}
+
+.contact-messageus form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.contact-messageus form input,
+.contact-messageus form textarea {
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.contact-messageus form button {
+  background-color: #c3d500;
+  color: #000;
+  border: none;
+  padding: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* blog thumbnail grid*/
+
+.blog-thumbnail-grid {
+  padding: 40px;
+  font-family: 'Segoe UI', sans-serif;
+  background: #f9f9f9;
+}
+
+.blog-thumbnail-grid h2 {
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 28px;
+  font-weight: bold;
+  color: #222;
+}
+
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+
+.blog-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+}
+
+.blog-card img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  background-color: #ddd;
+}
+
+.blog-card-content {
+  padding: 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.blog-card-content p {
+  color: gray;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.blog-card-content h4 {
+  margin: 0 0 10px 0;
+  font-size: 16px;
+}
+
+.blog-card-content h4 a {
+  text-decoration: none;
+  color: black;
+}
+
+.blog-card-content .read-more {
+  margin-top: auto;
+  font-size: 14px;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.blog-card-content .read-more:hover {
+  text-decoration: underline;
+}
+
+/* 🌓 Dark Mode */
+.dark-mode .blog-thumbnail-grid {
+  background: #1a1a1a;
+}
+
+.dark-mode .blog-thumbnail-grid h2 {
+  color: #fff;
+}
+
+.dark-mode .blog-card {
+  background: #2a2a2a;
+  border: 1px solid #444;
+}
+
+.dark-mode .blog-card-content p,
+.dark-mode .blog-card-content h4 a {
+  color: #ddd;
+}
+
+.dark-mode .blog-card-content .read-more {
+  color: #1e90ff;
+}
+
+.dark-mode .blog-card:hover {
+  box-shadow: 0 8px 16px rgba(255,255,255,0.1);
+}
+
+/* 📱 Responsive Tuning */
+@media (max-width: 600px) {
+  .blog-thumbnail-grid {
+    padding: 20px;
+  }
+  .blog-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.blog-template {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+.blog-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.blog-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.blog-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.blog-nav ul {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 40px;
+}
+
+.blog-nav li {
+  font-weight: 500;
+  cursor: pointer;
+  color: #007bff;
+}
+
+.blog-layout {
+  display: flex;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+.blog-main {
+  flex: 1 1 65%;
+}
+
+.content-block {
+  margin-bottom: 30px;
+}
+
+.content-heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.content-text {
+  font-size: 1rem;
+  color: #444;
+  line-height: 1.6;
+}
+
+.blog-sidebar {
+  flex: 1 1 30%;
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.sidebar-widget {
+  margin-bottom: 20px;
+  font-weight: 500;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .blog-layout {
+    flex-direction: column;
+  }
+  .blog-nav ul {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+}
+
+
+/* ✅ Clean and responsive logo section */
+.logo-cloud {
+  padding: 60px 20px;
+  background-color: #ffffff;
+  text-align: center;
+}
+
+.logo-cloud-heading h2 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #222;
+  margin-bottom: 40px;
+}
+
+.logo-cloud-logos {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+}
+
+.logo-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+.placeholder-img {
+  width: 120px;
+  height: 120px;
+  background-repeat: no-repeat;
+  background-image: url('/src/assets/images/placeholder.png');
+  background-position: center center;
+  background-size: contain;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+
+/* Responsive */
+@media (max-width: 768px) {
+  .placeholder-img {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+
+/* 🟰 New Theme specific background for wellness */
+.theme-wellness {
+  background-color: #f0f8f5; /* Light green spa-like background */
+}
+
+/* 🟰 CTA Button Specific Styling */
+.logo-cta .cta-button {
+  padding: 10px 20px;
+  background: #222;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  border-radius: 4px;
+  display: inline-block;
+  transition: background 0.3s ease;
+  margin-top: 20px;
+}
+
+.logo-cta .cta-button:hover {
+  background: #555;
+}
+
+ /* feature section */
+/* 🔲 Feature Section Base */
+.feature-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+/* 🖼️ Image Block */
+ .feature-image {
+  flex: 1 1 40%;
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  align-self: center;
+}
+
+/* 📄 Text Content */
+.feature-content {
+  flex: 1 1 50%;
+  max-width: 600px;
+}
+
+.feature-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.3;
+}
+
+.feature-description {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 20px;
+}
+
+/* 📋 Feature List */
+.feature-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #444;
+}
+
+.feature-list li::before {
+  content: "✔";
+  position: absolute;
+  left: 0;
+  color: #008060;
+  font-weight: bold;
+}
+
+/* 🔁 Responsive Layout */
+@media (max-width: 768px) {
+  .feature-section {
+    flex-direction: column;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .feature-content {
+    max-width: 100%;
+  }
+
+  .feature-title {
+    font-size: 22px;
+  }
+
+  .feature-description {
+    font-size: 15px;
+  }
+
+  .feature-image {
+    max-width: 100%;
+  }
+}
+/* 🔲 SECTION WRAPPER */
+.brand-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+/* 🧾 PROJECT INFO */
+.project-info {
+  margin-bottom: 40px;
+  text-align: center;
+}
+.brand-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.brand-meta {
+  font-size: 0.95rem;
+  color: #555;
+}
+
+/* 🖼️ LOGO SECTION */
+.logo-section {
+  margin-bottom: 40px;
+}
+.section-heading {
+  font-size: 1.3rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+.logo-label {
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.logo-img,
+.logo-mono-group,
+.logo-social-group {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 🔳 INDIVIDUAL LOGOS */
+.default-img {
+  max-height: 60px;
+  object-fit: contain;
+  background-color: #f0f0f0;
+  padding: 6px;
+  border-radius: 6px;
+  display: block;
+}
+.logo-primary {
+  height: 60px;
+  width: auto;
+}
+
+.logo-icon {
+  height: 40px;
+  width: 40px;
+}
+
+.logo-mono {
+  height: 40px;
+  width: auto;
+}
+
+.logo-social-square,
+.logo-social-round {
+  height: 40px;
+  width: 40px;
+}
+
+
+/* 🎨 BRAND COLORS */
+.brand-colors {
+  margin-bottom: 40px;
+}
+.color-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+.color-block {
+  width: 160px;
+  height: 100px;
+  border-radius: 8px;
+  padding: 10px;
+  color: #000;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: 0.85rem;
+  text-align: center;
+}
+.color-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.color-usage {
+  font-style: italic;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+/* 🎨 COLOR BACKGROUNDS */
+.color-block.primary-blue {
+  background-color: #1E9FFF;
+}
+.color-block.light-grey {
+  background-color: #C6CBD6;
+}
+.color-block.charcoal-black {
+  background-color: #2B2B2B;
+  color: #fff;
+}
+.color-block.white {
+  background-color: #FFFFFF;
+  border: 1px solid #ddd;
+}
+
+/* ✍️ TYPOGRAPHY */
+.typography-section {
+  margin-top: 40px;
+  text-align: center;
+}
+.font-block {
+  margin-bottom: 20px;
+}
+.font-role {
+  font-weight: 600;
+  font-size: 1rem;
+}
+.font-family {
+  font-family: monospace;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+/* 📱 RESPONSIVE */
+@media (max-width: 768px) {
+  .logo-img,
+  .logo-mono-group,
+  .logo-social-group,
+  .color-group {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .color-block {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .logo-primary,
+  .logo-icon,
+  .logo-mono,
+  .logo-social-square,
+  .logo-social-round {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.logo-grid-section {
+  padding: 60px 30px;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 30px;
+}
+
+.logo-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  padding: 20px;
+  text-align: center;
+}
+
+.logo-img.placeholder {
+  width: 100%;
+  height: 140px;
+  background-color: #eee;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  background-image: url('/assets/images/placeholder.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.logo-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.logo-meta {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+
+.logo-guideline {
+  padding: 60px 30px;
+  max-width: 1000px;
+  margin: auto;
+  font-family: sans-serif;
+}
+.guideline-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.guideline-title {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.guideline-meta {
+  color: #666;
+  font-size: 0.95rem;
+}
+.guideline-section {
+  margin-bottom: 50px;
+}
+.section-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.section-description {
+  font-size: 1rem;
+  color: #444;
+  margin-bottom: 15px;
+}
+.cover-version {
+  font-weight: 600;
+  font-size: 1rem;
+  color: #888;
+}
+.cover-title {
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin: 8px 0;
+}
+.cover-subtitle {
+  color: #666;
+  font-size: 0.95rem;
+}
+.font-preview {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 6px;
+  text-align: center;
+}
+.font-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.font-usage {
+  font-size: 0.95rem;
+  color: #555;
+}
+.placeholder {
+  background: #eee;
+  border-radius: 6px;
+  height: 180px;
+  background-image: url('/assets/images/placeholder.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-top: 10px;
+}
+
+`
\ No newline at end of file
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
index ef14df5..1de4225 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html
@@ -77,119 +77,287 @@
       </div>
     </div> -->
 
-    <!-- ✅ Render whole page in one block -->
-    <!-- <div class="canvas-section">
+<!-- ✅ Render whole page in one block -->
+<!-- <div class="canvas-section">
       <div [innerHTML]="pageSections[pageName]['FullPage']"></div>
     </div>
   </div>
 </div> -->
+<!-- Controls and Actions Row -->
 
 
-<!-- part 3 -->
-<!-- 🔁 Regenerate + Save Buttons -->
-<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-  <div>
-    <button (click)="regenerateAllModifiedSections()" style="background: orange; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
-      ♻️ Regenerate Modified
+<!-- Editable HTML Area -->
+<!-- <div class="editable-area" *ngIf="editMode">
+  <div class="editable-header">
+    <h3>Editing: {{ editingSection?.page }} > {{ editingSection?.section }}</h3>
+    <button class="close-btn" (click)="closeEditMode()">×</button>
+  </div>
+  
+  <div class="editable-content">
+    <div 
+      [innerHTML]="editingSectionHtml" 
+      contenteditable="true" 
+      class="editable-html" 
+      (blur)="onSectionEdit($event)">
+    </div>
+  </div>
+  
+  <div class="editable-footer">
+    <button class="action-btn save-edit-btn" (click)="saveSectionEdit()">
+      Save Changes
     </button>
-    <button (click)="uploadHtmlFiles(37388)" style="background: green; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
-      💾 Save All HTML Files
+    <button class="action-btn cancel-edit-btn" (click)="closeEditMode()">
+      Cancel
     </button>
   </div>
+</div> -->
 
-  <div>
-    <!-- Global Style Controls -->
-    <select [(ngModel)]="liveStyles.fontSize">
+
+
+<div class="action-bar">
+  <div class="left-controls">
+    <button (click)="regenerateAllModifiedSections()" class="action-btn regenerate-btn">
+      ♻️ Regenerate Modified
+    </button>
+    <!-- <button (click)="uploadHtmlFiles(11096)" class="action-btn save-btn"> -->
+    <button (click)="createHtmlFiles()" class="action-btn save-btn">
+
+      💾 Save All HTML Files
+    </button>
+
+    <button (click)="uploadHtmlFiles(11096)" class="action-btn save-btn">
+
+      💾 build wireframe
+    </button>
+
+    <button class="btn btn-primary" (click)="recreateWireframe()">🔄 Recreate Wireframe</button>
+
+
+    <div class="navbar-controls">
+      <select [(ngModel)]="selectedNavbarPage" (change)="selectedNavbarPage && selectNavbar(selectedNavbarPage)">
+        <option value="">Select Navbar Page</option>
+        <option *ngFor="let page of objectKeys(pageSections)" [value]="page">{{ page }}</option>
+      </select>
+    </div>
+
+  </div>
+
+
+  <!-- Navbar Editor Modal -->
+  <div class="modal" *ngIf="selectedNavbarPage">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3>Edit Navbar Links - {{ selectedNavbarPage }}</h3>
+        <button class="close-btn" (click)="selectedNavbarPage = ''">×</button>
+      </div>
+
+      <div class="modal-body">
+        <div class="link-editor" *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index">
+          <input type="text" [(ngModel)]="link.label" placeholder="Link Label">
+          <select [(ngModel)]="link.href">
+            <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
+          </select>
+          <button class="remove-btn" (click)="removeLink(selectedNavbarPage, i)">×</button>
+        </div>
+
+        <button class="action-btn add-link-btn" (click)="addLink(selectedNavbarPage)">
+          ➕ Add New Link
+        </button>
+      </div>
+
+      <div class="modal-footer">
+        <button class="action-btn" (click)="applyNavbarChanges(selectedNavbarPage)">
+          Save Changes
+        </button>
+        <button class="action-btn cancel-btn" (click)="selectedNavbarPage = ''">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="right-controls">
+    <select [(ngModel)]="liveStyles.fontSize" class="style-control">
       <option value="">Font Size</option>
-      <option *ngFor="let size of ['12px', '14px', '16px', '18px', '20px', '24px', '28px']" [value]="size">{{ size }}</option>
+      <option *ngFor="let size of ['12px', '14px', '16px', '18px', '20px', '24px', '28px']" [value]="size">{{ size }}
+      </option>
     </select>
 
-    <select [(ngModel)]="liveStyles.fontWeight">
+    <select [(ngModel)]="liveStyles.fontWeight" class="style-control">
       <option value="">Font Weight</option>
       <option *ngFor="let weight of ['normal', 'bold', 'lighter']" [value]="weight">{{ weight }}</option>
     </select>
 
-    <select [(ngModel)]="liveStyles.textAlign">
+    <select [(ngModel)]="liveStyles.textAlign" class="style-control">
       <option value="">Align</option>
       <option value="left">Left</option>
       <option value="center">Center</option>
       <option value="right">Right</option>
     </select>
 
-    <input type="color" [(ngModel)]="liveStyles.color" title="Text Color" />
-    <input type="color" [(ngModel)]="liveStyles.background" title="Background Color" />
+    <input type="color" [(ngModel)]="liveStyles.color" title="Text Color" class="color-picker" />
+    <input type="color" [(ngModel)]="liveStyles.background" title="Background Color" class="color-picker" />
 
-    <button (click)="applyStyleToSelection()" style="background: #555; color: white; padding: 6px 10px; border-radius: 4px;">🎨 Apply Style</button>
+    <button (click)="applyStyleToSelection()" class="action-btn style-btn">
+      🎨 Apply Style
+    </button>
+
+    <button (click)="verifyCssInSections()" class="action-btn">🔍 Verify CSS</button>
   </div>
 </div>
 
-<!-- Navbar Link Manager -->
-<!-- <div *ngIf="selectedNavbarPage" class="navbar-link-manager">
-  <h3>🔗 Navbar Link Manager ({{ selectedNavbarPage }})</h3>
+<!-- Grid and Wireframe Canvas Area -->
+<div class="visual-editor-container">
+  <!-- Zoom Controls -->
+  <div class="zoom-controls">
+    <button class="zoom-btn" (click)="zoomIn()">
+      <i class="fa fa-plus"></i>
+    </button>
+    <button class="zoom-btn" (click)="zoomOut()">
+      <i class="fa fa-minus"></i>
+    </button>
+    <button class="zoom-btn" (click)="resetZoom()">
+      <i class="fa fa-expand"></i>
+    </button>
+  </div>
 
-  <ul>
-    <li *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index">
-      <input [(ngModel)]="link.label" placeholder="Link Label" />
-      <select [(ngModel)]="link.href">
-        <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
-      </select>
-      <button (click)="removeLink(selectedNavbarPage, i)">❌</button>
-    </li>
-  </ul>
+  <!-- Canvas Area with Grid -->
+  <div class="canvas-wrapper" cdkScrollable>
+    <div class="canvas-boundary" [style.transform]="getTransform()" (mousedown)="startPan($event)"
+      (mousemove)="doPan($event)" (mouseup)="endPan()" (mouseleave)="endPan()">
 
-  <button (click)="addLink(selectedNavbarPage)">➕ Add Link</button>
-  <button (click)="applyNavbarChanges(selectedNavbarPage)">✅ Apply Changes</button>
-</div> -->
+      <!-- Grid Background -->
+      <div class="grid-background"></div>
+
+      <div *ngIf="isLoading" class="loading-overlay">
+        <div class="spinner"></div>
+      </div>
 
 
- <!-- 🔗 Navbar Link Editor Modal -->
-<div *ngIf="selectedNavbarPage" class="navbar-popup-overlay">
-  <div class="navbar-popup-content">
-    <h3>🔗 Navbar Link Manager ({{ selectedNavbarPage }})</h3>
+      <!-- Pages Container - Draggable Pages -->
+      <div *ngIf="!isLoading" class="pages-container" cdkDropList cdkDropListOrientation="vertical"
+        (cdkDropListDropped)="onPageDrop($event)">
 
-    <ul>
-      <li *ngFor="let link of navbarLinks[selectedNavbarPage]; let i = index">
-        <input [(ngModel)]="link.label" placeholder="Link Label" />
-        <select [(ngModel)]="link.href">
-          <option *ngFor="let page of availablePages" [value]="page.href">{{ page.label }}</option>
+        <div *ngFor="let pageName of pageRenderOrder" class="page-card" cdkDrag
+          [class.page-hovered]="hoveredPage === pageName" (mouseenter)="showPageTools(pageName)"
+          (mouseleave)="hidePageTools(pageName)">
+
+          <!-- Page Header with Tools -->
+          <div class="page-header">
+            <h3 class="page-title">{{ pageName }}</h3>
+            <div class="page-tools" [class.visible]="hoveredPage === pageName">
+              <button class="tool-btn" (click)="regenerateWireframe(pageName)" title="Regenerate">♻️</button>
+              <button class="tool-btn" (click)="copyToClipboard(pageName)" title="Copy HTML">📋</button>
+              <button class="tool-btn" (click)="downloadHtml(pageName)" title="Download HTML">⬇️</button>
+            </div>
+          </div>
+
+          <!-- Sections Container - Draggable Sections -->
+          <div class="sections-container" cdkDropList [id]="'section-list-' + pageName"
+            [cdkDropListData]="getSectionsData(pageName)" (cdkDropListDropped)="onSectionDrop($event, pageName)">
+
+            <!-- Individual Draggable Sections -->
+            <div *ngFor="let sectionKey of getSectionKeys(pageName); let i = index" class="section-card"
+              [attr.data-section-id]="sectionKey" cdkDrag [cdkDragData]="sectionKey"
+              (mouseenter)="showSectionTools(pageName, sectionKey)" (mouseleave)="hideSectionTools()">
+
+              <!-- Section Content -->
+              <div class="section-content">
+                <!-- Section Header -->
+                <div class="section-header">
+                  <span class="section-title">{{ sectionKey }}</span>
+
+                  <!-- Section Actions -->
+                  <div class="section-actions" [class.visible]="hoveredSection === sectionKey">
+                    <button class="section-btn" title="Toggle Edit Mode"
+                      (click)="toggleSectionEditing(pageName, sectionKey, $event)">
+                      <i class="fa fa-pencil"></i>
+                    </button>
+                    <button class="section-btn" title="Remove Section" (click)="removeSection(pageName, sectionKey)">
+                      <i class="fa fa-trash"></i>
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Section Preview with COMMON_CSS applied -->
+                <!-- Change all [innerHTML] bindings to use $any() to bypass strict checks -->
+                <div class="section-preview" [innerHTML]="$any(getSectionHtml(pageName, sectionKey))"
+                  (dblclick)="toggleSectionEditing(pageName, sectionKey, $event)"
+                  (blur)="handleDirectContentEdit($event, pageName, sectionKey)"
+                  [attr.contenteditable]="isSectionEditable(pageName, sectionKey)">
+                </div>
+              </div>
+
+              <!-- Add Section Button (appears on hover) -->
+              <div class="add-section-btn" *ngIf="hoveredSection === sectionKey"
+                (click)="addNewSection(pageName, sectionKey)">
+                <i class="fa fa-plus"></i>
+              </div>
+
+              <!-- Drag Handle -->
+              <div class="drag-handle" cdkDragHandle>
+                <i class="fa fa-grip-lines"></i>
+              </div>
+            </div>
+
+            <!-- Empty State / Add First Section -->
+            <div *ngIf="getSectionKeys(pageName).length === 0" class="empty-sections">
+              <button class="add-first-section" (click)="addNewSection(pageName)">
+                <i class="fa fa-plus"></i> Add First Section
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- Modal for Adding New Section -->
+<div class="modal" *ngIf="showNewSectionModal">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h3>Add New Section to {{ newSectionPage }}</h3>
+      <button class="close-btn" (click)="cancelAddSection()">×</button>
+    </div>
+
+    <div class="modal-body">
+      <div class="form-group">
+        <label>Section Name:</label>
+        <input type="text" [(ngModel)]="newSectionName" placeholder="Enter section name">
+      </div>
+
+      <div class="form-group">
+        <label>Section Type:</label>
+        <select [(ngModel)]="newSectionType">
+          <option value="">Select a type</option>
+          <option value="header">Header</option>
+          <option value="hero">Hero</option>
+          <option value="features">Features</option>
+          <option value="gallery">Gallery</option>
+          <option value="pricing">Pricing</option>
+          <option value="testimonials">Testimonials</option>
+          <option value="contact">Contact</option>
+          <option value="footer">Footer</option>
         </select>
-        <button (click)="removeLink(selectedNavbarPage, i)">❌</button>
-      </li>
-    </ul>
+      </div>
 
-    <div style="margin-top: 10px;">
-      <button (click)="addLink(selectedNavbarPage)">➕ Add Link</button>
-      <button (click)="applyNavbarChanges(selectedNavbarPage)">✅ Apply</button>
-      <button (click)="selectedNavbarPage = null">❌ Close</button>
-    </div>
-  </div>
-</div>
-
-
-
-<!-- ✅ Pages List -->
-<div class="canvas-wrapper">
-  <div class="canvas-page" *ngFor="let pageName of pageRenderOrder">
-    <div class="canvas-header">
-      <button (click)="regenerateWireframe(pageName)">♻️</button>
-      <h3 (click)="selectNavbar(pageName)" style="cursor: pointer;">
-        {{ pageName }} <span title="Edit Navbar">🧭</span>
-      </h3>
-      
-      <div class="canvas-actions">
-        <button (click)="copyToClipboard(pageName)">📋</button>
-        <button (click)="downloadHtml(pageName)">⬇️</button>
+      <div class="form-group">
+        <label>Section Description:</label>
+        <textarea [(ngModel)]="newSectionDescription" rows="4"
+          placeholder="Describe the content for this section"></textarea>
       </div>
     </div>
 
-    <!-- ✅ Render and Edit Section -->
-    <div class="canvas-section">
-      <div [innerHTML]="pageSections[pageName]?.FullPage"
-
-           contenteditable="true"
-           class="editable-html"
-           (blur)="onEdit(pageName, $event)">
-      </div>
+    <div class="modal-footer">
+      <button class="action-btn" [disabled]="!newSectionName || !newSectionType" (click)="confirmAddSection()">
+        Add Section
+      </button>
+      <button class="action-btn cancel-btn" (click)="cancelAddSection()">
+        Cancel
+      </button>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
index 9e84084..c20e662 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss
@@ -1,92 +1,668 @@
-// .wireframe-container {
-//     font-family: Arial, sans-serif;
-//     background: #f8f8f8;
-//     padding: 1rem;
-//   }
-  
-//   .border-dashed {
-//     border-style: dashed;
-//   }
+/* Reset and base styles */
+.visual-editor-container {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
 
-.canvas-wrapper {
-  display: flex;
-  flex-wrap: wrap; /* ✅ Allow wrapping on smaller screens */
-  gap: 20px;
-  padding: 20px;
-  justify-content: center;
-  background: #f0f0f0;
+  body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #333;
+    line-height: 1.5;
+    overflow: hidden;
+  }
 }
+  /* Overall layout fixes */
+  .visual-editor-container {
+    position: relative;
+    height: calc(100vh - 60px);
+    overflow: hidden;
+    background: #f0f2f5;
+  }
 
-.canvas-page {
-  min-width: 300px;
-  min-height: 500px;
-  resize: both;           /* 👈 Allows both vertical and horizontal resizing */
-  overflow: auto;         /* 👈 So content doesn't get cut off */
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  background: white;
-  padding: 20px;
-  box-shadow: 0 0 6px rgba(0,0,0,0.1);
+  /* Action bar styling */
+  .action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fff;
+    padding: 8px 16px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    height: 60px;
+  }
+
+  .section-preview {
+    .preview-mode {
+      min-height: 200px;
+      padding: 20px;
+      transform: scale(0.8);
+      transform-origin: top left;
+      width: 125%;
+      
+      * {
+        pointer-events: none;
+      }
+    }
+
+    &[contenteditable="true"] {
+      .preview-mode {
+        transform: none;
+        width: 100%;
+        pointer-events: auto;
+        
+        * {
+          pointer-events: auto;
+        }
+      }
+    }
+  }
+
+  .left-controls, .right-controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .action-btn {
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+    background: #f5f5f5;
+
+    &:hover {
+      background: #e0e0e0;
+    }
+
+    &.regenerate-btn {
+      background: #e3f2fd;
+      color: #2196f3;
+
+      &:hover {
+        background: #bbdefb;
+      }
+    }
+
+    &.save-btn {
+      background: #e8f5e9;
+      color: #4caf50;
+
+      &:hover {
+        background: #c8e6c9;
+      }
+    }
+  }
+
+  .style-control {
+    padding: 6px 8px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    min-width: 100px;
+  }
+
+  .color-picker {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  /* Zoom controls */
+  .zoom-controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    gap: 5px;
+    z-index: 50;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 5px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+
+  .zoom-btn {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: none;
+    background: #f5f5f5;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: #e0e0e0;
+    }
+  }
+
+  /* Canvas and grid styling */
+  .canvas-wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .canvas-boundary {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: move;
+    transform-origin: 0 0;
+    will-change: transform;
+    background-color: #f5f5f5;
+  }
+
+  .grid-background {
+    position: absolute;
+    width: 5000px;
+    height: 5000px;
+    background-size: 20px 20px;
+    background-image: 
+      linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
+    transform: translate(-2500px, -2500px);
+  }
+
+  /* Pages container */
+  .pages-container {
+    display: flex;
+    gap: 40px;
+    padding: 40px;
+    align-items: flex-start;
+    position: relative;
+    z-index: 10;
+    width: 2000px;
+    height: auto;
+    overflow: hidden;
+  }
+
+  /* Page card styling */
+  .page-card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: box-shadow 0.3s;
+    width: 100%;
+    margin: 20px 0;
+    overflow: hidden;
+
+    &:hover {
+      box-shadow: 0 6px 14px rgba(0,0,0,0.15);
+    }
+
+    &.page-hovered {
+      border: 2px solid #2196f3;
+    }
+  }
+
+  /* Page header */
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #eee;
+    background: #f5f7fa;
+    border-radius: 8px 8px 0 0;
+  }
+
+  /* Navbar Editor Styles */
+  .navbar-controls {
+    margin-left: 20px;
+
+    select {
+      padding: 8px 12px;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+    }
+  }
+
+  .link-editor {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+
+    input, select {
+      flex: 1;
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+
+    .remove-btn {
+      background: #ff4444;
+      color: white;
+      border: none;
+      border-radius: 50%;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
+
+  .add-link-btn {
+    margin-top: 15px;
+    width: 100%;
+  }
+
+  .page-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .page-tools {
+    display: flex;
+    gap: 8px;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &.visible {
+      opacity: 1;
+    }
+  }
+
+  .tool-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: rgba(0,0,0,0.05);
+    }
+  }
+
+  /* In component's CSS */
+.pages-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 2rem;
+  padding: 1rem;
 }
 
-
-
-
-.canvas-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-  padding-bottom: 10px;
+.page-card {
+  width: 100%;
+  margin-bottom: 2rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
 }
-
-.canvas-header h3 {
-  margin: 0;
-  font-size: 18px;
-}
-
-.canvas-actions button {
-  margin-left: 5px;
-  background: #007bff;
-  border: none;
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.canvas-section {
-  border: 1px dashed #ccc;
-  padding: 10px;
-  border-radius: 6px;
-  background: #fff;
-}
-
-
-.editable-html:focus {
-  outline: 2px solid #007bff;
-  background: #fcfcfc;
-}
-.navbar-popup-overlay {
+.loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+} 
+  /* Sections container */
+  .sections-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    min-height: 100px;
+    max-height: 600px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    // width: 1700px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(0,0,0,0.2);
+      border-radius: 3px;
+    }
+  }
+
+  /* Section card */
+  .section-card {
+    background: white;
+    border: 1px solid #eaeaea;
+    border-radius: 6px;
+    transition: all 0.2s;
+    position: relative;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+
+    &:hover {
+      box-shadow: 0 2px 5px rgba(0,0,0,0.12);
+      border-color: #dadada;
+    }
+  }
+
+  /* Section header */
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #eee;
+    border-radius: 6px 6px 0 0;
+  }
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #444;
+  }
+
+  .section-actions {
+    display: flex;
+    gap: 6px;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &.visible {
+      opacity: 1;
+    }
+  }
+
+  .section-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 26px;
+    height: 26px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: rgba(0,0,0,0.05);
+    }
+  }
+
+  /* Section preview area */
+  .section-preview {
+    padding: 12px;
+    min-height: 50px;
+    font-size: 14px;
+    word-break: break-word;
+    position: relative;
+  }
+
+  /* Add section button */
+  .add-section-btn {
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #2196f3;
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+
+    &:hover {
+      background: #1e88e5;
+    }
+  }
+
+  /* Drag handle */
+  .drag-handle {
+    position: absolute;
+    top: 50%;
+    left: -14px;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition: opacity 0.2s;
+    width: 18px;
+    height: 36px;
+    background: #eee;
+    border-radius: 4px 0 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+
+    .section-card:hover & {
+      opacity: 1;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  /* Empty sections state */
+  .empty-sections {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100px;
+    border: 2px dashed #ddd;
+    border-radius: 6px;
+  }
+
+  .add-first-section {
+    background: #f5f5f5;
+    border: 1px solid #ddd;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &:hover {
+      background: #eee;
+    }
+  }
+
+  /* CDK drag styles */
+  .cdk-drag-preview {
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
+    opacity: 0.8;
+    border: 2px solid #2196f3;
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0.3;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .sections-container.cdk-drop-list-dragging .section-card:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .action-bar {
+      flex-direction: column;
+      height: auto;
+      padding: 10px;
+      gap: 10px;
+    }
+    
+    .left-controls, .right-controls {
+      width: 100%;
+      justify-content: space-between;
+    }
+    
+    .visual-editor-container {
+      height: calc(100vh - 110px);
+    }
+  }
+
+
+/* Global modal styles (outside visual-editor scope) */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background: rgba(0,0,0,0.5);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 1000;
 }
 
-.navbar-popup-content {
+.modal-content {
   background: white;
-  padding: 20px;
-  width: 500px;
-  max-width: 90%;
   border-radius: 8px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
 }
+
+.modal-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.modal-body {
+  padding: 16px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.modal-footer {
+  padding: 16px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* Section editing styles */
+.edit-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.edit-container {
+  background: white;
+  border-radius: 8px;
+  width: 80%;
+  max-width: 1000px;
+  height: 80%;
+  max-height: 800px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.edit-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.edit-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.edit-content {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+
+.editable-html {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 16px;
+  min-height: 100%;
+  outline: none;
+}
+
+.edit-footer {
+  padding: 16px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
\ No newline at end of file
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
index 3aa48bb..5c5fa23 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
@@ -1,5 +1,5 @@
-// wireframe-renderer.component.ts
-import { Component, Input, OnInit } from '@angular/core';
+
+import { Component, Input, OnInit, SecurityContext } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
@@ -7,18 +7,15 @@ import { COMMON_CSS } from './common-css';
 import { ToastrService } from 'ngx-toastr';
 import * as sha256 from 'crypto-js/sha256';
 import SHA256 from 'crypto-js/sha256';
-import { trigger, transition, style, animate, state } from '@angular/animations';
-// Make sure path is correct
-
-
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Download_Css } from './download-css';
 
 @Component({
     selector: 'app-wireframe-renderer',
     templateUrl: './wireframe-renderer.component.html',
-    styleUrls: ['./wireframe-renderer.component.scss'],
+    styleUrls: ['./wireframe-renderer.component.scss']
 })
 
-
 export class WireframeRendererComponent implements OnInit {
     @Input() node: any;
     @Input() title: string = '';
@@ -30,6 +27,31 @@ export class WireframeRendererComponent implements OnInit {
     initialGeneratedPrompts: Record<string, Record<string, string>> = {};
     promptHashCache: Record<string, string> = {};
     pageSections: Record<string, { FullPage: SafeHtml }> = {};
+    sectionHtmls: Record<string, Record<string, SafeHtml>> = {};
+    isLoading: boolean = true;
+    sitename = '';
+    // Added properties for grid and drag functionality
+    hoveredPage: string | null = null;
+    hoveredSection: string | null = null;
+    scale: number = 1;
+    panX: number = 0;
+    panY: number = 0;
+    isPanning: boolean = false;
+    lastX: number = 0;
+    lastY: number = 0;
+    
+    // Edit mode properties
+    editMode: boolean = false;
+    editingSection: { page: string, section: string } | null = null;
+    editingSectionHtml: SafeHtml | null = null;
+    
+    // New section modal properties
+    showNewSectionModal: boolean = false;
+    newSectionPage: string = '';
+    newSectionName: string = '';
+    newSectionType: string = '';
+    newSectionDescription: string = '';
+    newSectionAfter: string | null = null;
 
 
     constructor(
@@ -41,35 +63,136 @@ export class WireframeRendererComponent implements OnInit {
 
     ngOnInit(): void {
         this.id = this.route.snapshot.params['id'];
-
-        console.log(' id is :  ', this.id)
-
+        console.log('id is: ', this.id);
         this.fetchTreeById(this.id);
+        const style = document.createElement('style');
+    style.textContent = COMMON_CSS;
+    document.head.appendChild(style);
     }
 
-    // wireframe-renderer.component.ts (add this helper method)
-    getKeys(obj: any): string[] {
+    ngAfterViewInit(): void {
+        // Apply CSS after a short delay to ensure DOM is fully rendered
+        setTimeout(() => {
+        this.ensureCommonCssForAllSections();
+        this.verifyCssInSections();
+        }, 500);
+    }
+
+    // Helper method to get object keys
+    objectKeys(obj: any): string[] {
         return Object.keys(obj || {});
     }
 
-    // Step 1 get  data from that id
+    toggleSectionEditing(pageName: string, sectionKey: string, event: Event): void {
+        event.stopPropagation();
+        const previewElement = event.target as HTMLElement;
+        const sectionPreview = previewElement.closest('.section-preview') as HTMLElement;
+        
+        if (sectionPreview) {
+        const isEditable = sectionPreview.getAttribute('contenteditable') === 'true';
+        
+        // Toggle edit mode
+        sectionPreview.setAttribute('contenteditable', !isEditable + '');
+        
+        if (!isEditable) {
+            // Add specific class for styling when editing
+            sectionPreview.classList.add('editing-active');
+            
+            // Ensure CSS is available for editing
+            this.ensureCommonCssForAllSections();
+            
+            sectionPreview.focus();
+        } else {
+            // Remove editing class
+            sectionPreview.classList.remove('editing-active');
+            
+            // Save changes
+            this.saveSectionChanges(pageName, sectionKey, sectionPreview.innerHTML);
+        }
+        }
+    }
+
+    verifyCssInSections(): void {
+        // First ensure common CSS is in the head
+        this.ensureCommonCssForAllSections();
+        
+        // Check all section previews have proper styling
+        const sectionPreviews = document.querySelectorAll('.section-preview');
+        let fixedCount = 0;
+        
+        sectionPreviews.forEach((preview: HTMLElement) => {
+        // If the preview doesn't have styling class, add it
+        if (!preview.classList.contains('section-preview-styled')) {
+            preview.classList.add('section-preview-styled');
+            fixedCount++;
+        }
+        
+        // Check if section has already embedded CSS
+        if (!preview.querySelector('style[data-section-css]')) {
+            // Create a new style element specifically for this section
+            const sectionStyle = document.createElement('style');
+            sectionStyle.setAttribute('data-section-css', 'true');
+            sectionStyle.textContent = COMMON_CSS;
+            preview.insertBefore(sectionStyle, preview.firstChild);
+            fixedCount++;
+        }
+        });
+        
+        // Update full page rendering for each page to ensure correct CSS
+        for (const pageName of this.objectKeys(this.pageSections)) {
+        this.updateFullPageHtml(pageName);
+        }
+        
+        this.toastr.success(`CSS verification complete. Fixed ${fixedCount} sections.`);
+    }
+
+    enhanceSectionWithClasses(html: string): string {
+        // Add basic container classes if missing
+        if (!html.includes('class="container"') && !html.includes('class="row"')) {
+            // Add container class to the first div that has no class
+            html = html.replace(/<div(?!\s+class=)/i, '<div class="container"');
+        }
+        
+        // Add section classes if it's a section without class
+        if (html.includes('<section') && !html.includes('<section class=')) {
+            html = html.replace(/<section/i, '<section class="content-section"');
+        }
+        
+        return html;
+    }
+
+    isSectionEditable(page: string, section: string): boolean {
+        return this.editingSection?.page === page && 
+            this.editingSection?.section === section;
+    }
+    saveSectionChanges(pageName: string, sectionKey: string, html: string): void {
+// Remove temporary style tags
+const cleanedHtml = html.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '');
+
+this.sectionHtmls[pageName][sectionKey] = 
+    this.sanitizer.bypassSecurityTrustHtml(cleanedHtml);
+
+this.updateFullPageHtml(pageName);
+this.toastr.success(`Updated section: ${sectionKey}`);
+}
+
+    // Step 1: Get data from tree by ID
     fetchTreeById(id: number) {
         this.siteTreeService.getById(id).subscribe({
             next: (res) => {
                 console.log('📥 Fetched from getById:', res);
-
-                // Check if model key exists and has some value
+                
                 if (res && res.model) {
                     try {
-
                         this.initialPrompt = res.prompt;
-
-                        // Optional: if model is already a stringified JSON
+                        
                         const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
                         this.jsonInput = JSON.stringify(maybeParsed, null, 2);
-
+                        this.sitename = res.name;
                         this.generatePromptsForAllSections(this.jsonInput);
+                        this.isLoading = false;
                     } catch (err) {
+                    this.isLoading = false;
                         console.error('❌ Error parsing model JSON:', err);
                         alert('Model data is not valid JSON format');
                     }
@@ -79,66 +202,84 @@ export class WireframeRendererComponent implements OnInit {
             },
             error: (err) => {
                 console.error('❌ Error in getById:', err);
-                // alert('Failed to fetch data from server');
             }
         });
     }
 
-    // all prompt in one map
-
-    // Step 2
+    // Step 2: Generate prompts for all sections
     async generatePromptsForAllSections(treeJsonString: string) {
         try {
             const parsedTree = JSON.parse(treeJsonString);
             await this.processPages(parsedTree);
         } catch (e) {
-            // alert('❌ Invalid JSON format');
             console.error('❌ Invalid JSON format', e);
         }
     }
-
     // Step 3
     pageRenderOrder: string[] = []; // 🚀 New array to hold correct page order
 
-    async processPages(treeJson: any) {
-        console.log('tree is : ', treeJson)
+    // 🔄 Maintain strict page and section render order
+    sectionOrderMap: Record<string, string[]> = {}; // 🆕 Added to track section order
+    missingHtmlPages: string[] = [];
+
+    async processPages(treeJson: any,forceRegenerate = false) {
+        console.log('tree is : ', treeJson);
+
         for (const [pageName, sections] of Object.entries(treeJson)) {
             this.pageRenderOrder.push(pageName);  // ✅ Track the order of pages
-            // child page prompt map
+            this.sectionOrderMap[pageName] = [];  // ✅ Init section order array
+
+            console.log('process page is  : ',pageName)
+
+            // if (!forceRegenerate) {
+            // const existingHtml = await this.tryReadHtmlFromServer(this.sitename, pageName);
+            // console.log('existing html gpot   : ',existingHtml)
+
+            // if (existingHtml) {
+            //     // Page already exists as static HTML
+            //     this.pageSections[pageName] = {
+            //         FullPage: this.sanitizer.bypassSecurityTrustHtml(existingHtml)
+            //     };
+            //     console.log('existing html got from : ',pageName)
+            //     break; // skip further generation
+            //     }
+            // }
+            
+            this.missingHtmlPages.push(pageName); // Track for saving later
+
             const sectionPrompts: Record<string, string> = {};
+
+            // Handle nested children first (recursive)
             if (sections['Children']) {
-                // 👇 Recursively handle child pages
-                console.log(' child is : ', sections['Children'])
-                // this.generatePromptsForAllSections(sections['Children']);
-                await this.processPages(sections['Children']); // ✅ Fix: recursive + awaited
-
+                console.log(' child is : ', sections['Children']);
+                await this.processPages(sections['Children']);
             }
-            // Loop other sections
+
+            // Loop through sections in declared order
             for (const [sectionName, sectionDescription] of Object.entries(sections)) {
+                if (sectionName === 'Children') continue; // skip Children key
 
-                if (sectionName === 'Children') continue; // already handled
+                // ✅ Track section order
+                this.sectionOrderMap[pageName].push(sectionName);
 
-                console.log('✅ Generating prompt for : ', pageName, 'sectionc name and   sectionDescription : ', sectionName, ' ', sectionDescription);
+                console.log('✅ Generating prompt for :', pageName, '| Section:', sectionName, '| Description:', sectionDescription);
 
-                const prompt = await this.generatePromptFromSection(sectionName, sectionDescription); // ✅ await
+                const prompt = await this.generatePromptFromSection(sectionName, sectionDescription);
                 sectionPrompts[sectionName] = prompt;
             }
 
-            // 🧠 Store all prompts for that page
+            // 🧠 Store prompts
             this.allPagePrompts[pageName] = sectionPrompts;
             this.initialGeneratedPrompts[pageName] = JSON.parse(JSON.stringify(sectionPrompts)); // Deep clone
-
         }
+
         console.log('✅ FINAL PROMPT MAP:', this.allPagePrompts);
 
-        await this.processAllPagesLiveUpdate()
+        await this.processAllPagesLiveUpdate();
+    
     }
 
-    get objectKeys() {
-        return Object.keys;
-    }
-
-
+    
     jsonsuffixprompt = `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).
                     🚫 Do NOT include:
 - Any explanation, extra text, or markdown
@@ -147,7 +288,7 @@ export class WireframeRendererComponent implements OnInit {
 
 ✅ Only return a single, production-ready, semantic HTML block.
 ✅ Respect image/icon placeholders using their width/height.
-✅ Use clean structure with appropriate tags like <header>, <nav>, <ul>, <button>, etc.”
+✅ Use clean structure with appropriate tags like <header>, <nav>, <ul>, <button>, etc."
 Only return the clean semantic HTML structure. 
 ❌ Do not return any inline style.
 ❌ Do not use position: absolute or fixed unless necessary.
@@ -162,14 +303,13 @@ HTML Only. No CSS.
 🚫 Do NOT include:
 - Any explanation or markdown formatting
 - Comments or alternate versions
-- Any text like “Here's the HTML...” or “Below is...”
+- Any text like "Here's the HTML..." or "Below is..."
 
 ✅ Just return a clean, single block of HTML code.
 ✅ Focus on layout that matches a modern UI — semantic, responsive, and readable.
 ✅ Use placeholders for image/icon blocks where appropriate (e.g., <div style="width:100px;height:30px;background:#ccc;"></div>)`;
 
-
-
+    // Generate prompt from section
     async generatePromptFromSection(
         sectionName: string,
         sectionDescription: string,
@@ -179,60 +319,60 @@ HTML Only. No CSS.
         return new Promise((resolve) => {
             const fieldType = sectionName.toLowerCase().replace(/section$/i, '').trim();
 
-            this.siteTreeService.getDesignLibrary(operationType, fieldType).subscribe({
+            // this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
+               this.siteTreeService.getDesignLibrary( operationType, fieldType).subscribe({
+
                 next: async (res) => {
                     try {
-                        const id = res?.id;
-
-
                         // const jsonBlock = res?.javacode;
-                        // if (!jsonBlock) return resolve('{}');
+                        const jsonBlock = res?.htmljson;
 
-                        // const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
-                        // const baseJsonString = JSON.stringify(baseJson, null, 2);
+                        if (!jsonBlock) return resolve('{}');
 
-                        // const enhancedPrompt = `
-                        // 🎯 Enhance the content of this section using the following context.
+                        const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
+                        const baseJsonString = JSON.stringify(baseJson, null, 2);
 
-                        // 🧠 Instructions:
-                        // - You are given an existing JSON structure for a UI section.
-                        // - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
-                        // - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
-                        // - You must NOT add or remove any keys or elements.
-                        // - You must return ONLY the updated JSON structure in valid format.
+                        const enhancedPrompt = `
+                        🎯 Enhance the content of this section using the following context.
+                        
+                        🧠 Instructions:
+                        - You are given an existing JSON structure for a UI section.
+                        - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
+                        - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
+                        - You must NOT add or remove any keys or elements.
+                        - You must return ONLY the updated JSON structure in valid format.
+                        
+                        📄 Page Prompt:
+                        "${this.initialPrompt}"
+                        
+                        📦 Section Name:
+                        "${sectionName}"
+                        
+                        📘 Section Description:
+                        "${sectionDescription}"
+                        
+                        📌 Existing JSON (modify this only):
+                        ${baseJsonString}
+                        
+                        🚫 Do NOT include:
+                        - Any explanation, commentary, or markdown
+                        - Any prefix like "Here is the updated JSON"
+                        - Any new elements that were not already present
+                        
+                        ✅ Output Requirement:
+                        Only return the updated JSON structure — nothing else.
+                        `;
 
-                        // 📄 Page Prompt:
-                        // "${this.initialPrompt}"
+                        const hash = sha256(enhancedPrompt).toString();
 
-                        // 📦 Section Name:
-                        // "${sectionName}"
-
-                        // 📘 Section Description:
-                        // "${sectionDescription}"
-
-                        // 📌 Existing JSON (modify this only):
-                        // ${baseJsonString}
-
-                        // 🚫 Do NOT include:
-                        // - Any explanation, commentary, or markdown
-                        // - Any prefix like "Here is the updated JSON"
-                        // - Any new elements that were not already present
-
-                        // ✅ Output Requirement:
-                        // Only return the updated JSON structure — nothing else.
-                        // `;
-
-
-                        // const hash = sha256(enhancedPrompt).toString();
-
-                        // if (this.promptHashCache[hash]) {
-                        //     return resolve(this.promptHashCache[hash]);
-                        // }
+                        if (this.promptHashCache[hash]) {
+                            return resolve(this.promptHashCache[hash]);
+                        }
 
                         // const enhanced = await this.callLlm(enhancedPrompt);
                         // this.promptHashCache[hash] = enhanced;
 
-                        resolve(id);
+                        resolve(baseJsonString);
                     } catch (err) {
                         console.error('❌ JSON parse error:', err);
                         resolve('{}');
@@ -243,50 +383,88 @@ HTML Only. No CSS.
         });
     }
 
-    cachedPromptHashes: Record<string, Record<string, string>> = {};
-    sectionHtmls: Record<string, Record<string, string>> = {};
-
-    // Step 1 - Generate SHA-256 Hash
-
-    getPromptHash(prompt: string): string {
-        return SHA256(prompt).toString();
-    }
-
-
-    // Step 2 - Enhance per section with Hash Check + LLM call in Parallel
-
+    // Process all pages live update
     async processAllPagesLiveUpdate() {
         const htmlGenerationTasks: Promise<void>[] = [];
 
-        for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
+        // for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
+        //     htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap));
+        // }
+        for (const pageName of this.pageRenderOrder) {
+            console.log(' process page is : ', pageName);
+            const sectionMap = this.allPagePrompts[pageName];
             htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap));
         }
 
         await Promise.all(htmlGenerationTasks);
+
+        // ✅ Now save the newly generated pages only
+const fileMap: Record<string, string> = {};
+for (const pageName of this.missingHtmlPages) {
+    const html = this.pageSections[pageName].FullPage?.toString() || '';
+    fileMap[pageName] = html;
+}
+
+if (Object.keys(fileMap).length > 0) {
+    this.siteTreeService.createHtmlfile(this.sitename, fileMap).subscribe({
+    next: (res) => {
+        this.toastr.success(`Saved ${Object.keys(fileMap).length} new HTML files`);
+    },
+    error: (err) => {
+        this.toastr.error('Failed to save HTML files');
+        console.error('❌ Error saving html:', err);
+    }
+    });
+}
     }
 
+    // Process page sections
     async processPageSections(pageName: string, sectionMap: Record<string, string>) {
         const sectionHtmls: string[] = [];
-
+        this.sectionHtmls[pageName] = {};
+    
         const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => {
             const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt });
             sectionHtmls.push(html);
+            
+            // Store individual section HTML
+            this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html);
         });
-
+    
         await Promise.all(htmlTasks);
-
-        const finalHtml = `<style>${COMMON_CSS}</style>\n${sectionHtmls.join('\n')}`;
+    
+        // Make sure the CSS is injected properly with !important flags
+        const finalHtml = `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>${pageName}</title>
+            <style>
+                ${Download_Css}
+                
+                html, body {
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    min-height: 100% !important;
+                    width: 100% !important;
+                    font-family: 'Segoe UI', sans-serif !important;
+                }
+            
+            </style>
+        </head>
+        <body>
+        
+                ${sectionHtmls.join('\n')}
+            
+        </body>
+        </html>`;
+        
         const safeHtml = this.sanitizer.bypassSecurityTrustHtml(finalHtml);
-
         this.pageSections[pageName] = { FullPage: safeHtml };
     }
-
-
-
-    pageHtmlMap: Record<string, string> = {};
-    generatedPages: { name: string, html: string }[] = [];
-
-    // Step 6
+    // Generate JSON to HTML
     async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
         return new Promise((resolve) => {
             try {
@@ -300,11 +478,11 @@ HTML Only. No CSS.
                     jsonStructure: parsedJson
                 };
 
-                console.log('📤 Sending to HTML API:', payload);
+                console.log('📤 Sending to HTML API:', parsedJson);
 
-                this.siteTreeService.generateHtml(payload).subscribe({
+                this.siteTreeService.generateHtml(parsedJson).subscribe({
                     next: (res) => {
-                        console.log('✅ Response from HTML API ', payload.sectionType, ' : ', res);
+                        console.log('✅ Response from HTML API:', res);
                         if (res && res.msg) {
                             resolve(res.msg);
                         } else {
@@ -312,44 +490,37 @@ HTML Only. No CSS.
                         }
                     },
                     error: (err) => {
-                        console.error(payload.sectionType, '❌ HTML API Error:', err);
+                        console.error('❌ HTML API Error:', err);
                         resolve('⚠️ HTML API call failed.');
                     }
                 });
             } catch (err) {
-                console.error(data.sectionType, '❌ JSON parsing error before sending to API:', err);
+                console.error('❌ JSON parsing error before sending to API:', err);
                 resolve('⚠️ Invalid JSON structure.');
             }
         });
     }
 
-    // copy to clipboard
+    // Copy HTML to clipboard
     copyToClipboard(pageName: string) {
-        const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
+        const fullHtml = this.pageSections[pageName].FullPage.toString();
         navigator.clipboard.writeText(fullHtml).then(() => {
-            // alert(`📋 HTML copied for page: ${pageName}`);
-            this.toastr.success(`📋 HTML copied for page: ${pageName}`);
-
-
+        this.toastr.success(`HTML copied for page: ${pageName}`);
         });
     }
 
-    // dowlload as html
+    // Download HTML
     downloadHtml(pageName: string) {
-        const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
-        const blob = new Blob([fullHtml], { type: 'text/html' });
-        const url = window.URL.createObjectURL(blob);
-
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = `${pageName}.html`;
-        link.click();
-
-        window.URL.revokeObjectURL(url);
-    }
-
-
-    // ✅ Call this method when user clicks "Save Files"
+    const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
+    const blob = new Blob([fullHtml], { type: 'text/html' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${pageName}.html`;
+    link.click();
+    window.URL.revokeObjectURL(url);
+}
+    // Upload HTML files
     uploadHtmlFiles(projId: number) {
         const pageHtmlMap: Record<string, string> = {};
 
@@ -362,71 +533,162 @@ HTML Only. No CSS.
             (data) => {
                 console.log(data);
                 if (data || data.status >= 200 && data.status <= 299) {
-                    this.toastr.success("file Created");
+                    this.toastr.success("Files Created Successfully");
                 }
-                setTimeout(() => {
-                    this.ngOnInit();
-                }, 500);
-
+                // setTimeout(() => {
+                //     this.ngOnInit();
+                // }, 500);
             }, (error) => {
                 console.log(error);
                 if (error.status >= 200 && error.status <= 299) {
-                    this.toastr.success("file Created");
+                    this.toastr.success("Files Created Successfully");
                 }
                 if (error.status >= 400 && error.status <= 499) {
-                    this.toastr.error("Not Created");
+                    this.toastr.error("Files Not Created");
                 }
                 if (error.status >= 500 && error.status <= 599) {
-                    this.toastr.error("Not Created");
+                    this.toastr.error("Server Error");
                 }
             });
-        setTimeout(() => {
-            this.ngOnInit();
-        }, 500);
     }
 
+    createHtmlFiles() {
+    const pageHtmlMap: Record<string, string> = {};
+    for (const [pageName, section] of Object.entries(this.pageSections)) {
+        const html = section.FullPage?.toString() || '';
+        pageHtmlMap[pageName] = html;
+    }
+    this.siteTreeService.createHtmlfile(this.sitename, pageHtmlMap).subscribe(
+        (data) => {
+            console.log(data);
+            if (data || data.status >= 200 && data.status <= 299) {
+                this.toastr.success("file Created");
+            }
+            //   setTimeout(() => {
+            //       this.ngOnInit();
+            //   }, 500);
 
-    // regenerate specific pages
+        }, (error) => {
+            console.log(error);
+            if (error.status >= 200 && error.status <= 299) {
+                this.toastr.success("file Created");
+            }
+            if (error.status >= 400 && error.status <= 499) {
+                this.toastr.error("Not Created");
+            }
+            if (error.status >= 500 && error.status <= 599) {
+                this.toastr.error("Not Created");
+            }
+        });
+    //   setTimeout(() => {
+    //       this.ngOnInit();
+    //   }, 500);
+
+}
+
+async recreateWireframe() {
+    this.toastr.info('⏳ Recreating all wireframes...');
+
+    // Clear existing HTML and prompts
+    this.pageSections = {};
+    this.sectionHtmls = {};
+    this.missingHtmlPages = [];
+
+    // Reprocess everything
+    await this.processPages(JSON.parse(this.jsonInput)); // regenerate prompts
+
+    this.toastr.success('✅ Recreated all wireframes and saved HTML files.');
+}
+
+private async tryReadHtmlFromServer(siteName: string, pageName: string): Promise<string | null> {
+return new Promise((resolve) => {
+    this.siteTreeService.readPages(siteName, pageName).subscribe({
+    next: (res) => {
+        if (res) {
+            // console.log('got html in api ',res)
+        resolve(res); // assuming HTML string is returned
+        } else {
+            console.warn('⚠️ Got null/empty HTML for', pageName);
+
+        resolve(null);
+        }
+    },
+    
+    error: (err) => {
+        console.error('❌ Error fetching HTML for', pageName, '→', err);
+        resolve(null);
+    }    });
+});
+}
+
+
+    // Regenerate specific wireframe
     async regenerateWireframe(pageName: string) {
         const original = this.initialGeneratedPrompts[pageName];
         const current = this.allPagePrompts[pageName];
-
+    
         const updatedSections: string[] = [];
-
+    
         for (const section in current) {
-            if (!original || original[section] !== current[section]) {
-                updatedSections.push(section);
-            }
+        if (!original || original[section] !== current[section]) {
+            updatedSections.push(section);
         }
-
+        }
+    
         if (updatedSections.length === 0) {
-            alert('✅ No changes found to regenerate!');
-            return;
+        this.toastr.info('No changes found to regenerate!');
+        return;
         }
-
+    
         const htmlBlocks: string[] = [];
-
+    
         for (const section of updatedSections) {
-            const jsonPrompt = current[section];
-            const html = await this.generateJson({ jsonStructure: jsonPrompt, sectionType: section });
-            htmlBlocks.push(html);
-
-            console.log(`♻️ Regenerated section: ${pageName} > ${section}`);
+        const jsonPrompt = current[section];
+        const html = await this.generateJson({ jsonStructure: jsonPrompt, sectionType: section });
+        
+        // Add CSS to the HTML
+        const htmlWithCss = this.applyCssToSectionHtml(html, pageName, section);
+        htmlBlocks.push(htmlWithCss);
+        
+        // Update individual section HTML
+        this.sectionHtmls[pageName][section] = this.sanitizer.bypassSecurityTrustHtml(htmlWithCss);
+    
+        console.log(`♻️ Regenerated section: ${pageName} > ${section}`);
         }
-
-        // Inject only changed parts (append or replace)
+    
+        // Create the final HTML with CSS properly included
         const finalHtml = `
-          <style>${COMMON_CSS}</style>
-          ${htmlBlocks.join('\n')}
-        `;
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${pageName}</title>
+        <style>
+            ${COMMON_CSS}
+        </style>
+        </head>
+        <body>
+        ${htmlBlocks.join('\n')}
+        </body>
+        </html>`;
+        
         const safeHtml = this.sanitizer.bypassSecurityTrustHtml(finalHtml);
-
         this.pageSections[pageName] = { FullPage: safeHtml };
+        
+        // Ensure CSS is applied to DOM elements
+        setTimeout(() => {
+        this.verifyCssInSections();
+        }, 100);
+        
+        this.toastr.success(`Regenerated ${updatedSections.length} sections for ${pageName}`);
     }
+    
 
-
-    //   regenearte all pages
+    // Regenerate all modified sections
     async regenerateAllModifiedSections() {
+        let totalModified = 0;
+        
         for (const [pageName, currentSections] of Object.entries(this.allPagePrompts)) {
             const originalSections = this.initialGeneratedPrompts[pageName] || {};
             const updatedSections: string[] = [];
@@ -442,41 +704,44 @@ HTML Only. No CSS.
                 continue;
             }
 
+            totalModified += updatedSections.length;
             const htmlBlocks: string[] = [];
 
             for (const section of updatedSections) {
                 const jsonPrompt = currentSections[section];
                 const html = await this.generateJson({ jsonStructure: jsonPrompt, sectionType: section });
                 htmlBlocks.push(html);
+                
+                // Update individual section HTML
+                this.sectionHtmls[pageName][section] = this.sanitizer.bypassSecurityTrustHtml(html);
+                
                 console.log(`♻️ Regenerated: ${pageName} > ${section}`);
             }
 
-            const finalHtml = `
-            <style>${COMMON_CSS}</style>
-            ${htmlBlocks.join('\n')}
-          `;
-
+            const finalHtml = `<style>${COMMON_CSS}</style>\n${htmlBlocks.join('\n')}`;
             const safeHtml = this.sanitizer.bypassSecurityTrustHtml(finalHtml);
             this.pageSections[pageName] = { FullPage: safeHtml };
         }
 
-        alert('✅ Regeneration complete for all modified sections!');
+        if (totalModified > 0) {
+            this.toastr.success(`Regenerated ${totalModified} sections across all pages`);
+        } else {
+            this.toastr.info('No modified sections found');
+        }
     }
 
-
-
-    // // Step 6
+    // Call LLM
     async callLlm(data): Promise<string> {
         return new Promise((resolve, reject) => {
-            console.log('call Llm Start ')
+            console.log('call Llm Start');
             const payload = {
                 query: data,
                 conversationId: '677'
             };
-            console.log(' query : ', payload.query)
+            console.log('query:', payload.query);
             this.siteTreeService.callLlm(payload).subscribe({
                 next: (res) => {
-                    console.log('response ', res)
+                    console.log('response', res);
                     if (res && res.responseContent) {
                         resolve(res.responseContent);
                     } else {
@@ -484,11 +749,11 @@ HTML Only. No CSS.
                     }
                 },
                 error: () => resolve('⚠️ LLaMA API failed.')
-
             });
         });
     }
 
+    // Style properties
     activeEditTarget: string | null = null;
     liveStyles = {
         background: '',
@@ -500,10 +765,12 @@ HTML Only. No CSS.
         textAlign: '',
     };
 
+    // Select editable element
     selectEditable(pageName: string) {
         this.activeEditTarget = pageName;
     }
 
+    // Apply live styles
     applyLiveStyles() {
         const target = document.querySelector(`[data-target='${this.activeEditTarget}']`) as HTMLElement;
         if (target) {
@@ -513,31 +780,90 @@ HTML Only. No CSS.
                 }
             });
         }
-        this.toastr.success(`🎨 Style updated for: ${this.activeEditTarget}`);
+        this.toastr.success(`Style updated for: ${this.activeEditTarget}`);
     }
 
-    // 🔁 Track raw edits
+    // Track raw edits
     rawEdits: Record<string, string> = {};
 
-
-
+    // Style map
     selectedElementSelector = '';
     styleMap: Record<string, any> = {
         'hero-header': { 'background': '#fdfdfd', 'text-align': 'center' },
         'btn-filled': { 'background': '#000', 'color': '#fff' },
         'hero-heading': { 'font-size': '36px', 'font-weight': 'bold' },
-        // Add all classes you want to allow editing
     };
 
+    // Get all CSS selectors
     getAllCssSelectors(): string[] {
         return Object.keys(this.styleMap);
     }
 
-
+    // Apply CSS from map
     applyCssFromMap() {
         this.updateLiveStyles();
     }
 
+    applyCssToSectionHtml(html: string, pageName: string, sectionKey: string): string {
+        // First check if HTML already contains CSS
+        if (html.includes('<style') && html.includes('data-section-css="true"')) {
+        return html; // CSS already exists
+        }
+        
+        // Add CSS to HTML
+        const cssBlock = `<style data-section-css="true">
+        ${COMMON_CSS}
+        /* Section-specific styles */
+        .section-${pageName}-${sectionKey} * {
+            box-sizing: border-box;
+        }
+        </style>`;
+        
+        // Insert CSS at the beginning of the HTML content
+        return cssBlock + html;
+    }
+
+    ensureCommonCssForAllSections(): void {
+        // Remove any existing CSS injection
+        const existingStyles = document.querySelectorAll('style[data-common-css]');
+        existingStyles.forEach(style => style.remove());
+        
+        // Create a new style element with the COMMON_CSS
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('data-common-css', 'true');
+        styleEl.textContent = COMMON_CSS;
+        document.head.appendChild(styleEl);
+        
+        // Add inline styles to make sure section previews display properly
+        const additionalStyle = document.createElement('style');
+        additionalStyle.setAttribute('data-section-preview-styles', 'true');
+        additionalStyle.textContent = `
+        .section-preview {
+            position: relative;
+            width: 100%;
+            background: #fff;
+            padding: 8px;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            overflow: hidden;
+            min-height: 50px;
+        }
+        .section-preview-wrapper {
+            width: 100%;
+            position: relative;
+        }
+        .section-preview[contenteditable="true"] {
+            outline: 2px solid #007bff;
+            min-height: 100px;
+        }
+        `;
+        document.head.appendChild(additionalStyle);
+        
+        this.toastr.success('CSS applied to all sections');
+    }
+    
+
+    // Update live styles
     updateLiveStyles() {
         const styleSheetId = 'dynamic-css-style';
         let styleEl = document.getElementById(styleSheetId) as HTMLStyleElement;
@@ -560,20 +886,22 @@ HTML Only. No CSS.
         styleEl.innerHTML = css;
     }
 
+    // Edit event handler
     onEdit(pageName: string, event: any) {
         const newHtml = event.target.innerHTML;
         this.pageSections[pageName]['FullPage'] = this.sanitizer.bypassSecurityTrustHtml(newHtml);
     }
 
+    // Apply style to selection
     applyStyleToSelection() {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0) return;
-
+    
         const range = selection.getRangeAt(0);
         const selectedText = range.extractContents();
-
+    
         const span = document.createElement('span');
-
+    
         // Apply styles
         if (this.liveStyles.color) span.style.color = this.liveStyles.color;
         if (this.liveStyles.background) span.style.backgroundColor = this.liveStyles.background;
@@ -581,13 +909,140 @@ HTML Only. No CSS.
         if (this.liveStyles.fontWeight) span.style.fontWeight = this.liveStyles.fontWeight;
         if (this.liveStyles.textAlign) span.style.textAlign = this.liveStyles.textAlign;
         span.appendChild(selectedText);
-
+    
         range.insertNode(span);
         selection.removeAllRanges();
     }
+    
+    // NEW METHODS FOR GRID AND DRAG FUNCTIONALITY
+    
+    // Get section keys for a page
+    getSectionKeys(pageName: string): string[] {
+        if (!this.allPagePrompts[pageName]) return [];
+        return Object.keys(this.allPagePrompts[pageName]);
+    }
+    
+    // Get sections data for drag/drop
+    getSectionsData(pageName: string): string[] {
+        return this.getSectionKeys(pageName);
+    }
+    
+    // Get HTML for a specific section
+    // In your component class
+    getSectionHtml(pageName: string, sectionKey: string): SafeHtml {
+        if (this.sectionHtmls[pageName]?.[sectionKey]) {
+        const html = this.sectionHtmls[pageName][sectionKey];
+        // Wrap with a div that has a unique class for this section
+        // Add scoped CSS directly inside each section
+        const safeHtml = `
+            <div class="section-preview-wrapper section-${pageName}-${sectionKey}">
+            <style scoped data-section-css="true">
+                ${COMMON_CSS}
+                /* Additional section-specific styles */
+                .section-${pageName}-${sectionKey} * {
+                box-sizing: border-box;
+                }
+            </style>
+            ${html}
+            </div>
+        `;
+        return this.sanitizer.bypassSecurityTrustHtml(safeHtml);
+        }
+        return this.sanitizer.bypassSecurityTrustHtml('<div>Section loading...</div>');
+    }
+    
+    
+    // Show page tools
+    showPageTools(pageName: string) {
+        this.hoveredPage = pageName;
+    }
+
+
+    
+    // Hide page tools
+    hidePageTools(pageName: string) {
+        if (this.hoveredPage === pageName) {
+            setTimeout(() => {
+                if (this.hoveredPage === pageName) {
+                    this.hoveredPage = null;
+                }
+            }, 300);
+        }
+    }
+    
+    // Show section tools
+    showSectionTools(pageName: string, sectionKey: string) {
+        this.hoveredSection = sectionKey;
+    }
+    
+    // Hide section tools
+    hideSectionTools() {
+        setTimeout(() => {
+            this.hoveredSection = null;
+        }, 300);
+    }
+    
+    // Handle page drop
+    onPageDrop(event: CdkDragDrop<string[]>) {
+        const pages = this.objectKeys(this.pageSections);
+        moveItemInArray(pages, event.previousIndex, event.currentIndex);
+        
+        // Rebuild pageSections object in new order
+        const newPageSections: Record<string, { FullPage: SafeHtml }> = {};
+        pages.forEach(page => {
+            newPageSections[page] = this.pageSections[page];
+        });
+        
+        this.pageSections = newPageSections;
+        this.toastr.success('Page order updated');
+    }
+
+    
+    
+    // Handle section drop
+    onSectionDrop(event: CdkDragDrop<string[]>, pageName: string) {
+        // Get current section keys
+        const sectionKeys = this.getSectionKeys(pageName);
+        
+        // Move item in the array
+        moveItemInArray(sectionKeys, event.previousIndex, event.currentIndex);
+        
+        // Create new section map in correct order
+        const newSectionMap: Record<string, string> = {};
+        sectionKeys.forEach(key => {
+        newSectionMap[key] = this.allPagePrompts[pageName][key];
+        });
+        
+        // Update section map
+        this.allPagePrompts[pageName] = newSectionMap;
+        
+        // Update section HTMLs order
+        const newSectionHtmls: Record<string, SafeHtml> = {};
+        sectionKeys.forEach(key => {
+        newSectionHtmls[key] = this.sectionHtmls[pageName][key];
+        });
+        
+        // Update section HTMLs
+        this.sectionHtmls[pageName] = newSectionHtmls;
+        
+        // Update the full page HTML
+        this.updateFullPageHtml(pageName);
+        
+        this.toastr.success(`Reordered sections in ${pageName}`);
+    }
+    
+    
+    // Zoom control methods
+    zoomIn() {
+        this.scale += 0.1;
+        this.scale = Math.min(this.scale, 2); // Max zoom 200%
+    }
+    
+    zoomOut() {
+        this.scale -= 0.1;
+        this.scale = Math.max(this.scale, 0.5); // Min zoom 50%
+    }
 
-    //   new today 25 april
-    // New Variables
     selectedNavbarPage: string = '';
     navbarLinks: Record<string, { label: string, href: string }[]> = {};
     availablePages: { label: string, href: string }[] = [];
@@ -633,459 +1088,1299 @@ HTML Only. No CSS.
     }
 
     // Apply Changes to navbar
-    applyNavbarChanges(pageName: string) {
+    applyNavbarChanges(pageName: string): void {
         const links = this.navbarLinks[pageName] || [];
-
-        const html = this.pageSections[pageName]?.FullPage?.toString() || '';
-        if (!html) return;
-
-        // Build new <ul class="nav-1"> from links
-        const ulHtml = `<ul class="nav-1">` + links.map(link => {
-            return `<li><a href="${link.href}">${link.label}</a></li>`;
-        }).join('') + `</ul>`;
-
-        // Replace all instances of <ul class="nav-1">...</ul>
-        const updatedHtml = html.replace(/<ul class="nav-1"([\s\S]*?)<\/ul>/g, ulHtml);
-        console.log(' new html ', updatedHtml);
-
-        const safe = this.sanitizer.bypassSecurityTrustHtml(updatedHtml);
-        this.pageSections[pageName] = { FullPage: safe };
-
-        this.toastr.success('✅ Navbar updated for all nav-1 instances!');
+        const originalHtml = this.pageSections[pageName].FullPage.toString();
+        
+        // Create parser with sanitization
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(originalHtml, 'text/html');
+        
+        // Update all nav menus
+        const navMenus = doc.querySelectorAll('ul.nav-1, nav ul');
+        navMenus.forEach(ul => {
+        ul.innerHTML = '';
+        links.forEach(link => {
+            const li = doc.createElement('li');
+            const a = doc.createElement('a');
+            a.setAttribute('href', this.sanitizer.sanitize(SecurityContext.URL, link.href) || '#');
+            a.textContent = this.sanitizer.sanitize(SecurityContext.HTML, link.label) || 'Link';
+            li.appendChild(a);
+            ul.appendChild(li);
+        });
+        });
+    
+        // Serialize and sanitize
+        const updatedHtml = doc.documentElement.innerHTML;
+        this.pageSections[pageName].FullPage = this.sanitizer.bypassSecurityTrustHtml(updatedHtml);
+        this.toastr.success('Navbar updated successfully');
+    }
+    
+    resetZoom() {
+        this.scale = 1;
+        this.panX = 0;
+        this.panY = 0;
+    }
+    
+    // Get transform CSS for pan and zoom
+    getTransform(): string {
+        return `scale(${this.scale}) translate(${this.panX}px, ${this.panY}px)`;
+    }
+    
+    // Pan methods
+    startPan(event: MouseEvent): void {
+        // Start panning with any mouse button or when space key is pressed
+        if (event.button === 0 || event.button === 1 || event.ctrlKey || event.metaKey) {
+        // Don't start panning if clicking on an editable element
+        const target = event.target as HTMLElement;
+        if (target.hasAttribute('contenteditable') && target.getAttribute('contenteditable') === 'true') {
+            return;
+        }
+        
+        this.isPanning = true;
+        this.lastX = event.clientX;
+        this.lastY = event.clientY;
+        
+        // Change cursor to indicate panning
+        const canvasBoundary = document.querySelector('.canvas-boundary') as HTMLElement;
+        if (canvasBoundary) {
+            canvasBoundary.style.cursor = 'grabbing';
+        }
+        
+        event.preventDefault();
+        }
     }
 
-    onLogoUpload(event: any, logo: any) {
-        const file = event.target.files[0];
-        const reader = new FileReader();
-        reader.onload = (e: any) => {
-            logo.src = e.target.result; // Save Base64 string in JSON
-        };
-        reader.readAsDataURL(file);
+    doPan(event: MouseEvent) {
+        if (!this.isPanning) return;
+        
+        const deltaX = (event.clientX - this.lastX) / this.scale;
+        const deltaY = (event.clientY - this.lastY) / this.scale;
+        
+        this.panX += deltaX;
+        this.panY += deltaY;
+        
+        this.lastX = event.clientX;
+        this.lastY = event.clientY;
+    }
+    
+    endPan(): void {
+if (this.isPanning) {
+    this.isPanning = false;
+    
+    // Restore cursor
+    const canvasBoundary = document.querySelector('.canvas-boundary') as HTMLElement;
+    if (canvasBoundary) {
+    canvasBoundary.style.cursor = 'move';
     }
-
-
-    // applyNavbarChanges(pageName: string) {
-    //     const links = this.navbarLinks[pageName] || [];
-    //     const htmlContent = this.pageSections[pageName]?.FullPage?.toString() || '';
-
-    //     if (!htmlContent) return;
-
-    //     // Create a temporary container to parse and manipulate the HTML
-    //     const wrapper = document.createElement('div');
-    //     wrapper.innerHTML = htmlContent;
-
-    //     // Find all navbar UL elements
-    //     const navMenus = wrapper.querySelectorAll('ul.nav-1');
-
-    //     if (navMenus.length === 0) {
-    //         console.warn('No navigation menus found with class "nav-1"');
-    //         return;
-    //     }
-
-    //     // Update each navigation menu found
-    //     navMenus.forEach(ul => {
-    //         // step 1 clear the old vals in html 
-    //         ul.innerHTML = '';
-
-    //         // creating a new one and appending
-    //         links.forEach(link => {
-    //             const listItem = document.createElement('li');
-    //             const anchor = document.createElement('a');
-
-    //             // Set attributes safely using setAttribute
-    //             anchor.setAttribute('href', link.href);
-    //             anchor.textContent = link.label;
-
-    //             listItem.appendChild(anchor);
-    //             ul.appendChild(listItem);
-    //         });
-    //     });
-
-    //     // Get the updated HTML content
-    //     const updatedHtml = wrapper.innerHTML;
-
-    //     // Sanitize and update the page content
-    //     const safeHtml = this.sanitizer.bypassSecurityTrustHtml(updatedHtml);
-    //     this.pageSections[pageName] = { FullPage: safeHtml };
-
-    //     this.toastr.success('✅ Navbar updated for all nav-1 instances!');
-    // }
-
-
-
-    //  // Step 4
-    //  async generatePromptFromSection(
-    //     sectionName: string,
-    //     sectionDescription: string,
-    //     headerId: number = 35,
-    //     operationType: string = 'template 1',
-    // ): Promise<string> {
-    //     return new Promise((resolve) => {
-    //         // const fieldType = sectionName.toLowerCase().replace(/\s+/g, '').replace(/section$/, '').trim();
-    //         const fieldType = sectionName
-    //             .toLowerCase()
-    //             .replace(/section$/i, '')        // remove trailing 'section'
-    //             .replace(/\s{2,}/g, ' ')         // multiple spaces to single space
-    //             .trim();                         // trim leading/trailing spaces
-
-    //         this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
-    //             next: async (res) => {
-    //                 try {
-    //                     const jsonBlock = res?.javacode;
-    //                     if (!jsonBlock) {
-    //                         resolve('{}');
-    //                         return;
-    //                     }
-
-    //                     // console.log( fieldType , ' json is : ', jsonBlock)
-
-    //                     const parsedJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
-
-    //                         // const updatedJson = this.replaceContentRecursively(parsedJson, sectionDescription);
-    //                         const formattedJson = JSON.stringify(parsedJson, null, 2);
-    //                         // 🧠 Build prompt to LLM with section info + json + full page prompt
-    // //                           // 🧠 LLM enhancement: Content update without changing structure
-    //                 const smartPrompt = `
-    //                 🔁 Enhance this JSON content while keeping the structure exactly same.
-
-    //                 Section Name: ${sectionName}
-    //                 Section Description: ${sectionDescription}
-    //                 Full Page Prompt: ${this.initialPrompt || ''}
-
-    //                 ✅ Replace or fill only content fields like: "title", "description", "text", "label", "placeholder", "heading", etc.
-    //                 ❌ Do NOT change or restructure keys, nesting, or CSS class names.
-    //                 ❌ Do NOT remove or add new blocks unless it's strictly a content array (like testimonials or FAQs).
-
-    //                 JSON Input:
-    //                 ${formattedJson}
-
-    //                 ⬇️ Return only the updated JSON with better content.
-    //                 `;
-
-
-    //                         // console.log('enhanced query ', smartPrompt);
-
-    // //                             // const finalJson = await this.calLlm(enhancedPrompt);
-    //                         // resolve(formattedJson);
-
-    //                 const enhancedJson = await this.calLlm(smartPrompt);
-
-    //                 // Return directly the enhanced JSON
-    //                 resolve(enhancedJson || formattedJson);
-
-    //                 } catch (err) {
-    //                     console.error('❌ JSON parse error:', err);
-    //                     resolve('{}');
-    //                 }
-    //             },
-    //             error: (err) => {
-    //                 console.error('❌ API error:', err);
-    //                 resolve('{}');
-    //             }
-    //         });
-    //     });
-    // }
-
-
-
-    // // Step 5 - generate html code via java Api through prompt
-    // async processAllPagesLiveUpdate() {
-    //     for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
-    //         const sectionHtmls: string[] = [];
-
-    //         for (const [sectionName, promptText] of Object.entries(sectionMap)) {
-    //             console.log(`🚀 Generating HTML for: ${pageName} > ${sectionName}`);
-
-    //             const response = await this.generateJson({ sectionType: sectionName, jsonStructure: promptText });
-    //             const html = response || '⚠️ No response received.';
-
-    //             sectionHtmls.push(html);
-    //         }
-
-    //         // ✅ Inject common CSS once per page
-    //         const htmlWithCss = `
-    //     <style>${COMMON_CSS}</style>
-    //     ${sectionHtmls.join('\n')}`;
-
-    //         // ✅ Bypass Angular sanitizer
-    //         const safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(htmlWithCss);
-
-    //         this.pageSections[pageName] = { FullPage: safeHtml };
-    //     }
-    // }
-    // replaceContentRecursively(obj: any, replacement: string): any {
-    //     if (Array.isArray(obj)) {
-    //         return obj.map(item => this.replaceContentRecursively(item, replacement));
-    //     } else if (typeof obj === 'object' && obj !== null) {
-    //         const updated = {};
-    //         for (const [key, value] of Object.entries(obj)) {
-    //             // Replace specific fields if they are strings
-    //             if (['description', 'text', 'label', 'title', 'subtext'].includes(key.toLowerCase()) && typeof value === 'string') {
-    //                 updated[key] = replacement;
-    //             } else {
-    //                 updated[key] = this.replaceContentRecursively(value, replacement);
-    //             }
-    //         }
-    //         return updated;
-    //     }
-    //     return obj;
-    // }
-
-    // // Step 4
-    // generatePromptFromSection(
-    //     sectionName: string,
-    //     sectionDescription: string,
-    //     headerId: number = 35,
-    //     operationType: string = 'template1'
-    // ): Promise<string> {
-    //     return new Promise((resolve, reject) => {
-    //         const fieldType = sectionName.toLowerCase().replace(/\s+/g, '').replace(/section$/, '').trim();
-
-    //         this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
-    //             next: (res) => {
-    //                 let prompt = `🎯 Generate ONLY the HTML structure for the following UI section. Do NOT include any explanation, markdown, or CSS.\n\n`;
-    //                 prompt += `Section Name: ${sectionName}\n`;
-    //                 prompt += `Description: ${sectionDescription}\n\n`;
-
-    //                 try {
-    //                     const jsonBlock = res?.javacode;
-    //                     if (jsonBlock) {
-    //                         prompt += `Below is the structural JSON definition of the section. Use it to map the layout and tags appropriately..\n\n`;
-    //                         prompt += `JSON:\n${typeof jsonBlock === 'string' ? jsonBlock : JSON.stringify(jsonBlock, null, 2)}\n\n`;
-    //                         prompt += this.jsonsuffixprompt;
-
-    //                     } else {
-
-    //                         prompt += `There is no structural JSON provided for this section.. Generate a reasonable HTML layout based on the description.\n\n`;
-    //                         prompt += this.withoutjsonsuffixprompt;
-
-    //                     }
-    //                 } catch (err) {
-    //                     prompt += `There is no structural JSON provided for this section. Use the description.`;
-    //                     prompt += this.withoutjsonsuffixprompt;
-
-    //                 }
-
-    //                 resolve(prompt);
-    //             },
-    //             error: (err) => {
-    //                 console.error('❌ API error:', err);
-    //                 const fallbackPrompt = `🎯 Generate the HTML structure for the following section.\n\nSection Name: ${sectionName}\nDescription: ${sectionDescription}\n\nThere is no structural JSON provided for this section.` + this.withoutjsonsuffixprompt;
-    //                 resolve(fallbackPrompt);
-    //             }
-    //         });
-    //     });
-    // }
-
-
-
-
-
-    // pageSections: Record<string, Record<string, string>> = {}; // { pageName: { sectionName: html } }
-
-    // async processAllPagesLiveUpdate() {
-    //     for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
-    //         if (!this.pageSections[pageName]) {
-    //             this.pageSections[pageName] = {};
-    //         }
-
-    //         let sectionHtmls: string[] = [];
-
-    //         for (const [sectionName, promptText] of Object.entries(sectionMap)) {
-    //             console.log(`🚀 Sending: [${pageName} > ${sectionName}]`);
-
-    //             const response = await this.generateJson({ message: promptText });
-    //             const html = response || '⚠️ No response received.';
-
-    //             sectionHtmls.push(html); // collect all HTMLs
-
-    //             // ✅ LIVE update for UI
-    //             //         const htmlWithCss = `
-    //             //   <style>${COMMON_CSS}</style>
-    //             //   ${html}`;
-
-    //             // this.pageSections[pageName][sectionName] = htmlWithCss;
-    //             this.pageSections[pageName][sectionName] = html;
-    //         }
-
-
-    //     }
-    // }
-
-    // async processAllPagesWithLlama() {
-    //     for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
-    //         const sectionHtmls: Record<string, string> = {};
-
-    //         for (const [sectionName, promptText] of Object.entries(sectionMap)) {
-    //             console.log(`⚡ Sending to LLaMA: [${pageName} > ${sectionName}]`);
-
-    //             const llamaResponse = await this.generateJson({ message: promptText });
-    //             sectionHtmls[sectionName] = llamaResponse || '⚠️ No response';
-    //         }
-
-    //         // Combine all sections into one page HTML
-    //         const fullPageHtml = Object.entries(sectionHtmls)
-    //             .map(([sectionName, html]) => `<!-- ${sectionName} -->\n${html}`)
-    //             .join('\n\n');
-
-    //         // Save this complete page in key-value store
-    //         this.pageHtmlMap[pageName] = fullPageHtml;
-
-    //         // ✅ Show in UI
-    //         this.generatedPages.push({ name: pageName, html: fullPageHtml });
-
-    //         console.log(`✅ Page generated: ${pageName}`);
-    //     }
-    // }
-
-    // generatedPrompt: string = ''; // ✅ Declare here
-    // 
-    // generatePromptFromSection(
-    //     sectionName: string,
-    //     sectionDescription: string,
-    //     headerId: number = 35,
-    //     operationType: string = 'template1'
-    // ) {
-    //     const fieldType = sectionName.toLowerCase().replace(/\s+/g, '');
-
-    //     this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
-    //         next: (res) => {
-    //             console.log('📥 Fetched from dlf:', res);
-
-    //             if (res) {
-    //                 try {
-    //                     const jsonBlock = res.javacode;
-    //                     let prompt = `🎯 Generate the HTML structure for the following section.\n\n`;
-    //                     prompt += `Section Name: ${sectionName}\n`;
-    //                     prompt += `Description: ${sectionDescription}\n\n`;
-
-    //                     if (jsonBlock) {
-    //                         prompt += `Below is the structural JSON definition of the section. Use this structure to map your HTML.\n\n`;
-    //                         prompt += `JSON:\n${typeof jsonBlock === 'string' ? jsonBlock : JSON.stringify(jsonBlock, null, 2)}\n\n`;
-    //                     } else {
-    //                         prompt += `No structural JSON is available for this section. Generate a reasonable HTML layout based on the description.\n\n`;
-    //                     }
-
-    //                     prompt += `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).`;
-
-    //                     // 🔧 Save it to a field or emit from here
-    //                     this.generatedPrompt = prompt;
-
-    //                 } catch (error) {
-    //                     console.error('❌ Error generating prompt:', error);
-    //                     this.generatedPrompt = '⚠️ Failed to generate prompt due to JSON error.';
-    //                 }
-    //             } else {
-    //                 console.warn('⚠️ Model key not found or empty.');
-    //                 this.generatedPrompt = `⚠️ No JSON model found. Please try again.`;
-    //             }
-    //         },
-    //         error: (err) => {
-    //             console.error('❌ Error got during :', err);
-    //             let prompt = `🎯 Generate the HTML structure for the following section.\n\n`;
-    //             prompt += `Section Name: ${sectionName}\n`;
-    //             prompt += `Description: ${sectionDescription}\n\n`;
-
-
-    //             prompt += `No structural JSON is available for this section. Generate a reasonable HTML layout based on the description.\n\n`;
-
-
-    //             prompt += `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).`;
-
-    //             // 🔧 Save it to a field or emit from here
-    //             this.generatedPrompt = prompt;
-
-    //             // alert('Failed to fetch data from server!');
-    //         }
-    //     });
-    // }
-
-
-    // generatePromptsForAllSections(treeJson: any) {
-
-    //     for (const [pageName, sections] of Object.entries(treeJson)) {
-    //         const sectionPrompts: Record<string, string> = {};
-
-    //         for (const [sectionName, sectionDescription] of Object.entries(sections)) {
-    //             if (sectionName === 'Children') {
-
-    //                 // Recursively process child pages
-    //                 const children = sections['Children'];
-
-    //                 console.log(' child is : ', children)
-
-    //                 const childPrompts = this.generatePromptsForAllSections(children);
-    //                 Object.assign(this.allPagePrompts, childPrompts);
-    //             } else {
-
-    //                 console.log('sc name  sectionDescription : ', sectionName, ' ', sectionDescription)
-
-    //                 this.generatePromptFromSection(sectionName, sectionDescription);
-    //                 sectionPrompts[sectionName] = this.generatedPrompt;
-    //             }
-    //         }
-
-    //         this.allPagePrompts[pageName] = sectionPrompts;
-    //     }
-
-    //     console.log(' all page prompt is :', this.allPagePrompts);
-
-    // }
-
-
-
-    // dynamic prompt generation
-    // generatePromptFromSection(
-    //     sectionName: string,
-    //     sectionDescription: string,
-    //     headerId: number = 35,
-    //     operationType: string = 'template1'
-    // ) {
-
-    //     const fieldType = sectionName.toLowerCase().replace(/\s+/g, '');
-    //     this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
-    //         next: (res) => {
-    //             console.log('📥 Fetched from dlf:', res);
-
-    //             // Check if model key exists and has some value
-    //             if (res && res.javacode) {
-
-
-    //                 try {
-
-    //                     const jsonBlock = res?.javaCode;
-
-    //                     let prompt = `🎯 Generate the HTML structure for the following section.\n\n`;
-    //                     prompt += `Section Name: ${sectionName}\n`;
-    //                     prompt += `Description: ${sectionDescription}\n\n`;
-
-    //                     if (jsonBlock) {
-    //                         prompt += `Below is the structural JSON definition of the section. Use this structure to map your HTML.\n\n`;
-    //                         prompt += `JSON:\n${typeof jsonBlock === 'string' ? jsonBlock : JSON.stringify(jsonBlock, null, 2)}\n\n`;
-    //                     } else {
-    //                         prompt += `No structural JSON is available for this section. Generate a reasonable HTML layout based on the description.\n\n`;
-    //                     }
-
-    //                     prompt += `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).`;
-
-    //                     return prompt;
-
-    //                 } catch (error) {
-    //                     console.error('Error generating prompt:', error);
-    //                     return '⚠️ Failed to generate prompt due to API error.';
-    //                 }
-    //             } else {
-    //                 console.warn('⚠️ Model key not found or empty, keeping inputJson as is.');
-    //             }
-    //         },
-    //         error: (err) => {
-    //             console.error('❌ Error got:', err);
-    //             alert('Failed to fetch data from Server!');
-    //         }
-    //     });
-
-    // }
-
-
-
 }
+}
+    
+    // Edit section
+    editSection(pageName: string, sectionKey: string) {
+        this.editMode = true;
+        this.editingSection = { page: pageName, section: sectionKey };
+        
+        // Get the HTML for this section
+        const sectionHtml = this.sectionHtmls[pageName][sectionKey];
+        this.editingSectionHtml = sectionHtml;
+    }
+    
+    // Save section edit
+    saveSectionEdit() {
+        if (!this.editingSection) return;
+        
+        const { page, section } = this.editingSection;
+        const element = document.querySelector('.editable-html') as HTMLElement;
+        
+        if (element) {
+            const newHtml = element.innerHTML;
+            
+            // Update the section HTML
+            this.sectionHtmls[page][section] = this.sanitizer.bypassSecurityTrustHtml(newHtml);
+            
+            // Update the full page HTML
+            this.updateFullPageHtml(page);
+            
+            this.toastr.success(`Updated section: ${section}`);
+            this.closeEditMode();
+        }
+    }
+    
+    // Handle section edit
+    onSectionEdit(event: any) {
+        // This is handled in saveSectionEdit
+    }
+
+    handleDirectContentEdit(event: FocusEvent, pageName: string, sectionKey: string): void {
+        const element = event.target as HTMLElement;
+        if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true') {
+        // Save the content when the element loses focus
+        this.saveSectionChanges(pageName, sectionKey, element.innerHTML);
+        
+        // Turn off contenteditable
+        element.setAttribute('contenteditable', 'false');
+        }
+    }
+    
+    // Close edit mode
+    closeEditMode() {
+        this.editMode = false;
+        this.editingSection = null;
+        this.editingSectionHtml = null;
+    }
+    
+    // Update full page HTML after section edits
+    // Update section handling with better sanitization
+    private updateFullPageHtml(pageName: string): void {
+        const sectionHtmls: string[] = [];
+        
+        for (const sectionKey of this.getSectionKeys(pageName)) {
+        const html = this.sectionHtmls[pageName][sectionKey];
+        if (html) {
+            // Ensure each section has CSS applied properly
+            const htmlWithCss = this.applyCssToSectionHtml(html.toString(), pageName, sectionKey);
+            sectionHtmls.push(htmlWithCss);
+        }
+        }
+    
+        // Create a more robust HTML document with CSS properly isolated
+        const finalHtml = `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${pageName}</title>
+        <style id="common-styles">
+            ${COMMON_CSS}
+            /* Additional page-specific rules */
+            body {
+            margin: 0 !important;
+            padding: 0 !important;
+            font-family: 'Segoe UI', sans-serif !important;
+            }
+            .page-wrapper {
+            width: 100%;
+            max-width: 100%;
+            overflow-x: hidden;
+            }
+            /* Ensure section content is styled properly */
+            .section-content {
+            position: relative;
+            width: 100%;
+            }
+        </style>
+        </head>
+        <body>
+        <div class="page-wrapper">
+            ${sectionHtmls.join('\n')}
+        </div>
+        <script>
+            // Simple script to ensure styles are applied
+            document.addEventListener('DOMContentLoaded', function() {
+            // Force a repaint to ensure styles are applied
+            document.body.style.display = 'none';
+            setTimeout(function() { document.body.style.display = ''; }, 10);
+            });
+        </script>
+        </body>
+        </html>`;
+        
+        this.pageSections[pageName] = {
+        FullPage: this.sanitizer.bypassSecurityTrustHtml(finalHtml)
+        };
+    }
+
+    refreshAllSectionCSS(): void {
+        // Refresh CSS in all section previews
+        for (const pageName of this.objectKeys(this.pageSections)) {
+        for (const sectionKey of this.getSectionKeys(pageName)) {
+            const html = this.sectionHtmls[pageName][sectionKey];
+            if (html) {
+            // Re-apply CSS to the section HTML
+            const htmlWithCss = this.applyCssToSectionHtml(html.toString(), pageName, sectionKey);
+            this.sectionHtmls[pageName][sectionKey] = this.sanitizer.bypassSecurityTrustHtml(htmlWithCss);
+            }
+        }
+        
+        // Update the full page HTML
+        this.updateFullPageHtml(pageName);
+        }
+        
+        // Ensure CSS is applied to the DOM
+        this.ensureCommonCssForAllSections();
+        
+        this.toastr.success('Refreshed CSS for all sections');
+    }
+    
+    // Remove section
+    removeSection(pageName: string, sectionKey: string) {
+        if (confirm(`Are you sure you want to remove the ${sectionKey} section?`)) {
+            // Remove from data structures
+            delete this.allPagePrompts[pageName][sectionKey];
+            delete this.sectionHtmls[pageName][sectionKey];
+            
+            // Update the full page HTML
+            this.updateFullPageHtml(pageName);
+            
+            this.toastr.success(`Removed section: ${sectionKey}`);
+        }
+    }
+    
+    // Open new section modal
+    addNewSection(pageName: string, afterSection: string = null) {
+        this.showNewSectionModal = true;
+        this.newSectionPage = pageName;
+        this.newSectionAfter = afterSection;
+        this.newSectionName = '';
+        this.newSectionType = '';
+        this.newSectionDescription = '';
+    }
+    
+    // Cancel adding new section
+    cancelAddSection() {
+        this.showNewSectionModal = false;
+        this.newSectionName = '';
+        this.newSectionType = '';
+        this.newSectionDescription = '';
+    }
+    
+    // Confirm adding new section
+    async confirmAddSection() {
+        if (!this.newSectionName || !this.newSectionType) {
+            this.toastr.error('Please fill out all required fields');
+            return;
+        }
+        
+        const sectionKey = `${this.newSectionType}Section`;
+        
+        // Create empty JSON structure for the new section
+        const emptyJson = {
+            "type": this.newSectionType,
+            "title": "New " + this.newSectionType.charAt(0).toUpperCase() + this.newSectionType.slice(1),
+            "description": this.newSectionDescription || "Add description here",
+            "content": [],
+            "styles": {
+                "background": "#ffffff",
+                "padding": "20px"
+            }
+        };
+        
+        // Add to allPagePrompts
+        if (!this.allPagePrompts[this.newSectionPage]) {
+            this.allPagePrompts[this.newSectionPage] = {};
+        }
+        
+        // Insert at the correct position if afterSection is specified
+        if (this.newSectionAfter) {
+            const sectionKeys = this.getSectionKeys(this.newSectionPage);
+            const afterIndex = sectionKeys.indexOf(this.newSectionAfter);
+            
+            if (afterIndex !== -1) {
+                const newOrder: Record<string, string> = {};
+                let inserted = false;
+                
+                sectionKeys.forEach((key, index) => {
+                    newOrder[key] = this.allPagePrompts[this.newSectionPage][key];
+                    
+                    if (index === afterIndex) {
+                        // Insert the new section after this one
+                        newOrder[sectionKey] = JSON.stringify(emptyJson);
+                        inserted = true;
+                    }
+                });
+                
+                if (!inserted) {
+                    newOrder[sectionKey] = JSON.stringify(emptyJson);
+                }
+                
+                this.allPagePrompts[this.newSectionPage] = newOrder;
+            } else {
+                this.allPagePrompts[this.newSectionPage][sectionKey] = JSON.stringify(emptyJson);
+            }
+        } else {
+            this.allPagePrompts[this.newSectionPage][sectionKey] = JSON.stringify(emptyJson);
+        }
+        
+        // Initialize section HTML structure if needed
+        if (!this.sectionHtmls[this.newSectionPage]) {
+            this.sectionHtmls[this.newSectionPage] = {};
+        }
+        
+        // Generate HTML for the new section
+        const html = await this.generateJson({ 
+            jsonStructure: JSON.stringify(emptyJson), 
+            sectionType: sectionKey 
+        });
+        
+        // Store section HTML
+        this.sectionHtmls[this.newSectionPage][sectionKey] = this.sanitizer.bypassSecurityTrustHtml(html);
+        
+        // Update full page HTML
+        this.updateFullPageHtml(this.newSectionPage);
+        
+        this.toastr.success(`Added new ${this.newSectionType} section`);
+        this.showNewSectionModal = false;
+        this.newSectionName = '';
+        this.newSectionType = '';
+        this.newSectionDescription = '';
+    }
+}
+
+
+// // wireframe-renderer.component.ts
+// import { Component, Input, OnInit } from '@angular/core';
+// import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+// import { ActivatedRoute } from '@angular/router';
+// import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
+// import { COMMON_CSS } from './common-css';
+// import { ToastrService } from 'ngx-toastr';
+// import * as sha256 from 'crypto-js/sha256';
+// import SHA256 from 'crypto-js/sha256';
+
+
+
+// @Component({
+//     selector: 'app-wireframe-renderer',
+//     templateUrl: './wireframe-renderer.component.html',
+//     styleUrls: ['./wireframe-renderer.component.scss']
+// })
+
+// export class WireframeRendererComponent implements OnInit {
+//     @Input() node: any;
+//     @Input() title: string = '';
+//     commonCss: string = COMMON_CSS;
+//     jsonInput = '';
+//     initialPrompt = '';
+//     id: number;
+//     allPagePrompts: Record<string, Record<string, string>> = {};
+//     initialGeneratedPrompts: Record<string, Record<string, string>> = {};
+//     promptHashCache: Record<string, string> = {};
+//     pageSections: Record<string, { FullPage: SafeHtml }> = {};
+
+
+//     constructor(
+//         private siteTreeService: SiteTreeservice,
+//         private route: ActivatedRoute,
+//         private sanitizer: DomSanitizer,
+//         private toastr: ToastrService,
+//     ) { }
+
+//     ngOnInit(): void {
+//         this.id = this.route.snapshot.params['id'];
+
+//         console.log(' id is :  ', this.id)
+
+//         this.fetchTreeById(this.id);
+//     }
+
+//     // wireframe-renderer.component.ts (add this helper method)
+//     getKeys(obj: any): string[] {
+//         return Object.keys(obj || {});
+//     }
+
+//     // Step 1 get  data from that id
+//     fetchTreeById(id: number) {
+//         this.siteTreeService.getById(id).subscribe({
+//             next: (res) => {
+//                 console.log('📥 Fetched from getById:', res);
+
+//                 // Check if model key exists and has some value
+//                 if (res && res.model) {
+//                     try {
+
+//                         this.initialPrompt = res.prompt;
+
+//                         // Optional: if model is already a stringified JSON
+//                         const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
+//                         this.jsonInput = JSON.stringify(maybeParsed, null, 2);
+
+//                         this.generatePromptsForAllSections(this.jsonInput);
+//                     } catch (err) {
+//                         console.error('❌ Error parsing model JSON:', err);
+//                         alert('Model data is not valid JSON format');
+//                     }
+//                 } else {
+//                     console.warn('⚠️ Model key not found or empty, keeping inputJson as is.');
+//                 }
+//             },
+//             error: (err) => {
+//                 console.error('❌ Error in getById:', err);
+//                 // alert('Failed to fetch data from server');
+//             }
+//         });
+//     }
+
+//     // all prompt in one map
+
+//     // Step 2
+//     async generatePromptsForAllSections(treeJsonString: string) {
+//         try {
+//             const parsedTree = JSON.parse(treeJsonString);
+//             await this.processPages(parsedTree);
+//         } catch (e) {
+//             // alert('❌ Invalid JSON format');
+//             console.error('❌ Invalid JSON format', e);
+//         }
+//     }
+
+//     // Step 3
+//     async processPages(treeJson: any) {
+//         console.log('tree is : ', treeJson)
+//         for (const [pageName, sections] of Object.entries(treeJson)) {
+//             // child page prompt map
+//             const sectionPrompts: Record<string, string> = {};
+//             if (sections['Children']) {
+//                 // 👇 Recursively handle child pages
+//                 console.log(' child is : ', sections['Children'])
+//                 // this.generatePromptsForAllSections(sections['Children']);
+//                 await this.processPages(sections['Children']); // ✅ Fix: recursive + awaited
+
+//             }
+//             // Loop other sections
+//             for (const [sectionName, sectionDescription] of Object.entries(sections)) {
+
+//                 if (sectionName === 'Children') continue; // already handled
+
+//                 console.log('✅ Generating prompt for : ', pageName, 'sectionc name and   sectionDescription : ', sectionName, ' ', sectionDescription);
+
+//                 const prompt = await this.generatePromptFromSection(sectionName, sectionDescription); // ✅ await
+//                 sectionPrompts[sectionName] = prompt;
+//             }
+
+//             // 🧠 Store all prompts for that page
+//             this.allPagePrompts[pageName] = sectionPrompts;
+//             this.initialGeneratedPrompts[pageName] = JSON.parse(JSON.stringify(sectionPrompts)); // Deep clone
+
+//         }
+//         console.log('✅ FINAL PROMPT MAP:', this.allPagePrompts);
+
+//         await this.processAllPagesLiveUpdate()
+//     }
+
+//     get objectKeys() {
+//         return Object.keys;
+//     }
+
+
+//     jsonsuffixprompt = `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).
+//                     🚫 Do NOT include:
+// - Any explanation, extra text, or markdown
+// - Code fences like \`\`\`html or \`\`\`css
+// - Alternative versions or comments
+
+// ✅ Only return a single, production-ready, semantic HTML block.
+// ✅ Respect image/icon placeholders using their width/height.
+// ✅ Use clean structure with appropriate tags like <header>, <nav>, <ul>, <button>, etc.”
+// Only return the clean semantic HTML structure. 
+// ❌ Do not return any inline style.
+// ❌ Do not use position: absolute or fixed unless necessary.
+// ✅ Use class-based layout with proper div wrapping using flexbox or CSS grid.
+// ✅ Maintain readable, balanced structure with default flow.
+
+// HTML Only. No CSS.
+
+// ✅ Output MUST be raw HTML ONLY.`;
+
+//     withoutjsonsuffixprompt = `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).
+// 🚫 Do NOT include:
+// - Any explanation or markdown formatting
+// - Comments or alternate versions
+// - Any text like “Here's the HTML...” or “Below is...”
+
+// ✅ Just return a clean, single block of HTML code.
+// ✅ Focus on layout that matches a modern UI — semantic, responsive, and readable.
+// ✅ Use placeholders for image/icon blocks where appropriate (e.g., <div style="width:100px;height:30px;background:#ccc;"></div>)`;
+
+
+
+//     async generatePromptFromSection(
+//         sectionName: string,
+//         sectionDescription: string,
+//         headerId: number = 35,
+//         operationType: string = 'template 1'
+//     ): Promise<string> {
+//         return new Promise((resolve) => {
+//             const fieldType = sectionName.toLowerCase().replace(/section$/i, '').trim();
+
+//             this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
+//                 next: async (res) => {
+//                     try {
+//                         const jsonBlock = res?.javacode;
+//                         if (!jsonBlock) return resolve('{}');
+
+//                         const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
+//                         const baseJsonString = JSON.stringify(baseJson, null, 2);
+
+//                         const enhancedPrompt = `
+//                         🎯 Enhance the content of this section using the following context.
+                        
+//                         🧠 Instructions:
+//                         - You are given an existing JSON structure for a UI section.
+//                         - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
+//                         - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
+//                         - You must NOT add or remove any keys or elements.
+//                         - You must return ONLY the updated JSON structure in valid format.
+                        
+//                         📄 Page Prompt:
+//                         "${this.initialPrompt}"
+                        
+//                         📦 Section Name:
+//                         "${sectionName}"
+                        
+//                         📘 Section Description:
+//                         "${sectionDescription}"
+                        
+//                         📌 Existing JSON (modify this only):
+//                         ${baseJsonString}
+                        
+//                         🚫 Do NOT include:
+//                         - Any explanation, commentary, or markdown
+//                         - Any prefix like "Here is the updated JSON"
+//                         - Any new elements that were not already present
+                        
+//                         ✅ Output Requirement:
+//                         Only return the updated JSON structure — nothing else.
+//                         `;
+
+
+//                         const hash = sha256(enhancedPrompt).toString();
+
+//                         if (this.promptHashCache[hash]) {
+//                             return resolve(this.promptHashCache[hash]);
+//                         }
+
+//                         // const enhanced = await this.callLlm(enhancedPrompt);
+//                         // this.promptHashCache[hash] = enhanced;
+
+//                         resolve(baseJsonString);
+//                     } catch (err) {
+//                         console.error('❌ JSON parse error:', err);
+//                         resolve('{}');
+//                     }
+//                 },
+//                 error: () => resolve('{}')
+//             });
+//         });
+//     }
+
+//     cachedPromptHashes: Record<string, Record<string, string>> = {};
+//     sectionHtmls: Record<string, Record<string, string>> = {};
+
+//     // Step 1 - Generate SHA-256 Hash
+
+//     getPromptHash(prompt: string): string {
+//         return SHA256(prompt).toString();
+//     }
+
+
+//     // Step 2 - Enhance per section with Hash Check + LLM call in Parallel
+
+//     async processAllPagesLiveUpdate() {
+//         const htmlGenerationTasks: Promise<void>[] = [];
+
+//         for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
+//             htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap));
+//         }
+
+//         await Promise.all(htmlGenerationTasks);
+//     }
+
+//     async processPageSections(pageName: string, sectionMap: Record<string, string>) {
+//         const sectionHtmls: string[] = [];
+
+//         const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => {
+//             const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt });
+//             sectionHtmls.push(html);
+//         });
+
+//         await Promise.all(htmlTasks);
+
+//         const finalHtml = `<style>${COMMON_CSS}</style>\n${sectionHtmls.join('\n')}`;
+//         const safeHtml = this.sanitizer.bypassSecurityTrustHtml(finalHtml);
+
+//         this.pageSections[pageName] = { FullPage: safeHtml };
+//     }
+
+
+
+//     pageHtmlMap: Record<string, string> = {};
+//     generatedPages: { name: string, html: string }[] = [];
+
+//     // Step 6
+//     async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
+//         return new Promise((resolve) => {
+//             try {
+//                 const parsedJson =
+//                     typeof data.jsonStructure === 'string'
+//                         ? JSON.parse(data.jsonStructure)
+//                         : data.jsonStructure;
+
+//                 const payload = {
+//                     sectionType: data.sectionType,
+//                     jsonStructure: parsedJson
+//                 };
+
+//                 console.log('📤 Sending to HTML API:', payload);
+
+//                 this.siteTreeService.generateHtml(payload).subscribe({
+//                     next: (res) => {
+//                         console.log('✅ Response from HTML API:', res);
+//                         if (res && res.msg) {
+//                             resolve(res.msg);
+//                         } else {
+//                             resolve('⚠️ No response received from HTML API.');
+//                         }
+//                     },
+//                     error: (err) => {
+//                         console.error('❌ HTML API Error:', err);
+//                         resolve('⚠️ HTML API call failed.');
+//                     }
+//                 });
+//             } catch (err) {
+//                 console.error('❌ JSON parsing error before sending to API:', err);
+//                 resolve('⚠️ Invalid JSON structure.');
+//             }
+//         });
+//     }
+
+//     // copy to clipboard
+//     copyToClipboard(pageName: string) {
+//         const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
+//         navigator.clipboard.writeText(fullHtml).then(() => {
+//             alert(`📋 HTML copied for page: ${pageName}`);
+//         });
+//     }
+
+//     // dowlload as html
+//     downloadHtml(pageName: string) {
+//         const fullHtml = Object.values(this.pageSections[pageName]).join('\n');
+//         const blob = new Blob([fullHtml], { type: 'text/html' });
+//         const url = window.URL.createObjectURL(blob);
+
+//         const link = document.createElement('a');
+//         link.href = url;
+//         link.download = `${pageName}.html`;
+//         link.click();
+
+//         window.URL.revokeObjectURL(url);
+//     }
+
+
+//     // ✅ Call this method when user clicks "Save Files"
+//     uploadHtmlFiles(projId: number) {
+//         const pageHtmlMap: Record<string, string> = {};
+
+//         for (const [pageName, section] of Object.entries(this.pageSections)) {
+//             const html = section.FullPage?.toString() || '';
+//             pageHtmlMap[pageName] = html;
+//         }
+
+//         this.siteTreeService.createHtmlPages(pageHtmlMap, projId).subscribe(
+//             (data) => {
+//                 console.log(data);
+//                 if (data || data.status >= 200 && data.status <= 299) {
+//                     this.toastr.success("file Created");
+//                 }
+//                 setTimeout(() => {
+//                     this.ngOnInit();
+//                 }, 500);
+
+//             }, (error) => {
+//                 console.log(error);
+//                 if (error.status >= 200 && error.status <= 299) {
+//                     this.toastr.success("file Created");
+//                 }
+//                 if (error.status >= 400 && error.status <= 499) {
+//                     this.toastr.error("Not Created");
+//                 }
+//                 if (error.status >= 500 && error.status <= 599) {
+//                     this.toastr.error("Not Created");
+//                 }
+//             });
+//         setTimeout(() => {
+//             this.ngOnInit();
+//         }, 500);
+//     }
+
+
+//     // regenerate specific pages
+//     async regenerateWireframe(pageName: string) {
+//         const original = this.initialGeneratedPrompts[pageName];
+//         const current = this.allPagePrompts[pageName];
+
+//         const updatedSections: string[] = [];
+
+//         for (const section in current) {
+//             if (!original || original[section] !== current[section]) {
+//                 updatedSections.push(section);
+//             }
+//         }
+
+//         if (updatedSections.length === 0) {
+//             alert('✅ No changes found to regenerate!');
+//             return;
+//         }
+
+//         const htmlBlocks: string[] = [];
+
+//         for (const section of updatedSections) {
+//             const jsonPrompt = current[section];
+//             const html = await this.generateJson({ jsonStructure: jsonPrompt, sectionType: section });
+//             htmlBlocks.push(html);
+
+//             console.log(`♻️ Regenerated section: ${pageName} > ${section}`);
+//         }
+
+//         // Inject only changed parts (append or replace)
+//         const finalHtml = `
+//           <style>${COMMON_CSS}</style>
+//           ${htmlBlocks.join('\n')}
+//         `;
+//         const safeHtml = this.sanitizer.bypassSecurityTrustHtml(finalHtml);
+
+//         this.pageSections[pageName] = { FullPage: safeHtml };
+//     }
+
+
+//     //   regenearte all pages
+//     async regenerateAllModifiedSections() {
+//         for (const [pageName, currentSections] of Object.entries(this.allPagePrompts)) {
+//             const originalSections = this.initialGeneratedPrompts[pageName] || {};
+//             const updatedSections: string[] = [];
+
+//             for (const sectionName in currentSections) {
+//                 if (!originalSections[sectionName] || originalSections[sectionName] !== currentSections[sectionName]) {
+//                     updatedSections.push(sectionName);
+//                 }
+//             }
+
+//             if (updatedSections.length === 0) {
+//                 console.log(`✅ ${pageName} has no modified sections.`);
+//                 continue;
+//             }
+
+//             const htmlBlocks: string[] = [];
+
+//             for (const section of updatedSections) {
+//                 const jsonPrompt = currentSections[section];
+//                 const html = await this.generateJson({ jsonStructure: jsonPrompt, sectionType: section });
+//                 htmlBlocks.push(html);
+//                 console.log(`♻️ Regenerated: ${pageName} > ${section}`);
+//             }
+
+//             const finalHtml = `
+//             <style>${COMMON_CSS}</style>
+//             ${htmlBlocks.join('\n')}
+//           `;
+
+//             const safeHtml = this.sanitizer.bypassSecurityTrustHtml(finalHtml);
+//             this.pageSections[pageName] = { FullPage: safeHtml };
+//         }
+
+//         alert('✅ Regeneration complete for all modified sections!');
+//     }
+
+
+
+//     // // Step 6
+//     async callLlm(data): Promise<string> {
+//         return new Promise((resolve, reject) => {
+//             console.log('call Llm Start ')
+//             const payload = {
+//                 query: data,
+//                 conversationId: '677'
+//             };
+//             console.log(' query : ', payload.query)
+//             this.siteTreeService.callLlm(payload).subscribe({
+//                 next: (res) => {
+//                     console.log('response ', res)
+//                     if (res && res.responseContent) {
+//                         resolve(res.responseContent);
+//                     } else {
+//                         resolve('⚠️ No response received.');
+//                     }
+//                 },
+//                 error: () => resolve('⚠️ LLaMA API failed.')
+
+//             });
+//         });
+//     }
+
+//     activeEditTarget: string | null = null;
+//     liveStyles = {
+//         background: '',
+//         color: '',
+//         fontSize: '',
+//         padding: '',
+//         margin: '',
+//         fontWeight:'',
+//         textAlign:'',
+//     };
+
+//     selectEditable(pageName: string) {
+//         this.activeEditTarget = pageName;
+//     }
+
+//     applyLiveStyles() {
+//         const target = document.querySelector(`[data-target='${this.activeEditTarget}']`) as HTMLElement;
+//         if (target) {
+//             Object.keys(this.liveStyles).forEach((prop) => {
+//                 if (this.liveStyles[prop]) {
+//                     target.style[prop] = this.liveStyles[prop];
+//                 }
+//             });
+//         }
+//         this.toastr.success(`🎨 Style updated for: ${this.activeEditTarget}`);
+//     }
+
+//     // 🔁 Track raw edits
+//     rawEdits: Record<string, string> = {};
+
+
+
+//     selectedElementSelector = '';
+//     styleMap: Record<string, any> = {
+//         'hero-header': { 'background': '#fdfdfd', 'text-align': 'center' },
+//         'btn-filled': { 'background': '#000', 'color': '#fff' },
+//         'hero-heading': { 'font-size': '36px', 'font-weight': 'bold' },
+//         // Add all classes you want to allow editing
+//     };
+
+//     getAllCssSelectors(): string[] {
+//         return Object.keys(this.styleMap);
+//     }
+
+
+//     applyCssFromMap() {
+//         this.updateLiveStyles();
+//     }
+
+//     updateLiveStyles() {
+//         const styleSheetId = 'dynamic-css-style';
+//         let styleEl = document.getElementById(styleSheetId) as HTMLStyleElement;
+
+//         if (!styleEl) {
+//             styleEl = document.createElement('style');
+//             styleEl.id = styleSheetId;
+//             document.head.appendChild(styleEl);
+//         }
+
+//         let css = '';
+//         for (const selector in this.styleMap) {
+//             css += `.${selector} {`;
+//             for (const prop in this.styleMap[selector]) {
+//                 css += `${prop}: ${this.styleMap[selector][prop]};`;
+//             }
+//             css += '}';
+//         }
+
+//         styleEl.innerHTML = css;
+//     }
+
+//     onEdit(pageName: string, event: any) {
+//         const newHtml = event.target.innerHTML;
+//         this.pageSections[pageName]['FullPage'] = this.sanitizer.bypassSecurityTrustHtml(newHtml);
+//     }
+
+//     applyStyleToSelection() {
+//         const selection = window.getSelection();
+//         if (!selection || selection.rangeCount === 0) return;
+    
+//         const range = selection.getRangeAt(0);
+//         const selectedText = range.extractContents();
+    
+//         const span = document.createElement('span');
+    
+//         // Apply styles
+//         if (this.liveStyles.color) span.style.color = this.liveStyles.color;
+//         if (this.liveStyles.background) span.style.backgroundColor = this.liveStyles.background;
+//         if (this.liveStyles.fontSize) span.style.fontSize = this.liveStyles.fontSize;
+//         if (this.liveStyles.fontWeight) span.style.fontWeight = this.liveStyles.fontWeight;
+//         if (this.liveStyles.textAlign) span.style.textAlign = this.liveStyles.textAlign;
+//         span.appendChild(selectedText);
+    
+//         range.insertNode(span);
+//         selection.removeAllRanges();
+//       }
+    
+    
+
+//     //  // Step 4
+//     //  async generatePromptFromSection(
+//     //     sectionName: string,
+//     //     sectionDescription: string,
+//     //     headerId: number = 35,
+//     //     operationType: string = 'template 1',
+//     // ): Promise<string> {
+//     //     return new Promise((resolve) => {
+//     //         // const fieldType = sectionName.toLowerCase().replace(/\s+/g, '').replace(/section$/, '').trim();
+//     //         const fieldType = sectionName
+//     //             .toLowerCase()
+//     //             .replace(/section$/i, '')        // remove trailing 'section'
+//     //             .replace(/\s{2,}/g, ' ')         // multiple spaces to single space
+//     //             .trim();                         // trim leading/trailing spaces
+
+//     //         this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
+//     //             next: async (res) => {
+//     //                 try {
+//     //                     const jsonBlock = res?.javacode;
+//     //                     if (!jsonBlock) {
+//     //                         resolve('{}');
+//     //                         return;
+//     //                     }
+
+//     //                     // console.log( fieldType , ' json is : ', jsonBlock)
+
+//     //                     const parsedJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
+
+//     //                         // const updatedJson = this.replaceContentRecursively(parsedJson, sectionDescription);
+//     //                         const formattedJson = JSON.stringify(parsedJson, null, 2);
+//     //                         // 🧠 Build prompt to LLM with section info + json + full page prompt
+//     // //                           // 🧠 LLM enhancement: Content update without changing structure
+//     //                 const smartPrompt = `
+//     //                 🔁 Enhance this JSON content while keeping the structure exactly same.
+
+//     //                 Section Name: ${sectionName}
+//     //                 Section Description: ${sectionDescription}
+//     //                 Full Page Prompt: ${this.initialPrompt || ''}
+
+//     //                 ✅ Replace or fill only content fields like: "title", "description", "text", "label", "placeholder", "heading", etc.
+//     //                 ❌ Do NOT change or restructure keys, nesting, or CSS class names.
+//     //                 ❌ Do NOT remove or add new blocks unless it's strictly a content array (like testimonials or FAQs).
+
+//     //                 JSON Input:
+//     //                 ${formattedJson}
+
+//     //                 ⬇️ Return only the updated JSON with better content.
+//     //                 `;
+
+
+//     //                         // console.log('enhanced query ', smartPrompt);
+
+//     // //                             // const finalJson = await this.calLlm(enhancedPrompt);
+//     //                         // resolve(formattedJson);
+
+//     //                 const enhancedJson = await this.calLlm(smartPrompt);
+
+//     //                 // Return directly the enhanced JSON
+//     //                 resolve(enhancedJson || formattedJson);
+
+//     //                 } catch (err) {
+//     //                     console.error('❌ JSON parse error:', err);
+//     //                     resolve('{}');
+//     //                 }
+//     //             },
+//     //             error: (err) => {
+//     //                 console.error('❌ API error:', err);
+//     //                 resolve('{}');
+//     //             }
+//     //         });
+//     //     });
+//     // }
+
+
+
+//     // // Step 5 - generate html code via java Api through prompt
+//     // async processAllPagesLiveUpdate() {
+//     //     for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
+//     //         const sectionHtmls: string[] = [];
+
+//     //         for (const [sectionName, promptText] of Object.entries(sectionMap)) {
+//     //             console.log(`🚀 Generating HTML for: ${pageName} > ${sectionName}`);
+
+//     //             const response = await this.generateJson({ sectionType: sectionName, jsonStructure: promptText });
+//     //             const html = response || '⚠️ No response received.';
+
+//     //             sectionHtmls.push(html);
+//     //         }
+
+//     //         // ✅ Inject common CSS once per page
+//     //         const htmlWithCss = `
+//     //     <style>${COMMON_CSS}</style>
+//     //     ${sectionHtmls.join('\n')}`;
+
+//     //         // ✅ Bypass Angular sanitizer
+//     //         const safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(htmlWithCss);
+
+//     //         this.pageSections[pageName] = { FullPage: safeHtml };
+//     //     }
+//     // }
+//     // replaceContentRecursively(obj: any, replacement: string): any {
+//     //     if (Array.isArray(obj)) {
+//     //         return obj.map(item => this.replaceContentRecursively(item, replacement));
+//     //     } else if (typeof obj === 'object' && obj !== null) {
+//     //         const updated = {};
+//     //         for (const [key, value] of Object.entries(obj)) {
+//     //             // Replace specific fields if they are strings
+//     //             if (['description', 'text', 'label', 'title', 'subtext'].includes(key.toLowerCase()) && typeof value === 'string') {
+//     //                 updated[key] = replacement;
+//     //             } else {
+//     //                 updated[key] = this.replaceContentRecursively(value, replacement);
+//     //             }
+//     //         }
+//     //         return updated;
+//     //     }
+//     //     return obj;
+//     // }
+
+//     // // Step 4
+//     // generatePromptFromSection(
+//     //     sectionName: string,
+//     //     sectionDescription: string,
+//     //     headerId: number = 35,
+//     //     operationType: string = 'template1'
+//     // ): Promise<string> {
+//     //     return new Promise((resolve, reject) => {
+//     //         const fieldType = sectionName.toLowerCase().replace(/\s+/g, '').replace(/section$/, '').trim();
+
+//     //         this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
+//     //             next: (res) => {
+//     //                 let prompt = `🎯 Generate ONLY the HTML structure for the following UI section. Do NOT include any explanation, markdown, or CSS.\n\n`;
+//     //                 prompt += `Section Name: ${sectionName}\n`;
+//     //                 prompt += `Description: ${sectionDescription}\n\n`;
+
+//     //                 try {
+//     //                     const jsonBlock = res?.javacode;
+//     //                     if (jsonBlock) {
+//     //                         prompt += `Below is the structural JSON definition of the section. Use it to map the layout and tags appropriately..\n\n`;
+//     //                         prompt += `JSON:\n${typeof jsonBlock === 'string' ? jsonBlock : JSON.stringify(jsonBlock, null, 2)}\n\n`;
+//     //                         prompt += this.jsonsuffixprompt;
+
+//     //                     } else {
+
+//     //                         prompt += `There is no structural JSON provided for this section.. Generate a reasonable HTML layout based on the description.\n\n`;
+//     //                         prompt += this.withoutjsonsuffixprompt;
+
+//     //                     }
+//     //                 } catch (err) {
+//     //                     prompt += `There is no structural JSON provided for this section. Use the description.`;
+//     //                     prompt += this.withoutjsonsuffixprompt;
+
+//     //                 }
+
+//     //                 resolve(prompt);
+//     //             },
+//     //             error: (err) => {
+//     //                 console.error('❌ API error:', err);
+//     //                 const fallbackPrompt = `🎯 Generate the HTML structure for the following section.\n\nSection Name: ${sectionName}\nDescription: ${sectionDescription}\n\nThere is no structural JSON provided for this section.` + this.withoutjsonsuffixprompt;
+//     //                 resolve(fallbackPrompt);
+//     //             }
+//     //         });
+//     //     });
+//     // }
+
+
+
+
+
+//     // pageSections: Record<string, Record<string, string>> = {}; // { pageName: { sectionName: html } }
+
+//     // async processAllPagesLiveUpdate() {
+//     //     for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
+//     //         if (!this.pageSections[pageName]) {
+//     //             this.pageSections[pageName] = {};
+//     //         }
+
+//     //         let sectionHtmls: string[] = [];
+
+//     //         for (const [sectionName, promptText] of Object.entries(sectionMap)) {
+//     //             console.log(`🚀 Sending: [${pageName} > ${sectionName}]`);
+
+//     //             const response = await this.generateJson({ message: promptText });
+//     //             const html = response || '⚠️ No response received.';
+
+//     //             sectionHtmls.push(html); // collect all HTMLs
+
+//     //             // ✅ LIVE update for UI
+//     //             //         const htmlWithCss = `
+//     //             //   <style>${COMMON_CSS}</style>
+//     //             //   ${html}`;
+
+//     //             // this.pageSections[pageName][sectionName] = htmlWithCss;
+//     //             this.pageSections[pageName][sectionName] = html;
+//     //         }
+
+
+//     //     }
+//     // }
+
+//     // async processAllPagesWithLlama() {
+//     //     for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
+//     //         const sectionHtmls: Record<string, string> = {};
+
+//     //         for (const [sectionName, promptText] of Object.entries(sectionMap)) {
+//     //             console.log(`⚡ Sending to LLaMA: [${pageName} > ${sectionName}]`);
+
+//     //             const llamaResponse = await this.generateJson({ message: promptText });
+//     //             sectionHtmls[sectionName] = llamaResponse || '⚠️ No response';
+//     //         }
+
+//     //         // Combine all sections into one page HTML
+//     //         const fullPageHtml = Object.entries(sectionHtmls)
+//     //             .map(([sectionName, html]) => `<!-- ${sectionName} -->\n${html}`)
+//     //             .join('\n\n');
+
+//     //         // Save this complete page in key-value store
+//     //         this.pageHtmlMap[pageName] = fullPageHtml;
+
+//     //         // ✅ Show in UI
+//     //         this.generatedPages.push({ name: pageName, html: fullPageHtml });
+
+//     //         console.log(`✅ Page generated: ${pageName}`);
+//     //     }
+//     // }
+
+//     // generatedPrompt: string = ''; // ✅ Declare here
+//     // 
+//     // generatePromptFromSection(
+//     //     sectionName: string,
+//     //     sectionDescription: string,
+//     //     headerId: number = 35,
+//     //     operationType: string = 'template1'
+//     // ) {
+//     //     const fieldType = sectionName.toLowerCase().replace(/\s+/g, '');
+
+//     //     this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
+//     //         next: (res) => {
+//     //             console.log('📥 Fetched from dlf:', res);
+
+//     //             if (res) {
+//     //                 try {
+//     //                     const jsonBlock = res.javacode;
+//     //                     let prompt = `🎯 Generate the HTML structure for the following section.\n\n`;
+//     //                     prompt += `Section Name: ${sectionName}\n`;
+//     //                     prompt += `Description: ${sectionDescription}\n\n`;
+
+//     //                     if (jsonBlock) {
+//     //                         prompt += `Below is the structural JSON definition of the section. Use this structure to map your HTML.\n\n`;
+//     //                         prompt += `JSON:\n${typeof jsonBlock === 'string' ? jsonBlock : JSON.stringify(jsonBlock, null, 2)}\n\n`;
+//     //                     } else {
+//     //                         prompt += `No structural JSON is available for this section. Generate a reasonable HTML layout based on the description.\n\n`;
+//     //                     }
+
+//     //                     prompt += `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).`;
+
+//     //                     // 🔧 Save it to a field or emit from here
+//     //                     this.generatedPrompt = prompt;
+
+//     //                 } catch (error) {
+//     //                     console.error('❌ Error generating prompt:', error);
+//     //                     this.generatedPrompt = '⚠️ Failed to generate prompt due to JSON error.';
+//     //                 }
+//     //             } else {
+//     //                 console.warn('⚠️ Model key not found or empty.');
+//     //                 this.generatedPrompt = `⚠️ No JSON model found. Please try again.`;
+//     //             }
+//     //         },
+//     //         error: (err) => {
+//     //             console.error('❌ Error got during :', err);
+//     //             let prompt = `🎯 Generate the HTML structure for the following section.\n\n`;
+//     //             prompt += `Section Name: ${sectionName}\n`;
+//     //             prompt += `Description: ${sectionDescription}\n\n`;
+
+
+//     //             prompt += `No structural JSON is available for this section. Generate a reasonable HTML layout based on the description.\n\n`;
+
+
+//     //             prompt += `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).`;
+
+//     //             // 🔧 Save it to a field or emit from here
+//     //             this.generatedPrompt = prompt;
+
+//     //             // alert('Failed to fetch data from server!');
+//     //         }
+//     //     });
+//     // }
+
+
+//     // generatePromptsForAllSections(treeJson: any) {
+
+//     //     for (const [pageName, sections] of Object.entries(treeJson)) {
+//     //         const sectionPrompts: Record<string, string> = {};
+
+//     //         for (const [sectionName, sectionDescription] of Object.entries(sections)) {
+//     //             if (sectionName === 'Children') {
+
+//     //                 // Recursively process child pages
+//     //                 const children = sections['Children'];
+
+//     //                 console.log(' child is : ', children)
+
+//     //                 const childPrompts = this.generatePromptsForAllSections(children);
+//     //                 Object.assign(this.allPagePrompts, childPrompts);
+//     //             } else {
+
+//     //                 console.log('sc name  sectionDescription : ', sectionName, ' ', sectionDescription)
+
+//     //                 this.generatePromptFromSection(sectionName, sectionDescription);
+//     //                 sectionPrompts[sectionName] = this.generatedPrompt;
+//     //             }
+//     //         }
+
+//     //         this.allPagePrompts[pageName] = sectionPrompts;
+//     //     }
+
+//     //     console.log(' all page prompt is :', this.allPagePrompts);
+
+//     // }
+
+
+
+//     // dynamic prompt generation
+//     // generatePromptFromSection(
+//     //     sectionName: string,
+//     //     sectionDescription: string,
+//     //     headerId: number = 35,
+//     //     operationType: string = 'template1'
+//     // ) {
+
+//     //     const fieldType = sectionName.toLowerCase().replace(/\s+/g, '');
+//     //     this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
+//     //         next: (res) => {
+//     //             console.log('📥 Fetched from dlf:', res);
+
+//     //             // Check if model key exists and has some value
+//     //             if (res && res.javacode) {
+
+
+//     //                 try {
+
+//     //                     const jsonBlock = res?.javaCode;
+
+//     //                     let prompt = `🎯 Generate the HTML structure for the following section.\n\n`;
+//     //                     prompt += `Section Name: ${sectionName}\n`;
+//     //                     prompt += `Description: ${sectionDescription}\n\n`;
+
+//     //                     if (jsonBlock) {
+//     //                         prompt += `Below is the structural JSON definition of the section. Use this structure to map your HTML.\n\n`;
+//     //                         prompt += `JSON:\n${typeof jsonBlock === 'string' ? jsonBlock : JSON.stringify(jsonBlock, null, 2)}\n\n`;
+//     //                     } else {
+//     //                         prompt += `No structural JSON is available for this section. Generate a reasonable HTML layout based on the description.\n\n`;
+//     //                     }
+
+//     //                     prompt += `Make sure the layout is clean, semantic, and responsive. Use only HTML (no CSS or JS).`;
+
+//     //                     return prompt;
+
+//     //                 } catch (error) {
+//     //                     console.error('Error generating prompt:', error);
+//     //                     return '⚠️ Failed to generate prompt due to API error.';
+//     //                 }
+//     //             } else {
+//     //                 console.warn('⚠️ Model key not found or empty, keeping inputJson as is.');
+//     //             }
+//     //         },
+//     //         error: (err) => {
+//     //             console.error('❌ Error got:', err);
+//     //             alert('Failed to fetch data from Server!');
+//     //         }
+//     //     });
+
+//     // }
+
+
+
+// }
+
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/services/api/api-request.service.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/services/api/api-request.service.ts
index 3c24cd5..1faad2c 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/services/api/api-request.service.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/services/api/api-request.service.ts
@@ -70,18 +70,32 @@ export class ApiRequestService {
     //return Observable.throw(error.message);
   }
 
-  get(url: string, urlParams?: HttpParams): Observable<any> {
+  // get(url: string, urlParams?: HttpParams): Observable<any> {
+  //   let me = this;
+  //   return this.http
+  //     .get(this.appConfig.baseApiPath + url, {
+  //       headers: this.getHeaders(),
+  //       params: urlParams,
+  //     }).pipe(
+  //       catchError((error) => {
+  //         return throwError(error || "Server error");
+  //       })
+  //     )
+  // }
+
+  get(url: string, urlParams?: HttpParams, responseType: 'json' | 'text' = 'json'): Observable<any> {
     let me = this;
-    return this.http
-      .get(this.appConfig.baseApiPath + url, {
-        headers: this.getHeaders(),
-        params: urlParams,
-      }).pipe(
-        catchError((error) => {
-          return throwError(error || "Server error");
-        })
-      )
+    return this.http.get(this.appConfig.baseApiPath + url, {
+      headers: this.getHeaders(),
+      params: urlParams,
+      responseType: responseType as any, // 👈 force-cast because Angular types are strict
+    }).pipe(
+      catchError((error) => {
+        return throwError(error || "Server error");
+      })
+    );
   }
+  
 
   loginAuthentication(url: string, body: Object): Observable<any> {
     let me = this;