/*=========================================================================== We Long Live - Custom Stylesheet This file contains all custom styles for the We Long Live website, including typography system, responsive adjustments, and component overrides. Table of Contents: 1. Typography System (5-Level Font Weight + Responsive Sizes) 2. Base Styles & Font Application 3. Logo Responsive Sizing 4. Navigation Styles 5. Hero Section Styles 6. Category Cards 7. About Section 8. Product Section Styles 9. Product Modal Styles 10. Video Section Styles 11. Footer Styles 12. Testimonial Section 13. Spacing Adjustments ===========================================================================*/ /*=========================================================================== 1. Typography System - 5-Level Font Weight Hierarchy ===========================================================================*/ /* Sukhumvit Set Font Family - @font-face declarations */ /* Note: These remain in index.html for performance optimization */ /*--------------------------------------------------------------------------- 5-Level Font Weight System: Level 1 (300): Light - Captions, disclaimers, subtle secondary text Level 2 (400): Regular - Body text, paragraphs, standard content (DEFAULT) Level 3 (500): Medium - Buttons, navigation, emphasized text, labels Level 4 (600): SemiBold - Section headings (h3-h4), card titles, callouts Level 5 (700): Bold - Main headings (h1-h2), hero titles, CTAs Note: Weight 100 (Thin) removed for better Thai text readability ---------------------------------------------------------------------------*/ /* Font Weight Utility Classes */ .fw-light, .font-weight-light { font-weight: 300 !important; } .fw-regular, .font-weight-regular { font-weight: 400 !important; } .fw-medium, .font-weight-medium { font-weight: 500 !important; } .fw-semibold, .font-weight-semibold { font-weight: 600 !important; } .fw-bold, .font-weight-bold { font-weight: 700 !important; } /*--------------------------------------------------------------------------- Responsive Typography Scale Mobile-first approach: base → tablet → desktop Size Mobile Tablet Desktop Usage ------- ------- ------- -------- --------------------------- xs 11px 12px 12px Fine print, labels sm 12px 13px 14px Captions, meta info base 14px 15px 16px Body text (default) md 15px 16px 18px Emphasized content lg 18px 20px 24px Small headings xl 20px 24px 28px Section headings (h3-h4) 2xl 28px 36px 42px Main headings (h1-h2) hero 32px 48px 56px Hero titles, banners ---------------------------------------------------------------------------*/ /* Font Size Utility Classes */ .fs-xs { font-size: 11px; } .fs-sm { font-size: 12px; } .fs-base { font-size: 14px; } .fs-md { font-size: 15px; } .fs-lg { font-size: 18px; } .fs-xl { font-size: 20px; } .fs-2xl { font-size: 28px; } .fs-hero { font-size: 32px; } /* Tablet breakpoint (768px+) */ @media (min-width: 768px) { .fs-xs { font-size: 12px; } .fs-sm { font-size: 13px; } .fs-base { font-size: 15px; } .fs-md { font-size: 16px; } .fs-lg { font-size: 20px; } .fs-xl { font-size: 24px; } .fs-2xl { font-size: 36px; } .fs-hero { font-size: 48px; } } /* Desktop breakpoint (1200px+) */ @media (min-width: 1200px) { .fs-xs { font-size: 12px; } .fs-sm { font-size: 14px; } .fs-base { font-size: 16px; } .fs-md { font-size: 18px; } .fs-lg { font-size: 24px; } .fs-xl { font-size: 28px; } .fs-2xl { font-size: 42px; } .fs-hero { font-size: 56px; } } /*=========================================================================== 2. Base Styles & Font Application ===========================================================================*/ /* Override CSS font variables to use Sukhumvit Set */ :root { --title-font: 'Sukhumvit Set', sans-serif; --body-font: 'Sukhumvit Set', sans-serif; --style-font: 'Sukhumvit Set', sans-serif; } /* Apply Sukhumvit Set font system-wide */ body, h1, h2, h3, h4, h5, h6, p, a, span, .sub-title { font-family: 'Sukhumvit Set', sans-serif !important; } /* Fix letter-spacing for Thai text - Remove excessive spacing */ .sub-title, .hero-style1 .sub-title, .hero-style2 .sub-title, .hero-style3 .sub-title, .hero-style4 .sub-title, .hero-title, .hero-text, .sec-title, .sec-text, .box-title, .box-text, .product-title, .product-text, .testi-card_text, p, span { letter-spacing: 0 !important; } /* Thai Word Breaking Support - Site-Wide */ body, h1, h2, h3, h4, h5, h6, p, span, a, li, .hero-text, .sec-text, .about-text, .box-text, .product-text, .testi-card_text, .newsletter-title, .info-box_text, .widget_title { word-break: keep-all !important; overflow-wrap: break-word !important; word-wrap: break-word !important; hyphens: none !important; -webkit-hyphens: none !important; -moz-hyphens: none !important; } /* Specific fix for newsletter title */ .newsletter-title { white-space: normal !important; line-height: 1.4 !important; } /*=========================================================================== 3. Logo Responsive Sizing ===========================================================================*/ .header-logo img { max-height: 76px; width: auto; } /* Mobile drawer logo - uses footer logo (wider version) */ .mobile-logo img { max-height: 70px; width: auto; } @media (max-width: 575px) { .mobile-logo img { max-height: 60px; } } /* Footer logo - 1.5x bigger (72px * 1.5 = 108px) */ .about-logo img { max-height: 108px; width: auto; transition: transform 0.3s ease; } .about-logo img:hover { transform: scale(1.05); } /* Responsive footer logo */ @media (max-width: 767px) { .about-logo img { max-height: 90px; } } @media (max-width: 575px) { .about-logo img { max-height: 80px; } } /*=========================================================================== 4. Navigation Styles - Enhanced with Active States ===========================================================================*/ /* Navigation text - normal capitalization (no transform) */ .main-menu ul li a, .th-mobile-menu ul li a { text-transform: none !important; } /* Desktop Navigation - Enhanced Font Size & Bold */ .main-menu ul { display: flex; align-items: center; } .main-menu ul li a { position: relative; padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 19.2px !important; /* 120% of default 16px */ font-weight: 700 !important; /* Sukhumvit Set Bold */ font-family: 'Sukhumvit Set', sans-serif !important; } /* Ensure nav container has proper height for vertical centering */ .menu-area { min-height: 90px; display: flex; align-items: center; } /* Tablet Navigation - Enhanced Font Size */ @media (max-width: 1199px) and (min-width: 992px) { .main-menu ul li a { font-size: 18px !important; /* 120% adjusted for tablet */ } } /* Animated underline on hover */ .main-menu ul li a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--theme-color) 0%, #00d404 100%); border-radius: 2px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .main-menu ul li a:hover::after { width: 80%; } /* Active state - full underline with glow */ .main-menu ul li a.active { color: var(--theme-color) !important; font-weight: 600; } .main-menu ul li a.active::after { width: 100%; box-shadow: 0 0 8px rgba(1, 125, 3, 0.5); } /* Mobile menu - Enhanced Font Size & Bold */ .th-mobile-menu ul li a { position: relative; padding-left: 15px; transition: all 0.3s ease; font-size: 21.6px !important; /* 120% of default 18px */ font-weight: 700 !important; /* Sukhumvit Set Bold */ font-family: 'Sukhumvit Set', sans-serif !important; } /* Mobile menu responsive sizes */ @media (max-width: 767px) { .th-mobile-menu ul li a { font-size: 20.4px !important; /* 120% of 17px */ } } @media (max-width: 575px) { .th-mobile-menu ul li a { font-size: 19.2px !important; /* 120% of 16px */ } } .th-mobile-menu ul li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 3px; background: var(--theme-color); border-radius: 2px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .th-mobile-menu ul li a.active { color: var(--theme-color) !important; font-weight: 600; padding-left: 20px; } .th-mobile-menu ul li a.active::before { width: 8px; } /* Mobile Menu Toggle - Perfect Circle Button */ .th-menu-toggle { width: 50px !important; height: 50px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%) !important; border: none !important; color: #ffffff !important; font-size: 18px !important; box-shadow: 0 4px 12px rgba(1, 125, 3, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; padding: 0 !important; } .th-menu-toggle:hover { transform: scale(1.1) rotate(90deg); box-shadow: 0 6px 20px rgba(1, 125, 3, 0.4); } .th-menu-toggle:active { transform: scale(0.95); } .th-menu-toggle i { margin: 0 !important; padding: 0 !important; } /* Hide mobile menu toggle on desktop and tablet (992px and above) */ @media (min-width: 992px) { .th-menu-toggle { display: none !important; } } /* Responsive mobile menu button - Only visible on mobile */ @media (max-width: 991px) { .th-menu-toggle { width: 48px !important; height: 48px !important; font-size: 17px !important; } } @media (max-width: 575px) { .th-menu-toggle { width: 45px !important; height: 45px !important; font-size: 16px !important; } } /*=========================================================================== 5. Hero Section Styles - Reduced Height & Responsive ===========================================================================*/ .th-hero-wrapper.hero-1 { min-height: 205px !important; padding: 25px 0 15px; } @media (min-width: 768px) { .th-hero-wrapper.hero-1 { min-height: 245px !important; padding: 30px 0 20px; } } @media (min-width: 1200px) { .th-hero-wrapper.hero-1 { min-height: 270px !important; padding: 35px 0 25px; } } /* Hero text responsive sizing */ .hero-text { font-size: 14px !important; line-height: 1.7 !important; max-width: 600px; } @media (min-width: 768px) { .hero-text { font-size: 15px !important; } } @media (min-width: 1200px) { .hero-text { font-size: 16px !important; line-height: 1.8 !important; } } /* Hero title - reduced to 50% size */ .hero-title .title1 { font-size: 50% !important; } .hero-title .title2 { font-size: 50% !important; } /* Hero image - 120% bigger */ .hero-1 .hero-img img { transform: scale(1.2); transform-origin: center; } @media (max-width: 1299px) { .hero-1 .hero-img img { transform: scale(1.2); } } @media (max-width: 1199px) { .hero-1 .hero-img img { transform: scale(1.2); } } @media (max-width: 991px) { .hero-1 .hero-img img { transform: scale(1.2); } } /* Product section navigation arrows */ #products-sec .icon-box { display: flex; justify-content: center; gap: 15px; margin-top: 30px; } /*=========================================================================== 6. Category Cards - Rounded Borders & Consistent Spacing ===========================================================================*/ .category-card { border-radius: 20px !important; min-height: 252px !important; /* 90% of 280px */ display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 32px 18px 36px !important; /* 90% of original padding */ margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .category-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .category-card .box-shape { border-radius: 18px !important; } /* Category section responsive spacing */ .category-card .box-title { margin-top: 20px; margin-bottom: 10px; min-height: 30px; } .category-card .box-text { min-height: 50px; font-size: 14px; line-height: 1.6; } /* Category card hover - white text for better visibility on green background */ .category-card:hover .box-text, .category-card:hover .box-title { color: #ffffff !important; } /* Ensure consistent spacing in swiper with increased gap */ .swiper-slide { height: auto !important; padding: 0 12px !important; /* Add horizontal gap between cards */ } @media (max-width: 767px) { .category-card { min-height: 234px !important; /* 90% of 260px */ padding: 27px 14px 32px !important; /* 90% of original padding */ } } /*=========================================================================== 7. About Section - Simple Single Image Layout ===========================================================================*/ .about-img-simple { position: relative; overflow: hidden; } .about-img-simple img { border-radius: 15px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } /* Fix: Prevent any overlays in About section */ #about-sec, #about-sec * { position: relative !important; z-index: auto !important; } #about-sec::before, #about-sec::after, #about-sec *::before, #about-sec *::after { display: none !important; } /* Ensure proper column layout without overlaps */ #about-sec .row { position: relative !important; z-index: 1 !important; } #about-sec .col-lg-6 { position: relative !important; z-index: 2 !important; } /* About section text styling */ #about-sec .sec-title { font-size: 28px; line-height: 1.4; margin-bottom: 25px; } @media (min-width: 768px) { #about-sec .sec-title { font-size: 32px; } } @media (min-width: 1200px) { #about-sec .sec-title { font-size: 36px; } } #about-sec .sec-text { font-size: 15px; color: #666; } @media (min-width: 1200px) { #about-sec .sec-text { font-size: 16px; } } /*=========================================================================== 8. Product Section Styles ===========================================================================*/ /* Product cards inherit from template style.css - no additional styles needed */ /*=========================================================================== 9. Product Modal Styles - Modern & World-Class Design ===========================================================================*/ /* Modal Overlay with Glassmorphism */ .product-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: modalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 20px; } @keyframes modalFadeIn { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(8px); } } /* Premium Modal Container */ .product-modal-content { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); margin: 2% auto; padding: 0; border-radius: 24px; width: 90%; max-width: 650px; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; } /* Product Image Wrapper - Inside White Body (No Green Background) */ .product-modal-image-wrapper { display: flex; justify-content: center; padding: 30px 0 20px; } .product-modal-image-wrapper img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--theme-color); box-shadow: 0 8px 20px rgba(1, 125, 3, 0.2); transition: transform 0.3s ease; } .product-modal-image-wrapper img:hover { transform: scale(1.05); } @keyframes modalSlideUp { from { transform: translateY(100px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Modern Close Button */ .product-modal-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-size: 20px; color: #333; line-height: 1; font-weight: 300; } .product-modal-close:hover { background: var(--theme-color); color: #fff; transform: rotate(90deg) scale(1.1); box-shadow: 0 6px 20px rgba(1, 125, 3, 0.3); } /* Modal Header with Gradient */ .product-modal-content h2 { margin: 0; padding: 35px 60px 25px 40px; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%); color: #fff; font-size: 32px; font-weight: 600; letter-spacing: -0.5px; border-radius: 24px 24px 0 0; position: relative; overflow: hidden; } /* Decorative element on header */ .product-modal-content h2::before { content: ''; position: absolute; top: -50%; right: -10%; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; } /* Modal Body */ .product-modal-content ul { list-style: none; padding: 35px 40px 40px; margin: 0; background: #fff; } /* Premium List Items */ .product-modal-content ul li { padding: 16px 0 16px 50px; position: relative; line-height: 1.7; color: #2c3e50; font-size: 16px; font-weight: 400; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .product-modal-content ul li:last-child { border-bottom: none; } .product-modal-content ul li:hover { padding-left: 55px; color: var(--theme-color); background: rgba(1, 125, 3, 0.03); } /* Modern Checkmark Icon */ .product-modal-content ul li:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: linear-gradient(135deg, var(--theme-color) 0%, #00d404 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(1, 125, 3, 0.2); transition: all 0.3s ease; } .product-modal-content ul li:after { content: "✓"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #fff; font-weight: 700; font-size: 16px; z-index: 1; } .product-modal-content ul li:hover:before { transform: translateY(-50%) rotate(360deg) scale(1.1); } /* Responsive Design */ @media (max-width: 991px) { .product-modal { padding: 15px; } .product-modal-content { margin: 5% auto; max-width: 580px; } .product-modal-image-wrapper { padding: 25px 0 18px; } .product-modal-image-wrapper img { width: 130px; height: 130px; border-width: 3px; } .product-modal-content h2 { font-size: 28px; padding: 30px 55px 22px 35px; } .product-modal-content ul { padding: 30px 35px 35px; } .product-modal-content ul li { font-size: 15px; padding: 14px 0 14px 48px; } .product-modal-content ul li:before { width: 30px; height: 30px; } .product-modal-content ul li:after { left: 8px; font-size: 15px; } } @media (max-width: 767px) { .product-modal { padding: 10px; } .product-modal-content { margin: 8% auto; width: 95%; border-radius: 20px; } .product-modal-image-wrapper { padding: 20px 0 15px; } .product-modal-image-wrapper img { width: 120px; height: 120px; border-width: 3px; } .product-modal-close { width: 36px; height: 36px; top: 15px; right: 15px; font-size: 18px; } .product-modal-content h2 { font-size: 24px; padding: 25px 50px 18px 25px; letter-spacing: -0.3px; border-radius: 20px 20px 0 0; } .product-modal-content ul { padding: 25px 25px 30px; } .product-modal-content ul li { font-size: 14px; padding: 12px 0 12px 42px; } .product-modal-content ul li:hover { padding-left: 45px; } .product-modal-content ul li:before { width: 28px; height: 28px; } .product-modal-content ul li:after { left: 7px; font-size: 14px; } } @media (max-width: 480px) { .product-modal-image-wrapper { padding: 18px 0 12px; } .product-modal-image-wrapper img { width: 100px; height: 100px; border-width: 3px; } .product-modal-content h2 { font-size: 22px; padding: 22px 45px 16px 20px; } .product-modal-content ul { padding: 20px 20px 25px; } .product-modal-content ul li { font-size: 13px; padding: 10px 0 10px 38px; } .product-modal-content ul li:before { width: 26px; height: 26px; } .product-modal-content ul li:after { left: 6px; font-size: 13px; } } /*=========================================================================== 10. Video Section Styles ===========================================================================*/ .video-box1 { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .video-box1:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .video-box1 .video-img { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ background-color: #000; overflow: hidden; } .video-box1 .video-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .video-box1 .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; --icon-size: 80px; cursor: pointer; } .video-box1 .play-btn i { display: inline-block; width: var(--icon-size, 80px); height: var(--icon-size, 80px); line-height: var(--icon-size, 80px); text-align: center; font-size: 28px; color: #fff; background-color: var(--theme-color, #4CAF50); border-radius: 50%; transition: all 0.4s ease; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .video-box1 .play-btn:hover i { background-color: #fff; color: var(--theme-color, #4CAF50); transform: scale(1.1); } .video-box1 .play-btn::before, .video-box1 .play-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--icon-size, 80px); height: var(--icon-size, 80px); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); animation: ripple 2s ease-out infinite; } .video-box1 .play-btn::after { animation-delay: 1s; } @keyframes ripple { 0% { width: var(--icon-size, 80px); height: var(--icon-size, 80px); opacity: 1; } 100% { width: calc(var(--icon-size, 80px) * 1.8); height: calc(var(--icon-size, 80px) * 1.8); opacity: 0; } } /* Video Section - Responsive */ @media (max-width: 991px) { .video-box1 .play-btn { --icon-size: 70px; } .video-box1 .play-btn i { font-size: 24px; } } @media (max-width: 767px) { .video-box1 { border-radius: 15px; } .video-box1 .video-img img { border-radius: 15px; } .video-box1 .play-btn { --icon-size: 60px; } .video-box1 .play-btn i { font-size: 20px; } } /* Video section headings - dark grey almost black */ #video-sec .sub-title, #video-sec .sec-title { color: #1a1a1a !important; } /*=========================================================================== 11. Footer Styles - Enhanced Typography & Social Media ===========================================================================*/ /* Footer text - dark grey almost black with enhanced sizes */ .th-widget-about .about-text { color: #1a1a1a !important; font-size: 17px !important; line-height: 1.7 !important; } .copyright-wrap .copyright-text { color: #1a1a1a !important; } .copyright-wrap .copyright-text a { color: #1a1a1a !important; } /* Footer widget titles - bigger and bolder */ .footer-wrapper .widget_title { color: #1a1a1a !important; font-size: 22px !important; font-weight: 600 !important; margin-bottom: 25px !important; } /* Footer navigation and contact links - bigger sizes */ .footer-wrapper .menu li a { color: #1a1a1a !important; font-size: 18px !important; font-weight: 500 !important; transition: all 0.3s ease; } .footer-wrapper .menu li a:hover { color: var(--theme-color) !important; padding-left: 5px; } .footer-wrapper .info-box_text, .footer-wrapper .info-box_link { color: #1a1a1a !important; font-size: 17px !important; font-weight: 500 !important; } .footer-wrapper .info-box_link:hover { color: var(--theme-color) !important; } /* Footer Social Media - Green Circular Icons (75% of previous size) */ .th-social { display: flex; gap: 15px; margin-top: 20px; } .th-social a { display: flex; align-items: center; justify-content: center; width: 60px !important; height: 60px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%); color: #ffffff !important; font-size: 24px !important; text-decoration: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(1, 125, 3, 0.3), 0 0 0 0 rgba(1, 125, 3, 0.2); position: relative; overflow: hidden; } .th-social a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #00d404 0%, var(--theme-color) 100%); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } .th-social a i { position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .th-social a:hover { transform: translateY(-5px) scale(1.08); box-shadow: 0 10px 30px rgba(1, 125, 3, 0.4), 0 0 0 4px rgba(1, 125, 3, 0.15); } .th-social a:hover::before { opacity: 1; } .th-social a:hover i { transform: rotate(360deg) scale(1.1); } .th-social a:active { transform: translateY(-2px) scale(1.05); } /* Responsive footer typography */ @media (max-width: 991px) { .footer-wrapper .widget_title { font-size: 20px !important; } .footer-wrapper .menu li a { font-size: 17px !important; } .footer-wrapper .info-box_text, .footer-wrapper .info-box_link { font-size: 16px !important; } .th-widget-about .about-text { font-size: 16px !important; } .th-social a { width: 53px !important; height: 53px !important; font-size: 21px !important; } } @media (max-width: 767px) { .footer-wrapper .widget_title { font-size: 19px !important; } .footer-wrapper .menu li a { font-size: 16px !important; } .footer-wrapper .info-box_text, .footer-wrapper .info-box_link { font-size: 15px !important; } .th-widget-about .about-text { font-size: 15px !important; } .th-social a { width: 49px !important; height: 49px !important; font-size: 20px !important; } } @media (max-width: 575px) { .footer-wrapper .widget_title { font-size: 18px !important; } .footer-wrapper .menu li a { font-size: 15px !important; } .footer-wrapper .info-box_text, .footer-wrapper .info-box_link { font-size: 14px !important; } .th-widget-about .about-text { font-size: 14px !important; } .th-social { gap: 12px; } .th-social a { width: 45px !important; height: 45px !important; font-size: 18px !important; } } /* Footer Contact Icons - Green Circular Design (Matching Social Icons) */ .info-box { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .info-box_icon { display: flex; align-items: center; justify-content: center; width: 60px !important; height: 60px !important; min-width: 60px; border-radius: 50% !important; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%); color: #ffffff !important; font-size: 24px !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(1, 125, 3, 0.3), 0 0 0 0 rgba(1, 125, 3, 0.2); position: relative; overflow: hidden; } .info-box_icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #00d404 0%, var(--theme-color) 100%); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } .info-box_icon i { position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .info-box:hover .info-box_icon { transform: translateY(-5px) scale(1.08); box-shadow: 0 10px 30px rgba(1, 125, 3, 0.4), 0 0 0 4px rgba(1, 125, 3, 0.15); } .info-box:hover .info-box_icon::before { opacity: 1; } .info-box:hover .info-box_icon i { transform: rotate(360deg) scale(1.1); } .info-box:active .info-box_icon { transform: translateY(-2px) scale(1.05); } /* Contact icon responsive sizes (matching social icons) */ @media (max-width: 991px) { .info-box_icon { width: 53px !important; height: 53px !important; min-width: 53px; font-size: 21px !important; } } @media (max-width: 767px) { .info-box_icon { width: 49px !important; height: 49px !important; min-width: 49px; font-size: 20px !important; } .info-box { gap: 12px; margin-bottom: 18px; } } @media (max-width: 575px) { .info-box_icon { width: 45px !important; height: 45px !important; min-width: 45px; font-size: 18px !important; } .info-box { gap: 10px; margin-bottom: 15px; } } /* Footer Layout - Centered Sections with Gap */ .footer-wrapper .row.justify-content-center { gap: 40px; } .footer-wrapper .row.justify-content-center > .col-md-6.col-xl-auto { flex: 0 0 auto; width: auto; max-width: 450px; } /* Center-align content within both sections on desktop */ @media (min-width: 992px) { .th-widget-about { text-align: center; } .th-widget-about .th-social { justify-content: center; } .th-widget-contact { display: flex; flex-direction: column; align-items: flex-start; } .footer-wrapper .widget_title { text-align: left; } } /* Adjust gap for tablet and mobile */ @media (max-width: 991px) { .footer-wrapper .row.justify-content-center { gap: 30px; } } @media (max-width: 767px) { .footer-wrapper .row.justify-content-center { gap: 25px; } .footer-wrapper .row.justify-content-center > .col-md-6.col-xl-auto { max-width: 100%; } } /*=========================================================================== 12. Testimonial Section - Text Cropping Fix & Reduced Spacing ===========================================================================*/ /* Reduce excessive top and bottom padding/margin for testimonial section */ #testimonial-sec { padding-top: 60px !important; padding-bottom: 60px !important; } @media (min-width: 768px) { #testimonial-sec { padding-top: 70px !important; padding-bottom: 70px !important; } } @media (min-width: 1200px) { #testimonial-sec { padding-top: 80px !important; padding-bottom: 80px !important; } } /* Fix: Override absolute positioning to prevent cropping */ .shape-mockup.testi-shape1 { position: relative !important; left: auto !important; top: auto !important; } .testi-shape-gallery { position: relative; max-width: 500px; margin: 0 auto 30px; padding: 0 20px; } .testi-shape-gallery .swiper-slide img { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } @media (max-width: 767px) { .testi-shape-gallery { max-width: 90%; padding: 0 15px; } } /*--------------------------------------------------------------------------- Testimonial Text Cropping Fix ---------------------------------------------------------------------------*/ /* Fix negative margin that causes text cropping */ .testi-card_text { margin: 0 0 25px 0 !important; /* Remove negative top margin */ line-height: 1.8 !important; /* Increase line-height for Thai text */ padding: 10px 0 !important; /* Add padding to prevent cropping */ overflow: visible !important; /* Ensure text is not clipped */ } /* Ensure testimonial card has adequate padding */ .testi-card { padding: 30px 25px !important; overflow: visible !important; } /* Adjust spacing for testimonial profile */ .testi-card_profile { margin-top: 20px !important; } /* Responsive adjustments for testimonial text */ @media (max-width: 767px) { .testi-card_text { font-size: 20px !important; line-height: 1.75 !important; padding: 8px 0 !important; } .testi-card { padding: 25px 20px !important; } } @media (max-width: 575px) { .testi-card_text { font-size: 18px !important; line-height: 1.7 !important; padding: 6px 0 !important; } .testi-card { padding: 20px 15px !important; } } /*=========================================================================== 13. Spacing Adjustments - Responsive Padding ===========================================================================*/ @media (max-width: 991px) { .space { padding-top: 60px; padding-bottom: 60px; } .space-top { padding-top: 60px; } } @media (max-width: 767px) { .space { padding-top: 50px; padding-bottom: 50px; } .space-top { padding-top: 50px; } #about-sec .mb-40 { margin-bottom: 30px !important; } } /*=========================================================================== 14. Modern Gradient Enhancements - Newsletter, Copyright, Buttons ===========================================================================*/ /*--------------------------------------------------------------------------- Newsletter Section - Modern Glassmorphism Design ---------------------------------------------------------------------------*/ .newsletter-wrap { position: relative; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%) !important; padding: 50px 60px !important; border-radius: 20px !important; margin-bottom: 0 !important; box-shadow: 0 20px 60px rgba(1, 125, 3, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; overflow: hidden; } /* Decorative overlay element on newsletter */ .newsletter-wrap::before { content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; pointer-events: none; } .newsletter-wrap::after { content: ''; position: absolute; bottom: -30%; left: -5%; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; } /* Newsletter title styling */ .newsletter-wrap .newsletter-title { color: #ffffff !important; font-weight: 600 !important; font-size: 32px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); letter-spacing: -0.5px !important; position: relative; z-index: 2; } /* Newsletter form enhancements */ .newsletter-wrap .newsletter-form { position: relative; z-index: 2; } .newsletter-wrap .form-control { background: rgba(255, 255, 255, 0.95) !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-radius: 12px !important; padding: 16px 20px !important; font-size: 15px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .newsletter-wrap .form-control:focus { background: #ffffff !important; border-color: rgba(255, 255, 255, 0.8) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .newsletter-wrap .form-control::placeholder { color: #888; } /* Modern Subscribe Button (style6 in newsletter) */ .newsletter-wrap .th-btn.style6 { background: #ffffff !important; color: var(--theme-color) !important; border: none !important; padding: 16px 36px !important; font-weight: 600 !important; font-size: 16px !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 255, 255, 0.5); position: relative; overflow: hidden; } .newsletter-wrap .th-btn.style6::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #00d404 0%, var(--theme-color) 100%); opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .newsletter-wrap .th-btn.style6:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(255, 255, 255, 0.3); color: #ffffff !important; } .newsletter-wrap .th-btn.style6:hover::before { opacity: 1; } /* Newsletter responsive design */ @media (max-width: 991px) { .newsletter-wrap { padding: 45px 50px !important; } .newsletter-wrap .newsletter-title { font-size: 28px !important; } } @media (max-width: 767px) { .newsletter-wrap { padding: 40px 30px !important; border-radius: 16px !important; } .newsletter-wrap .newsletter-title { font-size: 24px !important; margin-bottom: 20px; } .newsletter-wrap::before { width: 200px; height: 200px; } } @media (max-width: 480px) { .newsletter-wrap { padding: 35px 25px !important; } .newsletter-wrap .newsletter-title { font-size: 22px !important; } .newsletter-wrap .form-control { padding: 14px 18px !important; } .newsletter-wrap .th-btn.style6 { padding: 14px 28px !important; font-size: 15px !important; } } /*--------------------------------------------------------------------------- Copyright Bar - Modern Gradient Design ---------------------------------------------------------------------------*/ .copyright-wrap { background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%) !important; padding: 25px 0 !important; position: relative; overflow: hidden; } /* Decorative elements on copyright bar */ .copyright-wrap::before { content: ''; position: absolute; top: -50%; left: 10%; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; } .copyright-wrap::after { content: ''; position: absolute; bottom: -50%; right: 15%; width: 180px; height: 180px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; } /* Override previous dark grey styling with white for gradient background */ .copyright-wrap .copyright-text { color: rgba(255, 255, 255, 0.95) !important; font-size: 15px; font-weight: 400; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; } .copyright-wrap .copyright-text a { color: #ffffff !important; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; position: relative; } .copyright-wrap .copyright-text a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: rgba(255, 255, 255, 0.8); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .copyright-wrap .copyright-text a:hover { color: #ffffff !important; transform: translateY(-1px); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .copyright-wrap .copyright-text a:hover::after { width: 100%; } /* Copyright icon styling */ .copyright-wrap .copyright-text i { color: rgba(255, 255, 255, 0.9); margin: 0 4px; } /* Copyright responsive */ @media (max-width: 767px) { .copyright-wrap { padding: 22px 0 !important; } .copyright-wrap .copyright-text { font-size: 14px; } } @media (max-width: 480px) { .copyright-wrap { padding: 20px 0 !important; } .copyright-wrap .copyright-text { font-size: 13px; } } /*--------------------------------------------------------------------------- Global Button Enhancements - Consistent Gradient Design ---------------------------------------------------------------------------*/ /* Primary button gradient styling */ .th-btn { background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%) !important; border: none !important; color: #ffffff !important; font-weight: 600 !important; padding: 16px 32px; border-radius: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(1, 125, 3, 0.25), 0 0 0 0 rgba(1, 125, 3, 0.2); position: relative; overflow: hidden; } /* Gradient overlay for hover effect */ .th-btn::before { background: linear-gradient(135deg, #00d404 0%, var(--theme-color) 100%) !important; opacity: 0; } .th-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(1, 125, 3, 0.35), 0 0 0 4px rgba(1, 125, 3, 0.15); color: #ffffff !important; } .th-btn:hover::before { opacity: 1; } /* Icon inside button */ .th-btn i { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .th-btn:hover i { transform: translateX(4px); } /* Active state */ .th-btn:active, .th-btn.active { transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 15px rgba(1, 125, 3, 0.3), 0 0 0 3px rgba(1, 125, 3, 0.1); } /* Preloader button - keep simple */ .preloader .th-btn { background: transparent !important; border: 2px solid #ffffff !important; box-shadow: none; } .preloader .th-btn:hover { background: #ffffff !important; color: var(--theme-color) !important; transform: scale(1.05); } /* Small button variant */ .th-btn.btn-sm { padding: 12px 24px; font-size: 14px; } /* Button responsive */ @media (max-width: 767px) { .th-btn { padding: 14px 28px; font-size: 15px; } .th-btn.btn-sm { padding: 11px 20px; font-size: 13px; } } @media (max-width: 480px) { .th-btn { padding: 13px 24px; font-size: 14px; } .th-btn:hover { transform: translateY(-2px) scale(1.03); } } /*=========================================================================== 15. Review Modal & View Review Button Styles ===========================================================================*/ /* View Full Review Button in Testimonial Cards */ .view-review-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%); color: #ffffff !important; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 3px 10px rgba(1, 125, 3, 0.2); } .view-review-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 18px rgba(1, 125, 3, 0.3); } .view-review-btn i { font-size: 13px; } /* Review Image Modal */ .review-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: modalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 20px; } /* Review Modal Content Container */ .review-modal-content { position: relative; margin: 3% auto; max-width: 900px; width: 95%; animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Review Image Wrapper */ .review-modal-image { position: relative; background: #ffffff; border-radius: 16px; padding: 20px; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; overflow: hidden; } .review-modal-image img { width: 100%; height: auto; display: block; border-radius: 12px; max-height: 80vh; object-fit: contain; } /* Review Modal Close Button */ .review-modal-close { position: absolute; top: -15px; right: -15px; width: 45px; height: 45px; background: linear-gradient(135deg, var(--theme-color) 0%, #019803 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px rgba(1, 125, 3, 0.4); font-size: 24px; color: #ffffff; line-height: 1; font-weight: 300; border: 3px solid #ffffff; } .review-modal-close:hover { transform: rotate(90deg) scale(1.15); box-shadow: 0 8px 28px rgba(1, 125, 3, 0.5); background: #ffffff; color: var(--theme-color); } /* Responsive Review Modal */ @media (max-width: 991px) { .review-modal { padding: 15px; } .review-modal-content { margin: 5% auto; width: 95%; } .review-modal-image { padding: 15px; } .review-modal-close { width: 42px; height: 42px; font-size: 22px; top: -12px; right: -12px; } } @media (max-width: 767px) { .review-modal { padding: 10px; } .review-modal-content { margin: 8% auto; width: 98%; } .review-modal-image { padding: 12px; border-radius: 12px; } .review-modal-image img { border-radius: 8px; max-height: 70vh; } .review-modal-close { width: 38px; height: 38px; font-size: 20px; top: -10px; right: -10px; border-width: 2px; } .view-review-btn { padding: 7px 14px; font-size: 13px; } } @media (max-width: 480px) { .review-modal-content { margin: 10% auto; } .review-modal-image { padding: 10px; } .review-modal-image img { max-height: 65vh; } .review-modal-close { width: 35px; height: 35px; font-size: 18px; top: -8px; right: -8px; } .view-review-btn { padding: 6px 12px; font-size: 12px; } .view-review-btn i { font-size: 12px; } } /*=========================================================================== End of Custom Styles ===========================================================================*/