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 a500159..945eea3 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,7 +9,6 @@ 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 { ActivatedRoute } from '@angular/router'; // import { Download_Css } from '../WireframesUi/download-css'; declare var JsBarcode: any; @@ -284,7 +283,7 @@ export class Design_lbraryComponent implements OnInit { HTML Preview 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 39c8f21..d06c2ff 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 @@ -10,6 +10,8 @@ export class SiteTreeservice { private baseURL = "SiteTree/SiteTree"; private dlfbaseURL = environment.builderUrl + "/entityBuilder"; private nodeURL = environment.nodeUrl; + private geminiURL = environment.ollamaUrl; + constructor( @@ -56,6 +58,11 @@ export class SiteTreeservice { return this.http.post(`${this.nodeURL}/chatMemory`, data); } + callGemini(data: any): Observable { + return this.http.post(`${this.geminiURL}/api/gemini`, data); + } + + generateHtml(data: any): Observable { return this.apiRequest.post(`api/html/generate`, data); 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 5700326..f5e874f 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 @@ -2012,120 +2012,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; } -/* Testimonial Styling */ -testimonial { - display: block !important; - max-width: 800px !important; - margin: 40px auto !important; - padding: 35px !important; - background-color: #fff !important; - border-radius: 10px !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; - font-style: italic !important; - color: #444 !important; - position: relative !important; - line-height: 1.8 !important; - font-size: 1.1rem !important; - border-left: 5px solid #0066cc !important; -} -testimonial::before { - content: '"' !important; - font-size: 5rem !important; - color: #0066cc !important; - position: absolute !important; - left: 15px !important; - top: -10px !important; - opacity: 0.2 !important; - font-family: Georgia, serif !important; -} - -section:nth-child(even) testimonial { - background-color: #fff !important; -} - -/* Custom styles container */ -styles { - display: none !important; -} - -/* Responsive Adjustments */ -@media (max-width: 992px) { - h1 { - font-size: 2rem !important; - } - - h2 { - font-size: 1.75rem !important; - } - - section { - padding: 60px 0 !important; - } -} - -@media (max-width: 768px) { - section { - padding: 50px 0 !important; - } - - .hero-1-two-column, .split-8-section, .split-10-section { - flex-direction: column !important; - } - - .btn, button { - width: 100% !important; - } - - .hero-1-button-group, .hero-2-button-group { - flex-direction: column !important; - width: 100% !important; - } -} - -@media (max-width: 576px) { - body { - font-size: 15px !important; - } - - h1 { - font-size: 1.75rem !important; - } - - h2 { - font-size: 1.5rem !important; - } - - section { - padding: 40px 0 !important; - } - - testimonial { - padding: 25px !important; - font-size: 1rem !important; - } -} - -/* Animations and Transitions */ -.fade-in { - animation: fadeIn 1s ease-in-out !important; -} - -@keyframes fadeIn { - from { - opacity: 0 !important; - transform: translateY(20px) !important; - } - to { - opacity: 1 !important; - transform: translateY(0) !important; - } -} - -/* Ensure smooth scrolling */ -html { - scroll-behavior: smooth !important; -} `; 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 deleted file mode 100644 index de4be1e..0000000 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css.ts +++ /dev/null @@ -1,2163 +0,0 @@ -export const Download_Css = ` -body { - -/* Master Reset & Base Styles */ -html, body { - margin: 0 !important; - padding: 0 !important; - width: 100% !important; - min-height: 100% !important; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; - font-size: 16px !important; - line-height: 1.6 !important; - color: #333 !important; - background-color: #fff !important; - box-sizing: border-box !important; - overflow-x: hidden !important; - text-align: left !important; /* Override center alignment */ -} - -*, *::before, *::after { - box-sizing: border-box !important; -} - -/* Common Container */ -.container { - max-width: 1200px !important; - width: 100% !important; - margin: 0 auto !important; - padding: 0 20px !important; -} - -/* Section Styling for Consistent Flow */ -section { - padding: 80px 0 !important; - position: relative !important; - width: 100% !important; - background-color: #fff !important; -} - -section:nth-child(even) { - background-color: #f9f9f9 !important; -} - -/* Typography Hierarchy */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0 !important; - margin-bottom: 0.5em !important; - line-height: 1.3 !important; - font-weight: 700 !important; - color: #111 !important; -} - -h1 { - font-size: 2.5rem !important; -} - -h2 { - font-size: 2rem !important; -} - -h3 { - font-size: 1.75rem !important; -} - -h4 { - font-size: 1.5rem !important; -} - -h5 { - font-size: 1.25rem !important; -} - -h6 { - font-size: 1rem !important; -} - -p { - margin-top: 0 !important; - margin-bottom: 1rem !important; - color: #555 !important; -} - -/* Link Styling */ -a { - color: #0066cc !important; - text-decoration: none !important; - transition: all 0.3s ease !important; -} - -a:hover { - color: #004499 !important; - text-decoration: underline !important; -} - -/* Button System */ -.btn, button, -.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn, -.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, -.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, -.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn { - display: inline-block !important; - padding: 12px 24px !important; - font-size: 16px !important; - font-weight: 600 !important; - text-align: center !important; - border-radius: 6px !important; - cursor: pointer !important; - transition: all 0.3s ease !important; - border: 2px solid transparent !important; - letter-spacing: 0.5px !important; - text-decoration: none !important; -} - -.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid { - background-color: #0066cc !important; - color: #fff !important; - border-color: #0066cc !important; -} - -.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover { - background-color: #004499 !important; - border-color: #004499 !important; -} - -.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline { - background-color: transparent !important; - color: #0066cc !important; - border-color: #0066cc !important; -} - -.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover { - background-color: #0066cc !important; - color: #fff !important; -} - -/* Image Styling */ -img { - max-width: 100% !important; - height: auto !important; - display: block !important; -} - -/* Form Elements */ -input, textarea, select { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; - font-size: 16px !important; - padding: 12px !important; - border: 1px solid #ccc !important; - border-radius: 6px !important; - width: 100% !important; - transition: border-color 0.3s ease !important; -} - -input:focus, textarea:focus, select:focus { - outline: none !important; - border-color: #0066cc !important; - box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important; -} - -/* Navigation Override */ -.nav-1-navbar { - background-color: #fff !important; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; - position: sticky !important; - top: 0 !important; - z-index: 1000 !important; -} - -/* Blog Section Fixes */ -.tn1-blog-section, .blog-2-section { - background-color: inherit !important; - padding: 80px 20px !important; -} - -.tn1-blog-card, .blog-2-card { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; - transition: transform 0.3s ease, box-shadow 0.3s ease !important; - overflow: hidden !important; -} - -.tn1-blog-card:hover, .blog-2-card:hover { - transform: translateY(-5px) !important; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; -} - -/* FAQ Sections */ -.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container { - background-color: inherit !important; -} - -.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question { - background-color: #f1f1f1 !important; - transition: background-color 0.3s ease !important; -} - -.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover { - background-color: #e7e7e7 !important; -} - -/* Footer Override */ -.footer-1-section, .footer-2-section { - background-color: #f8f8f8 !important; - border-top: 1px solid #eee !important; -} - -/* Contact Section */ -.contact-1-section { - background-color: #fff !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; -} - -.contact-1-submit-btn { - background-color: #0066cc !important; - color: #fff !important; -} - -.contact-1-submit-btn:hover { - background-color: #004499 !important; -} - -/* Hero Section Enhancements */ -.hero-1-two-column, .hero-2-centered-hero, .hero-9-section { - background-color: inherit !important; -} - -.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; - overflow: hidden !important; - position: relative !important; -} - -/* Split Sections */ -.split-8-section, .split-10-section { - background-color: inherit !important; -} - -.split-8-placeholder, .split-10-placeholder { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; -} - -/* Testimonial Styling */ -testimonial { - display: block !important; - max-width: 800px !important; - margin: 40px auto !important; - padding: 35px !important; - background-color: #fff !important; - border-radius: 10px !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; - font-style: italic !important; - color: #444 !important; - position: relative !important; - line-height: 1.8 !important; - font-size: 1.1rem !important; - border-left: 5px solid #0066cc !important; -} - -testimonial::before { - content: '"' !important; - font-size: 5rem !important; - color: #0066cc !important; - position: absolute !important; - left: 15px !important; - top: -10px !important; - opacity: 0.2 !important; - font-family: Georgia, serif !important; -} - -section:nth-child(even) testimonial { - background-color: #fff !important; -} - -/* Custom styles container */ -styles { - display: none !important; -} - -/* Responsive Adjustments */ -@media (max-width: 992px) { - h1 { - font-size: 2rem !important; - } - - h2 { - font-size: 1.75rem !important; - } - - section { - padding: 60px 0 !important; - } -} - -@media (max-width: 768px) { - section { - padding: 50px 0 !important; - } - - .hero-1-two-column, .split-8-section, .split-10-section { - flex-direction: column !important; - } - - .btn, button { - width: 100% !important; - } - - .hero-1-button-group, .hero-2-button-group { - flex-direction: column !important; - width: 100% !important; - } -} - -@media (max-width: 576px) { - body { - font-size: 15px !important; - } - - h1 { - font-size: 1.75rem !important; - } - - h2 { - font-size: 1.5rem !important; - } - - section { - padding: 40px 0 !important; - } - - testimonial { - padding: 25px !important; - font-size: 1rem !important; - } -} - -/* Animations and Transitions */ -.fade-in { - animation: fadeIn 1s ease-in-out !important; -} - -@keyframes fadeIn { - from { - opacity: 0 !important; - transform: translateY(20px) !important; - } - to { - opacity: 1 !important; - transform: translateY(0) !important; - } -} - -/* Ensure smooth scrolling */ -html { - scroll-behavior: smooth !important; -} - -/* Testimonial styling */ -testimonial { - display: block !important; - max-width: 800px !important; - margin: 40px auto !important; - padding: 30px !important; - background-color: #fff !important; - border-radius: 8px !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; - font-style: italic !important; - color: #555 !important; - position: relative !important; - line-height: 1.8 !important; - font-size: 1.1rem !important; -} - -testimonial::before { - content: '"' !important; - font-size: 4rem !important; - color: #0066cc !important; - position: absolute !important; - left: 10px !important; - top: -10px !important; - opacity: 0.2 !important; - font-family: Georgia, serif !important; -} - -/* For dark backgrounds */ -section:nth-child(even) testimonial { - background-color: #f9f9f9 !important; -} - - font-family: sans-serif; - margin: 0; - padding: 0; - background: #f9f9f9; - text-align: center; - } - - .tn1-blog-section { - max-width: 960px; - margin: auto; - padding: 60px 20px; - background: #fff; - } - - .tn1-subheading { - font-size: 14px; - color: #666; - margin-bottom: 8px; - } - - .tn1-main-heading { - font-size: 28px; - margin: 10px 0; - } - - .tn1-description { - color: #888; - margin-bottom: 40px; - } - - .tn1-blog-grid { - display: flex; - gap: 20px; - justify-content: center; - flex-wrap: wrap; - } - - .tn1-blog-card { - background: #f1f1f1; - padding: 20px; - max-width: 280px; - flex: 1 1 250px; - border-radius: 8px; - text-align: left; - } - - .tn1-placeholder { - background: #ccc; - height: 160px; - border-radius: 6px; - margin-bottom: 16px; - } - - .tn1-category { - font-size: 12px; - color: #999; - text-transform: uppercase; - margin: 8px 0 4px; - } - - .tn1-title { - font-size: 16px; - margin: 0 0 10px; - font-weight: bold; - } - - .tn1-summary { - font-size: 14px; - color: #555; - margin-bottom: 12px; - } - - .tn1-meta { - font-size: 12px; - color: #777; - } - - .tn1-view-all-btn { - margin-top: 40px; - padding: 10px 20px; - background: transparent; - border: 1px solid #000; - cursor: pointer; - } - - body { - font-family: sans-serif; - margin: 0; - padding: 0; - background: #fff; - } - - .blog-2-section { - max-width: 1200px; - margin: auto; - padding: 60px 20px; - } - - .blog-2-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - flex-wrap: wrap; - margin-bottom: 40px; - } - - .blog-2-subheading { - font-size: 14px; - color: #666; - margin-bottom: 8px; - } - - .blog-2-main-heading { - font-size: 28px; - margin: 0; - } - - .blog-2-description { - font-size: 16px; - color: #888; - margin-top: 10px; - max-width: 500px; - } - - .blog-2-view-all { - padding: 8px 16px; - background: transparent; - border: 1px solid #000; - cursor: pointer; - margin-top: 8px; - } - - .blog-2-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 50px; - } - - .blog-2-card { - background: #fff; - border: 1px solid #ddd; - border-radius: 8px; - overflow: hidden; - display: flex; - flex-direction: column; - } - - .blog-2-placeholder { - height: 160px; - background: #ccc; - } - - .blog-2-content { - padding: 16px; - display: flex; - flex-direction: column; - gap: 8px; - } - - .blog-2-meta { - font-size: 12px; - color: #777; - margin-bottom: 8px; - display: flex; - gap: 8px; - } - - .blog-2-title { - font-size: 18px; - margin: 10px 0; - font-weight: bold; - } - - .blog-2-summary { - font-size: 14px; - color: #555; - margin-bottom: 12px; - } - - .blog-2-read-more { - font-size: 14px; - color: #000; - text-decoration: none; - font-weight: 500; - } - - - .contact-1-wrapper { - margin: 0; - font-family: Arial, sans-serif; - background: #f0efec; - } - - .contact-1-section { - background: #fff; - max-width: 480px; - margin: 60px auto; - padding: 40px 30px; - text-align: center; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - } - - .contact-1-tagline { - font-size: 14px; - color: #777; - margin-bottom: 8px; - } - - .contact-1-heading { - font-size: 24px; - margin: 0 0 10px; - } - - .contact-1-description { - color: #666; - font-size: 14px; - margin-bottom: 30px; - } - - .contact-1-form { - display: flex; - flex-direction: column; - gap: 16px; - text-align: left; - } - - .contact-1-label { - font-size: 14px; - font-weight: 500; - } - - .contact-1-input, - .contact-1-textarea { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 14px; - } - - .contact-1-checkbox-row { - display: flex; - align-items: center; - gap: 8px; - font-size: 13px; - } - - .contact-1-submit-btn { - background: #000; - color: #fff; - padding: 10px 20px; - border: none; - font-weight: bold; - cursor: pointer; - border-radius: 4px; - } - - .newsletter-2-wrapper { - font-family: sans-serif; - margin: 0; - padding: 0; - background: #f5f3f0; - } - - .newsletter-2-section { - background: #fff; - padding: 60px 40px; - } - - .newsletter-2-container { - max-width: 1200px; - margin: auto; - display: flex; - justify-content: space-between; - align-items: flex-start; - flex-wrap: wrap; - gap: 40px; - } - - .newsletter-2-left { - flex: 1; - min-width: 300px; - } - - .newsletter-2-heading { - font-size: 24px; - font-weight: bold; - margin-bottom: 10px; - } - - .newsletter-2-description { - font-size: 14px; - color: #666; - } - - .newsletter-2-right { - flex: 1; - min-width: 280px; - } - - .newsletter-2-signup-form { - display: flex; - gap: 10px; - margin-bottom: 10px; - } - - .newsletter-2-email-input { - flex: 1; - padding: 10px; - font-size: 14px; - border: 1px solid #aaa; - border-radius: 4px; - } - - .newsletter-2-submit-btn { - padding: 10px 16px; - background: #000; - color: #fff; - border: none; - font-weight: bold; - cursor: pointer; - border-radius: 4px; - } - - .newsletter-2-disclaimer { - font-size: 12px; - color: #888; - } - - .newsletter-2-disclaimer a { - color: #000; - text-decoration: underline; - } - - .cta-3-wrapper { - font-family: sans-serif; - margin: 0; - padding: 0; - background: #f5f3f0; - } - - .cta-3-section { - background: #fff; - padding: 80px 20px; - text-align: center; - } - - .cta-3-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; - } - - .cta-3-description { - font-size: 16px; - color: #666; - max-width: 600px; - margin: 0 auto 32px; - } - - .cta-3-button-group { - display: flex; - justify-content: center; - gap: 16px; - } - - .cta-3-btn { - padding: 10px 24px; - font-size: 14px; - cursor: pointer; - border-radius: 4px; - font-weight: 600; - } - - .cta-3-solid { - background-color: #000; - color: #fff; - border: none; - } - - .cta-3-outline { - background-color: transparent; - color: #000; - border: 1px solid #000; - } -.faq-4-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f5f5; -} - -.faq-4-section { - background: #fff; - padding: 60px 20px; - max-width: 700px; - margin: auto; - text-align: center; -} - -.faq-4-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 12px; -} - -.faq-4-description { - font-size: 14px; - color: #666; - margin-bottom: 32px; -} - -.faq-4-list { - display: flex; - flex-direction: column; - gap: 12px; - margin-bottom: 40px; -} - -.faq-4-question { - width: 100%; - padding: 14px 18px; - font-size: 14px; - text-align: left; - background: #f1f1f1; - border: none; - border-radius: 4px; - cursor: pointer; - display: flex; - justify-content: space-between; -} - -.faq-4-footer { - text-align: center; -} - -.faq-4-footer-heading { - font-size: 18px; - font-weight: bold; - margin-bottom: 8px; -} - -.faq-4-footer-description { - font-size: 14px; - color: #777; - margin-bottom: 16px; -} - -.faq-4-footer-btn { - padding: 10px 20px; - border: 1px solid #000; - background: transparent; - cursor: pointer; - font-weight: bold; - border-radius: 4px; -} -.faq-5-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f3f0; -} - -.faq-5-section { - background: #fff; - padding: 60px 20px; -} - -.faq-5-container { - max-width: 1100px; - margin: auto; - display: flex; - gap: 40px; - flex-wrap: wrap; - justify-content: space-between; -} - -.faq-5-left { - flex: 1; - min-width: 280px; -} - -.faq-5-heading { - font-size: 24px; - font-weight: bold; - margin-bottom: 12px; -} - -.faq-5-description { - font-size: 14px; - color: #666; - margin-bottom: 24px; -} - -.faq-5-contact-btn { - padding: 10px 20px; - background: transparent; - border: 1px solid #000; - font-weight: bold; - cursor: pointer; - border-radius: 4px; -} - -.faq-5-right { - flex: 2; - min-width: 400px; - display: flex; - flex-direction: column; - gap: 12px; -} - -.faq-5-item .faq-5-question { - width: 100%; - text-align: left; - padding: 14px 18px; - background: #f1f1f1; - border: none; - font-size: 14px; - border-radius: 4px; - display: flex; - justify-content: space-between; - cursor: pointer; -} -.faq-6-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f5f5; -} - -.faq-6-block { - max-width: 700px; - margin: 60px auto; - padding: 40px 20px; - background: #fff; - text-align: center; -} - -.faq-6-tagline { - font-size: 12px; - letter-spacing: 1px; - text-transform: uppercase; - color: #999; - margin-bottom: 8px; -} - -.faq-6-heading { - font-size: 22px; - font-weight: bold; - margin-bottom: 24px; -} - -.faq-6-list { - text-align: left; -} - -.faq-6-item { - border-top: 1px solid #ddd; - padding: 16px 0; -} - -.faq-6-question { - display: flex; - justify-content: space-between; - font-weight: 500; - cursor: pointer; -} - -.faq-6-icon { - font-weight: bold; -} - -.faq-6-answer { - margin-top: 10px; - color: #444; - font-size: 14px; -} - -.faq-6-answer a { - color: #000; - text-decoration: underline; -} - -.faq-6-footer { - margin-top: 30px; -} - -.faq-6-view-more-btn { - padding: 10px 24px; - border: 1px solid #000; - background: transparent; - font-weight: bold; - cursor: pointer; -} -.faq-7-wrapper { - font-family: sans-serif; - margin: 0; - background: #fff; -} - -.faq-7-container { - display: flex; - padding: 60px 30px; - gap: 60px; - max-width: 1200px; - margin: auto; - flex-wrap: wrap; -} - -.faq-7-left { - flex: 1; - min-width: 260px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; -} - -.faq-7-support-label { - font-size: 14px; - color: #888; -} - -.faq-7-support-action { - font-size: 16px; - font-weight: bold; - margin: 10px 0; -} - -.faq-7-chat-icon img { - width: 40px; - height: 40px; -} - -.faq-7-right { - flex: 2; - min-width: 400px; -} - -.faq-7-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 24px; -} - -.faq-7-search input { - width: 100%; - padding: 12px 16px; - font-size: 14px; - margin-bottom: 24px; - border: 1px solid #ccc; - border-radius: 6px; -} - -.faq-7-list { - display: flex; - flex-direction: column; - gap: 16px; -} - -.faq-7-item { - display: flex; - flex-direction: column; -} - -.faq-7-question { - width: 100%; - padding: 14px; - text-align: left; - font-size: 16px; - border: none; - background: #f9f9f9; - border-radius: 6px; - cursor: pointer; -} - -.faq-7-answer { - padding: 12px 14px; - font-size: 14px; - background: #f0f0f0; - margin-top: 8px; - border-radius: 6px; - color: #333; -} -.split-8-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f3f0; -} - -.split-8-section { - display: flex; - flex-wrap: wrap; - gap: 40px; - padding: 60px 30px; - max-width: 1200px; - margin: auto; - background: #fff; -} - -.split-8-left { - flex: 1; - min-width: 280px; -} - -.split-8-tagline { - font-size: 12px; - color: #999; - margin-bottom: 8px; -} - -.split-8-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.split-8-description { - font-size: 14px; - color: #555; - margin-bottom: 24px; -} - -.split-8-button-group { - display: flex; - gap: 16px; - flex-wrap: wrap; -} - -.split-8-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - cursor: pointer; - border-radius: 4px; -} - -.split-8-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} - -.split-8-arrow { - background: transparent; - border: none; - color: #000; -} - -.split-8-right { - flex: 1; - min-width: 300px; - display: flex; - justify-content: center; - align-items: center; -} - -.split-8-placeholder { - width: 100%; - max-width: 400px; - height: 300px; - background: #ccc; - border-radius: 8px; -} -.hero-9-wrapper { - margin: 0; - font-family: sans-serif; - background: #f4f4f4; -} - -.hero-9-section { - text-align: center; - padding: 60px 20px 40px; - background: #fff; -} - -.hero-9-tagline { - font-size: 12px; - color: #777; - margin-bottom: 8px; -} - -.hero-9-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.hero-9-description { - font-size: 14px; - color: #555; - max-width: 600px; - margin: 0 auto 24px; -} - -.hero-9-button-group { - display: flex; - justify-content: center; - gap: 16px; - flex-wrap: wrap; - margin-bottom: 40px; -} - -.hero-9-btn { - padding: 10px 20px; - font-size: 14px; - cursor: pointer; - font-weight: bold; - border-radius: 4px; -} - -.hero-9-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} - -.hero-9-arrow { - background: transparent; - border: none; - color: #000; -} - -.hero-9-image-wrapper { - max-width: 1000px; - margin: auto; -} - -.hero-9-placeholder { - height: 320px; - background: #ccc; - border-radius: 8px; -} -.split-10-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f3f0; -} - -.split-10-section { - display: flex; - flex-wrap: wrap; - gap: 40px; - padding: 60px 30px; - max-width: 1200px; - margin: auto; - background: #fff; -} - -.split-10-left { - flex: 1; - min-width: 300px; - display: flex; - justify-content: center; - align-items: center; -} - -.split-10-placeholder { - width: 100%; - max-width: 400px; - height: 300px; - background: #ccc; - border-radius: 8px; -} - -.split-10-right { - flex: 1; - min-width: 280px; -} - -.split-10-tagline { - font-size: 12px; - color: #999; - margin-bottom: 8px; -} - -.split-10-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.split-10-description { - font-size: 14px; - color: #555; - margin-bottom: 24px; -} - -.split-10-button-group { - display: flex; - gap: 16px; - flex-wrap: wrap; -} - -.split-10-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - cursor: pointer; - border-radius: 4px; -} - -.split-10-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} - -.split-10-arrow { - background: transparent; - border: none; - color: #000; -} -.grid-11-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f5f5; -} - -.grid-11-section { - padding: 60px 20px; - text-align: center; - background: #fff; -} - -.grid-11-tagline { - font-size: 12px; - color: #777; - margin-bottom: 8px; -} - -.grid-11-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.grid-11-description { - font-size: 14px; - color: #555; - max-width: 700px; - margin: 0 auto 40px; -} - -.grid-11-card-grid { - display: flex; - gap: 24px; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 40px; -} - -.grid-11-card { - max-width: 300px; - text-align: center; -} - -.grid-11-placeholder { - height: 180px; - background: #ccc; - border-radius: 6px; - margin-bottom: 16px; -} - -.grid-11-card-title { - font-size: 16px; - font-weight: bold; - margin-bottom: 10px; -} - -.grid-11-card-desc { - font-size: 14px; - color: #666; -} - -.grid-11-button-group { - display: flex; - gap: 16px; - justify-content: center; -} - -.grid-11-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - cursor: pointer; - border-radius: 4px; -} - -.grid-11-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} - -.grid-11-arrow { - background: transparent; - border: none; - color: #000; -} - -.grid-12-wrapper { - margin: 0; - font-family: sans-serif; - background: #f5f5f5; -} - -.grid-12-section { - padding: 60px 20px; - text-align: center; - background: #fff; -} - -.grid-12-heading { - font-size: 26px; - font-weight: bold; - margin-bottom: 40px; -} - -.grid-12-grid { - display: flex; - gap: 24px; - flex-wrap: wrap; - justify-content: center; -} - -.grid-12-card { - max-width: 280px; - text-align: left; -} - -.grid-12-icon { - font-size: 24px; - margin-bottom: 16px; - color: #000; -} - -.grid-12-title { - font-size: 16px; - font-weight: bold; - margin-bottom: 12px; -} - -.grid-12-desc { - font-size: 14px; - color: #555; - margin-bottom: 16px; -} - -.grid-12-btn { - font-size: 14px; - font-weight: bold; - cursor: pointer; - background: transparent; - border: none; - color: #000; -} - -.grid-12-arrow { - font-size: 14px; - font-weight: bold; - cursor: pointer; - background: transparent; - border: none; - color: #000; -} -.footer-1-wrapper { - background: #f8f8f8; - font-family: sans-serif; - margin: 0; -} - -.footer-1-section { - background: #fff; - padding: 40px 30px 20px; - border-top: 1px solid #eee; -} - -.footer-1-top { - display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - margin-bottom: 40px; -} - -.footer-1-brand { - flex: 1 1 300px; - max-width: 350px; -} - -.footer-1-logo { - font-size: 20px; - font-weight: bold; - margin-bottom: 10px; -} - -.footer-1-newsletter-text { - font-size: 14px; - color: #333; - margin-bottom: 16px; -} - -.footer-1-newsletter-form { - display: flex; - gap: 10px; - margin-bottom: 12px; -} - -.footer-1-newsletter-form input[type="email"] { - padding: 10px; - flex: 1; - font-size: 14px; - border: 1px solid #ccc; - border-radius: 4px; -} - -.footer-1-subscribe-btn { - padding: 10px 16px; - font-size: 14px; - border: 1px solid #000; - background: #000; - color: #fff; - border-radius: 4px; - cursor: pointer; -} - -.footer-1-privacy-note { - font-size: 12px; - color: #666; -} - -.footer-1-privacy-note a { - text-decoration: underline; - color: #000; -} - -.footer-1-columns { - display: flex; - gap: 40px; - flex-wrap: wrap; - flex: 2 1 500px; - justify-content: space-between; -} - -.footer-1-column { - min-width: 150px; -} - -.footer-1-column h4 { - font-size: 14px; - font-weight: bold; - margin-bottom: 12px; -} - -.footer-1-column ul { - list-style: none; - padding: 0; - margin: 0; -} - -.footer-1-column ul li { - margin-bottom: 8px; - font-size: 14px; -} - -.footer-1-column ul li a { - color: #000; - text-decoration: none; -} - -.footer-1-social ul li { - display: flex; - align-items: center; - gap: 8px; -} - -.footer-1-social ul li i { - width: 18px; -} - -.footer-1-bottom { - border-top: 1px solid #eee; - padding-top: 20px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - font-size: 13px; - color: #777; -} - -.footer-1-links { - display: flex; - gap: 20px; - list-style: none; - padding: 0; - margin: 0; -} - -.footer-1-links li a { - text-decoration: none; - color: #555; -} -.footer-2-wrapper { - font-family: sans-serif; - background: #f5f5f5; -} - -.footer-2-section { - background: #fff; - padding: 40px 30px 20px; - border-top: 1px solid #eee; -} - -.footer-2-top { - display: flex; - flex-wrap: wrap; - gap: 40px; - justify-content: space-between; - margin-bottom: 40px; -} - -.footer-2-left { - flex: 1 1 300px; - max-width: 350px; -} - -.footer-2-left .logo { - font-size: 20px; - font-weight: bold; - margin-bottom: 10px; -} - -.footer-2-left p { - font-size: 14px; - color: #333; - margin: 10px 0; -} - -.footer-2-left a { - font-size: 14px; - color: #000; - text-decoration: underline; -} - -.footer-2-social-icons { - margin-top: 12px; - display: flex; - gap: 12px; -} - -.footer-2-social-icons i { - font-size: 16px; - color: #000; - cursor: pointer; -} - -.footer-2-links-columns { - flex: 2 1 400px; - display: flex; - gap: 80px; - justify-content: flex-end; -} - -.footer-2-links-columns ul { - list-style: none; - padding: 0; - margin: 0; -} - -.footer-2-links-columns ul li { - margin-bottom: 8px; - font-size: 14px; -} - -.footer-2-links-columns ul li a { - text-decoration: none; - color: #000; -} - -.footer-2-bottom { - border-top: 1px solid #eee; - padding-top: 20px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - font-size: 13px; - color: #777; -} - -.footer-2-bottom .footer-2-links { - display: flex; - gap: 20px; - list-style: none; - padding: 0; - margin: 0; -} - -.footer-2-bottom .footer-2-links li a { - text-decoration: none; - color: #555; -} -.text-1-wrapper { - margin: 0; - font-family: sans-serif; - background: #fff; -} - -.text-1-section { - padding: 60px 30px; - max-width: 700px; - margin: auto; -} - -.text-1-tagline { - font-size: 12px; - color: #999; - margin-bottom: 10px; -} - -.text-1-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.text-1-description { - font-size: 14px; - color: #555; - margin-bottom: 24px; -} - -.text-1-button-group { - display: flex; - gap: 16px; -} - -.text-1-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - border-radius: 4px; - cursor: pointer; -} - -.text-1-solid { - background: #000; - color: #fff; - border: 1px solid #000; -} - -.text-1-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} -.text-2-wrapper { - margin: 0; - font-family: sans-serif; - background: #fff; -} - -.text-2-section { - padding: 60px 30px; - text-align: center; - max-width: 700px; - margin: auto; -} - -.text-2-tagline { - font-size: 12px; - color: #999; - margin-bottom: 10px; -} - -.text-2-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.text-2-description { - font-size: 14px; - color: #555; - margin-bottom: 24px; -} - -.text-2-button-group { - display: flex; - gap: 16px; - justify-content: center; -} - -.text-2-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - border-radius: 4px; - cursor: pointer; -} - -.text-2-solid { - background: #000; - color: #fff; - border: 1px solid #000; -} - -.text-2-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} -.hero-1-wrapper { - margin: 0; - font-family: sans-serif; - background: #fff; -} - -.hero-1-two-column { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: 60px 30px; - gap: 40px; -} - -.hero-1-content { - flex: 1 1 400px; - max-width: 600px; -} - -.hero-1-image { - flex: 1 1 300px; - max-width: 500px; -} - -.hero-1-placeholder { - background: #ccc; - height: 300px; - border-radius: 6px; -} - -.hero-1-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.hero-1-description { - font-size: 14px; - color: #555; - margin-bottom: 24px; -} - -.hero-1-button-group { - display: flex; - gap: 16px; -} - -.hero-1-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - border-radius: 4px; - cursor: pointer; -} - -.hero-1-solid { - background: #000; - color: #fff; - border: 1px solid #000; -} - -.hero-1-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} -.hero-2-wrapper { - margin: 0; - font-family: sans-serif; - background: #fff; -} - -.hero-2-centered-hero { - text-align: center; - padding: 60px 20px; -} - -.hero-2-heading { - font-size: 28px; - font-weight: bold; - margin-bottom: 16px; -} - -.hero-2-description { - font-size: 14px; - color: #555; - margin-bottom: 24px; - max-width: 700px; - margin-left: auto; - margin-right: auto; -} - -.hero-2-button-group { - display: flex; - gap: 16px; - justify-content: center; - margin-bottom: 40px; -} - -.hero-2-btn { - padding: 10px 20px; - font-size: 14px; - font-weight: bold; - border-radius: 4px; - cursor: pointer; -} - -.hero-2-solid { - background: #000; - color: #fff; - border: 1px solid #000; -} - -.hero-2-outline { - background: transparent; - border: 1px solid #000; - color: #000; -} - -.hero-2-image { - display: flex; - justify-content: center; - margin-top: 20px; -} - -.hero-2-placeholder { - background: #ccc; - width: 100%; - max-width: 800px; - height: 300px; - border-radius: 6px; -} -.logo-1-wrapper { - margin: 0; - font-family: sans-serif; - background: #fff; -} - -.logo-1-cloud { - padding: 40px 20px; - text-align: center; -} - -.logo-1-intro-text { - font-size: 14px; - color: #333; - margin-bottom: 20px; -} - -.logo-1-grid { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 24px; -} - -.logo-1-grid img { - height: 30px; - opacity: 0.8; - transition: opacity 0.3s ease; -} - -.logo-1-grid img:hover { - opacity: 1; -} -.feature-1-wrapper { - margin: 0; - font-family: sans-serif; - background-color: #fff; - color: #111; -} - -.feature-1-section { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; - padding: 60px 40px; - max-width: 1200px; - margin: auto; - gap: 40px; -} - -.feature-1-text { - flex: 1 1 500px; -} - -.feature-1-tag { - font-size: 14px; - color: #555; - margin-bottom: 10px; -} - -.feature-1-title { - font-size: 36px; - font-weight: 800; - margin-bottom: 20px; -} - -.feature-1-subtitle { - font-size: 16px; - line-height: 1.6; - color: #333; - margin-bottom: 30px; -} - -.feature-1-benefits { - display: flex; - gap: 40px; - margin-bottom: 30px; - flex-wrap: wrap; -} - -.feature-1-benefit { - display: flex; - align-items: flex-start; - gap: 10px; - max-width: 250px; -} - -.feature-1-benefit i { - font-size: 24px; - color: #000; -} - -.feature-1-benefit h4 { - margin: 0 0 5px; - font-size: 16px; - font-weight: 700; -} - -.feature-1-benefit p { - margin: 0; - font-size: 14px; - color: #444; -} - -.feature-1-actions { - display: flex; - align-items: center; - gap: 20px; -} - -.feature-1-btn.feature-1-primary { - padding: 10px 20px; - background-color: #fff; - border: 2px solid #111; - font-weight: 600; - cursor: pointer; -} - -.feature-1-btn-link { - font-weight: 500; - font-size: 14px; - text-decoration: none; - color: #111; - display: inline-flex; - align-items: center; - gap: 5px; -} - -.feature-1-image { - flex: 1 1 400px; -} - -.feature-1-placeholder { - 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: 40px; -} -.nav-1-wrapper { - margin: 0; - font-family: sans-serif; -} - -.nav-1-navbar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 40px; - border-bottom: 1px solid #eee; -} - -.nav-1-logo { - font-family: cursive; - font-size: 24px; - font-weight: bold; -} - -.nav-1-nav-links { - list-style: none; - display: flex; - gap: 20px; - margin: 0; - padding: 0; -} - -.nav-1-nav-links li a { - text-decoration: none; - color: #111; - font-size: 14px; -} - -.nav-1-dropdown i { - font-size: 10px; - margin-left: 5px; -} - -.nav-1-nav-actions { - display: flex; - gap: 10px; -} - -.nav-1-btn { - padding: 6px 14px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - border: 2px solid #111; -} - -.nav-1-outline { - background-color: transparent; - color: #111; -} - -.nav-1-solid { - background-color: #111; - color: #fff; -} -.visa-order-btn-section { - padding: 60px 20px; - text-align: center; - background-color: #f9f9f9; -} - -.visa-order-btn { - padding: 12px 28px; - font-size: 15px; - font-weight: 600; - color: #fff; - background-color: #0072f5; - border: none; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.3s ease; - box-shadow: 0 4px 8px rgba(0, 114, 245, 0.2); -} - -.visa-order-btn:hover { - background-color: #005fcc; -} - -`; - - - - - - - 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 deleted file mode 100644 index edd2afc..0000000 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/download-css2.ts +++ /dev/null @@ -1,6327 +0,0 @@ -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; -} - /* Master Reset & Base Styles */ -html, body { - margin: 0 !important; - padding: 0 !important; - width: 100% !important; - min-height: 100% !important; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; - font-size: 16px !important; - line-height: 1.6 !important; - color: #333 !important; - background-color: #fff !important; - box-sizing: border-box !important; - overflow-x: hidden !important; - text-align: left !important; /* Override center alignment */ -} - -*, *::before, *::after { - box-sizing: border-box !important; -} - -/* Common Container */ -.container { - max-width: 1200px !important; - width: 100% !important; - margin: 0 auto !important; - padding: 0 20px !important; -} - -/* Section Styling for Consistent Flow */ -section { - padding: 80px 0 !important; - position: relative !important; - width: 100% !important; - background-color: #fff !important; -} - -section:nth-child(even) { - background-color: #f9f9f9 !important; -} - -/* Typography Hierarchy */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0 !important; - margin-bottom: 0.5em !important; - line-height: 1.3 !important; - font-weight: 700 !important; - color: #111 !important; -} - -h1 { - font-size: 2.5rem !important; -} - -h2 { - font-size: 2rem !important; -} - -h3 { - font-size: 1.75rem !important; -} - -h4 { - font-size: 1.5rem !important; -} - -h5 { - font-size: 1.25rem !important; -} - -h6 { - font-size: 1rem !important; -} - -p { - margin-top: 0 !important; - margin-bottom: 1rem !important; - color: #555 !important; -} - -/* Link Styling */ -a { - color: #0066cc !important; - text-decoration: none !important; - transition: all 0.3s ease !important; -} - -a:hover { - color: #004499 !important; - text-decoration: underline !important; -} - -/* Button System */ -.btn, button, -.hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn, -.split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, -.cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, -.faq-6-view-more-btn, .visa-order-btn, .nav-1-btn { - display: inline-block !important; - padding: 12px 24px !important; - font-size: 16px !important; - font-weight: 600 !important; - text-align: center !important; - border-radius: 6px !important; - cursor: pointer !important; - transition: all 0.3s ease !important; - border: 2px solid transparent !important; - letter-spacing: 0.5px !important; - text-decoration: none !important; -} - -.btn-primary, .hero-1-solid, .hero-2-solid, .text-1-solid, .text-2-solid, .cta-3-solid, .nav-1-solid { - background-color: #0066cc !important; - color: #fff !important; - border-color: #0066cc !important; -} - -.btn-primary:hover, .hero-1-solid:hover, .hero-2-solid:hover, .text-1-solid:hover, .text-2-solid:hover, .cta-3-solid:hover, .nav-1-solid:hover { - background-color: #004499 !important; - border-color: #004499 !important; -} - -.btn-outline, .hero-1-outline, .hero-2-outline, .text-1-outline, .text-2-outline, .cta-3-outline, .nav-1-outline { - background-color: transparent !important; - color: #0066cc !important; - border-color: #0066cc !important; -} - -.btn-outline:hover, .hero-1-outline:hover, .hero-2-outline:hover, .text-1-outline:hover, .text-2-outline:hover, .cta-3-outline:hover, .nav-1-outline:hover { - background-color: #0066cc !important; - color: #fff !important; -} - -/* Image Styling */ -img { - max-width: 100% !important; - height: auto !important; - display: block !important; -} - -/* Form Elements */ -input, textarea, select { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; - font-size: 16px !important; - padding: 12px !important; - border: 1px solid #ccc !important; - border-radius: 6px !important; - width: 100% !important; - transition: border-color 0.3s ease !important; -} - -input:focus, textarea:focus, select:focus { - outline: none !important; - border-color: #0066cc !important; - box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important; -} - -/* Navigation Override */ -.nav-1-navbar { - background-color: #fff !important; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; - position: sticky !important; - top: 0 !important; - z-index: 1000 !important; -} - -/* Blog Section Fixes */ -.tn1-blog-section, .blog-2-section { - background-color: inherit !important; - padding: 80px 20px !important; -} - -.tn1-blog-card, .blog-2-card { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; - transition: transform 0.3s ease, box-shadow 0.3s ease !important; - overflow: hidden !important; -} - -.tn1-blog-card:hover, .blog-2-card:hover { - transform: translateY(-5px) !important; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; -} - -/* FAQ Sections */ -.faq-4-section, .faq-5-section, .faq-6-block, .faq-7-container { - background-color: inherit !important; -} - -.faq-4-question, .faq-5-question, .faq-6-question, .faq-7-question { - background-color: #f1f1f1 !important; - transition: background-color 0.3s ease !important; -} - -.faq-4-question:hover, .faq-5-question:hover, .faq-6-question:hover, .faq-7-question:hover { - background-color: #e7e7e7 !important; -} - -/* Footer Override */ -.footer-1-section, .footer-2-section { - background-color: #f8f8f8 !important; - border-top: 1px solid #eee !important; -} - -/* Contact Section */ -.contact-1-section { - background-color: #fff !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; -} - -.contact-1-submit-btn { - background-color: #0066cc !important; - color: #fff !important; -} - -.contact-1-submit-btn:hover { - background-color: #004499 !important; -} - -/* Hero Section Enhancements */ -.hero-1-two-column, .hero-2-centered-hero, .hero-9-section { - background-color: inherit !important; -} - -.hero-1-placeholder, .hero-2-placeholder, .hero-9-placeholder { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; - overflow: hidden !important; - position: relative !important; -} - -/* Split Sections */ -.split-8-section, .split-10-section { - background-color: inherit !important; -} - -.split-8-placeholder, .split-10-placeholder { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; -} - -/* Testimonial Styling */ -testimonial { - display: block !important; - max-width: 800px !important; - margin: 40px auto !important; - padding: 35px !important; - background-color: #fff !important; - border-radius: 10px !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; - font-style: italic !important; - color: #444 !important; - position: relative !important; - line-height: 1.8 !important; - font-size: 1.1rem !important; - border-left: 5px solid #0066cc !important; -} - -testimonial::before { - content: '"' !important; - font-size: 5rem !important; - color: #0066cc !important; - position: absolute !important; - left: 15px !important; - top: -10px !important; - opacity: 0.2 !important; - font-family: Georgia, serif !important; -} - -section:nth-child(even) testimonial { - background-color: #fff !important; -} - -/* Custom styles container */ -styles { - display: none !important; -} - -/* Responsive Adjustments */ -@media (max-width: 992px) { - h1 { - font-size: 2rem !important; - } - - h2 { - font-size: 1.75rem !important; - } - - section { - padding: 60px 0 !important; - } -} - -@media (max-width: 768px) { - section { - padding: 50px 0 !important; - } - - .hero-1-two-column, .split-8-section, .split-10-section { - flex-direction: column !important; - } - - .btn, button { - width: 100% !important; - } - - .hero-1-button-group, .hero-2-button-group { - flex-direction: column !important; - width: 100% !important; - } -} - -@media (max-width: 576px) { - body { - font-size: 15px !important; - } - - h1 { - font-size: 1.75rem !important; - } - - h2 { - font-size: 1.5rem !important; - } - - section { - padding: 40px 0 !important; - } - - testimonial { - padding: 25px !important; - font-size: 1rem !important; - } -} - -/* Animations and Transitions */ -.fade-in { - animation: fadeIn 1s ease-in-out !important; -} - -@keyframes fadeIn { - from { - opacity: 0 !important; - transform: translateY(20px) !important; - } - to { - opacity: 1 !important; - transform: translateY(0) !important; - } -} - -/* Ensure smooth scrolling */ -html { - scroll-behavior: smooth !important; -} - -/* ๐Ÿงฑ 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.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts index 029615c..cbef9e0 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 @@ -import { Component, Input, OnInit, SecurityContext, ChangeDetectorRef } from '@angular/core'; +import { Component, Input, OnInit, SecurityContext, ChangeDetectorRef, ViewEncapsulation } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { ActivatedRoute } from '@angular/router'; import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service'; @@ -8,13 +8,14 @@ import { ToastrService } from 'ngx-toastr'; import * as sha256 from 'crypto-js/sha256'; import SHA256 from 'crypto-js/sha256'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; -import { Download_Css } from './download-css'; import { trigger, transition, style, animate, state } from '@angular/animations'; @Component({ selector: 'app-wireframe-renderer', templateUrl: './wireframe-renderer.component.html', styleUrls: ['./wireframe-renderer.component.scss'], + encapsulation: ViewEncapsulation.Emulated, // This is default; optional to write + animations: [ trigger('fadeIn', [ transition(':enter', [ @@ -471,7 +472,7 @@ HTML Only. No CSS. return resolve(this.promptHashCache[hash]); } - // const enhanced = await this.callLlm(enhancedPrompt); + // const enhanced = await this.callAi(enhancedPrompt); // console.log('enhanced prmpt ',enhanced); // this.promptHashCache[hash] = enhanced; @@ -962,7 +963,7 @@ return new Promise((resolve) => { } // Call LLM - async callLlm(data): Promise { + async callAi(data): Promise { return new Promise((resolve, reject) => { console.log('call Llm Start'); const payload = { @@ -970,7 +971,7 @@ return new Promise((resolve) => { conversationId: '677' }; console.log('query:', payload.query); - this.siteTreeService.callLlm(payload).subscribe({ + this.siteTreeService.callGemini(payload).subscribe({ next: (res) => { console.log('response', res); if (res && res.responseContent) { diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts index 3138254..77ba05b 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts @@ -145,41 +145,222 @@ export class TreeVisualizerComponent { } -// Add these properties to your component class -isLoading = false; -showError = false; + // Add these properties to your component class + isLoading = false; + showError = false; -// Method to handle the enhanced generate flow -generateJsonWithLoading() { - this.isLoading = true; - this.showError = false; + // Method to handle the enhanced generate flow + + generateJsonWithLoading() { + this.isLoading = true; + this.showError = false; + + console.log('๐Ÿ”„ Starting generateJsonWithLoading...'); + + // Call the actual generateJson method + const suffix = `You are a JSON structure generator for website page hierarchies. + + You are a JSON structure generator for website UI and sitemap hierarchy. + + Generate a strictly hierarchical JSON tree that represents the entire page flow of a website. The root of the tree must always be the "Home" page. All other pages (like Login, Sign Up, Projects, Dashboard, etc.) must be nested as subpages using a "Children" key under their logical parent based on the described user flow โ€” not all pages should be flat or at root level. + + Each page must include meaningful UI sections as keys โ€” like "Navbar", "Header Section", "Feature Section", "Form Section", "Footer", etc. + Each section must include a short and clear description of its purpose or content โ€” to assist in frontend UI development. + + Analyze the flow implied in the prompt: + - Pages that are accessed after some action (e.g., "after login", "inside a project", "upon click") must be nested as children. + - Reuse common sections like "Navbar" or "Footer" wherever needed. + - Pages like "Privacy Policy" or "Terms and Conditions" can remain at root or in Footer reference if needed. + + โœ… The following standard pages must always be included with detailed section-level breakdown: + + - **Home**: General overview of the website, with call-to-action, features, testimonials, and a footer. + - **About**: Brief company history, mission/vision, and team member highlights. + - **Services**: List of services offered, with description, icons, or pricing cards. + - **Contact**: Contact form (name, email, message), business info, phone, map. + - **FAQ**: Accordion or expandable list of common questions and answers. + - **Blog**: List of articles or posts, with title, thumbnail, and excerpt. + - **Login**: Form section with input fields for email/username and password, login button, forgot password link. + - **Sign Up**: Form section with full name, email, password, confirm password, sign-up button. + - **Privacy Policy**: Legal text describing how user data is handled. + - **Terms and Conditions**: Legal text outlining site usage policies. + + โŒ Do not include: + - Any explanation before or after the JSON + - Any markdown formatting like \`\`\` or json + - Any natural language response + - Return only pure JSON โ€” no explanation, no headings, no markdown formatting. - // Your existing generateJson logic here - // Replace with your actual API call - setTimeout(() => { - // Success case + + โœ… Output JSON example structure should look like this: + + { + "Home": { + "Navbar": "Top navigation with logo, links to all main pages, and call-to-action button", + "Header Section": "Headline with subheading and call-to-action button", + "Feature Section": "Three features highlighted with icons and descriptions", + "Testimonial Section": "Customer reviews in carousel layout", + "Footer": "Footer with navigation links, social icons, and legal page links", + "Children": { + "About": { + "Header Section": "Intro about company mission and values", + "Team Section": "Photos and bios of core team members" + }, + "Services": { + "Header Section": "List of core services offered", + "Pricing Section": "Cards with service pricing and features" + }, + "Contact": { + "Header Section": "Contact form with name, email, and message fields", + "Map Section": "Google Maps iframe showing location" + }, + ... + } + }, + "Privacy Policy": { + "Content Section": "Full legal description of data usage and user rights" + }, + "Terms and Conditions": { + "Content Section": "Rules and legal terms for using the site or service" + } + }`; + + const payload = { + query: this.rawInputText + ' ' + suffix, + conversationId: '677' + }; + + console.log('๐Ÿš€ Calling LLM with payload:', payload.query); + + this.siteTreeService.callGemini(payload).subscribe({ + next: (res) => { + console.log('โœ… LLM response received:', res); + + if (res && res.responseContent) { + try { + let parsedJson = JSON.parse(res.responseContent); + const topLevelPages = Object.keys(parsedJson); + let pendingCalls = topLevelPages.length; + + // If no pages to process, just complete + if (pendingCalls === 0) { + this.completeGeneration(parsedJson); + return; + } + + topLevelPages.forEach(pageName => { + this.siteTreeService.getDesignLibraryByheader(2, 'template 1', pageName).subscribe({ + next: (designResponse) => { + if (designResponse && Object.keys(designResponse).length > 0) { + console.log(`โœ… Design library found for "${pageName}":`, designResponse.htmljson); + + try { + let raw = designResponse.htmljson; + const parsed = typeof raw === 'string' ? JSON.parse(`{${raw}}`) : raw; + const firstKey = Object.keys(parsed)[0]; + const extractedValue = parsed[firstKey]; + + // Preserve existing Children + const existingPageData = parsedJson[pageName] || {}; + const preservedChildren = existingPageData['Children']; + + // Merge design + preserve Children + parsedJson[pageName] = { + ...extractedValue, + ...(preservedChildren ? { Children: preservedChildren } : {}) + }; + + console.log(`โœ… Merged design for "${pageName}"`); + } catch (parseErr) { + console.warn(`โš ๏ธ Could not parse design library JSON for "${pageName}":`, parseErr); + } + } else { + console.log(`โ„น๏ธ No design library found for "${pageName}"`); + } + + this.checkAndCompleteGeneration(parsedJson, --pendingCalls); + }, + error: (err) => { + console.error(`โŒ Error fetching design library for "${pageName}":`, err); + this.checkAndCompleteGeneration(parsedJson, --pendingCalls); + } + }); + }); + + } catch (err) { + console.error('โŒ Failed to parse LLM JSON:', err); + this.handleGenerationError('Invalid JSON received from AI'); + } + } else { + this.handleGenerationError('No response content received'); + } + }, + error: (err) => { + console.error('โŒ LLM API Error:', err); + this.handleGenerationError('Failed to generate site structure'); + } + }); + } + + // Helper method to check if all calls are complete + private checkAndCompleteGeneration(parsedJson: any, pendingCalls: number) { + if (pendingCalls === 0) { + this.completeGeneration(parsedJson); + } + } + + // Helper method to complete the generation process + private completeGeneration(parsedJson: any) { + this.inputJson = JSON.stringify(parsedJson); + + const updatePayload = { + prompt: this.rawInputText + ' ', + model: this.inputJson + }; + + console.log('โœ… Final merged JSON ready, updating server...'); + + this.siteTreeService.update(this.id, updatePayload).subscribe({ + next: (resp) => { + console.log('โœ… Successfully updated server:', resp); + + // Success - close popup and show results + this.isLoading = false; + this.showPopup = false; + this.activeTab = 'sitemap'; + + // Convert and display the tree + this.convertJson(); + + console.log('๐ŸŽ‰ Generation completed successfully!'); + }, + error: (err) => { + console.error('โŒ Failed to update server:', err); + this.handleGenerationError('Failed to save site structure'); + } + }); + } + + // Helper method to handle errors + private handleGenerationError(message: string) { + console.error('โŒ Generation failed:', message); this.isLoading = false; + this.showError = true; + // Don't close popup so user can retry + } + + // Enhanced close method + closePopup() { this.showPopup = false; - this.activeTab = 'sitemap'; - - // For error case, use this instead: - // this.isLoading = false; - // this.showError = true; - }, 3000); -} + this.isLoading = false; + this.showError = false; + } -// Enhanced close method -closePopup() { - this.showPopup = false; - this.isLoading = false; - this.showError = false; -} - -// Retry method for error state -retryGeneration() { - this.showError = false; - this.generateJsonWithLoading(); -} + // Retry method for error state + retryGeneration() { + this.showError = false; + this.generateJsonWithLoading(); + } convertJson() { try { const parsed = JSON.parse(this.inputJson); @@ -231,6 +412,7 @@ retryGeneration() { generateWireframe() { this.activeTab = 'wireframe'; this.isWireframeLoaded = true; + } getSections(data: any): { title: string, description: string }[] { @@ -335,7 +517,7 @@ retryGeneration() { console.log(' query : ', payload.query) - this.siteTreeService.callLlm(payload).subscribe({ + this.siteTreeService.callGemini(payload).subscribe({ next: (res) => { console.log('llm response ', res)