/* ======================================================================== */ /* Marko - Digital Marketing Agency HTML5 Template */ /* ======================================================================== */ /* ======================================================================== COLOR PALETTE & TYPOGRAPHY GUIDE ======================================================================== Project: Marko HTML5 Template Color Scheme: Dark Mode with Purple Accent Font Family: Plus Jakarta Sans ======================================================================== */ /* ------------------------------------------------------------------------ COLOR CODES BREAKDOWN ------------------------------------------------------------------------ */ /* === PRIMARY COLORS === --primary: #D1D1D1; /* Light Gray - Main text color for headings --secondary: #040404; /* Almost Black - Main background color /* === TEXT COLORS === --text-color: #8B8B8B; /* Medium Gray - Body text & paragraphs --text-color-2: #040404; /* Dark - Alternative text (uses secondary) /* === ACCENT COLORS === --accent-color: #C82AEF; /* Purple - Primary accent (buttons, links, highlights) --accent-color-2: #FFFFFF; /* White - Secondary accent --accent-color-3: #1F1F1F; /* Dark Gray - Card backgrounds, borders --accent-color-4: #0E0E0E; /* Very Dark Gray - Deeper backgrounds --accent-color-5: #0404047D; /* Black 49% opacity - Overlays --accent-color-6: #C82AEF85; /* Purple 52% opacity - Subtle highlights --accent-color-7: #FFFFFF8C; /* White 55% opacity - Light mode only /* === UTILITY COLORS === --star-color: #EFBC2A; /* Gold/Yellow - Rating stars --error-color: #E63946; /* Red - Error states & warnings /* === TRANSPARENT VARIANTS === --accent-transparent: #00000000; /* Fully transparent --accent-transparent-2: #00000073; /* Black 45% opacity /* === BOX SHADOWS (Purple Glow Effect) === --box-shadow-top-left: -3px -3px 7px 0px rgba(200, 42, 239, 0.44); --box-shadow-bottom-right: 3px 3px 7px 0px rgba(200, 42, 239, 0.44); --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(200, 42, 239, 0.44); --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(200, 42, 239, 0.44); */ /* ------------------------------------------------------------------------ LIGHT MODE COLOR OVERRIDES ------------------------------------------------------------------------ */ /* Apply class .lightmode to body for light theme .lightmode { --primary: #1F1F1F; /* Dark Gray - Text becomes dark --secondary: #FFFAFA; /* Snow White - Background becomes light --text-color: #4A4A4A; /* Dark Gray - Paragraph text --accent-color: #C82AEF; /* Purple - Stays the same --accent-color-2: #000000; /* Black - Inverted from white --accent-color-3: #E3CAFF; /* Light Purple - Lighter backgrounds --accent-color-4: #F5F5F5; /* Very Light Gray --accent-color-5: #FFFFFF7D; /* White 49% opacity --accent-color-6: #C82AEF33; /* Purple 20% opacity --accent-color-7: #FFFFFF8C; /* White 55% opacity --star-color: #EFBC2A; /* Gold - Stays the same --error-color: #E63946; /* Red - Stays the same } */ /* ------------------------------------------------------------------------ TYPOGRAPHY SYSTEM ------------------------------------------------------------------------ */ /* === FONT FAMILY === */ /* --global-font: "Plus Jakarta Sans", sans-serif; */ /* ------------------------------------------------------------------------ USAGE EXAMPLES ------------------------------------------------------------------------ */ /* HEADINGS: h1 - Hero titles, main page headers (100px) h2 - Section titles (64px) h3 - Subsection titles, card headers (46px) h4 - Component titles (28px) h5 - Small headers (24px) h6 - Tiny headers, labels (20px) COLORS WHERE TO USE: --primary: All headings (h1-h6), main content text --secondary: Page background --text-color: Paragraphs, descriptions, body text --accent-color: Buttons, links, highlights, hover states --accent-color-2: Alternative text on dark backgrounds --accent-color-3: Card backgrounds, subtle borders --accent-color-4: Deeper section backgrounds --star-color: Rating systems, special icons --error-color: Form errors, warning messages ANIMATION SPEEDS: --animation-fast: Button hover, quick transitions --animation-normal: Modal open/close, card animations --animation-slow: Page loaders, hero animations */ /* ------------------------------------------------------------------------ HEX TO RGBA CONVERSION REFERENCE ------------------------------------------------------------------------ */ /* #C82AEF85 = rgba(200, 42, 239, 0.52) // Purple 52% #0404047D = rgba(4, 4, 4, 0.49) // Black 49% #00000073 = rgba(0, 0, 0, 0.45) // Black 45% #FFFFFF8C = rgba(255, 255, 255, 0.55) // White 55% #C82AEF33 = rgba(200, 42, 239, 0.20) // Purple 20% */ /* ------------------------------------------------------------------------ COLOR CONTRAST RATIOS (WCAG AA Compliance) ------------------------------------------------------------------------ */ /* ✓ --primary (#D1D1D1) on --secondary (#040404) = 15.8:1 (Excellent) ✓ --text-color (#8B8B8B) on --secondary (#040404) = 7.2:1 (Good) ✓ --accent-color (#C82AEF) on --secondary (#040404) = 6.5:1 (Good) ⚠ Check contrast when using light backgrounds Recommended minimum: - Large text (18px+): 3:1 ratio - Normal text: 4.5:1 ratio - Enhanced: 7:1 ratio */ /* ======================================================================== TABLE OF CONTENTS - MARKO CSS STRUCTURE (1-54) ======================================================================== 01. Import Vendor - Font Family, Bootstrap, FontAwesome, Brands, Regular, Solid, Swiper 02. Root Variables 2.1 Colors Variables 2.2 Font Variables 2.3 Lightmode variable 03. Keyframes Animations - @keyframes load, ripple, and fade 04. Base Styles - Global element styling (*, body, h1-h6, button, a, p, ul) 05. Global Layout Styles - Section, Hero Container, Section Banners, Section 404, Section Partner, Section Guide, Section Footer 06. Accent Color - Accent color utility classes 07. Form Layout Components 7.1 Form Layout - Form wrapper, form layout, input, textarea, select styles 7.2 Validation Styles - Form validation and error states 08. Navbar - Navigation bar styling and responsive behavior 09. Sidebar - Sidebar menu and navigation components 10. Content Info Sidebar - Information sidebar content styling 11. Newsletter Form - Newsletter section and form elements 12. Button - Button styling and states (primary, secondary, hover effects) 13. Banner Video Container - Video banner wrapper and container styles 14. Banner Components 14.1 Banner Layout - Hero banner layout and styling 14.2 Banner Layout 404 - 404 error page banner styling 15. Footer - Main footer wrapper and container styling 16. Digital Process - Digital process section components 17. Heading Components 17.1 Title Heading - Heading typography and styling 17.2 Testimonial Reviewer - Testimonial reviewer card styling 18. Overlay - Modal and overlay components 19. Info Sidebar Overlay - Information sidebar overlay styling 20. Custom Spacer Components - Custom spacing and divider elements 21. Text Components 21.1 Text 404 - 404 error text styling 22. Card Components - Card layout and styling 23. About Components - About section cards and content 24. Expertise Components - Expertise section cards and styling 25. Partner Components - Partner section styling 26. Partnership Components - Partnership cards and layout 27. (Reserved) 28. Case Studies Components - Case studies cards and content layout 29. Service Components & Team Components 29.1 Service Components - Service cards styling 29.2 Team Components - Team member cards and profiles 30. Contact Components - Contact section cards and forms 31. Blog Components - Blog post cards and article styling 32. Pricing Components - Pricing tables and cards 33. Core Benefits - Benefits list and styling 34. Guide Components - Guide banner and content styling 35. Underline Components - Decorative underlines and dividers 36. (Reserved) 37. Social Team Components & Testimonial Components 37.1 Social Team Components - Social links for team members 37.2 Testimonial Components - Testimonial cards and styling 38. Newsletter Components - Newsletter signup and form styling 39. Breadcrumb Components - Breadcrumb navigation styling 40. Icon Components 40.1 Icon Components - General icon styling 40.2 Stars - Rating stars styling 40.3 Social Icons Components - Social media icons 40.4 Social Container - Social links container 40.5 Social Footer Container - Footer social links 41. Counter Text & List Style 41.1 Counter Text - Counter/statistic text styling 41.2 List Style - List styles (service list, check list, icon list) 42. (Reserved) 43. Link Wrapper - Link wrapper and hover effects 44. Choose Us Components - Why choose us section cards 45. Image Container Components - Image containers and avatar styling 46. Request Loader - Loading spinner and animation 47. Modal Components - Modal dialog and overlay styling 48. Detail List - Detailed list items styling 49. Accordion Components - FAQ accordion and expandable sections 50. Maps Components - Google Maps and map styling 51. Single Service Components - Service detail page styling 52. Animation Component 53.1 Animation Init - Animation initialization 53.2 Animation Duration - Animation class duration 53.2 Animation Delay - Animation class delay 53. CustomText Container Components - Custom text container and heading layouts 54. Footer Components 54.1 Footer Layout - Main footer structure 54.2 Footer List - Footer links list 54.3 Contact List - Footer contact information 54.4 Footer Logo Container - Logo area in footer 54.5 Footer Quick Links - Quick navigation links 54.6 Footer Services Container - Services section in footer 54.7 Footer Contact Container - Contact details in footer 54.8 Copyright Container - Copyright and legal section 54.9 Legal Link - Legal links styling 54.10 Footer Spacer - Footer spacing and dividers 55. Media Queries & Responsive Styles 55.1 Tablet Responsive (@media max-width: 991.98px) - Tablet and landscape phone breakpoints - Font scaling, layout adjustments, responsive components 55.2 Mobile Responsive (@media max-width: 767.98px) - Mobile phone breakpoints - Font scaling, responsive components, mobile layouts 55.3 Tablet Spacing Responsive (@media min-width: 991.98px) - Flex, grid, and spacing utilities for tablets (gspace, grid-spacer classes) 55.4 Mobile Spacing Responsive (@media min-width: 767.98px) - Flex, grid, and spacing utilities for mobile (gspace, grid-spacer classes) ======================================================================== /* ================== 01. Import Vendor ================== */ @import url('../css/vendor/font-family-plus-jakarta-sans.css'); @import url('../css/vendor/bootstrap.min.css'); @import url('../css/vendor/fontawesome.min.css'); @import url('../css/vendor/brands.css'); @import url('../css/vendor/regular.css'); @import url('../css/vendor/solid.css'); @import url('../css/vendor/swiper-bundle.min.css'); /* ================== 02 Root Variables ================== */ :root{ /* 2.1 Colors Variables */ --primary: #D1D1D1; --secondary: #040404; --text-color: #8B8B8B; --text-color-2: var(--secondary); --accent-color: #C82AEF; --accent-color-2: #FFFFFF; --accent-color-3: #1F1F1F; --accent-color-4: #0E0E0E; --accent-color-5: #0404047D; --accent-color-6: #C82AEF85; --star-color: #EFBC2A; --error-color: #e63946; --accent-transparent: #00000000; --accent-transparent-2: #00000073; --box-shadow-top-left: -3px -3px 7px 0px rgba(200, 42, 239, 0.44); --box-shadow-bottom-right: 3px 3px 7px 0px rgba(200, 42, 239, 0.44); --box-shadow-top-left-wide: -3px -3px 10px 0px rgba(200, 42, 239, 0.44); --box-shadow-bottom-right-wide: 3px 3px 10px 0px rgba(200, 42, 239, 0.44); /* 2.2 Font Variables */ --global-font: "Plus Jakarta Sans", sans-serif; /* 2.3 Animation Duration Presets */ --anim-duration-fast: 0.8s; --anim-duration-normal: 1.1s; --anim-duration-slow: 1.6s; /* 2.4 Animation Delay Presets */ --anim-delay-none: 0s; --anim-delay-sm: 0.25s; --anim-delay-md: 0.45s; } /* 2.3 Lightmode variable */ .lightmode{ --primary: #1F1F1F; --secondary: #FFFAFA; --text-color: #4A4A4A; --accent-color: #C82AEF; --accent-color-2: #000000; --accent-color-3: #e3caff; --accent-color-4: #f5f5f5; --accent-color-5: #FFFFFF7D; --accent-color-6: #C82AEF33; --accent-color-7: #FFFFFF8C; --star-color: #EFBC2A; --error-color: #E63946; } /* ================== 03. Keyframes Animations ================== */ @property --progress { syntax: ''; inherits: true; initial-value: 0; } @keyframes load { to { --progress: var(var(--value)) } } @keyframes ripple { from { opacity: 1; transform: scale3d(1, 1, 1); transform-origin: center; border-width: 0px; } to { opacity: 0; transform: scale3d(1.7, 1.7, 1.8); transform-origin: center; border-width: 13px; } } @media (prefers-reduced-motion: reduce) { .animation-box { animation: none !important; opacity: 1 !important; transform: none !important; } } /* keyframes Animation */ @keyframes fade-in { from {opacity:0;} to {opacity:1;} } @keyframes fade-up { from {opacity:0; transform:translateY(80px);} to {opacity:1; transform:translateY(0);} } @keyframes fade-down { from {opacity:0; transform:translateY(-80px);} to {opacity:1; transform:translateY(0);} } @keyframes fade-left { from {opacity:0; transform:translateX(120px);} to {opacity:1; transform:translateX(0);} } @keyframes fade-right{ from {opacity:0; transform:translateX(-120px);} to {opacity:1; transform:translateX(0);} } /* ================== 04. Base Styles ================== */ *{ padding: 0; margin: 0; box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } body{ background-color: var(--secondary); font-family: var(--global-font); color: var(--primary); transition: all 0.3s ease; position: relative; z-index: 0; } body::before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url('../image/Line-Background-4.png'); background-position: center center; background-repeat: repeat; background-size: contain; opacity: 1; z-index: -1; } body.lightmode::before { opacity: 0; } body.lightmode .keep-dark { --primary: #D1D1D1; --secondary: #040404; --text-color: #8B8B8B; --accent-color: #C82AEF; --accent-color-2: #FFFFFF; --accent-color-3: #1F1F1F; --accent-color-4: #0E0E0E; --accent-color-5: #0404047D; --accent-color-6: #C82AEF85; --accent-color-7: #FFFFFF8C; --star-color: #EFBC2A; --error-color: #e63946; } h1, .heading-xl{ font-size: 100px; line-height: 1.3em; } h2, .heading-lg{ font-size: 64px; line-height: 1.2em; } h3, .heading-md { font-size: 46px; line-height: 1.2em; } h4, .heading-sm { font-size: 28px; line-height: 1.5em; } h5, .heading-xs { font-size: 24px; line-height: 1.5em; } h6, .heading-xxs { font-size: 20px; line-height: 1.5em; } h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0; } button, a{ font-size: 16px; color: var(--accent-color); text-decoration: none; font-weight: 600; } p { font-size: 18px; margin-bottom: 14.4px; font-weight: 500; color: var(--text-color); } ul{ list-style: none; } /* ================== 05. Global Layout Styles ================== */ .section { padding: 120px 20px 120px 20px; } .hero-container { max-width: 1280px; margin-right: auto; margin-left: auto; width: 100%; } .section-banner{ padding: 0px 30px 0px 30px; } .tg-old-hero-backup{ display: none !important; } .section-404{ padding: 30px 30px 30px 30px; } .section-partner{ padding: 0px 20px 0px 20px; } .section-guide{ padding: 0px 30px 0px 30px; } .section404{ display: flex; flex-direction: column; gap: 1em; min-height: 900px; justify-content: center; align-items: center; text-align: center; justify-self: center; width: 50%; padding: 4em 1em 4em 1em; } .section-footer{ padding: 0px 30px 30px 30px; } /* ================== 06. Accent Color ================== */ .accent-color { color: var(--accent-color); } /* ================== 07. Form Layout Components ================== */ /* 7.1 Form Layout */ .form-layout-wrapper{ display: flex; border-radius: 25px 25px 25px 25px;; overflow: hidden; flex-direction: column; padding: 2px 2px 2px 2px; width: 100%; height: 100%; position: relative; z-index: 1; } .form-layout-wrapper::before{ content: ''; position: absolute; opacity: 0.5; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 100%); width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .form-layout{ width: 100%; height: 100%; background-color: transparent; background-image: radial-gradient(at bottom center, var(--accent-color-3), var(--accent-color-4) 50%); display: flex; flex-direction: column; justify-content: center; gap: 30px 30px; border: 1px solid var(--accent-color-3); padding: 45px 30px 45px 30px; } .form{ display: flex; flex-direction: column; gap: 20px 20px; } .form input, .form textarea, .form select { background-color: var(--secondary); border: none; border-radius: 100px; color: var(--primary); outline: none; line-height: 1em; padding: 20px 30px 20px 30px; font-size: 16px; width: 100%; } body.lightmode .form input, body.lightmode .form textarea, body.lightmode .form select{ border: 1px solid var(--accent-color-3); } .form textarea{ border-radius: 35px; } .form input:focus, .form textarea:focus, .form select:focus { box-shadow: none; color: var(--primary); } .form input:autofill, .form input:autofill:focus { transition: background-color 5000s ease-in-out; -webkit-text-fill-color: var(--primary); } .form input::placeholder, .form textarea::placeholder { font-size: 16px; font-weight: 400; line-height: 1.4em; } .form label{ font-size: 16px; font-weight: 400; line-height: 1.4em; text-align: start; color: var(--text-color); } .form .form-select { color: var(--text-color-2); } .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url('data:image/svg+xml,'); } .form input.form-check-input { background-color: transparent; border: 1px solid gray; } .form input.form-check-input:checked { border: 1px solid blue; color: blue; } .form-button-container{ display: flex; flex-direction: row; justify-content: flex-start; width: auto; } /* 7.2 Validation Styles */ .error-text { color: var(--accent-color); font-size: 16px; margin-bottom: 10px; } .alert { display: flex; flex-direction: column; align-items: center; padding: 2em; border-radius: 6px; margin-bottom: 15px; border: 1px solid var(--background-color); } .success { display: flex; flex-direction: column; gap: 1em; background-color: var(--primary); color: var(--secondary); } .success span, .success p{ color: var(--secondary); } .error { display: flex; flex-direction: column; gap: 1em; background-color: var(--primary); color: var(--secondary); } .error span, .error p{ color: var(--secondary); } .check-icon, .cross-icon { font-size: 20px; margin-right: 10px; } .hidden{ display: none; } .search-form input { background-color: var(--accent-transparent); border: 1px solid var(--accent-color-5); border-right: none; border-radius: 25px 0px 0px 25px; height: 70px; padding: 0px 30px; width: 600px; color: var(--primary); } .search-form input:focus { border: 1px solid var(--accent-color-5); border-right: none; outline: 1px solid var(--accent-color-5); outline-offset: 0; } .search-form button { border: 1px solid var(--accent-color-5); border-left: none; background-color: transparent; color: var(--accent-color-1); border-radius: 0px 25px 25px 0px; padding: 0px 30px; height: 70px; } .search-form input:autofill, .search-form input:autofill:focus { -webkit-box-shadow: 0 0 0 1000px transparent inset !important; box-shadow: 0 0 0 1000px transparent inset !important; background-color: var(--accent-color-5) !important; -webkit-text-fill-color: var(--accent-color-5) !important; } /* ================== 08. Navbar ================== */ .navbar-wrapper{ display: flex; flex-direction: row; align-self: stretch; width: 100%; height: 100%; padding: 30px 30px 30px 30px; } .navbar { position: relative; display: flex; align-items: center; width: 100%; min-height: 74px; z-index: 3; border: 1px solid var(--accent-color-3); background-color: var(--accent-color-4); padding: 7px 30px; border-radius: 25px; } .navbar-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-height: 100%; } .nav-btn{ display: none; padding: 15px 10px; background-color: var(--accent-color); color: var(--primary); outline: none; border-radius: 10px; border: none; box-shadow: none; transition: all 0.3s ease; font-size: 16px; line-height: 1em; order: 1; } .nav-btn:hover{ color: var(--accent-color-4); } .info-btn{ width: 30px; min-height: 30px; outline: none; background-color: var(--accent-transparent); color: var(--primary); fill: var(--primary); border: none; transition: all 0.3s ease; } .info-btn:hover{ color: var(--accent-color); fill: var(--accent-color); } .navbar-nav .nav-link:focus { color: var(--accent-color); background-color: none; } .nav-link { font-size: 16px; font-weight: 600; line-height: 1.5em; color: var(--primary); background-color: transparent; padding: 8px 16px 8px 16px !important; } .navbar-nav{ display: flex; flex-wrap: wrap; justify-content: center; } .navbar-collapse{ display: flex; justify-content: space-between; } .nav-link:hover, .nav-link.active, .nav-link.show { color: var(--accent-color) !important; background-color: transparent; } .navbar-toggler:focus{ box-shadow: none; } .dropdown-menu { border-radius: 0; border: none; padding: 0; border-radius: 25px; width: 220px; background-color: var(--secondary); overflow: hidden; -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2); box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2); } .dropdown-item { padding-block: 0.75rem; color: var(--primary); font-size: 16px; font-weight: 500; padding-inline: 0.75rem; } .dropdown-item.active { color: var(--accent-color); background-color: transparent; } .dropdown-item.active:hover{ color: var(--accent-color); } .dropdown-item:hover { background-color: var(--secondary); color: var(--text-color); } .dropdown-item:focus { color: var(--text-color); } .dropdown-toggle::after { display: none !important; } .navbar-action-container{ display: flex; flex-direction: row; justify-content: flex-end; gap: 0px 0px; align-items: center; width: 30%; } .navbar-action-button{ display: flex; flex-direction: row-reverse; gap: 20px 20px; align-items: center; justify-content: flex-end; padding: 0px 20px 0px 20px; } .navbar-icon-wrapper{ display: flex; flex-direction: row; gap: 0px 0px; align-items: center; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; border-radius: 100px 100px 100px 100px; max-width: 100%; width: 270px; box-shadow: var(--box-shadow-top-left); height: auto; padding: 5px 5px 5px 5px; transition: all 0.6s; } body.lightmode .navbar-icon-wrapper{ border: 1px solid var(--accent-color); } .navbar-icon-wrapper:hover{ box-shadow: var(--box-shadow-bottom-right); } .navbar-icon-wrapper h6{ margin-right: 1em; } /* ========================================================= TG MULTIMEDIA IMAGE LOGO ========================================================= */ .logo-container-header { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; height: 100%; margin: 0; padding: 0 30px 0 8px; position: relative; z-index: 10; } .logo-container-header a { display: flex; align-items: center; justify-content: flex-start; text-decoration: none; margin: 0; padding: 0; } .logo-container-header img { display: block; width: auto; height: 54px; max-width: 220px; object-fit: contain; object-position: left center; margin: 0; padding: 0; transition: transform 0.3s ease; } .logo-container-header a:hover img { transform: scale(1.04); } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 992px) { .logo-container-header { min-width: 235px; padding-left: 5px; padding-right: 28px; } .logo-container-header img { height: 80px; max-width: 230px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .logo-container-header { min-width: 200px; padding-left: 3px; padding-right: 18px; } .logo-container-header img { height: 70px; max-width: 200px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .navbar { min-height: 64px; padding: 6px 12px; } .navbar-container { align-items: center; } .logo-container-header { min-width: auto; padding: 0 8px 0 0; } .logo-container-header img { height: 100px; max-width: 165px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .navbar { padding-left: 9px; padding-right: 9px; } .logo-container-header { padding-right: 5px; } .logo-container-header img { height: 41px; max-width: 150px; } } /* ================== 09. Sidebar ================== */ .sidebar { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background: var(--secondary); color: var(--primary); transition: transform 0.4s ease-in-out; z-index: 1000; overflow-y: auto; max-height: 100vh; padding: 0px 16px 0px 5px; } .sidebar.active{ transform: translateX(300px); } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 20px 20px; } .sidebar-header .logo { width: 75%; } .close-btn { display: inline-block; justify-content: center; background-color: var(--accent-color); border: var(--accent-color); border-radius: 8px 8px 8px 8px; color: var(--primary); font-weight: 700; position: relative; font-size: 16px; cursor: pointer; padding: 8px 18px; transition: all 0.4s; } .close-btn:hover{ background-color: var(--accent-transparent); color: var(--accent-color); border: 1px solid var(--accent-color); } .menu { list-style: none; padding: 0; margin-top: 20px; } .menu li { margin-bottom: 10px; } .menu a { color: var(--primary); text-decoration: none; padding: 10px 10px 10px 10px; display: block; border-radius: 5px; transition: 0.3s; font-size: 16px; font-weight: 500; text-transform: capitalize; } .menu a:hover, .menu a.active, .menu a.focus { color: var(--accent-color); background-color: var(--secondary); } .sidebar-dropdown .dropdown-header { display: flex; justify-content: space-between; align-items: center; } .sidebar-dropdown-btn { background: none; border: 1px solid var(--accent-color); color: var(--accent-color); font-size: 16px; cursor: pointer; padding: 0px 18px; border-radius: 24px; transition: transform 0.3s ease; } .sidebar-dropdown-btn:hover { color: var(--accent-color); border: 1px solid var(--accent-color) } .sidebar-dropdown-menu { list-style: none; padding-left: 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; padding-top: 0; padding-bottom: 0; } .sidebar-dropdown-menu.active { max-height: 100%; padding-top: 10px; padding-bottom: 10px; } .below-dropdown { transition: margin-top 0.1s ease-in-out; margin-top: 0px; } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-thumb { background: gray; border-radius: 5px; } /* ================== 10. Content Info Sidebar ================== */ .info-sidebar { position: fixed; top: 0; right: -410px; width: 100%; max-width: 410px; height: 100%; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); transition: transform 0.4s ease-in-out; z-index: 1000; overflow-y: auto; max-height: 100vh; cursor: default; } .info-sidebar.active{ transform: translateX(-410px); } .info-sidebar-header{ position: absolute; top: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; padding: 0px; } .sidebar-info-contact{ display: flex; flex-direction: column; gap: 15px 15px; text-align: center; align-items: center; } .sidebar-info-icon{ color: var(--accent-color); font-size: 50px; } .close-info-btn { display: inline-block; justify-content: center; background-color: var(--accent-transparent); border: none; border-radius: 25% 25% 25% 25%; color: var(--primary); font-weight: 700; position: relative; font-size: 18px; cursor: pointer; border: 1px solid var(--accent-color); padding: 12px 15px 12px 15px; transition: all 0.4s; } .close-info-btn:hover{ border: 1px solid var(--accent-color-4); color: var(--accent-color); } .info-sidebar-content{ display: flex; flex-direction: column; gap: 30px 30px; justify-content: center; align-items: center; text-align: center; padding: 100px 30px; } .info-sidebar-logo{ margin-left: auto; } .info-sidebar-logo img{ width: 50%; margin: 0 auto; } /* ================== 11. Newsletter Form ================== */ #newsletter-form { display: flex; flex-direction: row; border-radius: 100px 100px 100px 100px; padding: 10px 10px 10px 10px; justify-content: space-between; align-items: center; align-self: center; background-color: var(--secondary); width: 80%; } body.lightmode #newsletter-form { border: 1px solid var(--accent-color-3); } #newsletter-form input { padding: 23px 20px 23px 20px; border-radius: 20px 20px 20px 20px; width: 100%; height: auto; font-size: 16px; color: var(--primary) !important; background-color: var(--secondary) !important; text-align: left; border: none; outline: none; } #newsletter-form input::placeholder{ color: var(--primary); } #newsletter-form input:autofill, #newsletter-form input:autofill:focus { -webkit-box-shadow: 0 0 0 1000px transparent inset !important; box-shadow: 0 0 0 1000px transparent inset !important; background-color: var(--secondary) !important; -webkit-text-fill-color: var(--secondary) !important; } body.lightmode #newsletter-form input:autofill, body.lightmode #newsletter-form input:autofill:focus{ background-color: var(--secondary) !important; color: var(--text-color) !important; -webkit-text-fill-color: var(--text-color) !important; } #newsletter-form .error-text { color: var(--error-color); font-size: 14px; margin-top: 4px; } #newsletter-form .hidden { display: none; } #newsletter-form button:hover { background-color: transparent; color: var(--primary); } #newsletter-success{ background-color: var(--primary); color: var(--primary); } #newsletter-error{ background-color: var(--primary); color: var(--primary); } /* ================== 12. Button ================== */ .btn{ max-width: 100%; display: flex; flex-direction: row; align-items: center; border-radius: 100px 100px 100px 100px; padding: 5px 5px 5px 5px; justify-content: space-between; align-self: stretch; } .btn-accent{ fill: var(--accent-color-2); transition: all 0.6s; background-color: var(--accent-color-4); box-shadow: var(--box-shadow-top-left); } body.lightmode .btn-accent{ border: 1px solid var(--accent-color); } body.lightmode .keep-dark .btn-accent{ border: none; } .btn-title{ font-size: 16px; font-weight: 600; line-height: 1.2em; padding: 20px 30px 20px 30px; color: var(--accent-color-2); text-decoration: none; align-self: center; width: 100%; transition: all 0.6s; } .btn-title a, .btn-title span{ color: var(--primary); } .btn-accent:hover{ box-shadow: var(--box-shadow-bottom-right); background-color: var(--accent-color-4); } .btn:hover .btn-title a, .btn:hover .btn-title span, .btn:focus .btn-title a, .btn:focus .btn-title span{ color: var(--accent-color) !important; } .btn-sidebar{ display: inline-block; font-weight: 600; font-size: 14px; text-align: center; padding: 17px 32px; border-radius: 30px !important; transition: all 0.15s ease-in-out; border-radius: 25px; line-height: 1em; letter-spacing: 1px; } .themeswitch{ height: 45px; width: 45px; padding: 0; border-radius: 50%; background-color: var(--accent-color-4); display: flex; justify-content: center; align-items: center; order: 2; } .themeswitch i{ font-size: 20px; } /* ================== 13. Banner Video Container ================== */ .banner-video-container{ display: flex; flex-direction: column; padding: 120px 20px 120px 20px; background-color: var(--secondary); color: var(--primary); border-radius: 25px 25px 25px 25px;; border: 1px solid var(--accent-color-3); position: relative; overflow: hidden; z-index: 1; } .banner-video-container::before{ content: ''; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-transparent) 0%, var(--secondary) 100%); opacity: 0.51; position: absolute; width: 100%; height: 100%; top: 100%; left: 100%; z-index: 0; } #banner-video-background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 100%; height: 100%; } .banner-video-content{ display: flex; flex-direction: column; justify-content: flex-end; width: 38%; } .banner-video-content p{ max-width: 50%; font-size: 16px; } /* ================== 14. Banner Components ================== */ /* 14.1 Banner Layout */ .banner-layout-wrapper{ display: flex; flex-direction: column; align-items: center; gap: 120px 0px; border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px;; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); padding: 0px 0px 0px 0px; overflow: hidden; position: relative; z-index: 1; } .banner-layout-wrapper::before{ content: ''; position: absolute; background-image: url('../image/regular-square-grids-4AL3FJ8.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; opacity: 0.3; top: 0; left: 0; z-index: -1; } body.lightmode .banner-layout-wrapper::before { background-image: url('../image/regular-square-grids-4AL3FJ8-light.png'); } .banner-layout{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 120px 0px; width: 100%; height: 100%; padding: 120px 20px 0px 20px; color: var(--primary); position: relative; z-index: 1; } .banner-layout::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 50%); width: 100%; height: 100%; opacity: 0.2; top: 0; left: 0; z-index: -1; } .banner-layout .spacer{ align-self: center; width: 80%; height: 2px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 75%); } .banner-content{ display: flex; flex-direction: column; width: 53%; gap: 50px; text-align: start; } .banner-reviewer{ display: flex; flex-direction: row; margin-right: auto; align-items: center; gap: 30px; justify-content: space-between; } .banner-reviewer .detail{ display: flex; flex-direction: column; font-size: 16px; font-weight: 700; color: var(--primary); } .cta-service-banner{ background-image: url('../image/transformtgmedia.png'); background-repeat: no-repeat; background-size: cover; background-position: center center; display: flex; flex-direction: column; gap: 30px 30px; width: 100%; height: 100%; border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px; padding: 30px 30px 30px 30px; position: relative; overflow: hidden; z-index: 1; } body.lightmode .cta-service-banner{ border: 1px solid var(--accent-color-3); } .cta-service-banner::before{ content: ''; position: absolute; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-transparent) 0%, var(--secondary) 100%); opacity: 1; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } body.lightmode .cta-service-banner::before{ background-image: linear-gradient(180deg, var(--accent-color-7) 0%, var(--accent-color-3) 100%); } .cta-service-banner .spacer{ height: 100px; } /* 14.2 Banner Layout 404 */ .banner-layout-404{ display: flex; flex-direction: column; justify-content: flex-end; padding: 2px 2px 2px 2px; border-radius: 25px 25px 25px 25px;; overflow: hidden; position: relative; z-index: 1; } .banner-layout-404::before{ content: ''; position: absolute; background-color: transparent; background-image: linear-gradient(360deg, var(--accent-color) 0%, var(--accent-transparent) 70%); width: 100%; height: 100%; opacity: 0.2; top: 0; left: 0; z-index: -1; } .layout-404{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 15px 15px; min-height: 93vh; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); border-radius: 25px 25px 25px 25px;; padding: 0px 20px 0px 20px; position: relative; z-index: 1; } .layout-404::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 70%); width: 100%; height: 100%; opacity: 0.2; top: 0; left: 0; z-index: -1; } .layout-404 p{ max-width: 40%; } .quote-container{ display: flex; flex-direction: column; gap: 30px 30px; justify-content: center; align-items: center; text-align: center; padding: 30px 30px 0px 30px; border-radius: 25px 25px 25px 25px;; border: 1px solid var(--accent-color-3); background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%); color: var(--primary); overflow: hidden; position: relative; z-index: 1; } .quote-container::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 60%); width: 100%; height: 100%; opacity: 0.2; top: 0; left: 0; z-index: -1; } .quote{ color: var(--primary); } .quote-description{ font-size: 16px; color: var(--text-color); } /* ================== 15. Footer ================== */ .bg-footer-wrapper{ display: flex; flex-direction: column; border-radius: 25px 25px 25px 25px;; padding: 2px 2px 0px 2px; overflow: hidden; position: relative; z-index: 1; } .bg-footer-wrapper::before{ content: ''; position: absolute; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 100%); opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .bg-footer{ display: flex; flex-direction: column; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3), var(--secondary) 50%); gap: 0px 50px; border-radius: 25px 25px 25px 25px;; padding: 120px 20px 0px 20px; position: relative; width: 100%; z-index: 1; } .bg-footer::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 40%); opacity: 0.2; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } /* ================== 16. Digital Process ================== */ .section-wrapper-digital-process{ padding: 0px 30px 0px 30px; } .section-wrapper-digital-process .spacer{ align-self: center; width: initial; height: 3px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); } .digital-process-banner{ position: relative; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--secondary) 50%); overflow: hidden; border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px;; padding: 120px 20px 120px 20px; z-index: 1; } body.lightmode .digital-process-banner{ background-image: radial-gradient(at top left, var(--accent-color-4) 0%, var(--accent-color-4) 50%); } .digital-process-content{ display: flex; flex-direction: column; position: relative; gap: 50px 50px; z-index: 2; } .digital-process-banner::before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: transparent; background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 40%); opacity: 0.2; z-index: 0; } .digital-process-steps-wrapper{ display: flex; border-radius: 25px 25px 25px 25px;; padding: 2px 2px 0px 2px; overflow: hidden; position: relative; z-index: 1; } .digital-process-steps-wrapper::before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%); opacity: 0.2; z-index: 0; } .digital-process-steps{ background-color: var(--secondary); display: flex; flex-direction: row; gap: 30px 30px; overflow: hidden; border-radius: 25px 25px 25px 25px;; border: 1px solid var(--accent-color-3); padding: 30px 30px 30px 30px; overflow: hidden; position: relative; z-index: 2; } /* ========================================================= DIGITAL PROCESS - PREMIUM HOVER EFFECT Existing HTML ko change karne ki zarurat nahi ========================================================= */ .digital-process-step { position: relative; overflow: hidden; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; } /* --------------------------------------------------------- Soft purple light inside the card --------------------------------------------------------- */ .digital-process-step::before { content: ""; position: absolute; width: 85px; height: 85px; top: 18px; left: 22px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.35) 0%, rgba(197, 44, 255, 0.14) 35%, rgba(197, 44, 255, 0.03) 65%, transparent 75% ); filter: blur(8px); opacity: 0; transform: scale(0.45); pointer-events: none; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } /* --------------------------------------------------------- Animated expanding ring --------------------------------------------------------- */ .digital-process-step::after { content: ""; position: absolute; width: 45px; height: 45px; top: 27px; left: 32px; border-radius: 50%; border: 1px solid rgba(197, 44, 255, 0.55); opacity: 0; transform: scale(0.45); pointer-events: none; } /* --------------------------------------------------------- CARD HOVER --------------------------------------------------------- */ .digital-process-step:hover { transform: translateY(-8px); border-color: rgba(197, 44, 255, 0.58) !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35), 0 0 28px rgba(197, 44, 255, 0.10); } .digital-process-step:hover::before { opacity: 1; transform: scale(1.55); } .digital-process-step:hover::after { animation: processHoverRing 1.1s ease-out infinite; } @keyframes processHoverRing { 0% { opacity: 0.75; transform: scale(0.55); } 70% { opacity: 0.18; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.8); } } /* ========================================================= ICON ========================================================= */ .digital-process-step .process-icon { position: relative; z-index: 3; display: block; transform: scale(0.94); transform-origin: center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; } .digital-process-step:hover .process-icon { transform: scale(1.18) rotate(-3deg); filter: drop-shadow( 0 0 7px rgba(197, 44, 255, 0.85) ) drop-shadow( 0 0 18px rgba(197, 44, 255, 0.42) ); } /* ========================================================= NUMBER ========================================================= */ .digital-process-step > .d-flex:first-child > span { position: relative; z-index: 4; transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease; } .digital-process-step:hover > .d-flex:first-child > span { color: #c52cff !important; transform: translateX(-3px); text-shadow: 0 0 10px rgba(197, 44, 255, 0.65); } /* ========================================================= HEADING ========================================================= */ .digital-process-step .heading-xs { position: relative; z-index: 3; transition: color 0.35s ease, transform 0.35s ease; } .digital-process-step:hover .heading-xs { color: #ffffff; transform: translateX(2px); } /* ========================================================= DESCRIPTION ========================================================= */ .digital-process-step p { position: relative; z-index: 3; transition: color 0.35s ease; } .digital-process-step:hover p { color: rgba(255, 255, 255, 0.72); } /* ========================================================= ICON AREA EXTRA GLOW ========================================================= */ .digital-process-step .process-icon { border-radius: 50%; } /* ========================================================= HOVER SHINE ========================================================= */ .digital-process-step { isolation: isolate; } .digital-process-step .process-icon::before { content: ""; } /* ========================================================= OPTIONAL CARD TOP LIGHT ========================================================= */ .digital-process-step { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.005) ); } .digital-process-step:hover { background: radial-gradient( circle at 18% 18%, rgba(197, 44, 255, 0.09), transparent 28% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) ); } /* ========================================================= MOBILE Touch devices par excessive animation nahi ========================================================= */ @media (max-width: 767px) { .digital-process-step:hover { transform: translateY(-4px); } .digital-process-step:hover .process-icon { transform: scale(1.10) rotate(-2deg); } .digital-process-step::before { width: 70px; height: 70px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .digital-process-step, .digital-process-step::before, .digital-process-step::after, .digital-process-step .process-icon, .digital-process-step .heading-xs, .digital-process-step p { animation: none !important; transition: none !important; } } .digital-process-step{ display: flex; flex-direction: column; gap: 50px 50px; } .step-spacer { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); width: 3px; height: 200px; } .process-icon{ width: 20%; } .space-header{ display: block; height: 150px; } /* ================== 17. Heading Components ================== */ /* 17.1 Title Heading */ .title-heading-banner{ display: inline-block; -webkit-background-clip: text; background-color: transparent; background-image: linear-gradient(340deg, var(--accent-transparent) 30%, var(--primary) 100%); -webkit-text-fill-color: transparent; -webkit-tap-highlight-color: transparent; } .title-heading{ display: inline-block; -webkit-background-clip: text; background-color: transparent; background-image: linear-gradient(284deg, var(--accent-transparent) 3%, var(--primary) 100%); -webkit-text-fill-color: transparent; -webkit-tap-highlight-color: transparent; } body.lightmode .title-heading{ background-image: linear-gradient(284deg, var(--primary) 100%, var(--primary) 100%); } .banner-heading{ display: flex; flex-direction: row; justify-content: space-between; } .sub-heading{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; } .sub-heading i{ color: var(--accent-color); font-size: 20px; } .sub-heading span{ font-size: 16px; font-weight: 700; line-height: 1.5em; color: var(--primary); } /* 17.2 Testimonial Reviewer */ .testimonial-reviewer{ display: flex; flex-direction: row; align-items: start; gap: 20px; justify-content: space-between; flex-wrap: wrap; } .testimonial-reviewer .avatar{ width: 50px; height: auto; } /* ================== 18. Overlay ================== */ .sidebar-overlay{ position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); transition: left 0.4s ease-in-out; z-index: 4; } .sidebar-overlay.active{ left: 0; } /* ================== 19. Info Sidebar Overlay ================== */ .info-sidebar-overlay{ position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: var(--accent-color-5); transition: right 0.4s ease-in-out; z-index: 4; cursor: url('../image/svg/cross-out.svg'), pointer; } .info-sidebar-overlay.active{ right: 0; } /* ================== 20. Custom Spacer Components ================== */ /* Flex spacing (gap) */ .gspace-0 { gap: 0px 0px; } .gspace-1 { gap: 10px 10px; } .gspace-2 { gap: 20px 20px; } .gspace-3 { gap: 30px 30px; } .gspace-4 { gap: 40px 40px; } .gspace-5 { gap: 50px 50px; } .gspace-x-0 { column-gap: 0px; } .gspace-x-1 { column-gap: 10px; } .gspace-x-2 { column-gap: 20px; } .gspace-x-3 { column-gap: 30px; } .gspace-x-4 { column-gap: 40px; } .gspace-x-5 { column-gap: 50px; } .gspace-y-0 { row-gap: 0px; } .gspace-y-1 { row-gap: 10px; } .gspace-y-2 { row-gap: 20px; } .gspace-y-3 { row-gap: 30px; } .gspace-y-4 { row-gap: 40px; } .gspace-y-5 { row-gap: 50px; } /* Grid spacing (row-gap & column-gap) */ .grid-spacer-1{ --bs-gutter-x: 10px; --bs-gutter-y: 10px; } .grid-spacer-2{ --bs-gutter-x: 20px; --bs-gutter-y: 20px; } .grid-spacer-3{ --bs-gutter-x: 30px; --bs-gutter-y: 30px; } .grid-spacer-4{ --bs-gutter-x: 40px; --bs-gutter-y: 40px; } .grid-spacer-5{ --bs-gutter-x: 50px; --bs-gutter-y: 50px; } /* Grid spacing (column-gap) */ .grid-spacer-x-1 { --bs-gutter-x: 10px; } .grid-spacer-x-2 { --bs-gutter-x: 20px; } .grid-spacer-x-3 { --bs-gutter-x: 30px; } .grid-spacer-x-4 { --bs-gutter-x: 40px; } .grid-spacer-x-5 { --bs-gutter-x: 50px; } /* Grid spacing (row-gap) */ .grid-spacer-y-1 { --bs-gutter-y: 10px; } .grid-spacer-y-2 { --bs-gutter-y: 20px; } .grid-spacer-y-3 { --bs-gutter-y: 30px; } .grid-spacer-y-4 { --bs-gutter-y: 40px; } .grid-spacer-y-5 { --bs-gutter-y: 50px; } /* ================== 21. Text Components ================== */ /* 21.1 Text 404 */ .text-404{ font-size: 200px; font-weight: 700; line-height: 0.9em; } /* ================== 22. Card Components ================== */ .card{ position: relative; border-radius: 25px 25px 25px 25px;; border: none; overflow: hidden; } /* ================== 23. About Components ================== */ .about-layout{ position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: row; } .card-about-wrapper{ padding: 0px 20px 20px 0px; background-color: var(--secondary); border-radius: 0px 0px 30px 0px; } .card-about{ position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 425px; height: 100%; gap: 20px; padding: 20px 20px 20px 20px; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); color: var(--primary); box-shadow: var(--box-shadow-top-left); transition: all 0.6s; } .about-spacer{ width: 50px; height: 50px; border-radius: 25px 0px 0px 0px; box-shadow: -10px -10px 0px 0px var(--secondary); } .about-img-layout{ width: 50%; max-width: 100%; } .about-img{ max-width: 100%; width: 100%; height: 550px; object-fit: cover; object-position: center; } .about-title{ width: 50%; } .card-about:hover{ box-shadow: var(--box-shadow-bottom-right); } .card-about .counter{ font-size: 100px; line-height: 1.3em; font-weight: 700; color: var(--accent-transparent); -webkit-text-stroke-width: 2px; stroke-width: 2px; -webkit-text-stroke-color: var(--accent-color); stroke: var(--accent-color); } .card-about .counter-detail{ font-size: 46px; color: var(--secondary); line-height: 1.3em; -webkit-text-stroke-width: 2px; stroke-width: 2px; -webkit-text-stroke-color: var(--accent-color); stroke: var(--accent-color); } /* ================== 24. Expertise Components ================== */ .expertise-layout{ position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: row; } .card-expertise-wrapper{ padding: 0px 20px 20px 0px; background-color: var(--secondary); border-radius: 0px 0px 30px 0px; } .card-expertise{ position: relative; display: flex; flex-direction: column; width: 360px; height: 100%; padding: 20px 20px 20px 20px; background-color: transparent; background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); color: var(--primary); box-shadow: var(--box-shadow-top-left); transition: all 0.6s; } .card-expertise.card-expertise-counter{ justify-content: center; width: 60%; height: auto; padding: 30px 30px 30px 30px; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); box-shadow: var(--box-shadow-bottom-right); } .card-expertise.card-expertise-counter:hover{ box-shadow: var(--box-shadow-top-left); } .expertise-spacer{ width: 50px; height: 50px; border-radius: 25px 0px 0px 0px; box-shadow: -10px -10px 0px 0px var(--secondary); } .expertise-img-layout{ width: 40%; position: relative; } .expertise-title{ width: 60%; display: flex; flex-direction: column; gap: 20px 20px; } .card-expertise:hover{ box-shadow: var(--box-shadow-bottom-right); } .card-expertise .counter{ font-size: 100px; line-height: 1.3em; font-weight: 700; color: var(--accent-transparent); -webkit-text-stroke-width: 2px; stroke-width: 2px; -webkit-text-stroke-color: var(--accent-color); stroke: var(--accent-color); } .card-expertise .counter-detail{ font-size: 46px; color: var(--secondary); line-height: 1.3em; -webkit-text-stroke-width: 2px; stroke-width: 2px; -webkit-text-stroke-color: var(--accent-color); stroke: var(--accent-color); } .expertise-img{ height: 630px; } /* ================== 25. Partner Components ================== */ /* ========================================= PARTNER CARD ========================================= */ .card-partner { background-color: transparent; background-image: radial-gradient( at top left, var(--accent-color-3) 0%, var(--accent-color-4) 30% ); padding: 0px 0px 50px 0px; display: flex; flex-direction: column; gap: 50px; position: relative; overflow: hidden; z-index: 1; } body.lightmode .card-partner { background-image: radial-gradient( at top left, var(--accent-color-4) 30%, var(--accent-color-4) 30% ); border: 1px solid var(--accent-color-3); } .card-partner::before { content: ''; background-color: transparent; background-image: radial-gradient( at top center, var(--accent-color) 0%, var(--accent-transparent) 40% ); position: absolute; top: 0; left: 0; opacity: 0.1; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .card-partner .partner-spacer { align-self: center; width: 80%; height: 3px; background-color: transparent; background-image: radial-gradient( at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70% ); } /* ========================================= PARTNER SLIDER AREA ========================================= */ .swiperPartner-layout { display: flex; flex-direction: column; position: relative; width: 100%; overflow: hidden; } /* ========================================= GRADIENT OVERLAY ========================================= */ .swiperPartner-overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: transparent; background-image: radial-gradient( at center center, var(--accent-transparent) 0%, var(--accent-color-4) 100% ); z-index: 2; pointer-events: none; } .swiperPartner-overlay .spacer { height: 100px; } /* ========================================= SWIPER CONTAINER ========================================= */ .swiperPartner-container { width: 100%; margin: 0; overflow: hidden; } /* ========================================= SWIPER ========================================= */ .swiperPartner { width: 100%; overflow: visible; } .swiperPartner .swiper-wrapper { align-items: center; } /* ========================================= SLIDE ========================================= */ .swiperPartner .swiper-slide { width: auto !important; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } /* ========================================= LOGO CARD ========================================= */ .swiperPartner .partner-slide { background-color: var(--secondary); width: 190px; height: 100px; padding: 15px 25px; margin: 10px; border-radius: 15px; display: flex; align-items: center; justify-content: center; transition-duration: 0.6s; box-shadow: var(--box-shadow-bottom-right-wide); } /* ========================================= LOGO ========================================= */ .partner-logo { width: 100%; height: 65px; object-fit: contain; display: block; transition: all 0.4s ease; } /* ========================================= HOVER ========================================= */ .swiperPartner .partner-slide:hover { box-shadow: var(--box-shadow-top-left-wide); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .swiperPartner .partner-slide { width: 175px; height: 95px; padding: 14px 22px; margin: 8px; } .partner-logo { height: 60px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .card-partner { gap: 30px; padding-bottom: 30px; } .card-partner .partner-spacer { width: 90%; } .swiperPartner .partner-slide { width: 155px; height: 85px; padding: 12px 18px; margin: 7px; border-radius: 12px; } .partner-logo { height: 52px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .swiperPartner .partner-slide { width: 140px; height: 78px; padding: 10px 15px; margin: 6px; } .partner-logo { height: 48px; } } /* ========================================= PARTNER SLIDER ========================================= */ .swiperPartner-layout { display: flex; flex-direction: column; position: relative; width: 100%; overflow: hidden; } .swiperPartner-container { width: 100%; margin: 0; overflow: hidden; } .swiperPartner { width: 100%; overflow: visible; } /* ========================================= SLIDER TRACK ========================================= */ .swiperPartner .swiper-wrapper { display: flex !important; align-items: center; width: max-content !important; animation: partnerLogoInfinite 30s linear infinite !important; } /* ========================================= SLIDE ========================================= */ .swiperPartner .swiper-slide { width: auto !important; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } /* ========================================= LOGO CARD ========================================= */ .swiperPartner .partner-slide { width: 220px; height: 100px; margin: 10px; padding: 14px 18px; background-color: var(--secondary); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--box-shadow-bottom-right-wide); overflow: hidden; transition: all 0.5s ease; } /* ========================================= LOGO IMAGE ========================================= */ .partner-logo { width: 100%; height: 70px; object-fit: contain; object-position: center; display: block; max-width: 100%; max-height: 100%; transition: all 0.4s ease; } /* ========================================= HOVER ========================================= */ .swiperPartner .partner-slide:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-top-left-wide); } /* ========================================= CONTINUOUS AUTO SLIDE ========================================= */ @keyframes partnerLogoInfinite { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .swiperPartner .partner-slide { width: 200px; height: 95px; padding: 13px 16px; margin: 8px; } .partner-logo { width: 100%; height: 65px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .swiperPartner .partner-slide { width: 180px; height: 90px; padding: 12px 16px; margin: 8px; } .partner-logo { width: 100%; height: 60px; } .swiperPartner .swiper-wrapper { animation-duration: 25s !important; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .swiperPartner .partner-slide { width: 160px; height: 82px; padding: 10px 14px; margin: 6px; } .partner-logo { width: 100%; height: 55px; } .swiperPartner .swiper-wrapper { animation-duration: 22s !important; } } /* ================== 26. Partnership Components ================== */ .partnership-layout{ display: flex; flex-direction: column; justify-content: flex-end; border-radius: 25px 25px 25px 25px;; padding: 0px 2px 2px 2px; overflow: hidden; position: relative; z-index: 1; } .partnership-layout::before{ content: ''; position: absolute; background-color: transparent; background-image: linear-gradient(360deg, var(--accent-color) 0%, var(--accent-transparent) 65%); opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .partnership-wrapper{ background-color: var(--secondary); display: flex; flex-direction: column; gap: 50px 50px; border-radius: 25px 25px 25px 25px;; padding: 0px 50px 50px 50px; position: relative; z-index: 1; } .partnership-wrapper::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 40%); opacity: 0.2; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .partnership-spacer{ align-self: center; width: 80%; height: 3px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); } .partnership-container{ border-width: 0px 1px 1px 0px; border-style: solid; border-color: var(--accent-color-3); display: flex; flex-direction: column; padding: 50px 50px 50px 50px; } .partnership-container:nth-child(n+5){ border-bottom: none; } .partnership-container:nth-child(4), .partnership-container:nth-child(8) { border-right: none; } .partnership-item{ opacity: 0.6; transition: all 0.6s; } .partnership-item:hover{ opacity: 1; transform: scale(1.1); } /* ================== 29. Service Components ================== */ .card-service-wrapper{ display: flex; flex-direction: column; gap: 20px 0px; justify-content: space-between; width: 100%; height: 100%; position: relative; z-index: 1; } .card-service-wrapper::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 50%); opacity: 0.2; width: 100%; height: 100%; inset: 0; z-index: -1; } .service-title{ color: var(--primary); text-align: start; } .service-link-footer, .service-link-footer p{ font-size: 16px !important; color: var(--primary); font-weight: 500; } .service-link-footer:hover a{ color: var(--text-color); } .card-service{ background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); border-radius: 25px 25px 25px 25px;; padding: 30px 30px 30px 30px; border: 1px solid var(--accent-color-3); position: relative; display: flex; flex-direction: column; text-align: start; gap: 30px; z-index: 1; } .col:nth-child(even) .card-service { background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); } .service-icon-wrapper{ display: flex; flex-direction: column; width: 100px; min-height: 100px; border-radius: 32px 32px 32px 32px; background-color: var(--secondary); justify-content: center; align-items: center; } .service-icon{ display: flex; width: 80px; min-height: 80px; justify-content: center; align-items: center; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%); border-radius: 25px 25px 25px 25px;; box-shadow: var(--box-shadow-top-left); transition: all 0.3s; } .service-icon:hover{ box-shadow: var(--box-shadow-bottom-right); } .service-icon img{ width: 60%; height: 60%; object-fit: cover; object-position: center; } .service-details{ display: flex; flex-direction: column; gap: 1em; padding: 0em 4em 0em 0em; } .single-service-img{ width: 100%; height: 500px; object-fit: cover; object-position: center; border-radius: 25px 25px 25px 25px;; } .single-service-title-layout{ position: absolute; bottom: 0; left: 0; width: 65%; height: 100%; display: flex; flex-direction: row; align-items: flex-end; overflow: hidden; } .single-service-title-wrapper{ padding: 20px 20px 0px 0px; background-color: var(--secondary); border-radius: 0px 25px 0px 0px; width: 100%; height: auto; margin: 0; align-items: start; } .single-service-title{ position: relative; display: flex; flex-direction: column; gap: 20px 20px; background-color: var(--secondary); } .single-service-spacer{ width: 50px; height: 50px; border-radius: 0px 0px 0px 25px; box-shadow: -10px 10px 0px 0px var(--secondary); } .service-included{ display: flex; flex-direction: column; border: 1px solid var(--accent-color-3); gap: 20px 20px; padding: 30px 30px 30px 30px; color: var(--primary); background-color: transparent; background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); } .service-recent{ display: flex; flex-direction: column; color: var(--primary); gap: 20px 20px; width: 100%; height: auto; text-align: center; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 60%); border: 1px solid var(--accent-color-3); padding: 30px 30px 30px 30px; } /* ================== 28. Case Studies Components ================== */ .case-studies-layout{ display: flex; flex-direction: column; padding: 2px 2px 0px 2px; border-radius: 25px 25px 0px 0px; overflow: hidden; position: relative; z-index: 1; } .case-studies-layout::before{ content: ''; position: absolute; background-color: var(--accent-transparent); background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%); width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; z-index: -1; } .case-studies-layout .spacer{ align-self: center; width: 80%; height: 3px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); } .card-case-studies{ display: flex; flex-direction: column; gap: 50px 50px; background-color: var(--secondary); padding: 50px 50px 50px 50px; border-radius: 25px 25px 25px 25px;; overflow: hidden; position: relative; z-index: 1; } body.lightmode .card-case-studies{ background-color: var(--accent-color-4); } .card-case-studies::before{ content: ''; position: absolute; background-color: var(--accent-transparent); background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 50%); width: 100%; height: 100%; opacity: 0.1; top: 0; left: 0; z-index: -1; } .case-studies-title{ color: var(--primary); } .case-studies-content{ display: flex; flex-direction: column; background-size: cover; background-position: center; background-repeat: no-repeat; justify-content: space-between; min-height: 400px; padding: 30px 30px 30px 30px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--accent-color-3); overflow: hidden; position: relative; z-index: 1; } .case-studies-content::before{ content: ''; position: absolute; background-color: var(--accent-transparent); background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--secondary) 100%); width: 100%; height: 100%; top: 0; left: 0; opacity: 1; z-index: -1; } body.lightmode .case-studies-content{ border: 1px solid var(--accent-color-3); } body.lightmode .case-studies-content::before{ background-image: linear-gradient(180deg, var(--accent-color-7) 10%, var(--accent-color-3) 100%); } .case-studies-content.local-business{ background-image: url('../image/dummy-img-600x400.jpg'); width: 56.2%; } .case-studies-content.saas-leads{ background-image: url('../image/dummy-img-600x400.jpg'); width: 42%; } .case-studies-content.ecommerce{ background-image: url('../image/dummy-img-600x400.jpg'); width: 42%; } .case-studies-content.startup-branding{ background-image: url('../image/dummy-img-600x400.jpg'); width: 56.2%; } .case-studies-component{ display: flex; flex-direction: row; gap: 10px 10px; flex-wrap: wrap; } .case-studies-component.large{ width: 50%; } .case-studies-component.small{ width: 70%; } .cs-component{ padding: 3px 15px 3px 15px; border-radius: 100px 100px 100px 100px; background-color: var(--accent-transparent); border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--accent-color); transform: rotateZ(0deg); transition: all 0.3s ease; } .cs-component:hover{ background-color: var(--accent-color); transform: rotateZ(5deg); } .cs-component a{ color: var(--primary); font-size: 16px; } /* ================== 29. Team Components ================== */ .team-wrapper{ display: flex; flex-direction: column; padding: 2px 2px 0px 2px; border-radius: 25px 25px 0px 0px; overflow: hidden; position: relative; z-index: 1; } .team-wrapper::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%); z-index: -1; } .team-layout{ display: flex; flex-direction: column; gap: 50px 50px; background-color: var(--secondary); padding: 50px 50px 0px 50px; overflow: hidden; justify-content: center; text-align: center; position: relative; z-index: 1; } .team-layout::before{ content: ""; position: absolute; top: 0; left: 0; opacity: 0.1; width: 100%; height: 100%; background-color: transparent; background-image: radial-gradient(at bottom center, var(--accent-color) 0%, var(--accent-transparent) 50%); z-index: -1; } .team-layout .spacer{ align-self: center; width: 80%; height: 3px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); } .image-team{ position: relative; } .image-team img{ border-radius: 25px 25px 0px 0px; } .team-profile{ background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color-3) 0%, var(--accent-color-4) 100%); display: flex; flex-direction: column; border-radius: 0px 0px 25px 25px; padding: 30px 30px 30px 30px; text-align: center; color: var(--primary); } .team-profile .title{ color: var(--accent-color); } /* ================== 29. Team Components ================== */ /* ========================================= TEAM SECTION ========================================= */ .team-section { position: relative; width: calc(100% - 32px); margin: 16px auto; background: #000000; overflow: hidden; box-sizing: border-box; border: 2px solid transparent; border-radius: 25px; background: linear-gradient(#000000, #000000) padding-box, linear-gradient( 90deg, #8f19b8 0%, #d52cff 50%, #6f1591 100% ) border-box; } /* ========================================= PURPLE BACKGROUND GLOW ========================================= */ .team-section::before { content: ""; position: absolute; width: 650px; height: 650px; top: -250px; right: -250px; border-radius: 50%; background: radial-gradient( circle, rgba(190, 30, 255, 0.10) 0%, rgba(130, 20, 255, 0.04) 40%, transparent 72% ); pointer-events: none; } .team-section::after { content: ""; position: absolute; width: 600px; height: 600px; bottom: -300px; left: -300px; border-radius: 50%; background: radial-gradient( circle, rgba(180, 30, 255, 0.08) 0%, rgba(120, 20, 255, 0.03) 45%, transparent 72% ); pointer-events: none; } /* ========================================= TEAM HEADING ========================================= */ .team-heading { position: relative; z-index: 2; padding: 40px 0 70px 0; } /* Small Label */ .team-label { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 25px; color: rgba(255, 255, 255, 0.75); font-size: 16px; font-weight: 600; } /* Purple Circle */ .team-label-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid #c52cff; border-radius: 50%; color: #c52cff; font-size: 7px; } /* Main Heading */ .team-main-title { margin: 0 auto; max-width: 1100px; color: #ffffff; font-size: clamp(42px, 5.2vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -2px; } /* ========================================= TEAM MEMBER ROW ========================================= */ .team-member { position: relative; z-index: 2; min-height: 560px; padding: 40px 0 100px 0; } /* Second Member */ .team-member-second { padding-top: 30px; padding-bottom: 100px; } /* ========================================= MEMBER IMAGE ========================================= */ .team-member-image { position: relative; width: 100%; height: 550px; overflow: hidden; border-radius: 25px; background: #080808; } /* Purple glow behind image */ .team-member-image::before { content: ""; position: absolute; width: 350px; height: 350px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(190, 30, 255, 0.12) 0%, transparent 70% ); z-index: 0; } /* Actual image */ .team-member-image img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; border-radius: 25px; transition: transform 0.6s ease; } /* Image hover */ .team-member-image:hover img { transform: scale(1.02); } /* ========================================= MEMBER CONTENT ========================================= */ .team-member-content { position: relative; z-index: 2; padding: 30px 45px; } /* Member Name */ .team-member-name { margin: 0 0 18px 0; color: #ffffff; font-size: clamp(38px, 4vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -1.5px; } /* Role */ .team-member-role { display: inline-block; margin-bottom: 25px; padding: 9px 25px; border-radius: 30px; background: #0799a8; color: #000000; font-size: 16px; font-weight: 600; } /* Description */ .team-member-content p { margin: 0 0 30px 0; color: rgba(255, 255, 255, 0.88); font-size: 18px; font-weight: 500; line-height: 1.75; } /* Last paragraph */ .team-member-content p:last-child { margin-bottom: 0; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .team-heading { padding: 35px 0 55px 0; } .team-main-title { font-size: 52px; } .team-member { min-height: auto; padding: 30px 0 70px 0; } .team-member-second { padding-top: 20px; padding-bottom: 70px; } .team-member-image { width: 100% !important; height: 570px !important; } .team-member-image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; } .team-member-content { padding: 25px 20px; } .team-member-name { font-size: 42px; } .team-member-content p { font-size: 16px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { @media (max-width: 767px) { .team-section { width: calc(100% - 16px); margin: 8px auto; border-width: 1px; border-radius: 18px; } } .team-heading { padding: 30px 0 40px 0; } .team-label { font-size: 14px; margin-bottom: 18px; } .team-main-title { font-size: 38px; line-height: 1.1; letter-spacing: -1px; padding: 0 10px; } /* Team member */ .team-member { min-height: auto; padding: 20px 0 60px 0; } .team-member-second { padding-top: 20px; padding-bottom: 60px; } /* Image */ .team-member-image { height: 360px; border-radius: 20px; margin-bottom: 25px; } .team-member-image img { border-radius: 20px; } /* Content */ .team-member-content { padding: 10px 5px 20px 5px; } .team-member-name { font-size: 34px; line-height: 1.12; letter-spacing: -0.5px; margin-bottom: 15px; } .team-member-role { margin-bottom: 20px; padding: 8px 20px; font-size: 14px; } .team-member-content p { font-size: 15px; line-height: 1.7; margin-bottom: 25px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .team-heading { padding: 25px 0 35px 0; } .team-main-title { font-size: 32px; } .team-member { padding-bottom: 50px; } .team-member-image { height: 300px; border-radius: 18px; } .team-member-image img { border-radius: 18px; } .team-member-content { padding-left: 0; padding-right: 0; } .team-member-name { font-size: 30px; } .team-member-role { font-size: 13px; padding: 7px 17px; } .team-member-content p { font-size: 14px; line-height: 1.65; } } /* ================== 32. Pricing Components ================== */ .pricing-container{ display: flex; flex-direction: column; width: 100%; height: auto; gap: 20px 20px; } .card-pricing-title{ display: flex; flex-direction: row; margin: 0 auto; gap: 20px 30px; padding: 62.5px 30px 62.5px 0px; border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px;; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); position: relative; overflow: hidden; z-index: 1; } .card-pricing-title .content{ display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; } .card-pricing-title .spacer{ display: flex; flex-direction: row; width: 3px; height: 200px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 80%); } .card-pricing-title::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: transparent; background-image: radial-gradient(at center left, var(--accent-color) 0%, var(--accent-transparent) 50%); opacity: 0.2; top: 0; left: 0; z-index: -1; } .pricing-highlight-box{ display: flex; flex-direction: row; width: 100%; height: auto; gap: 30px 30px; padding: 30px 0px 30px 30px; border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px;; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); color: var(--primary); position: relative; overflow: hidden; align-items: center; justify-content: space-between; align-self: stretch; z-index: 1; } .pricing-highlight-box::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--secondary) 100%); opacity: 0.2; top: 0; left: 0; z-index: -1; } .pricing-highlight-box .spacer{ display: flex; flex-direction: row; width: 2px; height: 200px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 80%); } .pricing-highlights{ display: flex; flex-direction: row; gap: 10px 10px; justify-content: space-between; padding: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px; border: 1px solid var(--accent-color-3); background-color: var(--secondary); color: var(--primary); align-items: center; } .pricing-highlights a, .pricing-highlights i{ color: var(--text-color); transition: all 0.3s ease; } .pricing-highlights:hover a, .pricing-highlights:hover i{ color: var(--accent-color); } .card-pricing{ display: flex; flex-direction: column; width: 100%; height: 100%; gap: 30px 30px; flex-grow: 1; text-align: start; padding: 30px 30px 30px 30px; border: 1px solid var(--accent-color-3); background-color: transparent; background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); color: var(--primary); position: relative; } .card-pricing.pricing-highlight{ width: 100%; height: 100%; padding-top: 0; position: relative; overflow: hidden; z-index: 1; } .card-pricing.pricing-highlight::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: transparent; background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 60%); opacity: 0.2; top: 0; left: 0; z-index: -1; } .card-pricing.pricing-highlight .spacer{ align-self: center; width: 200px; height: 3px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 50%); } /* ================== 33. Core Benefits ================== */ .core-benefits{ display: flex; flex-direction: column; gap: 10px 10px; padding: 30px 0px 30px 0px; border-width: 1px 0px 1px 0px; border-style: solid; border-color: var(--accent-color-3); } .benefit{ display: flex; flex-direction: row; gap: 10px 10px; color: var(--primary); } .benefit a{ color: var(--text-color); transition: all 0.3s ease; } .benefit a:hover{ color: var(--primary); } /* ================== 34. Guide Components ================== */ .guide-banner{ background-image: url('../image/guied\ banner.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; display: flex; flex-direction: column; overflow: hidden; border-radius: 25px 25px 25px 25px;; padding: 250px 20px 120px 20px; border: 1px solid var(--accent-color-3); position: relative; z-index: 1; } .guide-banner::before{ content: ''; position: absolute; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--secondary) 100%); width: 100%; height: 100%; top: 0; left: 0; z-index: 0; } body.lightmode .guide-banner::before { background-image: linear-gradient(180deg, var(--accent-color-7) 0%, var(--accent-color-3) 100%); } .guide-content{ position: relative; z-index: 2; display: flex; flex-direction: column; align-self: flex-start; gap: 30px; max-width: 65%; } .guide-video-container{ display: flex; flex-direction: row; gap: 30px; align-items: center; } .guide-video-container p{ font-size: 16px; max-width: 15%; color: var(--primary); font-weight: 600; } .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 5px solid var(--accent-color); } .avatar:not(:nth-child(1)){ margin-left: -10px; } /* ================== 35. Underline Components ================== */ .underline-vertical{ border-right: 1px solid var(--accent-color-3) !important; width: 3px; height: 100px; } .underline-accent-short{ border-bottom: 2px solid var(--accent-color) !important; width: 20%; } .underline-muted-full{ border-bottom: 1px solid var(--accent-color-3); width: 100%; } /* ==================37. Social Team Components ================== */ .social-team-wrapper{ position: absolute; top: 0; right: 0; display: flex; flex-direction: row; justify-content: flex-end; align-self: flex-end; } .social-team-container{ background-color: var(--secondary); display: flex; flex-direction: column; width: 70px; border-radius: 0px 0px 0px 25px; padding: 0px 0px 15px 15px; gap: 10px; } .social-team-spacer{ width: 50px; height: 50px; border-radius: 0px 25px 0px 0px; box-shadow: 10px -10px 0px 0px var(--secondary); } .social-team-container .social-item{ width: 55px; height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .team-details{ display: flex; flex-direction: column; gap: 16px; align-items: center; border-radius: 25px; padding: 1em 1em 1em 1em; background: rgba(255, 255, 255, 0.041); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2; } /* ================== 37. Testimonial Components ================== */ .testimonial-header-wrapper{ display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 25px 25px 0px 0px; padding: 2px 2px 0px 2px; position: relative; overflow: hidden; z-index: 1; } .testimonial-header-wrapper::before{ content: ''; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-transparent) 65%); opacity: 0.5; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; } .testimonial-header-wrapper-title{ display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 25px 25px 25px 25px; padding: 2px 2px 2px 2px; position: relative; overflow: hidden; z-index: 1; } .testimonial-header-wrapper-title::before{ content: ''; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-transparent) 35%, var(--accent-color) 100%); opacity: 0.5; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; } .testimonial-title-container{ width: 65%; } .testimonial-reviewer-container{ width: 35%; } .card-testimonial-reviewer .counter{ font-size: 46px; line-height: 1.2em; font-weight: 700; color: var(--primary) } .card-testimonial-reviewer .counter-detail{ font-size: 46px; line-height: 1.2em; font-weight: 700; color: var(--primary); } .testimonial-header-link-wrapper{ background-color: var(--secondary); display: flex; border-radius: 15px 15px 15px 15px; padding: 15px 15px 15px 15px; text-align: center; align-items: center; gap: 10px; justify-content: center; width: 100%; height: auto; } .testimonial-header-link-wrapper a{ color: var(--text-color); } .testimonial-header-link-wrapper:hover a{ color: var(--primary); } .card-testimonial-reviewer{ display: flex; flex-direction: column; justify-content: center; gap: 30px 30px; background-color: var(--accent-transparent); background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%) ; border: 1px solid var(--accent-color-3); padding: 24px 30px 24px 30px; position: relative; width: 100%; height: 100%; } .card-testimonial-header-title{ display: flex; flex-direction: column; gap: 20px 20px; background-color: var(--secondary); border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px;; padding: 30px 30px 30px 30px; position: relative; } body.lightmode .card-testimonial-header-title{ background-color: var(--accent-color-4); } .card-testimonial{ display: flex; flex-direction: column; gap: 30px; background-color: transparent; text-align: left; background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); padding: 30px 30px 30px 30px; border: 1px solid var(--accent-color-3); } .profile-name{ color: var(--primary); font-size: 20px; font-weight: 700; line-height: 1.5em; } .testimonial-description{ font-size: 18px; font-weight: 500; line-height: var(--line-height-extra-loose); } .profile-bio{ font-size: 16px; } .swiperTestimonial .swiper-slide{ width: 100%; } .testimonial-image{ position: relative; width: 64px; height: 64px; } .testimonial-image img{ max-width: 100%; border-radius: 50%; margin-right: 20px; object-fit: cover; } /* ================== 38. Newsletter Components ================== */ .newsletter-wrapper{ display: flex; flex-direction: column; overflow: hidden; padding: 0px 2px 2px 2px; border-radius: 25px 25px 25px 25px;; position: relative; z-index: 1; } .newsletter-wrapper::before{ content: ''; position: absolute; background-color: transparent; background-image: linear-gradient(180deg, var(--accent-transparent) 0%, var(--accent-color) 100%); width: 100%; height: 100%; opacity: 0.5; top: 0; left: 0; z-index: 0; } .newsletter-layout{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 50px 50px; overflow: hidden; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); border: 1px solid var(--accent-color-3); border-radius: 25px 25px 25px 25px;; padding: 0px 50px 50px 50px; position: relative; z-index: 1; } body.lightmode .newsletter-layout{ background-image: radial-gradient(at top left, var(--accent-color-4) 30%, var(--accent-color-4) 50%); } .newsletter-layout .spacer{ height: 3px; width: 80%; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); } .newsletter-layout::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at top center, var(--accent-color) 0%, var(--accent-transparent) 40%); width: 100%; height: 100%; opacity: 0.2; top: 0; left: 0; z-index: 0; } .input-container{ display: flex; flex-direction: column; gap: 20px; width: 51%; } /* ================== 39. Breadcrumb Components ================== */ .breadcrumb { display: flex; flex-direction: row; gap: 5px 5px; align-items: center; font-size: 16px; } .breadcrumb a { font-weight: normal; color: var(--accent-color); font-size: 18px; text-decoration: none; transition: color 0.3s ease-in-out; } .breadcrumb a:hover { color: var(--accent-color-2); } .breadcrumb .separator { margin: 0 8px; color: var(--primary); } .breadcrumb .current { color: var(--text-color); margin-bottom: 0px; } .breadcrumb p{ margin-bottom: 0px; } /* ================== 40. Icon Components ================== */ /* 40.1 Icon Components */ .icon-container{ background-color: var(--secondary); padding: 12px; border-radius: 50%; aspect-ratio: 1/1; display: flex; align-items: end; justify-content: center; text-align: center; top: 16px; right: 16px; position: absolute; } .icon-circle { position: relative; background-color: var(--accent-color); color: var(--primary); font-size: 30px; width: 59px; height: 59px; border-radius: 50%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; text-align: center; transition: all 0.3s ease-in-out; } /* 40.2 Stars */ .stars{ color: var(--star-color); } /* 40.3 Social Icons Components */ .social-item-wrapper{ display: flex; flex-direction: column; min-height: 60px; width: 60px; background-color: var(--secondary); justify-content: center; align-items: center; border-radius: 20px 20px 20px 20px; } .social-item { aspect-ratio: 1/1; width: 45px; min-height: 45px; line-height: 20px; transition: all 0.5s; display: flex; justify-content: center; align-items: center; border-radius: 15px 15px 15px 15px; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%); box-shadow: var(--box-shadow-top-left); text-decoration: none; font-size: 18px; } /* 40.4 Social Container */ .social-container{ display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 1em; } /* 40.5 Social Footer Container */ .social-footer{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; } .footer-content-spacer{ height: 120px; } .social-item:hover{ box-shadow: var(--box-shadow-bottom-right); } /* ================== 41. Counter Text ================== */ .counter-text{ text-align: center; color: var(--primary); font-size: 22px; font-weight: 600; line-height: 1em; } /* ================== 41. List Style ================== */ .service-list { list-style: none; padding: 0; } .service-list li { position: relative; padding-left: 24px; margin-bottom: 8px; } .service-list a { color: var(--secondary); font-size: 16px; } .service-list li::before { content: "\f054"; font-family: "Font Awesome 7 Free"; font-weight: 900; position: absolute; left: 0; color: var(--secondary); font-size: 14px; } .expertise-link, .expertise-link a{ color: var(--accent-color); } .expertise-link:hover, .expertise-link:hover a{ color: var(--primary); } .expertise-list{ width: 40%; height: auto; display: flex; flex-direction: column; gap: 1em; } .check-list { list-style: none; padding: 0; } .check-list li { position: relative; padding-left: 32px; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.5em; } .check-list a { color: var(--text-color); font-size: 16px; font-weight: 700; transition: all 0.2s; line-height: 1.5em; } .check-list a:hover { color: var(--primary); } .check-list li::before { content: "\f058"; font-family: "Font Awesome 7 Free"; font-weight: 500; position: absolute; left: 0; color: var(--accent-color); font-size: 20px; } .list-icon{ list-style: none; padding: 0; color: var(--text-color); } .list-icon li { list-style: none; position: relative; padding-left: 24px; margin-bottom: calc(10px / 2); padding-bottom: calc(10px / 2); } .list-icon li::before { content: "\f1ce"; font-family: "Font Awesome 7 Free"; font-weight: 900; position: absolute; left: 0; color: var(--accent-color); font-size: 14px; line-height: 1em; } /* ================== 43. Link Wrapper ================== */ .link-wrapper{ display: flex; flex-direction: row; gap: 10px; align-items: center; color: var(--accent-color); transition: all 0.3s; } .link-wrapper:hover a, .link-wrapper:hover i{ color: var(--primary) !important; } /* ================== 44. Choose Us Components ================== */ .card-chooseus{ background-color: transparent; background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); display: flex; flex-direction: row; min-height: 150px; width: 100%; } .chooseus-icon-wrapper{ width: 100px; min-height: 272px; align-self: center; justify-content: center; display: flex; flex-direction: column; } .chooseus-icon-layout{ position: relative; padding: 10px 10px 10px 10px; background-color: var(--secondary); border-radius: 0px 30px 30px 0px; width: 100px; height: 110px; } .chooseus-icon{ width: 100%; height: 100%; border-radius: 25px 25px 25px 25px;; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%); box-shadow: var(--box-shadow-top-left); transition: all 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; } .card-chooseus:nth-child(even) .chooseus-icon{ background-color: transparent; background-image: radial-gradient(at bottom right, var(--accent-color-3) 0%, var(--accent-color-4) 50%); } .card-chooseus:nth-child(even){ background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 70%); } .chooseus-icon img{ width: 60%; object-fit: cover; object-position: center; } .chooseus-icon:hover{ box-shadow: var(--box-shadow-bottom-right); } .chooseus-card-container{ width: 50%; order: 1; } .chooseus-content-container{ width: 50%; order: 2; } .chooseus-spacer{ width: 50px; height: 50px; } .chooseus-spacer.above{ border-radius: 0px 0px 0px 25px; box-shadow: -10px 10px 0px 0px var(--secondary); } .chooseus-spacer.below{ border-radius: 25px 0px 0px 0px; box-shadow: -10px -10px 0px 0px var(--secondary); } .chooseus-content{ padding: 30px 30px 30px 30px; display: flex; width: 515px; flex-direction: column; justify-content: space-between; gap: 1em; } .chooseus-title{ color: var(--primary); } .chooseus-content p{ margin-bottom: 14.4px; } .chooseus-img{ width: 100%; max-width: 100%; height: 500px; object-fit: cover; object-position: center; } .chooseus-cta-spacer{ width: 50px; height: 50px; border-radius: 0px 0px 25px 0px; box-shadow: 10px 10px 0px 0px var(--secondary); } .card-chooseus-cta-layout{ position: absolute; bottom: 0; right: 0; display: flex; flex-direction: row; align-items: end; } .card-chooseus-cta-wrapper { display: flex; align-items: flex-end; justify-content: flex-end; width: 350px; padding: 20px 0px 0px 20px; background-color: var(--secondary); border-radius: 30px 0px 0px 0px; } .card-chooseus-cta{ display: flex; flex-direction: column; gap: 30px; padding: 30px 30px 30px 30px; background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 50%); color: var(--primary); box-shadow: var(--box-shadow-bottom-right); transition: all 0.3s; } .card-chooseus-cta:hover{ box-shadow: var(--box-shadow-top-left); } /* ========================================= MISSION & VISION SECTION ========================================= */ .mission-vision-section { position: relative; width: 100%; background: #000000; overflow: hidden; } /* ========================================= MAIN ROW ========================================= */ .mission-vision-row { position: relative; /* min-height: 500px; padding: 0 0; */ } /* ========================================= SECOND ROW ========================================= */ /* .vision-row { padding-top: 50px; padding-bottom: 80px; } */ /* ========================================= CONTENT ========================================= */ .mv-content { position: relative; z-index: 2; padding: 20px 15px; max-width: 600px; } /* ========================================= TITLE ========================================= */ .mv-title { margin: 0 0 25px 0; color: #ffffff; font-size: clamp(48px, 5vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -2px; } /* ========================================= DESCRIPTION ========================================= */ .mv-description { margin: 0; max-width: 570px; color: rgba(255, 255, 255, 0.82); font-size: 18px; font-weight: 500; line-height: 1.65; } /* ========================================= IMAGE AREA ========================================= */ .mv-image-area { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; padding: 20px; } /* ========================================= PURPLE GLOW ========================================= */ .mv-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient( circle, rgba(194, 34, 255, 0.22) 0%, rgba(136, 25, 255, 0.10) 38%, rgba(0, 0, 0, 0) 72% ); filter: blur(15px); z-index: 0; } /* ========================================= IMAGE ========================================= */ .mv-image { position: relative; z-index: 1; width: 100%; max-width: 520px; height: 420px; object-fit: contain; object-position: center; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 25px rgba(181, 32, 255, 0.10)); transition: transform 0.6s ease; } /* ========================================= IMAGE HOVER ========================================= */ .mv-image-area:hover .mv-image { transform: translateY(-8px) scale(1.02); } /* ========================================= PURPLE AMBIENT BACKGROUND ========================================= */ .mission-vision-section::before { content: ""; position: absolute; width: 650px; height: 650px; top: -250px; right: -300px; border-radius: 50%; background: radial-gradient( circle, rgba(187, 28, 255, 0.10) 0%, rgba(120, 20, 255, 0.04) 40%, transparent 72% ); pointer-events: none; } /* Second purple glow */ .mission-vision-section::after { content: ""; position: absolute; width: 600px; height: 600px; bottom: -300px; left: -250px; border-radius: 50%; background: radial-gradient( circle, rgba(180, 30, 255, 0.09) 0%, rgba(120, 20, 255, 0.03) 45%, transparent 72% ); pointer-events: none; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .mission-vision-row { min-height: auto; padding: 60px 0; } .vision-row { padding-top: 40px; padding-bottom: 60px; } .mv-content { padding: 15px 10px; } .mv-title { font-size: 52px; } .mv-description { font-size: 16px; line-height: 1.7; } .mv-image-area { min-height: 380px; } .mv-image { max-width: 430px; height: 370px; } .mv-glow { width: 320px; height: 320px; } } /* ========================================= MISSION / VISION MOBILE FIX ========================================= */ @media (max-width: 767px) { .mission-vision-section { width: 100%; overflow: hidden; } .mission-vision-row { display: flex !important; margin: 0 !important; padding: 35px 0 45px 0 !important; min-height: auto !important; align-items: center !important; } /* ------------------------- TEXT ------------------------- */ .mv-content { width: 100% !important; max-width: 100% !important; padding: 10px 15px !important; display: block !important; position: relative; z-index: 5; } .mv-title { margin: 0 0 18px 0 !important; font-size: 38px !important; line-height: 1.1 !important; letter-spacing: -1px !important; color: #ffffff !important; } .mv-description { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 15px !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.82) !important; } /* ------------------------- IMAGE CONTAINER ------------------------- */ .mv-image-area { width: 100% !important; min-height: 0 !important; height: 280px !important; margin: 10px 0 0 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } /* ------------------------- IMAGE ------------------------- */ .mv-image { width: 100% !important; max-width: 300px !important; height: 260px !important; max-height: 260px !important; object-fit: contain !important; object-position: center !important; position: relative !important; z-index: 2 !important; } /* ------------------------- GLOW ------------------------- */ .mv-glow { width: 230px !important; height: 230px !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 0 !important; } /* ------------------------- SPACE BETWEEN SECTIONS ------------------------- */ .vision-row { padding-top: 55px !important; padding-bottom: 40px !important; } } /* ========================================= SMALL PHONE ========================================= */ @media (max-width: 480px) { .mission-vision-row { padding-top: 30px !important; padding-bottom: 35px !important; } .mv-title { font-size: 34px !important; } .mv-description { font-size: 14px !important; line-height: 1.65 !important; } .mv-image-area { height: 230px !important; margin-top: 8px !important; } .mv-image { max-width: 260px !important; height: 220px !important; max-height: 220px !important; } .mv-glow { width: 190px !important; height: 190px !important; } } /* ================== 45. Image Container Components ================== */ .image-container{ display: flex; max-width: 100%; max-height: 100%; position: relative; } .image-container img{ border-radius: 25px; max-width: 100%; height: auto; object-fit: cover; object-position: center; } .avatar-container{ display: flex; flex-direction: row; align-items: center; width: 50%; } .testimonial-reviewer .detail{ display: flex; flex-direction: column; font-size: 16px; font-weight: 700; color: var(--primary); } .testimonial-rating-container{ display: flex; flex-direction: row; justify-content: space-between; width: 100%; height: 100%; } .logo-container-header{ width: 30%; display: flex; flex-direction: column; justify-content: center; } .logo-container-header img{ width: 100%; } /* ================== 46. Request Loader ================== */ .request-loader { position: relative; width: auto; height: 70px; border-radius: 50% !important; border: none; background-color: var(--secondary); display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 25px; aspect-ratio: 1/1; transition: all 0.3s ease-in-out; } .request-loader:hover { border: none; color: var(--primary); background-color: var(--accent-color); } .request-loader::after, .request-loader::before { opacity: 0.2; display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; content: ''; height: 100%; width: 100%; color: var(--accent-color); border: 4px solid currentColor; border-radius: 50%; animation-name: ripple; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.65, 0, .34, 1); z-index: 0; } .request-loader::after { animation-delay: 0.5s; animation-duration: 3s; } .request-loader::before { animation-delay: 0.2s; animation-duration: 3s; } /* ================== 47. Modal Components ================== */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent-transparent-2); z-index: 1050; justify-content: center; align-items: center; } .my-modal { background-color: var(--secondary); padding: 0; border-radius: none; position: relative; max-width: 90%; max-height: 90%; overflow: auto; } .my-modal iframe { aspect-ratio: 16/9; width: 100%; height: 80vh; } .my-close { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; font-weight: bold; color: var(--accent-color-2); } .btn-close { position: absolute; right: 0px; top: 0px; background-color: var(--accent-color-2); padding: 16px 16px 16px 16px; opacity: 1; z-index: 2001; } /* ================== 48. Detail List ================== */ .detail-list{ color: var(--secondary); transition: all 0.3s ease; } .detail-list:hover{ color: var(--accent-color); } /* ================== 49. Accordion Components ================== */ .faq-wrapper{ display: flex; flex-direction: column; gap: 1em; justify-content: center; align-self: center; width: 100%; max-width: 1024px; } .accordion{ display: flex; flex-direction: column; gap: 20px 20px; } .accordion .accordion-item { background-color: transparent ; border: none; outline: none; border-radius: 30px; display: flex; flex-direction: column; gap: 20px 20px; } .accordion .accordion-item .accordion-body { display: flex; flex-direction: row; gap: 30px 30px; align-items: center; background-color: var(--secondary) ; border: 1px solid var(--accent-color-3); color: var(--text-color); padding: 30px 30px 30px 0px; border-radius: 15px 15px 15px 15px; position: relative; z-index: 1; } .accordion .accordion-item .accordion-body::before{ content: ''; position: absolute; background-color: transparent; background-image: radial-gradient(at center left, var(--accent-color) 0%, var(--accent-transparent) 50%); opacity: 0.2; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .accordion-spacer{ align-self: center; width: 3px; height: 80px; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color) 0%, var(--accent-transparent) 80%); } .accordion .accordion-item .accordion-body .accordion-content{ display: flex; padding: 30px 0px 30px 30px; } .accordion-button:focus { box-shadow: none; color: var(--primary); } .accordion .accordion-button { background-color: transparent; background-image: radial-gradient(at top left, var(--accent-color-3) 0%, var(--accent-color-4) 100%); border: 1px solid var(--accent-color-3); outline: none; border-radius: 15px 15px 15px 15px !important; font-size: 24px; font-weight: 700; line-height: 1.2em; position: relative; overflow: hidden; display: flex; flex-direction: row; justify-content: start; padding: 15px 30px; color: var(--primary); fill: var(--primary); } .accordion-button::after { width: 48px; height: 48px; background-size: 48px 48px; background-image: url('data:image/svg+xml,'); } .accordion-button:not(.collapsed)::after { width: 48px; height: 48px; background-size: 48px 48px; background-image: url('data:image/svg+xml,'); } .accordion .accordion-button:not(.collapsed) { font-weight: 700; color: var(--primary); outline: none; box-shadow: none; line-height: 1.2em; } body.lightmode .accordion-button::after{ background-image: url('data:image/svg+xml,'); } body.lightmode .accordion-button:not(.collapsed)::after{ background-image: url('data:image/svg+xml,'); } .faq-title-container { position: sticky; top: 6em; z-index: 1; } /* ================== 50. Maps Components ================== */ .maps{ max-width: 100%; width: 100%; line-height: 1; height: 400px; filter: brightness(69%) contrast(200%) saturate(0%) blur(0px) hue-rotate(0deg); border-radius: 25px 25px 25px 25px; overflow: hidden; transition: filter 0.6s ease; } .maps:hover{ filter: none; } /* ================== 51. Single Service Components ================== */ .single-service-list { list-style: none; padding: 0; text-align: start; } .single-service-list li { position: relative; padding-left: 24px; margin-bottom: 8px; } .single-service-list a { color: var(--primary); font-size: 18px; font-weight: 700; transition: all 0.2s; } .single-service-list a:hover { color: var(--text-color); } .single-service-list li::before { content: "\f058"; font-family: "Font Awesome 7 Free"; font-weight: 500; position: absolute; left: 0; color: var(--accent-color); font-size: 18px; } /* ================== 52. Animation Components ================== */ /* 52.1 Animation Init */ .animation-box { opacity: 0; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); will-change: opacity, transform; } /* 52.2 Animation Duration */ .anim-fast { --anim-duration: var(--anim-duration-fast); } .anim-normal { --anim-duration: var(--anim-duration-normal); } .anim-slow { --anim-duration: var(--anim-duration-slow); } /* 52,3 Animation Delay */ .anim-delay-none { --anim-delay: var(--anim-delay-none); } .anim-delay-sm { --anim-delay: var(--anim-delay-sm); } .anim-delay-md { --anim-delay: var(--anim-delay-md); } /* ================== 53. CustomText Container Components ================== */ .heading-container-short{ max-width: 70%; } .heading-container{ align-self: center; text-align: center; } .heading-container-medium{ max-width: 75%; } .heading-container-wide{ max-width: 85%; text-align: center; } /* ================== 54. Footer Components ================== */ /* 54.1 Footer Layout */ .footer{ border-radius: 10px; } /* 54.2 Footer List */ .footer-list{ list-style: none; padding-left: 0; } .footer-list li{ position: relative; display: flex; flex-direction: row; align-items: center; justify-content: start; gap: 1em; margin-bottom: 15px; color: var(--text-color); } .footer-list li:last-child{ margin-bottom: 0px; } .footer-list a{ font-size: 16px; font-weight: 500; color: var(--text-color); transition: all 0.2s; } .footer-list a:hover{ color: var(--primary); } /* 54.3 Contact List */ .contact-list{ list-style: none; padding-left: 0; margin-bottom: 0px; } .contact-list li{ position: relative; display: flex; flex-direction: row; align-items: start; justify-content: start; font-size: 16px; font-weight: 500; margin-bottom: 15px; color: var(--primary); } .contact-list li:last-child{ margin-bottom: 0px; } /* 54.4 Footer Logo Container */ .footer-logo-container{ display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 30px 30px; } /* .logo-container-footer{ max-width: 40%; } */ .footer-img{ width: 69%; text-align: center } /* 54.5 Footer Quick Links */ .footer-quick-links{ display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 30px 30px; } /* 54.6 Footer Services Container */ .footer-services-container{ display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 30px 30px; } /* 54.7 Footer Contact Container */ .footer-contact-container{ display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 30px 30px; } /* 54.8 Copyright Container */ .copyright-container{ display: flex; flex-direction: row; justify-content: space-between; gap: 50px 50px; border-top: 1px solid var(--accent-color-3); padding: 20px 0px 20px 0px; } .copyright{ font-size: 16px; color: var(--text-color); font-weight: 500; line-height: 1.5em; } /* 54.9 Legal Link */ .legal-link{ font-size: 16px; font-weight: 500; color: var(--text-color); transition: all 0.2s; line-height: 1.5em; } .legal-link:hover{ color: var(--primary); } /* 54.10 Footer Spacer */ .footer-spacer{ width: initial; height: 3px; align-self: center; background-color: transparent; background-image: radial-gradient(at center center, var(--accent-color-6) 0%, var(--accent-transparent) 70%); } /* ================== 55. Media Queries & Responsive Styles ================== */ /* 55.1 Tablet Responsive */ @media screen and (max-width: 991.98px){ h1, .heading-xl { font-size: 64px; } h2, .heading-lg { font-size: 56px; } h3, .heading-md { font-size: 38px; } h4, .heading-sm { font-size: 24px; } h5, .heading-xs { font-size: 22px; } h6, .heading-xxs { font-size: 18px; } button, a{ font-size: 14px; } .section-banner{ padding: 0px 20px 0px 20px; } .section-guide{ padding: 0px 20px 0px 20px; } .section-wrapper-digital-process{ padding: 0px 20px 0px 20px; } .section-footer{ padding: 0px 20px 20px 20px; } .navbar{ position: relative; padding: 20px 20px; } .navbar-wrapper{ padding: 20px 20px 20px 20px } .navbar-collapse{ display: none; } .nav-btn{ display: block; } .info-btn{ display: none; } .info-sidebar{ display: none; } .title-heading-banner{ background-image: linear-gradient(340deg, var(--accent-transparent) 10%, var(--primary) 100%); } .about-img-layout{ width: 100%; } .about-img{ height: 100%; } .card-about{ width: 400px; } .card-about .counter{ font-size: 64px; } .card-about .counter-detail{ font-size: 38px; } .about-title{ width: 100%; } .navbar-action-container{ justify-content: flex-start; } .navbar-icon-wrapper{ display: none; } .banner-video-content{ width: 100%; } .banner-video-content p{ max-width: 48%; font-size: 14px; } .banner-content{ justify-content: center; text-align: center; width: 100%; } .btn-title{ padding: 17px 27px 17px 27px; } .icon-circle{ width: 53px; height: 53px; } .service-recent{ width: 50%; } .cta-service-banner{ width: 48%; } .social-team-spacer{ width: 40px; height: 40px; } .sub-heading span{ font-size: 14px; } .pricing-container{ flex-direction: row; width: 100%; } .expertise-title, .expertise-img-layout{ width: 100%; } .card-expertise{ width: 320px; } .card-expertise .counter{ font-size: 64px; } .card-expertise .counter-detail{ font-size: 32px; } .chooseus-card-container{ width: 100%; order: 2; } .chooseus-content-container{ width: 100%; order: 1; } .card-chooseus{ width: 85%; } .card-chooseus:nth-child(2){ align-self: end; } .card-chooseus-cta-wrapper{ width: 320px; } .card-pricing-title{ width: 50%; } .card-pricing{ width: 50%; } .card-pricing.pricing-highlight{ width: 100%; } .pricing-highlight-box{ width: 50%; } .team-layout{ padding: 30px 30px 0px 30px; } .banner-heading{ flex-direction: column; gap: 100px; } .single-service-title-layout{ width: 85%; } .guide-banner{ padding: 250px 30px 30px 30px; } .guide-content{ max-width: 100%; } .guide-video-container p{ margin-bottom: 0; font-size: 14px; max-width: 20%; } .dropdown-item { padding: 15px 30px; font-weight: 500; } .logo{ max-width: 125px; } .text-404{ font-size: 150px; } .layout-404 p{ max-width: 60%; } .price-card-wrapper .price{ font-size: 32px; } .logo-container-header img{ width: 100%; } .logo-footer{ max-width: 20%; } .card-expertise .counter-detail{ font-size: 50px; } .contactus-content{ width: 80%; } .card-case-studies{ padding: 30px 30px 30px 30px; } .case-studies-content.local-business, .case-studies-content.saas-leads, .case-studies-content.ecommerce, .case-studies-content.startup-branding{ width: 100%; } .cs-component a{ font-size: 14px; } .service-details{ padding: 0em 2em 0em 0em; } .number-box{ margin: 0; width: 100%; text-align: center; } .heading-container{ max-width: 70%; } .testimonial-title-container, .testimonial-reviewer-container{ width: 100%; } .testimonial-reviewer{ flex-direction: column; } .testimonial-rating-container{ width: 50%; } .card-testimonial-reviewer .counter{ font-size: 38px; } .card-testimonial-reviewer p{ font-size: 14px; } .price-card-wrapper .price{ font-size: 40px; } .tab-content{ padding: 0.5em; } .input-container{ width: 100%; } .sidebar-header .logo{ width: 10%; } .social-team-container{ width: 60px; } .social-team-container .social-item{ width: 40px; height: 40px; font-size: 16px; } .accordion .accordion-button{ font-size: 22px; } #newsletter-form{ flex-direction: column; border-radius: 35px 35px 35px 35px; width: 100%; } .newsletter-layout{ padding: 0px 30px 30px 30px; gap: 30px 30px; } .recent-post{ width: 48%; } .blog-link{ font-size: 16px; } .blog-link-post{ font-size: 18px; } .footer-list a{ font-size: 14px; } .contact-list li{ font-size: 14px; } } /* 55.2 Mobile Responsive */ @media screen and (max-width: 767.98px){ h1, .heading-xl{ font-size: 45px; } h2, .heading-lg{ font-size: 40px; } h3, .heading-md{ font-size: 30px; } h4, .heading-sm{ font-size: 22px; } h5, .heading-xs{ font-size: 20px; } h6, .heading-xxs{ font-size: 16px; } button, a{ font-size: 12px; } p{ font-size: 14px; } .card-expertise.card-expertise-counter{ width: 100%; } .logo-container-header img{ width: 100%; } .logo-footer{ max-width: 50%; } .navbar-wrapper{ padding: 20px 20px 20px 20px; } .banner-video-content p{ font-size: 12px; max-width: 100%; } .card-pricing-title{ width: 100%; } .card-pricing{ width: 100%; } .sub-heading span{ font-size: 12px; } .card-case-studies{ padding: 30px 20px 30px 20px; } .chooseus-icon-layout{ border-radius: 0px 0px 35px 35px; } .cs-component a{ font-size: 12px; } .accordion .accordion-button{ font-size: 20px; } .event-image{ width: 100%; } .sidebar-overlay-avatar{ width: 85% } .team-layout{ padding: 30px 20px 0px 20px; } .guide-video-container p{ font-size: 12px; max-width: 40%; } .pricing-container{ flex-direction: column; } .social-team-container{ width: 55px; } .text-404{ font-size: 100px; } .layout-404 p{ max-width: 100% } .testimonial-reviewer{ flex-direction: row; gap: 10px; } .testimonial-reviewer .avatar{ width: 45px; } .card-testimonial-reviewer .counter{ font-size: 30px; } .card-testimonial-reviewer .counter-detail{ font-size: 30px; } .testimonial-rating-container{ width: 100%; } .pricing-highlight-box{ width: 100%; justify-content: space-between; } .about-img{ height: 550px; } .card-about{ width: 250px; } .card-about .counter{ font-size: 45px; } .card-about .counter-detail{ font-size: 30px; } .section404{ width: 100%; } .card-expertise .counter{ font-size: 45px; } .card-expertise .counter-detail{ font-size: 30px; } .expertise-list{ width: 100%; } .card-expertise{ width: 250px; } .card-chooseus{ flex-direction: column; width: 100%; } .card-chooseus-cta-wrapper{ width: 250px; } .chooseus-icon-wrapper{ flex-direction: row; min-height: 0; width: 100%; } .chooseus-spacer.above { border-radius: 0px 25px 0px 0px; box-shadow: 10px -10px 0px 0px var(--secondary); } .about-wrapper{ padding: 20px 0px 0px 0px; } .banner-icon-container{ width: 100%; } .step-spacer{ width: 200px; height: 3px; } .form-card{ padding: 1em 1em 1em 1em; } .form-button-container{ width: 100%; justify-content: stretch; } .form-button-container .btn{ width: 100%; } .logo-container-header{ width: 50%; } .heading-container{ max-width: 100%; } .heading-container-wide{ max-width: 100%; } .recent-post{ width: 100%; } .blog-link{ font-size: 14px; } .blog-link-post{ font-size: 16px; } .blog-image{ height: 180px; } .service-recent, .cta-service-banner{ width: 100%; } .single-service-title-layout{ width: 74%; } .case-studies-component.large, .case-studies-component.small{ width: 100%; } .btn-title{ padding: 15px 25px 15px 25px; } .icon-circle{ width: 46px; height: 46px; } .service-details{ padding: 0em 0em 2em 0em; } .footer-logo-container{ align-items: center; justify-content: center; text-align: center; } .footer-quick-links{ align-items: center; justify-content: center; text-align: center; } .footer-services-container{ align-items: center; justify-content: center; text-align: center; } .footer-contact-container{ align-items: center; justify-content: center; text-align: center; } .footer-list li{ justify-content: center; text-align: center; } .footer-list a{ font-size: 12px; } .contact-list li{ justify-content: center; font-size: 12px; } .copyright-container{ flex-direction: column; align-items: center; text-align: center; } .copyright, .legal-link{ font-size: 12px; } } /* 52.3 Tablet Spacing Responsive */ @media screen and (min-width: 991.98px){ /* Flex spacing (gap) */ .gspace-md-0 { gap: 0px 0px; } .gspace-md-1 { gap: 10px 10px; } .gspace-md-2 { gap: 20px 20px; } .gspace-md-3 { gap: 30px 30px; } .gspace-md-4 { gap: 40px 40px; } .gspace-md-5 { gap: 50px 50px; } /* Grid spacing (column-gap) */ .gspace-x-md-0 { column-gap: 0px; } .gspace-x-md-1 { column-gap: 10px; } .gspace-x-md-2 { column-gap: 20px; } .gspace-x-md-3 { column-gap: 30px; } .gspace-x-md-4 { column-gap: 40px; } .gspace-x-md-5 { column-gap: 50px; } /* Grid spacing (row-gap) */ .gspace-y-md-0 { row-gap: 0px; } .gspace-y-md-1 { row-gap: 10px; } .gspace-y-md-2 { row-gap: 20px; } .gspace-y-md-3 { row-gap: 30px; } .gspace-y-md-4 { row-gap: 40px; } .gspace-y-md-5 { row-gap: 50px; } /* Grid spacing (row-gap & column-gap) */ .grid-spacer-md-0 { --bs-gutter-x: 0px; --bs-gutter-y: 0px; } .grid-spacer-md-1 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; } .grid-spacer-md-2 { --bs-gutter-x: 20px; --bs-gutter-y: 20px; } .grid-spacer-md-3 { --bs-gutter-x: 30px; --bs-gutter-y: 30px; } .grid-spacer-md-4 { --bs-gutter-x: 40px; --bs-gutter-y: 40px; } .grid-spacer-md-5 { --bs-gutter-x: 50px; --bs-gutter-y: 50px; } /* Grid spacing (column-gap) */ .grid-spacer-x-md-0 { --bs-gutter-x: 0px; } .grid-spacer-x-md-1 { --bs-gutter-x: 10px; } .grid-spacer-x-md-1 { --bs-gutter-x: 10px; } .grid-spacer-x-md-2 { --bs-gutter-x: 20px; } .grid-spacer-x-md-3 { --bs-gutter-x: 30px; } .grid-spacer-x-md-4 { --bs-gutter-x: 40px; } .grid-spacer-x-md-5 { --bs-gutter-x: 50px; } /* Grid spacing (row-gap) */ .grid-spacer-y-md-0 { --bs-gutter-y: 0px; } .grid-spacer-y-md-1 { --bs-gutter-y: 10px; } .grid-spacer-y-md-1 { --bs-gutter-y: 10px; } .grid-spacer-y-md-2 { --bs-gutter-y: 20px; } .grid-spacer-y-md-3 { --bs-gutter-y: 30px; } .grid-spacer-y-md-4 { --bs-gutter-y: 40px; } .grid-spacer-y-md-5 { --bs-gutter-y: 50px; } } /* 52.4 Mobile Spacing Responsive */ @media screen and (min-width: 767.98px){ /* Flex spacing (gap) */ .gspace-sm-0 { gap: 0px 0px; } .gspace-sm-1 { gap: 10px 10px; } .gspace-sm-2 { gap: 20px 20px; } .gspace-sm-3 { gap: 30px 30px; } .gspace-sm-4 { gap: 40px 40px; } .gspace-sm-5 { gap: 50px 50px; } /* Grid spacing (column-gap) */ .gspace-x-sm-0 { column-gap: 0px; } .gspace-x-sm-0 { column-gap: 0px; } .gspace-x-sm-1 { column-gap: 10px; } .gspace-x-sm-2 { column-gap: 20px; } .gspace-x-sm-3 { column-gap: 30px; } .gspace-x-sm-4 { column-gap: 40px; } .gspace-x-sm-5 { column-gap: 50px; } /* Grid spacing (row-gap) */ .gspace-y-sm-0 { row-gap: 0px; } .gspace-y-sm-1 { row-gap: 10px; } .gspace-y-sm-2 { row-gap: 20px; } .gspace-y-sm-3 { row-gap: 30px; } .gspace-y-sm-4 { row-gap: 40px; } .gspace-y-sm-5 { row-gap: 50px; } /* Grid spacing (row-gap & column-gap) */ .grid-spacer-sm-1 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; } .grid-spacer-sm-2 { --bs-gutter-x: 20px; --bs-gutter-y: 20px; } .grid-spacer-sm-3 { --bs-gutter-x: 30px; --bs-gutter-y: 30px; } .grid-spacer-sm-4 { --bs-gutter-x: 40px; --bs-gutter-y: 40px; } .grid-spacer-sm-5 { --bs-gutter-x: 50px; --bs-gutter-y: 50px; } /* Grid spacing (column-gap) */ .grid-spacer-x-sm-0 { --bs-gutter-x: 0px; } .grid-spacer-x-sm-1 { --bs-gutter-x: 10px; } .grid-spacer-x-sm-2 { --bs-gutter-x: 20px; } .grid-spacer-x-sm-3 { --bs-gutter-x: 30px; } .grid-spacer-x-sm-4 { --bs-gutter-x: 40px; } /* Grid spacing (row-gap) */ .grid-spacer-y-sm-0 { --bs-gutter-y: 0px; } .grid-spacer-y-sm-1 { --bs-gutter-y: 10px; } .grid-spacer-y-sm-2 { --bs-gutter-y: 20px; } .grid-spacer-y-sm-3 { --bs-gutter-y: 30px; } .grid-spacer-y-sm-4 { --bs-gutter-y: 40px; } .grid-spacer-y-sm-5 { --bs-gutter-y: 50px; } } /* ========================================= CONTACT SECTION - RESTORE ORIGINAL STYLE ========================================= */ /* LEFT CONTACT PANEL */ .contact-title-wrapper { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; width: 100% !important; height: 100% !important; padding: 2px !important; border-radius: 25px !important; overflow: hidden !important; position: relative !important; z-index: 1 !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* LEFT PANEL BACKGROUND */ .contact-title-wrapper::before { content: ""; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; background: #101010 !important; z-index: -1 !important; } /* CONTACT CONTENT */ .contact-title { background: #101010 !important; background-image: none !important; display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; height: 100% !important; border: none !important; border-radius: 23px !important; color: var(--primary) !important; padding: 30px !important; position: relative !important; z-index: 2 !important; } /* ========================================= CONTACT SMALL TITLE ========================================= */ .contact-title > div:first-child, .contact-title > span:first-child { color: var(--text-color) !important; } /* ========================================= ICON + INFORMATION ROW ========================================= */ .contact-title .d-flex { color: var(--primary) !important; } /* ========================================= ICON WRAPPER ========================================= */ .icon-wrapper { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; flex-shrink: 0 !important; width: 100px !important; min-width: 100px !important; height: 100px !important; min-height: 100px !important; background: #090909 !important; background-image: none !important; border-radius: 25px !important; border: 1px solid rgba(190, 30, 255, 0.12) !important; box-shadow: 0 0 15px rgba(190, 30, 255, 0.12), inset 0 0 15px rgba(190, 30, 255, 0.05) !important; } /* ========================================= ICON ========================================= */ .icon-box { aspect-ratio: 1 / 1 !important; width: 80px !important; height: 80px !important; min-height: 80px !important; display: flex !important; justify-content: center !important; align-items: center !important; background: transparent !important; background-image: none !important; color: #c52cff !important; box-shadow: none !important; border: none !important; border-radius: 20px !important; font-size: 32px !important; text-decoration: none !important; } /* ICON HOVER */ .icon-wrapper:hover { box-shadow: 0 0 25px rgba(197, 44, 255, 0.20), inset 0 0 20px rgba(197, 44, 255, 0.08) !important; } /* ========================================= CONTACT TEXT ========================================= */ .contact-title h1, .contact-title h2, .contact-title h3, .contact-title h4, .contact-title p, .contact-title span, .contact-title strong { color: var(--primary) !important; } /* Small labels */ .contact-title span { font-weight: 500; font-size: 16px; color: var(--text-color) !important; } /* Main contact numbers/emails */ .contact-title a { color: var(--primary) !important; text-decoration: none !important; } /* ========================================= RIGHT CONTACT FORM ========================================= */ .contact-form, .contact-form-wrapper { background: #101010 !important; } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .contact-title-wrapper { border-radius: 20px !important; } .contact-title { padding: 25px 20px !important; border-radius: 19px !important; } .icon-wrapper { width: 75px !important; min-width: 75px !important; height: 75px !important; min-height: 75px !important; border-radius: 20px !important; } .icon-box { width: 60px !important; height: 60px !important; min-height: 60px !important; font-size: 25px !important; } } /* ========================================= BLOG IMAGE FULL WIDTH FIX ========================================= */ .card-blog { padding: 0 !important; overflow: hidden !important; } .card-blog .blog-image { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; } .card-blog .blog-image img { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; object-fit: cover !important; } /* ===================================================== TG MULTIMEDIA BLOG PAGINATION All classes are unique to avoid CSS conflicts. ===================================================== */ .tg-blog-pages-wrap { width: 100%; } .tg-blog-pages-wrap .tg-blog-page { display: none !important; width: 100%; } .tg-blog-pages-wrap .tg-blog-page.tg-blog-page-active { display: block !important; } /* Pagination */ .tg-blog-pages-wrap .tg-blog-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 45px; padding: 0; } .tg-blog-pages-wrap .tg-blog-nav, .tg-blog-pages-wrap .tg-blog-number { width: 34px; height: 34px; min-width: 34px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: #171719; color: #d9d9d9; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: .25s ease; } .tg-blog-pages-wrap .tg-blog-number.tg-blog-number-active { background: #c52cff; border-color: #c52cff; color: #fff; box-shadow: 0 0 14px rgba(197, 44, 255, 0.4); } .tg-blog-pages-wrap .tg-blog-nav:hover:not(:disabled), .tg-blog-pages-wrap .tg-blog-number:hover { border-color: #c52cff; background: rgba(197,44,255,.12); color: #fff; } .tg-blog-pages-wrap .tg-blog-number.tg-blog-number-active:hover { background: #c52cff; border-color: #c52cff; } .tg-blog-pages-wrap .tg-blog-nav:disabled { opacity: .35; cursor: not-allowed; } .tg-blog-pages-wrap .tg-blog-nav:focus-visible, .tg-blog-pages-wrap .tg-blog-number:focus-visible { outline: 2px solid #c52cff; outline-offset: 2px; } @media (max-width: 575px) { .tg-blog-pages-wrap .tg-blog-pagination { margin-top: 30px; gap: 6px; } .tg-blog-pages-wrap .tg-blog-nav, .tg-blog-pages-wrap .tg-blog-number { width: 32px; height: 32px; min-width: 32px; font-size: 13px; } } /* ========================================= CAREER - LIFE AT TG MULTIMEDIA ========================================= */ .career-submit-message { display: none; width: 100%; margin-bottom: 25px; padding: 20px 24px; border-radius: 16px; align-items: center; gap: 16px; background: #101014; } .career-submit-success { border: 1px solid rgba(197, 44, 255, 0.55); box-shadow: 0 0 25px rgba(197, 44, 255, 0.12); } .career-submit-error { border: 1px solid rgba(255, 80, 80, 0.45); } .career-submit-icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #c52cff; color: #ffffff; font-size: 20px; } .career-submit-message h3 { margin: 0 0 5px; font-size: 18px; } .career-submit-message p { margin: 0; font-size: 14px; opacity: 0.8; } /* ========================================= PURE CSS SUCCESS / ERROR DISPLAY NO JAVASCRIPT ========================================= */ #career-submit-success:target { display: flex; } #career-submit-error:target { display: flex; } @media (max-width: 767px) { .career-submit-message { padding: 16px; } .career-submit-icon { width: 42px; height: 42px; min-width: 42px; } .career-submit-message h3 { font-size: 16px; } .career-submit-message p { font-size: 13px; } } .career-life-section { position: relative; width: 100%; background: #000000; overflow: hidden; padding: 80px 0; } /* ========================================= MAIN WRAPPER ========================================= */ .career-life-wrapper { position: relative; width: 100%; background: #0b0b0b; border: 1px solid rgba(197, 44, 255, 0.20); border-radius: 25px; overflow: hidden; } /* Purple ambient glow */ .career-life-wrapper::before { content: ""; position: absolute; width: 600px; height: 600px; right: -250px; top: -250px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.10) 0%, rgba(130, 20, 255, 0.04) 40%, transparent 72% ); pointer-events: none; } /* Bottom glow */ .career-life-wrapper::after { content: ""; position: absolute; width: 500px; height: 500px; left: -250px; bottom: -250px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.08) 0%, transparent 70% ); pointer-events: none; } /* ========================================= IMAGE SLIDER ========================================= */ .career-life-slider { position: relative; width: 100%; height: 500px; overflow: hidden; } /* Swiper */ .careerLifeSwiper { width: 100%; height: 100%; } /* Slide */ .careerLifeSwiper .swiper-slide { width: 100%; height: 100%; } /* ========================================= IMAGE ========================================= */ .career-life-image { width: 100%; height: 500px; overflow: hidden; position: relative; } /* Image */ .career-life-image img { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center center; display: block; } /* ========================================= IMAGE DARK OVERLAY ========================================= */ .career-life-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 55%, rgba(0, 0, 0, 0.35) 100% ); pointer-events: none; } /* ========================================= CONTENT ========================================= */ .career-life-content { position: relative; z-index: 3; padding: 55px 55px; } /* ========================================= SMALL LABEL ========================================= */ .career-life-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: rgba(255, 255, 255, 0.70); font-size: 16px; font-weight: 600; } /* Label Circle */ .career-life-label-icon { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; border: 2px solid #c52cff; border-radius: 50%; color: #c52cff; font-size: 6px; } /* ========================================= HEADING ========================================= */ .career-life-title { margin: 0; color: #ffffff; font-size: clamp(40px, 4.2vw, 62px); font-weight: 700; line-height: 1.08; letter-spacing: -1.5px; } /* Purple heading part */ .career-life-title span { display: block; color: #c52cff; } /* ========================================= PURPLE LINE ========================================= */ .career-life-line { width: 130px; height: 3px; margin: 25px 0 25px 0; border-radius: 10px; background: linear-gradient( 90deg, #c52cff, #7a18a0, transparent ); } /* ========================================= DESCRIPTION ========================================= */ .career-life-description { max-width: 560px; margin: 0 0 20px 0; color: rgba(255, 255, 255, 0.75); font-size: 17px; font-weight: 500; line-height: 1.75; } /* ========================================= BUTTON ========================================= */ .career-life-button { display: inline-flex; align-items: center; gap: 18px; margin-top: 15px; padding: 8px 8px 8px 24px; color: #ffffff; background: #101010; border: 1px solid rgba(197, 44, 255, 0.25); border-radius: 50px; text-decoration: none; font-size: 15px; font-weight: 600; box-shadow: 0 0 20px rgba(197, 44, 255, 0.10); transition: all 0.4s ease; } /* Button Icon */ .career-life-button-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #c52cff; color: #ffffff; font-size: 17px; } /* Button Hover */ .career-life-button:hover { color: #ffffff; transform: translateY(-3px); border-color: #c52cff; box-shadow: 0 0 25px rgba(197, 44, 255, 0.25); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .career-life-section { padding: 60px 0; } .career-life-slider { height: 420px; } .career-life-image { height: 420px; } .career-life-content { padding: 45px 35px; } .career-life-title { font-size: 48px; } .career-life-description { font-size: 16px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .career-life-section { padding: 40px 0; } .career-life-wrapper { border-radius: 18px; } /* Image */ .career-life-slider { height: 300px; } .career-life-image { height: 300px; } /* Content */ .career-life-content { padding: 35px 22px 40px 22px; } .career-life-label { font-size: 14px; margin-bottom: 18px; } .career-life-title { font-size: 38px; line-height: 1.1; letter-spacing: -0.5px; } .career-life-line { width: 100px; margin: 20px 0; } .career-life-description { font-size: 15px; line-height: 1.7; } .career-life-button { margin-top: 10px; font-size: 14px; } } .career-life-image { width: 100%; height: 500px; overflow: hidden; position: relative; border-radius: 25px; } .career-life-image img { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center center; display: block; border-radius: 25px !important; } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .career-life-slider { height: 250px; } .career-life-image { height: 250px; } .career-life-content { padding: 30px 18px 35px 18px; } .career-life-title { font-size: 32px; } .career-life-description { font-size: 14px; line-height: 1.65; } .career-life-button { padding-left: 18px; gap: 12px; } .career-life-button-icon { width: 40px; height: 40px; font-size: 15px; } .career-life-image { height: 300px; border-radius: 18px; } .career-life-image img { border-radius: 18px !important; } } /* ========================================= CAREER - OPEN POSITIONS ========================================= */ .career-hiring-section { position: relative; width: 100%; padding: 80px 0; overflow: hidden; } /* ========================================= HEADING ========================================= */ .career-hiring-heading { margin-bottom: 55px; } .career-hiring-label { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.70); font-size: 16px; font-weight: 600; margin-bottom: 15px; } .career-hiring-dot { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #c52cff; border-radius: 50%; color: #c52cff; font-size: 5px; } .career-hiring-title { margin: 0; color: #ffffff; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.1; } .career-hiring-title span { color: #c52cff; } .career-hiring-subtitle { max-width: 650px; margin: 18px auto 0; color: rgba(255,255,255,0.65); font-size: 16px; line-height: 1.7; } /* ========================================= JOB CARD ========================================= */ .career-hiring-card { position: relative; height: 100%; min-height: 235px; padding: 28px; background: #101010; border: 1px solid rgba(197,44,255,0.18); border-radius: 20px; overflow: hidden; cursor: pointer; transition: all 0.4s ease; } /* Purple glow */ .career-hiring-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; bottom: -100px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,0.15), transparent 70% ); pointer-events: none; } /* Card top */ .career-hiring-card-top { display: flex; justify-content: space-between; align-items: center; } .career-hiring-status { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; } /* Arrow */ .career-hiring-arrow { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #090909; border: 1px solid rgba(197,44,255,0.25); color: #c52cff; transition: all 0.4s ease; } /* Divider */ .career-hiring-line { width: 100%; height: 2px; margin: 20px 0; background: linear-gradient( 90deg, #c52cff, rgba(197,44,255,0.15), transparent ); } /* Job title */ .career-hiring-card h3 { position: relative; margin: 0 0 12px; color: #ffffff; font-size: 24px; font-weight: 700; line-height: 1.2; } /* Description */ .career-hiring-card p { margin: 0; color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.6; } /* ========================================================= CAREER - OPEN POSITIONS ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .career-hiring-section { width: 100%; position: relative; padding: 70px 0; overflow: hidden; } /* ========================================================= SECTION HEADING ========================================================= */ .career-hiring-heading { width: 100%; margin-bottom: 50px; text-align: center; } .career-hiring-label { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.70); font-size: 16px; font-weight: 600; margin-bottom: 15px; } .career-hiring-dot { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #c52cff; border-radius: 50%; color: #c52cff; font-size: 5px; } .career-hiring-title { margin: 0; color: #ffffff; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.1; } .career-hiring-title span { color: #c52cff; } .career-hiring-subtitle { max-width: 650px; margin: 18px auto 0; color: rgba(255, 255, 255, 0.60); font-size: 16px; line-height: 1.7; } /* ========================================================= JOB GRID ========================================================= */ .career-hiring-grid { width: 100%; } /* ========================================================= JOB CARD ========================================================= */ .career-hiring-card { position: relative; width: 100%; min-height: 250px; padding: 28px 28px 75px 28px; background: #101010; border: 1px solid rgba(197, 44, 255, 0.20); border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* Purple bottom glow */ .career-hiring-card::after { content: ""; position: absolute; width: 220px; height: 160px; right: -100px; bottom: -100px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.15), transparent 70% ); pointer-events: none; } /* ========================================================= CARD TOP ========================================================= */ .career-hiring-card-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; } .career-hiring-status { color: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 600; white-space: nowrap; } /* ========================================================= TOP RIGHT ARROW ========================================================= */ .career-hiring-arrow { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #090909; border: 1px solid rgba(197, 44, 255, 0.35); color: #c52cff; transition: all 0.35s ease; } /* ========================================================= DIVIDER ========================================================= */ .career-hiring-line { position: relative; z-index: 2; width: 100%; height: 2px; margin: 20px 0 18px; background: linear-gradient( 90deg, #c52cff 0%, rgba(197, 44, 255, 0.35) 55%, transparent 100% ); } /* ========================================================= JOB TITLE ========================================================= */ .career-hiring-card h3 { position: relative; z-index: 2; margin: 0 0 12px; padding: 0; color: #ffffff; font-size: 24px; font-weight: 700; line-height: 1.25; } /* ========================================================= JOB DESCRIPTION ========================================================= */ .career-hiring-card p { position: relative; z-index: 2; margin: 0; padding: 0; max-width: 95%; color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.6; } /* ========================================================= APPLY NOW BUTTON ========================================================= */ .career-hiring-apply { position: absolute; left: 28px; bottom: 20px; z-index: 20; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-width: 105px; height: 42px; margin: 0; padding: 4px 5px 4px 18px; border: 1px solid #c52cff; border-radius: 50px; outline: none; background: #0b0b0b; color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; appearance: none; -webkit-appearance: none; box-sizing: border-box; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } /* ========================================================= APPLY BUTTON ARROW ========================================================= */ .career-hiring-apply-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #c52cff; color: #ffffff; transition: all 0.3s ease; } .career-hiring-apply-icon i { margin: 0; padding: 0; font-size: 12px; line-height: 1; } /* ========================================================= CARD HOVER ========================================================= */ .career-hiring-card:hover { transform: translateY(-5px); border-color: #c52cff; box-shadow: 0 12px 35px rgba(197, 44, 255, 0.12); } .career-hiring-card:hover .career-hiring-arrow { background: #c52cff; color: #ffffff; transform: rotate(-45deg); } /* ========================================================= APPLY BUTTON HOVER ========================================================= */ .career-hiring-apply:hover { background: #c52cff; border-color: #c52cff; color: #ffffff; transform: translateY(-2px); box-shadow: 0 7px 20px rgba(197, 44, 255, 0.25); } .career-hiring-apply:hover .career-hiring-apply-icon { background: #ffffff; color: #c52cff; transform: translateX(3px); } /* ========================================================= INTERNS CARD ========================================================= */ .career-hiring-intern { border-color: rgba(197, 44, 255, 0.35); } /* ========================================================= APPLICATION FORM ========================================================= */ .career-hiring-form-wrapper { position: relative; width: 100%; margin-top: 70px; padding: 50px; background: #101010; border: 1px solid rgba(197, 44, 255, 0.45); border-radius: 25px; overflow: hidden; /* IMPORTANT */ display: none; scroll-margin-top: 80px; box-sizing: border-box; } /* ========================================================= FORM GLOW ========================================================= */ .career-hiring-form-wrapper::before { content: ""; position: absolute; width: 500px; height: 500px; top: -300px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.12), transparent 70% ); pointer-events: none; } /* ========================================================= FORM HEADER ========================================================= */ .career-hiring-form-header { position: relative; z-index: 2; margin-bottom: 35px; } .career-hiring-form-header h2 { margin: 0 0 15px; color: #ffffff; font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.15; } .career-hiring-form-header h2 span { color: #c52cff; } .career-hiring-form-header p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 15px; line-height: 1.7; } /* ========================================================= SELECTED JOB ========================================================= */ .career-hiring-selected { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin-bottom: 25px; padding: 18px 22px; background: #090909; border: 1px solid rgba(197, 44, 255, 0.20); border-radius: 15px; } .career-hiring-selected span { color: rgba(255, 255, 255, 0.50); font-size: 13px; } .career-hiring-selected strong { color: #c52cff; font-size: 18px; } /* ========================================================= FORM INPUT ========================================================= */ .career-hiring-input { width: 100%; min-height: 55px; padding: 15px 18px; background: #050505; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; outline: none; color: #ffffff; font-family: inherit; font-size: 15px; box-sizing: border-box; transition: all 0.3s ease; } .career-hiring-input::placeholder { color: rgba(255, 255, 255, 0.40); } .career-hiring-input:focus { border-color: #c52cff; box-shadow: 0 0 15px rgba(197, 44, 255, 0.10); } /* ========================================================= TEXTAREA ========================================================= */ .career-hiring-textarea { min-height: 140px; resize: vertical; } /* ========================================================= RESUME ========================================================= */ .career-hiring-file-label { width: 100%; min-height: 55px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #050505; border: 1px dashed rgba(197, 44, 255, 0.35); border-radius: 12px; color: rgba(255, 255, 255, 0.65); cursor: pointer; box-sizing: border-box; } .career-hiring-file-label i { color: #c52cff; margin-right: 8px; } .career-hiring-file-label input { max-width: 220px; color: rgba(255, 255, 255, 0.60); } /* ========================================================= SUBMIT BUTTON ========================================================= */ .career-hiring-submit { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 55px; padding: 6px 7px 6px 24px; border: 1px solid rgba(197, 44, 255, 0.45); border-radius: 50px; background: #101010; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.35s ease; } .career-hiring-submit span { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #c52cff; color: #ffffff; transition: all 0.35s ease; } .career-hiring-submit:hover { border-color: #c52cff; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(197, 44, 255, 0.20); } .career-hiring-submit:hover span { background: #ffffff; color: #c52cff; transform: translateX(3px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .career-hiring-section { padding: 60px 0; } .career-hiring-card { min-height: 245px; padding: 25px 25px 72px 25px; } .career-hiring-apply { left: 25px; bottom: 18px; } .career-hiring-form-wrapper { padding: 40px 30px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .career-hiring-section { padding: 45px 0; } .career-hiring-heading { margin-bottom: 35px; } .career-hiring-title { font-size: 38px; } .career-hiring-subtitle { padding: 0 15px; font-size: 14px; } .career-hiring-card { min-height: 225px; padding: 23px 22px 70px 22px; border-radius: 17px; } .career-hiring-card h3 { font-size: 21px; } .career-hiring-card p { max-width: 100%; font-size: 14px; } .career-hiring-arrow { width: 38px; height: 38px; flex-basis: 38px; } .career-hiring-apply { left: 22px; bottom: 18px; height: 40px; padding-left: 16px; font-size: 13px; } .career-hiring-apply-icon { width: 30px; height: 30px; flex-basis: 30px; } .career-hiring-form-wrapper { margin-top: 50px; padding: 30px 20px; border-radius: 18px; } .career-hiring-form-header h2 { font-size: 34px; } .career-hiring-file-label { flex-direction: column; align-items: flex-start; } .career-hiring-file-label input { width: 100%; max-width: 100%; } .career-hiring-submit { font-size: 14px; padding-left: 20px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .career-hiring-title { font-size: 33px; } .career-hiring-card { min-height: 220px; } .career-hiring-card h3 { font-size: 20px; } .career-hiring-status { font-size: 13px; } .career-hiring-apply { left: 22px; bottom: 17px; } } /* ========================================================= TG MULTIMEDIA BRANDS WE'VE BUILT - SECTION 01 ========================================================= */ .tgwb-brands-section { width: 100%; /* padding: 0px 0 80px; */ position: relative; overflow: hidden; } /* ========================================================= HEADING ========================================================= */ .tgwb-brands-heading { width: 100%; max-width: 850px; margin: 0 auto 55px; text-align: center; padding: 0 20px; } .tgwb-brands-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent-color); } .tgwb-brands-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 14px var(--accent-color); } .tgwb-brands-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 700; color: var(--primary); } .tgwb-brands-heading h2 span { color: var(--accent-color); } .tgwb-brands-heading p { max-width: 650px; margin: 18px auto 0; font-size: 16px; line-height: 1.7; color: var(--text-color); opacity: 0.75; } /* ========================================================= SLIDER WRAPPER ========================================================= */ .tgwb-slider { width: 100%; overflow: hidden; position: relative; margin-bottom: 22px; /* Fade edges */ -webkit-mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% ); } /* ========================================================= TRACK ========================================================= */ .tgwb-track { display: flex; align-items: center; gap: 20px; width: max-content; will-change: transform; } /* ========================================================= IMAGE CARD ========================================================= */ .tgwb-card { position: relative; width: 310px; height: 205px; flex: 0 0 310px; overflow: hidden; border-radius: 16px; background: #111; border: 1px solid rgba(197, 44, 255, 0.28); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* ========================================================= IMAGE ========================================================= */ .tgwb-card img { display: block; width: 100%; height: 100%; /* Any image size/aspect ratio will fit automatically */ object-fit: cover; object-position: center; transition: transform 0.6s ease; } /* ========================================================= HOVER ========================================================= */ .tgwb-card:hover { transform: translateY(-6px); border-color: var(--accent-color); box-shadow: 0 15px 45px rgba(197, 44, 255, 0.22); } .tgwb-card:hover img { transform: scale(1.05); } /* ========================================================= ROW 01 LEFT -> RIGHT ========================================================= */ .tgwb-track-one { animation: tgwbSlideLeftToRight 32s linear infinite; } /* ========================================================= ROW 02 RIGHT -> LEFT ========================================================= */ .tgwb-track-two { animation: tgwbSlideRightToLeft 32s linear infinite; } /* ========================================================= ANIMATION ========================================================= */ @keyframes tgwbSlideLeftToRight { 0% { transform: translateX(calc(-50% - 10px)); } 100% { transform: translateX(0); } } @keyframes tgwbSlideRightToLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 10px)); } } /* ========================================================= PAUSE ON HOVER ========================================================= */ .tgwb-slider:hover .tgwb-track { animation-play-state: paused; } /* ========================================================= BOTTOM LINE ========================================================= */ .tgwb-bottom-line { width: 100%; max-width: 180px; height: 2px; margin: 45px auto 0; background: rgba(255, 255, 255, 0.08); overflow: hidden; border-radius: 50px; } .tgwb-bottom-line span { display: block; width: 45%; height: 100%; background: var(--accent-color); box-shadow: 0 0 12px var(--accent-color); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgwb-brands-section { padding: 65px 0 70px; } .tgwb-brands-heading { margin-bottom: 45px; } .tgwb-card { width: 275px; height: 185px; flex-basis: 275px; } .tgwb-track { gap: 17px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgwb-brands-section { padding: 55px 0 60px; } .tgwb-brands-heading { margin-bottom: 35px; padding: 0 15px; } .tgwb-brands-heading h2 { font-size: 38px; } .tgwb-brands-heading p { font-size: 14px; line-height: 1.6; } .tgwb-card { width: 235px; height: 155px; flex-basis: 235px; border-radius: 13px; } .tgwb-track { gap: 14px; } .tgwb-slider { margin-bottom: 16px; } .tgwb-track-one { animation-duration: 27s; } .tgwb-track-two { animation-duration: 27s; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgwb-brands-section { padding: 45px 0 50px; } .tgwb-brands-heading h2 { font-size: 32px; } .tgwb-brands-heading p { font-size: 13px; } .tgwb-brands-label { font-size: 11px; letter-spacing: 2px; } .tgwb-card { width: 210px; height: 140px; flex-basis: 210px; } } /* ========================================================= TG MULTIMEDIA SECTION 02 : CREATIVES WE'VE DESIGNED ========================================================= */ .tgcd-section { width: 100%; /* padding: 75px 0 80px; */ position: relative; overflow: hidden; } /* ========================================================= HEADING ========================================================= */ .tgcd-heading { width: 100%; max-width: 850px; margin: 0 auto 55px; padding: 0 20px; text-align: center; } .tgcd-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent-color); } .tgcd-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 14px var(--accent-color); } .tgcd-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 700; color: var(--primary); } .tgcd-heading h2 span { color: var(--accent-color); } .tgcd-heading p { max-width: 650px; margin: 18px auto 0; font-size: 16px; line-height: 1.7; color: var(--text-color); opacity: 0.75; } /* ========================================================= SLIDER ========================================================= */ .tgcd-slider { width: 100%; overflow: hidden; position: relative; margin-bottom: 22px; -webkit-mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% ); } /* ========================================================= TRACK ========================================================= */ .tgcd-track { display: flex; align-items: center; gap: 20px; width: max-content; will-change: transform; } /* ========================================================= CREATIVE CARD ========================================================= */ .tgcd-card { position: relative; width: 310px; height: 205px; flex: 0 0 310px; overflow: hidden; border-radius: 16px; background: #111; border: 1px solid rgba(197, 44, 255, 0.28); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* ========================================================= IMAGE ========================================================= */ .tgcd-card img { display: block; width: 100%; height: 100%; /* IMPORTANT: Any image ratio will automatically fit inside the same card. */ object-fit: cover; object-position: center; transition: transform 0.6s ease; } /* ========================================================= HOVER ========================================================= */ .tgcd-card:hover { transform: translateY(-6px); border-color: var(--accent-color); box-shadow: 0 15px 45px rgba(197, 44, 255, 0.22); } .tgcd-card:hover img { transform: scale(1.05); } /* ========================================================= ROW 01 LEFT → RIGHT ========================================================= */ .tgcd-track-one { animation: tgcdSlideLeftRight 32s linear infinite; } /* ========================================================= ROW 02 RIGHT → LEFT ========================================================= */ .tgcd-track-two { animation: tgcdSlideRightLeft 32s linear infinite; } /* ========================================================= ANIMATION ========================================================= */ @keyframes tgcdSlideLeftRight { 0% { transform: translateX(calc(-50% - 10px)); } 100% { transform: translateX(0); } } @keyframes tgcdSlideRightLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 10px)); } } /* ========================================================= PAUSE ON HOVER ========================================================= */ .tgcd-slider:hover .tgcd-track { animation-play-state: paused; } /* ========================================================= BOTTOM LINE ========================================================= */ .tgcd-bottom-line { width: 100%; max-width: 180px; height: 2px; margin: 45px auto 0; background: rgba(255, 255, 255, 0.08); overflow: hidden; border-radius: 50px; } .tgcd-bottom-line span { display: block; width: 45%; height: 100%; background: var(--accent-color); box-shadow: 0 0 12px var(--accent-color); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgcd-section { padding: 65px 0 70px; } .tgcd-heading { margin-bottom: 45px; } .tgcd-card { width: 275px; height: 185px; flex-basis: 275px; } .tgcd-track { gap: 17px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgcd-section { padding: 55px 0 60px; } .tgcd-heading { margin-bottom: 35px; padding: 0 15px; } .tgcd-heading h2 { font-size: 38px; } .tgcd-heading p { font-size: 14px; line-height: 1.6; } .tgcd-card { width: 235px; height: 155px; flex-basis: 235px; border-radius: 13px; } .tgcd-track { gap: 14px; } .tgcd-slider { margin-bottom: 16px; } .tgcd-track-one, .tgcd-track-two { animation-duration: 27s; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgcd-section { padding: 45px 0 50px; } .tgcd-heading h2 { font-size: 32px; } .tgcd-heading p { font-size: 13px; } .tgcd-label { font-size: 11px; letter-spacing: 2px; } .tgcd-card { width: 210px; height: 140px; flex-basis: 210px; } } /* ========================================================= TG MULTIMEDIA SECTION 03 : PORTFOLIO ========================================================= */ .tgpf-section { width: 100%; padding: 75px 45px 90px; position: relative; overflow: hidden; border-radius: 28px; /* Screenshot jaisa dark background */ background: linear-gradient( 145deg, rgba(28, 28, 28, 0.96), rgba(10, 10, 10, 0.98) ); /* Purple border */ border: 1px solid rgba(197, 44, 255, 0.32); /* Bottom purple glow */ box-shadow: 0 0 0 1px rgba(197, 44, 255, 0.04), 0 18px 55px rgba(0, 0, 0, 0.45), 0 12px 40px rgba(197, 44, 255, 0.08); isolation: isolate; } /* ========================================================= HEADING ========================================================= */ .tgpf-heading { width: 100%; max-width: 850px; margin: 0 auto 42px; padding: 0 20px; text-align: center; } .tgpf-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent-color); } .tgpf-label > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 14px var(--accent-color); } .tgpf-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; font-weight: 700; color: var(--primary); } .tgpf-heading h2 span { color: var(--accent-color); } .tgpf-heading p { max-width: 650px; margin: 18px auto 0; font-size: 16px; line-height: 1.7; color: var(--text-color); opacity: 0.75; } /* ========================================================= TABS ========================================================= */ .tgpf-tabs-wrap { width: 100%; overflow-x: auto; padding: 4px 15px 12px; scrollbar-width: none; -ms-overflow-style: none; } .tgpf-tabs-wrap::-webkit-scrollbar { display: none; } .tgpf-tabs { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: max-content; } .tgpf-tab { border: 1px solid rgba(197, 44, 255, 0.28); background: rgba(255, 255, 255, 0.03); color: var(--text-color); padding: 12px 22px; border-radius: 50px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; white-space: nowrap; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .tgpf-tab:hover { color: var(--accent-color); border-color: var(--accent-color); transform: translateY(-2px); } .tgpf-tab-active { color: #fff; background: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 8px 25px rgba(197, 44, 255, 0.25); } .tgpf-tab-active:hover { color: #fff; } /* ========================================================= PROJECT GRID ========================================================= */ .tgpf-project-area { width: 100%; margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } /* ========================================================= PROJECT CARD ========================================================= */ .tgpf-project-card { width: 100%; min-width: 0; overflow: hidden; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(197, 44, 255, 0.20); border-radius: 17px; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .tgpf-project-card:hover { transform: translateY(-5px); border-color: rgba(197, 44, 255, 0.75); box-shadow: 0 18px 45px rgba(197, 44, 255, 0.14); } /* ========================================================= MEDIA BOX ========================================================= */ .tgpf-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b0b; } /* ========================================================= IMAGE ========================================================= */ .tgpf-media > img { display: block; width: 100%; height: 100%; /* Any source image size will automatically fit inside this box. */ object-fit: cover; object-position: center; transition: transform 0.6s ease; } .tgpf-project-card:hover .tgpf-media > img { transform: scale(1.05); } /* ========================================================= VIDEO MEDIA ========================================================= */ .tgpf-video-media { aspect-ratio: 16 / 10; background: #000; } .tgpf-video-box { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; } /* ========================================================= HTML5 VIDEO ========================================================= */ .tgpf-html-video { display: block; width: 100%; height: 100%; background: #000; object-fit: cover; object-position: center; } /* ========================================================= CUSTOM VIDEO PLAY BUTTON ========================================================= */ .tgpf-video-start { position: absolute; top: 50%; left: 50%; width: 62px; height: 62px; padding: 0; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: var(--accent-color); color: #fff; cursor: pointer; box-shadow: 0 0 0 8px rgba(197, 44, 255, 0.14), 0 0 35px rgba(197, 44, 255, 0.45); transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; } .tgpf-video-start i { margin-left: 3px; font-size: 20px; } .tgpf-video-start:hover { transform: translate(-50%, -50%) scale(1.10); box-shadow: 0 0 0 11px rgba(197, 44, 255, 0.14), 0 0 45px rgba(197, 44, 255, 0.55); } /* Hide button after video starts */ .tgpf-video-box.tgpf-video-playing .tgpf-video-start { opacity: 0; pointer-events: none; } /* ========================================================= CARD INFORMATION ========================================================= */ .tgpf-card-info { padding: 15px 17px 18px; } .tgpf-card-info span { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1.7px; color: var(--accent-color); } .tgpf-card-info h3 { margin: 0; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--primary); } /* ========================================================= HIDDEN PROJECTS ========================================================= */ .tgpf-project-card.tgpf-project-hidden { display: none; } /* ========================================================= EMPTY MESSAGE ========================================================= */ .tgpf-empty { display: none; width: 100%; padding: 50px 20px; text-align: center; font-size: 15px; color: var(--text-color); opacity: 0.65; } /* ========================================================= BOTTOM LINE ========================================================= */ .tgpf-bottom-line { width: 100%; max-width: 180px; height: 2px; margin: 50px auto 0; overflow: hidden; border-radius: 50px; background: rgba(255, 255, 255, 0.08); } .tgpf-bottom-line span { display: block; width: 45%; height: 100%; background: var(--accent-color); box-shadow: 0 0 12px var(--accent-color); } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1199px) { .tgpf-project-area { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgpf-section { padding: 65px 30px 75px; border-radius: 24px; } .tgpf-heading { margin-bottom: 38px; } .tgpf-project-area { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } .tgpf-tabs { justify-content: flex-start; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgpf-section { padding: 55px 18px 65px; border-radius: 20px; } .tgpf-heading { margin-bottom: 30px; } .tgpf-heading h2 { font-size: 38px; } .tgpf-heading p { font-size: 14px; line-height: 1.6; } .tgpf-project-area { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; } .tgpf-tab { padding: 10px 17px; font-size: 11px; } .tgpf-card-info { padding: 12px 12px 14px; } .tgpf-card-info h3 { font-size: 14px; } .tgpf-video-start { width: 50px; height: 50px; } .tgpf-video-start i { font-size: 16px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgpf-project-area { grid-template-columns: 1fr; gap: 16px; } .tgpf-heading h2 { font-size: 32px; } .tgpf-heading p { font-size: 13px; } .tgpf-project-card { border-radius: 14px; } } /* ========================================================= TG MULTIMEDIA NEW HERO VERSION 01 ALL CLASSES ARE ISOLATED ========================================================= */ /* ========================================================= OLD HERO BACKUP ========================================================= */ .tg-old-hero-backup { display: none !important; } /* ========================================================= MAIN HERO ========================================================= */ .tg-newhero { position: relative; width: 100%; min-height: 720px; display: flex; align-items: center; overflow: hidden; padding: 70px 30px; background: radial-gradient( circle at 75% 50%, rgba(197, 44, 255, 0.10), transparent 32% ), radial-gradient( circle at 10% 20%, rgba(40, 50, 150, 0.12), transparent 35% ), var(--secondary); border: 1px solid var(--accent-color-3); border-radius: 25px; isolation: isolate; } /* ========================================================= GRID ========================================================= */ .tg-newhero-grid { position: absolute; inset: 0; background-image: linear-gradient( rgba(197, 44, 255, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(197, 44, 255, 0.035) 1px, transparent 1px ); background-size: 70px 70px; opacity: 0.55; pointer-events: none; z-index: -3; } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .tg-newhero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(20px); z-index: -2; } .tg-newhero-glow-1 { width: 550px; height: 550px; right: -220px; top: -180px; background: radial-gradient( circle, rgba(197, 44, 255, 0.18) 0%, rgba(197, 44, 255, 0.06) 38%, transparent 70% ); } .tg-newhero-glow-2 { width: 400px; height: 400px; left: -220px; bottom: -220px; background: radial-gradient( circle, rgba(197, 44, 255, 0.10) 0%, transparent 70% ); } /* ========================================================= ROW ========================================================= */ .tg-newhero-row { position: relative; z-index: 5; width: 100%; } /* ========================================================= LEFT CONTENT ========================================================= */ .tg-newhero-content { position: relative; max-width: 650px; padding: 20px 0; } /* ========================================================= LABEL ========================================================= */ .tg-newhero-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--primary); font-size: 16px; font-weight: 600; } .tg-newhero-label-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 10px var(--accent-color), 0 0 22px rgba(197, 44, 255, 0.45); } /* ========================================================= MAIN HEADING ========================================================= */ .tg-newhero-title { margin: 0; max-width: 680px; color: var(--primary); font-size: clamp(48px, 5.5vw, 78px); font-weight: 700; line-height: 1.02; letter-spacing: -2px; } .tg-newhero-title span { display: block; color: var(--accent-color); } /* ========================================================= SMALL LINE ========================================================= */ .tg-newhero-line { width: 130px; height: 3px; margin: 30px 0 25px; border-radius: 50px; background: linear-gradient( 90deg, var(--accent-color), var(--accent-transparent) ); } /* ========================================================= DESCRIPTION ========================================================= */ .tg-newhero-description { max-width: 540px; margin: 0 0 32px; color: var(--text-color); font-size: 17px; line-height: 1.7; } /* ========================================================= BUTTON ========================================================= */ .tg-newhero-actions { display: flex; align-items: center; } .tg-newhero-button { display: inline-flex; align-items: center; gap: 15px; padding: 8px 8px 8px 24px; color: var(--primary); background: var(--secondary); border: 1px solid var(--accent-color-3); border-radius: 50px; text-decoration: none; font-size: 15px; font-weight: 600; transition: all 0.4s ease; } .tg-newhero-button-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: var(--accent-color); transition: all 0.4s ease; } .tg-newhero-button:hover { color: #ffffff; border-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(197, 44, 255, 0.20); } .tg-newhero-button:hover .tg-newhero-button-icon { transform: translateX(4px); } /* ========================================================= ROBOT VISUAL ========================================================= */ .tg-newhero-visual { position: relative; width: 100%; min-height: 520px; display: flex; align-items: center; justify-content: center; } /* ========================================================= ROBOT GLOW ========================================================= */ .tg-newhero-robot-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.25) 0%, rgba(197, 44, 255, 0.10) 35%, transparent 72% ); filter: blur(12px); } /* ========================================================= ROBOT ========================================================= */ .tg-newhero-robot { position: relative; width: min(470px, 90%); z-index: 5; will-change: transform; } .tg-newhero-robot img { width: 100%; height: auto; max-height: 520px; object-fit: contain; object-position: center; display: block; filter: drop-shadow( 0 20px 30px rgba(0, 0, 0, 0.45) ) drop-shadow( 0 0 30px rgba(197, 44, 255, 0.12) ); animation: tgNewHeroRobotFloat 4.5s ease-in-out infinite; transform-origin: center center; } /* ========================================================= ROBOT FLOAT ========================================================= */ @keyframes tgNewHeroRobotFloat { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1deg); } 100% { transform: translateY(0) rotate(0deg); } } /* ========================================================= DECORATIVE CIRCLES ========================================================= */ .tg-newhero-circle { position: absolute; border: 1px solid rgba(197, 44, 255, 0.18); border-radius: 50%; pointer-events: none; } .tg-newhero-circle-1 { width: 430px; height: 430px; animation: tgNewHeroCircleRotate 18s linear infinite; } .tg-newhero-circle-2 { width: 340px; height: 340px; border-style: dashed; opacity: 0.5; animation: tgNewHeroCircleRotateReverse 14s linear infinite; } @keyframes tgNewHeroCircleRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes tgNewHeroCircleRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ========================================================= BADGES ========================================================= */ .tg-newhero-badge { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; background: rgba(12, 12, 12, 0.88); border: 1px solid rgba(197, 44, 255, 0.55); border-radius: 50px; color: var(--primary); font-size: 13px; font-weight: 600; backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30), 0 0 20px rgba(197, 44, 255, 0.08); z-index: 10; white-space: nowrap; animation: tgNewHeroBadgeFloat 4s ease-in-out infinite; } .tg-newhero-badge-icon { display: flex; align-items: center; justify-content: center; color: var(--accent-color); } .tg-newhero-badge-1 { top: 65px; right: 5px; } .tg-newhero-badge-2 { top: 190px; left: 5px; animation-delay: 0.8s; } .tg-newhero-badge-3 { bottom: 70px; right: 15px; animation-delay: 1.4s; } @keyframes tgNewHeroBadgeFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-7px); } 100% { transform: translateY(0); } } /* ========================================================= FLOOR ========================================================= */ .tg-newhero-floor { position: absolute; bottom: 55px; width: 300px; height: 45px; border-radius: 50%; background: rgba(197, 44, 255, 0.20); filter: blur(22px); } /* ========================================================= SCROLL INDICATOR ========================================================= */ .tg-newhero-scroll { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; color: var(--text-color); font-size: 11px; letter-spacing: 0.5px; opacity: 0.65; } .tg-newhero-scroll i { color: var(--accent-color); animation: tgNewHeroScrollArrow 1.5s ease-in-out infinite; } @keyframes tgNewHeroScrollArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tg-newhero { min-height: auto; padding: 65px 25px 75px; } .tg-newhero-title { font-size: clamp(42px, 6vw, 62px); } .tg-newhero-description { font-size: 16px; } .tg-newhero-visual { min-height: 450px; margin-top: 20px; } .tg-newhero-robot { width: 390px; } .tg-newhero-circle-1 { width: 370px; height: 370px; } .tg-newhero-circle-2 { width: 290px; height: 290px; } .tg-newhero-robot-glow { width: 370px; height: 370px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tg-newhero { padding: 50px 18px 65px; border-radius: 20px; } .tg-newhero-content { text-align: center; padding: 0; } .tg-newhero-label { justify-content: center; font-size: 14px; } .tg-newhero-title { font-size: clamp(38px, 10vw, 52px); line-height: 1.04; letter-spacing: -1px; } .tg-newhero-line { margin: 25px auto 20px; } .tg-newhero-description { margin-left: auto; margin-right: auto; font-size: 15px; line-height: 1.65; } .tg-newhero-actions { justify-content: center; } .tg-newhero-visual { min-height: 410px; margin-top: 25px; } .tg-newhero-robot { width: min(330px, 88%); } .tg-newhero-robot img { max-height: 390px; } .tg-newhero-robot-glow { width: 320px; height: 320px; } .tg-newhero-circle-1 { width: 320px; height: 320px; } .tg-newhero-circle-2 { width: 245px; height: 245px; } .tg-newhero-badge { padding: 8px 11px; font-size: 10px; } .tg-newhero-badge-1 { top: 30px; right: 0; } .tg-newhero-badge-2 { top: 115px; left: 0; } .tg-newhero-badge-3 { bottom: 65px; right: 0; } .tg-newhero-floor { width: 230px; bottom: 40px; } .tg-newhero-scroll { display: none; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tg-newhero { padding: 45px 14px 55px; } .tg-newhero-title { font-size: 35px; } .tg-newhero-description { font-size: 14px; } .tg-newhero-visual { min-height: 350px; } .tg-newhero-robot { width: 270px; } .tg-newhero-robot img { max-height: 330px; } .tg-newhero-robot-glow { width: 270px; height: 270px; } .tg-newhero-circle-1 { width: 270px; height: 270px; } .tg-newhero-circle-2 { width: 210px; height: 210px; } .tg-newhero-badge { font-size: 9px; padding: 7px 9px; } .tg-newhero-badge-1 { top: 20px; } .tg-newhero-badge-2 { top: 90px; } .tg-newhero-badge-3 { bottom: 50px; } } /* ===================================================== TG MULTIMEDIA - FLOATING CONTACT BUTTONS ===================================================== */ .tg-floating-contact { position: fixed; /* Right side */ right: 18px; /* Footer ke upar */ bottom: 30px; top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 99999; /* Prevent any accidental overflow */ max-width: 100%; } /* ===================================================== COMMON BUTTON ===================================================== */ .tg-float-btn { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #ffffff !important; text-decoration: none !important; font-size: 24px; border: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* ===================================================== PHONE ===================================================== */ .tg-float-phone { background: #3498db; } /* ===================================================== WHATSAPP ===================================================== */ .tg-float-whatsapp { background: #25D366; } /* ===================================================== CHAT ===================================================== */ .tg-float-chat { background: #e91e2b; } /* ===================================================== HOVER ===================================================== */ .tg-float-btn:hover { color: #ffffff !important; transform: scale(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { .tg-floating-contact { right: 10px; bottom: 20px; gap: 10px; } .tg-float-btn { width: 48px; height: 48px; font-size: 20px; } /* PHONE HIDE ON MOBILE */ .tg-float-phone { display: none; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 480px) { .tg-floating-contact { right: 8px; bottom: 15px; gap: 8px; } .tg-float-btn { width: 44px; height: 44px; font-size: 18px; } } /* ========================================================= TG MULTIMEDIA SCHOOL PAGE - 9 STEP SYSTEM ========================================================= */ .tgschoolsteps-section { width: 100%; padding: 100px 20px 110px; position: relative; overflow: hidden; background: radial-gradient( circle at 15% 20%, rgba(197, 44, 255, 0.055), transparent 28% ), radial-gradient( circle at 90% 75%, rgba(197, 44, 255, 0.05), transparent 30% ), #050505; } .tgschoolsteps-container { width: 100%; max-width: 1280px; margin: 0 auto; } /* ========================================================= HEADING ========================================================= */ .tgschoolsteps-heading { width: 100%; max-width: 850px; margin: 0 auto 55px; text-align: center; } .tgschoolsteps-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 700; letter-spacing: 2.3px; text-transform: uppercase; } .tgschoolsteps-label span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 16px rgba(197,44,255,0.65); } .tgschoolsteps-heading h2 { margin: 0; color: #ffffff; font-size: clamp(38px, 5vw, 66px); line-height: 1.04; font-weight: 700; letter-spacing: -1px; } .tgschoolsteps-heading h2 span { color: var(--accent-color); } .tgschoolsteps-heading > p { max-width: 700px; margin: 20px auto 0; color: rgba(255,255,255,0.58); font-size: 16px; line-height: 1.7; } /* ========================================================= ACCORDION ========================================================= */ .tgschoolsteps-accordion { width: 100%; display: flex; flex-direction: column; gap: 12px; } /* ========================================================= ITEM ========================================================= */ .tgschoolsteps-item { width: 100%; overflow: hidden; border-radius: 20px; background: linear-gradient( 145deg, rgba(25,25,25,0.96), rgba(10,10,10,0.98) ); border: 1px solid rgba(197,44,255,0.18); box-shadow: 0 10px 35px rgba(0,0,0,0.22); transition: border-color 0.35s ease, box-shadow 0.35s ease; } .tgschoolsteps-item:hover { border-color: rgba(197,44,255,0.38); } .tgschoolsteps-item-active { border-color: rgba(197,44,255,0.52); box-shadow: 0 18px 55px rgba(0,0,0,0.30), 0 0 35px rgba(197,44,255,0.05); } /* ========================================================= TRIGGER ========================================================= */ .tgschoolsteps-trigger { width: 100%; min-height: 92px; display: grid; grid-template-columns: 80px minmax(0,1fr) 52px; align-items: center; gap: 20px; padding: 14px 20px 14px 14px; border: 0; background: transparent; color: #ffffff; font-family: inherit; text-align: left; cursor: pointer; } .tgschoolsteps-number { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(197,44,255,0.08); border: 1px solid rgba(197,44,255,0.25); color: var(--accent-color); font-size: 15px; font-weight: 700; letter-spacing: 1px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .tgschoolsteps-trigger-text { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #ffffff; font-size: clamp(16px, 2vw, 22px); font-weight: 650; line-height: 1.3; } .tgschoolsteps-trigger-text small { color: var(--accent-color); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } .tgschoolsteps-arrow { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.75); transition: transform 0.4s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ACTIVE TRIGGER */ .tgschoolsteps-item-active .tgschoolsteps-number { background: var(--accent-color); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(197,44,255,0.24); } .tgschoolsteps-item-active .tgschoolsteps-arrow { background: var(--accent-color); border-color: var(--accent-color); color: #ffffff; transform: rotate(45deg); } /* ========================================================= CONTENT ========================================================= */ .tgschoolsteps-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s ease; } .tgschoolsteps-item-active .tgschoolsteps-content { grid-template-rows: 1fr; } .tgschoolsteps-content-inner { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 45px; padding: 0 35px 35px 35px; border-top: 1px solid rgba(255,255,255,0.06); } /* ========================================================= COPY ========================================================= */ .tgschoolsteps-copy { padding-top: 30px; } .tgschoolsteps-kicker { display: inline-flex; margin-bottom: 12px; padding: 6px 10px; border-radius: 50px; color: var(--accent-color); background: rgba(197,44,255,0.07); border: 1px solid rgba(197,44,255,0.16); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .tgschoolsteps-copy h3 { margin: 0 0 17px; color: #ffffff; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; font-weight: 700; } .tgschoolsteps-copy h3 span { color: var(--accent-color); } .tgschoolsteps-copy p { margin: 0 0 15px; color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.75; } .tgschoolsteps-copy ul { margin: 12px 0 18px; padding: 0; list-style: none; } .tgschoolsteps-copy li { position: relative; margin-bottom: 10px; padding-left: 22px; color: rgba(255,255,255,0.68); font-size: 14px; line-height: 1.6; } .tgschoolsteps-copy li::before { content: ""; position: absolute; top: 9px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 10px rgba(197,44,255,0.5); } /* ========================================================= BENEFIT ========================================================= */ .tgschoolsteps-benefit { margin-top: 24px; padding: 20px; border-radius: 16px; background: rgba(197,44,255,0.035); border: 1px solid rgba(197,44,255,0.15); } .tgschoolsteps-benefit h4 { margin: 0 0 14px; color: #ffffff; font-size: 15px; font-weight: 700; } .tgschoolsteps-benefit p { margin-bottom: 10px; } /* ========================================================= RESULT ========================================================= */ .tgschoolsteps-result { margin-top: 18px; padding: 15px 17px; border-left: 2px solid var(--accent-color); background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.63); font-size: 13px; line-height: 1.65; } .tgschoolsteps-result strong { display: block; margin-bottom: 4px; color: var(--accent-color); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } /* ========================================================= VISUAL ========================================================= */ .tgschoolsteps-visual { min-width: 0; padding-top: 30px; } /* ========================================================= MAIN MEDIA ========================================================= */ .tgschoolsteps-media { width: 100%; min-height: 330px; overflow: hidden; border-radius: 20px; background: #080808; border: 1px solid rgba(197,44,255,0.22); box-shadow: 0 15px 45px rgba(0,0,0,0.28); } .tgschoolsteps-media img { display: block; width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: center; } /* ========================================================= MINI GALLERY ========================================================= */ .tgschoolsteps-mini-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .tgschoolsteps-mini-card { min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #000; border: 1px solid rgba(197,44,255,0.18); } .tgschoolsteps-mini-card video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } /* ========================================================= CREATIVE GRID ========================================================= */ .tgschoolsteps-creative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .tgschoolsteps-creative { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 15px; background: #0b0b0b; border: 1px solid rgba(197,44,255,0.17); } .tgschoolsteps-creative img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .tgschoolsteps-creative:hover img { transform: scale(1.05); } /* ========================================================= PHOTO MOSAIC ========================================================= */ .tgschoolsteps-photo-mosaic { display: grid; grid-template-columns: 1.25fr 0.75fr; grid-template-rows: repeat(2, minmax(150px, 1fr)); gap: 12px; } .tgschoolsteps-photo-mosaic > div { min-width: 0; overflow: hidden; border-radius: 15px; border: 1px solid rgba(197,44,255,0.17); background: #0b0b0b; } .tgschoolsteps-photo-mosaic img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; } .tgschoolsteps-photo-mosaic div:hover img { transform: scale(1.05); } .tgschoolsteps-photo-large { grid-row: 1 / span 2; } /* ========================================================= SERVICE LIST ========================================================= */ .tgschoolsteps-service-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; } .tgschoolsteps-service-list span { padding: 9px 13px; border-radius: 50px; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.035); border: 1px solid rgba(197,44,255,0.16); font-size: 11px; } /* ========================================================= ADMISSION FUNNEL ========================================================= */ .tgschoolsteps-funnel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0; } .tgschoolsteps-funnel div { padding: 9px 12px; border-radius: 50px; color: #fff; background: rgba(197,44,255,0.08); border: 1px solid rgba(197,44,255,0.20); font-size: 9px; font-weight: 700; letter-spacing: 1px; } .tgschoolsteps-funnel i { color: var(--accent-color); font-size: 10px; } /* ========================================================= VIDEO GRID ========================================================= */ .tgschoolsteps-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .tgschoolsteps-video-card { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 15px; background: #000; border: 1px solid rgba(197,44,255,0.18); } .tgschoolsteps-video-card video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; } /* ========================================================= WEBSITE GRID ========================================================= */ .tgschoolsteps-website-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 13px; } .tgschoolsteps-website-grid > div { min-width: 0; overflow: hidden; border-radius: 16px; background: #0b0b0b; border: 1px solid rgba(197,44,255,0.18); } .tgschoolsteps-website-grid img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= WEEKLY PLAN ========================================================= */ .tgschoolsteps-week { margin-top: 22px; } .tgschoolsteps-week h4 { margin: 0 0 13px; color: #fff; font-size: 15px; } .tgschoolsteps-week-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .tgschoolsteps-week-grid div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.14); } .tgschoolsteps-week-grid b { color: var(--accent-color); font-size: 9px; letter-spacing: 1.4px; } .tgschoolsteps-week-grid span { color: rgba(255,255,255,0.62); font-size: 11px; line-height: 1.4; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgschoolsteps-section { padding: 75px 18px 85px; } .tgschoolsteps-content-inner { grid-template-columns: 1fr; gap: 30px; } .tgschoolsteps-copy { padding-top: 25px; } .tgschoolsteps-visual { padding-top: 0; } .tgschoolsteps-media { min-height: 300px; } .tgschoolsteps-media img { min-height: 300px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgschoolsteps-section { padding: 60px 12px 70px; } .tgschoolsteps-heading { margin-bottom: 35px; } .tgschoolsteps-heading h2 { font-size: 38px; } .tgschoolsteps-heading > p { font-size: 14px; } .tgschoolsteps-trigger { min-height: 78px; grid-template-columns: 54px minmax(0, 1fr) 42px; gap: 12px; padding: 10px 12px 10px 10px; } .tgschoolsteps-number { width: 48px; height: 48px; border-radius: 13px; font-size: 12px; } .tgschoolsteps-trigger-text { font-size: 15px; } .tgschoolsteps-trigger-text small { font-size: 8px; } .tgschoolsteps-arrow { width: 38px; height: 38px; font-size: 12px; } .tgschoolsteps-content-inner { gap: 22px; padding: 0 16px 20px; } .tgschoolsteps-copy h3 { font-size: 28px; } .tgschoolsteps-copy p, .tgschoolsteps-copy li { font-size: 13px; } .tgschoolsteps-media { min-height: 240px; border-radius: 15px; } .tgschoolsteps-media img { min-height: 240px; } .tgschoolsteps-photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 150px); } .tgschoolsteps-video-grid { gap: 9px; } .tgschoolsteps-creative-grid { gap: 9px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgschoolsteps-heading h2 { font-size: 32px; } .tgschoolsteps-label { font-size: 10px; } .tgschoolsteps-trigger { grid-template-columns: 45px minmax(0, 1fr) 36px; gap: 9px; } .tgschoolsteps-number { width: 42px; height: 42px; } .tgschoolsteps-trigger-text { font-size: 13px; } .tgschoolsteps-arrow { width: 34px; height: 34px; } .tgschoolsteps-copy h3 { font-size: 25px; } .tgschoolsteps-week-grid { grid-template-columns: 1fr; } .tgschoolsteps-website-grid { grid-template-columns: 1fr; } .tgschoolsteps-website-grid > div { max-height: 360px; } } /* ========================================================= TG MULTIMEDIA TERMS & CONDITIONS PAGE ========================================================= */ .tgterms-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .tgterms-hero { position: relative; width: 100%; padding: 100px 20px 90px; overflow: hidden; background: radial-gradient( circle at 75% 30%, rgba(197, 44, 255, 0.12), transparent 30% ), #050505; } .tgterms-hero-content { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .tgterms-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 700; letter-spacing: 2.3px; text-transform: uppercase; } .tgterms-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,0.7); } .tgterms-hero h1 { margin: 0; color: #fff; font-size: clamp(42px, 6vw, 78px); line-height: 1.02; font-weight: 700; letter-spacing: -1.5px; } .tgterms-hero h1 span { color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,0.18); } .tgterms-hero-content > p { max-width: 760px; margin: 24px auto 0; color: rgba(255,255,255,0.58); font-size: 16px; line-height: 1.75; } .tgterms-updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; padding: 10px 15px; border-radius: 50px; background: rgba(255,255,255,0.03); border: 1px solid rgba(197,44,255,0.18); color: rgba(255,255,255,0.50); font-size: 11px; } .tgterms-updated i { color: var(--accent-color); } .tgterms-updated strong { color: rgba(255,255,255,0.75); font-weight: 600; } /* ========================================================= HERO GLOW ========================================================= */ .tgterms-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); } .tgterms-glow-one { width: 400px; height: 400px; right: -190px; top: 20px; background: radial-gradient( circle, rgba(197,44,255,0.10), transparent 70% ); } .tgterms-glow-two { width: 300px; height: 300px; left: -150px; bottom: -150px; background: radial-gradient( circle, rgba(197,44,255,0.06), transparent 70% ); } /* ========================================================= CONTENT SECTION ========================================================= */ .tgterms-content-section { width: 100%; padding: 80px 20px 110px; background: #050505; } /* ========================================================= TWO COLUMN LAYOUT ========================================================= */ .tgterms-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 45px; align-items: start; } /* ========================================================= SIDEBAR ========================================================= */ .tgterms-sidebar { position: sticky; top: 110px; } .tgterms-sidebar-card { display: flex; flex-direction: column; padding: 22px; border-radius: 20px; background: linear-gradient( 145deg, rgba(25,25,25,0.95), rgba(10,10,10,0.98) ); border: 1px solid rgba(197,44,255,0.18); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } .tgterms-sidebar-title { margin-bottom: 15px; color: var(--accent-color); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } .tgterms-sidebar-card a { padding: 9px 0; color: rgba(255,255,255,0.52); font-size: 11px; line-height: 1.4; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.045); transition: color 0.3s ease, padding-left 0.3s ease; } .tgterms-sidebar-card a:last-child { border-bottom: 0; } .tgterms-sidebar-card a:hover { color: var(--accent-color); padding-left: 4px; } /* ========================================================= TERMS BLOCK ========================================================= */ .tgterms-block { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 22px; margin-bottom: 22px; padding: 28px; border-radius: 22px; background: linear-gradient( 145deg, rgba(24,24,24,0.96), rgba(10,10,10,0.98) ); border: 1px solid rgba(197,44,255,0.16); box-shadow: 0 12px 35px rgba(0,0,0,0.22); scroll-margin-top: 110px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .tgterms-block:hover { border-color: rgba(197,44,255,0.34); transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0,0,0,0.28); } /* ========================================================= NUMBER ========================================================= */ .tgterms-number { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(197,44,255,0.08); border: 1px solid rgba(197,44,255,0.22); color: var(--accent-color); font-size: 11px; font-weight: 700; letter-spacing: 1px; } /* ========================================================= BLOCK CONTENT ========================================================= */ .tgterms-block-content h2 { margin: 0 0 17px; color: #fff; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 700; } .tgterms-block-content p { margin: 0 0 15px; color: rgba(255,255,255,0.60); font-size: 14px; line-height: 1.8; } /* ========================================================= LIST ========================================================= */ .tgterms-list { list-style: none; margin: 18px 0 0; padding: 0; } .tgterms-list li { position: relative; margin-bottom: 12px; padding-left: 23px; color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.7; } .tgterms-list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 10px rgba(197,44,255,0.45); } /* ========================================================= SERVICES ========================================================= */ .tgterms-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 22px 0; } .tgterms-service-grid > div { min-height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px; text-align: center; border-radius: 13px; background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.12); color: rgba(255,255,255,0.62); font-size: 10px; line-height: 1.35; } .tgterms-service-grid i { color: var(--accent-color); font-size: 16px; } /* ========================================================= HIGHLIGHT ========================================================= */ .tgterms-highlight { display: flex; align-items: flex-start; gap: 14px; margin: 22px 0; padding: 18px; border-radius: 15px; background: rgba(197,44,255,0.04); border: 1px solid rgba(197,44,255,0.15); } .tgterms-highlight > i { color: var(--accent-color); margin-top: 3px; font-size: 18px; } .tgterms-highlight div { display: flex; flex-direction: column; gap: 5px; } .tgterms-highlight strong { color: #fff; font-size: 13px; } .tgterms-highlight span { color: rgba(255,255,255,0.57); font-size: 12px; line-height: 1.6; } /* ========================================================= CONTACT ========================================================= */ .tgterms-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 25px; } .tgterms-contact-grid a, .tgterms-contact-grid > div { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.12); color: rgba(255,255,255,0.62); text-decoration: none; } .tgterms-contact-grid i { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(197,44,255,0.08); color: var(--accent-color); font-size: 13px; } .tgterms-contact-grid span { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; overflow-wrap: anywhere; } .tgterms-contact-grid small { color: rgba(255,255,255,0.40); font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; } /* ========================================================= FINAL NOTE ========================================================= */ .tgterms-final-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); font-size: 15px; font-weight: 700; } .tgterms-final-note span { display: block; margin-top: 5px; color: rgba(255,255,255,0.40); font-size: 11px; font-weight: 400; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgterms-hero { padding: 80px 20px 70px; } .tgterms-layout { grid-template-columns: 1fr; } .tgterms-sidebar { position: static; } .tgterms-sidebar-card { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; } .tgterms-sidebar-title { grid-column: 1 / -1; } .tgterms-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .tgterms-contact-grid { grid-template-columns: 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgterms-hero { padding: 60px 15px 60px; } .tgterms-hero h1 { font-size: 42px; } .tgterms-hero-content > p { font-size: 14px; } .tgterms-content-section { padding: 55px 15px 70px; } .tgterms-sidebar-card { grid-template-columns: 1fr; } .tgterms-block { grid-template-columns: 1fr; gap: 16px; padding: 22px; } .tgterms-number { width: 42px; height: 42px; border-radius: 12px; } .tgterms-block-content h2 { font-size: 26px; } .tgterms-block-content p, .tgterms-list li { font-size: 13px; } .tgterms-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgterms-hero h1 { font-size: 35px; } .tgterms-eyebrow { font-size: 10px; letter-spacing: 1.7px; } .tgterms-updated { font-size: 10px; } .tgterms-service-grid { grid-template-columns: 1fr; } .tgterms-contact-grid a, .tgterms-contact-grid > div { padding: 13px; } } /* ========================================================= TG MULTIMEDIA PRIVACY POLICY PAGE ========================================================= */ .tgprivacy-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .tgprivacy-hero { position: relative; width: 100%; padding: 100px 20px 90px; overflow: hidden; background: radial-gradient( circle at 75% 30%, rgba(197, 44, 255, 0.12), transparent 30% ), #050505; } .tgprivacy-hero-content { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .tgprivacy-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 700; letter-spacing: 2.3px; text-transform: uppercase; } .tgprivacy-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,0.7); } .tgprivacy-hero h1 { margin: 0; color: #fff; font-size: clamp(42px, 6vw, 78px); line-height: 1.02; font-weight: 700; letter-spacing: -1.5px; } .tgprivacy-hero h1 span { color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,0.18); } .tgprivacy-hero-content > p { max-width: 760px; margin: 24px auto 0; color: rgba(255,255,255,0.58); font-size: 16px; line-height: 1.75; } .tgprivacy-updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; padding: 10px 15px; border-radius: 50px; background: rgba(255,255,255,0.03); border: 1px solid rgba(197,44,255,0.18); color: rgba(255,255,255,0.50); font-size: 11px; } .tgprivacy-updated i { color: var(--accent-color); } .tgprivacy-updated strong { color: rgba(255,255,255,0.75); font-weight: 600; } /* ========================================================= HERO GLOW ========================================================= */ .tgprivacy-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); } .tgprivacy-hero-glow-one { width: 400px; height: 400px; right: -190px; top: 20px; background: radial-gradient( circle, rgba(197,44,255,0.10), transparent 70% ); } .tgprivacy-hero-glow-two { width: 300px; height: 300px; left: -150px; bottom: -150px; background: radial-gradient( circle, rgba(197,44,255,0.06), transparent 70% ); } /* ========================================================= CONTENT SECTION ========================================================= */ .tgprivacy-content-section { width: 100%; padding: 80px 20px 110px; background: #050505; } /* ========================================================= TWO COLUMN ========================================================= */ .tgprivacy-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 45px; align-items: start; } /* ========================================================= SIDEBAR ========================================================= */ .tgprivacy-sidebar { position: sticky; top: 110px; } .tgprivacy-sidebar-card { display: flex; flex-direction: column; padding: 22px; border-radius: 20px; background: linear-gradient( 145deg, rgba(25,25,25,0.95), rgba(10,10,10,0.98) ); border: 1px solid rgba(197,44,255,0.18); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } .tgprivacy-sidebar-title { margin-bottom: 15px; color: var(--accent-color); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } .tgprivacy-sidebar-card a { padding: 9px 0; color: rgba(255,255,255,0.52); font-size: 11px; line-height: 1.4; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.045); transition: color 0.3s ease, padding-left 0.3s ease; } .tgprivacy-sidebar-card a:last-child { border-bottom: 0; } .tgprivacy-sidebar-card a:hover { color: var(--accent-color); padding-left: 4px; } /* ========================================================= PRIVACY BLOCK ========================================================= */ .tgprivacy-block { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 22px; margin-bottom: 22px; padding: 28px; border-radius: 22px; background: linear-gradient( 145deg, rgba(24,24,24,0.96), rgba(10,10,10,0.98) ); border: 1px solid rgba(197,44,255,0.16); box-shadow: 0 12px 35px rgba(0,0,0,0.22); scroll-margin-top: 110px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .tgprivacy-block:hover { border-color: rgba(197,44,255,0.34); transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0,0,0,0.28); } /* ========================================================= NUMBER ========================================================= */ .tgprivacy-number { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(197,44,255,0.08); border: 1px solid rgba(197,44,255,0.22); color: var(--accent-color); font-size: 11px; font-weight: 700; letter-spacing: 1px; } /* ========================================================= BLOCK CONTENT ========================================================= */ .tgprivacy-block-content h2 { margin: 0 0 17px; color: #fff; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 700; } .tgprivacy-block-content p { margin: 0 0 15px; color: rgba(255,255,255,0.60); font-size: 14px; line-height: 1.8; } /* ========================================================= LIST ========================================================= */ .tgprivacy-list { list-style: none; margin: 18px 0 0; padding: 0; } .tgprivacy-list li { position: relative; margin-bottom: 12px; padding-left: 23px; color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.7; } .tgprivacy-list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 10px rgba(197,44,255,0.45); } /* ========================================================= DATA GRID ========================================================= */ .tgprivacy-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 22px 0; } .tgprivacy-data-grid > div { min-height: 145px; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 15px; background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.13); } .tgprivacy-data-grid i { color: var(--accent-color); font-size: 17px; } .tgprivacy-data-grid strong { color: #fff; font-size: 13px; } .tgprivacy-data-grid span { color: rgba(255,255,255,0.54); font-size: 11px; line-height: 1.6; } /* ========================================================= HIGHLIGHT BOX ========================================================= */ .tgprivacy-highlight { display: flex; align-items: flex-start; gap: 14px; margin: 22px 0; padding: 18px; border-radius: 15px; background: rgba(197,44,255,0.04); border: 1px solid rgba(197,44,255,0.15); } .tgprivacy-highlight > i { margin-top: 3px; color: var(--accent-color); font-size: 18px; } .tgprivacy-highlight div { display: flex; flex-direction: column; gap: 5px; } .tgprivacy-highlight strong { color: #fff; font-size: 13px; } .tgprivacy-highlight span { color: rgba(255,255,255,0.57); font-size: 12px; line-height: 1.6; } /* ========================================================= COOKIE BOX ========================================================= */ .tgprivacy-cookie-box { display: flex; align-items: center; gap: 15px; margin-top: 22px; padding: 17px; border-radius: 15px; background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.13); } .tgprivacy-cookie-box > div { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(197,44,255,0.08); color: var(--accent-color); } .tgprivacy-cookie-box p { margin: 0; font-size: 12px; line-height: 1.65; } /* ========================================================= CONTACT GRID ========================================================= */ .tgprivacy-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 25px; } .tgprivacy-contact-grid a, .tgprivacy-contact-grid > div { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.12); color: rgba(255,255,255,0.62); text-decoration: none; } .tgprivacy-contact-grid i { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(197,44,255,0.08); color: var(--accent-color); font-size: 13px; } .tgprivacy-contact-grid span { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; overflow-wrap: anywhere; } .tgprivacy-contact-grid small { color: rgba(255,255,255,0.40); font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; } /* ========================================================= FINAL NOTE ========================================================= */ .tgprivacy-final-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); font-size: 15px; font-weight: 700; } .tgprivacy-final-note span { display: block; margin-top: 5px; color: rgba(255,255,255,0.40); font-size: 11px; font-weight: 400; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgprivacy-hero { padding: 80px 20px 70px; } .tgprivacy-layout { grid-template-columns: 1fr; } .tgprivacy-sidebar { position: static; } .tgprivacy-sidebar-card { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; } .tgprivacy-sidebar-title { grid-column: 1 / -1; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgprivacy-hero { padding: 60px 15px 60px; } .tgprivacy-hero h1 { font-size: 42px; } .tgprivacy-hero-content > p { font-size: 14px; } .tgprivacy-content-section { padding: 55px 15px 70px; } .tgprivacy-sidebar-card { grid-template-columns: 1fr; } .tgprivacy-block { grid-template-columns: 1fr; gap: 16px; padding: 22px; } .tgprivacy-number { width: 42px; height: 42px; border-radius: 12px; } .tgprivacy-block-content h2 { font-size: 26px; } .tgprivacy-block-content p, .tgprivacy-list li { font-size: 13px; } .tgprivacy-data-grid { grid-template-columns: 1fr; } .tgprivacy-contact-grid { grid-template-columns: 1fr; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgprivacy-hero h1 { font-size: 35px; } .tgprivacy-eyebrow { font-size: 10px; letter-spacing: 1.7px; } .tgprivacy-updated { font-size: 10px; } .tgprivacy-contact-grid a, .tgprivacy-contact-grid > div { padding: 13px; } } /* ========================================================= TG MULTIMEDIA DIGITAL MARKETING SERVICE PAGE ========================================================= */ .tgdm-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .tgdm-hero { position: relative; width: 100%; padding: 35px 20px 100px; overflow: hidden; background: radial-gradient( circle at 82% 40%, rgba(197,44,255,0.11), transparent 30% ), #050505; } .tgdm-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; } .tgdm-hero-glow-one { width: 500px; height: 500px; right: -240px; top: 100px; background: radial-gradient( circle, rgba(197,44,255,0.10), transparent 70% ); } .tgdm-hero-glow-two { width: 350px; height: 350px; left: -180px; bottom: -200px; background: radial-gradient( circle, rgba(197,44,255,0.06), transparent 70% ); } /* ========================================================= BREADCRUMB ========================================================= */ .tgdm-breadcrumb { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin-bottom: 55px; color: rgba(255,255,255,0.40); font-size: 11px; } .tgdm-breadcrumb a { color: rgba(255,255,255,0.50); text-decoration: none; } .tgdm-breadcrumb a:hover { color: var(--accent-color); } .tgdm-breadcrumb i { color: var(--accent-color); font-size: 9px; } /* ========================================================= HERO GRID ========================================================= */ .tgdm-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.90fr); align-items: center; gap: 75px; } /* ========================================================= EYEBROW ========================================================= */ .tgdm-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; } .tgdm-eyebrow span, .tgdm-section-label span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,0.65); } /* ========================================================= HERO TITLE ========================================================= */ .tgdm-hero-content h1 { margin: 0; color: #fff; font-size: clamp(45px, 5.6vw, 76px); line-height: 1.02; font-weight: 700; letter-spacing: -1.5px; } .tgdm-hero-content h1 span { color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,0.18); } .tgdm-hero-content > p { max-width: 650px; margin: 25px 0 0; color: rgba(255,255,255,0.60); font-size: 16px; line-height: 1.75; } /* ========================================================= HERO BUTTONS ========================================================= */ .tgdm-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .tgdm-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 50px; padding: 6px 7px 6px 20px; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .tgdm-btn-primary { color: #fff; background: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(197,44,255,0.20); } .tgdm-btn-primary span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgdm-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,0.30); } .tgdm-btn-secondary { padding: 0 22px; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.25); } .tgdm-btn-secondary:hover { color: #fff; border-color: var(--accent-color); transform: translateY(-3px); background: rgba(197,44,255,0.07); } /* ========================================================= HERO VISUAL ========================================================= */ .tgdm-hero-visual { position: relative; } .tgdm-growth-card { position: relative; width: 100%; padding: 30px; border-radius: 28px; overflow: hidden; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(9,9,9,.99) ); border: 1px solid rgba(197,44,255,.26); box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 40px rgba(197,44,255,.06); } .tgdm-growth-card::before { content: ""; position: absolute; width: 280px; height: 280px; right: -130px; top: -130px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.13), transparent 70% ); } .tgdm-growth-top { position: relative; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.40); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } .tgdm-growth-top i { color: var(--accent-color); } .tgdm-growth-title { position: relative; margin-top: 35px; color: #fff; font-size: clamp(32px, 4vw, 49px); line-height: 1.02; font-weight: 500; } .tgdm-growth-title strong { display: block; color: var(--accent-color); font-weight: 700; } .tgdm-growth-line { width: 100%; height: 1px; margin: 30px 0 22px; background: linear-gradient( 90deg, var(--accent-color), rgba(197,44,255,.15), transparent ); } .tgdm-growth-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; } .tgdm-growth-item { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 10px; border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.72); font-size: 11px; } .tgdm-growth-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--accent-color); background: rgba(197,44,255,.08); } .tgdm-growth-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: 1px; } .tgdm-growth-footer i { color: var(--accent-color); margin-right: 4px; } /* ========================================================= SECTION HEADINGS ========================================================= */ .tgdm-section-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.60); font-size: 11px; font-weight: 700; letter-spacing: 2px; } .tgdm-section-heading { max-width: 800px; margin: 0 auto 50px; text-align: center; } .tgdm-section-heading h2, .tgdm-process-heading h2, .tgdm-why-content h2 { margin: 0; color: #fff; font-size: clamp(36px,5vw,60px); line-height: 1.05; font-weight: 700; } .tgdm-section-heading h2 span, .tgdm-process-heading h2 span, .tgdm-why-content h2 span { color: var(--accent-color); } .tgdm-section-heading > p { max-width: 670px; margin: 18px auto 0; color: rgba(255,255,255,.56); font-size: 15px; line-height: 1.7; } /* ========================================================= OVERVIEW ========================================================= */ .tgdm-overview { width: 100%; padding: 100px 20px; background: #050505; } .tgdm-services-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; } .tgdm-service-card { position: relative; min-height: 290px; padding: 25px; overflow: hidden; border-radius: 21px; background: linear-gradient( 145deg, rgba(25,25,25,.97), rgba(10,10,10,.98) ); border: 1px solid rgba(197,44,255,.16); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .tgdm-service-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.50); box-shadow: 0 18px 45px rgba(197,44,255,.09); } .tgdm-service-number { color: rgba(255,255,255,.20); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; } .tgdm-service-icon { width: 53px; height: 53px; display: flex; align-items: center; justify-content: center; margin-top: 30px; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 18px; } .tgdm-service-card h3 { margin: 22px 0 12px; color: #fff; font-size: 20px; font-weight: 700; } .tgdm-service-card p { margin: 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.7; } /* ========================================================= PROCESS ========================================================= */ .tgdm-process { padding: 100px 20px; background: radial-gradient( circle at center, rgba(197,44,255,.035), transparent 45% ), #080808; } .tgdm-process-heading { text-align: center; margin-bottom: 60px; } .tgdm-process-track { display: flex; align-items: flex-start; justify-content: center; gap: 14px; } .tgdm-process-step { width: 230px; text-align: center; } .tgdm-process-circle { width: 65px; height: 65px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(197,44,255,.10); border: 1px solid rgba(197,44,255,.30); font-size: 12px; font-weight: 700; box-shadow: 0 0 30px rgba(197,44,255,.06); } .tgdm-process-step h3 { margin: 0 0 10px; color: #fff; font-size: 17px; font-weight: 700; } .tgdm-process-step p { margin: 0; color: rgba(255,255,255,.50); font-size: 12px; line-height: 1.65; } .tgdm-process-line { width: 70px; height: 1px; margin-top: 32px; background: linear-gradient( 90deg, rgba(197,44,255,.10), rgba(197,44,255,.50), rgba(197,44,255,.10) ); } /* ========================================================= WHY TG ========================================================= */ .tgdm-why { padding: 100px 20px; background: #050505; } .tgdm-why-grid { display: grid; grid-template-columns: 0.9fr 1fr; gap: 70px; align-items: center; } .tgdm-why-card { position: relative; min-height: 430px; padding: 28px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-radius: 26px; background: linear-gradient( 145deg, #171717, #090909 ); border: 1px solid rgba(197,44,255,.22); box-shadow: 0 20px 60px rgba(0,0,0,.35); } .tgdm-why-card::after { content: ""; position: absolute; width: 350px; height: 350px; right: -180px; bottom: -180px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.14), transparent 70% ); } .tgdm-why-card-top { display: flex; justify-content: space-between; color: rgba(255,255,255,.40); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } .tgdm-why-card-top i { color: var(--accent-color); font-size: 18px; } .tgdm-why-big-text { position: relative; z-index: 2; color: #fff; font-size: clamp(48px,6vw,75px); line-height: 1; font-weight: 700; letter-spacing: -2px; } .tgdm-why-big-text span { display: block; color: var(--accent-color); } .tgdm-why-bars { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 10px; height: 90px; } .tgdm-why-bars div { width: 36px; height: 25px; overflow: hidden; border-radius: 7px 7px 0 0; background: rgba(255,255,255,.05); } .tgdm-why-bars div:nth-child(2) { height: 45px; } .tgdm-why-bars div:nth-child(3) { height: 65px; } .tgdm-why-bars div:nth-child(4) { height: 85px; } .tgdm-why-bars span { display: block; width: 100%; height: 100%; background: linear-gradient( to top, rgba(197,44,255,.28), rgba(197,44,255,.80) ); } .tgdm-why-small { position: relative; z-index: 2; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: 1px; } .tgdm-why-content h2 { max-width: 620px; } .tgdm-why-content > p { max-width: 620px; margin: 22px 0; color: rgba(255,255,255,.56); font-size: 15px; line-height: 1.75; } .tgdm-check-list { display: flex; flex-direction: column; gap: 13px; } .tgdm-check-list > div { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; } .tgdm-check-list i { color: var(--accent-color); margin-top: 2px; } /* ========================================================= CTA ========================================================= */ .tgdm-cta { padding: 40px 20px 110px; background: #050505; } .tgdm-cta-box { position: relative; padding: 85px 30px; overflow: hidden; border-radius: 28px; text-align: center; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(10,10,10,.99) ); border: 1px solid rgba(197,44,255,.28); box-shadow: 0 18px 55px rgba(0,0,0,.35); } .tgdm-cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-color), transparent ); } .tgdm-cta-glow { position: absolute; width: 500px; height: 300px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(197,44,255,.11), transparent 70% ); } .tgdm-cta-content { position: relative; z-index: 2; } .tgdm-cta-content h2 { max-width: 800px; margin: 0 auto; color: #fff; font-size: clamp(36px,5vw,62px); line-height: 1.04; font-weight: 700; } .tgdm-cta-content h2 span { color: var(--accent-color); } .tgdm-cta-content p { max-width: 650px; margin: 18px auto 0; color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.7; } .tgdm-cta-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; padding: 6px 7px 6px 20px; border-radius: 50px; background: var(--accent-color); border: 1px solid var(--accent-color); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(197,44,255,.20); transition: transform .3s ease, box-shadow .3s ease; } .tgdm-cta-button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgdm-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .tgdm-hero-grid { gap: 45px; } .tgdm-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgdm-why-grid { gap: 45px; } } /* ========================================================= 991px ========================================================= */ @media (max-width: 991px) { .tgdm-hero { padding-top: 30px; } .tgdm-hero-grid { grid-template-columns: 1fr; gap: 50px; } .tgdm-hero-content { text-align: center; } .tgdm-eyebrow { justify-content: center; } .tgdm-hero-content > p { margin-left: auto; margin-right: auto; } .tgdm-hero-buttons { justify-content: center; } .tgdm-hero-visual { max-width: 700px; width: 100%; margin: auto; } .tgdm-process-track { flex-wrap: wrap; } .tgdm-process-line { display: none; } .tgdm-process-step { width: 45%; } .tgdm-why-grid { grid-template-columns: 1fr; } .tgdm-why-card { max-width: 700px; width: 100%; margin: auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgdm-hero { padding: 25px 15px 70px; } .tgdm-breadcrumb { margin-bottom: 40px; } .tgdm-hero-content h1 { font-size: 43px; } .tgdm-hero-content > p { font-size: 14px; } .tgdm-hero-buttons { flex-direction: column; } .tgdm-btn { width: 100%; max-width: 300px; } .tgdm-growth-card { padding: 21px; border-radius: 22px; } .tgdm-growth-items { grid-template-columns: 1fr; } .tgdm-overview, .tgdm-process, .tgdm-why { padding: 70px 15px; } .tgdm-section-heading h2, .tgdm-process-heading h2, .tgdm-why-content h2 { font-size: 38px; } .tgdm-services-grid { grid-template-columns: 1fr; } .tgdm-service-card { min-height: auto; } .tgdm-process-step { width: 100%; max-width: 330px; } .tgdm-why-card { min-height: 360px; } .tgdm-cta { padding: 15px 15px 70px; } .tgdm-cta-box { padding: 60px 20px; border-radius: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgdm-hero-content h1 { font-size: 35px; } .tgdm-eyebrow, .tgdm-section-label { font-size: 10px; letter-spacing: 1.6px; } .tgdm-growth-title { font-size: 31px; } .tgdm-section-heading h2, .tgdm-process-heading h2, .tgdm-why-content h2 { font-size: 32px; } .tgdm-why-big-text { font-size: 52px; } .tgdm-cta-content h2 { font-size: 32px; } } /* ========================================================= TG MULTIMEDIA SOCIAL MEDIA MANAGEMENT PAGE ========================================================= */ .tgsmm-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .tgsmm-hero { position: relative; width: 100%; padding: 35px 20px 100px; overflow: hidden; background: radial-gradient( circle at 82% 40%, rgba(197,44,255,0.11), transparent 30% ), #050505; } .tgsmm-glow { position: absolute; border-radius: 50%; pointer-events: none; } .tgsmm-glow-one { width: 500px; height: 500px; right: -240px; top: 70px; background: radial-gradient( circle, rgba(197,44,255,0.10), transparent 70% ); } .tgsmm-glow-two { width: 340px; height: 340px; left: -170px; bottom: -170px; background: radial-gradient( circle, rgba(197,44,255,0.06), transparent 70% ); } /* ========================================================= BREADCRUMB ========================================================= */ .tgsmm-breadcrumb { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin-bottom: 55px; color: rgba(255,255,255,0.40); font-size: 11px; } .tgsmm-breadcrumb a { color: rgba(255,255,255,0.50); text-decoration: none; } .tgsmm-breadcrumb a:hover { color: var(--accent-color); } .tgsmm-breadcrumb i { color: var(--accent-color); font-size: 9px; } /* ========================================================= HERO GRID ========================================================= */ .tgsmm-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.90fr); align-items: center; gap: 75px; } /* ========================================================= HERO CONTENT ========================================================= */ .tgsmm-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; } .tgsmm-eyebrow > span, .tgsmm-section-label > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,0.65); } .tgsmm-hero-content h1 { margin: 0; color: #fff; font-size: clamp(44px,5.5vw,74px); line-height: 1.02; font-weight: 700; letter-spacing: -1.5px; } .tgsmm-hero-content h1 span { color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,0.18); } .tgsmm-hero-content > p { max-width: 650px; margin: 25px 0 0; color: rgba(255,255,255,0.60); font-size: 16px; line-height: 1.75; } /* ========================================================= BUTTONS ========================================================= */ .tgsmm-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .tgsmm-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 7px 6px 20px; border-radius: 50px; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .tgsmm-btn-primary { color: #fff; background: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(197,44,255,0.20); } .tgsmm-btn-primary span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgsmm-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,0.30); } .tgsmm-btn-secondary { padding: 0 22px; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.025); border: 1px solid rgba(197,44,255,0.25); } .tgsmm-btn-secondary:hover { color: #fff; border-color: var(--accent-color); transform: translateY(-3px); background: rgba(197,44,255,0.07); } /* ========================================================= SOCIAL CARD ========================================================= */ .tgsmm-social-card { position: relative; width: 100%; padding: 30px; border-radius: 28px; overflow: hidden; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(9,9,9,.99) ); border: 1px solid rgba(197,44,255,.26); box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 40px rgba(197,44,255,.06); } .tgsmm-social-card::before { content: ""; position: absolute; top: -130px; right: -130px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.13), transparent 70% ); } .tgsmm-social-top { position: relative; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.40); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; } .tgsmm-social-top i { color: var(--accent-color); font-size: 16px; } .tgsmm-social-title { position: relative; margin-top: 35px; color: #fff; font-size: clamp(32px,4vw,50px); line-height: 1.02; font-weight: 500; } .tgsmm-social-title strong { display: block; color: var(--accent-color); font-weight: 700; } .tgsmm-social-line { width: 100%; height: 1px; margin: 30px 0 22px; background: linear-gradient( 90deg, var(--accent-color), rgba(197,44,255,.15), transparent ); } /* ========================================================= PLATFORMS IN HERO ========================================================= */ .tgsmm-platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; } .tgsmm-platform { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 10px; border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.72); font-size: 11px; } .tgsmm-platform-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(197,44,255,.08); color: var(--accent-color); } .tgsmm-social-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 13px; } .tgsmm-social-metrics > div { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); } .tgsmm-social-metrics small { display: block; margin-bottom: 6px; color: rgba(255,255,255,.32); font-size: 8px; font-weight: 700; letter-spacing: 1.3px; } .tgsmm-social-metrics strong { color: rgba(255,255,255,.74); font-size: 11px; font-weight: 600; } .tgsmm-social-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: 1px; } .tgsmm-social-footer i { margin-right: 4px; color: var(--accent-color); } /* ========================================================= SECTION HEADINGS ========================================================= */ .tgsmm-section-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.60); font-size: 11px; font-weight: 700; letter-spacing: 2px; } .tgsmm-section-heading { max-width: 800px; margin: 0 auto 50px; text-align: center; } .tgsmm-section-heading h2, .tgsmm-system-heading h2, .tgsmm-why-content h2 { margin: 0; color: #fff; font-size: clamp(36px,5vw,60px); line-height: 1.05; font-weight: 700; } .tgsmm-section-heading h2 span, .tgsmm-system-heading h2 span, .tgsmm-why-content h2 span { color: var(--accent-color); } .tgsmm-section-heading > p { max-width: 680px; margin: 18px auto 0; color: rgba(255,255,255,.56); font-size: 15px; line-height: 1.7; } /* ========================================================= OVERVIEW ========================================================= */ .tgsmm-overview { width: 100%; padding: 100px 20px; background: #050505; } .tgsmm-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .tgsmm-service-card { position: relative; min-height: 285px; padding: 25px; overflow: hidden; border-radius: 21px; background: linear-gradient( 145deg, rgba(25,25,25,.97), rgba(10,10,10,.98) ); border: 1px solid rgba(197,44,255,.16); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .tgsmm-service-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.50); box-shadow: 0 18px 45px rgba(197,44,255,.09); } .tgsmm-service-number { color: rgba(255,255,255,.20); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; } .tgsmm-service-icon { width: 53px; height: 53px; display: flex; align-items: center; justify-content: center; margin-top: 30px; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 18px; } .tgsmm-service-card h3 { margin: 22px 0 12px; color: #fff; font-size: 20px; font-weight: 700; } .tgsmm-service-card p { margin: 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.7; } /* ========================================================= CONTENT SYSTEM ========================================================= */ .tgsmm-content-system { padding: 100px 20px; background: radial-gradient( circle at center, rgba(197,44,255,.035), transparent 45% ), #080808; } .tgsmm-system-heading { text-align: center; margin-bottom: 55px; } .tgsmm-system-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 55px; align-items: center; } .tgsmm-system-left { display: flex; flex-direction: column; gap: 12px; } .tgsmm-system-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 15px; padding: 18px; border-radius: 15px; background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.13); transition: border-color .3s ease, transform .3s ease; } .tgsmm-system-card:hover { transform: translateX(5px); border-color: rgba(197,44,255,.38); } .tgsmm-system-index { color: var(--accent-color); font-size: 11px; font-weight: 700; padding-top: 3px; } .tgsmm-system-card h3 { margin: 0 0 7px; color: #fff; font-size: 17px; } .tgsmm-system-card p { margin: 0; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.65; } /* ========================================================= DASHBOARD ========================================================= */ .tgsmm-dashboard { position: relative; padding: 30px; border-radius: 25px; background: linear-gradient( 145deg, #181818, #090909 ); border: 1px solid rgba(197,44,255,.20); box-shadow: 0 20px 55px rgba(0,0,0,.30); } .tgsmm-dashboard-top { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.38); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; } .tgsmm-live-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); } .tgsmm-live-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 10px rgba(197,44,255,.65); } .tgsmm-dashboard-title { margin-top: 38px; color: #fff; font-size: clamp(32px,4vw,50px); line-height: 1.04; font-weight: 600; } .tgsmm-dashboard-title span { display: block; color: var(--accent-color); } .tgsmm-dashboard-posts { display: grid; gap: 10px; margin-top: 30px; } .tgsmm-post-card { display: flex; align-items: center; gap: 13px; padding: 13px; border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); } .tgsmm-post-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(197,44,255,.08); color: var(--accent-color); } .tgsmm-post-card div:last-child { display: flex; flex-direction: column; gap: 3px; } .tgsmm-post-card strong { color: rgba(255,255,255,.78); font-size: 12px; } .tgsmm-post-card small { color: rgba(255,255,255,.37); font-size: 10px; } .tgsmm-dashboard-footer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 25px; color: rgba(255,255,255,.40); font-size: 9px; } .tgsmm-progress { height: 5px; overflow: hidden; border-radius: 50px; background: rgba(255,255,255,.05); } .tgsmm-progress span { display: block; width: 82%; height: 100%; border-radius: 50px; background: var(--accent-color); box-shadow: 0 0 12px rgba(197,44,255,.45); } .tgsmm-dashboard-footer strong { color: var(--accent-color); font-size: 9px; } /* ========================================================= PLATFORMS ========================================================= */ .tgsmm-platforms { padding: 100px 20px; background: #050505; } .tgsmm-platform-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } .tgsmm-platform-large-card { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 20px; background: linear-gradient( 145deg, rgba(25,25,25,.96), rgba(9,9,9,.98) ); border: 1px solid rgba(197,44,255,.15); transition: transform .35s ease, border-color .35s ease; } .tgsmm-platform-large-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.45); } .tgsmm-platform-large-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 20px; } .tgsmm-platform-large-card span { color: rgba(255,255,255,.22); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .tgsmm-platform-large-card h3 { margin: 7px 0 9px; color: #fff; font-size: 20px; } .tgsmm-platform-large-card p { margin: 0; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.65; } /* ========================================================= WHY TG ========================================================= */ .tgsmm-why { padding: 100px 20px; background: #080808; } .tgsmm-why-grid { display: grid; grid-template-columns: 0.90fr 1fr; gap: 70px; align-items: center; } .tgsmm-why-card { min-height: 430px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; overflow: hidden; border-radius: 26px; background: linear-gradient( 145deg, #171717, #090909 ); border: 1px solid rgba(197,44,255,.22); } .tgsmm-why-card::before { content: ""; position: absolute; width: 350px; height: 350px; right: -170px; bottom: -170px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.13), transparent 70% ); } .tgsmm-why-top { display: flex; justify-content: space-between; color: rgba(255,255,255,.40); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; } .tgsmm-why-top i { color: var(--accent-color); font-size: 18px; } .tgsmm-why-title { position: relative; z-index: 2; color: #fff; font-size: clamp(46px,6vw,72px); line-height: .96; font-weight: 700; letter-spacing: -2px; } .tgsmm-why-title span { display: block; color: var(--accent-color); } .tgsmm-why-network { position: relative; height: 80px; } .tgsmm-why-network span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 18px rgba(197,44,255,.55); } .tgsmm-why-network span:nth-child(1) { left: 7%; top: 55%; } .tgsmm-why-network span:nth-child(2) { left: 30%; top: 25%; } .tgsmm-why-network span:nth-child(3) { left: 50%; top: 60%; } .tgsmm-why-network span:nth-child(4) { left: 70%; top: 15%; } .tgsmm-why-network span:nth-child(5) { left: 88%; top: 50%; } .tgsmm-why-network::before { content: ""; position: absolute; left: 8%; right: 10%; top: 45%; height: 1px; background: linear-gradient( 90deg, rgba(197,44,255,.20), rgba(197,44,255,.55), rgba(197,44,255,.18) ); transform: rotate(-4deg); } .tgsmm-why-bottom { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.06); } .tgsmm-why-bottom span { padding: 7px 10px; border-radius: 50px; color: rgba(255,255,255,.46); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); font-size: 9px; } .tgsmm-why-content h2 { max-width: 600px; } .tgsmm-why-content > p { max-width: 620px; margin: 22px 0; color: rgba(255,255,255,.56); font-size: 15px; line-height: 1.75; } .tgsmm-check-list { display: flex; flex-direction: column; gap: 13px; } .tgsmm-check-list > div { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; } .tgsmm-check-list i { color: var(--accent-color); margin-top: 2px; } /* ========================================================= CTA ========================================================= */ .tgsmm-cta { padding: 40px 20px 110px; background: #050505; } .tgsmm-cta-box { position: relative; padding: 85px 30px; overflow: hidden; border-radius: 28px; text-align: center; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(10,10,10,.99) ); border: 1px solid rgba(197,44,255,.28); box-shadow: 0 18px 55px rgba(0,0,0,.35); } .tgsmm-cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-color), transparent ); } .tgsmm-cta-glow { position: absolute; width: 500px; height: 300px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(197,44,255,.11), transparent 70% ); } .tgsmm-cta-content { position: relative; z-index: 2; } .tgsmm-cta-content h2 { max-width: 800px; margin: 0 auto; color: #fff; font-size: clamp(36px,5vw,62px); line-height: 1.04; font-weight: 700; } .tgsmm-cta-content h2 span { color: var(--accent-color); } .tgsmm-cta-content p { max-width: 650px; margin: 18px auto 0; color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.7; } .tgsmm-cta-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; padding: 6px 7px 6px 20px; border-radius: 50px; background: var(--accent-color); border: 1px solid var(--accent-color); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(197,44,255,.20); transition: transform .3s ease, box-shadow .3s ease; } .tgsmm-cta-button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgsmm-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1100px) { .tgsmm-hero-grid { gap: 45px; } .tgsmm-platform-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgsmm-hero { padding-top: 30px; } .tgsmm-hero-grid { grid-template-columns: 1fr; gap: 50px; } .tgsmm-hero-content { text-align: center; } .tgsmm-eyebrow { justify-content: center; } .tgsmm-hero-content > p { margin-left: auto; margin-right: auto; } .tgsmm-hero-buttons { justify-content: center; } .tgsmm-hero-visual { max-width: 700px; width: 100%; margin: auto; } .tgsmm-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgsmm-system-grid { grid-template-columns: 1fr; gap: 40px; } .tgsmm-why-grid { grid-template-columns: 1fr; gap: 45px; } .tgsmm-why-card { max-width: 700px; width: 100%; margin: auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgsmm-hero { padding: 25px 15px 70px; } .tgsmm-breadcrumb { margin-bottom: 40px; } .tgsmm-hero-content h1 { font-size: 42px; } .tgsmm-hero-content > p { font-size: 14px; } .tgsmm-hero-buttons { flex-direction: column; } .tgsmm-btn { width: 100%; max-width: 300px; } .tgsmm-social-card { padding: 21px; border-radius: 22px; } .tgsmm-social-title { font-size: 32px; } .tgsmm-social-metrics { grid-template-columns: 1fr; } .tgsmm-overview, .tgsmm-content-system, .tgsmm-platforms, .tgsmm-why { padding: 70px 15px; } .tgsmm-section-heading h2, .tgsmm-system-heading h2, .tgsmm-why-content h2 { font-size: 38px; } .tgsmm-services-grid { grid-template-columns: 1fr; } .tgsmm-platform-cards { grid-template-columns: 1fr; } .tgsmm-platform-large-card { min-height: 220px; } .tgsmm-why-card { min-height: 360px; } .tgsmm-cta { padding: 15px 15px 70px; } .tgsmm-cta-box { padding: 60px 20px; border-radius: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgsmm-hero-content h1 { font-size: 35px; } .tgsmm-eyebrow, .tgsmm-section-label { font-size: 10px; letter-spacing: 1.6px; } .tgsmm-social-title { font-size: 29px; } .tgsmm-platform-grid { grid-template-columns: 1fr; } .tgsmm-section-heading h2, .tgsmm-system-heading h2, .tgsmm-why-content h2 { font-size: 32px; } .tgsmm-why-title { font-size: 51px; } .tgsmm-dashboard { padding: 21px; } .tgsmm-cta-content h2 { font-size: 32px; } } /* ========================================================= TG MULTIMEDIA VIDEOGRAPHY & EDITING FINAL CSS ========================================================= */ /* ========================================================= CONTAINER ========================================================= */ .tgve-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HEADER / FOOTER PLACEHOLDER ========================================================= */ .tgve-header-placeholder, .tgve-footer-placeholder { width: 100%; } /* ========================================================= HERO ========================================================= */ .tgve-hero { position: relative; width: 100%; padding: 35px 20px 105px; overflow: hidden; background: radial-gradient( circle at 82% 40%, rgba(197, 44, 255, 0.12), transparent 30% ), #050505; } .tgve-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .tgve-hero-glow-one { width: 500px; height: 500px; top: 60px; right: -250px; background: radial-gradient( circle, rgba(197, 44, 255, 0.10), transparent 70% ); } .tgve-hero-glow-two { width: 350px; height: 350px; left: -170px; bottom: -180px; background: radial-gradient( circle, rgba(197, 44, 255, 0.06), transparent 70% ); } /* ========================================================= BREADCRUMB ========================================================= */ .tgve-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 55px; color: rgba(255,255,255,0.40); font-size: 11px; } .tgve-breadcrumb a { color: rgba(255,255,255,0.50); text-decoration: none; transition: color 0.3s ease; } .tgve-breadcrumb a:hover { color: var(--accent-color); } .tgve-breadcrumb i { color: var(--accent-color); font-size: 9px; } /* ========================================================= HERO GRID ========================================================= */ .tgve-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); align-items: center; gap: 70px; } /* ========================================================= HERO CONTENT ========================================================= */ .tgve-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; } .tgve-eyebrow > span, .tgve-section-label > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,0.65); } .tgve-hero-content h1 { margin: 0; color: #fff; font-size: clamp(45px,5.5vw,76px); line-height: 1.00; font-weight: 700; letter-spacing: -2px; } .tgve-hero-content h1 span { display: block; color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,0.17); } .tgve-hero-content h1 strong { display: block; color: #fff; font-weight: 700; } .tgve-hero-content > p { max-width: 650px; margin: 25px 0 0; color: rgba(255,255,255,0.60); font-size: 16px; line-height: 1.75; } /* ========================================================= BUTTONS ========================================================= */ .tgve-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .tgve-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 7px 6px 20px; border-radius: 50px; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .tgve-btn-primary { color: #fff; background: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(197,44,255,.20); } .tgve-btn-primary span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgve-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } .tgve-btn-secondary { padding: 0 22px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.25); } .tgve-btn-secondary:hover { color: #fff; border-color: var(--accent-color); transform: translateY(-3px); background: rgba(197,44,255,.07); } /* ========================================================= HERO TAGS ========================================================= */ .tgve-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 23px; } .tgve-hero-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 50px; color: rgba(255,255,255,.50); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.13); font-size: 10px; } .tgve-hero-tags i { color: var(--accent-color); font-size: 10px; } /* ========================================================= CINEMA CARD ========================================================= */ .tgve-cinema-card { position: relative; width: 100%; padding: 18px; overflow: hidden; border-radius: 26px; background: linear-gradient( 145deg, rgba(28,28,28,.98), rgba(8,8,8,.99) ); border: 1px solid rgba(197,44,255,.27); box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 45px rgba(197,44,255,.06); } .tgve-cinema-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 5px 15px; color: rgba(255,255,255,.36); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; } .tgve-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); } .tgve-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 10px rgba(197,44,255,.65); animation: tgveLivePulse 1.7s ease-in-out infinite; } @keyframes tgveLivePulse { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } } /* ========================================================= HERO VIDEO ========================================================= */ .tgve-cinema-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: #000; } .tgve-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } .tgve-cinema-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; pointer-events: none; background: linear-gradient( to bottom, rgba(0,0,0,.02), rgba(0,0,0,.25) ); transition: opacity .3s ease; } .tgve-play-badge { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-color); color: #fff; box-shadow: 0 0 0 8px rgba(197,44,255,.13), 0 0 35px rgba(197,44,255,.40); animation: tgvePlayPulse 2.3s ease-in-out infinite; } @keyframes tgvePlayPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .tgve-play-badge i { margin-left: 3px; } .tgve-cinema-overlay span { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 700; letter-spacing: 2px; } .tgve-cinema-bottom { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 10px; } .tgve-cinema-bottom > div { display: flex; flex-direction: column; gap: 4px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); } .tgve-cinema-bottom small { color: rgba(255,255,255,.27); font-size: 8px; letter-spacing: 1.3px; font-weight: 700; } .tgve-cinema-bottom strong { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 600; } /* ========================================================= SECTION LABEL ========================================================= */ .tgve-section-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.60); font-size: 11px; font-weight: 700; letter-spacing: 2px; } /* ========================================================= SECTION HEADING ========================================================= */ .tgve-section-heading { width: 100%; max-width: 820px; margin: 0 auto 50px; text-align: center; } .tgve-section-heading h2, .tgve-showcase-heading h2, .tgve-editing-content h2, .tgve-why-content h2 { margin: 0; color: #fff; font-size: clamp(37px,5vw,61px); line-height: 1.05; font-weight: 700; letter-spacing: -1px; } .tgve-section-heading h2 span, .tgve-showcase-heading h2 span, .tgve-editing-content h2 span, .tgve-why-content h2 span { color: var(--accent-color); } .tgve-section-heading > p { max-width: 700px; margin: 18px auto 0; color: rgba(255,255,255,.54); font-size: 15px; line-height: 1.7; } /* ========================================================= WHAT WE CREATE ========================================================= */ .tgve-overview { padding: 105px 20px; background: #050505; } .tgve-create-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } .tgve-create-card { position: relative; min-height: 285px; padding: 25px; overflow: hidden; border-radius: 21px; background: linear-gradient( 145deg, rgba(25,25,25,.97), rgba(10,10,10,.98) ); border: 1px solid rgba(197,44,255,.16); animation: tgveCardFloat 5s ease-in-out infinite; transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .tgve-create-card:nth-child(2) { animation-delay: .3s; } .tgve-create-card:nth-child(3) { animation-delay: .6s; } .tgve-create-card:nth-child(4) { animation-delay: .9s; } .tgve-create-card:nth-child(5) { animation-delay: 1.2s; } .tgve-create-card:nth-child(6) { animation-delay: 1.5s; } @keyframes tgveCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .tgve-create-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.10), transparent 70% ); pointer-events: none; } .tgve-create-card:hover { animation-play-state: paused; transform: translateY(-9px) !important; border-color: rgba(197,44,255,.50); box-shadow: 0 20px 45px rgba(197,44,255,.09); } .tgve-create-number { color: rgba(255,255,255,.20); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .tgve-create-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; margin-top: 27px; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 18px; animation: tgveIconFloat 2.6s ease-in-out infinite; } @keyframes tgveIconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-3deg); } } .tgve-create-card:nth-child(2) .tgve-create-icon { animation-delay: .25s; } .tgve-create-card:nth-child(3) .tgve-create-icon { animation-delay: .5s; } .tgve-create-card:nth-child(4) .tgve-create-icon { animation-delay: .75s; } .tgve-create-card:nth-child(5) .tgve-create-icon { animation-delay: 1s; } .tgve-create-card:nth-child(6) .tgve-create-icon { animation-delay: 1.25s; } .tgve-create-card h3 { margin: 21px 0 11px; color: #fff; font-size: 19px; font-weight: 700; } .tgve-create-card p { margin: 0; max-width: 320px; color: rgba(255,255,255,.53); font-size: 12px; line-height: 1.7; } .tgve-card-arrow { position: absolute; right: 22px; top: 22px; width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(255,255,255,.30); background: rgba(255,255,255,.025); transition: transform .3s ease, background .3s ease, color .3s ease; } .tgve-create-card:hover .tgve-card-arrow { color: #fff; background: var(--accent-color); transform: rotate(45deg); } /* ========================================================= PROCESS ========================================================= */ .tgve-process { padding: 105px 20px; background: radial-gradient( circle at center, rgba(197,44,255,.04), transparent 44% ), #080808; } .tgve-process-grid { display: grid; grid-template-columns: 1fr 55px 1fr 55px 1fr 55px 1fr; align-items: start; gap: 8px; } .tgve-process-card { min-height: 255px; padding: 23px; border-radius: 20px; background: rgba(255,255,255,.022); border: 1px solid rgba(197,44,255,.14); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .tgve-process-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.42); box-shadow: 0 15px 35px rgba(197,44,255,.07); } .tgve-process-top { display: flex; align-items: center; justify-content: space-between; } .tgve-process-top span { color: rgba(255,255,255,.20); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .tgve-process-top i { color: var(--accent-color); font-size: 17px; animation: tgveProcessIcon 2.5s ease-in-out infinite; } @keyframes tgveProcessIcon { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } } .tgve-process-card h3 { margin: 27px 0 11px; color: #fff; font-size: 20px; } .tgve-process-card p { margin: 0; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.7; } .tgve-process-connector { height: 1px; margin-top: 32px; background: linear-gradient( 90deg, transparent, rgba(197,44,255,.65), transparent ); } /* ========================================================= SHOWCASE ========================================================= */ .tgve-showcase { padding: 105px 20px; background: #050505; } .tgve-showcase-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.55fr); gap: 40px; align-items: end; margin-bottom: 45px; } .tgve-showcase-heading > p { margin: 0; color: rgba(255,255,255,.51); font-size: 13px; line-height: 1.7; } .tgve-video-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .tgve-show-video { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: #000; border: 1px solid rgba(197,44,255,.16); box-shadow: 0 12px 35px rgba(0,0,0,.25); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .tgve-show-video:hover { transform: translateY(-6px); border-color: rgba(197,44,255,.44); box-shadow: 0 20px 45px rgba(197,44,255,.08); } .tgve-show-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } .tgve-video-label { position: absolute; left: 15px; top: 15px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 50px; color: rgba(255,255,255,.72); background: rgba(5,5,5,.68); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(7px); font-size: 8px; font-weight: 700; letter-spacing: 1px; } .tgve-video-label span { color: var(--accent-color); } /* ========================================================= EDITING ========================================================= */ .tgve-editing { padding: 105px 20px; background: #080808; } .tgve-editing-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: 70px; align-items: center; } /* ========================================================= EDITING WINDOW ========================================================= */ .tgve-editing-window { overflow: hidden; border-radius: 23px; background: linear-gradient( 145deg, #191919, #080808 ); border: 1px solid rgba(197,44,255,.19); box-shadow: 0 25px 60px rgba(0,0,0,.32); } .tgve-window-bar { display: flex; align-items: center; gap: 8px; padding: 14px 15px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.32); font-size: 8px; } .tgve-window-dots { display: flex; gap: 5px; } .tgve-window-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); } .tgve-window-bar strong { margin-left: auto; font-size: 8px; letter-spacing: 1.3px; } .tgve-timeline { padding: 27px 25px 25px; } .tgve-timeline-preview { position: relative; height: 145px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; overflow: hidden; border-radius: 15px; background: radial-gradient( circle at center, rgba(197,44,255,.14), rgba(255,255,255,.015) ); border: 1px solid rgba(197,44,255,.12); } .tgve-timeline-preview span { color: rgba(255,255,255,.30); font-size: 8px; letter-spacing: 1.7px; } .tgve-preview-play { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(197,44,255,.18); border: 1px solid rgba(197,44,255,.40); color: var(--accent-color); animation: tgvePreviewPulse 2.4s ease-in-out infinite; } @keyframes tgvePreviewPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .tgve-timeline-main { display: flex; align-items: flex-end; gap: 7px; height: 75px; margin-top: 14px; } .tgve-timeline-main span { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient( to top, rgba(197,44,255,.12), rgba(197,44,255,.50) ); animation: tgveTimelineBars 2.5s ease-in-out infinite; } .tgve-timeline-main span:nth-child(1) { height: 48%; } .tgve-timeline-main span:nth-child(2) { height: 85%; animation-delay: .25s; } .tgve-timeline-main span:nth-child(3) { height: 65%; animation-delay: .5s; } .tgve-timeline-main span:nth-child(4) { height: 92%; animation-delay: .75s; } .tgve-timeline-main span:nth-child(5) { height: 58%; animation-delay: 1s; } @keyframes tgveTimelineBars { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .tgve-timeline-track { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr .7fr 1.5fr; gap: 5px; margin-top: 11px; } .tgve-timeline-track div { height: 19px; border-radius: 5px; background: rgba(197,44,255,.20); border: 1px solid rgba(197,44,255,.12); } .tgve-timeline-wave { display: flex; align-items: center; gap: 3px; height: 28px; margin-top: 12px; } .tgve-timeline-wave span { flex: 1; min-width: 3px; border-radius: 5px; background: rgba(197,44,255,.35); } .tgve-timeline-wave span:nth-child(1) { height: 12px; } .tgve-timeline-wave span:nth-child(2) { height: 20px; } .tgve-timeline-wave span:nth-child(3) { height: 14px; } .tgve-timeline-wave span:nth-child(4) { height: 24px; } .tgve-timeline-wave span:nth-child(5) { height: 17px; } .tgve-timeline-wave span:nth-child(6) { height: 22px; } .tgve-timeline-wave span:nth-child(7) { height: 11px; } .tgve-timeline-wave span:nth-child(8) { height: 19px; } .tgve-editing-footer { display: flex; justify-content: space-between; gap: 8px; padding: 15px 20px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.35); font-size: 8px; letter-spacing: 1.2px; } /* ========================================================= EDITING CONTENT ========================================================= */ .tgve-editing-content h2 { max-width: 600px; } .tgve-editing-content > p { max-width: 620px; margin: 22px 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; } .tgve-editing-list { display: flex; flex-direction: column; gap: 11px; } .tgve-editing-list > div { display: flex; align-items: flex-start; gap: 12px; padding: 13px; border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.10); transition: transform .3s ease, border-color .3s ease; } .tgve-editing-list > div:hover { transform: translateX(5px); border-color: rgba(197,44,255,.32); } .tgve-editing-list i { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 12px; } .tgve-editing-list span { display: flex; flex-direction: column; gap: 3px; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.5; } .tgve-editing-list strong { color: rgba(255,255,255,.78); font-size: 12px; } /* ========================================================= WHY TG ========================================================= */ .tgve-why { padding: 105px 20px; background: #050505; } .tgve-why-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 70px; align-items: center; } .tgve-why-content h2 { max-width: 620px; } .tgve-why-content > p { max-width: 620px; margin: 22px 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; } .tgve-check-list { display: flex; flex-direction: column; gap: 13px; } .tgve-check-list > div { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; } .tgve-check-list i { color: var(--accent-color); margin-top: 2px; } /* ========================================================= CAMERA CARD ========================================================= */ .tgve-camera-card { position: relative; min-height: 430px; padding: 30px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-radius: 27px; background: linear-gradient( 145deg, #181818, #090909 ); border: 1px solid rgba(197,44,255,.21); box-shadow: 0 20px 60px rgba(0,0,0,.35); } .tgve-camera-card::before { content: ""; position: absolute; width: 330px; height: 330px; left: 50%; top: 45%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.12), transparent 70% ); pointer-events: none; } .tgve-camera-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.37); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .tgve-camera-top i { color: var(--accent-color); animation: tgveCameraIcon 2.4s ease-in-out infinite; } @keyframes tgveCameraIcon { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } } .tgve-camera-icon { position: relative; z-index: 2; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.20); color: var(--accent-color); font-size: 21px; animation: tgveCameraFloat 2.5s ease-in-out infinite; } @keyframes tgveCameraFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .tgve-camera-title { position: relative; z-index: 2; color: #fff; font-size: clamp(46px,6vw,72px); line-height: .94; font-weight: 700; letter-spacing: -2px; } .tgve-camera-title span { display: block; color: var(--accent-color); } .tgve-camera-rings { position: relative; z-index: 2; height: 75px; } .tgve-camera-rings span { position: absolute; left: 50%; top: 50%; width: 35px; height: 35px; transform: translate(-50%,-50%); border: 1px solid rgba(197,44,255,.38); border-radius: 50%; animation: tgveRing 2.6s ease-out infinite; } .tgve-camera-rings span:nth-child(2) { animation-delay: .85s; } .tgve-camera-rings span:nth-child(3) { animation-delay: 1.7s; } @keyframes tgveRing { 0% { width: 35px; height: 35px; opacity: .75; } 100% { width: 180px; height: 180px; opacity: 0; } } .tgve-camera-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.36); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } /* ========================================================= CTA ========================================================= */ .tgve-cta { padding: 35px 20px 110px; background: #050505; } .tgve-cta-box { position: relative; padding: 85px 30px; overflow: hidden; border-radius: 28px; text-align: center; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(9,9,9,.99) ); border: 1px solid rgba(197,44,255,.28); box-shadow: 0 20px 55px rgba(0,0,0,.35); } .tgve-cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-color), transparent ); } .tgve-cta-glow { position: absolute; width: 500px; height: 300px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(197,44,255,.11), transparent 70% ); } .tgve-cta-content { position: relative; z-index: 2; } .tgve-cta-content h2 { max-width: 850px; margin: 0 auto; color: #fff; font-size: clamp(38px,5vw,63px); line-height: 1.03; font-weight: 700; } .tgve-cta-content h2 span { color: var(--accent-color); } .tgve-cta-content p { max-width: 650px; margin: 18px auto 0; color: rgba(255,255,255,.51); font-size: 14px; line-height: 1.7; } .tgve-cta-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; padding: 6px 7px 6px 20px; border-radius: 50px; background: var(--accent-color); border: 1px solid var(--accent-color); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(197,44,255,.20); transition: transform .3s ease, box-shadow .3s ease; } .tgve-cta-button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgve-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .tgve-hero-grid { gap: 45px; } .tgve-create-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgve-process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgve-process-connector { display: none; } } /* ========================================================= 991px ========================================================= */ @media (max-width: 991px) { .tgve-hero { padding-top: 30px; } .tgve-hero-grid { grid-template-columns: 1fr; gap: 50px; } .tgve-hero-content { text-align: center; } .tgve-eyebrow { justify-content: center; } .tgve-hero-content > p { margin-left: auto; margin-right: auto; } .tgve-hero-buttons { justify-content: center; } .tgve-hero-tags { justify-content: center; } .tgve-hero-visual { max-width: 720px; width: 100%; margin: 0 auto; } .tgve-editing-grid, .tgve-why-grid { grid-template-columns: 1fr; gap: 45px; } .tgve-editing-window, .tgve-camera-card { max-width: 720px; width: 100%; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgve-hero { padding: 25px 15px 75px; } .tgve-breadcrumb { margin-bottom: 40px; } .tgve-hero-content h1 { font-size: 43px; letter-spacing: -1.3px; } .tgve-hero-content > p { font-size: 14px; } .tgve-hero-buttons { flex-direction: column; } .tgve-btn { width: 100%; max-width: 300px; } .tgve-cinema-card { padding: 12px; border-radius: 20px; } .tgve-play-badge { width: 52px; height: 52px; } .tgve-cinema-bottom { grid-template-columns: 1fr; } .tgve-overview, .tgve-process, .tgve-showcase, .tgve-editing, .tgve-why { padding: 70px 15px; } .tgve-section-heading h2, .tgve-showcase-heading h2, .tgve-editing-content h2, .tgve-why-content h2 { font-size: 38px; } .tgve-create-grid { grid-template-columns: 1fr; } .tgve-process-grid { grid-template-columns: 1fr; } .tgve-process-card { min-height: auto; } .tgve-showcase-heading { grid-template-columns: 1fr; gap: 15px; } .tgve-video-grid { grid-template-columns: 1fr; } .tgve-camera-card { min-height: 360px; border-radius: 22px; } .tgve-cta { padding: 15px 15px 70px; } .tgve-cta-box { padding: 60px 20px; border-radius: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgve-hero-content h1 { font-size: 35px; } .tgve-eyebrow, .tgve-section-label { font-size: 10px; letter-spacing: 1.6px; } .tgve-hero-tags { gap: 6px; } .tgve-hero-tags span { font-size: 9px; } .tgve-section-heading h2, .tgve-showcase-heading h2, .tgve-editing-content h2, .tgve-why-content h2 { font-size: 32px; } .tgve-create-card { min-height: 255px; } .tgve-camera-title { font-size: 52px; } .tgve-camera-card { min-height: 330px; padding: 22px; } .tgve-cta-content h2 { font-size: 32px; } } /* ========================================================= REDUCE MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tgve-create-card, .tgve-create-icon, .tgve-live i, .tgve-play-badge, .tgve-timeline-main span, .tgve-preview-play, .tgve-process-top i, .tgve-camera-top i, .tgve-camera-icon, .tgve-camera-rings span { animation: none !important; } } /* ========================================================= TG MULTIMEDIA GRAPHIC DESIGNING COMPLETE SERVICE PAGE CSS ========================================================= */ /* ========================================================= CONTAINER ========================================================= */ .tggraphic-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HEADER / FOOTER PLACEHOLDER ========================================================= */ .tggraphic-header-placeholder, .tggraphic-footer-placeholder { width: 100%; } /* ========================================================= HERO ========================================================= */ .tggraphic-hero { position: relative; width: 100%; padding: 35px 20px 105px; overflow: hidden; background: radial-gradient( circle at 82% 40%, rgba(197,44,255,0.12), transparent 30% ), #050505; } .tggraphic-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .tggraphic-hero-glow-one { width: 500px; height: 500px; right: -250px; top: 50px; background: radial-gradient( circle, rgba(197,44,255,0.10), transparent 70% ); } .tggraphic-hero-glow-two { width: 350px; height: 350px; left: -180px; bottom: -190px; background: radial-gradient( circle, rgba(197,44,255,0.06), transparent 70% ); } /* ========================================================= BREADCRUMB ========================================================= */ .tggraphic-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 55px; color: rgba(255,255,255,0.40); font-size: 11px; } .tggraphic-breadcrumb a { color: rgba(255,255,255,0.50); text-decoration: none; transition: color .3s ease; } .tggraphic-breadcrumb a:hover { color: var(--accent-color); } .tggraphic-breadcrumb i { color: var(--accent-color); font-size: 9px; } /* ========================================================= HERO GRID ========================================================= */ .tggraphic-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); align-items: center; gap: 70px; } /* ========================================================= HERO CONTENT ========================================================= */ .tggraphic-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; } .tggraphic-eyebrow > span, .tggraphic-section-label > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,0.65); } .tggraphic-hero-content h1 { margin: 0; max-width: 760px; color: #ffffff; font-size: clamp(45px,5.7vw,77px); line-height: 1.01; font-weight: 700; letter-spacing: -2px; } .tggraphic-hero-content h1 span { display: block; color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,0.18); } .tggraphic-hero-content > p { max-width: 650px; margin: 25px 0 0; color: rgba(255,255,255,0.60); font-size: 16px; line-height: 1.75; } /* ========================================================= HERO BUTTONS ========================================================= */ .tggraphic-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .tggraphic-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 7px 6px 20px; border-radius: 50px; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .tggraphic-btn-primary { color: #fff; background: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(197,44,255,.20); } .tggraphic-btn-primary span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tggraphic-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } .tggraphic-btn-secondary { padding: 0 22px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.25); } .tggraphic-btn-secondary:hover { color: #fff; border-color: var(--accent-color); transform: translateY(-3px); background: rgba(197,44,255,.07); } /* ========================================================= HERO TAGS ========================================================= */ .tggraphic-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 23px; } .tggraphic-hero-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 50px; color: rgba(255,255,255,.50); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.13); font-size: 10px; } .tggraphic-hero-tags i { color: var(--accent-color); font-size: 10px; } /* ========================================================= DESIGN BOARD ========================================================= */ .tggraphic-design-board { position: relative; width: 100%; padding: 18px; border-radius: 27px; overflow: hidden; background: linear-gradient( 145deg, #191919, #090909 ); border: 1px solid rgba(197,44,255,.26); box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 45px rgba(197,44,255,.06); } .tggraphic-board-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 5px 15px; color: rgba(255,255,255,.34); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .tggraphic-board-status { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); } .tggraphic-board-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 12px rgba(197,44,255,.75); animation: tggraphicLive 1.7s ease-in-out infinite; } @keyframes tggraphicLive { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } } /* ========================================================= MAIN ART ========================================================= */ .tggraphic-main-art { position: relative; width: 100%; aspect-ratio: 1 / 0.88; overflow: hidden; border-radius: 19px; background: linear-gradient( 145deg, #090909, #151515 ); border: 1px solid rgba(255,255,255,.06); } .tggraphic-main-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(197,44,255,.13), transparent 35% ); pointer-events: none; } .tggraphic-art-corner { position: absolute; left: 20px; top: 18px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.35); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } .tggraphic-art-corner span:first-child { color: var(--accent-color); } .tggraphic-art-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; text-align: center; z-index: 4; } .tggraphic-art-center small { display: block; margin-bottom: 7px; color: rgba(255,255,255,.35); font-size: 10px; font-weight: 700; letter-spacing: 3px; } .tggraphic-art-center strong { display: block; color: #fff; font-size: clamp(38px,4vw,57px); line-height: .95; font-weight: 800; letter-spacing: -2px; } .tggraphic-art-center > span { display: block; margin-top: 8px; color: var(--accent-color); font-size: 10px; font-weight: 700; letter-spacing: 2px; } .tggraphic-art-shape { position: absolute; border-radius: 50%; } .tggraphic-art-shape-one { width: 180px; height: 180px; right: -50px; top: -55px; border: 1px solid rgba(197,44,255,.42); animation: tggraphicOrbit 5s linear infinite; } .tggraphic-art-shape-two { width: 100px; height: 100px; left: -25px; bottom: -25px; background: rgba(197,44,255,.10); border: 1px solid rgba(197,44,255,.25); animation: tggraphicFloat 3.5s ease-in-out infinite; } .tggraphic-art-shape-three { width: 14px; height: 14px; right: 22%; bottom: 20%; background: var(--accent-color); box-shadow: 0 0 20px rgba(197,44,255,.65); animation: tggraphicDot 2.2s ease-in-out infinite; } @keyframes tggraphicOrbit { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.06); } 100% { transform: rotate(360deg) scale(1); } } @keyframes tggraphicFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes tggraphicDot { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1.25); opacity: 1; } } .tggraphic-art-line { position: absolute; left: 11%; right: 11%; bottom: 22%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(197,44,255,.65), transparent ); } .tggraphic-art-footer { position: absolute; left: 18px; right: 18px; bottom: 15px; display: flex; justify-content: space-between; color: rgba(255,255,255,.28); font-size: 7px; font-weight: 700; letter-spacing: 1.4px; } /* ========================================================= TOOL STRIP ========================================================= */ .tggraphic-tool-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 10px; } .tggraphic-tool-strip > div { display: flex; align-items: center; gap: 7px; min-height: 45px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.45); font-size: 8px; } .tggraphic-tool-strip i { color: var(--accent-color); font-size: 11px; } /* ========================================================= SECTION LABEL ========================================================= */ .tggraphic-section-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.60); font-size: 11px; font-weight: 700; letter-spacing: 2px; } /* ========================================================= SECTION HEADINGS ========================================================= */ .tggraphic-section-heading { max-width: 830px; margin: 0 auto 50px; text-align: center; } .tggraphic-section-heading h2, .tggraphic-system-heading h2, .tggraphic-why-content h2, .tggraphic-cta-content h2 { margin: 0; color: #fff; font-size: clamp(37px,5vw,61px); line-height: 1.05; font-weight: 700; letter-spacing: -1px; } .tggraphic-section-heading h2 span, .tggraphic-system-heading h2 span, .tggraphic-why-content h2 span, .tggraphic-cta-content h2 span { color: var(--accent-color); } .tggraphic-section-heading > p, .tggraphic-system-heading > p { max-width: 700px; margin: 18px auto 0; color: rgba(255,255,255,.54); font-size: 15px; line-height: 1.7; } /* ========================================================= SERVICES ========================================================= */ .tggraphic-services { padding: 105px 20px; background: #050505; } .tggraphic-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } .tggraphic-service-card { position: relative; min-height: 305px; padding: 25px; overflow: hidden; border-radius: 21px; background: linear-gradient( 145deg, rgba(25,25,25,.97), rgba(10,10,10,.98) ); border: 1px solid rgba(197,44,255,.16); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .tggraphic-service-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.11), transparent 70% ); pointer-events: none; } .tggraphic-service-card:hover { transform: translateY(-8px); border-color: rgba(197,44,255,.48); box-shadow: 0 20px 45px rgba(197,44,255,.08); } .tggraphic-card-number { color: rgba(255,255,255,.18); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; } .tggraphic-service-icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; margin-top: 28px; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 18px; animation: tggraphicIconFloat 3s ease-in-out infinite; } .tggraphic-service-card:nth-child(2) .tggraphic-service-icon { animation-delay: .25s; } .tggraphic-service-card:nth-child(3) .tggraphic-service-icon { animation-delay: .5s; } .tggraphic-service-card:nth-child(4) .tggraphic-service-icon { animation-delay: .75s; } .tggraphic-service-card:nth-child(5) .tggraphic-service-icon { animation-delay: 1s; } .tggraphic-service-card:nth-child(6) .tggraphic-service-icon { animation-delay: 1.25s; } @keyframes tggraphicIconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-3deg); } } .tggraphic-service-card h3 { margin: 21px 0 11px; color: #fff; font-size: 19px; font-weight: 700; } .tggraphic-service-card p { margin: 0; color: rgba(255,255,255,.53); font-size: 12px; line-height: 1.7; } .tggraphic-service-line { width: 100%; height: 1px; margin-top: 18px; background: linear-gradient( 90deg, rgba(197,44,255,.35), transparent ); } .tggraphic-service-tag { display: inline-block; margin-top: 11px; color: rgba(197,44,255,.75); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; } /* ========================================================= DESIGN SYSTEM ========================================================= */ .tggraphic-system { padding: 105px 20px; background: radial-gradient( circle at center, rgba(197,44,255,.04), transparent 45% ), #080808; } .tggraphic-system-heading { max-width: 800px; margin: 0 auto 55px; text-align: center; } .tggraphic-system-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 60px; align-items: center; } /* ========================================================= SYSTEM BOARD ========================================================= */ .tggraphic-system-board { overflow: hidden; border-radius: 23px; background: linear-gradient( 145deg, #181818, #080808 ); border: 1px solid rgba(197,44,255,.20); box-shadow: 0 25px 60px rgba(0,0,0,.30); } .tggraphic-system-board-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.34); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } .tggraphic-system-board-top i { color: var(--accent-color); } .tggraphic-system-poster { position: relative; min-height: 440px; margin: 20px; overflow: hidden; background: linear-gradient( 135deg, #171717, #0a0a0a ); border: 1px solid rgba(197,44,255,.15); border-radius: 17px; } .tggraphic-poster-label { position: absolute; top: 20px; left: 20px; color: var(--accent-color); font-size: 12px; font-weight: 800; letter-spacing: 1px; } .tggraphic-poster-title { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: #fff; font-size: clamp(48px,6vw,76px); line-height: .9; font-weight: 800; letter-spacing: -3px; z-index: 3; } .tggraphic-poster-title span { display: block; color: var(--accent-color); } .tggraphic-poster-small { position: absolute; left: 32px; bottom: 31px; color: rgba(255,255,255,.35); font-size: 8px; letter-spacing: 2px; z-index: 3; } .tggraphic-poster-circle { position: absolute; width: 250px; height: 250px; right: -75px; top: -55px; border-radius: 50%; border: 1px solid rgba(197,44,255,.38); box-shadow: inset 0 0 35px rgba(197,44,255,.05); animation: tggraphicPosterSpin 12s linear infinite; } @keyframes tggraphicPosterSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tggraphic-poster-square { position: absolute; width: 130px; height: 130px; right: 45px; bottom: 60px; border: 1px solid rgba(197,44,255,.28); transform: rotate(18deg); } .tggraphic-poster-line { position: absolute; left: 25%; right: 10%; top: 28%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(197,44,255,.55), transparent ); } .tggraphic-system-board-bottom { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.06); } .tggraphic-system-board-bottom span { min-height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.32); font-size: 8px; letter-spacing: 1.2px; border-right: 1px solid rgba(255,255,255,.05); } .tggraphic-system-board-bottom span:last-child { border-right: 0; } /* ========================================================= SYSTEM CONTENT ========================================================= */ .tggraphic-system-content { display: flex; flex-direction: column; gap: 12px; } .tggraphic-system-item { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 14px; padding: 17px; border-radius: 15px; background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.12); transition: transform .35s ease, border-color .35s ease; } .tggraphic-system-item:hover { transform: translateX(6px); border-color: rgba(197,44,255,.35); } .tggraphic-system-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 14px; } .tggraphic-system-item h3 { margin: 0 0 6px; color: #fff; font-size: 16px; font-weight: 700; } .tggraphic-system-item p { margin: 0; color: rgba(255,255,255,.50); font-size: 11px; line-height: 1.6; } /* ========================================================= PROCESS ========================================================= */ .tggraphic-process { padding: 105px 20px; background: #050505; } .tggraphic-process-grid { display: grid; grid-template-columns: minmax(0,1fr) 50px minmax(0,1fr) 50px minmax(0,1fr) 50px minmax(0,1fr); align-items: start; gap: 9px; } .tggraphic-process-card { min-height: 255px; padding: 23px; border-radius: 20px; background: rgba(255,255,255,.022); border: 1px solid rgba(197,44,255,.14); transition: transform .35s ease, border-color .35s ease; } .tggraphic-process-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.44); } .tggraphic-process-number { display: flex; align-items: center; justify-content: space-between; } .tggraphic-process-number span { color: rgba(255,255,255,.20); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; } .tggraphic-process-number i { color: var(--accent-color); font-size: 16px; animation: tggraphicProcessIcon 2.4s ease-in-out infinite; } @keyframes tggraphicProcessIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .tggraphic-process-card h3 { margin: 28px 0 11px; color: #fff; font-size: 20px; } .tggraphic-process-card p { margin: 0; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.7; } .tggraphic-process-arrow { display: flex; align-items: center; justify-content: center; margin-top: 32px; color: rgba(197,44,255,.65); font-size: 12px; } /* ========================================================= APPLICATIONS ========================================================= */ .tggraphic-applications { padding: 105px 20px; background: #080808; } .tggraphic-applications-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.55fr); gap: 40px; align-items: end; margin-bottom: 45px; } .tggraphic-applications-heading h2 { margin: 0; max-width: 750px; color: #fff; font-size: clamp(37px,5vw,59px); line-height: 1.04; font-weight: 700; } .tggraphic-applications-heading h2 span { color: var(--accent-color); } .tggraphic-applications-heading > p { margin: 0; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.7; } .tggraphic-application-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; } .tggraphic-application-card { display: grid; grid-template-columns: 55px minmax(0,1fr); gap: 15px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.12); transition: transform .35s ease, border-color .35s ease; } .tggraphic-application-card:hover { transform: translateY(-5px); border-color: rgba(197,44,255,.40); } .tggraphic-application-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 16px; animation: tggraphicApplicationFloat 3s ease-in-out infinite; } @keyframes tggraphicApplicationFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .tggraphic-application-card span { color: rgba(197,44,255,.70); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; } .tggraphic-application-card h3 { margin: 6px 0 7px; color: #fff; font-size: 17px; } .tggraphic-application-card p { margin: 0; color: rgba(255,255,255,.49); font-size: 11px; line-height: 1.6; } /* ========================================================= WHY TG ========================================================= */ .tggraphic-why { padding: 105px 20px; background: #050505; } .tggraphic-why-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 70px; align-items: center; } .tggraphic-why-content h2 { max-width: 650px; } .tggraphic-why-content > p { max-width: 630px; margin: 22px 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; } .tggraphic-check-list { display: flex; flex-direction: column; gap: 13px; } .tggraphic-check-list > div { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; } .tggraphic-check-list i { color: var(--accent-color); margin-top: 2px; } /* ========================================================= BRAND CARD ========================================================= */ .tggraphic-brand-card { position: relative; min-height: 430px; padding: 28px; overflow: hidden; border-radius: 27px; background: linear-gradient( 145deg, #181818, #090909 ); border: 1px solid rgba(197,44,255,.22); box-shadow: 0 20px 55px rgba(0,0,0,.32); } .tggraphic-brand-card::before { content: ""; position: absolute; width: 340px; height: 340px; right: -170px; bottom: -170px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.12), transparent 70% ); } .tggraphic-brand-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.35); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .tggraphic-brand-top i { color: var(--accent-color); } .tggraphic-brand-word { position: relative; z-index: 2; margin-top: 75px; color: #fff; font-size: clamp(43px,5vw,68px); line-height: .94; font-weight: 700; letter-spacing: -2px; } .tggraphic-brand-word span { display: block; color: rgba(255,255,255,.60); } .tggraphic-brand-word strong { display: block; color: var(--accent-color); } .tggraphic-brand-symbol { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin-top: 60px; } .tggraphic-brand-symbol span { width: 35px; height: 35px; border-radius: 50%; border: 1px solid rgba(197,44,255,.30); animation: tggraphicBrandPulse 2.4s ease-in-out infinite; } .tggraphic-brand-symbol span:nth-child(2) { width: 48px; height: 48px; background: rgba(197,44,255,.08); animation-delay: .25s; } .tggraphic-brand-symbol span:nth-child(3) { width: 25px; height: 25px; background: var(--accent-color); box-shadow: 0 0 20px rgba(197,44,255,.45); animation-delay: .5s; } @keyframes tggraphicBrandPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .tggraphic-brand-bottom { position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; gap: 8px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.35); font-size: 8px; letter-spacing: 1.4px; } /* ========================================================= CTA ========================================================= */ .tggraphic-cta { padding: 35px 20px 110px; background: #050505; } .tggraphic-cta-box { position: relative; padding: 85px 30px; overflow: hidden; border-radius: 28px; text-align: center; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(9,9,9,.99) ); border: 1px solid rgba(197,44,255,.28); box-shadow: 0 20px 55px rgba(0,0,0,.35); } .tggraphic-cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-color), transparent ); } .tggraphic-cta-glow { position: absolute; width: 500px; height: 300px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(197,44,255,.11), transparent 70% ); } .tggraphic-cta-content { position: relative; z-index: 2; } .tggraphic-cta-content h2 { max-width: 850px; margin: 0 auto; } .tggraphic-cta-content p { max-width: 660px; margin: 18px auto 0; color: rgba(255,255,255,.51); font-size: 14px; line-height: 1.7; } .tggraphic-cta-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; padding: 6px 7px 6px 20px; border-radius: 50px; background: var(--accent-color); border: 1px solid var(--accent-color); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(197,44,255,.20); transition: transform .3s ease, box-shadow .3s ease; } .tggraphic-cta-button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tggraphic-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .tggraphic-hero-grid { gap: 45px; } .tggraphic-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tggraphic-process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tggraphic-process-arrow { display: none; } } /* ========================================================= 991px ========================================================= */ @media (max-width: 991px) { .tggraphic-hero { padding-top: 30px; } .tggraphic-hero-grid { grid-template-columns: 1fr; gap: 50px; } .tggraphic-hero-content { text-align: center; } .tggraphic-eyebrow { justify-content: center; } .tggraphic-hero-content > p { margin-left: auto; margin-right: auto; } .tggraphic-hero-buttons { justify-content: center; } .tggraphic-hero-tags { justify-content: center; } .tggraphic-hero-visual { max-width: 720px; width: 100%; margin: 0 auto; } .tggraphic-system-layout { grid-template-columns: 1fr; gap: 45px; } .tggraphic-system-board { max-width: 720px; width: 100%; margin: 0 auto; } .tggraphic-why-grid { grid-template-columns: 1fr; gap: 45px; } .tggraphic-brand-card { max-width: 720px; width: 100%; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tggraphic-hero { padding: 25px 15px 75px; } .tggraphic-breadcrumb { margin-bottom: 40px; } .tggraphic-hero-content h1 { font-size: 43px; letter-spacing: -1.3px; } .tggraphic-hero-content > p { font-size: 14px; } .tggraphic-hero-buttons { flex-direction: column; } .tggraphic-btn { width: 100%; max-width: 300px; } .tggraphic-design-board { padding: 12px; border-radius: 21px; } .tggraphic-tool-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } .tggraphic-services, .tggraphic-system, .tggraphic-process, .tggraphic-applications, .tggraphic-why { padding: 70px 15px; } .tggraphic-section-heading h2, .tggraphic-system-heading h2, .tggraphic-why-content h2, .tggraphic-applications-heading h2 { font-size: 38px; } .tggraphic-service-grid { grid-template-columns: 1fr; } .tggraphic-process-grid { grid-template-columns: 1fr; } .tggraphic-process-card { min-height: auto; } .tggraphic-applications-heading { grid-template-columns: 1fr; gap: 15px; } .tggraphic-application-grid { grid-template-columns: 1fr; } .tggraphic-system-poster { min-height: 350px; } .tggraphic-poster-title { font-size: 53px; } .tggraphic-brand-card { min-height: 360px; border-radius: 22px; } .tggraphic-cta { padding: 15px 15px 70px; } .tggraphic-cta-box { padding: 60px 20px; border-radius: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tggraphic-hero-content h1 { font-size: 35px; } .tggraphic-eyebrow, .tggraphic-section-label { font-size: 10px; letter-spacing: 1.6px; } .tggraphic-art-center strong { font-size: 37px; } .tggraphic-section-heading h2, .tggraphic-system-heading h2, .tggraphic-why-content h2, .tggraphic-applications-heading h2 { font-size: 32px; } .tggraphic-service-card { min-height: 270px; } .tggraphic-system-item { grid-template-columns: 43px minmax(0,1fr); } .tggraphic-poster-title { font-size: 45px; } .tggraphic-brand-word { font-size: 49px; } .tggraphic-cta-content h2 { font-size: 32px; } } /* ========================================================= REDUCE MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tggraphic-board-status i, .tggraphic-art-shape-one, .tggraphic-art-shape-two, .tggraphic-art-shape-three, .tggraphic-service-icon, .tggraphic-process-number i, .tggraphic-application-icon, .tggraphic-poster-circle, .tggraphic-brand-symbol span { animation: none !important; } } /* ========================================================= TG MULTIMEDIA WEBSITE DEVELOPMENT COMPLETE SERVICE PAGE CSS ========================================================= */ /* ========================================================= CONTAINER ========================================================= */ .tgwebdev-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .tgwebdev-hero { position: relative; width: 100%; padding: 35px 20px 105px; overflow: hidden; background: radial-gradient( circle at 82% 40%, rgba(197,44,255,.12), transparent 30% ), #050505; } .tgwebdev-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .tgwebdev-hero-glow-one { width: 500px; height: 500px; right: -250px; top: 50px; background: radial-gradient( circle, rgba(197,44,255,.10), transparent 70% ); } .tgwebdev-hero-glow-two { width: 350px; height: 350px; left: -180px; bottom: -190px; background: radial-gradient( circle, rgba(197,44,255,.06), transparent 70% ); } /* ========================================================= BREADCRUMB ========================================================= */ .tgwebdev-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 55px; color: rgba(255,255,255,.40); font-size: 11px; } .tgwebdev-breadcrumb a { color: rgba(255,255,255,.50); text-decoration: none; transition: color .3s ease; } .tgwebdev-breadcrumb a:hover { color: var(--accent-color); } .tgwebdev-breadcrumb i { color: var(--accent-color); font-size: 9px; } /* ========================================================= HERO GRID ========================================================= */ .tgwebdev-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.93fr); align-items: center; gap: 70px; } /* ========================================================= HERO TEXT ========================================================= */ .tgwebdev-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; } .tgwebdev-eyebrow > span, .tgwebdev-section-label > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,.65); } .tgwebdev-hero-content h1 { margin: 0; max-width: 760px; color: #fff; font-size: clamp(44px,5.5vw,75px); line-height: 1.02; font-weight: 700; letter-spacing: -2px; } .tgwebdev-hero-content h1 span { display: block; color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,.17); } .tgwebdev-hero-content > p { max-width: 650px; margin: 25px 0 0; color: rgba(255,255,255,.60); font-size: 16px; line-height: 1.75; } /* ========================================================= BUTTONS ========================================================= */ .tgwebdev-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .tgwebdev-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 7px 6px 20px; border-radius: 50px; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .tgwebdev-btn-primary { color: #fff; background: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(197,44,255,.20); } .tgwebdev-btn-primary span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgwebdev-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } .tgwebdev-btn-secondary { padding: 0 22px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.25); } .tgwebdev-btn-secondary:hover { color: #fff; border-color: var(--accent-color); transform: translateY(-3px); background: rgba(197,44,255,.07); } /* ========================================================= HERO TAGS ========================================================= */ .tgwebdev-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 23px; } .tgwebdev-hero-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 50px; color: rgba(255,255,255,.50); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.13); font-size: 10px; } .tgwebdev-hero-tags i { color: var(--accent-color); font-size: 10px; } /* ========================================================= BROWSER MOCKUP ========================================================= */ .tgwebdev-browser-card { position: relative; width: 100%; padding: 15px; overflow: hidden; border-radius: 25px; background: linear-gradient( 145deg, #191919, #080808 ); border: 1px solid rgba(197,44,255,.25); box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 45px rgba(197,44,255,.06); animation: tgwebdevBrowserFloat 5s ease-in-out infinite; } @keyframes tgwebdevBrowserFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .tgwebdev-browser-top { display: grid; grid-template-columns: 70px minmax(0,1fr) 20px; align-items: center; gap: 10px; padding: 5px 5px 13px; color: rgba(255,255,255,.30); font-size: 8px; } .tgwebdev-browser-dots { display: flex; align-items: center; gap: 5px; } .tgwebdev-browser-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); } .tgwebdev-browser-url { min-width: 0; padding: 6px 10px; border-radius: 50px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.35); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tgwebdev-browser-top > i { color: var(--accent-color); font-size: 9px; } /* ========================================================= SCREEN ========================================================= */ .tgwebdev-browser-screen { position: relative; width: 100%; aspect-ratio: 1 / .82; overflow: hidden; border-radius: 17px; background: linear-gradient( 135deg, #090909, #17111a ); border: 1px solid rgba(255,255,255,.06); } .tgwebdev-site-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 16px 17px; border-bottom: 1px solid rgba(255,255,255,.05); } .tgwebdev-site-nav strong { color: #fff; font-size: 12px; font-weight: 800; } .tgwebdev-site-nav strong span { color: var(--accent-color); font-weight: 500; } .tgwebdev-site-nav div { display: flex; align-items: center; gap: 7px; } .tgwebdev-site-nav div span { width: 28px; height: 3px; border-radius: 5px; background: rgba(255,255,255,.13); } .tgwebdev-site-body { position: relative; display: grid; grid-template-columns: 1fr .8fr; min-height: 220px; padding: 30px; } .tgwebdev-site-copy { position: relative; z-index: 5; align-self: center; } .tgwebdev-site-copy small { color: rgba(255,255,255,.34); font-size: 7px; font-weight: 700; letter-spacing: 1.8px; } .tgwebdev-site-copy h3 { margin: 10px 0 0; max-width: 280px; color: #fff; font-size: clamp(28px,4vw,45px); line-height: .92; font-weight: 700; letter-spacing: -1px; } .tgwebdev-site-copy h3 span { display: block; color: var(--accent-color); } .tgwebdev-site-button { width: 75px; height: 17px; margin-top: 18px; border-radius: 50px; background: var(--accent-color); box-shadow: 0 0 18px rgba(197,44,255,.20); } /* ========================================================= SITE ART ========================================================= */ .tgwebdev-site-art { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; } .tgwebdev-art-ring { position: absolute; border: 1px solid rgba(197,44,255,.35); border-radius: 50%; animation: tgwebdevRingRotate 8s linear infinite; } .tgwebdev-art-ring-one { width: 180px; height: 180px; } .tgwebdev-art-ring-two { width: 120px; height: 120px; border-color: rgba(197,44,255,.20); animation-direction: reverse; animation-duration: 5s; } @keyframes tgwebdevRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tgwebdev-art-square { width: 72px; height: 72px; transform: rotate(45deg); border: 1px solid rgba(197,44,255,.50); background: rgba(197,44,255,.05); box-shadow: 0 0 45px rgba(197,44,255,.10); animation: tgwebdevSquarePulse 2.5s ease-in-out infinite; } @keyframes tgwebdevSquarePulse { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(55deg) scale(1.12); } } /* ========================================================= SITE CARDS ========================================================= */ .tgwebdev-site-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 0 17px 17px; } .tgwebdev-site-cards div { height: 30px; border-radius: 7px; background: rgba(255,255,255,.035); border: 1px solid rgba(197,44,255,.10); } .tgwebdev-site-cards div:nth-child(2) { background: rgba(197,44,255,.07); } .tgwebdev-browser-bottom { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding: 10px 5px 3px; border-top: 1px solid rgba(255,255,255,.05); color: rgba(255,255,255,.29); font-size: 7px; font-weight: 700; letter-spacing: 1px; text-align: center; } /* ========================================================= SECTION LABELS ========================================================= */ .tgwebdev-section-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.60); font-size: 11px; font-weight: 700; letter-spacing: 2px; } .tgwebdev-section-heading { max-width: 830px; margin: 0 auto 50px; text-align: center; } .tgwebdev-section-heading h2, .tgwebdev-system-heading h2, .tgwebdev-why-content h2, .tgwebdev-cta-content h2 { margin: 0; color: #fff; font-size: clamp(37px,5vw,61px); line-height: 1.05; font-weight: 700; letter-spacing: -1px; } .tgwebdev-section-heading h2 span, .tgwebdev-system-heading h2 span, .tgwebdev-why-content h2 span, .tgwebdev-cta-content h2 span { color: var(--accent-color); } .tgwebdev-section-heading > p, .tgwebdev-system-heading > p { max-width: 700px; margin: 18px auto 0; color: rgba(255,255,255,.54); font-size: 15px; line-height: 1.7; } /* ========================================================= SERVICES ========================================================= */ .tgwebdev-services { padding: 105px 20px; background: #050505; } .tgwebdev-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } .tgwebdev-service-card { position: relative; min-height: 295px; padding: 25px; overflow: hidden; border-radius: 21px; background: linear-gradient( 145deg, rgba(25,25,25,.97), rgba(10,10,10,.98) ); border: 1px solid rgba(197,44,255,.16); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .tgwebdev-service-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.10), transparent 70% ); } .tgwebdev-service-card:hover { transform: translateY(-8px); border-color: rgba(197,44,255,.48); box-shadow: 0 20px 45px rgba(197,44,255,.08); } .tgwebdev-card-number { color: rgba(255,255,255,.18); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .tgwebdev-service-icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; margin-top: 28px; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 18px; animation: tgwebdevServiceIcon 3s ease-in-out infinite; } .tgwebdev-service-card:nth-child(2) .tgwebdev-service-icon { animation-delay: .25s; } .tgwebdev-service-card:nth-child(3) .tgwebdev-service-icon { animation-delay: .50s; } .tgwebdev-service-card:nth-child(4) .tgwebdev-service-icon { animation-delay: .75s; } .tgwebdev-service-card:nth-child(5) .tgwebdev-service-icon { animation-delay: 1s; } .tgwebdev-service-card:nth-child(6) .tgwebdev-service-icon { animation-delay: 1.25s; } @keyframes tgwebdevServiceIcon { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-3deg); } } .tgwebdev-service-card h3 { margin: 21px 0 11px; color: #fff; font-size: 19px; font-weight: 700; } .tgwebdev-service-card p { margin: 0; color: rgba(255,255,255,.53); font-size: 12px; line-height: 1.7; } .tgwebdev-service-tag { display: inline-block; margin-top: 15px; color: rgba(197,44,255,.75); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; } /* ========================================================= SYSTEM ========================================================= */ .tgwebdev-system { padding: 105px 20px; background: radial-gradient( circle at center, rgba(197,44,255,.04), transparent 45% ), #080808; } .tgwebdev-system-heading { max-width: 800px; margin: 0 auto 55px; text-align: center; } .tgwebdev-system-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 60px; align-items: center; } /* ========================================================= CODE WINDOW ========================================================= */ .tgwebdev-code-window { overflow: hidden; border-radius: 23px; background: linear-gradient( 145deg, #191919, #080808 ); border: 1px solid rgba(197,44,255,.20); box-shadow: 0 25px 60px rgba(0,0,0,.30); } .tgwebdev-code-header { display: grid; grid-template-columns: 80px minmax(0,1fr) 20px; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.32); font-size: 8px; } .tgwebdev-code-header > div { display: flex; gap: 5px; } .tgwebdev-code-header > div span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.15); } .tgwebdev-code-header strong { text-align: center; font-size: 8px; letter-spacing: 1.3px; } .tgwebdev-code-header i { color: var(--accent-color); } /* ========================================================= CODE BODY ========================================================= */ .tgwebdev-code-body { position: relative; min-height: 350px; padding: 30px; } .tgwebdev-code-line { display: flex; align-items: center; justify-content: space-between; max-width: 360px; min-height: 38px; padding: 0 13px; color: rgba(255,255,255,.45); font-family: monospace; font-size: 11px; border-left: 1px solid rgba(197,44,255,.11); } .tgwebdev-code-line.tgwebdev-indent { margin-left: 25px; color: rgba(255,255,255,.60); border-left: 1px dashed rgba(197,44,255,.16); } .tgwebdev-code-purple { color: rgba(197,44,255,.88); } .tgwebdev-code-line b { color: #fff; font-size: 11px; } .tgwebdev-code-cursor { width: 7px; height: 17px; margin-top: 10px; margin-left: 13px; background: var(--accent-color); animation: tgwebdevCursor 1s steps(1) infinite; } @keyframes tgwebdevCursor { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } } .tgwebdev-code-footer { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.06); } .tgwebdev-code-footer span { min-height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.31); font-size: 8px; letter-spacing: 1.1px; border-right: 1px solid rgba(255,255,255,.05); } .tgwebdev-code-footer span:last-child { border-right: 0; } /* ========================================================= SYSTEM CONTENT ========================================================= */ .tgwebdev-system-content { display: flex; flex-direction: column; gap: 12px; } .tgwebdev-system-item { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; padding: 17px; border-radius: 15px; background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.12); transition: transform .35s ease, border-color .35s ease; } .tgwebdev-system-item:hover { transform: translateX(6px); border-color: rgba(197,44,255,.35); } .tgwebdev-system-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 14px; } .tgwebdev-system-item h3 { margin: 0 0 6px; color: #fff; font-size: 16px; font-weight: 700; } .tgwebdev-system-item p { margin: 0; color: rgba(255,255,255,.50); font-size: 11px; line-height: 1.6; } /* ========================================================= PROCESS ========================================================= */ .tgwebdev-process { padding: 105px 20px; background: #050505; } .tgwebdev-process-grid { display: grid; grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr); align-items: start; gap: 10px; } .tgwebdev-process-card { min-height: 260px; padding: 23px; border-radius: 20px; background: rgba(255,255,255,.022); border: 1px solid rgba(197,44,255,.14); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .tgwebdev-process-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.42); box-shadow: 0 15px 35px rgba(197,44,255,.07); } .tgwebdev-process-top { display: flex; align-items: center; justify-content: space-between; } .tgwebdev-process-top span { color: rgba(255,255,255,.20); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .tgwebdev-process-top i { color: var(--accent-color); font-size: 16px; animation: tgwebdevProcessIcon 2.5s ease-in-out infinite; } @keyframes tgwebdevProcessIcon { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-5deg); } } .tgwebdev-process-card h3 { margin: 27px 0 11px; color: #fff; font-size: 20px; } .tgwebdev-process-card p { margin: 0; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.7; } .tgwebdev-process-arrow { display: flex; align-items: center; justify-content: center; margin-top: 32px; color: rgba(197,44,255,.65); font-size: 11px; } /* ========================================================= CAPABILITIES ========================================================= */ .tgwebdev-capabilities { padding: 105px 20px; background: #080808; } .tgwebdev-capabilities-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.55fr); gap: 40px; align-items: end; margin-bottom: 45px; } .tgwebdev-capabilities-heading h2 { margin: 0; max-width: 760px; color: #fff; font-size: clamp(37px,5vw,59px); line-height: 1.04; font-weight: 700; } .tgwebdev-capabilities-heading h2 span { color: var(--accent-color); } .tgwebdev-capabilities-heading > p { margin: 0; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.7; } .tgwebdev-capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .tgwebdev-capability-card { min-height: 250px; padding: 23px; border-radius: 19px; background: rgba(255,255,255,.023); border: 1px solid rgba(197,44,255,.13); transition: transform .35s ease, border-color .35s ease; } .tgwebdev-capability-card:hover { transform: translateY(-6px); border-color: rgba(197,44,255,.42); } .tgwebdev-capability-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 17px; animation: tgwebdevCapabilityFloat 3s ease-in-out infinite; } @keyframes tgwebdevCapabilityFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .tgwebdev-capability-card > span { display: block; margin-top: 25px; color: rgba(197,44,255,.68); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } .tgwebdev-capability-card h3 { margin: 6px 0 9px; color: #fff; font-size: 18px; } .tgwebdev-capability-card p { margin: 0; color: rgba(255,255,255,.49); font-size: 11px; line-height: 1.65; } /* ========================================================= WHY TG ========================================================= */ .tgwebdev-why { padding: 105px 20px; background: #050505; } .tgwebdev-why-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 70px; align-items: center; } .tgwebdev-why-content h2 { max-width: 650px; } .tgwebdev-why-content > p { max-width: 630px; margin: 22px 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; } .tgwebdev-check-list { display: flex; flex-direction: column; gap: 13px; } .tgwebdev-check-list > div { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; } .tgwebdev-check-list i { color: var(--accent-color); margin-top: 2px; } /* ========================================================= WHY CARD ========================================================= */ .tgwebdev-why-card { position: relative; min-height: 430px; padding: 28px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-radius: 27px; background: linear-gradient( 145deg, #181818, #090909 ); border: 1px solid rgba(197,44,255,.21); box-shadow: 0 20px 60px rgba(0,0,0,.35); } .tgwebdev-why-card::before { content: ""; position: absolute; width: 350px; height: 350px; right: -175px; bottom: -175px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.12), transparent 70% ); } .tgwebdev-why-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.36); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; } .tgwebdev-why-top i { color: var(--accent-color); animation: tgwebdevGlobe 5s linear infinite; } @keyframes tgwebdevGlobe { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tgwebdev-why-title { position: relative; z-index: 2; color: #fff; font-size: clamp(40px,5vw,66px); line-height: .95; font-weight: 700; letter-spacing: -2px; } .tgwebdev-why-title span { display: block; color: var(--accent-color); } .tgwebdev-network { position: relative; height: 80px; } .tgwebdev-network span { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 18px rgba(197,44,255,.55); animation: tgwebdevNetworkPulse 2.4s ease-in-out infinite; } .tgwebdev-network span:nth-child(1) { left: 8%; top: 55%; } .tgwebdev-network span:nth-child(2) { left: 28%; top: 25%; animation-delay: .3s; } .tgwebdev-network span:nth-child(3) { left: 50%; top: 57%; animation-delay: .6s; } .tgwebdev-network span:nth-child(4) { left: 72%; top: 18%; animation-delay: .9s; } .tgwebdev-network span:nth-child(5) { left: 90%; top: 53%; animation-delay: 1.2s; } .tgwebdev-network::before { content: ""; position: absolute; left: 8%; right: 8%; top: 48%; height: 1px; background: linear-gradient( 90deg, rgba(197,44,255,.16), rgba(197,44,255,.55), rgba(197,44,255,.16) ); } @keyframes tgwebdevNetworkPulse { 0%, 100% { transform: scale(.75); opacity: .45; } 50% { transform: scale(1.25); opacity: 1; } } .tgwebdev-why-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.06); } .tgwebdev-why-tags span { padding: 7px 10px; border-radius: 50px; color: rgba(255,255,255,.40); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); font-size: 8px; letter-spacing: 1.2px; } /* ========================================================= CTA ========================================================= */ .tgwebdev-cta { padding: 35px 20px 110px; background: #050505; } .tgwebdev-cta-box { position: relative; padding: 85px 30px; overflow: hidden; border-radius: 28px; text-align: center; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(9,9,9,.99) ); border: 1px solid rgba(197,44,255,.28); box-shadow: 0 20px 55px rgba(0,0,0,.35); } .tgwebdev-cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-color), transparent ); } .tgwebdev-cta-glow { position: absolute; width: 500px; height: 300px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(197,44,255,.11), transparent 70% ); } .tgwebdev-cta-content { position: relative; z-index: 2; } .tgwebdev-cta-content h2 { max-width: 850px; margin: 0 auto; } .tgwebdev-cta-content p { max-width: 660px; margin: 18px auto 0; color: rgba(255,255,255,.51); font-size: 14px; line-height: 1.7; } .tgwebdev-cta-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; padding: 6px 7px 6px 20px; border-radius: 50px; background: var(--accent-color); border: 1px solid var(--accent-color); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(197,44,255,.20); transition: transform .3s ease, box-shadow .3s ease; } .tgwebdev-cta-button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tgwebdev-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .tgwebdev-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgwebdev-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgwebdev-process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tgwebdev-process-arrow { display: none; } } /* ========================================================= 991px ========================================================= */ @media (max-width: 991px) { .tgwebdev-hero { padding-top: 30px; } .tgwebdev-hero-grid { grid-template-columns: 1fr; gap: 50px; } .tgwebdev-hero-content { text-align: center; } .tgwebdev-eyebrow { justify-content: center; } .tgwebdev-hero-content > p { margin-left: auto; margin-right: auto; } .tgwebdev-hero-buttons { justify-content: center; } .tgwebdev-hero-tags { justify-content: center; } .tgwebdev-hero-visual { max-width: 720px; width: 100%; margin: 0 auto; } .tgwebdev-system-grid, .tgwebdev-why-grid { grid-template-columns: 1fr; gap: 45px; } .tgwebdev-code-window, .tgwebdev-why-card { max-width: 720px; width: 100%; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgwebdev-hero { padding: 25px 15px 75px; } .tgwebdev-breadcrumb { margin-bottom: 40px; } .tgwebdev-hero-content h1 { font-size: 42px; letter-spacing: -1.3px; } .tgwebdev-hero-content > p { font-size: 14px; } .tgwebdev-hero-buttons { flex-direction: column; } .tgwebdev-btn { width: 100%; max-width: 300px; } .tgwebdev-browser-card { padding: 11px; border-radius: 20px; } .tgwebdev-site-body { min-height: 180px; padding: 22px; } .tgwebdev-site-copy h3 { font-size: 32px; } .tgwebdev-site-art { min-height: 165px; } .tgwebdev-art-ring-one { width: 140px; height: 140px; } .tgwebdev-art-ring-two { width: 95px; height: 95px; } .tgwebdev-art-square { width: 55px; height: 55px; } .tgwebdev-browser-bottom { grid-template-columns: repeat(2,1fr); row-gap: 8px; } .tgwebdev-services, .tgwebdev-system, .tgwebdev-process, .tgwebdev-capabilities, .tgwebdev-why { padding: 70px 15px; } .tgwebdev-section-heading h2, .tgwebdev-system-heading h2, .tgwebdev-why-content h2, .tgwebdev-capabilities-heading h2 { font-size: 38px; } .tgwebdev-service-grid { grid-template-columns: 1fr; } .tgwebdev-process-grid { grid-template-columns: 1fr; } .tgwebdev-process-card { min-height: auto; } .tgwebdev-capabilities-heading { grid-template-columns: 1fr; gap: 15px; } .tgwebdev-capability-grid { grid-template-columns: 1fr; } .tgwebdev-code-body { min-height: 300px; padding: 22px; } .tgwebdev-why-card { min-height: 360px; border-radius: 22px; } .tgwebdev-cta { padding: 15px 15px 70px; } .tgwebdev-cta-box { padding: 60px 20px; border-radius: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgwebdev-hero-content h1 { font-size: 35px; } .tgwebdev-eyebrow, .tgwebdev-section-label { font-size: 10px; letter-spacing: 1.6px; } .tgwebdev-hero-tags { gap: 6px; } .tgwebdev-hero-tags span { font-size: 9px; } .tgwebdev-browser-top { grid-template-columns: 55px minmax(0,1fr) 17px; } .tgwebdev-site-body { grid-template-columns: 1fr; min-height: 250px; } .tgwebdev-site-art { position: absolute; width: 150px; right: -20px; top: 55px; opacity: .75; } .tgwebdev-site-copy { max-width: 180px; } .tgwebdev-site-copy h3 { font-size: 29px; } .tgwebdev-section-heading h2, .tgwebdev-system-heading h2, .tgwebdev-why-content h2, .tgwebdev-capabilities-heading h2 { font-size: 32px; } .tgwebdev-service-card { min-height: 275px; } .tgwebdev-code-header { grid-template-columns: 60px minmax(0,1fr) 15px; } .tgwebdev-code-header strong { font-size: 7px; } .tgwebdev-code-line { font-size: 10px; } .tgwebdev-why-title { font-size: 48px; } .tgwebdev-cta-content h2 { font-size: 32px; } } /* ========================================================= REDUCE MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tgwebdev-browser-card, .tgwebdev-service-icon, .tgwebdev-process-top i, .tgwebdev-capability-icon, .tgwebdev-why-top i, .tgwebdev-network span, .tgwebdev-art-ring, .tgwebdev-art-square, .tgwebdev-code-cursor { animation: none !important; } } /* ========================================================= TG MULTIMEDIA 3D ANIMATION COMPLETE SERVICE PAGE ========================================================= */ /* ========================================================= CONTAINER ========================================================= */ .tg3d-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .tg3d-hero { position: relative; width: 100%; padding: 35px 20px 105px; overflow: hidden; background: radial-gradient( circle at 82% 40%, rgba(197,44,255,.12), transparent 30% ), #050505; } .tg3d-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .tg3d-hero-glow-one { width: 500px; height: 500px; right: -250px; top: 50px; background: radial-gradient( circle, rgba(197,44,255,.10), transparent 70% ); } .tg3d-hero-glow-two { width: 350px; height: 350px; left: -180px; bottom: -190px; background: radial-gradient( circle, rgba(197,44,255,.06), transparent 70% ); } /* ========================================================= BREADCRUMB ========================================================= */ .tg3d-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 55px; color: rgba(255,255,255,.40); font-size: 11px; } .tg3d-breadcrumb a { color: rgba(255,255,255,.50); text-decoration: none; transition: color .3s ease; } .tg3d-breadcrumb a:hover { color: var(--accent-color); } .tg3d-breadcrumb i { color: var(--accent-color); font-size: 9px; } /* ========================================================= HERO GRID ========================================================= */ .tg3d-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.93fr); align-items: center; gap: 70px; } /* ========================================================= HERO CONTENT ========================================================= */ .tg3d-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; } .tg3d-eyebrow > span, .tg3d-section-label > span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 15px rgba(197,44,255,.65); } .tg3d-hero-content h1 { margin: 0; max-width: 760px; color: #fff; font-size: clamp(45px,5.6vw,76px); line-height: 1.01; font-weight: 700; letter-spacing: -2px; } .tg3d-hero-content h1 span { display: block; color: var(--accent-color); text-shadow: 0 0 35px rgba(197,44,255,.18); } .tg3d-hero-content > p { max-width: 650px; margin: 25px 0 0; color: rgba(255,255,255,.60); font-size: 16px; line-height: 1.75; } /* ========================================================= BUTTONS ========================================================= */ .tg3d-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 32px; } .tg3d-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 7px 6px 20px; border-radius: 50px; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .tg3d-btn-primary { color: #fff; background: var(--accent-color); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(197,44,255,.20); } .tg3d-btn-primary span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tg3d-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } .tg3d-btn-secondary { padding: 0 22px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.25); } .tg3d-btn-secondary:hover { color: #fff; border-color: var(--accent-color); transform: translateY(-3px); background: rgba(197,44,255,.07); } /* ========================================================= TAGS ========================================================= */ .tg3d-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 23px; } .tg3d-hero-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 50px; color: rgba(255,255,255,.50); background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.13); font-size: 10px; } .tg3d-hero-tags i { color: var(--accent-color); } /* ========================================================= 3D STUDIO CARD ========================================================= */ .tg3d-studio-card { width: 100%; padding: 17px; overflow: hidden; border-radius: 26px; background: linear-gradient( 145deg, #191919, #080808 ); border: 1px solid rgba(197,44,255,.27); box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 50px rgba(197,44,255,.06); animation: tg3dCardFloat 5s ease-in-out infinite; } @keyframes tg3dCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .tg3d-studio-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 5px 14px; color: rgba(255,255,255,.33); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .tg3d-studio-status { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); } .tg3d-studio-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 12px rgba(197,44,255,.75); animation: tg3dRenderStatus 1.6s ease-in-out infinite; } @keyframes tg3dRenderStatus { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } } /* ========================================================= 3D SCENE ========================================================= */ .tg3d-scene { position: relative; width: 100%; aspect-ratio: 1 / .86; overflow: hidden; border-radius: 19px; background: radial-gradient( circle at center, rgba(197,44,255,.13), transparent 36% ), #090909; border: 1px solid rgba(255,255,255,.06); perspective: 700px; } .tg3d-scene-grid { position: absolute; left: 0; right: 0; bottom: -35px; height: 55%; background: linear-gradient( rgba(197,44,255,.12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(197,44,255,.12) 1px, transparent 1px ); background-size: 36px 36px; transform: perspective(200px) rotateX(65deg) scale(1.7); transform-origin: bottom center; opacity: .45; } .tg3d-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(197,44,255,.28); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; } .tg3d-orbit-one { width: 250px; height: 110px; animation: tg3dOrbitOne 6s linear infinite; } .tg3d-orbit-two { width: 180px; height: 245px; animation: tg3dOrbitTwo 8s linear infinite; } .tg3d-orbit-three { width: 290px; height: 150px; transform: translate(-50%,-50%) rotate(34deg); animation: tg3dOrbitThree 7s linear infinite; } @keyframes tg3dOrbitOne { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } } @keyframes tg3dOrbitTwo { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(-360deg); } } @keyframes tg3dOrbitThree { from { transform: translate(-50%,-50%) rotate(34deg); } to { transform: translate(-50%,-50%) rotate(394deg); } } /* ========================================================= MAIN CUBE ========================================================= */ .tg3d-main-cube { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform-style: preserve-3d; transform: translate(-50%,-50%) rotateX(-20deg) rotateY(35deg); animation: tg3dCubeRotate 7s linear infinite; } @keyframes tg3dCubeRotate { from { transform: translate(-50%,-50%) rotateX(-20deg) rotateY(0deg) rotateZ(0deg); } to { transform: translate(-50%,-50%) rotateX(-20deg) rotateY(360deg) rotateZ(360deg); } } .tg3d-cube-face { position: absolute; width: 110px; height: 110px; border: 1px solid rgba(197,44,255,.55); background: linear-gradient( 135deg, rgba(197,44,255,.20), rgba(255,255,255,.015) ); box-shadow: inset 0 0 30px rgba(197,44,255,.06); } .tg3d-cube-front { transform: translateZ(55px); } .tg3d-cube-back { transform: rotateY(180deg) translateZ(55px); } .tg3d-cube-right { transform: rotateY(90deg) translateZ(55px); } .tg3d-cube-left { transform: rotateY(-90deg) translateZ(55px); } .tg3d-cube-top { transform: rotateX(90deg) translateZ(55px); } .tg3d-cube-bottom { transform: rotateX(-90deg) translateZ(55px); } /* ========================================================= SCENE LABEL ========================================================= */ .tg3d-scene-label { position: absolute; left: 22px; bottom: 20px; z-index: 6; } .tg3d-scene-label small { display: block; margin-bottom: 7px; color: rgba(255,255,255,.28); font-size: 8px; font-weight: 700; letter-spacing: 2px; } .tg3d-scene-label strong { display: block; color: #fff; font-size: clamp(30px,4vw,48px); line-height: .9; font-weight: 800; letter-spacing: -2px; } .tg3d-scene-label strong span { color: var(--accent-color); } /* ========================================================= STUDIO BOTTOM ========================================================= */ .tg3d-studio-bottom { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; } .tg3d-studio-bottom > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); } .tg3d-studio-bottom small { color: rgba(255,255,255,.26); font-size: 8px; letter-spacing: 1.3px; font-weight: 700; } .tg3d-studio-bottom strong { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 600; } /* ========================================================= SECTION LABEL ========================================================= */ .tg3d-section-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.60); font-size: 11px; font-weight: 700; letter-spacing: 2px; } /* ========================================================= SECTION HEADING ========================================================= */ .tg3d-section-heading { max-width: 830px; margin: 0 auto 50px; text-align: center; } .tg3d-section-heading h2, .tg3d-workflow-heading h2, .tg3d-studio-content h2, .tg3d-why-content h2, .tg3d-cta-content h2 { margin: 0; color: #fff; font-size: clamp(37px,5vw,61px); line-height: 1.05; font-weight: 700; letter-spacing: -1px; } .tg3d-section-heading h2 span, .tg3d-workflow-heading h2 span, .tg3d-studio-content h2 span, .tg3d-why-content h2 span, .tg3d-cta-content h2 span { color: var(--accent-color); } .tg3d-section-heading > p, .tg3d-workflow-heading > p { max-width: 700px; margin: 18px auto 0; color: rgba(255,255,255,.54); font-size: 15px; line-height: 1.7; } /* ========================================================= SERVICES ========================================================= */ .tg3d-services { padding: 105px 20px; background: #050505; } .tg3d-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; } .tg3d-service-card { position: relative; min-height: 300px; padding: 25px; overflow: hidden; border-radius: 21px; background: linear-gradient( 145deg, rgba(25,25,25,.97), rgba(10,10,10,.98) ); border: 1px solid rgba(197,44,255,.16); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .tg3d-service-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; bottom: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.10), transparent 70% ); } .tg3d-service-card:hover { transform: translateY(-8px); border-color: rgba(197,44,255,.48); box-shadow: 0 20px 45px rgba(197,44,255,.08); } .tg3d-card-number { color: rgba(255,255,255,.18); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .tg3d-service-icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; margin-top: 28px; border-radius: 15px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.18); color: var(--accent-color); font-size: 18px; animation: tg3dServiceFloat 3s ease-in-out infinite; } .tg3d-service-card:nth-child(2) .tg3d-service-icon { animation-delay: .25s; } .tg3d-service-card:nth-child(3) .tg3d-service-icon { animation-delay: .5s; } .tg3d-service-card:nth-child(4) .tg3d-service-icon { animation-delay: .75s; } .tg3d-service-card:nth-child(5) .tg3d-service-icon { animation-delay: 1s; } .tg3d-service-card:nth-child(6) .tg3d-service-icon { animation-delay: 1.25s; } @keyframes tg3dServiceFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-4deg); } } .tg3d-service-card h3 { margin: 21px 0 11px; color: #fff; font-size: 19px; font-weight: 700; } .tg3d-service-card p { margin: 0; color: rgba(255,255,255,.53); font-size: 12px; line-height: 1.7; } .tg3d-service-tag { display: inline-block; margin-top: 15px; color: rgba(197,44,255,.75); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; } /* ========================================================= WORKFLOW ========================================================= */ .tg3d-workflow { padding: 105px 20px; background: radial-gradient( circle at center, rgba(197,44,255,.04), transparent 44% ), #080808; } .tg3d-workflow-heading { max-width: 800px; margin: 0 auto 55px; text-align: center; } .tg3d-workflow-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; } .tg3d-workflow-card { position: relative; min-height: 260px; padding: 22px; border-radius: 19px; background: rgba(255,255,255,.022); border: 1px solid rgba(197,44,255,.13); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .tg3d-workflow-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.42); box-shadow: 0 15px 38px rgba(197,44,255,.07); } .tg3d-workflow-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: rgba(197,44,255,.08); border: 1px solid rgba(197,44,255,.17); color: var(--accent-color); font-size: 15px; animation: tg3dWorkflowIcon 2.6s ease-in-out infinite; } .tg3d-workflow-card:nth-child(2) .tg3d-workflow-icon { animation-delay: .2s; } .tg3d-workflow-card:nth-child(3) .tg3d-workflow-icon { animation-delay: .4s; } .tg3d-workflow-card:nth-child(4) .tg3d-workflow-icon { animation-delay: .6s; } .tg3d-workflow-card:nth-child(5) .tg3d-workflow-icon { animation-delay: .8s; } @keyframes tg3dWorkflowIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) rotate(-4deg); } } .tg3d-workflow-card > span { display: block; margin-top: 22px; color: rgba(197,44,255,.62); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; } .tg3d-workflow-card h3 { margin: 7px 0 10px; color: #fff; font-size: 18px; } .tg3d-workflow-card p { margin: 0; color: rgba(255,255,255,.50); font-size: 11px; line-height: 1.65; } /* ========================================================= STUDIO SECTION ========================================================= */ .tg3d-studio-section { padding: 105px 20px; background: #050505; } .tg3d-studio-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: 65px; align-items: center; } /* ========================================================= RENDER CARD ========================================================= */ .tg3d-render-card { overflow: hidden; border-radius: 24px; background: linear-gradient( 145deg, #181818, #080808 ); border: 1px solid rgba(197,44,255,.20); box-shadow: 0 25px 60px rgba(0,0,0,.32); } .tg3d-render-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.32); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; } .tg3d-render-top span:last-child { color: var(--accent-color); } .tg3d-render-stage { position: relative; min-height: 430px; overflow: hidden; background: radial-gradient( circle at 50% 45%, rgba(197,44,255,.12), transparent 27% ), #080808; perspective: 800px; } .tg3d-render-floor { position: absolute; left: -20%; right: -20%; bottom: -100px; height: 260px; background: linear-gradient( rgba(197,44,255,.11) 1px, transparent 1px ), linear-gradient( 90deg, rgba(197,44,255,.11) 1px, transparent 1px ); background-size: 35px 35px; transform: perspective(170px) rotateX(65deg); opacity: .6; } /* ========================================================= RENDER OBJECT ========================================================= */ .tg3d-render-object { position: absolute; left: 50%; top: 46%; width: 145px; height: 145px; transform: translate(-50%,-50%) rotateX(22deg) rotateY(-28deg); transform-style: preserve-3d; animation: tg3dRenderObject 7s linear infinite; } @keyframes tg3dRenderObject { from { transform: translate(-50%,-50%) rotateX(22deg) rotateY(0deg); } to { transform: translate(-50%,-50%) rotateX(22deg) rotateY(360deg); } } .tg3d-render-object::before, .tg3d-render-object::after, .tg3d-render-object > div { content: ""; position: absolute; inset: 0; border: 1px solid rgba(197,44,255,.55); background: linear-gradient( 135deg, rgba(197,44,255,.19), rgba(255,255,255,.015) ); } .tg3d-render-object::before { transform: translateZ(72px); } .tg3d-render-object::after { transform: rotateY(90deg) translateZ(72px); } .tg3d-render-object > div { transform: rotateX(90deg) translateZ(72px); } .tg3d-render-light { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.12), transparent 65% ); animation: tg3dLightPulse 3s ease-in-out infinite; } @keyframes tg3dLightPulse { 0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } } /* ========================================================= PARTICLES ========================================================= */ .tg3d-render-particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 14px rgba(197,44,255,.65); animation: tg3dParticle 3s ease-in-out infinite; } .tg3d-render-particle.p1 { left: 17%; top: 22%; } .tg3d-render-particle.p2 { right: 17%; top: 30%; animation-delay: .5s; } .tg3d-render-particle.p3 { left: 28%; bottom: 22%; animation-delay: 1s; } .tg3d-render-particle.p4 { right: 25%; bottom: 18%; animation-delay: 1.5s; } @keyframes tg3dParticle { 0%, 100% { transform: translateY(0) scale(.7); opacity: .35; } 50% { transform: translateY(-12px) scale(1.15); opacity: 1; } } /* ========================================================= RENDER TEXT ========================================================= */ .tg3d-render-text { position: absolute; left: 24px; bottom: 23px; z-index: 5; } .tg3d-render-text small { display: block; margin-bottom: 7px; color: rgba(255,255,255,.27); font-size: 8px; letter-spacing: 2px; } .tg3d-render-text strong { display: block; color: #fff; font-size: clamp(42px,5vw,65px); line-height: .88; letter-spacing: -2px; } .tg3d-render-text span { display: block; margin-top: 7px; color: var(--accent-color); font-size: 9px; letter-spacing: 1.6px; font-weight: 700; } .tg3d-render-bottom { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.06); } .tg3d-render-bottom span { min-height: 46px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.32); font-size: 8px; letter-spacing: 1.2px; border-right: 1px solid rgba(255,255,255,.05); } .tg3d-render-bottom span:last-child { border-right: 0; } /* ========================================================= STUDIO CONTENT ========================================================= */ .tg3d-studio-content h2 { max-width: 620px; } .tg3d-studio-content > p { max-width: 620px; margin: 22px 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; } .tg3d-feature-list { display: flex; flex-direction: column; gap: 12px; } .tg3d-feature-list > div { display: flex; align-items: flex-start; gap: 13px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(197,44,255,.11); transition: transform .35s ease, border-color .35s ease; } .tg3d-feature-list > div:hover { transform: translateX(5px); border-color: rgba(197,44,255,.35); } .tg3d-feature-icon { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 12px; } .tg3d-feature-list > div > div:last-child { display: flex; flex-direction: column; gap: 3px; } .tg3d-feature-list strong { color: rgba(255,255,255,.78); font-size: 12px; } .tg3d-feature-list span { color: rgba(255,255,255,.47); font-size: 11px; line-height: 1.5; } /* ========================================================= USE CASES ========================================================= */ .tg3d-usecases { padding: 105px 20px; background: #080808; } .tg3d-usecase-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .tg3d-usecase-card { min-height: 245px; padding: 23px; border-radius: 19px; background: rgba(255,255,255,.022); border: 1px solid rgba(197,44,255,.13); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .tg3d-usecase-card:hover { transform: translateY(-7px); border-color: rgba(197,44,255,.42); box-shadow: 0 15px 40px rgba(197,44,255,.06); } .tg3d-usecase-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(197,44,255,.08); color: var(--accent-color); font-size: 16px; animation: tg3dUsecaseFloat 3s ease-in-out infinite; } .tg3d-usecase-card:nth-child(2) .tg3d-usecase-icon { animation-delay: .3s; } .tg3d-usecase-card:nth-child(3) .tg3d-usecase-icon { animation-delay: .6s; } .tg3d-usecase-card:nth-child(4) .tg3d-usecase-icon { animation-delay: .9s; } @keyframes tg3dUsecaseFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .tg3d-usecase-card h3 { margin: 21px 0 10px; color: #fff; font-size: 19px; } .tg3d-usecase-card p { margin: 0; color: rgba(255,255,255,.50); font-size: 11px; line-height: 1.7; } /* ========================================================= WHY ========================================================= */ .tg3d-why { padding: 105px 20px; background: #050505; } .tg3d-why-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 70px; align-items: center; } .tg3d-why-content h2 { max-width: 650px; } .tg3d-why-content > p { max-width: 630px; margin: 22px 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; } .tg3d-check-list { display: flex; flex-direction: column; gap: 13px; } .tg3d-check-list > div { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; } .tg3d-check-list i { color: var(--accent-color); margin-top: 2px; } /* ========================================================= DEPTH CARD ========================================================= */ .tg3d-depth-card { position: relative; min-height: 430px; padding: 28px; overflow: hidden; border-radius: 27px; background: linear-gradient( 145deg, #181818, #090909 ); border: 1px solid rgba(197,44,255,.22); box-shadow: 0 20px 60px rgba(0,0,0,.35); } .tg3d-depth-card::before { content: ""; position: absolute; width: 350px; height: 350px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient( circle, rgba(197,44,255,.11), transparent 70% ); } .tg3d-depth-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.34); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; } .tg3d-depth-top span:last-child { color: var(--accent-color); } .tg3d-depth-title { position: relative; z-index: 3; margin-top: 70px; color: #fff; font-size: clamp(45px,6vw,70px); line-height: .93; font-weight: 700; letter-spacing: -2px; } .tg3d-depth-title span { display: block; color: var(--accent-color); } .tg3d-depth-orbit { position: relative; z-index: 3; height: 120px; margin-top: 35px; } .tg3d-depth-orbit span { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 22px rgba(197,44,255,.65); animation: tg3dDepthNode 4s ease-in-out infinite; } .tg3d-depth-orbit span:nth-child(1) { margin-left: -80px; margin-top: -15px; } .tg3d-depth-orbit span:nth-child(2) { margin-left: 45px; margin-top: -45px; animation-delay: .7s; } .tg3d-depth-orbit span:nth-child(3) { margin-left: 10px; margin-top: 45px; animation-delay: 1.4s; } @keyframes tg3dDepthNode { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1.35); opacity: 1; } } .tg3d-depth-orbit::before, .tg3d-depth-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(197,44,255,.28); border-radius: 50%; } .tg3d-depth-orbit::before { width: 170px; height: 70px; transform: translate(-50%,-50%) rotate(12deg); } .tg3d-depth-orbit::after { width: 90px; height: 160px; transform: translate(-50%,-50%) rotate(-20deg); } .tg3d-depth-bottom { position: absolute; left: 28px; right: 28px; bottom: 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.06); } .tg3d-depth-bottom span { color: rgba(255,255,255,.32); font-size: 8px; text-align: center; letter-spacing: 1.1px; } /* ========================================================= CTA ========================================================= */ .tg3d-cta { padding: 35px 20px 110px; background: #050505; } .tg3d-cta-box { position: relative; padding: 85px 30px; overflow: hidden; border-radius: 28px; text-align: center; background: linear-gradient( 145deg, rgba(27,27,27,.97), rgba(9,9,9,.99) ); border: 1px solid rgba(197,44,255,.28); box-shadow: 0 20px 55px rgba(0,0,0,.35); } .tg3d-cta-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--accent-color), transparent ); } .tg3d-cta-glow { position: absolute; width: 500px; height: 300px; left: 50%; top: -220px; transform: translateX(-50%); background: radial-gradient( ellipse, rgba(197,44,255,.11), transparent 70% ); } .tg3d-cta-content { position: relative; z-index: 2; } .tg3d-cta-content h2 { max-width: 850px; margin: 0 auto; } .tg3d-cta-content p { max-width: 660px; margin: 18px auto 0; color: rgba(255,255,255,.51); font-size: 14px; line-height: 1.7; } .tg3d-cta-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; padding: 6px 7px 6px 20px; border-radius: 50px; background: var(--accent-color); border: 1px solid var(--accent-color); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 30px rgba(197,44,255,.20); transition: transform .3s ease, box-shadow .3s ease; } .tg3d-cta-button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--accent-color); } .tg3d-cta-button:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197,44,255,.30); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px) { .tg3d-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tg3d-workflow-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .tg3d-usecase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ========================================================= 991px ========================================================= */ @media (max-width:991px) { .tg3d-hero-grid { grid-template-columns: 1fr; gap: 50px; } .tg3d-hero-content { text-align: center; } .tg3d-eyebrow { justify-content: center; } .tg3d-hero-content > p { margin-left: auto; margin-right: auto; } .tg3d-hero-buttons { justify-content: center; } .tg3d-hero-tags { justify-content: center; } .tg3d-hero-visual { max-width: 720px; width: 100%; margin: 0 auto; } .tg3d-studio-layout, .tg3d-why-grid { grid-template-columns: 1fr; gap: 50px; } .tg3d-render-card, .tg3d-depth-card { max-width: 720px; width: 100%; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .tg3d-hero { padding: 25px 15px 75px; } .tg3d-breadcrumb { margin-bottom: 40px; } .tg3d-hero-content h1 { font-size: 42px; letter-spacing: -1.3px; } .tg3d-hero-content > p { font-size: 14px; } .tg3d-hero-buttons { flex-direction: column; } .tg3d-btn { width: 100%; max-width: 300px; } .tg3d-studio-card { padding: 11px; border-radius: 21px; } .tg3d-main-cube { width: 80px; height: 80px; } .tg3d-cube-face { width: 80px; height: 80px; } .tg3d-cube-front { transform: translateZ(40px); } .tg3d-cube-back { transform: rotateY(180deg) translateZ(40px); } .tg3d-cube-right { transform: rotateY(90deg) translateZ(40px); } .tg3d-cube-left { transform: rotateY(-90deg) translateZ(40px); } .tg3d-cube-top { transform: rotateX(90deg) translateZ(40px); } .tg3d-cube-bottom { transform: rotateX(-90deg) translateZ(40px); } .tg3d-studio-bottom { grid-template-columns: 1fr; } .tg3d-services, .tg3d-workflow, .tg3d-studio-section, .tg3d-usecases, .tg3d-why { padding: 70px 15px; } .tg3d-section-heading h2, .tg3d-workflow-heading h2, .tg3d-studio-content h2, .tg3d-why-content h2 { font-size: 38px; } .tg3d-service-grid { grid-template-columns: 1fr; } .tg3d-workflow-grid { grid-template-columns: 1fr; } .tg3d-workflow-card { min-height: auto; } .tg3d-render-stage { min-height: 360px; } .tg3d-render-bottom { grid-template-columns: repeat(2,1fr); } .tg3d-render-bottom span:nth-child(2) { border-right: 0; } .tg3d-render-text strong { font-size: 47px; } .tg3d-usecase-grid { grid-template-columns: 1fr; } .tg3d-depth-card { min-height: 360px; border-radius: 22px; } .tg3d-depth-title { font-size: 52px; } .tg3d-depth-bottom { grid-template-columns: repeat(2,1fr); row-gap: 8px; } .tg3d-cta { padding: 15px 15px 70px; } .tg3d-cta-box { padding: 60px 20px; border-radius: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px) { .tg3d-hero-content h1 { font-size: 35px; } .tg3d-eyebrow, .tg3d-section-label { font-size: 10px; letter-spacing: 1.6px; } .tg3d-hero-tags { gap: 6px; } .tg3d-hero-tags span { font-size: 9px; } .tg3d-scene { aspect-ratio: 1 / .92; } .tg3d-scene-label strong { font-size: 36px; } .tg3d-section-heading h2, .tg3d-workflow-heading h2, .tg3d-studio-content h2, .tg3d-why-content h2 { font-size: 32px; } .tg3d-service-card { min-height: 275px; } .tg3d-render-stage { min-height: 330px; } .tg3d-render-object { width: 105px; height: 105px; } .tg3d-render-object::before { transform: translateZ(52px); } .tg3d-render-object::after { transform: rotateY(90deg) translateZ(52px); } .tg3d-render-object > div { transform: rotateX(90deg) translateZ(52px); } .tg3d-render-text strong { font-size: 39px; } .tg3d-depth-title { font-size: 46px; } .tg3d-cta-content h2 { font-size: 32px; } } /* ========================================================= REDUCE MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tg3d-studio-card, .tg3d-studio-status i, .tg3d-orbit, .tg3d-main-cube, .tg3d-service-icon, .tg3d-workflow-icon, .tg3d-render-object, .tg3d-render-light, .tg3d-render-particle, .tg3d-usecase-icon, .tg3d-depth-orbit span { animation: none !important; } } /* ========================================================= TG MULTIMEDIA - UPDATED PORTFOLIO CTA Unique Prefix: tgportfolio- ========================================================= */ .tgportfolio-cta-section { width: 100%; padding: 40px 20px 80px; position: relative; background: transparent; } .tgportfolio-cta-container { width: min(1280px, 100%); min-height: 145px; margin: 0 auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 30px; padding: 28px 34px; background: linear-gradient( 120deg, rgba(197, 44, 255, 0.055), rgba(255, 255, 255, 0.018) 45%, rgba(197, 44, 255, 0.05) ); border: 1px solid rgba(197, 44, 255, 0.20); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 15px 45px rgba(0,0,0,0.18); transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } /* ========================================================= MAIN CARD HOVER ========================================================= */ .tgportfolio-cta-container:hover { border-color: rgba(197, 44, 255, 0.38); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 22px 55px rgba(0,0,0,0.25), 0 0 45px rgba(197,44,255,0.07); } /* ========================================================= ICON WRAPPER ========================================================= */ .tgportfolio-cta-icon-wrap { position: relative; z-index: 3; flex: 0 0 auto; } /* ========================================================= ICON BOX ========================================================= */ .tgportfolio-cta-icon { width: 78px; height: 78px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 19px; color: #ffffff; font-size: 28px; background: linear-gradient( 145deg, rgba(197,44,255,0.19), rgba(197,44,255,0.055) ); border: 1px solid rgba(197,44,255,0.24); box-shadow: 0 12px 30px rgba(0,0,0,0.20); transition: transform 0.45s cubic-bezier(.2,.8,.2,1), background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* ========================================================= ICON ITSELF ========================================================= */ .tgportfolio-cta-icon i { position: relative; z-index: 3; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), filter 0.35s ease; } /* ========================================================= ICON SHINE ========================================================= */ .tgportfolio-cta-icon-shine { position: absolute; top: -40%; left: -80%; width: 55%; height: 180%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.34), transparent ); transform: rotate(25deg); opacity: 0; transition: left 0.7s ease, opacity 0.3s ease; } /* ========================================================= ICON HOVER ========================================================= */ .tgportfolio-cta-container:hover .tgportfolio-cta-icon { transform: translateY(-5px) rotate(-4deg) scale(1.07); background: linear-gradient( 145deg, rgba(197,44,255,0.30), rgba(197,44,255,0.09) ); border-color: rgba(197,44,255,0.48); box-shadow: 0 15px 35px rgba(0,0,0,0.25), 0 0 30px rgba(197,44,255,0.13); } .tgportfolio-cta-container:hover .tgportfolio-cta-icon i { transform: scale(1.12); filter: drop-shadow( 0 0 10px rgba(197,44,255,0.55) ); } .tgportfolio-cta-container:hover .tgportfolio-cta-icon-shine { left: 145%; opacity: 1; } /* ========================================================= CONTENT ========================================================= */ .tgportfolio-cta-content { position: relative; z-index: 3; flex: 1; min-width: 0; } .tgportfolio-cta-label { display: block; margin-bottom: 5px; color: #cd68ff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.17em; } .tgportfolio-cta-content h2 { margin: 0; color: #ffffff; font-size: clamp(30px, 3vw, 43px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; } .tgportfolio-cta-content h2 span { color: #c52cff; } .tgportfolio-cta-content p { max-width: 650px; margin: 10px 0 0; color: #8f8f99; font-size: 13px; line-height: 1.65; } /* ========================================================= BUTTON AREA ========================================================= */ .tgportfolio-cta-action { position: relative; z-index: 3; flex: 0 0 auto; } /* ========================================================= BUTTON ========================================================= */ .tgportfolio-cta-button { min-height: 51px; padding: 0 22px; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 11px; color: #ffffff !important; background: linear-gradient( 135deg, #c52cff, #aa1ee2 ); border: 1px solid rgba(255,255,255,0.08); text-decoration: none; font-size: 13px; font-weight: 700; box-shadow: 0 12px 28px rgba(197,44,255,0.18); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, filter 0.35s ease; } /* ========================================================= BUTTON CONTENT ========================================================= */ .tgportfolio-cta-button span:first-child, .tgportfolio-cta-button i { position: relative; z-index: 3; } .tgportfolio-cta-button i { font-size: 11px; transition: transform 0.35s ease; } /* ========================================================= BUTTON SHINE ========================================================= */ .tgportfolio-cta-button-shine { position: absolute; top: -100%; left: -60%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.35), transparent ); transform: rotate(25deg); pointer-events: none; } /* ========================================================= BUTTON HOVER ========================================================= */ .tgportfolio-cta-button:hover { color: #ffffff !important; transform: translateY(-4px) scale(1.02); filter: brightness(1.08); box-shadow: 0 18px 38px rgba(197,44,255,0.32), 0 0 25px rgba(197,44,255,0.10); } .tgportfolio-cta-button:hover i { transform: translate(3px, -3px); } .tgportfolio-cta-button:hover .tgportfolio-cta-button-shine { animation: tgportfolioButtonShine 0.75s ease forwards; } @keyframes tgportfolioButtonShine { 0% { left: -65%; } 100% { left: 150%; } } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .tgportfolio-cta-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(5px); } .tgportfolio-cta-glow-one { width: 250px; height: 250px; right: 120px; top: -190px; background: radial-gradient( circle, rgba(197,44,255,0.13), transparent 68% ); } .tgportfolio-cta-glow-two { width: 220px; height: 220px; left: -100px; bottom: -170px; background: radial-gradient( circle, rgba(197,44,255,0.09), transparent 68% ); } /* ========================================================= SMALL ACCENT LINE ========================================================= */ .tgportfolio-cta-container::after { content: ""; position: absolute; width: 65px; height: 2px; left: 34px; bottom: 0; background: linear-gradient( 90deg, #c52cff, transparent ); border-radius: 20px; opacity: 0.8; transition: width 0.4s ease, opacity 0.4s ease; } .tgportfolio-cta-container:hover::after { width: 110px; opacity: 1; } /* ========================================================= RESPONSIVE - TABLET ========================================================= */ @media (max-width: 991px) { .tgportfolio-cta-container { gap: 22px; padding: 25px; } .tgportfolio-cta-icon { width: 68px; height: 68px; font-size: 24px; } .tgportfolio-cta-content h2 { font-size: 32px; } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 767px) { .tgportfolio-cta-section { padding: 25px 14px 65px; } .tgportfolio-cta-container { min-height: auto; flex-direction: column; align-items: flex-start; gap: 18px; padding: 25px 22px; border-radius: 18px; } .tgportfolio-cta-icon { width: 62px; height: 62px; border-radius: 16px; font-size: 22px; } .tgportfolio-cta-content h2 { font-size: 32px; } .tgportfolio-cta-content p { font-size: 12px; } .tgportfolio-cta-action { width: 100%; } .tgportfolio-cta-button { width: 100%; } .tgportfolio-cta-container::after { left: 22px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .tgportfolio-cta-container { padding: 22px 18px; } .tgportfolio-cta-content h2 { font-size: 29px; } .tgportfolio-cta-icon { width: 58px; height: 58px; font-size: 20px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tgportfolio-cta-container, .tgportfolio-cta-icon, .tgportfolio-cta-button, .tgportfolio-cta-button i { transition: none !important; } .tgportfolio-cta-button-shine, .tgportfolio-cta-icon-shine { animation: none !important; } } /* ========================================================= TG MULTIMEDIA - LIFE AT TG Unique Prefix: tg-life- ========================================================= */ .tg-life-section { width: 100%; padding: 90px 20px; position: relative; background: transparent; overflow: hidden; } .tg-life-container { width: min(1280px, 100%); min-height: 520px; margin: 0 auto; position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: stretch; gap: 55px; padding: 40px 42px; border-radius: 28px; background: linear-gradient( 135deg, rgba(197,44,255,0.045), rgba(255,255,255,0.012) 48%, rgba(197,44,255,0.055) ); border: 1px solid rgba(197,44,255,0.20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 25px 70px rgba(0,0,0,0.20); } /* ========================================================= LEFT VISUAL ========================================================= */ .tg-life-visual { position: relative; min-height: 430px; border-radius: 24px; overflow: hidden; background: #09090c; border: 1px solid rgba(255,255,255,0.07); } /* ========================================================= SLIDER ========================================================= */ .tg-life-slider { width: 100%; height: 100%; position: relative; } .tg-life-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.035); transition: opacity 0.8s ease, transform 1.2s ease, visibility 0.8s ease; } .tg-life-slide-active { opacity: 1; visibility: visible; transform: scale(1); } .tg-life-slide img { width: 100%; height: 100%; display: block; object-fit: cover; } /* Dark gradient for premium look */ .tg-life-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.12) ); z-index: 2; } /* ========================================================= COUNTER ========================================================= */ .tg-life-counter { position: absolute; right: 22px; top: 22px; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 100px; background: rgba(5,5,5,0.65); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); } .tg-life-current { color: #ffffff; font-size: 11px; font-weight: 800; } .tg-life-total { color: #8d8d97; font-size: 10px; font-weight: 700; } .tg-life-counter-line { width: 18px; height: 1px; background: rgba(255,255,255,0.25); } /* ========================================================= DOTS ========================================================= */ .tg-life-dots { position: absolute; left: 22px; bottom: 20px; z-index: 5; display: flex; gap: 7px; } .tg-life-dot { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 100px; cursor: pointer; background: rgba(255,255,255,0.28); transition: width 0.35s ease, background 0.35s ease; } .tg-life-dot-active { width: 42px; background: #c52cff; box-shadow: 0 0 12px rgba(197,44,255,0.50); } /* ========================================================= CONTENT ========================================================= */ .tg-life-content { align-self: center; padding: 10px 10px 10px 0; } .tg-life-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: #dedee3; font-size: 15px; font-weight: 600; } .tg-life-kicker-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #c52cff; font-size: 8px; border: 2px solid #c52cff; box-shadow: 0 0 14px rgba(197,44,255,0.28); } .tg-life-title { margin: 0; max-width: 610px; color: #ffffff; font-size: clamp(42px, 4.4vw, 64px); line-height: 0.98; font-weight: 800; letter-spacing: -0.045em; } .tg-life-title span { display: block; color: #c52cff; } /* ========================================================= DIVIDER ========================================================= */ .tg-life-divider { width: 125px; height: 2px; margin: 28px 0 27px; border-radius: 100px; background: linear-gradient( 90deg, #c52cff, rgba(197,44,255,0) ); } /* ========================================================= PARAGRAPHS ========================================================= */ .tg-life-text { max-width: 620px; margin: 0 0 19px; color: #a8a8b0; font-size: 15px; line-height: 1.85; } /* ========================================================= HIGHLIGHTS ========================================================= */ .tg-life-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 27px 0 28px; } .tg-life-highlight-item { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 12px 10px; border-radius: 13px; background: rgba(255,255,255,0.022); border: 1px solid rgba(255,255,255,0.06); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .tg-life-highlight-item:hover { transform: translateY(-4px); border-color: rgba(197,44,255,0.22); background: rgba(197,44,255,0.045); } .tg-life-highlight-icon { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: #c52cff; background: rgba(197,44,255,0.09); border: 1px solid rgba(197,44,255,0.15); font-size: 11px; } .tg-life-highlight-item strong { display: block; margin-bottom: 3px; color: #ffffff; font-size: 11px; } .tg-life-highlight-item small { display: block; color: #8d8d97; font-size: 9px; line-height: 1.45; } /* ========================================================= BUTTON ========================================================= */ .tg-life-button { display: inline-flex; align-items: center; gap: 10px; min-height: 53px; padding: 0 8px 0 22px; border-radius: 100px; color: #ffffff !important; text-decoration: none; border: 1px solid rgba(197,44,255,0.34); background: rgba(197,44,255,0.025); font-size: 13px; font-weight: 700; transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } .tg-life-button:hover { color: #ffffff !important; transform: translateY(-3px); border-color: rgba(197,44,255,0.55); background: rgba(197,44,255,0.08); box-shadow: 0 12px 28px rgba(197,44,255,0.12); } .tg-life-button-icon { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #c52cff; color: #ffffff; box-shadow: 0 7px 20px rgba(197,44,255,0.28); transition: transform 0.35s ease; } .tg-life-button:hover .tg-life-button-icon { transform: translateX(3px); } /* ========================================================= RESPONSIVE - TABLET ========================================================= */ @media (max-width: 991px) { .tg-life-section { padding: 75px 20px; } .tg-life-container { grid-template-columns: 1fr; gap: 40px; padding: 30px; } .tg-life-visual { min-height: 450px; } .tg-life-content { padding: 0; } .tg-life-title { font-size: clamp(40px, 6vw, 58px); } .tg-life-highlights { max-width: 700px; } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 767px) { .tg-life-section { padding: 55px 14px; } .tg-life-container { width: 100%; padding: 18px; gap: 30px; border-radius: 22px; } .tg-life-visual { min-height: 330px; border-radius: 18px; } .tg-life-counter { right: 14px; top: 14px; } .tg-life-dots { left: 14px; bottom: 14px; } .tg-life-content { padding: 0; } .tg-life-kicker { font-size: 13px; margin-bottom: 18px; } .tg-life-title { font-size: clamp(35px, 10vw, 48px); } .tg-life-divider { margin: 22px 0; } .tg-life-text { font-size: 14px; line-height: 1.8; } .tg-life-highlights { grid-template-columns: 1fr; gap: 9px; } .tg-life-highlight-item { padding: 11px; } .tg-life-button { width: fit-content; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .tg-life-container { padding: 15px; } .tg-life-visual { min-height: 270px; } .tg-life-title { font-size: 34px; } .tg-life-text { font-size: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tg-life-slide, .tg-life-dot, .tg-life-highlight-item, .tg-life-button, .tg-life-button-icon { transition: none !important; } } /* ========================================================= TG LIFE SECTION - PREMIUM MOTION ========================================================= */ /* Main section subtle atmosphere */ .tg-life-section { position: relative; overflow: hidden; } /* Moving background glow */ .tg-life-section::before { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; top: 10%; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.11), transparent 70% ); filter: blur(10px); pointer-events: none; animation: tgLifeGlowMove 8s ease-in-out infinite; } /* Second ambient glow */ .tg-life-section::after { content: ""; position: absolute; width: 300px; height: 300px; left: -160px; bottom: -100px; border-radius: 50%; background: radial-gradient( circle, rgba(197, 44, 255, 0.07), transparent 70% ); filter: blur(8px); pointer-events: none; animation: tgLifeGlowMoveTwo 10s ease-in-out infinite; } /* ========================================================= CONTAINER ========================================================= */ .tg-life-container { position: relative; z-index: 2; transition: border-color 0.4s ease, box-shadow 0.4s ease; } .tg-life-container:hover { border-color: rgba(197, 44, 255, 0.30); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 28px 75px rgba(0,0,0,0.25), 0 0 55px rgba(197,44,255,0.045); } /* ========================================================= IMAGE VISUAL ========================================================= */ .tg-life-visual { position: relative; isolation: isolate; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease, box-shadow 0.4s ease; } .tg-life-visual:hover { transform: translateY(-5px); border-color: rgba(197, 44, 255, 0.28); box-shadow: 0 20px 45px rgba(0,0,0,0.28), 0 0 30px rgba(197,44,255,0.06); } /* ========================================================= IMAGE CINEMATIC MOVEMENT ========================================================= */ .tg-life-slide-active img { animation: tgLifeImageZoom 4.8s ease-in-out forwards; } @keyframes tgLifeImageZoom { 0% { transform: scale(1.00) translate3d(0, 0, 0); } 50% { transform: scale(1.035) translate3d(-0.8%, -0.5%, 0); } 100% { transform: scale(1.05) translate3d(0.8%, 0.3%, 0); } } /* ========================================================= IMAGE HOVER ========================================================= */ .tg-life-visual:hover .tg-life-slide-active img { transform: scale(1.075) translate3d(0, -1%, 0) !important; transition: transform 0.8s cubic-bezier(.2,.8,.2,1); } /* ========================================================= IMAGE SHINE ========================================================= */ .tg-life-visual::before { content: ""; position: absolute; z-index: 4; top: -30%; left: -70%; width: 35%; height: 170%; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.13), transparent ); transform: rotate(20deg); opacity: 0; } .tg-life-visual:hover::before { opacity: 1; animation: tgLifeImageShine 1s ease forwards; } @keyframes tgLifeImageShine { 0% { left: -70%; } 100% { left: 145%; } } /* ========================================================= IMAGE COUNTER ========================================================= */ .tg-life-counter { transition: transform 0.35s ease, background 0.35s ease; } .tg-life-visual:hover .tg-life-counter { transform: translateY(-3px); background: rgba(197,44,255,0.13); border-color: rgba(197,44,255,0.25); } /* ========================================================= DOTS ========================================================= */ .tg-life-dot { transition: width 0.35s ease, transform 0.3s ease, background 0.3s ease; } .tg-life-dot:hover { transform: scaleY(1.8); } .tg-life-dot-active { animation: tgLifeDotPulse 2s ease-in-out infinite; } @keyframes tgLifeDotPulse { 0%, 100% { box-shadow: 0 0 8px rgba(197,44,255,0.35); } 50% { box-shadow: 0 0 18px rgba(197,44,255,0.65); } } /* ========================================================= KICKER ========================================================= */ .tg-life-kicker { animation: tgLifeKickerFloat 4s ease-in-out infinite; } @keyframes tgLifeKickerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Kicker icon pulse */ .tg-life-kicker-icon { animation: tgLifeKickerPulse 2.4s ease-in-out infinite; } @keyframes tgLifeKickerPulse { 0%, 100% { box-shadow: 0 0 10px rgba(197,44,255,0.22); } 50% { box-shadow: 0 0 21px rgba(197,44,255,0.58); } } /* ========================================================= HEADING ========================================================= */ .tg-life-title span { display: block; background: linear-gradient( 90deg, #c52cff, #e066ff, #c52cff ); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: tgLifeTitleGradient 5s ease-in-out infinite; } @keyframes tgLifeTitleGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================= DIVIDER ANIMATION ========================================================= */ .tg-life-divider { position: relative; overflow: hidden; } .tg-life-divider::after { content: ""; position: absolute; top: 0; left: -80px; width: 65px; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.8), transparent ); animation: tgLifeDividerShine 3s ease-in-out infinite; } @keyframes tgLifeDividerShine { 0% { left: -80px; } 45%, 100% { left: 150px; } } /* ========================================================= PARAGRAPH SUBTLE FLOAT ========================================================= */ .tg-life-text:first-of-type { animation: tgLifeTextFloat 5s ease-in-out infinite; } @keyframes tgLifeTextFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* ========================================================= HIGHLIGHT CARDS ========================================================= */ .tg-life-highlight-item { position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .tg-life-highlight-item::before { content: ""; position: absolute; top: 0; left: -100%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(197,44,255,0.10), transparent ); transition: left 0.6s ease; } .tg-life-highlight-item:hover { transform: translateY(-6px) scale(1.015); border-color: rgba(197,44,255,0.28); background: rgba(197,44,255,0.055); box-shadow: 0 12px 25px rgba(0,0,0,0.18); } .tg-life-highlight-item:hover::before { left: 130%; } .tg-life-highlight-icon { transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .tg-life-highlight-item:hover .tg-life-highlight-icon { transform: rotate(-8deg) scale(1.08); background: rgba(197,44,255,0.16); box-shadow: 0 0 15px rgba(197,44,255,0.12); } /* ========================================================= BUTTON ========================================================= */ .tg-life-button { position: relative; overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .tg-life-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.10), transparent ); transform: skewX(-20deg); } .tg-life-button:hover::before { animation: tgLifeButtonShine 0.8s ease forwards; } @keyframes tgLifeButtonShine { 0% { left: -100%; } 100% { left: 140%; } } .tg-life-button:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(197,44,255,0.15); } .tg-life-button-icon { transition: transform 0.35s cubic-bezier(.2,.8,.2,1); } .tg-life-button:hover .tg-life-button-icon { transform: translateX(5px) rotate(-3deg); } /* ========================================================= KEYFRAMES - BACKGROUND ========================================================= */ @keyframes tgLifeGlowMove { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-50px,35px,0) scale(1.15); } } @keyframes tgLifeGlowMoveTwo { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(55px,-25px,0) scale(1.12); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tg-life-section::before, .tg-life-section::after, .tg-life-slide-active img, .tg-life-kicker, .tg-life-kicker-icon, .tg-life-title span, .tg-life-divider::after, .tg-life-text:first-of-type, .tg-life-dot-active { animation: none !important; } } /* ========================================================= TG MULTIMEDIA - BEHIND THE SHOOT Unique Prefix: tgbts- ========================================================= */ .tgbts-section { width: 100%; padding: 110px 20px; position: relative; overflow: hidden; background: radial-gradient( circle at 15% 20%, rgba(197,44,255,0.055), transparent 28% ), radial-gradient( circle at 85% 70%, rgba(197,44,255,0.045), transparent 28% ); } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .tgbts-bg-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); } .tgbts-bg-glow-one { width: 440px; height: 440px; left: -230px; top: 20%; background: radial-gradient( circle, rgba(197,44,255,0.10), transparent 70% ); animation: tgbtsGlowOne 10s ease-in-out infinite; } .tgbts-bg-glow-two { width: 390px; height: 390px; right: -200px; bottom: 5%; background: radial-gradient( circle, rgba(197,44,255,0.08), transparent 70% ); animation: tgbtsGlowTwo 12s ease-in-out infinite; } @keyframes tgbtsGlowOne { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-35px) scale(1.15); } } @keyframes tgbtsGlowTwo { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,30px) scale(1.12); } } /* ========================================================= CONTAINER ========================================================= */ .tgbts-container { width: min(1280px, 100%); margin: 0 auto; position: relative; z-index: 2; } /* ========================================================= HEADING ========================================================= */ .tgbts-heading { max-width: 760px; margin-bottom: 55px; } .tgbts-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #d76dff; font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; } .tgbts-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: #c52cff; box-shadow: 0 0 0 5px rgba(197,44,255,0.08), 0 0 15px rgba(197,44,255,0.5); animation: tgbtsDotPulse 2s ease-in-out infinite; } @keyframes tgbtsDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } } .tgbts-title { margin: 0; color: #ffffff; font-size: clamp(40px, 5vw, 65px); line-height: 1.03; font-weight: 800; letter-spacing: -0.045em; } .tgbts-title span { color: #c52cff; display: block; background: linear-gradient( 90deg, #c52cff, #e574ff, #c52cff ); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: tgbtsTitleGradient 5s ease-in-out infinite; } @keyframes tgbtsTitleGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tgbts-description { max-width: 690px; margin: 22px 0 0; color: #9898a2; font-size: 15px; line-height: 1.85; } /* ========================================================= FEATURED WRAP ========================================================= */ .tgbts-featured-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr); gap: 30px; align-items: stretch; margin-bottom: 65px; } /* ========================================================= FEATURED VIDEO BOX ========================================================= */ .tgbts-featured-video-box { min-width: 0; border-radius: 27px; background: linear-gradient( 145deg, rgba(197,44,255,0.06), rgba(255,255,255,0.015) ); border: 1px solid rgba(197,44,255,0.17); overflow: hidden; box-shadow: 0 25px 70px rgba(0,0,0,0.27); transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .tgbts-featured-video-box:hover { transform: translateY(-5px); border-color: rgba(197,44,255,0.30); box-shadow: 0 30px 75px rgba(0,0,0,0.32), 0 0 35px rgba(197,44,255,0.05); } /* ========================================================= MAIN VIDEO ========================================================= */ .tgbts-featured-video { aspect-ratio: 16 / 8.3; position: relative; overflow: hidden; background: #08080b; } .tgbts-featured-video video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.015); transition: transform 1s cubic-bezier(.2,.8,.2,1); } .tgbts-featured-video-box:hover .tgbts-featured-video video { transform: scale(1.045); } /* ========================================================= VIDEO OVERLAY ========================================================= */ .tgbts-video-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: linear-gradient( 180deg, rgba(0,0,0,0.38), transparent 45%, rgba(0,0,0,0.58) ); } .tgbts-video-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 100px; color: #ffffff; font-size: 10px; font-weight: 700; background: rgba(7,7,10,0.64); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); } .tgbts-video-badge i { color: #c52cff; } .tgbts-featured-title { color: #ffffff; font-size: clamp(22px, 3vw, 38px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; text-shadow: 0 4px 25px rgba(0,0,0,0.5); } /* ========================================================= SCAN LINE ========================================================= */ .tgbts-video-scan { position: absolute; width: 100%; height: 2px; top: -5px; left: 0; z-index: 5; background: linear-gradient( 90deg, transparent, rgba(197,44,255,0.75), transparent ); filter: blur(0.5px); opacity: 0.65; animation: tgbtsScan 5s linear infinite; } @keyframes tgbtsScan { 0% { top: -5px; } 100% { top: 100%; } } /* ========================================================= FEATURED INFO ========================================================= */ .tgbts-featured-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; } .tgbts-featured-label { display: block; margin-bottom: 5px; color: #9999a2; font-size: 9px; font-weight: 800; letter-spacing: 0.15em; } .tgbts-featured-info h3 { margin: 0; color: #ffffff; font-size: 18px; font-weight: 700; } .tgbts-featured-number { display: flex; align-items: center; gap: 8px; color: #ffffff; font-size: 11px; font-weight: 700; } .tgbts-number-line { width: 25px; height: 1px; background: rgba(255,255,255,0.22); } /* ========================================================= SIDE CONTENT ========================================================= */ .tgbts-side-content { padding: 22px 4px; display: flex; flex-direction: column; justify-content: center; } .tgbts-side-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; } .tgbts-side-top span { color: #cd65ff; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; } .tgbts-side-top i { color: #c52cff; animation: tgbtsArrowBounce 2s ease-in-out infinite; } @keyframes tgbtsArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .tgbts-side-content h3 { margin: 0; color: #ffffff; font-size: clamp(31px, 3.2vw, 46px); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; } .tgbts-side-content h3 span { color: #c52cff; } .tgbts-side-content > p { margin: 22px 0 25px; color: #9999a3; font-size: 14px; line-height: 1.85; } /* ========================================================= STATS ========================================================= */ .tgbts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; } .tgbts-stat { padding: 14px 11px; border-radius: 13px; background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.06); transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease; } .tgbts-stat:hover { transform: translateY(-5px); background: rgba(197,44,255,0.05); border-color: rgba(197,44,255,0.22); } .tgbts-stat strong { display: block; margin-bottom: 3px; color: #ffffff; font-size: 16px; } .tgbts-stat small { color: #85858f; font-size: 9px; line-height: 1.3; } /* ========================================================= CTA ========================================================= */ .tgbts-view-work { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 8px 0 20px; border-radius: 100px; color: #ffffff !important; text-decoration: none; border: 1px solid rgba(197,44,255,0.30); background: rgba(197,44,255,0.025); font-size: 12px; font-weight: 700; transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease; } .tgbts-view-work:hover { color: #ffffff !important; transform: translateY(-4px); background: rgba(197,44,255,0.08); border-color: rgba(197,44,255,0.48); } .tgbts-view-work-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: #c52cff; transition: transform 0.35s ease; } .tgbts-view-work:hover .tgbts-view-work-icon { transform: translateX(4px) rotate(-4deg); } /* ========================================================= GALLERY HEADER ========================================================= */ .tgbts-gallery-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 25px; } .tgbts-gallery-label { display: block; margin-bottom: 8px; color: #c55bff; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; } .tgbts-gallery-header h3 { margin: 0; color: #ffffff; font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; } .tgbts-gallery-header h3 span { color: #c52cff; } /* ========================================================= GALLERY CONTROLS ========================================================= */ .tgbts-gallery-controls { display: flex; gap: 8px; } .tgbts-gallery-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.025); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .tgbts-gallery-btn:hover { transform: translateY(-3px); background: rgba(197,44,255,0.10); border-color: rgba(197,44,255,0.28); } .tgbts-gallery-btn i { transition: transform 0.3s ease; } .tgbts-prev:hover i { transform: translateX(-3px); } .tgbts-next:hover i { transform: translateX(3px); } /* ========================================================= SLIDER ========================================================= */ .tgbts-slider-window { width: 100%; overflow: hidden; } .tgbts-slider-track { display: flex; gap: 17px; will-change: transform; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); } /* ========================================================= VIDEO CARD ========================================================= */ .tgbts-card { flex: 0 0 calc((100% - 51px) / 4); min-width: 0; border-radius: 19px; overflow: hidden; background: linear-gradient( 145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012) ); border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease; } .tgbts-card:hover { transform: translateY(-8px); border-color: rgba(197,44,255,0.30); box-shadow: 0 18px 35px rgba(0,0,0,0.25), 0 0 25px rgba(197,44,255,0.05); } .tgbts-card-active { border-color: rgba(197,44,255,0.38); box-shadow: 0 0 25px rgba(197,44,255,0.06); } /* ========================================================= CARD VIDEO ========================================================= */ .tgbts-card-video { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #09090c; } .tgbts-card-video video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.01); transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.5s ease; } .tgbts-card:hover .tgbts-card-video video { transform: scale(1.08); filter: brightness(0.88); } /* ========================================================= CARD OVERLAY ========================================================= */ .tgbts-card-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 45%, rgba(0,0,0,0.48) ); pointer-events: none; } /* ========================================================= PLAY ========================================================= */ .tgbts-play { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: rgba(197,44,255,0.90); box-shadow: 0 0 0 8px rgba(197,44,255,0.10), 0 0 30px rgba(197,44,255,0.25); transition: transform 0.35s ease, width 0.35s ease, height 0.35s ease; } .tgbts-play i { font-size: 12px; margin-left: 2px; } .tgbts-card:hover .tgbts-play { width: 56px; height: 56px; transform: translate(-50%, -50%) scale(1.03); } .tgbts-card-active .tgbts-play { animation: tgbtsPlayPulse 2s ease-in-out infinite; } @keyframes tgbtsPlayPulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(197,44,255,0.10), 0 0 25px rgba(197,44,255,0.20); } 50% { box-shadow: 0 0 0 13px rgba(197,44,255,0.05), 0 0 38px rgba(197,44,255,0.35); } } /* ========================================================= CARD TAG ========================================================= */ .tgbts-card-tag { position: absolute; left: 12px; top: 12px; padding: 5px 8px; border-radius: 7px; color: #ffffff; background: rgba(7,7,10,0.65); border: 1px solid rgba(255,255,255,0.09); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; backdrop-filter: blur(8px); } /* ========================================================= CARD INFO ========================================================= */ .tgbts-card-info { padding: 14px 15px 16px; } .tgbts-card-info h4 { margin: 0 0 4px; color: #ffffff; font-size: 13px; font-weight: 700; } .tgbts-card-info span { color: #85858f; font-size: 9px; } /* ========================================================= PROGRESS ========================================================= */ .tgbts-progress { width: 100%; height: 2px; margin-top: 24px; border-radius: 100px; background: rgba(255,255,255,0.06); overflow: hidden; } .tgbts-progress-bar { width: 25%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, #c52cff, #e36fff ); transition: width 0.5s ease; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .tgbts-featured-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 25px; } .tgbts-card { flex: 0 0 calc((100% - 34px) / 3); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .tgbts-featured-wrap { grid-template-columns: 1fr; } .tgbts-side-content { padding: 10px 0 0; } .tgbts-side-content > p { max-width: 700px; } .tgbts-card { flex: 0 0 calc((100% - 17px) / 2); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgbts-section { padding: 75px 14px; } .tgbts-heading { margin-bottom: 38px; } .tgbts-title { font-size: 39px; } .tgbts-description { font-size: 13px; } .tgbts-featured-video { aspect-ratio: 16 / 10; } .tgbts-featured-wrap { margin-bottom: 48px; } .tgbts-side-content h3 { font-size: 36px; } .tgbts-stats { gap: 6px; } .tgbts-gallery-header { align-items: center; } .tgbts-gallery-header h3 { font-size: 27px; } .tgbts-gallery-controls { flex-shrink: 0; } .tgbts-card { flex: 0 0 83%; } .tgbts-play { width: 45px; height: 45px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .tgbts-title { font-size: 34px; } .tgbts-featured-video { aspect-ratio: 16 / 11; } .tgbts-featured-info { padding: 17px; } .tgbts-side-content h3 { font-size: 32px; } .tgbts-stats { grid-template-columns: 1fr; } .tgbts-stat { display: flex; align-items: center; justify-content: space-between; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tgbts-bg-glow-one, .tgbts-bg-glow-two, .tgbts-kicker-dot, .tgbts-title span, .tgbts-video-scan, .tgbts-side-top i, .tgbts-card-active .tgbts-play { animation: none !important; } } /* ========================================================= TG MULTIMEDIA - VIDEO TESTIMONIAL BOX PREFIX: tgvtest- ========================================================= */ .tgvtest-section { position: relative; width: 100%; padding: 75px 20px; overflow: hidden; background: #050505; } /* ========================================================= MAIN PREMIUM BOX ========================================================= */ .tgvtest-box { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 58px 60px; display: grid; grid-template-columns: 0.78fr 1.22fr; align-items: center; gap: 55px; border-radius: 28px; background: linear-gradient( 145deg, #151515 0%, #101010 45%, #0a0a0a 100% ); border: 1px solid rgba(197, 44, 255, 0.55); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), 0 0 45px rgba(197, 44, 255, 0.08); overflow: hidden; isolation: isolate; } /* ========================================================= TOP SOFT BORDER ========================================================= */ .tgvtest-box::before { content: ""; position: absolute; top: 0; left: 7%; width: 86%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.2), transparent ); z-index: 1; } /* ========================================================= BOTTOM PURPLE BORDER GLOW ========================================================= */ .tgvtest-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient( 90deg, transparent, #c52cff, #e46bff, #c52cff, transparent ); box-shadow: 0 0 18px rgba(197, 44, 255, 0.7); z-index: 2; } /* ========================================================= BACKGROUND GRID ========================================================= */ .tgvtest-box { background-image: linear-gradient( rgba(255,255,255,0.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.018) 1px, transparent 1px ), linear-gradient( 145deg, #151515 0%, #101010 45%, #0a0a0a 100% ); background-size: 70px 70px, 70px 70px, 100% 100%; } /* ========================================================= PURPLE AMBIENT LIGHT ========================================================= */ .tgvtest-box .tgvtest-glow { position: absolute; width: 380px; height: 380px; right: 8%; top: 25%; border-radius: 50%; background: rgba(197, 44, 255, 0.15); filter: blur(100px); pointer-events: none; animation: tgvtestBoxGlow 7s ease-in-out infinite; } @keyframes tgvtestBoxGlow { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-25px, -20px, 0) scale(1.08); } } /* ========================================================= LEFT CONTENT ========================================================= */ .tgvtest-content { position: relative; z-index: 4; opacity: 0; transform: translateX(-35px); transition: opacity 0.8s ease, transform 0.8s ease; } .tgvtest-section.tgvtest-visible .tgvtest-content { opacity: 1; transform: translateX(0); } .tgvtest-tag { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(197, 44, 255, 0.35); border-radius: 999px; background: rgba(197, 44, 255, 0.07); color: #d967ff; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 18px; box-shadow: 0 0 25px rgba(197, 44, 255, 0.06); } .tgvtest-content h2 { margin: 0; color: #ffffff; font-size: clamp(40px, 4.5vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -2.5px; } .tgvtest-content h2 span { display: block; background: linear-gradient( 90deg, #ffffff 0%, #c52cff 50%, #ed76ff 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: tgvtestTextGradient 5s ease infinite; } @keyframes tgvtestTextGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tgvtest-content p { max-width: 500px; margin: 22px 0 30px; color: rgba(255,255,255,0.52); font-size: 14px; line-height: 1.85; } .tgvtest-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 22px; border: 1px solid rgba(197,44,255,0.4); border-radius: 7px; background: linear-gradient( 135deg, #c52cff, #8f16c5 ); color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 700; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; } .tgvtest-btn:hover { color: #ffffff; transform: translateY(-3px); box-shadow: 0 14px 35px rgba(197,44,255,0.3); } .tgvtest-btn span { font-size: 17px; transition: transform 0.3s ease; } .tgvtest-btn:hover span { transform: translateX(5px); } /* ========================================================= VIDEO SHOWCASE ========================================================= */ .tgvtest-showcase { position: relative; min-height: 450px; display: grid; grid-template-columns: 1.25fr 0.75fr; grid-template-rows: 1fr 1fr; gap: 13px; z-index: 3; opacity: 0; transform: translateX(35px); transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s; } .tgvtest-section.tgvtest-visible .tgvtest-showcase { opacity: 1; transform: translateX(0); } /* ========================================================= MAIN VIDEO CARD ========================================================= */ .tgvtest-main-card { position: relative; grid-row: 1 / 3; min-height: 450px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(197,44,255,0.28); background: #080808; box-shadow: 0 22px 55px rgba(0,0,0,0.55), 0 0 30px rgba(197,44,255,0.06); transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .tgvtest-main-card:hover { transform: translateY(-6px); border-color: rgba(197,44,255,0.65); box-shadow: 0 30px 70px rgba(0,0,0,0.7), 0 0 35px rgba(197,44,255,0.16); } .tgvtest-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; transition: transform 0.7s ease; } .tgvtest-main-card:hover .tgvtest-video { transform: scale(1.035); } /* ========================================================= PLAY OVERLAY ========================================================= */ .tgvtest-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient( to bottom, rgba(0,0,0,0.04), rgba(0,0,0,0.4) ); pointer-events: none; transition: opacity 0.35s ease; } .tgvtest-main-card.tgvtest-playing .tgvtest-overlay { opacity: 0; } .tgvtest-play { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(197,44,255,0.88); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 0 0 9px rgba(197,44,255,0.08), 0 0 50px rgba(197,44,255,0.5); transition: transform 0.35s ease; } .tgvtest-play span { color: #ffffff; font-size: 22px; margin-left: 4px; } .tgvtest-main-card:hover .tgvtest-play { transform: scale(1.1); } /* ========================================================= VIDEO LABEL ========================================================= */ .tgvtest-video-info { position: absolute; left: 15px; bottom: 15px; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: rgba(0,0,0,0.58); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); font-size: 8px; font-weight: 800; letter-spacing: 1.3px; backdrop-filter: blur(10px); } .tgvtest-dot { width: 6px; height: 6px; border-radius: 50%; background: #c52cff; box-shadow: 0 0 9px rgba(197,44,255,0.9); animation: tgvtestDotPulse 1.5s infinite; } @keyframes tgvtestDotPulse { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } } .tgvtest-video-number { position: absolute; top: 15px; right: 15px; z-index: 5; padding: 6px 9px; border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.7); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; backdrop-filter: blur(10px); } /* ========================================================= SMALL VIDEOS ========================================================= */ .tgvtest-small-card { position: relative; min-height: 140px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(197,44,255,0.18); background: #090909; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .tgvtest-small-card:hover { transform: translateY(-5px); border-color: rgba(197,44,255,0.48); box-shadow: 0 17px 40px rgba(0,0,0,0.5); } .tgvtest-small-video { width: 100%; height: 100%; min-height: 140px; display: block; object-fit: cover; opacity: 0.85; transition: transform 0.55s ease, opacity 0.35s ease; } .tgvtest-small-card:hover .tgvtest-small-video { transform: scale(1.07); opacity: 1; } .tgvtest-small-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px; background: linear-gradient( to top, rgba(0,0,0,0.75), transparent 60% ); pointer-events: none; } .tgvtest-small-overlay span { color: #ffffff; font-size: 7px; font-weight: 800; letter-spacing: 1.3px; } /* ========================================================= FLOATING LABEL ========================================================= */ .tgvtest-floating { position: absolute; right: -15px; top: 15px; z-index: 8; padding: 9px 12px; border: 1px solid rgba(197,44,255,0.3); border-radius: 7px; background: #111111; color: rgba(255,255,255,0.82); font-size: 8px; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,0.4); animation: tgvtestFloating 4s ease-in-out infinite; } .tgvtest-floating span { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #c52cff; box-shadow: 0 0 9px rgba(197,44,255,0.9); } @keyframes tgvtestFloating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .tgvtest-section { padding: 70px 18px; } .tgvtest-box { padding: 50px 38px; grid-template-columns: 1fr; gap: 45px; border-radius: 24px; } .tgvtest-content { text-align: center; } .tgvtest-content p { margin-left: auto; margin-right: auto; } .tgvtest-showcase { width: 100%; max-width: 850px; margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgvtest-section { padding: 55px 12px; } .tgvtest-box { padding: 38px 16px 24px; border-radius: 20px; gap: 35px; } .tgvtest-content h2 { font-size: 39px; letter-spacing: -1.5px; } .tgvtest-content p { font-size: 12.5px; line-height: 1.75; } .tgvtest-showcase { min-height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 300px 135px; gap: 10px; } .tgvtest-main-card { grid-column: 1 / 3; grid-row: 1; min-height: 300px; border-radius: 14px; } .tgvtest-small-card, .tgvtest-small-video { min-height: 135px; } .tgvtest-floating { top: -15px; right: 3px; font-size: 7px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tgvtest-section { padding: 45px 8px; } .tgvtest-box { padding: 32px 13px 20px; border-radius: 18px; } .tgvtest-content h2 { font-size: 32px; } .tgvtest-content p { font-size: 12px; } .tgvtest-showcase { grid-template-rows: 260px 120px; } .tgvtest-main-card { min-height: 260px; } .tgvtest-small-card, .tgvtest-small-video { min-height: 120px; } .tgvtest-play { width: 60px; height: 60px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .tgvtest-section *, .tgvtest-section *::before, .tgvtest-section *::after { animation: none !important; transition: none !important; } } /* ========================================================= TG MULTIMEDIA - LIQUID CURSOR EFFECT PREFIX: tgcursor- ========================================================= */ #tgcursorCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; opacity: 0.9; mix-blend-mode: screen; } /* Soft mouse glow */ .tgcursor-glow { position: fixed; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); opacity: 0; background: radial-gradient( circle, rgba(197, 44, 255, 0.16) 0%, rgba(197, 44, 255, 0.09) 25%, rgba(123, 58, 237, 0.045) 45%, transparent 72% ); filter: blur(20px); transition: opacity 0.35s ease; } /* Hide effect on touch devices */ @media (hover: none), (pointer: coarse) { #tgcursorCanvas, .tgcursor-glow { display: none !important; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #tgcursorCanvas, .tgcursor-glow { display: none !important; } } /* ========================================================= STEP 01 VIDEO FIX ONLY STEP 01 UNIQUE CLASSES ========================================================= */ /* --------------------------------------------------------- STEP 01 INNER LAYOUT --------------------------------------------------------- */ .tgstep1fix-item .tgstep1fix-inner{ align-items:start; } /* --------------------------------------------------------- STEP 01 MEDIA AREA --------------------------------------------------------- */ .tgstep1fix-item .tgstep1fix-media{ width:100% !important; min-width:0 !important; padding-top:30px !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; } /* --------------------------------------------------------- VIDEO BOX --------------------------------------------------------- */ .tgstep1fix-item .tgstep1fix-video-box{ width:100% !important; max-width:420px !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16 / 9 !important; margin:0 auto !important; padding:0 !important; background:#000 !important; border:1px solid rgba(197,44,255,.28) !important; border-radius:18px !important; overflow:hidden !important; box-shadow: 0 16px 42px rgba(0,0,0,.35), 0 0 24px rgba(197,44,255,.08) !important; position:relative !important; } /* --------------------------------------------------------- ACTUAL VIDEO --------------------------------------------------------- */ .tgstep1fix-item .tgstep1fix-video{ display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center !important; background:#000 !important; border:0 !important; outline:none !important; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .tgstep1fix-item .tgstep1fix-video-box:hover{ border-color:rgba(197,44,255,.55) !important; box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 30px rgba(197,44,255,.13) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:991px){ .tgstep1fix-item .tgstep1fix-inner{ grid-template-columns:1fr !important; gap:25px !important; } .tgstep1fix-item .tgstep1fix-media{ width:100% !important; padding-top:0 !important; padding-bottom:10px !important; } .tgstep1fix-item .tgstep1fix-video-box{ width:100% !important; max-width:520px !important; aspect-ratio:16 / 9 !important; } .tgstep1fix-item .tgstep1fix-video{ width:100% !important; height:100% !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){ .tgstep1fix-item .tgstep1fix-inner{ display:grid !important; grid-template-columns:1fr !important; gap:20px !important; } .tgstep1fix-item .tgstep1fix-media{ width:100% !important; padding-top:0 !important; padding-bottom:10px !important; display:flex !important; justify-content:center !important; } .tgstep1fix-item .tgstep1fix-video-box{ width:100% !important; max-width:430px !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16 / 9 !important; border-radius:15px !important; } .tgstep1fix-item .tgstep1fix-video{ width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; object-fit:contain !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){ .tgstep1fix-item .tgstep1fix-video-box{ width:100% !important; max-width:100% !important; border-radius:13px !important; } }