/* Table of Contents -------------------------------------------------- - Fonts - Global Styles - Utility Colors - Base Component Styles - Container Styles - App Content Styles - Button Styles - Link Styles - Card Styles - Font Weight Utilities - Form Control Styles - Header Styles - Bottom Menu Styles - Small Header Styles - Menu Button Styles - Bottom Menu Close Button Styles - Header Right Buttons Styles - Navigation Menu Styles - Home Page Specific Styles - Home Head Styles - Home Login Styles - Home Input Styles - Home Section Title Styles - Home Section Styles - Home Card Styles (card-hobo) - SIGN IN NEW DESIGN START - - Styles for Signed in Part - Dashboard Root Styles - Sidebar Toggle Styles - Sidebar Styles - Dashboard Header Styles (d-header) - Dashboard Dropdown Styles (d-dropdown) - Dashboard Head Wrapper Styles - Dashboard Category Styles (d-cat-row, d-cat-title, d-cat-btn) - New Order Navigation Styles (nav-new-order) - New Order Service Display Styles (no-serds) - NEW ORDER PAGE STARTS - - SERVICES PAGE STARTS - Search Services Styles - Service Row/Column Styles (s-row, s-col) - Services Wrapper Styles - Service Item Styles - Service Page Specific Text Styles (sp-serv-title, sp-serv-sm) - Order Link/Chip Styles (orlc) - Service Page Card Styles (sp-services .card) - ADD FUNDS PAGE STARTS - Add Funds Text Styles (af-text) - Add Funds Navigation Styles (af-nav, af-nav-pay) - Add Funds Payment Method Styles (af-pm-title, af-pm-about, af-pm-text, af-pm-img) - Add Funds Placeholder Styles (af-ph) - ORDERS PAGE STARTS - Orders Navigation Styles (orders-nav-wrapper, orders-nav) - Order Page Search Box Styles (op-search-box) - Order Page Card Styles (op-card) - Order Page Stats Styles (op-stats) - Order Page Service Title Styles (op-service-title) - Order Page Date Styles (op-date) - Order Page Item Styles (op-item) - REFUNDS PAGE STARTS - - SUPPORT TICKET PAGE START - Support Card Ticket Styles (sc-ticket-card) - Support Details Header Styles (sd-head, sd-back, sd-tid) - Ticket Details Title Styles (tc-tdet-title, tc-tick-id, tc-ti-title, tc-ti-text) - Ticket Info Box Styles (card.tc-ti-box) - Ticket Message Block Styles - Support Chat Styles (schat-body, schat-msg-input) - RESELLER PANEL ORDER PAGE STARTS - Child Panel DNS Styles (cp-sns-title, cp-sns-dns) - Child Panel Top Styles (cp-top) - Child Panel Exclamation Styles (cp-exclamation) - Accordion Styles (aq) - MASS ORDER ORDER PAGE STARTS - - EAR PRIZE PAGE - - AFFILIATES PAGE START - Affiliate Page Text Styles (afp-ftext, afp-top) - Affiliate Item Styles (aft-item) - Affiliate Box Styles (aft-box-row, aft-box) - ACCOUNT PAGE START - Account User Info Styles (acc-user) - Account Card Left Styles (acc-card-left) - Account API Key Styles (acc-api) - BLOGS PAGE STARTS - Blog Page Head Styles - Blog Post Card Styles (card-blog) - Blog Border Styles - Blog Share Styles - BLOG INSIDE STARTS - Blog Inside Head Styles (bi-head-wrapper, bi-head-box) - Blog Inside Service Category Styles - Blog Inside Content Styles (bi-content) - Blog Inside Share Section Styles - API Page Styles - API Page Title & Text Styles - API Section Styles - Register Page Styles - Custom Select Dropdown Styles (actulus) - Select Container Styles - Select Button Styles - Select Options Styles - Search Input Styles (within select) - Modal Styles - Ticket Response Alert Styles - Pagination Styles - Bootstrap Datetimepicker Widget Styles - Order Page Card Bottom (Mobile) Styles - Mobile Bottom Fixed Navbar Styles - Table Styles (General Override) - Icon & Span Helper Styles - Truncated Text Style (sctx-text) - Agreement Margin Style (agr) - Neutral Order Stat Style (op-stats.neutral) - Badge Styles (badge-dangers, badge-primarys, badge-warnings, badge-infos) - EK CSS BAŞLANGIÇ (Additional Custom Styles) - Sign in Design By SGadget - MODERN FOOTER STYLES - ACCORDION BASED - Payment Icons Part - Carousel Styles (Bootstrap Overrides) - Sign-in How-to-Use Section - SwiperJS Styles - Payment Icons Resizer - Randomly Icons Part Renew - Fixed M/XL Frame - Hider of Web Part in Mobile - Web Part Icons (Left & Right Side Icons with Animations) - Shaker Frames (Keyframes for Animations) - Sign-in Lets Start Part Mobile Icons Hider & Style - Blog Page Reback Button (Responsive) - Sign-in 360 Rotate Bird and Ferries (Animations) - Ana Sayfadaki Sign In Button Webden Kaldırır (Hides Sign-in Button on Web for specific page) - CUSTOMER VİDEO Styles - Blue Tick, Famous PP, Famous Platforms, Famous Category - Landing Page Style - Welcoming Section - Priced Services in Boxes (Edition, Fillbar, Saving Rate, etc.) - Comment Box Styles - Background Specific Lighting Effects - Landing How-to Section - Informative Scroll Sections - Landing Advantages Section - Direction Trial Part Box - Free Trial Timer/Input/Completed Styles - Countdown Timer Styles - Provider Section Styles - Dosya Kutu (File Box) - SEO Table - Famous Image Thumb Mobile - Packages Part - Landing Famous Nav Card - Famous Detail Mobile -------------------------------------------------- */ /* Fonts */ @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-SemiBold.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Regular.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Thin.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Thin.woff") format("woff"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-ThicccAF.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-ThicccAF.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-ExtraBold.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-ExtraBold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Medium.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "THICCCBOI"; src: url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Light.woff2") format("woff2"), url("https://cdn.jsdelivr.net/gh/nikossmirnov/font-hosting/THICCCBOI-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } /* ============================================================================= Design System - CSS Custom Properties ============================================================================= */ :root { /* Colors ========================================================================= */ --bg_secondary: #222737; --font: "THICCCBOI"; /* Primary Brand Colors */ --color-primary: #ff5000; --color-primary-dark: #8fb302; --color-primary-light: #ff500020; --color-primary-alpha-20: #ff500020; --color-primary-alpha-50: #ff500080; --color-primary-alpha-70: #ff5000b3; --color-primary-shadow: #ff50007d; /* Dark Theme Colors */ --color-dark-bg: #222737; --color-dark-bg-lighter: #252c3b; --color-dark-bg-card: #2c3645; --color-dark-bg-form: #2e384c; --color-dark-bg-secondary: #293142; --color-dark-border: #2a3f4e; --color-dark-border-light: #38445d; --color-dark-border-lighter: #3c4154; --color-dark-text: #929cb7; --color-dark-text-light: #72879d; --color-dark-text-lighter: #797d89; /* Neutral Colors */ --color-white: #ffffff; --color-white-pure: #fff; --color-black: #000000; --color-black-pure: #000; --color-transparent: transparent; /* State Colors */ --color-success: #42c051; --color-danger: #ee5b5b; --color-danger-dark: #ad4747; --color-warning: #ffc107; --color-info: #3792ef; /* Social Media Colors */ --color-facebook: #3792ef; --color-tiktok: #ff5700; --color-reddit: #ff5700; --color-instagram: #ff0064; --color-youtube: #3892ee; --color-twitter: #3892ee; --color-spotify: #00ff07; --color-telegram: #3792ef; /* Typography ========================================================================= */ /* Font Sizes */ --font-size-xs: 10px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 28px; --font-size-4xl: 32px; --font-size-5xl: 40px; --font-size-6xl: 45px; --font-size-7xl: 50px; /* Font Weights */ --font-weight-thin: 100; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* Spacing ========================================================================= */ /* Padding & Margin Scale */ --space-0: 0px; --space-1: 3px; --space-2: 5px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 15px; --space-9: 16px; --space-10: 18px; --space-12: 20px; --space-14: 24px; --space-16: 28px; --space-18: 30px; --space-20: 32px; --space-24: 40px; --space-28: 45px; --space-32: 50px; --space-40: 60px; --space-48: 70px; --space-56: 80px; --space-64: 100px; --space-80: 110px; --space-96: 120px; /* Border Radius ========================================================================= */ --radius-none: 0px; --radius-xs: 3px; --radius-sm: 4px; --radius-base: 7px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 15px; --radius-4xl: 20px; --radius-5xl: 24px; --radius-6xl: 25px; --radius-7xl: 30px; --radius-8xl: 35px; --radius-full: 50px; --radius-round: 100px; /* Shadows ========================================================================= */ --shadow-sm: 0px 0px 5px rgba(204, 255, 0, 0.3); --shadow-md: 0px 0px 10px rgba(204, 255, 0, 0.4); --shadow-lg: 0px 0px 15px rgba(204, 255, 0, 0.5); --shadow-primary: 0px 0px 5px var(--color-primary); --shadow-primary-focus: 0 0 0 0.25rem var(--color-primary-shadow); --shadow-danger-focus: 0 0 0 0.25rem var(--color-danger-dark); --shadow-white: 0px 0px 10px #fff; /* Z-Index Scale ========================================================================= */ --z-index-dropdown: 1000; --z-index-sticky: 1020; --z-index-fixed: 1030; --z-index-modal-backdrop: 1040; --z-index-modal: 1050; --z-index-popover: 1060; --z-index-tooltip: 1070; /* Transitions ========================================================================= */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --transition-all: all 0.3s ease; /* Breakpoints (for reference in media queries) ========================================================================= */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl: 1400px; /* Component Specific Variables ========================================================================= */ /* Button Heights */ --button-height-sm: 32px; --button-height-md: 40px; --button-height-lg: 48px; /* Input Heights */ --input-height-sm: 32px; --input-height-md: 40px; --input-height-lg: 48px; /* Icon Sizes */ --icon-size-xs: 12px; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-size-xl: 32px; --icon-size-2xl: 40px; --icon-size-3xl: 48px; /* Container Widths */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-xxl: 1320px; } /* ============================================================================= End Design System ============================================================================= */ /* Global Styles */ body, html { font-family: "THICCCBOI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; color: #080808; } body { background-color: #fff; width: 100%; overflow-x: hidden; } body.stop-body { overflow: hidden; } .dev-mode { display: none !important; opacity: 0 !important; z-index: -3 !important; transform: translate(-200%, -200%) scale(0); } @media (min-width: 992px) and (max-width: 1500px) { html { zoom: 0.8; } } @media (min-width: 992px) { .container-fluid { padding: 0 30px; } } @media (min-width: 1200px) { .container-fluid { padding: 0 40px; } } @media (min-width: 1400px) { .container-fluid { padding: 0 50px; } } /* Utility Colors */ .p-color { color: #ff5000 !important; } .s-color { color: #ff5000 !important; } .i-color { color: #ff5000 !important; } .w-color { color: #ff5000 !important; } .d-color { color: #ff5000 !important; } /* Base Component Styles */ .alert { font-weight: 500; border: none; outline: none; border-radius: 15px !important; } .root__content { padding-top: 100px; } @media (min-width: 992px) { .root__content { padding-top: 160px; } } /* Container Styles */ .container { max-width: 1200px; } /* default = mobil (full width) */ .video-famous-sec .container { max-width: 100%; padding-left: 0; padding-right: 0; } /* desktop'ta tekrar container gibi davran */ @media (min-width: 1024px) { .video-famous-sec .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } } /* App Content Styles */ .app-content { padding-top: 150px; min-height: 100vh; } @media (max-width: 991px) { .app-content { padding-bottom: 0; padding-top: 80px; } } /* Button Styles */ .btn { border: none; color: #fff; font-weight: 600; font-size: 16px; line-height: 18px; color: #ffffff; padding: 14px 20px; } .btn.btn-block { width: 100%; display: block; } .btn.btn-sm { padding: 12px 16px; border-radius: 8px !important; } @media (min-width: 992px) { .btn.btn-sm { padding: 10px 10px; border-radius: 12px !important; } } /* @media (min-width: 992px) { .btn { padding: 18px 25px; } } */ .btn:hover { color: #ff5000; } .btn.btn-primary { background: #fff; border: 1px solid #ff5000; border-radius: 15px; color: #ff5000; } .btn.btn-secondary-custom { background-color: #2d3746 !important; box-shadow: none; border-radius: 15px; color: white; } .btn.btn-primary:hover { box-shadow: 0px 0px 5px #ff5000; } .btn.btn-primary.btn-border { border: 1px solid #ff5000; box-shadow: none; color: #000; } .btn.btn-primary:focus, .btn.btn-primary:active { box-shadow: 0 0 0 0.25rem #ff50007d; } .btn.btn-default { background: #ee5b5b; border-radius: 15px; color: black; margin-right: 10px; } .btn.btn-default:hover { background: #ad4747; } .btn.btn-default.btn-border { border: 1px solid #ad4747; box-shadow: none; color: black; } .btn.btn-default.btn-border:hover { background: #ad4747; } .btn.btn-default:focus, .btn.btn-default:active { box-shadow: 0 0 0 0.25rem #ad4747; } .btn.btn-secondary { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; border-radius: 15px; color: #fff; } .btn.btn-secondary:hover { background: #ff5000d1; } .btn.btn-dns { background: #ff5000; border-radius: 15px; color: #fff; } .btn.btn-dns:hover { background: #ff5000d1; } .btn.btn-secondary.btn-border { background: #ff5000; border: 3px solid #ff5000; box-shadow: 0px 0px 5px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); color: black; } .btn.btn-secondary.btn-border:hover { background: #ff5000d1; color: black; } .btn.btn-secondary:focus, .btn.btn-secondary:active { box-shadow: 0 0 0 0.15rem #ff5000; } .btn.btn-info.btn-border { box-shadow: none; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important } .btn.btn-info.btn-border:hover { background: #ff5000; color: black; } .btn.btn-info:focus, .btn.btn-info:active { box-shadow: 0 0 0 0.25rem #ff5000; } .btn .icon { display: inline-flex; align-items: center; justify-content: center; } /* Link Styles */ a { color: #ff5000; text-decoration: none; transition: 0.14s ease; } /* Card Styles */ .card { background: #ffffff; border-radius: 15px; padding: 20px; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } @media (max-width: 991px) { .card { padding: 0px; } } .card-border { box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } .card .card-title { font-weight: 600; font-size: 19px; line-height: 22px; margin-bottom: 0; } .card .card-head-text { padding-top: 4px; font-size: 16px; line-height: 22px; color: #72879d; margin-bottom: 0px; } .divider { border-bottom: 1px solid #2a3f4e; clear: both; } /* Font Weight Utilities */ .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* Form Control Styles */ .form-control, .form-select { box-sizing: border-box; border-radius: 22px; font-weight: 600; font-size: 16px; height: 48px; /* line-height: 18px; */ padding: 10px 25px 10px 20px; background: transparent; border: 1px solid #E5E7E9; color: #080808; } .form-control:read-only { background: transparent; border: 1px solid #E5E7E9; color: #080808; } .form-control:focus, .form-select:focus { outline: none; background: transparent; border: 1px solid #E5E7E9; color: #080808; border: 1px solid #B3BBC9; } .form-control:disabled, .form-select:disabled { background: transparent; border: 1px solid #E5E7E9; color: #080808; cursor: not-allowed; } .form-select { position: relative; } .form-select::after { content: ""; position: absolute; display: block; color: #fff; width: 100px; height: 100px; } /* Header Styles */ .header { position: fixed; top: 0px; background-color: transparent; width: 100%; z-index: 1030; transition: 0.14s ease; } .header.fixed { background-color: #fff; border-bottom: 1px solid #dddddd; } @media (min-width: 992px) { .header.fixed { backdrop-filter: blur(30px); } .header.fixed .nmenu .nmenu-item .nmenu-link { padding: 20px 20px; } } /* Bottom Menu Styles */ .b-menu-wrapper { display: block; position: fixed; bottom: -1px; left: -1px; width: calc(100% + 2px); border-radius: 30px 30px 0 0; padding: 24px 10px; max-height: calc(100vh - 90px); overflow-y: scroll; transition: 0.14s ease; transform: translateY(101%); opacity: 0.4; background: #fff; } .b-menu-wrapper.active { transform: translateY(0); opacity: 1; } @media (min-width: 992px) { .b-menu-wrapper { display: block; bottom: inherit; position: relative; border-radius: 0; padding: 0; width: 100%; transform: none; overflow: inherit; opacity: 1 !important; } } /* Small Header Styles */ .sm-header { display: block; padding: 5px 0; transition: 0.14s ease; } @media (min-width: 992px) { .sm-header { display: none; } } /* Menu Button Styles */ .menu-btn { height: 48px; width: 48px; border-radius: 10px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #fff; outline: none; border: none; font-size: 20px; display: flex; align-items: center; justify-content: center; } /* Bottom Menu Close Button Styles */ .b-menu-close { height: 48px; width: 48px; border-radius: 24px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #fff; outline: none; border: none; font-size: 20px; display: flex; align-items: center; justify-content: center; position: absolute; right: 20px; z-index: 2000; } @media (min-width: 992px) { .b-menu-close { display: none; } } /* Header Right Buttons Styles */ .head-right-btns { width: 100%; display: block; margin-bottom: 20px; } @media (min-width: 992px) { .head-right-btns { display: inline; } } /* Navigation Menu Styles */ .nmenu { display: flex; flex-direction: column; list-style: none; margin: 0; gap: 10px; padding: 10px 0 20px 0; } @media (min-width: 992px) { .nmenu { display: inline-flex; align-items: center; flex-direction: row; padding: 10px 0 0 0; } } .nmenu .nmenu-item { position: relative; display: flex; justify-content: flex-start; } .nmenu .nmenu-item .nmenu-link { font-weight: 500; font-size: 16px; line-height: 125%; color: #080808; opacity: 0.4; padding: 7px 20px; transition: 0.14s ease; text-decoration: none; display: inline-block; text-align: left; } @media (min-width: 992px) { .nmenu .nmenu-item .nmenu-link { padding: 48px 20px; display: block; font-size: 16px; } .nmenu .nmenu-item .nmenu-link::before { display: block; background-color: #ff5000 !important; } } .nmenu .nmenu-item .nmenu-link::before { content: ""; position: absolute; bottom: 0px; left: 20px; right: 20px; height: 3px; opacity: 0; background-color: transparent; } .nmenu .nmenu-item .nmenu-link:hover { color: #ff5000; opacity: 0.8; } .nmenu .nmenu-item .nmenu-link.active { opacity: 1; color: #ff5000; font-weight: 700; } .nmenu .nmenu-item .nmenu-link.active::before { opacity: 0; } /* ========================= Home Page Specific Styles ========================= */ /* Reset Password Page Specific Styles */ .register-page::before { background-image: none !important; } /* Home Head Styles */ .home-head { margin-top: -50px; padding-top: 86px; position: relative; z-index: 9; } @media (min-width: 992px) { .home-head { margin-top: -150px; padding-top: 127px; } } .home-head .hh-bg { position: absolute; top: 0px; left: 0px; width: 100%; height: auto; display: inline-block; z-index: -1; } .home-head .hh-bg img { width: 100%; height: auto; } .home-head .home-head-content { position: relative; z-index: 5; padding: 40px 0 0 0; } @media (min-width: 992px) { .home-head .home-head-content { padding: 60px 0 0 0; } } .hh-title { font-weight: bold; font-size: 30px; line-height: 38px; letter-spacing: -0.03em; color: #080808; text-align: center; } .hh-title span { position: relative; color: #ff5000; text-shadow:0px 0px 7px #ff50004d; position: relative; background: #ff5000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hh-text { font-size: 14px; line-height: 25px; color: #797d89; justify-content: center; } /* Home Login Styles */ .hl-title { display: flex; align-items: center; gap: 20px; } .hl-title .icon { border: 1px solid #3a4259; color: #fff; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .hl-title .text { font-style: normal; font-weight: 600; font-size: 19px; line-height: 22px; color: #ffffff; } /* Home Input Styles */ .home-input { background: #ffffff; border: 1px solid #E5E7E9; border-radius: 15px; font-size: 14px; line-height: 17px; color: #929cb7; display: flex; align-items: center; height: 56px; overflow: hidden; } @media (min-width: 992px) { .home-input { height: 56px; } } .home-input:focus-within { box-shadow: 0 0 0 0.1rem #ff500070; } .home-input .icon { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; font-size: 29px; } .home-input input, .home-input select { font-weight: 600; color: #929cb7; border: none; outline: none; background-color: transparent; height: 76px; flex: 1; color: #929cb7 !important; } .home-input input::placeholder, .home-input select::placeholder { color: #929cb7; } .home-input input:focus, .home-input select:focus { color: #929cb7; } .lg-btn { padding: 16px 10px; } @media (min-width: 992px) { .lg-btn { padding: 24px 10px; } } /* -------------------------- Home Section Title Styles -------------------------- */ .home-title { text-align: center; margin-bottom: 2rem; } @media (min-width: 991px) { .home-title { margin-bottom: 3rem; } } .home-title h2 { font-weight: bold; font-size: 30px; line-height: 40px; letter-spacing: -0.04em; } @media (min-width: 991px) { .home-title h2 { font-size: 35px; } } .home-title h2 span { color: #ff5000; text-shadow:0px 0px 3px #ff50004d; position: relative; background: #ff5000; -webkit-background-clip: text; } /* Home Section Styles */ .home-section { padding: 80px 0 80px 0; position: relative; } @media (max-width: 991px) { .home-section { padding: 20px 0 20px 0 !important; } } @media (min-width: 992px) { .home-section { padding: 20px 0 20px 0 !important; } } /* ----------------------------- Home Card Styles (card-hobo) STARTS --------------------------------- */ .card-hobo { background-image: none; background-position: bottom; background-size: 100% auto; background-repeat: no-repeat; border-radius: 20px; min-height: 175px; } @media (min-width: 992px) { .card-hobo { margin-bottom: 0; } } .card-hobo .card-body { padding: 24px 22px 32px; } @media (min-width: 992px) { .card-hobo .card-body { padding: 20px 45px 300px; } } .card-hobo .card-body .c-head { display: flex; align-items: center; gap: 17px; margin-bottom: 32px; } .card-hobo .card-body .c-head .icon { font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: -0.04em; border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .card-hobo .card-body .c-head .title { font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: -0.04em; } .card-hobo .card-body .c-text { background-color: #fff; color: #fff; font-weight: 600; font-size: 25px; line-height: 29px; letter-spacing: -0.04em; } @media (max-width: 991px) { .card-hobo .card-body .c-text { font-size: 14px; width: 65%; line-height: 15px; font-weight: 600; } } .card-hobo.card-1 .c-head .icon { background-color: #ff500020; color: #ff5000; } .card-hobo.card-1 { background-image: url(https://storage.perfectcdn.com/5y4uze/scajbky234e2bgzf.png) !important; background-size: cover; } @media (min-width: 991px) { .card-hobo.card-1 { transform: scale(0.9); background-image: url(https://storage.perfectcdn.com/5y4uze/pc54cu3fuwlm7rlo.webp) !important; } } .card-hobo.card-1 .c-head .title { color: #ff5000; } .card-hobo.card-1 .c-text { background: linear-gradient(89.31deg, #ff500090 4.55%, #ff500020 69.39%), linear-gradient(0deg, #080808, #080808); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .card-hobo.card-2 .c-head .icon { background-color: #ff500020; color: #ff5000; } .card-hobo.card-2 .c-head .title { color: #ff5000; } .card-hobo.card-2 .c-text { background: linear-gradient(89.31deg, #ff500090 4.55%, #ff500020 69.39%), linear-gradient(0deg, #080808, #080808); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .card-hobo.card-2 { background-image: url(https://storage.perfectcdn.com/5y4uze/9q6bdm2y63lq6zw3.png) !important; background-size: cover; } @media (min-width: 991px) { .card-hobo.card-2 { background-image: url(https://storage.perfectcdn.com/5y4uze/zyh4yfjid5zc7m8x.webp) !important; } } .card-hobo.card-3 .c-head .icon { background-color: #ff500020; color: #ff5000; } .card-hobo.card-3 .c-head .title { color: #ff5000; } .card-hobo.card-3 .c-text { background: linear-gradient(89.31deg, #ff500090 4.55%, #ff500020 69.39%), linear-gradient(0deg, #080808, #080808); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .card-hobo.card-3 { background-image: url(https://storage.perfectcdn.com/5y4uze/bacx6cq10wyxehld.png) !important; background-size: cover; } @media (min-width: 991px) { .card-hobo.card-3 { background-image: url(https://storage.perfectcdn.com/5y4uze/6jsxrly16q5om5m7.webp) !important; transform: scale(0.9); } } /* ----------------------------- Home Card Styles (card-hobo) ENDS --------------------------------- */ /* ------------------------- SIGN IN NEW DESIGN STARTS ------------------------- */ /* OPTIMIZE IMAGE SIZES FOR PERFORMANCE */ .blog-img-wrapper img { max-width: 400px; width: 100%; height: auto; } .famous-img-thumb-mobile, .signin-famous-image-relative { max-width: 366px; width: 100%; height: auto; } .how-to-use-hand-img { max-width: 350px; width: 100%; height: auto; } .how-to-use-direction-img { max-width: 223px; width: 100%; height: auto; } /* HERO SECTION IMAGE OPTIMIZATION */ .icons-330-image { max-width: 950px; width: 100%; height: auto; } .bird-image { max-width: 80px; margin: auto; height: auto; } .responsive-img-edits-bird { overflow: hidden; position: absolute; z-index: 9999; top: 26%; left: 39%; } @media(min-width: 440px) { .bird-image { max-width: 130px; } .responsive-img-edits-bird { overflow: hidden; position: absolute; z-index: 9999; top: 33%; left: 43%; } } @media(min-width: 600px) { .bird-image { max-width: 130px; } .responsive-img-edits-bird { overflow: hidden; position: absolute; z-index: 9999; top: 36%; left: 39%; } } @media(min-width: 768px) { .bird-image { max-width: 120px; } .responsive-img-edits-bird { overflow: hidden; position: absolute; z-index: 9999; top: 35%; left: 42%; } } @media(min-width: 991px) { .bird-image { max-width: 200px; } .responsive-img-edits-bird { height: fit-content; overflow: hidden; position: absolute; top: 420px; left: 490px; z-index: 9999; } } /* ICON AND SMALL IMAGE DEFAULTS FOR CLS PREVENTION */ .infinity-icon-style { width: 100%; height: auto; max-width: 30px; } .famous-pp { width: 100%; height: auto; max-width: 80px; } /* CELEBRITY TESTIMONIAL TEXT STYLING */ .h4 { font-size: 1.1rem !important; font-weight: 600; } .famous-category { font-size: 0.875rem !important; color: #c8c8c8; } /* RESPONSIVE ADJUSTMENTS FOR MOBILE */ @media(max-width: 768px) { .h4 { font-size: 1rem !important; } .famous-category { font-size: 0.8rem !important; } } @keyframes dondur { 0% { transform: rotate(0deg); } 100% { transform: rotate(330deg); } } .rotate-330 { animation: dondur 100s linear infinite; } @media(max-width: 768px) { .blog-img-wrapper img { max-width: 100%; } .famous-img-thumb-mobile, .signin-famous-image-relative { max-width: 100%; } .how-to-use-hand-img { max-width: 100%; } .how-to-use-direction-img { max-width: 180px; } .icons-330-image { max-width: 650px; } } /* GOOGLE SIGN-IN BUTTON STYLING */ .google-signin-wrapper { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 8px; overflow: hidden; } @media(min-width: 992px) { .google-signin-wrapper { min-height: 56px; } } .google-signin-wrapper .g_id_signin { position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .custom-google-btn { border-radius: 8px; padding: 14px 15px; width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; font-size: 16px; text-decoration: none; transition: all 0.3s ease; position: relative; z-index: 1; line-height: 18px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #fff; } @media(min-width: 992px) { .custom-google-btn { min-height: 56px; padding: 18px 25px; font-size: 16px; } } .custom-google-btn:hover { box-shadow: 0 0 5px #ff5000; text-decoration: none; color: #fff; transform: scale(1.1); } .custom-google-btn .google-logo { width: 25px; height: 25px; margin-left: 6px; flex-shrink: 0; background: #fff; padding: 4px; border-radius: 4px; } .custom-google-btn span { font-weight: 500; } .form-check-input { background-color: rgb(235 235 235 / 10%); border: 1px solid rgb(0 0 0 / 43%); } .form-check-input:checked { background-color: #ff5000; } .text-white { color: #6c757d !important; } .text-white-50 { color: #6c757d!important; text-decoration: none; } .text-white-50:hover { color: #6c757d !important; text-decoration: underline; } .btn.lg-btn { border-radius: 8px; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 20px; font-size: 16px; font-weight: 600; } @media(min-width: 992px) { .btn.lg-btn { min-height: 56px; padding: 18px 25px; } } /* CELEBRITY TESTIMONIAL SECTION STYLING */ .celebrity-card { backdrop-filter: blur(12px); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; backdrop-filter: blur(10px); position: relative; background: rgba(255, 255, 255, 0.05); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } @media(min-width: 991px) { .celebrity-card:hover { transform: scale(1.01); border-color: rgba(204, 255, 0, .4); } .celebrity-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff5000, #8fb302); opacity: 0; transition: opacity 0.3s ease; } .celebrity-card:hover::before { opacity: 1; } } /* Celebrity Profile Section */ .celebrity-profile { padding: 20px; text-align: center; display: flex; flex-direction: column; } .celebrity-profile-content { display: flex; align-items: center; gap: 14px; justify-content: flex-start; } .celebrity-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #ff500063 ; object-fit: cover; transition: all 0.3s ease; } @media(min-width: 992px) { .celebrity-card:hover .celebrity-avatar { border-color: #ff5000; } } .celebrity-name-section { text-align: center; display: flex; justify-content: center; flex-direction: column; } .celebrity-name { font-size: 14px !important; font-weight: 600 !important; color: #080808 !important; text-align: center; } .celebrity-title { font-size: 12px !important; color: #a0a0a0 !important; font-weight: 400; text-align: center; } .celebrity-verification { color: #ff5000; font-size: 20px; display: flex; justify-content: center; } /* Social Media Icons */ .celebrity-social { display: flex; justify-content: flex-start; gap: 12px; margin-top: 14px; } .celebrity-social a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid #a0a0a0; color: #a0a0a0; text-decoration: none; transition: all 0.3s ease; font-size: 14px; } .celebrity-social a:hover { transform: translateY(-2px); background: rgba(204, 255, 0, 0.1); border-color: rgba(204, 255, 0, 0.3); color: #ff5000; } /* Specific social media colors on hover */ .celebrity-social a[href*="google"]:hover { background: rgba(66, 133, 244, 0.1); border-color: rgba(66, 133, 244, 0.3); color: #4285f4; } .celebrity-social a[href*="instagram"]:hover { background: rgba(225, 48, 108, 0.1); border-color: rgba(225, 48, 108, 0.3); color: #e1306c; } .celebrity-social a[href*="tiktok"]:hover { background: rgba(37, 244, 238, 0.1); border-color: rgba(37, 244, 238, 0.3); color: #25f4ee; } .celebrity-social a[href*="youtube"]:hover { background: rgba(255, 0, 0, 0.1); border-color: rgba(255, 0, 0, 0.3); color: #ff0000; } .celebrity-social a[href*="spotify"]:hover { background: rgba(30, 215, 96, 0.1); border-color: rgba(30, 215, 96, 0.3); color: #1ed760; } /* Celebrity Image Wrapper */ .celebrity-image-wrapper { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(204, 255, 0, 0.1), rgba(143, 179, 2, 0.1)); } .celebrity-image-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 40%, #ff50002b 50%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } @media(min-width: 992px) { .celebrity-card:hover .celebrity-image-wrapper::before { opacity: 1; } } .celebrity-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } @media(min-width: 992px) { .celebrity-card:hover .celebrity-image { transform: scale(1.05); } } /* Responsive Adjustments */ @media(max-width: 768px) { .celebrity-profile { padding: 14px; } .celebrity-profile-header { gap: 8px; } .celebrity-avatar { width: 45px; height: 45px; } .celebrity-name { font-size: 1rem !important; } .celebrity-title { font-size: 0.8rem !important; text-align: left; } .celebrity-social { gap: 8px; } .celebrity-social a { width: 28px; height: 28px; font-size: 12px; } } /* ------------------------- Celebrity / Testimonials ----------------------------*/ .celebrity-swiper { padding: 0 10px; } @media(max-width: 991px) { .celebrity-swiper { padding: 0 60px; } } .celebrity-image { position: relative; } .celebrity-name, .celebrity-name-flex { display: flex; align-items: center; } /* -------------------- SIGN IN STARS SECTION ---------------------- */ .usercounter { width: auto; height: max-content; } @media(max-width: 768px) { .usercounter { display: none; } } .usercounter-in { position: absolute ; right: 0px ; top: 50px; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; padding: 0px; gap: 8px; } .usercounter-in .usercounter-title { display: flex; flex-direction: row; align-items: center; gap: 7px; } .rating { font-weight: 600; letter-spacing: 2px; } .usercounter-bottom { font-size: 15px; font-weight: 500; display: flex; flex-direction: row; align-items: center; gap: 10px; } /* --------------------------- SIGN IN TUTORIAL BOX SECTION ------------------------------ */ .tutorial { width: auto; height: max-content; } @media(max-width: 768px) { .tutorial { display: none; } } .tutorial-in { z-index: 999999999999; position: absolute ; left: 0px ; top: 50px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: center; padding: 10px; gap: 15px; } .tutorial-in span { z-index: 9999999999999 ; } .tutorial-in .tutorial-title { display: flex; flex-direction: column; } .tutorial-in .tutorial-title .tutorial-title-trans{ font-size: 10px; color: #6c757d; font-style: italic; text-align: center; } .tutorial-in .tutorial-title .tutorial-title-watch{ font-size: 14px; color: #080808; font-weight: 500; text-align: center; } .tutorial-thumb { width: auto; height: 50px; border-radius: 5px; border: 1px solid #ff500070; box-shadow: 0px 0px 1px #ff5000; } /* home-head::before { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 868px; background-image: url(https://storage.perfectcdn.com/4553qi/aq7fokgjeyg9si6t.png); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 0; } */ /* ------------------------------- SIGN IN TRUSTED BY BRANDS SECTION --------------------------------- */ .brands-part { padding: 40px 0 30px 0 !important; position: relative; top: -20px; background: #f9faf9; } @media (max-width: 991px) { .brands-part { padding: 40px 0 0 0 !important; position: relative; top: -25px; } } .brands-part-landing { padding: 60px 0 30px 0 !important; position: relative; top: -75px; } @media (max-width: 991px) { .brands-part-landing { padding: 100px 0 0 0 !important; position: relative; top: -50px; } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 7)); } } .slidersg { background: transparent; height: 100px; margin: auto; overflow: hidden; position: relative; } .slidersg::before, .slidersg::after { background: linear-gradient(to right, #f9faf9 0%, transparent 100%); content: ""; height: 100px; position: absolute; width: 200px; z-index: 2; } .slidersg::after { right: 0; top: 0; transform: rotateZ(180deg); } .slidersg::before { left: 0; top: 0; } .slide-tracksg { animation: scroll 40s linear infinite; display: flex; width: calc(250px * 14); } .slidesg { height: 100px; width: 150px; display: flex; align-items: center; justify-content: center; } @media (min-width: 991px) { .slidesg { width: 250px; } } .slidesg img{ height: auto; width: 120px; } .brands-top { display: flex; justify-content: center; align-items: center; gap: 10px; } .brands-top-landing { display: flex; justify-content: center; align-items: center; gap: 10px; } .brands-title { font-weight: 600; font-size: 14px; text-align: center; letter-spacing: 2px; color: #8b8c91; } @media (min-width: 991px) { .brands-title { font-size: 16px; } } .brands-title-landing { font-weight: 600; font-size: 12px; text-align: center; letter-spacing: 2px; color: #8b8c91; } @media (min-width: 991px) { .brands-title-landing { font-size: 16px; } } /* ========================= HOW TO USE STEPS ========================= */ /* subtitle */ .steps-subtitle { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.6); } /* LEFT COLUMN */ .steps-left { display: flex; flex-direction: column; gap: 22px; position: relative; } /* STEP CARD */ .steps-left-in { display: flex; align-items: center; justify-content: space-around; gap: 22px; padding: 20px 20px 20px 50px; border-radius: 18px; backdrop-filter: blur(12px); cursor: pointer; position: relative; transition: all .35s ease; background: #ffffff; box-shadow: 0 0px 15px 0 rgb(0 0 0 / 10%); border: 1px solid rgba(0, 0, 0, .125); } /* timeline offset */ .steps-left-in:nth-child(2) { transform: translateX(30px); } /* hover */ .steps-left-in:hover { transform: translateX(15px) scale(1.03); } /* NUMBER */ .number-rank { min-width: 60px; min-height: 60px; border-radius: 18px; font-weight: 600; font-size: 21px; display: flex; align-items: center; justify-content: center; position: absolute; left: -28px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #ffffff; } /* TEXT */ .my-step { display: flex; flex-direction: column; gap: 6px; } .step-title { font-size: 17px; font-weight: 600; color: #080808; } .step-text { font-size: 13px; line-height: 1.5; color: #9a9a9a; } /* IMAGE */ .howto-img { width: 60px; height: 60px; object-fit: cover; border-radius: 18px; background: #ffffff1a; padding: 4px; } /* RIGHT SIDE */ .steps-right { display: flex; justify-content: center; align-items: center; } /* VIDEO */ .steps-right wistia-player { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.45); } @media (min-width: 991px) { .home-anicon { margin: 180px 0; } } /* ------------------------- SIGN IN NEW DESIGN FINISH ------------------------- */ /* ------------------------- Styles for Signed in Part ------------------------- */ .dashboard-root { position: relative; } .dashboard-root .app-content { padding: 80px 0 80px 0px; max-width: 100%; overflow-x: hidden; } @media (min-width: 1400px) { .dashboard-root .app-content { padding: 40px 0 80px 260px; } } .dashboard-root .card .card-body { padding: 13px; } .sidebar-toggle { z-index: 9999999; /* position: absolute; top: 25px; right: 15px; */ width: 50px; height: 50px; border-radius: 15px; font-size: 28px; outline: none; border: none; transition: 0.14s ease; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } @media (min-width: 992px) { .sidebar-toggle { left: 30px; } } .sidebar-toggle .menu-bar { position: relative; /* left: 0px; top: -53px; */ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .sidebar-toggle .close-i { position: relative; /* left: 0px; top: -53px; */ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .sidebar-toggle .menu-bar { transform: scale(1); opacity: 1; /* transition: 0.2s ease; */ } .sidebar-toggle .close-i { transform: scale(0); opacity: 0; /* transition: 0.2s ease; */ } .sidebar-toggle.active .close-i { transform: scale(1); opacity: 1; top: -48px; } .sidebar-toggle.active .menu-bar { transform: scale(0); opacity: 0; } @media (min-width: 1400px) { .sidebar-toggle { display: none; } } .sidebar { bottom: 0px; width: 260px; transform: translateX(-100%); position: fixed; left: 0px; top: 0px; transition: 0.14s ease; z-index: 1040; background: #fff; box-shadow: 0 0px 10px rgb(0 0 0 / 20%); } .sidebar.active { transform: translateX(0); } @media (min-width: 1400px) { .sidebar { width: 260px; transform: inherit; } } .sidebar .sidebar-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column !important; } .sidebar-logo { padding: 20px 35px; display: flex; align-items: center; justify-content: center; } .sidebar-logo img { max-width: 100%; } .sidebar-body { flex: 1; overflow-y: auto; padding-bottom: 40px; } .sidebar-body::-webkit-scrollbar { width: 0px; } /* Track */ .sidebar-body::-webkit-scrollbar-track { background: #252c3b; border-radius: 3px; } /* Handle */ .sidebar-body::-webkit-scrollbar-thumb { background: #3b4456; border-radius: 3px; } /* Handle on hover */ .sidebar-body::-webkit-scrollbar-thumb:hover { background: #434e64; } .special-link-neworder { border-radius: 78px !important; justify-content: center !important; font-size: 17px !important; height: 48px !important; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%)!important; } .special-link-neworder:hover { color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } .special-link-addfunds { border-radius: 78px !important; justify-content: center !important; font-size: 17px !important; height: 48px !important; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } .special-link-addfunds:hover { color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } .sidebar-balance { padding: 0 20px 0; } /* Main wrapper */ .sidebar-balance-wrapper { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 999px; box-shadow: 0 0px 3px 0 rgb(0 0 0 / 53%); } /* Left Icon Badge */ .sidebar-balance-wrapper .icon { display: flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 42px; border-radius: 999px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #FFFFFF; } .sidebar-balance-wrapper .icon i { font-size: 18px; font-weight: 600; color: #fff; } .sidebar-balance-wrapper .icon span { font-size: 13px; font-weight: 600; color: #fff; } /* Balance Content */ .sidebar-balance-wrapper .content { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; } /* Balance Amount */ .sidebar-balance-wrapper .content .s-balance { font-size: 16px; font-weight: 600; letter-spacing: 0.3px; color: #080808; white-space: nowrap; } /* Currency Dropdown Button */ .sidebar-balance-wrapper .dropdown-toggle { background: transparent; border: none; padding: 0; } .sidebar-balance-wrapper .dropdown-toggle::after { display: none; } /* Exchange Icon */ .sidebar-balance-wrapper .dropdown .title i { font-size: 11px; color: #2e384e; background: rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 4px; transition: all 0.25s ease; } /* Hover interaction */ .sidebar-balance-wrapper .dropdown:hover .title i { background: #ffffff; transform: rotate(180deg); } /* Dropdown Menu */ .sidebar-balance-wrapper .dropdown-menu { position: fixed !important; z-index: 9999 !important; background: #1c2230; border-radius: 14px; border: none; padding: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); transform: translate3d(65px, 40px, 0px) !important; } .sidebar-balance-wrapper .dropdown-item { color: #ffffff; font-size: 13px; border-radius: 10px; padding: 6px 10px; } .sidebar-balance-wrapper .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); } /* SIDEBAR ACCOUNT ITEM STARTS */ .sidebar-account { padding: 12px 20px; } .sidebar-account-wrapper { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border-radius: 999px; box-shadow: 0 0px 3px 0 rgb(0 0 0 / 53%); transition: all 0.25s ease; cursor: pointer; } /* Hover Effect */ .sidebar-account-wrapper:hover { box-shadow: 0 0px 7px rgb(0 0 0 / 34%), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } /* User Photo */ .sidebar-account-wrapper .user-photo { position: relative; } .sidebar-account-wrapper .user-photo img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; border: 2px solid #ff5000; background: #ffffff; } /* Online Indicator (optional) */ .sidebar-account-wrapper .user-photo::after { content: ''; position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #2dff88; border: 2px solid #1c2230; } /* Content */ .sidebar-account-wrapper .content { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; } /* Username */ .sidebar-account-wrapper .content span { font-size: 16px; font-weight: 600; letter-spacing: 0.2px; color: #080808; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Settings Icon */ .sidebar-account-wrapper .content i { font-size: 16px; color: #080808; transition: all 0.25s ease; } /* Icon Hover */ .sidebar-account-wrapper:hover .content i { color: #080808; transform: rotate(20deg); } /* Anchor reset */ .sidebar-account a { text-decoration: none; color: inherit; } /* SIDEBAR ACCOUNT ITEM FINISH */ /* SIDEBAR CATEGORY SUBMENU STARTS */ .submenu { display: none; padding-left: 15px; } .submenu-accordion-item.open > .submenu { display: block; list-style: none; padding: 0; } .submenu-accordion-toggle { cursor: pointer; color: #08080882 !important; border-radius: 999px; backdrop-filter: blur(16px); box-shadow: 0 1px 6px 0 rgb(0 0 0 / 21%); } .submenu-accordion-toggle:hover { /* background: linear-gradient(135deg, rgb(86 98 121 / 90%), rgb(50 59 79 / 90%)) !important; */ } .s-menu-link .left { display: flex; align-items: center; gap: 8px; /* icon ile text arası boşluk */ } .s-menu-link .right { margin-left: auto; } .submenu-accordion-item .fa-chevron-down { transition: transform .3s ease; } .submenu-accordion-item.open .fa-chevron-down { transform: rotate(180deg); } .submenu .submenu-item { padding: 0 !important; } /* SIDEBAR CATEGORY SUBMENU FINISH */ /* SIDEBAR MENU ITEMS STARTS */ .sidebar-menu-wrapper { padding: 0px 0px 20px 0px; } .sidebar-menu { margin: 0; padding: 0; padding-top: 10px; list-style: none; } .sidebar-menu .s-menu-item { padding: 3px 20px; } .sidebar-menu .s-menu-item.active .s-menu-link { color: #ff5000; background: #ff50001c; border-radius: 999px; backdrop-filter: blur(16px); } .sidebar-menu .s-menu-link { display: flex; align-items: center; padding: 12px 20px; color: #9ba3ab; font-weight: 700; font-size: 16px; line-height: 20px; transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-radius 0.3s ease-in-out; margin-bottom: 6px; height: 44px; } .sidebar-menu .s-menu-link:hover { color: #ff5000; background: #ff50001c; border-radius: 999px; backdrop-filter: blur(16px); } .sidebar-menu .s-menu-link .icon { width: 28px; height: 28px; display: flex; align-items: center; } .sidebar-menu .s-menu-link .text { font-weight: 500; } /* SIDEBAR MENU ITEMS FINIHS */ /* SIDEBAR LOG OUT BUTTON STYLE */ .sidebar-signout-wrapper { padding: 0 20px; } .btn-log-out { display: flex; align-items: center; justify-content: center; background: #ff50001c; border-radius: 78px; color: #ff5000 } /* ------------------------------ STYLE OF HEADER ONLY IN MOBILE ------------------------------ */ .d-header { position: fixed; left: 0px; right: 0; padding: 15px 0; z-index: 1031; border-bottom: 1px solid transparent; transition: 0.14s ease; } .d-header .row.head-row { margin-left: -6px; margin-right: -6px; } .d-header .row.head-row .col-item { padding-left: 6px; padding-right: 6px; } @media (min-width: 1400px) { .d-header .row.head-row { margin: 0 -15px; } .d-header .row.head-row > * { padding: 0 15px; } } @media (min-width: 1400px) { .d-header { left: 260px; } } .d-header.fixed { padding: 14px 0; background-color: #fff; border-color: #e8e8e8; } .d-header .page-title { font-weight: 600; font-size: 25px; line-height: 30px; color: #ffffff; margin-bottom: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; } /* --------------------- HEADER ONLY IN MOBILE --------------------- */ /* ------------------------------------------- DROPDOWN STYLE (CHANGE CURRENCY - LANGUAGE...) --------------------------------------------- */ .d-dropdown { display: flex; } .d-dropdown .btn { gap: 1rem; padding: 0; display: inline-flex; align-items: center; background-color: transparent !important; } .d-dropdown .btn:focus { box-shadow: none; } @media (max-width: 768px) { .d-dropdown .btn .icon { width: 40px; height: 40px; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 400; } } .d-dropdown .btn .icon.c-1 { box-shadow: 0px 4px 16px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); background-color: #ff5000; color: black; } .d-dropdown .btn .icon.c-2 { background-color: rgba(255, 90, 165, 0.26); color: #ff5aa5; } .d-dropdown .btn .icon.user-avatar { overflow: hidden; } .d-dropdown .btn .icon.user-avatar img { width: 100%; height: 100%; object-fit: cover; } .d-dropdown .btn .title { font-size: 15px; color: #ffffff; align-items: center; gap: 6px; text-align: left; color: #ff5000; } .d-dropdown .btn .title span { font-weight: 600; } .d-dropdown .btn .info { font-weight: 600; margin-bottom: 4px; font-size: 14px; line-height: 17px; color: #797d89; display: none !important; } @media (min-width: 992px) { .d-dropdown .btn .info { display: flex !important; } } .d-dropdown .btn::after { content: ""; display: none; } .dropdown-menu { background: #fff; border: 1px solid #B3BBC9;; border-radius: 15px; padding: 10px 0; } .dropdown-menu .dropdown-item { color: #080808; padding: 6px 24px; } .dropdown-menu .dropdown-item:hover { background-color: #f3f3f3; } /* --------------------------------------------- DROPDOWN STYLE (CHANGE CURRENCY - LANGUAGE...) --------------------------------------------- */ #PageTitle { display: none; } .d-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #080808; } .d-icon.i-info { box-shadow: 0px 4px 16px rgb(37 23 51 / 16%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px #ff5000; } .d-icon.i-secondary { box-shadow: 0px 4px 16px rgb(37 23 51 / 16%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px #ff5000; } .dropdown-toggle::after { display: none; } /* -------------------- BANNERS IN PAGES STARTS ----------------------- */ .dashboard-head-wrapper { position: relative; margin-bottom: 15px; } /* AFFILIATE, BE RESELLER BANNERS (.ds-first-card) */ .ds-first-card { background: url(https://storage.perfectcdn.com/8x1jve/t41hmda3hp7kf7bc.png); background-size: cover; background-position: left center; background-repeat: no-repeat; height: -webkit-fill-available; } .ds-first-card .text { max-width: 60%; font-size: 15px } @media (max-width: 768px) { .ds-first-card .text { max-width: 1000%; font-size: 13px } } /* NEW ORDER LEVELS */ .card-new-order-levels { background: #fff url(https://storage.perfectcdn.com/8x1jve/bb84qmyixfad8t9y.png); background-repeat: no-repeat; background-position: center center; background-size: cover; } .card-new-order-levels .level-box { background: linear-gradient(180deg, #12151b, #0d0f14); border-radius: 16px; padding: 20px; color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.4); margin-top: 20px; } .card-new-order-levels .level-stats { display: flex; gap: 12px; margin-bottom: 10px; } .card-new-order-levels .stat-box { flex: 1; background: #ffffff36; border-radius: 14px; padding: 10px; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } .card-new-order-levels .stat-box.highlight { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #fff; font-weight: 700; } .card-new-order-levels .stat-title { font-size: 13px; margin-bottom: 6px; } .card-new-order-levels .stat-value { font-size: 22px; font-weight: 600; } .card-new-order-levels .motivation-bar { margin-bottom: 0px; padding: 0px 60px; text-align: center; } .card-new-order-levels .motivation-text { font-size: 14px; margin-bottom: 8px; opacity: .9; } .card-new-order-levels .motivation-track { height: 14px; background: #fff; border: 1px solid #ff500036; border-radius: 20px; overflow: hidden; } .card-new-order-levels .motivation-fill { height: 100%; background: #ff5000; box-shadow: 0 0 15px #ff5000; transition: width .4s ease; } /* -------------------- BANNERS IN PAGES FINISH ----------------------- */ #service_description { display: none; } /* ---------------------------------- NEW ORDER CATEGORY FILTER BY ICONS ---------------------------------- */ .d-cat-row { display: block; } .d-cat-btn { position: relative; display: inline-flex; box-shadow: 0px 0px 5px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); border-radius: 22px; width: 50px; height: 50px; align-items: center; justify-content: center; padding: 10px; color: #080808; outline: none; transition: 0.14s ease; cursor: pointer; } .d-cat-btn.active { color: #000 !important; border-color: #ff5000; box-shadow: 0px 4px 16px rgb(37 23 51 / 0%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px #ff5000; } .d-cat-btn:hover { color: #000 !important; border-color: #ff5000; box-shadow: 0px 4px 16px rgb(37 23 51 / 0%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px #ff5000; } .d-cat-btn .text { font-weight: 600; font-size: 14px; line-height: 16px; text-align: center; } .d-cat-btn .icon { font-size: 24px; } .d-cat-col-right { position: relative; } #new-order-cats .swiper-slide { width: auto; } .no-nav { overflow-y: auto; } .imgResizer { width: 33px; } #iconResizer { font-size: 28px; } /* ------------------------------------------ NEW ORDER CATEGORY FILTER BY ICONS FINISH ----------------------------------------- */ /* ------------------------------------- NEW ORDER SEARCH BTN FOR SERVICE PICK ------------------------------------- */ .custom-service-dropdown { position: relative; background: #2e384c; border: 1px solid #38445d; border-radius: 15px; font-weight: 600; font-size: 14px; color: #fff; transition: all 0.3s ease; } .custom-service-dropdown:hover { border-color: #ff5000; } .custom-service-dropdown:focus-within { border-color: #ff5000; box-shadow: 0 0 0 0.25rem rgba(204, 255, 0, 0.25); } .custom-dropdown-selected { padding: 15px 45px 15px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; position: relative; min-height: 20px; } .custom-dropdown-selected:hover { background-color: rgba(255, 255, 255, 0.05); } .custom-dropdown-selected i.fa-chevron-down { position: absolute; right: 15px; transition: transform 0.3s ease; color: #fff; font-size: 12px; } .custom-dropdown-options { position: absolute; top: 100%; left: 0; right: 0; background: #2e384c; border: 1px solid #38445d; border-top: none; border-radius: 0 0 15px 15px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .custom-dropdown-options::-webkit-scrollbar { width: 6px; } .custom-dropdown-options::-webkit-scrollbar-track { background: #2e384c; border-radius: 3px; } .custom-dropdown-options::-webkit-scrollbar-thumb { background: #ff5000; border-radius: 3px; transition: 0.14s ease; } .custom-dropdown-options::-webkit-scrollbar-thumb:hover { background: #b8ff00; } .custom-dropdown-option { padding: 12px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background-color 0.2s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .custom-dropdown-option:last-child { border-bottom: none; } .custom-dropdown-option:hover { background-color: rgba(255, 255, 255, 0.1); } .custom-dropdown-option:active { background-color: rgba(204, 255, 0, 0.1); } .custom-dropdown-option i { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ff5000; } .custom-dropdown-option span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* TikTok specific icon styling */ .custom-dropdown-option .fa-tiktok, .custom-dropdown-selected .fa-tiktok { background: #ffffff; -webkit-text-fill-color: transparent; font-weight: bold; text-shadow: 1px 1px 7px #ffffff85; color: #FFF; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; background-clip: text !important; } /* Responsive adjustments */ @media (max-width: 768px) { .custom-service-dropdown { font-size: 13px; } .custom-dropdown-selected { padding: 12px 40px 12px 12px; gap: 8px; } .custom-dropdown-selected i.fa-chevron-down { right: 12px; } .custom-dropdown-option { padding: 10px 12px; gap: 8px; } .custom-dropdown-options { max-height: 150px; } } /* Custom Service Dropdown Styles */ .custom-service-dropdown { position: relative; background: #fff; border: 1px solid #E5E7E9; border-radius: 15px; font-weight: 600; font-size: 14px; color: #080808; transition: all 0.3s ease; } .select2-results__option a { color: #080808 !important; } /* Select2 Icon Support */ .select2-container--default .select2-results__option { background: #fff; border: 1px solid #E5E7E9; } .select2-container--default .select2-results__option--highlighted { background: #fff; border: 1px solid #E5E7E9; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; font-weight: 600; font-size: 14px; line-height: 16px; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { right: 15px; top: 50%; transform: translateY(-50%); } .search-dropdown .input-wrapper .input-wrapper__prepend { color: #6c757d; } .select2-dropdown { background: #fff; border: 1px solid #E5E7E9; border-radius: 0 0 15px 15px; } .select2-results > div { max-height: 300px; overflow-y: auto; } .select2-results > div::-webkit-scrollbar { width: 6px; } .select2-results > div::-webkit-scrollbar-track { background: #2e384c; border-radius: 3px; } .select2-results > div::-webkit-scrollbar-thumb { background: #ff5000; border-radius: 3px; } .select2-results > div::-webkit-scrollbar-thumb:hover { background: #b8ff00; } /* Icon styling in Select2 options */ .select2-results__option i, .select2-selection__rendered i { width: 16px; height: 16px; font-size: 14px; color: #ff5000; margin-right: 8px; } /* Special handling for TikTok icon */ .select2-results__option .fa-tiktok, .select2-selection__rendered .fa-tiktok { background: #ffffff; -webkit-text-fill-color: transparent; font-weight: bold; text-shadow: 1px 1px 7px #ffffff85; color: #FFF; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent; background-clip: text !important; } /* Focus states */ .select2-container--default.select2-container--focus .select2-selection--single { border-color: #ff5000; box-shadow: 0 0 0 0.25rem rgba(204, 255, 0, 0.25); } .select2-container--default .select2-search--dropdown .select2-search__field { background-color: #2e384c; border: 1px solid #38445d; border-radius: 10px; color: #fff; padding: 8px 12px; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #ff5000; outline: none; } /* ------------------------------------- NEW ORDER SEARCH BTN FOR SERVICE PICK ------------------------------------- */ /* --------------------------------------- SERVICE DESC IN MOBILE NEW ORDER STARTS --------------------------------------- */ .no-serds .service-title { font-weight: 600; font-size: 16px; text-align: center; } .no-serds .no-ser-box { border-radius: 15px; font-weight: 600; font-size: 16px; line-height: 18px; color: #080808; display: flex; align-items: center; padding: 10px 16px 10px 10px; margin-bottom: 20px; gap: 10px; background: #ff50000d; border: 1px solid #ff50004d; } @media (max-width: 992px) { .no-serds .no-ser-box { margin-bottom: 5px; border-radius: 10px; padding: 5px 16px 5px 7px; } } .no-serds .no-ser-box.long-text { font-weight: 400; font-size: 14px; line-height: 25px; color: #080808; padding: 15px 15px 20px 15px; } @media (max-width: 992px) { .no-serds .no-ser-box.long-text { font-size: 13px; line-height: 18px; } } .no-serds .no-ser-box.long-text > div { word-wrap: break-word !important; max-width: 100%; } .no-serds .no-ser-box .title { font-weight: 500; font-size: 14px; line-height: 18px; color: #080808; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; } .no-serds .no-ser-box .text { font-weight: 500; font-size: 14px; line-height: 18px; margin-left: auto; } .no-serds .no-ser-box .title-sample-link { font-weight: 500; font-size: 14px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 110px; } /* --------------------------------------- SERVICE DESC IN MOBILE NEW ORDER FINISH --------------------------------------- */ /* ==================== NEW ORDER PAGE STARTS ==================== */ /* new order service description mobile position change visible styles */ .hidden, [hidden] { display: none; } /* mobile desc hide style */ .lg-none-copy { display: none; } .dy-lg-none { display: block; } @media (max-width: 768px) { .dy-lg-none { display: none; } .lg-none-copy { display: block; } } .no-serds .no-ser-box .text:last-child { min-width: 100px; text-align: right; } /* new order titles style */ .fields label { font-weight: 600; color: #ff5000 !important; margin-bottom: .5rem; } .submit-btn { display: flex; gap: 10px; width: 100%; height: 58px; border-radius: 78px !important; justify-content: center; font-size: 17px !important; align-items: center; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: var(--NN0, #FFFFFF); } .charge-btn-wrapper { display: flex; align-items: center; height: 58px; gap: 5px; border-radius: 78px !important; justify-content: left !important; padding: 6px; backdrop-filter: blur(16px); background-color: #fff; border: 2px solid #ff5000; } .charge-btn-wrapper .icon { display: flex; justify-content: center; border-radius: 78px; min-height: 44px; gap: 8px; padding: 0 20px; align-items: baseline; line-height: 44px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); } .charge-btn-wrapper .icon i { font-size: 17px; font-weight: 500; color: #fff; } .charge-btn-wrapper .icon span { font-size: 16px; font-weight: 500; color: #fff; } .charge-btn-wrapper .content { display: flex; justify-content: center; width: -webkit-fill-available; } .charge-btn-wrapper .content input { font-size: 16px; font-weight: 500; color: #080808; text-align: center; border: none; } .live-order-box { display: flex; width: fit-content; align-items: center; gap: 15px; padding: 12px 20px; border-radius: 999px; font-size: 13px; color: #080808; white-space: nowrap; justify-content: center; margin-top: 15px; background: #ff500014; border: 1px solid #ff50004d; } /* Canlı Nokta */ .live-dot { position: relative; width: 10px; height: 10px; background: #ff5000; border-radius: 50%; box-shadow: 0 0 6px #ff5000; } /* Yayılıp kaybolan halka */ .live-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #ff5000; animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .live-text strong { color: #ff5000; font-weight: 600; } #live-user-count { transition: opacity .25s ease; } .affiliate-highlight { position: relative; } .affiliate-badge { display: inline-block; font-size: 12px; font-weight: 600; color: #ffffff; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; } .affiliate-highlight .text { font-size: 14px; line-height: 1.5; margin-bottom: 10px; } .affiliate-highlight strong { color: #ff5000; } .affiliate-highlight .btn { padding: 6px 14px; font-size: 13px; } .level-box { color: #fff; padding: 20px; background: linear-gradient(180deg, #212937, #1c1e2b); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); } .level-stats { display: flex; gap: 12px; margin-bottom: 20px; } .stat-box { flex: 1; border-radius: 14px; padding: 10px; text-align: center; background: linear-gradient(180deg, #161b24, #0f131a); backdrop-filter: blur(16px); box-shadow: 0 10px 20px rgb(0 0 0 / 57%), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; border: 1px solid #ff500036; } .stat-box:hover { transform: translateY(-5px); box-shadow: 0 3px 6px rgb(0 0 0 / 30%), inset 0 0 0 1px rgba(255, 255, 255, .08); } .stat-title { font-size: 13px; margin-bottom: 6px; } .stat-value { font-size: 22px; font-weight: 800; } .motivation-bar { margin-bottom: 28px; } .motivation-text { font-size: 14px; margin-bottom: 8px; opacity: .9; } .motivation-track { height: 14px; background: #1a1d24; border-radius: 20px; overflow: hidden; } .motivation-fill { height: 100%; background: linear-gradient(90deg, #2f6aff, #ff5000); box-shadow: 0 0 15px rgba(204,255,0,.6); transition: width .4s ease; } /* ===================== NEW ORDER PAGE FINISH ===================== */ /* ==================== SERVICES PAGE STARTS ==================== */ .search-services { height: 56px; position: relative; } .search-services:focus-within .icon { color: #fff; } .search-services .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: absolute; color: #92969d; transition: 0.14s ease; } .search-services .textbox { width: calc(100% - 40px); margin-left: 40px; height: 40px; background-color: transparent; outline: none; border: none; color: #fff; font-weight: 600; font-size: 14px; line-height: 16px; } .search-services .textbox::placeholder { color: #92969d; } /* Favorites star styling */ .fav_b { cursor: pointer; margin-right: 8px; display: inline-block; transition: all 0.2s ease; color: #ddd; font-size: 16px; opacity: 0.6; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .fav_b:hover { color: #ffdd00; transform: scale(1.15); opacity: 1; } .fav_b.favorite-active { color: #ffdd00; opacity: 1; } .fav_b.favorite-active:hover { color: #ffcc00; transform: scale(1.15); } .fav_b::before { content: "♥︎" !important; display: inline-block !important; font-size: 16px !important; font-weight: bold !important; font-family: inherit !important; color: #ccc !important; transition: all 0.3s ease !important; margin-right: 4px !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important; } /* Active state */ [data-fav-state="true"]::before { color: #ff5000 !important; text-shadow: 0 0 4px #ff500054 !important; transform: scale(1.1) !important; } /* Hover states */ [data-fav-state="false"]:hover::before { color: #ff5000 !important; transform: scale(1.1) !important; } [data-fav-state="true"]:hover::before { color: #ff5000 !important; transform: scale(1.15) !important; text-shadow: 0 0 4px #ff500054 !important; } /* Mobile: Simple inline heart like other icons */ @media(max-width: 768px) { .fav_b::before { font-size: 16px !important; margin-right: 4px !important; vertical-align: text-top !important; } [data-fav-state="true"]::before { color: #ff5000 !important; text-shadow: 0 0 4px #ff500054 !important; } } /* Service title wrapper for proper star + icon + title alignment */ .service-title-wrapper { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; } /* Ensure star and service title are aligned */ .sp-serv-title { display: inline-flex; align-items: center; flex-wrap: nowrap; align-items: center; margin-left: 0; } /* Ensure proper spacing between star and service icon */ .fav_b + .sp-serv-title { margin-left: 4px; } /* Hide any duplicate favorites as backup protection */ .service-title-wrapper .fav_b:nth-of-type(n + 2) { display: none !important; } /* Additional protection against duplication */ [data-favorite-service-id] ~ [data-favorite-service-id] { display: none !important; } /* No more FontAwesome interference - stars are CSS-generated */ /* Additional protection: hide any favorites inside service titles */ .sp-serv-title .fav_b, .sp-serv-title [data-favorite-service-id] { display: none !important; } /* Ensure only one favorite per service row is visible */ .service-item [data-favorite-service-id] ~ [data-favorite-service-id] { display: none !important; } .sp-service-title { font-weight: 600; font-size: 20px; line-height: normal; color: #080808; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; gap: 10px; } @media (min-width: 992px) { .sp-service-title { font-size: 25px; justify-content: left; margin-bottom: 15px; } } .s-row { display: flex; align-items: center; gap: 10px; } .s-row.s-title { font-weight: 600; display: none; } .s-title-wrapper { padding: 0; } @media (min-width: 992px) { .s-row.s-title { display: flex; } } .s-col { flex: 0 0 auto; } @media (min-width: 992px) { .s-col { flex: 0 0 50px; width: 50px; } .s-col.s-col-sm { flex: 0 0 70px; width: 70px; } .s-col.s-col-md { flex: 0 0 100px; width: 100px; } .s-col.s-col-lg { flex: 0 0 180px; width: 180px; } .s-col.s-title { flex: 1 0 0; width: auto; } } .services-wrapper { display: flex; flex-wrap: wrap; width: 100%; } .services-wrapper .si-wrapper { flex: 0 0 auto; width: 100%; } @media (min-width: 992px) { .services-wrapper { flex-direction: column; padding-left: 0px; padding-right: 0px; } .services-wrapper .si-wrapper { width: 100%; } } .service-item { padding: 10px 15px; background: #fff; border-radius: 15px; margin-bottom: 15px; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgb(0 0 0 / 17%); } @media (min-width: 992px) { .service-item { padding: 0; background-color: transparent; border: none; box-shadow: none; } } @media (max-width: 992px) { .service-item .s-row { flex-wrap: wrap; align-items: center; } .service-item .s-col-avtime { width: 65%; text-align: center; } .service-item .s-col-btn { flex: 0; } .service-item .s-col { padding: 6px 0; } .service-item .s-col::before { content: attr(data-title); display: block; padding-bottom: 8px; font-weight: 600; color: #080808; font-size: 13px; } .service-item .s-col-fav { order: 100; } .service-item .s-col-id { width: 100%; text-align: center; } .service-item .s-title { width: 100%; text-align: center; } .service-item .s-col-c { width: 35%; text-align: center; } .service-item .s-col-m { width: 20%; text-align: center; } } .service-item + .service-item { border-top: 1px solid #2a3f4e; } .sp-serv-title { font-weight: 600; font-size: 14px; line-height: 17px; } .sp-serv-sm { font-weight: 600; font-size: 16px; line-height: 17px; color: #ff5000ab; } @media (min-width: 992px) { .sp-serv-sm { font-size: 14px; } } .orlc { border-radius: 50px; font-weight: 600; font-size: 14px; line-height: 17px; padding: 10px 10px; } .orlc.prices { color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } .orlc.min { color: #ff5000; font-size: 12px; background-color: #ff50001a; } .orlc.max { color: #ff5000; font-size: 12px; background-color: #ff50001a; } .sp-services .card { margin-bottom: 30px; border: none; background-color: transparent; } @media (min-width: 992px) { .sp-services .card { border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgb(0 0 0 / 17%); } } /* Services page specific styles */ /* services page service detail */ .sp-modal { position: fixed; z-index: 2020; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; } .sp-modal.active { display: flex; } .sp-modal-card { background: #fff; box-sizing: border-box; position: relative; z-index: 2021; max-width: 600px; max-height: 90vh; margin: 5vh auto; border-radius: 15px; display: flex; flex-direction: column; overflow: hidden; } @media (max-width: 768px) { .sp-modal-card { margin: 2vh auto; max-height: 96vh; max-width: 95vw; } } .sp-modal-header { padding: 22px 20px 16px; position: relative; z-index: 2030; text-align: center; box-shadow: inset 0 0 120px #ffceb1; } .sp-modal-service-id { font-weight: 600; font-size: 16px; line-height: 18px; padding: 14px 22px; display: inline-block; margin-bottom: 22px; border: 2px solid #ff5000; background: #ffffff; border-radius: 15px; color: #ff5000; } .sp-modal-service-title { font-weight: 600; font-size: 25px; line-height: 30px; text-align: center; color: #080808; } .sp-modal-body { position: relative; z-index: 2040; padding: 30px; flex: 1; overflow-y: auto; } .sp-modal-body-card { margin-bottom: 0px; } .sp-modal-close { border-radius: 50%; width: 42px; height: 42px; border: none; outline: none; position: absolute; display: flex; align-items: center; justify-content: center; top: 20px; right: 20px; z-index: 2050; font-size: 28px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; color: #fff; transition: all 0.3s ease; } .sp-modal-close:hover { transform: scale(1.05); } .services-filter-section { margin-bottom: var(--spacing-24); } .services-filter-row { align-items: center; } .services-search-container { margin-top: var(--spacing-4); } @media (min-width: 768px) { .services-search-container { margin-top: 0; } } .services-nothing-found { display: none; } .services-nothing-found.show { display: block; } .services-nothing-found-icon { font-size: 64px; color: var(--color-text-muted); } .services-nothing-found h3 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-8); } .services-category-hidden { display: none; } /* Hidden utility class */ .hidden, [hidden] { display: none; } /* Enhanced Modal body scroll styling with extra padding for full scrolling */ .sp-modal-body-card { max-height: 400px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; position: relative; -webkit-overflow-scrolling: touch; word-wrap: break-word; word-break: break-word; border-radius: 6px; } /* Complete removal of all scrollbar buttons/arrows - for all browsers */ .sp-modal-body-card::-webkit-scrollbar-button, .sp-modal-body-card::-webkit-scrollbar-button:vertical:increment, .sp-modal-body-card::-webkit-scrollbar-button:vertical:decrement, .sp-modal-body-card::-webkit-scrollbar-button:horizontal:increment, .sp-modal-body-card::-webkit-scrollbar-button:horizontal:decrement, .sp-modal-body-card::-webkit-scrollbar-button:single-button, .sp-modal-body-card::-webkit-scrollbar-button:double-button { display: none !important; height: 0 !important; width: 0 !important; background: transparent !important; border: none !important; } /* Properly styled scrollbar for all browsers */ .sp-modal-body-card::-webkit-scrollbar { width: 8px; height: auto; } .sp-modal-body-card::-webkit-scrollbar-track { background: transparent; /* Make track invisible */ } .sp-modal-body-card::-webkit-scrollbar-thumb { background: #ff5000; border-radius: 999px; /* Fully rounded thumb */ border: none; } .sp-modal-body-card::-webkit-scrollbar-thumb:hover { background: #b8ff00; } /* Firefox scrollbar */ .sp-modal-body-card { scrollbar-width: thin; scrollbar-color: #ff5000 transparent; } /* Modal body container */ .sp-modal-body { position: relative; padding: 25px; height: auto; overflow: hidden; } /* iOS specific fixes - ensure green color and full scrolling */ @supports (-webkit-touch-callout: none) { /* Full height for iOS Safari with extra padding */ .sp-modal-body-card { max-height: 70vh; padding-bottom: 150px; /* Even more padding for iOS */ } /* Fix for iOS modal containment */ .sp-modal { -webkit-overflow-scrolling: touch; } /* Fix for iOS Safari full scrolling */ .sp-modal-card { padding-bottom: 50px; } } /* Mobile optimizations */ @media (max-width: 768px) { .sp-modal-body-card { max-height: 50vh; padding-bottom: 50px; /* Much more padding on mobile */ } /* Ensure modal doesn't get cut off */ .sp-modal-card { max-height: 80vh; margin: 10% auto; } /* Ensure scrollbar is visible but minimal on mobile */ .sp-modal-body-card::-webkit-scrollbar { width: 5px; } /* Fully rounded on mobile too */ .sp-modal-body-card::-webkit-scrollbar-thumb { border-radius: 999px; } } /* Missing modal header elements */ .sp-modal-title { font-weight: 600; font-size: 18px; line-height: 22px; color: #080808; margin: 10px 0; } .sp-modal-link { padding: 12px 24px; border-radius: 25px; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 15px; transition: all 0.3s ease; } .sp-modal-link:hover { transform: scale(1.05); } /* Subscription Stats - Smaller font sizes */ .subscription-stats .text { font-size: 18px !important; line-height: 22px !important; } .subscription-stats .title { font-size: 14px !important; line-height: 16px !important; } @media (max-width: 992px) { .subscription-stats .text { font-size: 16px !important; line-height: 20px !important; } .subscription-stats .title { font-size: 12px !important; } } /* Subscription Actions - Consistent button spacing */ .subscription-actions { min-height: 32px; /* Ensure consistent height */ display: flex; align-items: center; } .subscription-actions .order-actions { min-width: 120px; /* Reserve space for buttons */ min-height: 32px; /* Reserve vertical space */ display: flex; justify-content: flex-start; align-items: center; } /* ==================== SERVICES PAGE FINISH ==================== */ /* ======================= ADD FUNDS PAGE STARTS ======================= */ .no-border { border: none; !important; } .af-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-left: 15px; } .af-nav .nav-item { position: relative; transition: 0.14s ease; } .card-head .nav-item { cursor: pointer; color: #6c757d; transition: 0.14s ease; } /* for new order tabs */ .af-nav .nav-item.active { color: #080808; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); border-top-left-radius: 15px; border-top-right-radius: 15px; } .af-nav .nav-item.active .nav-link { color: #ff5000 !important; } /* for new order tabs */ .af-nav .nav-link { font-weight: 600; font-size: 14px; color: #6c757d; padding: 15px 10px; } @media (min-width: 992px) { .af-nav .nav-link { padding: 20px 25px; } } .af-nav .nav-link.active { color: #ff5000; background: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } /* Payment info body scroll styling */ .addfunds-payment-info-body { padding: 25px; border-radius: 15px; max-height: 400px; overflow-y: auto; overflow-x: hidden; position: relative; margin-top: 1rem !important; background: #fff !important; border: 1px solid #E5E7E9; } /* Custom scrollbar styling for payment info */ .addfunds-payment-info-body::-webkit-scrollbar { width: 8px; height: auto; border-radius: 999px; } .addfunds-payment-info-body::-webkit-scrollbar-track { background: #ff50003c; border-radius: 999px; } .addfunds-payment-info-body::-webkit-scrollbar-thumb { background: #ff5000; border-radius: 999px; border: none; } .addfunds-payment-info-body::-webkit-scrollbar-thumb:hover { background: #b8ff00; } /* Mobile optimizations */ @media(max-width: 768px) { .addfunds-payment-info-body::-webkit-scrollbar { width: 5px; } .addfunds-payment-info-body { padding: 15px !important ; font-size: 13px !important ; } .af-pm-text { font-size: 13px !important ; } } .af-nav-pay { display: flex; margin: 0 0 10px 0 !important; justify-content: flex-start; gap: 4px; } @media(min-width: 385px) { .af-nav-pay { gap: 10px; } } .af-nav-pay .nav-link { font-weight: 600; font-size: 12px; line-height: 15px; color: #080808; padding: 15px 0px; width: 100px; box-sizing: border-box; border-radius: 15px; background: #fff; box-shadow: 0px 0px 5px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); } .af-nav-pay .nav-link .icon { height: 50px; display: flex; align-items: center; justify-content: center; } .af-nav-pay .nav-link:hover { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%)!important; color: #fff; } .af-nav-pay .nav-link.active { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%)!important; color: #fff; } .af-pm-title { font-weight: 600; font-size: 25px; line-height: 25px; color: #080808; margin-bottom: 14px; } .af-pm-about { font-weight: 600; font-size: 16px; line-height: 20px; color: #787f8d; margin-bottom: 30px; } .af-pm-text { font-size: 16px; line-height: 25px; color: #080808; } .af-pm-img { width: 100px; } .af-ph { background: #191b27; border: 1px solid rgba(255, 255, 255, .06); box-sizing: border-box; border-radius: 15px; font-weight: 600; font-size: 16px; line-height: 18px; padding: 20px 24px; margin-bottom: 14px; } /* payment icons resizer */ .payment-resizer { width: 100%; padding: 12px; } /* addfunds payment icons resizer */ .payment-resizer-height { height: 100%; margin-bottom: 8px; max-height: 45px; width: auto; object-fit: contain; } /* Copy Button Hover Tooltip */ #kopyalaButonu:hover::before { content: "Copy"; position: absolute; background-color: #333; color: #fff; margin: -35px; padding: 5px 10px; border-radius: 5px; font-size: 14px; } .addfunds-copy-button { background: var(--color-primary); border: none; color: var(--color-dark); border-radius: 25px; padding: var(--spacing-4) var(--spacing-8); cursor: pointer; transition: all var(--transition-base); } .addfunds-copy-button:hover { background: var(--color-primary-dark); transform: scale(1.05); } /* Addfunds PayPal specific styling */ .addfunds-paypal-title { text-align: center; } .addfunds-paypal-content { text-align: center; } /* add funds level Grid */ .levels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 768px) { .levels-grid { grid-template-columns: 1fr; } } /* Level Card */ .level-card { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 22px; border-radius: 18px; background: #fff; backdrop-filter: blur(16px); box-shadow: 0 5px 15px rgb(0 0 0 / 18%), inset 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .level-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.06), transparent ); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .level-card:hover { transform: translateY(-5px); box-shadow: 0 5px 10px rgb(0 0 0 / 35%), inset 0 0 0 1px rgba(255, 255, 255, .08); } .level-card:hover::after { opacity: 1; } /* level Active Card .level-card.active { box-shadow: 0 0 0 1px #ff5000, 0 0 45px rgba(204,255,0,.35), 0 30px 70px rgba(0,0,0,.8); } */ /* level Left Column (Badge Area) */ .abl-first-clomun { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .level-logo { width: 44px; filter: drop-shadow(0 0 12px rgba(255,255,255,.25)); } /* level Title Badge */ .level-card h4 { font-size: 12px; font-weight: 800; padding: 6px 14px; border-radius: 999px; letter-spacing: .8px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } /* level Badge Colors */ .level-card h4.starter { background: #3b7efb; color: #1e1e1e; } .level-card h4.active-level { background: #b7b7b7; color: #0e2c66; } .level-card h4.elite { background: #38ff9c; color: #0f4d2a; } .level-card h4.vip { background: #fbe13b; color: #161616; } /* Requirement Text */ .level-requirement { font-size: 11px; opacity: .65; letter-spacing: .3px; } /* level Feature List */ .level-card ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.7; margin: auto; } .level-card ul li { position: relative; padding-left: 18px; opacity: .92; } .level-card ul li::before { content: "✓"; position: absolute; left: 0; color: #ff5000; font-weight: 900; } /* ============================================================================ FIX: Hide Perfect Panel's unwanted fields with !important ============================================================================ */ .commission-fields, #order_extra_fee, #instruction_instruction, .form-group.instruction { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Bonus Notification Box */ .bonus-notification-box { width: 100%; height: 45px; background-image: url(https://storage.perfectcdn.com/8x1jve/stzauuq77651b4b4.png); background-size: cover; background-repeat: no-repeat; border-radius: 10px; box-shadow: 0 0 20px #0000; } @media (min-width: 992px) { .bonus-notification-box { height: 85px; } } /* ============================================================================ NEW 3-COLUMN GRID LAYOUT ============================================================================ */ .payment-summary-grid { display: grid; grid-template-columns: auto; gap: 12px; margin: 20px 0; } /* When fee columns are hidden, center the receive column */ .payment-summary-grid { margin-left: auto; margin-right: auto; } .summary-column { display: block; } .summary-column.centered { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; } .summary-box { background: #fff !important; border: 1px solid #E5E7E9; border-radius: 10px; padding: 14px; height: 100%; display: flex; flex-direction: column; gap: 8px; transition: all 0.3s ease; } .summary-box:hover { border-color: #ff500050; transform: translateY(-2px); } .summary-label { display: flex; align-items: center; gap: 8px; color: #080808; font-size: 13px; font-weight: 500; } .summary-label i { color: #ff5000; font-size: 14px; } .summary-value { font-size: 16px; font-weight: 700; color: #080808; margin: 4px 0; } .summary-value.total-value { color: #ff5000; } .summary-value.receive-value { color: #ff5000; font-size: 18px; } .summary-note { font-size: 11px; color: #080808; } /* Receive box special styling */ .receive-box { background: linear-gradient(135deg, #0d1a0d 0%, #1a2a1a 100%); border-color: #ff500030; } .summary-bonus { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; } .bonus-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #ff5000 0%, #99cc00 100%); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .bonus-badge i { font-size: 10px; } .bonus-amount { font-size: 14px; font-weight: 700; color: #ff5000; } /* PayPal Section */ .paypal-section { padding: 20px 0; } .paypal-instructions { padding: 16px 20px; text-align: left; margin-bottom: 20px; border-radius: 15px; background: #fff !important; border: 1px solid #E5E7E9; } .paypal-instructions ul { list-style: none; padding: 0; margin: 0; } .paypal-instructions li { color: #080808; font-size: 13px; padding: 8px 0; display: flex; align-items: center; gap: 10px; } .paypal-instructions li i { color: #ff5000; font-size: 12px; } .paypal-address-box { border-radius: 10px; padding: 16px; text-align: left; background: #fff !important; border: 1px solid #E5E7E9; } .paypal-label { display: block; color: #080808; font-size: 12px; margin-bottom: 6px; } .paypal-email-copy { display: flex; align-items: center; justify-content: space-between; border-radius: 6px; padding: 10px 12px; background: #fff !important; border: 1px solid #E5E7E9; } .paypal-email-copy span { color: #ff5000; font-weight: 600; font-size: 14px; } .copy-btn { background: transparent; border: none; color: #080808; cursor: pointer; padding: 4px 8px; transition: color 0.2s; } .copy-btn:hover { color: #ff5000; } .paypal-username { color: #080808; font-size: 14px; margin-top: 4px; } #openTicketBtn { width: 100%; } /* Quick Amount Buttons */ .quick-amounts { display: flex; flex-wrap: wrap; gap: 10px; } .quick-amount-btn { padding: 7px 15px; border-radius: 20px; background: transparent; font-size: 15px; font-weight: 600; cursor: pointer; color: #080808; transition: all 0.2s; border: none; box-shadow: 0px 0px 5px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); } .quick-amount-btn:hover { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; color: #fff; } .quick-amount-btn.active { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; color: #fff; } .p-selected { color: #080808; } #paymentFormFields .form-control { background: #fff !important; border: 1px solid #E5E7E9; } .trust-box { display: flex; justify-content: space-between; flex-wrap: wrap; } .secure-payment-box { display: flex; width: fit-content; align-items: center; gap: 10px; padding: 12px 20px; background: #fff !important; border: 1px solid #E5E7E9; border-radius: 999px; font-size: 13px; color: #080808; white-space: nowrap; justify-content: center; margin-top: 15px; } .secure-icon { display: flex; align-items: center; justify-content: center; color: #2485ea; } .secure-text { white-space: nowrap; } .addbalance-custom-btn { color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; border: none !important; } /* ===================== ADD FUNDS PAGE FINISH ===================== */ /* ================== ORDERS PAGE STARTS ================== */ .orders-nav-wrapper { margin-bottom: 20px; } .orders-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: normal; gap: 5px; flex-wrap: wrap; flex-direction: row; } @media (min-width: 992px) { .orders-nav { justify-content: flex-start; } } .orders-nav-link { box-sizing: border-box; border-radius: 22px; display: block; display: flex; align-items: center; gap: 10px; color: #080808; padding: 10px 10px; min-width: 155px; background: #fff !important; border: 1px solid #E5E7E9; } .orders-nav-link:focus { box-shadow: 0 0 0 0.1rem #ff5000; } .orders-nav-link.active { background-color: #ff5000; border-color: #ff5000 !important; border: 3px solid #E5E7E9; color: black; } .orders-nav-link:hover { border-color: #ff5000; background-color: #ff5000; color: black; } @media (min-width: 992px) { .orders-nav-link { padding: 10px 13px; } } @media (min-width: 1200px) { .orders-nav-link { padding: 10px 13px; } } @media (min-width: 1400px) { .orders-nav-link { padding: 10px 18px; } } .orders-nav-link .icon { font-size: 20px; display: flex; align-items: center; } .orders-nav-link .text { font-weight: 600; font-size: 14px; line-height: 16px; } .op-search-box { transition: 0.14s ease; background: #191b27; background: #fff !important; border: 1px solid #E5E7E9; } .op-search-box:focus-within { box-shadow: 0 0 0 0.25rem #ff500047; } .op-search-box:hover { background: #293142; } .op-search-box .icon { color: #637990; } .op-search-box input { transition: 0.14s ease; background-color: transparent; border: none; outline: none; flex: 1; color: #080808; font-weight: 600; font-size: 14px; line-height: 16px; } .op-search-box input::placeholder { color: #080808; } .op-card { margin-bottom: 20px; } .op-stats { display: block; font-weight: 600; font-size: 14px; line-height: 20px; text-align: center; border: 2px solid #ff5000; border-radius: 15px; padding: 20px 34px; background-color: #ff50001a; border-color: #ff50008f; color: #ff5000; } @media (max-width: 768px) { .op-stats { margin: 2px; } .op-stats i { position: absolute; left: 4px; font-size: 18px; } } .op-stats i { position: absolute; left: 10px; font-size: 20px; } .op-stats.op-stats-btn i { position: initial; left: auto; font-size: 20px; } .op-stats.op-stats-sm { padding: 16px 30px; border-color: #ff50004f !important; } .op-stats.op-stats-btn { padding: 20px 20px; display: inline-block; background: #293142; border: 1px solid #566676; color: #566676; transition: 0.14s ease; } .op-stats.op-stats-btn:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25); } .op-stats.op-stats-btn.cs-btn { font-size: 24px; margin-bottom: 0; } .op-stats.primary { background-color: #ff50001a; border-color: #ff50008f; color: #ff5000c9; } .op-stats.secondary { background-color: rgba(255, 90, 165, 0.15); border-color: #ff5aa5; color: #ff5aa5; } .op-stats.info { background-color: rgba(90, 215, 255, 0.15); border-color: #5ad7ff; color: #5ad7ff; } .op-stats.warning { background-color: rgba(237, 126, 88, 0.15); border-color: #ed7e58; color: #ed7e58; } .op-stats.danger { background-color: rgba(238, 91, 91, 0.15); border-color: #ee5b5b; color: #ee5b5b; } .op-stats.danger:focus { box-shadow: 0 0 0 0.25rem rgba(238, 91, 91, 0.25); } .op-service-title { font-weight: 600; font-size: 14px; line-height: 25px; color: #080808; margin-bottom: 0px; } .op-search-box.op-order-link { display: flex; width: 100%; } .op-search-box.op-order-link .link { display: block; width: 100%; flex: 1 0 0; font-weight: 500; font-size: 14px; line-height: 18px; color: #637990; opacity: 0.8; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 530px; } .op-date { font-weight: 600; font-size: 13px; line-height: 25px; color: #566676; text-align: center; } .op-date::before { width: 9px; height: 9px; background: #9aacbd; display: inline-block; border-radius: 50%; margin-right: 14px; margin-left: 0px; display: none; } @media (min-width: 992px) { .op-date::before { display: block; } .op-search-box.op-order-link { min-width: 690px; max-width: 610px; } } .op-item { display: flex; align-items: center; gap: 8px; flex-direction: column; } @media (min-width: 992px) { .op-item { flex-direction: row; padding-top: 12px; } } .op-item .title { font-size: 16px; line-height: 18px; color: #72879d; } @media (max-width: 992px) { .op-item .title { font-size: 13px; } } .op-item .icon { display: flex; align-items: center; font-size: 24px; color: #080808; gap: 8px; } .op-item .text { font-size: 20px; line-height: 27px; color: #72879d; } .orders-charge-icon { padding-right: var(--spacing-4); } .orders-status-indicator { position: relative; } /* ========================= REFUNDS PAGE STARTS ========================= */ .refunds-nav-wrapper .orders-nav { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .refunds-nav-wrapper .orders-nav li { flex: 1; min-width: 200px; } /* Make refund stats more compact */ .refunds-table-wrapper .op-item { margin-bottom: 0.5rem; } .refunds-table-wrapper .op-item .title { font-size: 0.75rem; margin-bottom: 0.25rem; font-weight: 600; color: #6c757d; } .refunds-table-wrapper .op-item .icon { font-size: 0.875rem; margin-bottom: 0.25rem; } .refunds-table-wrapper .op-item .text { font-size: 0.875rem; font-weight: 500; } /* Style Order ID link more prominently */ .refunds-table-wrapper .op-stats.op-id { transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; } .refunds-table-wrapper .op-stats.op-id:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-color: rgba(255, 255, 255, 0.2); text-decoration: none; } .refunds-table-wrapper .op-stats.op-id .fas.fa-link { opacity: 0.8; } .refunds-table-wrapper .op-stats.op-id:hover .fas.fa-link { opacity: 1; } @media(max-width: 991px) { .refunds-nav-wrapper .orders-nav { flex-direction: column; } .refunds-nav-wrapper .orders-nav li { min-width: auto; width: 100%; } .refunds-nav-wrapper .orders-nav li .orders-nav-link { width: 100%; justify-content: center; } /* Mobile compact styling */ .refunds-table-wrapper .op-item .title { font-size: 0.7rem; } .refunds-table-wrapper .op-item .text { font-size: 0.8rem; } } /* ========================= SUPPORT TICKET PAGE START ========================= */ .submit-ticket-custom { color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; border: none !important; } .sc-ticket-card { padding: 25px 35px; display: block; text-decoration: none; box-sizing: border-box; border-radius: 15px; transition: 0.3s ease; margin-bottom: 15px; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } @media (max-width: 992px) { .sc-ticket-card { padding: 15px } } .sc-ticket-card:hover { box-shadow: 0 0 5px #ff50007d; transform: scale(1.01); } .sc-ticket-card .sctc-title { margin-top: 6px; font-weight: 600; font-size: 13px; line-height: 15px; color: #797d89; } .sc-ticket-card .sctc-text { font-weight: 600; font-size: 16px; line-height: 18px; color: #080808; } .sd-head { padding-bottom: 20px; } .sd-back { display: block; padding: 10px 0 12px; margin: 10px 0; color: #080808; position: relative; display: flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 16px; line-height: 20px; } .sd-back:hover { color: #080808; } .sd-back:hover::after { left: -18px; right: -18px; } .sd-back i, .sd-back span { position: relative; z-index: 3; } .sd-back::after { content: ""; height: 2px; background-color: #ff5000; position: absolute; left: 0; right: 0; bottom: 0; transition: 0.14s ease; } .sd-tid { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .sd-tid .title { font-weight: 600; font-size: 25px; line-height: 31px; margin: 0px; } .sd-tid .tid { display: block; background: #ff500038; border-radius: 10px; font-weight: 600; font-size: 16px; line-height: 20px; color: #ff5000; padding: 14px 30px; } .tc-ti-text { font-weight: 600; font-size: 16px; line-height: 20px; color: #fff; } .card.tc-ti-box { background-size: cover; background-repeat: no-repeat; color: #080808; box-shadow: inset 0 0 80px #ff50003b; } .card.tc-ti-box .card-body { padding: 20px; } @media (min-width: 992px) { .card.tc-ti-box .card-body { padding: 42px 33px; } } @media (min-width: 1400px) { .card.tc-ti-box .card-body { padding: 50px 38px; } } .card.tc-ti-box .title { font-weight: 600; font-size: 35px; line-height: 40px; letter-spacing: -0.04em; } .card.tc-ti-box .text { font-size: 14px; line-height: 18px; letter-spacing: -0.04em; color: #7e96ad; } .card.tc-ti-box .text p { margin-bottom: 28px; } .card.tc-ti-box .smmist-mark { font-weight: 600; font-size: 25px; line-height: 29px; letter-spacing: -0.04em; } .ticket-message-block { display: flex; } .ticket-message-block.ticket-message-left + .ticket-message-left { margin-top: -50px; } .ticket-message-block.ticket-message-right + .ticket-message-right { margin-top: -50px; } .ticket-message-block.ticket-message-right { justify-content: flex-end; } .ticket-message-block.ticket-message-right .ticket-msg-container { text-align: right; } .ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg { background: #ff500036; border-radius: 20px 20px 0 20px; color: #212529; } .ticket-message-block.ticket-message-left .ticket-msg-container .ticket-msg { border-radius: 20px 20px 20px 0px; } .ticket-message-block .ticket-msg-container .ticket-msg { background: #ff5000; border-radius: 30px; padding: 14px 26px; display: inline-flex; margin-bottom: 12px; font-weight: 500; font-size: 14px; line-height: 22px; letter-spacing: 0.3px; color: #fff; } .ticket-message-block .ticket-msg-container .date-time { font-size: 12px; line-height: 15px; color: #747886; margin-bottom: 30px; padding: 0 10px; display: block; } .ticket-message-left ~ .ticket-message-right .ticket-msg-container .date-time { opacity: 1; } .ticket-message-left ~ .ticket-message-left .ticket-msg-container .date-time { opacity: 0; } .ticket-message-right ~ .ticket-message-left .ticket-msg-container .date-time { opacity: 1; } .schat-body .schat-chat-body { max-height: 553px; overflow-x: hidden; overflow-y: scroll; padding-right: 5px; } .schat-body .schat-chat-body::-webkit-scrollbar { width: 6px; border-radius: 3px; } .schat-body .schat-chat-body::-webkit-scrollbar-track { background: #252c3b; border-radius: 3px; } .schat-body .schat-chat-body::-webkit-scrollbar-thumb { background: #3e4553; border-radius: 3px; transition: 0.14s ease; } .schat-body .schat-chat-body::-webkit-scrollbar-thumb:hover { background: #606778; } .schat-body .schat-input { padding-top: 10px; } .schat-msg-input { position: relative; display: flex; border-radius: 15px; height: 70px; align-items: center; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } .schat-msg-input input { border: none; outline: none; background: transparent; flex: 1; padding-left: 30px; font-size: 14px; height: -webkit-fill-available; color: #080808; } .btn.sd-send-btn { box-shadow: none; display: flex; align-items: center; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } #uploader-button { background: #3792ef !important; border-radius: 15px !important; padding: 10px !important; margin-right: 10px; } #uploader-button span { color: #fff !important; margin: 0 !important; } #uploader-button a { color: #fff !important; } .tp-first-card { background: url(https://storage.perfectcdn.com/8x1jve/thza253styl78ube.png); background-size: cover; background-position: left center; background-repeat: no-repeat; height: -webkit-fill-available; } .tp-second-card { background: url(https://storage.perfectcdn.com/8x1jve/o904mrt08iiw2sfi.png); background-size: cover; background-position: left center; background-repeat: no-repeat; height: -webkit-fill-available; } .tp-card .card-body { padding: 28px; } @media (min-width: 992px) { .tp-card .card-body { width: 70%; } } .tp-card-header { margin-bottom: 18px; } .tp-first-card .tp-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } .tp-second-card .tp-badge, .ep-second-card .tp-badge, .ep-first-card .tp-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; color: #ffffff !important; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%) !important; } .tp-text { font-size: 14px; line-height: 1.6; margin-bottom: 10px; } .tp-text strong { color: #ff5000; } .tp-muted { color: #ff5000; font-size: 13px; font-weight: 700; } .tp-list { padding-left: 0; margin: 0; list-style: none; } .tp-list li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 14px; } .tp-list li::before { content: "✔"; position: absolute; left: 0; color: #ff5000; font-size: 13px; } /* TICKETS PAGE STYLES */ .tickets-subject-overflow { overflow: hidden; } /* VIEWTICKET PAGE STYLES */ .viewticket-files-flex-end { display: flex; justify-content: flex-end; } .viewticket-files-flex-start { display: flex; justify-content: flex-start; } /* ========================== SUPPORT TICKET PAGE FINISH ========================== */ /* ================================ RESELLER PANEL ORDER PAGE STARTS ================================ */ .cp-sns-title { font-weight: 600; font-size: 19px; line-height: 23px; color: #080808; margin-bottom: 30px; } .cp-sns-dns { background: #ff500057; border-radius: 10px; font-weight: 600; font-size: 16px; line-height: 20px; color: #ff5000; background-color: #ff500057; padding: 24px 20px; text-align: center; margin-bottom: 20px; } .cp-top { margin-bottom: 30px; } .cp-exclamation { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #252c3b; background-color: #ee5b5b; font-size: 12px; font-weight: 700; } .aq { position: relative; } .aq .aq-item { transition: 0.32s cubic-bezier(0.17, 0.67, 0.71, 1.34); margin-bottom: 20px; border-bottom: 1px solid #6c757d21; } .aq .aq-item .aq-content { padding: 0px 26px 0px; overflow: hidden; max-height: 0px; transition: 0.32s ease; color: #6c757d; } .aq .aq-item .i-1 { display: block; } .aq .aq-item .i-2 { display: none; } .aq .aq-item.active .i-1 { display: none; } .aq .aq-item.active .i-2 { display: block; } .aq .aq-item.active .aq-content { padding: 8px 26px 24px; max-height: 1000px; } .aq .aq-btn { width: 100%; display: block; font-size: 16px; line-height: 20px; display: flex; color: #080808; align-items: center; padding: 20px 0px; border: none; outline: none; background-color: transparent; } .aq .aq-btn .aq-btn-text { font-weight: 600; padding-left: 20px; text-align: left; font-size: 15px; margin: 0; } @media (max-width: 991px) { .aq .aq-btn .aq-btn-text { max-width: 270px; } } .aq .aq-btn .aq-btn-right { color: #080808; font-size: 20px; margin-left: auto; width: 72px; opacity: 0.6; } /* CHILD PANEL ORDER PAGE STYLES START */ .childpanel-nameserver-body { padding: var(--spacing-lg); } .childpanel-considerations-title { display: flex; align-items: center; gap: var(--spacing-xs); } .childpanel-considerations-title { color: var(--color-primary); font-weight: var(--font-weight-semibold); } /* CHILD PANEL PAGE STYLES */ .childpanel-alert-close-button { padding-bottom: var(--spacing-16); } .childpanel-table-container { border: 1px solid #2a3f4e; background: var(--color-bg-secondary); border-radius: var(--border-radius-16); padding: var(--spacing-16); } .affiliate-highlight .text-full { font-size: 14px; line-height: 1.5; } @media (min-width: 991px) { .affiliate-highlight .text-full { width: 60%; } } /* ================================ RESELLER PANEL ORDER PAGE FINISH ================================ */ /* ================================ MASS ORDER ORDER PAGE STARTS ================================ */ /* MASS ORDER page specific styles */ .mass-order-box .form-group { text-align: center; } .mass-order-box .bg-text-alert { background-color: #ffb000; padding: 17px; border-radius: 10px; margin-top: 23px; color: #881300; font-weight: 500; text-align: -webkit-center; display: block; } .mass-order-box .box-text { margin-bottom: 18px !important; box-shadow: 0px 0px 10px rgb(5 4 8 / 10%); background-color: #323b421c; background-size: cover; border-radius: 20px; margin-bottom: 11px; color: #808191; margin: 0 0 10px; border: 1px solid #f6f6f61f; padding: 30px 15px 30px 15px; font-size: 18px; text-align: -webkit-center; } .mass-order-box .box-text span { font-weight: bold; color: #ff5000; } .mass-order-box .js-copy-btn { padding: 17px; justify-content: center; border-radius: 12px; line-height: 24px; transition: all .3s; width: 100%; color: black; } .mass-order-box .js-copy-btn:hover { color: black; } /* ================================ MASS ORDER ORDER PAGE FINISH ================================ */ /* ======================= EARN PRIZE PAGE START ======================= */ .ep-first-card { background: url(https://storage.perfectcdn.com/sw36r8/4e9lx5grsfxiu77z.png); background-size: cover; background-position: left center; background-repeat: no-repeat; height: -webkit-fill-available; } .ep-second-card { background: url(https://storage.perfectcdn.com/sw36r8/a2o5iimalglyhmi5.png); background-size: cover; background-position: left center; background-repeat: no-repeat; height: -webkit-fill-available; } .card h2 { margin-bottom: 18px; font-size: 20px; } .check-list, .policy-list { list-style: none; } .check-list li, .policy-list li { margin-bottom: 12px; opacity: 0.8; padding-left: 20px; position: relative; } .check-list li::before, .policy-list li::before { content: "✓"; position: absolute; left: 0; color: #ff5000; font-weight: bold; } .task-ico { width: 50px; height: 50px; border-radius: 10px; display: flex; font-size: 30px; border: 2px solid #eeeeee36; align-items: center; justify-content: center; } .task-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .task-card h3 { font-size: 16px; margin-bottom: 0px; } .reward-badge { background: #ff500037; color: #ff5000; padding: 8px 14px; border-radius: 30px; font-weight: 600; font-size: 14px; display: flex; align-items: baseline; justify-content: center; gap: 5px; } .task-policy { padding: 15px; } .lottery-card { margin-bottom: 15px; } .weekly { background: linear-gradient(135deg, #2485ea, #1d6fd1); padding: 20px; border-radius: 18px; text-align: center; color: #ffffff; box-shadow: 0 8px 25px rgba(36,133,234,0.25); } .monthly { background: linear-gradient(135deg, #ff5000, #a3cc00); padding: 20px; border-radius: 18px; text-align: center; color: #0f172a; box-shadow: 0 8px 25px rgba(204,255,0,0.25); } .lottery-amount { font-size: 26px; font-weight: bold; margin-top: 10px; } .giveaway-policy { padding: 15px; } .winners-card h3 { margin-bottom: 20px; } .winner-section h4 { margin-bottom: 15px; font-size: 14px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .winner-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 14px; margin-bottom: 10px; background: #111827; border: 1px solid #1f2937; font-size: 14px; transition: 0.3s ease; } .winner-item:hover { transform: translateY(-2px); border-color: #2485ea; } .winner-item .position { font-weight: 600; opacity: 0.7; } .winner-item .username { font-weight: 600; } .winner-item .prize { font-weight: bold; } .winner-item.gold { border-color: #ff5000; background: linear-gradient(90deg, rgba(204,255,0,0.15), transparent); } .winner-item.silver { border-color: #2485ea; background: linear-gradient(90deg, rgba(36,133,234,0.15), transparent); } .winner-item.bronze { border-color: #6fb8ff; background: linear-gradient(90deg, rgba(36,133,234,0.08), rgba(204,255,0,0.08)); } .winner-item.backup { opacity: 0.65; border-style: dashed; } .claim-box { display: flex; align-items: center; justify-content: space-between; } /* ====================== EARN PRIZE PAGE FINISH ====================== */ /* ====================== AFFILIATES PAGE STARTS ======================= */ .afp-ftext { font-weight: 600; font-size: 16px; line-height: 20px; color: #ffffff; padding-left: 8px; } .aft-item { display: flex; gap: 17px; align-items: center; margin: 5px 0; } .aft-item .title { font-weight: 800; font-size: 14px; line-height: 18px; color: #ff5000; margin-bottom: 4px; } .aft-item .text { font-weight: 600; font-size: 16px; line-height: 22px; color: #080808; } .aft-box-row { margin: 0 -8px -10px; } .aft-box-row > .col { padding: 0 8px; } .aft-box-row > .col:nth-child(1n) .aft-box::after { background-color: #ff5000; } .aft-box-row > .col:nth-child(2n) .aft-box::after { background-color: #fff; } .aft-box-row > .col:nth-child(3n) .aft-box::after { background-color: #42b549; } .aft-box-row > .col:nth-child(4n) .aft-box::after { background-color: #ff5000; } .aft-box-row > .col:nth-child(5n) .aft-box::after { background-color: #fff; } .aft-box-row > .col:nth-child(6n) .aft-box::after { background-color: #42b549; } .aft-box { border-width: 1px; border-style: solid; border-color: #ff50004f; background: #ff500017; border-radius: 10px; padding: 20px; position: relative; overflow: hidden; margin-bottom: 16px; } .aft-box .title { font-weight: 600; font-size: 14px; line-height: 17px; color: #ff5000; } .aft-box .text { font-weight: 600; font-size: 25px; line-height: 25px; color: #080808; } .aft-box:hover::after { height: 14px; } .aft-box::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 8px; background-color: #fff; transition: 0.14s ease; } .aft-vid { width: 80%; height: auto; margin: auto; padding: 20px; } @media (max-width: 991px) { .aft-vid { width: 100%; } } .affiliates-title-highlight { color: var(--color-primary); } .affiliates-earn-title { color: var(--color-primary); } .affiliates-referral-icon { background-color: #ff5000 !important; } .affiliates-referral-icon i { color: #fff !important; } .affiliates-copy-button { background: #ff5000; border: none; width: 25px; border-radius: 50px; padding: var(--spacing-4) var(--spacing-8); cursor: pointer; transition: all var(--transition-base); } .affiliates-copy-button:hover { transform: scale(1.05); } .affiliates-copy-button i { color: #fff !important; } .affiliates-table-section-body { padding: var(--spacing-32) var(--spacing-24); margin-top: var(--spacing-24); } @media (max-width: 991px) { .affiliates-table-section-body { padding: var(--spacing-24) var(--spacing-16); margin-top: var(--spacing-16); } } /* Affiliates tables mobile responsiveness */ @media (max-width: 768px) { .affiliates-statistics-table, .affiliates-payout-table { font-size: 14px; } .affiliates-statistics-table thead, .affiliates-payout-table thead { display: none; } .affiliates-statistics-table tbody tr, .affiliates-payout-table tbody tr { display: block; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); margin-bottom: var(--spacing-16); padding: var(--spacing-16); background: var(--color-card-bg); } .affiliates-statistics-table tbody td, .affiliates-payout-table tbody td { display: block; text-align: right; border: none; padding: var(--spacing-8) 0; position: relative; padding-left: 50%; } .affiliates-statistics-table tbody td::before, .affiliates-payout-table tbody td::before { content: attr(data-label) ": "; position: absolute; left: 0; width: 45%; text-align: left; font-weight: 600; color: var(--color-text-secondary); } .affiliates-statistics-table tbody td:last-child, .affiliates-payout-table tbody td:last-child { border-bottom: none; } } /* Improve table responsive wrapper */ .table-responsive { border-radius: var(--border-radius-md); overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .table-responsive { border: none; overflow-x: visible; } } /* ====================== AFFILIATES PAGE FINISH ======================= */ /* =================== ACCOUNT PAGE STARTS =================== */ /* USER ACCOUNT PAGE D-HELLO */ .d-hello-card { position: relative; } .d-hello-card .card-body { padding: 20px; margin-bottom: -20px; } @media (min-width: 992px) { .d-hello-card .card-body { padding: 32px 34px; } } .d-hello-card .d-hello--item { display: flex; gap: 15px; height: 65px; width: 250px; align-items: center; margin-bottom: 18px; } .d-hello-card .d-hello--item .dh-right .text-1 { font-weight: 600; font-size: 17px; line-height: 24px; color: #080808; } .d-hello-card .d-hello--item .dh-right .text-2 { width: 250px; font-weight: 600; font-size: 22px; line-height: 29px; color: #080808; } .d-hello-card .d-hello--item .dh-right .text-3 { font-weight: 600; font-size: 15px; line-height: 24px; color: #080808; } /* DASHBOARD ICON BOXES */ .dh-icon { color: #ff5000; border-radius: 50%; position: relative; height: 64px; width: 64px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 400; } .dh-icon.icon-info { border-radius: 100px; box-shadow: 0px 0px 5px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); } /* USER ACCOUNT PAGE D-HELLO */ .acc-user { display: flex; align-items: center; gap: 16px; } .acc-user .acc-avatar { height: 74px; width: 74px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 7px solid #ff5000; } .acc-user .acc-avatar img { width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; } .acc-user .acc-username { font-weight: 600; font-size: 19px; line-height: 23px; color: #080808; } .acc-user .acc-mail { font-size: 16px; line-height: 19px; color: #4e5d7c; } .acc-card-left { display: flex; justify-content: center; height: 100%; } .acc-card-left .card-body { display: flex; align-items: center; width: 100%; } .acc-card-left .card-body .row { width: calc(100% + 30px); } .acc-api { display: flex; padding: 9px 18px 7px 22px; background: #ff500017; border-radius: 15px; color: #ff5000; width: 100%; align-items: center; margin: 0px; } .acc-api .acc-api-key { width: 100%; font-weight: 600; font-size: 18px; line-height: 25px; text-align: center; color: #ff5000; padding-right: 20px; text-align: left; } .acc-api a { margin-left: auto; font-size: 24px; line-height: 1; } /* Account Page Styles */ .account-stats-section { margin-bottom: var(--spacing-lg); } .account-stats-card-body { padding: var(--spacing-lg); } .account-icon-style { color: var(--color-primary); text-shadow: 0px 24px 40px rgba(64, 203, 179, 0.1); } .account-api-button-icon { height: 10px; width: 10px; } .account-api-sync-icon { color: black; } .account-2fa-error-block { display: none; } .account-2fa-error-block.show { display: block; } .account-2fa-generate-form { display: block; } .account-2fa-generate-form.hide { display: none; } .account-2fa-approve-form { display: none; } .account-2fa-approve-form.show { display: block; } /* =================== ACCOUNT PAGE FINISH =================== */ /* ================== BLOGS OUTSIDE STARTS ================== */ .bp-blogs-wrapper { padding: 0 0 80px; } /* MODERN BLOG CARD OUT STARTS */ .blog-card { height: 100%; } .bp-first-card { background: url(https://storage.perfectcdn.com/5y4uze/chigb40z7i452wtk.png); background-size: cover; background-position: left center; background-repeat: no-repeat; } .bp-card .card-body { padding: 28px; } .bp-card-header { margin-bottom: 18px; } .bp-first-card .bp-badge { display: inline-block; font-size: 12px; font-weight: 600; color: #ff5000; background: #ff50001f; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; } .bp-text { font-size: 14px; line-height: 1.6; margin-bottom: 10px; } .bp-text strong { color: #ffffff; } .bp-muted { color: #9ca3af; font-size: 13px; } .blog-card-link { display: block; height: 100%; border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } /* IMAGE */ .blog-media { position: relative; padding-top: 56%; overflow: hidden; } .blog-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(11, 18, 26, 0.9) 100% ); } .blog-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .blog-card-link:hover .blog-media img { transform: scale(1.08); } /* BODY */ .blog-body { padding: 26px 28px 28px; } .blog-title { font-size: 20px; font-weight: 600; line-height: 1.35; color: #080808; margin-bottom: 12px; } .blog-excerpt { font-size: 13px; line-height: 1.5; color: #6c757d; } /* CTA */ .blog-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #ff5000; transition: gap 0.3s ease, color 0.3s ease; } .blog-card-link:hover .blog-cta { gap: 16px; } .blog-cta i { font-size: 14px; } /* MODERN BLOG CARD OUT ENDS */ /* ================== BLOG INSIDE STARTS ================== */ /* Blog Page Title Highlight Style */ /* blog page reback button */ @media only screen and (max-width: 635px) { #go-back-blogs-1 { display: none !important; } } @media only screen and (min-width: 635px) { #go-back-blogs-2 { display: none !important; } } /* */ .blog-title-highlight { color: #ff5000; } /* Blog Post Page Specific Styles */ .blogpost-title { margin: 0; text-align: center; } .blogpost-go-back-button { padding: 9px !important; } .blogpost-sidebar { margin-top: 30px; } .blogpost-sidebar-icon { color: #ff5000; } .blog-share-wrapper { display: flex; gap: 10px; } .blog-share-btn { display: inline-block; box-sizing: border-box; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: 0.14s ease; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); color: #fff; } .blog-share-btn i { transition: 0.14s ease; } .blog-share-btn:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25); } .blog-share-btn:hover { color: #fff; } .blog-share-btn:hover i { transform: scale(1.2); } .bi-head-wrapper { padding: 0 0 30px 0; } /* .bi-head-box { background: #19202a; border: 1px solid #353f55; box-sizing: border-box; border-radius: 35px; position: relative; } */ .bi-head-box .bi-head-bg { position: absolute; left: 0; top: 0; border-radius: 35px; width: 100%; height: 100%; overflow: hidden; opacity: 0.15; } .bi-head-box .bi-head-bg img { width: 100%; height: 100%; object-fit: cover; } .bi-head-box .bi-head-content { position: relative; z-index: 5; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bi-head-box .bi-head-content .bi-cat { display: inline-block; box-sizing: border-box; color: #ababab; border-radius: 50px; font-weight: 300; text-align: center; font-size: 13px; line-height: 25px; letter-spacing: 0; padding-top: 10px; } .bi-head-box .bi-head-content .bi-title h1 { font-size: 1.5rem; line-height: 1.70; font-weight: 400; text-align: center; text-shadow: 0 0 10px #ffffff45; } .bi-title-icon { width: 45px; height: 45px; border-radius: 18px; font-size: 23px; display: inline-flex; /* FIX */ align-items: center; justify-content: center; margin: 0 7px; vertical-align: text-bottom; color: #fff; position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } @media (min-width: 992px) { .bi-head-box .bi-head-content .bi-title h1 { font-size: 3rem; line-height: 1.40; padding: 0 200px; } .bi-title-icon { width: 60px; height: 60px; font-size: 32px; } .bi-head-box .bi-head-content .bi-cat { font-size: 25px; line-height: 35px; letter-spacing: 0.1px; padding-top: 25px; } } /* Gradient themes */ .bi-title-icon.first { background: linear-gradient(135deg, #ff5000, #ffccb5); transform: rotate(9deg); } .bi-title-icon.second { background: linear-gradient(135deg, #f49000, #ffcd37); transform: rotate(-11deg); } .bi-title-icon.third { background: linear-gradient(135deg, #009e76, #00e6a8); transform: rotate(-14deg); } /* Glow effect */ .bi-title-icon::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(255,255,255,0.35), transparent 60%); opacity: 0.6; pointer-events: none; } /* team picture */ .team-pic-sec { background: #682100; } .team-pic-box { padding: 30px 0 25px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .team-pic { display: flex; justify-content: center; } .team-pic img { width: 90%; transform: rotate(359deg); border-radius: 25px; box-shadow: 0 0 50px #0a0b12; } @media (min-width: 992px) { .team-pic img { width: 50%; } .team-pic-box { padding: 60px 0 45px; } } .team-pic-box span { transform: rotate(359deg); margin-top: 30px; font-size: 15px; color: #ffffff96; font-style: italic; } .aboutus-row { display: flex; justify-content: center; align-items: center; } .aboutus-box { text-align: center; font-size: 18px; line-height: 30px; color: #080808; } /* Hover (çok önemli modern hissiyat için) */ .bi-title-icon:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 15px 35px rgba(0,0,0,0.25); transition: all 0.3s ease; } .bi-head-box .bi-head-content .user-wrapper { display: flex; align-items: center; justify-content: center; } .bi-head-box .bi-head-content .user-wrapper .blog-head { padding: 24px 0 0 0; } .bi-service-category { padding: 10px 0 10px 0; } #blog-baslik { color: #ff5000; font-weight: 700; } .blog-content { padding-bottom: 30px; } .bi-content { font-size: 16px; line-height: 25px; color: #080808; } #blog-metin h1, #blog-metin h2, #blog-metin h3, #blog-metin h4, #blog-metin h5, #blog-metin h6, #blog-metin h7 { color: #ff5000; } /* #blog-metin p { text-indent: 15px; } */ .bi-content strong { color: #ff5000; } .bi-content img, .bi-content table { max-width: 100%; } .bi-share-section { padding-bottom: 30px; } .bi-share-section .blog-share-wrapper { justify-content: space-between; } @media (min-width: 992px) { .bi-share-section .blog-share-wrapper { gap: 50px; } .bi-share-section .blog-share-wrapper .blog-share-btn + .blog-share-btn::before { left: -25px; } } /* ===================== BLOG CARD INSIDE ENDS ===================== */ /* =============== API PAGE STARTS =============== */ .api-page #PageTitle { display: block; font-weight: 600; font-size: 35px; line-height: 30px; } .api-page p { margin-bottom: 0; font-size: 16px; line-height: 22px; color: #92969d; } .api-page h6 { font-weight: 600; font-size: 19px; line-height: 22px; color: #ffffff; } .api-title-section { padding: 60px 0 30px; } .api-title { font-size: 19px; line-height: 22px; color: #ffffff; } .api-text { font-weight: 600; font-size: 14px; line-height: 16px; color: #92969d; } .api-section { padding: 0 0 30px; } .api-section .card-header .api-title { margin-bottom: 0; } @media (min-width: 992px) { .api-section .card .card-body, .api-section .code.card-body { padding: 40px; } } .api-section .card-body .row { margin-bottom: -2rem; } .api-section .code { color: rgba(255, 255, 255, 0.6); } /* API Page Specific Styles */ .api-title-section-hidden { display: none; } .api-service-type-parameters-hidden { display: none; } .padding-bottom-api-page { padding-bottom: 40px; } /* ==================== REGISTER PAGE STARTS ==================== */ .register-page { position: relative; min-height: 100vh; padding: 120px 0 40px 0; display: flex; align-items: center; } @media (max-width: 992px) { .register-page { padding: 40px 0 40px 0; } } .rp-content { width: 100%; position: relative; z-index: 10; } .rp-top-img { width: 100%; padding: 25px 85px; } .rp-left-title { font-weight: 700; font-size: 35px; line-height: 40px; letter-spacing: -0.04em; margin: 20px 0 10px; background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } .rp-left-text { font-size: 17px; line-height: 24px; letter-spacing: -0.04em; color: #080808; margin-bottom: 60px; text-align: center; } /* ------- actulus --------- */ .select-container { position: relative; width: 100%; } .select-container.open .select-options-wrapper { display: flex; } .select-container.open .select-arrow { transform: rotate(180deg); } .select-button { width: 100%; display: flex; align-items: center; cursor: pointer; transition: 0.14s ease; outline: none; box-sizing: border-box; border-radius: 22px; font-weight: 600; font-size: 14px; line-height: 16px; height: 48px; background: #fff; border: 1px solid #E5E7E9; color: #080808; } .selected-text { font-size: 16px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } .select-options-wrapper { border-radius: 20px; position: absolute; z-index: 6; display: none; align-items: center; flex-direction: column; transition: 0.14s ease; top: 55px; width: 100%; background: #fff; border: 1px solid #E5E7E9; color: #080808; } .select-options { position: relative; width: 100%; margin: 0; padding: 10px 8px; display: flex; gap: 2px; flex-direction: column; max-height: 380px; overflow-y: auto; } .select-options::-webkit-scrollbar { width: 6px; } /* Track */ .select-options::-webkit-scrollbar-track { background: #ff50003b; border-radius: 3px; } /* Handle */ .select-options::-webkit-scrollbar-thumb { background: #ff5000; border-radius: 3px; } /* Handle on hover */ .select-options::-webkit-scrollbar-thumb:hover { background: #ff5000; } .select-option { display: block; font-weight: 600; padding: 8px 12px; border-radius: 10px; cursor: pointer; border: none; outline: none; background-color: transparent; text-align: left; color: #08080896; } .select-option:hover, .select-option:focus { background-color: rgba(255, 255, 255, 0.1); } .select-option.active { color: #080808; font-weight: 700; } .search-container { width: 100%; padding: 10px 10px 3px; } .search-input { width: 100%; border: 1px solid #eee; border-radius: 4px; height: 38px; padding: 0 14px; outline: none; } .search-input:focus { box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1rem !important; } .modal-content { background: #fff; border-radius: 15px; border: 1px solid #bebebe; } .modal-title { line-height: 1.3; font-size: 19px; font-weight: 600; } .modal-header { border-bottom: 1px solid #648ab04a; } .modal-body { color: #ff5000; line-height: 1.3; } .ticket-response { margin-bottom: 20px; display: none; } .ticket-response.active { display: block; } .alert.alert-success { color: #ff5000; background: #ff500014; border: 1px solid #ff50004d; } .alert.alert-danger { color: #ee5b5b; background: #ee5b5b41; } .alert .close { position: absolute; right: 20px; top: 13px; outline: none; background-color: transparent; border: none; font-size: 20px; color: #fff; } /* Pagination Styles */ /* swiperjs */ .swiper { width: 100%; height: 100%; overflow: hidden; } .swiper-slide { background: transparent; display: flex; box-sizing:border-box; padding-bottom: 10px; padding-top: 10px; } .swiper-pagination-relative { position: relative; bottom: -15px; } .swiper-pagination-bottom { position: relative !important; bottom: -15px !important; height: 33px; } /* pagination dots color */ .swiper-pagination-bullet { background-color: #ff5000 !important; } .pagination li.active .page-link { background-color: #ff5000; color: #fff; } .pagination li.page-item-before .page-link { border-top-left-radius: 10px; border-bottom-left-radius: 10px; font-weight: 600; } .pagination li.page-item-next .page-link { border-top-right-radius: 10px; border-bottom-right-radius: 10px; font-weight: 600; } .pagination li .page-link { margin: 0; height: 50px; padding: 0px; min-width: 50px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17.3005px; line-height: 18px; color: #080808; position: relative; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 15px; } .pagination li .page-link:focus { z-index: 2; } /* Pagination Styles FINISH */ /* ========================== Mobile Bottom Fixed Navbar ========================== */ .mobile-navbar { position: fixed; z-index: 1031; left: 0px; right: 0px; bottom: 0px; height: 56px; border-top: 1px solid; background-color: #fff; border-color: #e8e8e8; padding: 3px 10px 0; } /* Hide mobile navbar on desktop screens */ @media (min-width: 992px) { .mobile-navbar { display: none; } } .mobile-navbar-content { display: flex; gap: 10px; align-items: center; justify-content: space-around; } .mnc-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #ff5000; } .mnc-item.active { color: #ff5000; } .mnc-item-icon { font-size: 20px; margin-bottom: 0px; display: flex; align-items: center; justify-content: center; height: 30px; } .mnc-item-text { font-size: 12px; font-weight: 500; } .table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-color: #212529; --bs-table-striped-bg: rgba(0, 0, 0, 0.05); --bs-table-active-color: #212529; --bs-table-active-bg: rgba(0, 0, 0, 0.1); --bs-table-hover-color: #212529; --bs-table-hover-bg: rgba(0, 0, 0, 0.075); width: 100%; margin-bottom: 1rem; color: #080808; vertical-align: top; border-color: #dee2e6; } .icons { font-size: 20px; display: flex; align-items: center; color: #637990 !important; padding: 10px; border-radius: 99px; } .spans { font-size: 16px; padding: 0px 0px 0 10px; } .sctx-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .agr { margin-bottom: 30px; } /* .op-stats.neutral { background-color: rgb(40 49 65); border-color: #35405a; color: #ffffff; } */ .page-item:first-child .page-link { border-top-left-radius: 50px; border-bottom-left-radius: 50px; border: 1px solid #353f55; } .page-item:last-child .page-link { border-top-right-radius: 50px; border-bottom-right-radius: 50px; border: 1px solid #353f55; } .pagination { display: flex; justify-content: center; list-style: none; margin-top: 20px; gap: 10px; } /* .pagination li { border: 1px solid #252c3b; box-shadow: 0px 4px 16px rgb(37 23 51 / 32%), inset 0px 1px 0px rgb(255 255 255 / 20%), inset 0px 6px 30px rgb(255 255 255 / 20%); padding: 10px 20px; border-radius: 15px; } .pagination .active { background-color: #ff5000; } .pagination .active a { color: black !important; } .pagination li a { font-weight: 700; font-size: 20px; color: white !important; } */ .badge-dangers { background: #ff5a5a; border-radius: 50px; padding: 14px; font-size: 16px; font-weight: 600; } .badge-primarys { background: #00d2ad; border-radius: 50px; padding: 14px; font-size: 16px; font-weight: 600; } .badge-warnings { background: #fbbc05; border-radius: 50px; padding: 14px; font-size: 16px; font-weight: 600; } .badge-infos { background: #ff4fd8; border-radius: 50px; padding: 14px; font-size: 16px; font-weight: 600; } /* ================ EK CSS BAŞLANGIÇ ================ */ /* --------------------------------------------------------------------------------------------*/ /* ------------------------------- Sign in Design By SGadget ------------------------------- */ /* ----------------------------------------------------------------------------------------- */ /* ============================================ MODERN FOOTER STYLES - ACCORDION BASED ============================================ */ .footer { position: relative; z-index: 6; width: 100%; margin-top: 200px; } @media (max-width: 991px) { .footer { margin-top: 0px; } } .footer-top { background: #f7f7f7b5; border-top: 1px solid #eeeeee; } .footer-bottom { padding: 15px 0; border-top: 1px solid #e2e2e2; background: #f6f5f5; } .footer-bottom .text-md-start, .footer-bottom .text-md-end { font-size: 14px; color: #797d89; line-height: 1.6; } /* Contact Column */ @media (min-width: 991px) { .layout-footer-col-contact { position: relative; bottom: 80px; } } .contact-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; border-radius: 25px; justify-content: space-between; background: url(https://storage.perfectcdn.com/4553qi/ln7d74ml6ot7zyj9.png) no-repeat, #fff; background-size: cover; background-position: center; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.12); } @media (max-width: 991px) { .contact-row { background: none; border-radius: 0; border: none; box-shadow: none; } } .brand-logo { display: flex; justify-content: center; } @media (min-width: 991px) { .brand-logo { justify-content: left; } } .brand-slogan { color: #080808 !important; text-align: center; } @media (min-width: 991px) { .brand-slogan { max-width: 280px; text-align: left; } } .contact-flex { display: flex; justify-content: center; gap: 15px; } @media (min-width: 991px) { .contact-flex { justify-content: space-around; gap: 0; } } .contact-boxes { display: flex; flex-direction: row; gap: 15px; transition: transform 0.3s ease; } .contact-boxes:hover { transform: translateY(-3px); } .footer-icon-box img { width: 30px; height: 30px; } @media (min-width: 991px) { .footer-icon-box img { width: 50px; height: 50px; } } .clickable-contacts { display: flex; flex-direction: column; gap: 4px; justify-content: center; } .clickable-contacts-text { font-size: 16px; font-weight: 600; color: #080808; line-height: 1.2; } .clickable-contacts-subtext { color: #08080882; } /* Layout Component Styles */ .layout-logo-max-width { max-width: 200px; } .layout-text-color-primary { color: #ff5000; } .layout-position-fixed { position: fixed; } .layout-justify-content-end { justify-content: end; } .layout-logo-max-width-mobile { max-width: 180px; } .layout-footer-logo-height { width: 100%; height: auto; max-width: 200px; } .layout-footer-chevron-mobile { color: #080808; font-size: 20px; } /* Footer Dropdown Menu */ @media (min-width: 991px) { .footer-dropdown-menu { position: relative; top: -50px; } } /* Footer Section Toggle Buttons */ .footer-droplist-button { width: 100%; position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 35px 16px 0; border: none; background: none; color: #080808; cursor: pointer; text-align: left; transition: all 0.3s ease; } @media (max-width: 991px) { .footer-droplist-button { border-radius: 15px; margin-bottom: 10px; padding: 16px; background: #fff; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, .125); } } .footer-droplist-button:hover { color: #ff5000; } .footer-droplist-button[aria-expanded="true"] .footer-chevron { transform: rotate(180deg); } .layout-footer-icon-general { font-size: 18px; color: #ff5000; flex-shrink: 0; } .footer-droplist-title { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; flex: 1; } .footer-chevron { font-size: 14px; transition: transform 0.3s ease; flex-shrink: 0; } /* Services Section Content */ #kolon-1 { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } #kolon-1.active { max-height: 5000px; } /* Services List */ .services-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .menu-item { margin: 0; position: relative; } .menu-item-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 8px; color: #080808; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-align: left; gap: 12px; background: #fff; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12); border: 3px solid rgb(0 0 0 / 7%); } .menu-item-toggle:hover { border-color: #ff5000; color: #000000; } .menu-item-toggle[aria-expanded="true"] { border-color: #ff5000; color: #ff5000; } .menu-item-toggle span { flex: 1; text-align: left; } .menu-item-chevron { font-size: 12px; transition: transform 0.3s ease; flex-shrink: 0; } .menu-item-toggle a { color: #080808; } .menu-item-toggle:hover a { color: #ff5000; } .menu-item-toggle[aria-expanded="true"] .menu-item-chevron { transform: rotate(180deg); } /* Drop Menu (Service Sublist) */ .drop-menu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding-left: 0; background: transparent; position: relative; border-radius: 0; display: block; } .menu-item-toggle[aria-expanded="true"] + .drop-menu, .drop-menu.active { max-height: 800px; padding: 12px 0 12px 20px; } @media (min-width: 991px) { .menu-item-toggle[aria-expanded="true"] + .drop-menu, .drop-menu.active { max-height: 200px; overflow-y: auto; padding: 12px 0 12px 20px; } } .drop-menu::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 0; width: 2px; background: linear-gradient(to bottom, #ff5000, transparent); opacity: 0; transition: opacity 0.3s ease; } .drop-menu.active::before { opacity: 1; } .drop-menu-item { margin: 0; width: 100%; } .drop-menu-item a { display: block; color: #929cb7; font-size: 13px; text-decoration: none; padding: 10px 0; transition: all 0.3s ease; border-radius: 4px; position: relative; font-weight: 400; } @media (min-width: 991px) { .drop-menu-item a::before { content: '•'; position: absolute; left: 0; color: #ff5000; opacity: 0; transition: opacity 0.3s ease; font-weight: bold; } .drop-menu-item a:hover { color: #ff5000; padding-left: 20px; } .drop-menu-item a:hover::before { opacity: 1; } } /* Simple Lists (Provider & Company) */ #kolon-2, #kolon-3 { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; display: flex; flex-direction: column; gap: 12px; } #kolon-2.active, #kolon-3.active { max-height: 500px; } #kolon-2 .menu-item, #kolon-3 .menu-item { margin: 0; } /* Scrollbar for Drop Menus */ .drop-menu::-webkit-scrollbar { width: 6px; } .drop-menu::-webkit-scrollbar-track { background: #ff500040; border-radius: 3px; } .drop-menu::-webkit-scrollbar-thumb { background: #ff5000; border-radius: 3px; } .drop-menu::-webkit-scrollbar-thumb:hover { background: #ff5000; } /* width */ .drop-menu::-webkit-scrollbar { width: 6px; } /* Track */ .drop-menu::-webkit-scrollbar-track { background: #ff500040; } /* Handle */ .drop-menu::-webkit-scrollbar-thumb { background: #ff5000; } @media (max-width: 991px) { .menu-item .drop-menu { top: 100%; left: 0; right: auto; } } .menu-item:hover .drop-menu { display: block; } /* ------------------- FOOTER SECTION ENDS ------------------- */ /* --------------------------- RANDOM ICONS SIGN IN STARTS --------------------------- */ .final-section { margin: 160px 0 200px 0; } @media (min-width: 991px) { .final-section { padding: 130px 0 200px 0; } } .hbl-title { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 15px 0; } @media (min-width: 991px) { .hbl-title { padding: 0; } } .hbl-title .title { font-weight: bold; font-size: 35px; line-height: 40px; letter-spacing: -0.04em; color: #080808; } .hbl-title .title span { color: #ff5000; } .final-btn{ border-radius: 50px !important; box-shadow: 0 0 15px #ff5000; } .randomly-icons-part { position: relative; } .fixed-m-frame { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; background-color: #2dfad5; color: #fff; font-size: 20px; } .fixed-xl-frame { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; background-color: #2dfad5; color: #fff; font-size: 30px; } .icon-white { color: #ffffff; } .icon-black { color: #000000; } /* left side icons */ .icons-left-1 { left: 23%; top: -40%; background: #298be5; box-shadow: 0px 0px 20px #298be5; animation: shake-left-up-to-right-down 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-left-1 { left: 11%; top: -30%; } } .icons-left-2 { left: 18%; top: 30%; background: #b25cf0; box-shadow: 0px 0px 20px #b25cf0; animation: shake-left-to-right 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-left-2 { left: 43%; top: 120%; } } .icons-left-3 { left: 23%; top: 100%; background: #ff5700; box-shadow: 0px 0px 20px #ff5700; animation: shake-left-down-to-right-up 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-left-3{ left: 20%; top: 110%; } } .icons-left-4 { left: 10%; top: -50%; background: #fa7e1e; box-shadow: 0px 0px 20px #fa7e1e; animation: shake-left-up-to-right-down 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-left-4 { left: 0%; top: -80%; } } .icons-left-5 { left: 5%; top: 30%; background: #c4302b; box-shadow: 0px 0px 20px #c4302b; animation: shake-left-to-right 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-left-5 { left: 0%; top: 140%; } } .icons-left-6 { left: 10%; top: 110%; background: #00acee; box-shadow: 0px 0px 20px #00acee; animation: shake-left-down-to-right-up 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-left-6 { left: 41%; top: 155%; } } /* right side icons */ .icons-right-1 { right: 23%; top: -40%; background: #ed812b; box-shadow: 0px 0px 20px #ed812b; animation: shake-right-up-to-left-down 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-right-1{ right: 42%; top: -35%; } } .icons-right-2 { right: 18%; top: 30%; background: #81b71a; box-shadow: 0px 0px 20px #81b71a; animation: shake-right-to-left 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-right-2 { right: 8%; top: -30%; } } .icons-right-3 { right: 23%; top: 100%; background: #0072b1; box-shadow: 0px 0px 20px #0072b1; animation: shake-right-down-to-left-up 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-right-3 { right: 18%; top: 110%; } } .icons-right-4 { right: 10%; top: -50%; background: #4267b2; box-shadow: 0px 0px 20px #4267b2; animation: shake-right-up-to-left-down 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-right-4 { right: 39%; top: -85%; } } .icons-right-5 { right: 5%; top: 30%; background: #fff; box-shadow: 0px 0px 20px #b2b2b2; animation: shake-right-to-left 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-right-5 { right: 0%; top: -80%; } } .icons-right-6 { right: 10%; top: 110%; background: #ffa500; box-shadow: 0px 4px 20px #ffa500; animation: shake-right-down-to-left-up 2s ease-in-out infinite; } @media (max-width: 800px) { .icons-right-6 { right: 5%; top: 140%; } } /* shaker frames */ @keyframes shake-left-up-to-right-down { 0% { transform: translate(-3px, -3px); } 50% { transform: translate(3px, 3px); } 100% { transform: translate(-3px, -3px); } } @keyframes shake-right-up-to-left-down { 0% { transform: translate(3px, -3px); } 50% { transform: translate(-3px, 3px); } 100% { transform: translate(3px, -3px); } } @keyframes shake-left-to-right { 0% { transform: translateX(0); } 50% { transform: translateX(6px); } 100% { transform: translateX(0); } } @keyframes shake-right-to-left { 0% { transform: translateX(0); } 50% { transform: translateX(-6px); } 100% { transform: translateX(0); } } @keyframes shake-right-down-to-left-up { 0% { transform: translate(3px, 3px); } 50% { transform: translate(-3px, -3px); } 100% { transform: translate(3px, 3px); } } @keyframes shake-left-down-to-right-up { 0% { transform: translate(-3px, 3px); } 50% { transform: translate(3px, -3px); } 100% { transform: translate(-3px, 3px); } } /* ----------------------------- RANDOMLY ICONS PART RENEWED ENDS -------------------------------- */ /* ------------------------------- SIGN IN 360 ROTATE BIRD FERRIES ------------------------------- */ @keyframes dondur { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotate-360 { animation: dondur 100s linear infinite; } .saydamlik-sign-in:before { content: ""; width: 930px; height: 80px; position: absolute; bottom: 0; background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%); z-index: 999; } @media (max-width: 991px) { .responsive-img-edits { height: 500px; } } @media (max-width: 800px) { .responsive-img-edits { height: 450px; } } @media (max-width: 700px) { .responsive-img-edits { height: 350px; } } @media (max-width: 600px) { .responsive-img-edits { height: 300px; } } @media (max-width: 500px) { .responsive-img-edits { height: 220px; } } .responsive-img-edits-icons { height: 500px; overflow: hidden; position: relative; z-index: 99; display: flex; justify-content: center; flex-wrap: wrap } @media (max-width: 991px) { .icons-360-image { width: 100%; } .responsive-img-edits-icons { height: 400px; width: 100%; overflow: hidden; z-index: 99; } } @media (max-width: 700px) { .icons-360-image { width: 100%; } .responsive-img-edits-icons { height: 350px; width: 100%; overflow: hidden; z-index: 99; } } @media (max-width: 600px) { .icons-360-image { width: 100%; } .responsive-img-edits-icons { height: 275px; width: 100%; overflow: hidden; z-index: 99; } } @media (max-width: 500px) { .icons-360-image { width: 100%; } .responsive-img-edits-icons { height: 200px; width: 100%; overflow: hidden; z-index: 99; } } /* ----------------- CUSTOMER VİDEO STARTS -------------------- */ @media (max-width: 991px) { .video-famous-sec { position: relative; top: -30px; } } .blue-tick { color: #029fe8; margin: 0px 15px 8px 15px; font-size: 20px; } .famous-pp { width: -webkit-fill-available; height: auto; border-radius: 50px; border: 1px solid #2a3f4e; } .famous-platforms { color: #c8c8c8; padding-right: 10px; font-size: 18px; } .famous-platforms:hover { color: #fff; transform: scale(1.2); } .famous-category { color: #c8c8c8; } /* ------------------------------------------------ */ /* ---------------- Landing Page Style ----------- */ /* ------------------------------------------------ */ /* welcoming section */ .landing-main-title { font-size: 30px; font-weight: 700; text-align: center; } @media only screen and (min-width: 991px) { .landing-main-title { font-size: 48px; } } .landing-main-title span { color: #ff5000; text-shadow:0px 0px 7px #ff50004d; position: relative; background: #ff5000; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .landing-subtitle { font-size: 14px; padding-bottom: 0; margin-bottom: 0; text-align: center; } @media only screen and (min-width: 991px) { .landing-subtitle { font-size: 18px; margin: auto; max-width: 800px; } } .landing-welcome-video-img { border-radius: 25px; box-shadow: 0 0px 30px #ff50009e; border: 2px solid #ff5000b0; } @media (max-width: 991px) { .landing-welcome-video-img { box-shadow: 0px 0px 5px #ff5000; } } .landing-number-animate-box { color: #fff; align-items: center; } .animated-number-style { font-size: 25px; font-weight: 600; } .animated-number-text-style { font-size: 20px; font-weight: 600; } @media (max-width: 991px) { .animated-number-text-style { font-size: 20px; font-weight: 600; } } /* Priced services in boxes */ /* Orta container */ .qnt-main { width: 100%; margin: auto; } @media (min-width: 992px) { .qnt-main { max-width: 800px; } } .qnt-card { background: #fff; border-radius: 20px; padding: 10px; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); } @media (max-width: 992px) { .qnt-card { padding: 10px; } } /* Paket grid */ .quantity-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 768px) { .quantity-boxes { grid-template-columns: repeat(3, 1fr); } } /* Paket kartı */ .edition { position: relative; border-radius: 20px; padding: 6px 0; text-align: center; transition: .25s; cursor: pointer; overflow: hidden; background: #fff; border: 1px solid #d3d3d3; color: #080808; } @media (min-width: 991px) { .edition:hover { box-shadow: 0 2px 4px #d7d7d7; transform: translateY(-2px); } } /* Selected */ /* selected package */ .edition.active{ border: 2px solid #ff5000; } /* check icon */ .edition.active::after{ content:"✓"; position:absolute; top:8px; right: 8px; width:18px; height:18px; border-radius:50%; background:#ff5000; color:#fff; font-size: 13px; font-weight:700; display:flex; align-items:center; justify-content:center; } .mother-part { color: #080808; } .mother-quantity { font-size: 19px; font-weight: 700; } .service-discount { font-size: 12px; color: #ff5000; font-weight: 600; } /* Fiyat kutusu */ .price-box { padding: 20px 20px 15px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; background: #ffffff; border-radius: 20px; border: 2px solid #ff5000ba; position: relative; overflow: hidden; } @media (max-width: 768px) { .price-box { margin-top: 12px; padding: 15px } } .old-price { text-decoration: line-through; color: #9ca3af; font-size: 18px; } .ribbon { position:absolute; top:30px; right:-67px; color:#fff; font-weight:700; font-size:13px; padding:6px 60px; transform:rotate(45deg); letter-spacing:.5px; text-transform:uppercase; background: #ff5000; } .new-price { font-size: 42px; font-weight: 600; color: #ff5000; margin: 10px 0 10px; } .btn-add-cart { background: #ff5000; border: none; padding: 14px; border-radius: 14px; color: #000; font-weight: 700; transition: .2s; } .btn-add-cart:hover { transform: scale(1.03); } .save-text { margin-top: 10px; color: #ff5000; font-weight: 600; } /* ============================= */ /* REVIEWS SECTION DESKTOP */ /* ============================= */ .reviews-section{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; height:800px; overflow:hidden; position:relative; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 15%, black 85%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 15%, black 85%, transparent 100% ); } .reviews-col{ position:relative; } .reviews-track{ display:flex; flex-direction:column; gap:15px; animation:scrollReviews 25s linear infinite; will-change:transform; } .reviews-col.reverse .reviews-track{ animation-direction:reverse; } @keyframes scrollReviews{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } } /* buton desktopta görünmesin */ .reviews-more-overlay{ display:none; } /* ============================= */ /* REVIEWS SECTION MOBILE */ /* ============================= */ @media (max-width:768px){ .reviews-section{ grid-template-columns:1fr; height:auto; -webkit-mask-image:none; mask-image:none; } /* sadece ilk kolon görünür */ .reviews-col:nth-child(2), .reviews-col:nth-child(3){ display:none; } /* see more açılınca hepsi görünür */ .reviews-section.expanded .reviews-col{ display:flex; } /* mobilde infinite scroll kapalı */ .reviews-track{ animation:none; transform:none; } /* fade overlay */ .reviews-section::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient( to bottom, rgba(28,30,43,0), #fff ); pointer-events:none; } /* see more text */ .reviews-more-overlay{ display: block; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-weight: 600; color: #fff; cursor: pointer; z-index: 2; font-size: 14px; letter-spacing: .5px; background: rgba(0, 0, 0, .35); padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(4px); } /* açılınca overlay kaybolsun */ .reviews-section.expanded::after{ display:none; } .reviews-section.expanded .reviews-more-overlay{ position:relative; bottom:auto; left:auto; transform:none; display:block; margin: auto ; width:max-content; } } /* Review Card Design */ .review-card{ width:100%; } .comment-inner{ display:flex; gap:15px; align-items:center; } .review-modern{ border-radius:30px; padding:24px; max-width:500px; } .rev-color-1 { background: #ff500012; } .rev-color-2 { background: #ff50002b; } .rev-color-3 { background: #ff50004f; } /* HEADER */ .review-header{ display:flex; align-items:center; gap:15px; } .review-avatar{ width:55px; height:55px; border-radius:50%; object-fit:cover; } .review-name{ font-weight:600; font-size:15px; } .verified{ color: #ff5000; margin-left:5px; } .review-stars{ margin-left:auto; } .comment-stars { font-size: 12px; color: #ff5000; } /* TEXT */ .review-text{ margin-top: 20px; font-size: 14px; line-height: 1.6; color: #2e2e2e; } /* IMAGE */ .review-image{ margin-top:25px; } .review-image img{ width:100%; border-radius:25px; display:block; } .review-avatar, .review-image img { filter: brightness(1.1); } /* TAGS */ .review-tags{ display:flex; gap:12px; margin-top:20px; } .review-tags span{ background: #ffffff82; border: 1px solid #ffffffa6; padding:8px 14px; border-radius:20px; font-size:10px; font-weight:600; } /* landing page how to use part's timeline*/ .land-howto { padding-bottom: 40px; } .landing-video-call { margin: auto; } @media (min-width: 991px) { .landing-video-call { width: 80%; margin: auto; } } /* --------- BADGE SECTION --------------*/ .badges-section { background: none; } .badge-slider { overflow: hidden; -webkit-mask-image: linear-gradient( to right, transparent 0%, black 30%, black 70%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 30%, black 70%, transparent 100% ); } .badge-track{ display:flex; gap:80px; width:max-content; animation:badgeScroll 25s linear infinite; } .badge-track img{ width:105px; height:auto; } @keyframes badgeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* --------- Seo Texts Parts --------------*/ .informative-sections { width: 100%; margin: auto; border-radius: 20px; padding: 25px; margin-bottom: 1rem; max-height: 350px; overflow: hidden; position: relative; transition: max-height .4s ease; } /* Fade */ .informative-sections::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(28, 30, 43, 0), rgb(255 255 255)); transition: opacity .3s ease; } /* Read More text */ .read-more-overlay{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-weight:600; color:#fff; cursor:pointer; z-index:2; font-size:14px; letter-spacing:.5px; background:rgba(0,0,0,.35); padding:6px 14px; border-radius:20px; backdrop-filter: blur(4px); } /* Expanded */ .informative-sections.expanded { max-height: 15000px; } .informative-sections.expanded::after { opacity: 0; } .informative-sections.expanded .read-more-overlay{ position: relative; bottom: auto; margin-top: 20px; text-align: center; width: fit-content; } .scroll-boxes-left { height: fit-content; text-align: left; font-size: 14px; padding: .5rem; color: #080808; } @media only screen and (min-width: 991px) { .scroll-boxes-left { padding: 25px 50px 25px 0 !important } } .scroll-boxes-right { height: fit-content; text-align: left; font-size: 14px; padding: .5rem; color: #080808; } @media (min-width: 991px) { .scroll-boxes-right { padding: 25px 0px 25px 50px !important } } .seo-title-h2 { color: #ff5000; text-align: center; font-weight: bold; font-size: 30px; line-height: 40px; letter-spacing: -0.04em; } @media (min-width: 991px) { .seo-title-h2 { padding: 0 30px; } } .scroll-boxes-left h3, .scroll-boxes-right h3 { color: #ff5000; font-size: 22px; text-align: center; } @media (min-width: 991px) { .scroll-boxes-left h3, .scroll-boxes-right h3 { text-align: left; } } /*----- advantages of smm.ist part ----*/ .aq .aq-item:last-child{ margin-bottom:80px; } .faq-wrapper{ position:relative; max-height:300px; overflow:hidden; transition:max-height .6s cubic-bezier(.4,0,.2,1); } /* expanded */ .faq-wrapper.expanded{ max-height: 5000px; } /* fade */ .faq-overlay{ position:absolute; bottom:0; left:0; right:0; height:120px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:15px; background:linear-gradient( to bottom, rgba(20,22,35,0), #fff ); cursor:pointer; transition:opacity .3s ease; } .faq-more-text{ font-weight: 600; color: #fff; cursor: pointer; z-index: 2; font-size: 14px; letter-spacing: .5px; background: rgba(0, 0, 0, .35); padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(4px); } .faq-more-text{ transition:transform .25s ease; } .faq-overlay:hover .faq-more-text{ transform:translateY(-3px); } /* ----- Free Trial Sections ------ */ .direction-section { padding: 15px; } @media (max-width: 991px) { .direction-section { padding: 20px 0; } } .direction-trial-part-box { margin: auto; text-align: center; align-items: center; justify-content: center; } .direction-paymet { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .direction-paymet img { width: 40px; height: 40px; object-fit: contain; filter: brightness(1.1); padding: 3px; border-radius: 99px; border: 1px solid #d1d1d1; } @media (min-width: 991px) { .direction-paymet img { width: 50px; height: 50px; padding: 4px; border-radius: 999px; } } .live-notification { width: 100%; max-width: 520px; margin: 20px auto; background: #ff50000d; border: 2px solid #ff50001c; border-radius: 20px; padding: 12px 16px; position: relative; overflow: hidden; height: 50px; } /* ortak yapı */ .notif-inner { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; } /* giriş animasyonu */ .enter { animation: slideIn 0.7s ease forwards; } /* çıkış animasyonu */ .exit { animation: slideOut 0.3s ease forwards; } @keyframes slideIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } /* canlı nokta */ .live-dot { width: 10px; height: 10px; background: #ff5000; border-radius: 50%; box-shadow: 0 0 0 6px #ff50000d; } /* metin */ .notif-text { font-size: 14px; color: #ff5000; } /* sağ taraf */ .notif-right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #ff5000; font-weight: 600; } .check-icon { width: 20px; height: 20px; border-radius: 50%; background: #ff500030; font-size: 10px; color: #ff5000; display: flex; align-items: center; justify-content: center; font-weight: 700; } .time-text { font-size: 14px; opacity: 0.8; } .get-free-btn { background: none; border: none; color: #ff5000; padding-top: 15px; font-size: 16px; font-weight: 400; } .free-trial-timer { display: none; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); background: #fff; color: #080808; border-radius: 15px; align-items: center; text-align: center; } .free-trial-input { display: none; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); background: #fff; color: #080808; border-radius: 15px; align-items: center; text-align: center; flex-direction: column; } .free-trial-completed { display: none; border: 1px solid rgba(0, 0, 0, .125); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); background: #fff; color: #080808; border-radius: 15px; align-items: center; text-align: center; font-weight: 500; flex-wrap: wrap; } .directions-final-box { color: #fff; align-items: center; } .directions-final-top { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; } .directions-final-top-icons { font-size: 15px; color: #ffa500; } .directions-final-top-img img { --border-width: 3px; position: relative; display: inline-block; width: calc(35px + var(--border-width)); height: calc(35px + var(--border-width)); border-radius: 100%; overflow: hidden; border: var(--border-width) solid #fff; } .directions-final-top-img > img:not(:first-child) { margin-left: calc(-1 * (10px + var(--border-width))); } .directions-final-bottom { font-size: 15px; } /* ------ Free Trial Count Down Style ------*/ .count-down { width: 10em; height: 10em; } .count-down__number { font-size: 14.5pc; font-family: "Source Sans Pro", Helvetica; font-weight: bold; fill: white; } .count-down__progress { stroke: #c82b00; stroke-width: 16; fill: transparent; stroke-dasharray: 78.5em; stroke-dashoffset: 78.5em; animation: progressAnimation 1s; animation-iteration-count: infinite; animation-direction: reverse; animation-fill-mode: forward; animation-timing-function: ease-in-out; transform: rotate(-90deg); transform-origin: center center; } .count-down__progress-background { stroke: none; stroke-width: 0; fill: #ff3d3a; } @keyframes progressAnimation { 0% { stroke-dashoffset: 78.5em; } 100% { stroke-dashoffset: 0; } } /* Provider Landings Start */ .proland-btn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; justify-items: center; } /* Küçük tablet */ @media (min-width: 576px) { .proland-btn { grid-template-columns: repeat(3, 1fr); } } /* Laptop */ @media (min-width: 992px) { .proland-btn { grid-template-columns: repeat(5, 1fr); } } .proland-ser { display: flex; flex-wrap: wrap; } .provider-services-box { padding: 15px; max-width: 180px; border-radius: 15px; transform: scale(1); transition: transform 0.3s ease-in-out; background: linear-gradient(135deg, #1a1a1a63 0%, #252c3b 100%); border: 2px solid rgb(255 255 255 / 6%); box-shadow: 0 8px 32px rgb(0 0 0 / 65%); } .provider-services-box a { display: flex; flex-direction: column; gap: 15px; } .provider-services-box:hover { transform: scale(0.9); background-color: #5b6a8d; transition: transform 0.3s ease-in-out; } .provider-services-box-icon-box { display: flex; justify-content: center; align-items: center; } .provider-services-box-icon { color: #ff5000; font-size: 30px; display: flex !important; width: 80px; height: 55px; border-radius: 50px; background: #ffffff14; justify-content: center; align-items: center; } .provider-services-box-text { text-align: center; font-size: 16px; font-weight: 600; color: #ffffff; } .directions-buttons { width: 85%; } .provider-to-landing-button { padding: 15px; } .seo-table { border: 1px solid #818181; padding: 30px 20px 0px 20px; border-radius: 20px; background: #ebebeb29; } /* ------------------------- Landing page specific styles ----------------------------*/ .info-image-box { display: flex; justify-content:center; align-items: center; height: 100%; } @media (max-width: 991px) { .info-image-box { padding: 15px 60px; } } .informative-image { width: 100%; border-radius: 25px; } .full-width { width: 100%; } .centered-text { text-align: center; } /* ------------------------- Common Row Styles ----------------------------*/ .hero-row { /* Row styling for hero section */ } .advantages-row, .directions-step-row, .advantages-row-auto, .howto-row-auto { width: 100%; margin: auto; } /* ------------------------- Spacing Utilities ----------------------------*/ /* Additional comprehensive CSS classes for removing all inline styles */ /* Row styling with auto width and margin */ .row-auto-width-margin { width: 100%; margin: auto; } /* Image styling with border radius */ .image-full-width-rounded { width: 100%; border-radius: 25px; } /* Landing page Whatsapp provider */ .attention-notice { background: #ff070761; } .attention-notice { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); color: white; padding: 10px 15px; border-radius: 8px; font-weight: 600; text-align: center; margin: 10px 0; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); } /* Updates Page Styles */ .updates-filter-button { padding: var(--spacing-md); } /* ========================= PAYMENT METHODS – 3D FLIP ========================= */ .payment-box { background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%); border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); position: relative; } /* GRID */ .payment-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; padding: 0; margin: 0 auto; align-items: start; } @media (max-width: 480px) { .payment-grid { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; padding: 0; } } /* CARD */ .payment-card { perspective: 1000px; height: 150px; width: 100%; cursor: pointer; position: relative; contain: layout; } /* INNER (ROTATING ELEMENT) */ .payment-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: center; transition: transform 0.7s cubic-bezier(.4,.2,.2,1); } /* FLIP ON HOVER */ .payment-card:hover .payment-card-inner { transform: rotateY(180deg); } /* ACCESSIBILITY */ .payment-card:focus-within .payment-card-inner { transform: rotateY(180deg); } /* FRONT & BACK */ .payment-card-front, .payment-card-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 20px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; overflow: hidden; } /* FRONT */ .payment-card-front { background: #ffffff; box-shadow: 0 0px 15px 0 rgb(0 0 0 / 10%); border: 1px solid rgba(0, 0, 0, .125); } /* BACK */ .payment-card-back { background: linear-gradient(90deg, #ff5000 0%, #ff9a5f 100%); box-shadow: 0 8px 32px #ff500066; transform: rotateY(180deg); } /* ICON */ .payment-icon-wrapper { width: 90px; height: 90px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 1rem; transition: transform 0.4s ease; } .payment-card:hover .payment-icon-wrapper { transform: scale(1.05); } .payment-icon { width: 70px; height: 70px; object-fit: contain; filter: brightness(1.1); } /* TEXT */ .payment-name { color: #fff; font-size: clamp(0.9rem, 2vw, 1.1rem); font-weight: 600; letter-spacing: 0.5px; padding: 1rem; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* ========================= PAYMENT METHODS – 3D FLIP ========================= */ {# HOW TO USE 724sosyal.com ENDS #} {# PAYMENT METHODS SECTION START #}

Güvenli Ödeme Yöntemleri

Bank Transfer Payment Option
Bank Transfer
Qris Payment Option
Qris
Dana Payment Option
Dana
GoPay Payment Option
GoPay
ShopeePay Payment Option
ShopeePay
Crypto Payment Option
Crypto
Binance Payment Option
Binance Pay
Apple Pay Payment Option
Apple Pay
Google Pay Payment Option
Google Pay
{# PAYMENT METHODS SECTION END #} {# WHY SMMIST BEST SECTION STARTS #}

Neden 724Sosyal En İyi Tercih?

Uygun Fiyat
Her bütçeye uygun sosyal medya hizmetleri
Efektif Servisler
Hızlı, güvenli ve kaliteli sosyal medya hizmetleri
7/24 Destek
7/24 Aktif müşteri destek ekibi hizmetinizde
{# WHY SMMIST BEST SECTION ENDS #} {# TRUST BADGES START #}

Sektörde Ödüllü Platform

{# TRUST BADGES ENDS #} {# SOCIAL MEDIA ICONS SECTION START #}
{# LEFT SIDE ICONS START #}
{# LEFT SIDE ICONS END #} {# RIGHT SIDE ICONS START #}

724sosyal.com
No 1 SMM Panel

Hemen Üye Ol
{# RIGHT SIDE ICONS END #} {# MOBILE ICONS START #}
{# MOBILE ICONS END #}
{# .container #} {# MAIN APP CONTENT CONTAINER END #} {# BLOGS SECTION STARTS #}

Sosyal Medya İpuçları ve Rehberleri

{# BLOGS SECTION ENDS #} {# SIGN IN PAGE CONTENT END #}