/**
* Influencer Hive - Centralized Frontend Stylesheet
* Global Font Family: "Poppins", sans-serif (Exclusively applied across all pages)
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap');
*, *::before, *::after,
html, body, p, h1, h2, h3, h4, h5, h6,
span, a, div, button, input, select, textarea, label {
font-family: 'Poppins', sans-serif !important;
}
:root {
/* Strict 4-Color System: #E00243, White, Black, Professional Slate */
--main-color: #E00243;
--primary-color: #E00243;
--primary-hover: #c00239;
--black-color: #0f172a;
--dark-color: #0f172a;
--white-color: #ffffff;
--text-color: #475569;
--slate-color: #475569;
--secondary-color: #475569;
--border-color: #e2e8f0;
}
/* ==========================================================================
Standardized Tag Font Sizes Across ALL Pages (Strict <= 30px Global Rule)
Every section font size is identical for matching HTML tags
========================================================================== */
h1, .h1, .fs-1, .text-5xl, .text-6xl, .text-4xl, .display-1, .display-2, .display-3,
.hive-platform-hero-title, .hive-state-hero-title, .hero-platforms h1, .svc-hero h1, .sol-hero h1 {
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
margin-top: 0;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
h2, .h2, .fs-2, .text-3xl, .display-4, .display-5, .display-6,
.hive-section-title, .section-title {
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin-top: 0;
margin-bottom: 0.75rem;
letter-spacing: -0.015em;
}
h3, .h3, .fs-3, .text-2xl,
.hive-format-title, .hive-niche-title, .hive-tier-title, .hive-reach-hub-title, .hive-playbook-title {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin-top: 0;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
h4, .h4, .fs-4, .text-xl {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin-top: 0;
margin-bottom: 0.4rem;
}
h5, .h5, .fs-5, .text-lg {
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-top: 0;
margin-bottom: 0.35rem;
}
h6, .h6, .fs-6 {
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.45 !important;
margin-top: 0;
margin-bottom: 0.25rem;
}
p, .paragraph, .text-base {
font-size: 0.9375rem !important;
color: var(--text-color);
line-height: 1.65 !important;
margin-bottom: 1rem;
}
small, .small, .text-sm {
font-size: 0.8125rem !important;
line-height: 1.5 !important;
}
.text-xs {
font-size: 0.75rem !important;
line-height: 1.4 !important;
}
/* Standardized Component Font Sizes Across ALL Pages */
.btn, button.btn, a.btn {
font-size: 0.875rem !important;
font-weight: 600 !important;
}
.btn-lg {
font-size: 1rem !important;
}
.btn-sm {
font-size: 0.8125rem !important;
}
.form-control, .form-select, input, select, textarea {
font-size: 0.9375rem !important;
}
label, .form-label {
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: var(--black-color);
}
.badge {
font-size: 0.75rem !important;
font-weight: 600 !important;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--white-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--black-color);
font-weight: 700;
}
p {
font-family: 'Poppins', sans-serif;
}
/* Navbar improvements */
.navbar {
transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}
.sticky-top {
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
}
.navbar-brand img {
height: 40px;
width: auto;
}
.navbar-nav .nav-link {
position: relative;
font-weight: 500;
color: var(--text-color);
padding: .5rem .75rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: var(--main-color);
}
.navbar-nav .nav-link.active {
color: var(--main-color);
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
left: .5rem;
right: .5rem;
bottom: 0.25rem;
height: 2px;
background-color: var(--main-color);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after,
.navbar-nav .nav-link.active::after {
transform: scaleX(1);
}
/* Custom Platform Dropdown */
.platform-dropdown {
min-width: 900px;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
margin-top: 20px !important;
}
.platform-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-bottom: 0;
}
.platform-item {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 10px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-weight: 500;
font-size: 14px;
transition: all 0.3s ease;
background-color: #fff;
min-height: 70px;
}
.platform-item:hover {
border-color: var(--main-color);
color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
text-decoration: none;
}
.platform-item i {
font-size: 20px;
margin-right: 8px;
}
/* Platform specific colors */
.platform-item.instagram:hover {
border-color: #E4405F;
color: #E4405F;
}
.platform-item.facebook:hover {
border-color: #1877F2;
color: #1877F2;
}
.platform-item.youtube:hover {
border-color: #FF0000;
color: #FF0000;
}
.platform-item.linkedin:hover {
border-color: #0A66C2;
color: #0A66C2;
}
.platform-item.telegram:hover {
border-color: #0088CC;
color: #0088CC;
}
/* Button theming */
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--main-color);
--bs-btn-border-color: var(--main-color);
--bs-btn-hover-bg: #c0023d;
--bs-btn-hover-border-color: #c0023d;
--bs-btn-active-bg: #a70134;
--bs-btn-active-border-color: #a70134;
--bs-btn-disabled-bg: var(--main-color);
--bs-btn-disabled-border-color: var(--main-color);
}
.btn-outline-primary {
--bs-btn-color: var(--main-color);
--bs-btn-border-color: var(--main-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--main-color);
--bs-btn-hover-border-color: var(--main-color);
--bs-btn-active-bg: #a70134;
--bs-btn-active-border-color: #a70134;
}
/* Focus styles */
.navbar .nav-link:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
box-shadow: none;
}
/* Logo styling */
.navbar-brand {
font-weight: 700;
color: var(--black-color);
font-size: 1.5rem;
}
.logo-text {
color: var(--main-color);
background-color: var(--main-color);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 1rem;
margin-left: 5px;
}
/* Solutions Dropdown Styles */
.solutions-dropdown-menu {
min-width: 1000px;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
margin-top: 20px !important;
}
.solutions-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.solutions-section .solutions-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-bottom: 15px;
}
.solution-item {
padding: 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-size: 14px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
}
.solution-item:hover {
border-color: var(--main-color);
color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
text-decoration: none;
}
.section-title {
color: var(--main-color);
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
.industry-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
}
.industry-item {
padding: 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-size: 14px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
}
.industry-item:hover {
border-color: var(--main-color);
color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
text-decoration: none;
}
/* Locations Dropdown Styles */
.locations-dropdown-menu {
min-width: 1000px;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
margin-top: 20px !important;
}
.locations-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.locations-main-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.location-state {
padding: 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-size: 14px;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
}
.location-state:hover,
.location-state.active {
border-color: var(--main-color);
color: var(--main-color);
text-decoration: none;
}
.location-state.active::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--main-color);
}
.location-state.active {
position: relative;
}
.locations-cities {
display: flex;
flex-direction: column;
gap: 12px;
}
.cities-row {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.city-item {
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
text-decoration: none;
color: var(--text-color);
font-size: 13px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
.city-item:hover {
border-color: var(--main-color);
color: var(--main-color);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(224, 2, 67, 0.2);
text-decoration: none;
}
/* Resources Dropdown Styles */
.resources-dropdown-menu {
min-width: 400px;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
margin-top: 20px !important;
}
.resources-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.resource-item {
padding: 15px 20px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-size: 14px;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.resource-item:hover {
border-color: var(--main-color);
color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
text-decoration: none;
}
/* Company Dropdown Styles */
.company-dropdown-menu {
min-width: 400px;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
margin-top: 20px !important;
}
.company-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.company-item {
padding: 15px 20px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-size: 14px;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.company-item:hover {
border-color: var(--main-color);
color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
text-decoration: none;
}
/* Services Dropdown Styles */
.services-dropdown-menu {
min-width: 1200px;
padding: 20px;
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
margin-top: 20px !important;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.service-content {
text-align: left;
}
.platform-name {
display: block;
font-weight: 600;
font-size: 16px;
margin-bottom: 15px;
color: var(--black-color);
}
.service-types {
/* display: flex; */
flex-direction: column;
gap: 8px;
}
.services-column{
padding: 20px 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-decoration: none;
}
.service-type {
display: block;
padding: 8px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
background-color: #f8fafc;
transition: all 0.2s ease;
margin-bottom: 5px;
text-decoration: none;
color: var(--main-color);
}
.service-platform-item:hover .service-type {
border-color: var(--main-color);
background-color: rgba(224, 2, 67, 0.05);
}
/* Platform specific colors for services */
.service-platform-item:hover .platform-name {
color: var(--main-color);
}
.services-column:nth-child(1) .service-platform-item:hover i,
.services-column:nth-child(1) .service-platform-item:hover .platform-name {
color: #E4405F;
}
.services-column:nth-child(2) .service-platform-item:hover i,
.services-column:nth-child(2) .service-platform-item:hover .platform-name {
color: #1877F2;
}
.services-column:nth-child(3) .service-platform-item:hover i,
.services-column:nth-child(3) .service-platform-item:hover .platform-name {
color: #FF0000;
}
.services-column:nth-child(4) .service-platform-item:hover i,
.services-column:nth-child(4) .service-platform-item:hover .platform-name {
color: #0A66C2;
}
.services-column:nth-child(5) .service-platform-item:hover i,
.services-column:nth-child(5) .service-platform-item:hover .platform-name {
color: #0088CC;
}
/* Responsive adjustments */
@media (min-width: 992px) {
.platform-dropdown {
position: absolute;
top: 100% !important;
left: 300px !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.services-dropdown-menu {
position: absolute;
top: 100% !important;
left: 240px !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.solutions-dropdown-menu {
position: absolute;
top: 100% !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.locations-dropdown-menu {
position: absolute;
top: 100% !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.resources-dropdown-menu {
position: absolute;
top: 100% !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
.company-dropdown-menu {
position: absolute;
top: 100% !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
}
}
@media (max-width: 768px) {
.platform-dropdown {
min-width: 90vw;
padding: 15px;
}
.platform-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.platform-item {
padding: 12px 8px;
font-size: 12px;
min-height: 60px;
}
.platform-item i {
font-size: 16px;
margin-right: 6px;
}
/* Services dropdown responsive */
.services-dropdown-menu {
min-width: 90vw;
padding: 15px;
}
.services-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.service-platform-item {
padding: 15px 10px;
min-height: 160px;
}
.service-platform-item i {
font-size: 20px;
margin-bottom: 10px;
}
.platform-name {
font-size: 14px;
margin-bottom: 10px;
}
.service-type {
padding: 6px 8px;
font-size: 11px;
}
/* Solutions dropdown responsive */
.solutions-dropdown-menu {
min-width: 90vw;
padding: 15px;
}
.solutions-section .solutions-row {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.industry-row {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.solution-item,
.industry-item {
padding: 10px 12px;
font-size: 12px;
min-height: 40px;
}
/* Locations dropdown responsive */
.locations-dropdown-menu {
min-width: 90vw;
padding: 15px;
}
.locations-main-row {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.cities-row {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.location-state {
padding: 10px 12px;
font-size: 12px;
min-height: 40px;
}
.city-item {
padding: 8px 10px;
font-size: 11px;
min-height: 35px;
}
/* Resources dropdown responsive */
.resources-dropdown-menu {
min-width: 90vw;
padding: 15px;
}
.resources-content {
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
.resource-item {
padding: 12px 15px;
font-size: 12px;
min-height: 50px;
}
/* Company dropdown responsive */
.company-dropdown-menu {
min-width: 90vw;
padding: 15px;
}
.company-content {
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
.company-item {
padding: 12px 15px;
font-size: 12px;
min-height: 50px;
}
}
;
/* Services dropdown responsive */
.services-dropdown-menu {
min-width: 90vw;
padding: 15px;
}
.services-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.service-platform-item {
padding: 15px 10px;
min-height: 160px;
}
.service-platform-item i {
font-size: 20px;
margin-bottom: 10px;
}
.platform-name {
font-size: 14px;
margin-bottom: 10px;
}
.service-type {
padding: 15px 12px;
font-size: 14px;
}
/* --------------------hero section start here---------------- */
.hero-section {
padding: 60px 20px;
max-width: 1400px;
margin: 0 auto;
}
.banner-media{
height: 750px;
object-fit: cover;
}
.main-title {
font-size: 42px;
font-weight: 900;
line-height: 1.2;
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: -1px;
}
.hero-section .highlight {
color: var(--main-color);
font-weight: 700 !important;
}
.hero-section .subtitle {
text-align: center;
font-size: 16px;
line-height: 1.6;
margin-bottom: 50px;
color: #303030;
/* max-width: 900px; */
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 40px;
}
.service-card {
position: relative;
padding: 40px 30px;
min-height: 400px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0.3;
z-index: 0;
}
.service-card>* {
position: relative;
z-index: 1;
}
.creator {
background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);
}
.creator::before {
background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=400&fit=crop');
}
.content-ideation {
background: linear-gradient(135deg, var(--main-color) 0%, #ff2e63 100%);
}
.distribution {
background: linear-gradient(135deg, #424242 0%, #303030 100%);
}
.distribution::before {
background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=400&fit=crop');
}
.measurement {
background: linear-gradient(135deg, var(--main-color) 0%, #ff2e63 100%);
}
.service-title {
font-size: 28px;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 20px;
line-height: 1.1;
letter-spacing: -0.5px;
}
.service-description {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
/* margin-top: auto; */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
.stagger-animation .service-card:nth-child(1) {
animation: fadeIn 0.8s ease-out 0.1s forwards;
opacity: 0;
}
.stagger-animation .service-card:nth-child(2) {
animation: fadeIn 0.8s ease-out 0.2s forwards;
opacity: 0;
}
.stagger-animation .service-card:nth-child(3) {
animation: fadeIn 0.8s ease-out 0.3s forwards;
opacity: 0;
}
.stagger-animation .service-card:nth-child(4) {
animation: fadeIn 0.8s ease-out 0.4s forwards;
opacity: 0;
}
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.main-title {
font-size: 32px;
}
.services-grid {
grid-template-columns: 1fr;
}
.service-card {
min-height: 300px;
padding: 30px 25px;
}
.service-title {
font-size: 24px;
}
}
/* ================feature list start here================== */
.feature-section {
padding: 60px 0 0;
}
.feature-section .main-title {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-bottom: 5rem;
line-height: 1.2;
}
.feature-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 2rem;
line-height: 1.2;
}
.highlight-text {
color: var(--main-color);
}
.feature-description {
color: #6c757d;
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2.5rem;
}
.explore-btn {
background-color: var(--main-color);
border: none;
color: white;
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.explore-btn:hover {
background-color: #c0023d;
color: white;
transform: translateY(-2px);
}
/* Manage Campaigns Styles */
/* ================feature list end here================== */
/* ================payment ection start here================== */
.payments-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.payments-section .section-title {
font-size: 3.2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 2rem;
line-height: 1.1;
}
.highlight-text {
color: var(--main-color);
}
.section-description {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 3rem;
max-width: 90%;
}
.explore-btn {
background-color: var(--main-color);
border: none;
color: white;
padding: 15px 35px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(224, 2, 67, 0.3);
}
.explore-btn:hover {
background-color: #c0023d;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(224, 2, 67, 0.4);
}
/* ================payment ection end here================== */
/* ----------------hero section start here--------------- */
/* Video Carousel Section Styles */
.video-carousel-section {
position: relative;
min-height: 100vh;
overflow: hidden;
}
/* Video Background Styles */
.video-carousel-section .video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.video-carousel-section .video-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-carousel-section .video-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}
/* Carousel Container Styles */
.video-carousel-section .carousel-container {
position: relative;
z-index: 3;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.video-carousel-section .carousel {
/* max-width: 900px; */
width: 100%;
}
.video-carousel-section .carousel-item {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
/* Carousel Content Styles */
.video-carousel-section .carousel-content {
background: rgba(255, 255, 255, 0.95);
padding: 60px 40px;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
text-align: center;
backdrop-filter: blur(10px);
}
.video-carousel-section .carousel-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #2c3e50;
}
.video-carousel-section .carousel-content p {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
line-height: 1.6;
}
.video-carousel-section .carousel-content .btn {
padding: 12px 30px;
font-size: 1.1rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.video-carousel-section .carousel-content .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Carousel Controls Styles */
.video-carousel-section .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
}
.video-carousel-section .carousel-control-prev-icon,
.video-carousel-section .carousel-control-next-icon {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
padding: 30px;
}
/* Responsive Styles */
@media (max-width: 768px) {
.video-carousel-section .carousel-content {
padding: 40px 25px;
}
.video-carousel-section .carousel-content h2 {
font-size: 2rem;
}
.video-carousel-section .carousel-content p {
font-size: 1rem;
}
.video-carousel-section .carousel-item {
min-height: 400px;
}
}
/* ------------------our ups section start here---------- */
.usps-section {
background-color: #f8f9fa;
padding: 60px 0 0;
position: relative;
}
.usps-section .section-title {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-bottom: 1rem;
}
.usp-card {
background: white;
border-radius: 15px;
padding: 2.5rem 2rem;
height: 100%;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
position: relative;
transition: all 0.3s ease;
margin-bottom: 2rem;
}
.usp-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}
.icon-container {
width: 60px;
height: 60px;
background-color: #343a40;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.icon {
width: 24px;
height: 24px;
filter: invert(1);
}
.usp-title {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
line-height: 1.3;
}
.usp-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0;
}
.decorative-element {
position: absolute;
bottom: 20px;
right: 20px;
width: 80px;
height: 80px;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Chat Icon */
.icon-chat {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}
/* Money Icon */
.icon-money {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z'/%3E%3C/svg%3E");
}
/* Settings Icon */
.icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
}
/* Dashboard Icon */
.icon-dashboard {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}
.icon-container .icon {
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media (max-width: 768px) {
.section-title {
font-size: 2.5rem;
margin-bottom: 3rem;
}
.usp-card {
padding: 2rem 1.5rem;
margin-bottom: 1.5rem;
}
.usp-title {
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.section-title {
font-size: 2rem;
}
.usps-section {
padding: 60px 0 0;
}
}
/* ------------------our ups section start here---------- */
/* ------------------ai integration start here-------------------------- */
.ai-integration-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
position: relative;
}
.main-heading {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.main-description {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.sub-description {
color: #495057;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 2.5rem;
}
.explore-btn {
background-color: var(--main-color);
border: none;
color: white;
padding: 12px 30px;
font-size: 1rem;
font-weight: 500;
border-radius: 5px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.explore-btn:hover {
background-color: #c0023d;
color: white;
transform: translateY(-2px);
}
.feature-card {
background: white;
border-radius: 10px;
padding: 2rem;
height: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.feature-card.dark {
background: #2c3e50;
color: white;
}
.feature-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #2c3e50;
}
.feature-card.dark .feature-title {
color: white;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 0.95rem;
color: #495057;
}
.feature-card.dark .feature-item {
color: #e9ecef;
}
.feature-check {
width: 20px;
height: 20px;
background-color: var(--main-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.feature-check::after {
content: '✓';
color: white;
font-size: 12px;
font-weight: bold;
}
.read-more-btn {
border: 2px solid #6c757d;
background: transparent;
color: #6c757d;
padding: 10px 25px;
font-size: 0.9rem;
font-weight: 500;
border-radius: 5px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.read-more-btn:hover {
background-color: #6c757d;
color: white;
}
.feature-card.dark .read-more-btn {
border-color: white;
color: white;
}
.feature-card.dark .read-more-btn:hover {
background-color: white;
color: #2c3e50;
}
.carousel-indicators {
bottom: -50px;
}
.carousel-indicators [data-bs-target] {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #dee2e6;
border: none;
margin: 0 4px;
}
.carousel-indicators .active {
background-color: var(--main-color);
}
.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #dee2e6;
top: 50%;
transform: translateY(-50%);
}
.carousel-control-prev {
left: -60px;
}
.carousel-control-next {
right: -60px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background-color: white;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 16px;
height: 16px;
}
@media (max-width: 768px) {
.main-heading {
font-size: 2rem;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
}
.feature-card {
margin-bottom: 2rem;
}
}
/* ------------------ai integration end here-------------------------- */
/* ----------case study section start here--------------- */
.case-studies-section {
padding: 40px 0;
background: white;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 1rem 0px;
}
.case-studies-section .section-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}
/* ----------case study section end here--------------- */
/* --------------------MARKETING REPORTS TO EQUIP YOU------------------------ */
.marketing-reports-section {
background: linear-gradient(135deg, var(--main-color) 0%, #b8023a 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
color: white;
}
.marketing-reports-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M50 200c50-30 100 20 150-10s100-40 150-10 100 30 150 0 100-30 150 0 100 40 150 10 100-20 150 10' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.1'/%3E%3Cpath d='M0 400c60-25 120 15 180-5s120-35 180-5 120 25 180 0 120-25 180 0 120 35 180 5 120-15 180 5' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.1'/%3E%3Cpath d='M100 600c70-20 140 10 210-15s140-30 210-15 140 20 210 5 140-20 210 5 140 30 210 15 140-10 210 15' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.1'/%3E%3C/svg%3E") no-repeat center center;
background-size: cover;
opacity: 0.3;
}
.marketing-reports-section .section-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
}
.section-subtitle {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 2.5rem;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.2;
}
.view-all-btn {
background-color: white;
color: var(--main-color);
border: 2px solid white;
padding: 0.75rem 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
font-size: 0.9rem;
}
.view-all-btn:hover {
background-color: transparent;
color: white;
border-color: white;
}
.reports-container {
position: relative;
z-index: 2;
margin-top: 3rem;
}
.report-card {
background: white;
border-radius: 10px;
overflow: hidden;
height: 280px;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.report-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.report-card-1 {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}
.report-card-2 {
background: linear-gradient(135deg, var(--main-color) 0%, #b8023a 100%);
}
.report-card-3 {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.report-card-4 {
background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
}
.report-image {
position: absolute;
bottom: 0;
right: 0;
width: 120px;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.3;
}
.report-card-1 .report-image {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='20' y='30' width='80' height='100' rx='5' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M30 50h60v5H30zm0 15h50v5H30zm0 15h40v5H30z' fill='%2334495e'/%3E%3C/svg%3E");
}
.report-card-2 .report-image {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='15' y='20' width='90' height='110' rx='10' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='60' cy='70' r='20' fill='%23E00243'/%3E%3Cpath d='M40 100h40v5H40z' fill='%23b8023a'/%3E%3C/svg%3E");
}
.report-card-3 .report-image {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='10' y='25' width='100' height='100' rx='8' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M25 45h70v8H25zm0 20h60v8H25zm0 20h50v8H25z' fill='%231a1a2e'/%3E%3C/svg%3E");
}
.report-card-4 .report-image {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='18' y='22' width='84' height='106' rx='6' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M30 45h60v6H30zm0 18h45v6H30zm0 18h35v6H30z' fill='%2300bcd4'/%3E%3C/svg%3E");
}
.report-content {
padding: 2rem;
color: white;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 2;
}
.report-category {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
opacity: 0.9;
}
.report-title {
font-size: 1.4rem;
font-weight: 800;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.report-subtitle {
font-size: 0.85rem;
line-height: 1.4;
opacity: 0.9;
margin-bottom: auto;
}
.carousel-container {
position: relative;
}
.carousel-control-prev,
.carousel-control-next {
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.2);
border: 2px solid white;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.carousel-control-prev {
left: -70px;
}
.carousel-control-next {
right: -70px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background-color: white;
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
filter: invert(1);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
.section-title,
.section-subtitle {
font-size: 1.8rem;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
}
.report-card {
height: 250px;
margin-bottom: 1rem;
}
.report-content {
padding: 1.5rem;
}
.report-title {
font-size: 1.2rem;
}
}
/* --------------------MARKETING REPORTS TO EQUIP YOU------------------------ */
/* --------------------------------testimonial statrt here-------------- */
.testimonial-section {
background: white;
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.testimonial-title {
font-size: 3rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 3rem;
text-align: left;
}
.quote-icon {
font-size: 4rem;
color: var(--main-color);
margin-bottom: 1.5rem;
display: block;
}
.testimonial-text {
font-size: 1.125rem;
color: #4a5568;
line-height: 1.7;
margin-bottom: 2rem;
max-width: 500px;
min-height: 120px;
}
.rating {
margin-bottom: 1rem;
}
.star {
color: #fbbf24;
font-size: 1.25rem;
margin-right: 0.25rem;
}
.testimonial-author {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 1rem;
object-fit: cover;
}
.author-info h5 {
color: #1a1a1a;
font-weight: 600;
margin-bottom: 0.25rem;
font-size: 1rem;
}
.author-info p {
color: #718096;
font-size: 0.875rem;
margin: 0;
}
.join-btn {
background-color: var(--main-color);
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.join-btn:hover {
background-color: #c0023d;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.3);
}
.decorative-dots {
position: absolute;
right: 30%;
top: 60%;
width: 120px;
height: 60px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M10 10c10-5 20 5 30 0s20-5 30 0 20 5 30 0 20-5 30 0' stroke='%23e2e8f0' stroke-width='2' fill='none' stroke-dasharray='3,3'/%3E%3Ccircle cx='100' cy='15' r='8' fill='%23f7fafc' stroke='%23e2e8f0' stroke-width='2'/%3E%3Ccircle cx='105' cy='20' r='3' fill='%23e2e8f0'/%3E%3C/svg%3E") no-repeat;
opacity: 0.6;
}
.testimonial-images {
position: relative;
height: 400px;
}
.testimonial-img {
position: absolute;
border-radius: 15px;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.testimonial-img:hover {
transform: scale(1.02);
}
.img-1 {
top: 0;
right: 100px;
width: 200px;
height: 250px;
z-index: 3;
}
.img-2 {
top: 80px;
right: 0;
width: 180px;
height: 220px;
z-index: 2;
}
.img-3 {
top: 40px;
right: 200px;
width: 160px;
height: 200px;
z-index: 1;
}
.bg-circle-1 {
position: absolute;
top: -50px;
right: 50px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, rgba(229, 62, 62, 0.1) 0%, rgba(229, 62, 62, 0.05) 100%);
border-radius: 50%;
z-index: -1;
}
.bg-circle-2 {
position: absolute;
bottom: -100px;
right: 150px;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(245, 191, 36, 0.1) 0%, rgba(245, 191, 36, 0.05) 100%);
border-radius: 50%;
z-index: -1;
}
/* Carousel Custom Styles */
.carousel-control-prev,
.carousel-control-next {
width: 50px;
height: 50px;
background-color: var(--main-color);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all 0.3s ease;
}
.carousel-control-prev {
left: -70px;
}
.carousel-control-next {
right: -70px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background-color: #c0023d;
transform: translateY(-50%) scale(1.1);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 20px;
height: 20px;
}
.carousel-indicators {
bottom: -60px;
}
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: #cbd5e0;
border: none;
}
.carousel-indicators button.active {
background-color: var(--main-color);
}
.carousel-item {
transition: transform 0.8s ease-in-out;
}
@media (max-width: 768px) {
.testimonial-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 2rem;
}
.testimonial-images {
margin-top: 3rem;
height: 300px;
}
.img-1,
.img-2,
.img-3 {
position: relative;
top: 0;
right: 0;
width: 100%;
height: 200px;
margin-bottom: 1rem;
}
.decorative-dots {
display: none;
}
.bg-circle-1,
.bg-circle-2 {
display: none;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
}
}
/* --------------------------------testimonial end here-------------- */
/* --------------------------------contact statrt here-------------- */
.contact-section {
background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
/* border-radius: 20px; */
padding: 3rem;
color: white;
}
.rocket-icon {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
}
.contact-heading {
font-size: 2.25rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.highlight-text {
color: #1e293b;
font-weight: 700;
}
.contact-description {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.contact-form {
background: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
}
.contact-form h3 {
color: #1e293b;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.form-control {
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 0.95rem;
transition: all 0.3s ease;
background-color: white;
}
.form-control:focus {
border-color: #6366f1;
box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}
.form-control::placeholder {
color: #64748b;
font-weight: 400;
}
textarea.form-control {
resize: vertical;
min-height: 100px;
}
.btn-submit {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
border: none;
color: white;
padding: 0.875rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
width: 100%;
}
.btn-submit:hover {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.btn-submit:focus {
box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.5);
}
@media (max-width: 768px) {
.contact-section {
padding: 2rem 1.5rem;
}
.contact-heading {
font-size: 1.75rem;
}
.contact-form {
padding: 1.5rem;
margin-top: 2rem;
}
}
/* --------------------------------contact end here-------------- */
/* --------------------------------faq statrt here-------------- */
.faq-container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 40px;
/* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
}
.faq-header {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.faq-title {
font-size: 32px;
font-weight: 600;
color: #2d3748;
display: inline-block;
padding: 0 30px;
background: white;
}
.faq-item {
border-bottom: 1px solid #e1e5e9;
margin-bottom: 0;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
cursor: pointer;
transition: all 0.3s ease;
background: none;
border: none;
width: 100%;
text-align: left;
}
.faq-question:hover {
color: var(--main-color);
}
.faq-question-text {
font-size: 16px;
font-weight: 500;
color: #2d3748;
line-height: 1.4;
flex: 1;
margin-right: 20px;
}
.faq-question:hover .faq-question-text {
color: var(--main-color);
}
.faq-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
color: #718096;
}
.faq-question:hover .faq-icon {
color: var(--main-color);
}
.faq-item.expanded .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
padding: 0;
}
.faq-answer.expanded {
max-height: 200px;
padding-bottom: 24px;
}
.faq-answer-text {
font-size: 14px;
color: #4a5568;
line-height: 1.6;
padding-right: 40px;
}
.highlight {
color: var(--main-color);
font-weight: 500;
}
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* --------------------------------footer start here (Modern Responsive Interface) -------------- */
.site-footer {
position: relative;
width: 100%;
height: auto;
padding-top: 3.5rem;
background: radial-gradient(ellipse 90% 60% at 50% -10%, #161e32 0%, #090d16 55%, #05070e 100%);
color: #cbd5e1;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
/* Decorative top luminous border */
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(224, 2, 67, 0.2) 20%, #E00243 50%, rgba(255, 75, 114, 0.4) 80%, transparent 100%);
z-index: 3;
}
/* Ambient background blur glowing orbs */
.hive-footer-glow-1 {
position: absolute;
top: -120px;
left: 5%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.12) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
border-radius: 50%;
z-index: 1;
}
.hive-footer-glow-2 {
position: absolute;
bottom: 50px;
right: 2%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
filter: blur(70px);
pointer-events: none;
border-radius: 50%;
z-index: 1;
}
/* Prefooter Floating CTA */
.hive-prefooter-cta {
position: relative;
background: linear-gradient(135deg, rgba(26, 34, 56, 0.85) 0%, rgba(11, 15, 28, 0.95) 100%);
border: 1px solid rgba(224, 2, 67, 0.25);
border-radius: 1.5rem;
padding: 3rem 2.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px -5px rgba(224, 2, 67, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
margin-bottom: 4rem;
overflow: hidden;
z-index: 2;
}
.hive-prefooter-cta::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 320px;
height: 100%;
background: radial-gradient(circle at 100% 0%, rgba(224, 2, 67, 0.2) 0%, transparent 70%);
pointer-events: none;
}
.hive-cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.9rem;
border-radius: 9999px;
background: rgba(224, 2, 67, 0.15);
border: 1px solid rgba(224, 2, 67, 0.35);
color: #ff5e84;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.hive-cta-heading {
color: #ffffff;
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.hive-cta-gradient-text {
background: linear-gradient(135deg, #E00243 0%, #ff4b72 50%, #ffa5b9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-cta-desc {
color: #94a3b8;
font-size: 0.9375rem;
line-height: 1.6;
max-width: 580px;
margin-bottom: 0;
}
.hive-cta-primary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.85rem 1.75rem;
border-radius: 9999px;
background: linear-gradient(135deg, #E00243 0%, #ff1a57 100%);
color: #ffffff !important;
font-weight: 700;
font-size: 0.9375rem;
text-decoration: none;
box-shadow: 0 6px 25px rgba(224, 2, 67, 0.45);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hive-cta-primary-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 35px rgba(224, 2, 67, 0.65);
color: #ffffff !important;
text-decoration: none;
}
.hive-cta-secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.85rem 1.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0 !important;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
transition: all 0.25s ease;
}
.hive-cta-secondary-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
color: #ffffff !important;
transform: translateY(-3px);
text-decoration: none;
}
/* Footer Brand & Typography */
.site-footer .navbar-brand {
color: #ffffff;
font-weight: 800;
font-size: 1.45rem;
letter-spacing: -0.02em;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.site-footer .navbar-brand:hover {
color: #ffffff;
}
.site-footer .logo-text {
background: #E00243;
color: #ffffff;
padding: 3px 9px;
border-radius: 6px;
font-size: 1.25rem;
font-weight: 800;
box-shadow: 0 4px 14px rgba(224, 2, 67, 0.35);
}
.site-footer .footer-text {
color: #94a3b8;
font-size: 0.875rem;
line-height: 1.65;
}
/* Live Platform Metric Pills */
.hive-stat-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
margin-bottom: 1.25rem;
}
.hive-stat-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.75rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e2e8f0;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.2s ease;
}
.hive-stat-pill:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(224, 2, 67, 0.3);
color: #ffffff;
}
.hive-pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
display: inline-block;
animation: hivePulseAnim 2s infinite ease-in-out;
}
@keyframes hivePulseAnim {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.3);
}
}
/* Modern Social Links with Brand Glows */
.hive-footer-social-wrap {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.25rem;
}
.hive-footer-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
font-size: 1rem;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hive-footer-social-btn:hover {
transform: translateY(-4px);
color: #ffffff !important;
text-decoration: none;
}
.hive-footer-social-btn.instagram:hover {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
border-color: transparent;
box-shadow: 0 6px 18px rgba(214, 36, 159, 0.45);
}
.hive-footer-social-btn.youtube:hover {
background: #ff0000;
border-color: #ff0000;
box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
}
.hive-footer-social-btn.linkedin:hover {
background: #0077b5;
border-color: #0077b5;
box-shadow: 0 6px 18px rgba(0, 119, 181, 0.45);
}
.hive-footer-social-btn.facebook:hover {
background: #1877f2;
border-color: #1877f2;
box-shadow: 0 6px 18px rgba(24, 119, 242, 0.45);
}
.hive-footer-social-btn.telegram:hover {
background: #229ED9;
border-color: #229ED9;
box-shadow: 0 6px 18px rgba(34, 158, 217, 0.45);
}
/* Navigation Columns */
.site-footer .footer-heading {
color: #ffffff;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.site-footer .footer-heading::after {
content: "";
display: inline-block;
width: 16px;
height: 2px;
background: #E00243;
border-radius: 2px;
}
.hive-footer-links-list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.hive-footer-links-list li {
padding: 0.35rem 0;
}
.hive-footer-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #94a3b8;
font-size: 0.875rem;
text-decoration: none;
transition: all 0.2s ease;
}
.hive-footer-link i {
font-size: 0.85rem;
color: #64748b;
transition: color 0.2s ease, transform 0.2s ease;
width: 16px;
text-align: center;
}
.hive-footer-link:hover {
color: #ffffff;
transform: translateX(4px);
text-decoration: none;
}
.hive-footer-link:hover i {
color: #E00243;
}
.hive-link-badge {
font-size: 0.65rem;
padding: 0.15rem 0.45rem;
border-radius: 9999px;
background: rgba(224, 2, 67, 0.15);
color: #ff4b72;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Newsletter Card & Pill Input */
.hive-newsletter-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.25rem;
padding: 1.5rem;
backdrop-filter: blur(8px);
}
.hive-input-pill-wrap {
display: flex;
align-items: center;
background: rgba(11, 15, 26, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 9999px;
padding: 0.35rem 0.4rem 0.35rem 1rem;
transition: all 0.25s ease;
margin-top: 1rem;
}
.hive-input-pill-wrap:focus-within {
border-color: #E00243;
box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.25);
background: rgba(11, 15, 26, 0.95);
}
.hive-newsletter-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
color: #ffffff;
font-size: 0.875rem;
padding: 0.4rem 0.5rem;
outline: none;
}
.hive-newsletter-input::placeholder {
color: #64748b;
}
.hive-newsletter-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
border: none;
border-radius: 9999px;
background: linear-gradient(135deg, #E00243 0%, #ff1a57 100%);
color: #ffffff;
font-size: 0.8125rem;
font-weight: 700;
padding: 0.6rem 1.15rem;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(224, 2, 67, 0.4);
}
.hive-newsletter-submit-btn:hover {
transform: scale(1.03);
box-shadow: 0 6px 20px rgba(224, 2, 67, 0.6);
color: #ffffff;
}
.hive-newsletter-status {
font-size: 0.75rem;
margin-top: 0.65rem;
padding: 0.25rem 0.5rem;
border-radius: 6px;
}
.hive-footer-help-pill {
display: flex;
align-items: center;
gap: 0.65rem;
margin-top: 1.25rem;
padding: 0.65rem 0.9rem;
border-radius: 0.75rem;
background: rgba(224, 2, 67, 0.08);
border: 1px solid rgba(224, 2, 67, 0.2);
color: #cbd5e1;
font-size: 0.8125rem;
text-decoration: none;
transition: all 0.2s ease;
}
.hive-footer-help-pill:hover {
background: rgba(224, 2, 67, 0.15);
border-color: rgba(224, 2, 67, 0.35);
color: #ffffff;
text-decoration: none;
}
/* Trust & Guarantee Strip */
.hive-footer-trust-strip {
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
padding: 1.75rem 0;
margin-top: 3.5rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.hive-trust-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.hive-trust-icon-box {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(224, 2, 67, 0.1);
border: 1px solid rgba(224, 2, 67, 0.25);
color: #ff4b72;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
transition: all 0.25s ease;
}
.hive-trust-card:hover .hive-trust-icon-box {
background: #E00243;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(224, 2, 67, 0.35);
}
.hive-trust-title {
color: #ffffff;
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.hive-trust-subtitle {
color: #64748b;
font-size: 0.75rem;
margin-bottom: 0;
line-height: 1.4;
}
/* Footer Bottom Bar (Fixes broken vertical stacking!) */
.site-footer .footer-bottom {
padding: 1.5rem 0 0;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 1.25rem !important;
color: #64748b !important;
font-size: 0.8125rem !important;
position: relative;
z-index: 2;
}
.hive-legal-links {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 1.25rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.hive-legal-links li {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.hive-legal-link {
color: #94a3b8 !important;
font-size: 0.8125rem !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.hive-legal-link:hover {
color: #ffffff !important;
text-decoration: none !important;
}
.hive-back-to-top {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #cbd5e1;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.25s ease;
}
.hive-back-to-top:hover {
background: #E00243;
border-color: #E00243;
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(224, 2, 67, 0.4);
}
/* Responsive Adjustments */
@media (max-width: 991.98px) {
.hive-prefooter-cta {
padding: 2.25rem 1.75rem;
}
.site-footer .footer-bottom {
flex-direction: column !important;
text-align: center !important;
justify-content: center !important;
}
.hive-legal-links {
justify-content: center !important;
}
}
@media (max-width: 575.98px) {
.hive-prefooter-cta {
padding: 1.75rem 1.25rem;
margin-bottom: 2.5rem;
}
.hive-input-pill-wrap {
flex-direction: column;
border-radius: 1rem;
padding: 0.5rem;
background: rgba(11, 15, 26, 0.95);
}
.hive-newsletter-input {
width: 100%;
padding: 0.6rem 0.75rem;
}
.hive-newsletter-submit-btn {
width: 100%;
border-radius: 0.75rem;
padding: 0.65rem 1rem;
}
}
/* --------------------------------footer end here-------------- */
/* --------------influncer section start here------------ */
.section {
padding: 60px 0 0;
position: relative;
overflow: hidden;
}
/* LinkedIn Section */
.linkedin-section {
background: linear-gradient(135deg, #0077B5 0%, #004182 100%);
color: white;
padding: 50px;
}
.linkedin-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Instagram Section */
.instagram-section {
background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%);
color: white;
}
.instagram-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: float 20s infinite linear;
}
/* YouTube Section */
.youtube-section {
background: linear-gradient(135deg, #1a0033 0%, #2d0066 50%, #1a0033 100%);
color: white;
}
.youtube-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 100px 100px, 150px 150px;
}
@keyframes float {
0% {
transform: translateX(-100px) translateY(-100px);
}
100% {
transform: translateX(100px) translateY(100px);
}
}
.brand-header {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
.brand-header i {
font-size: 24px;
margin-right: 12px;
}
.brand-header h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.section-subtitle {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
line-height: 1.6;
}
.hire-btn {
background: white;
color: #333;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
margin-bottom: 40px;
transition: all 0.3s ease;
}
.hire-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
color: #333;
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* gap: 20px; */
margin-bottom: 30px;
}
.feature-item {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
color: var(--white-color);
}
.feature-item::before {
content: '●';
color: rgba(255, 255, 255, 0.7);
margin-right: 12px;
font-size: 12px;
}
.phone-mockups {
position: relative;
height: 400px;
}
.phone {
position: absolute;
width: 200px;
height: 350px;
background: #fff;
border-radius: 25px;
padding: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.phone-1 {
right: 50px;
top: 0;
z-index: 3;
transform: rotate(-5deg);
}
.phone-2 {
right: 150px;
top: 30px;
z-index: 2;
transform: rotate(5deg);
}
.phone-3 {
right: 250px;
top: 10px;
z-index: 1;
transform: rotate(-3deg);
}
.phone-screen {
width: 100%;
height: 100%;
background: #f5f5f5;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.phone-image {
width: 100%;
height: 60%;
object-fit: cover;
border-radius: 10px 10px 0 0;
}
.phone-content {
padding: 10px;
height: 40%;
background: white;
}
.phone-header {
height: 20px;
background: linear-gradient(90deg, #ddd 60%, #eee 40%);
border-radius: 10px;
margin-bottom: 8px;
}
.phone-line {
height: 8px;
background: #eee;
border-radius: 4px;
margin-bottom: 6px;
}
.phone-line:nth-child(2) {
width: 80%;
}
.phone-line:nth-child(3) {
width: 60%;
}
/* Instagram specific phones */
.instagram-phones .phone {
transform: rotate(0deg);
}
.instagram-phones .phone-1 {
right: 80px;
transform: rotate(-8deg);
}
.instagram-phones .phone-2 {
right: 180px;
transform: rotate(8deg);
}
.instagram-phones .phone-3 {
right: 280px;
transform: rotate(-3deg);
}
/* Telegram Section */
.telegram-section {
background: linear-gradient(135deg, #FFA500 0%, #FFD700 50%, #FFA500 100%);
color: #333;
}
.telegram-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.telegram-section .brand-header {
border-color: rgba(51, 51, 51, 0.3);
background: rgba(255, 255, 255, 0.2);
color: #333;
}
.telegram-section .section-subtitle {
color: #333;
opacity: 0.8;
}
.telegram-section .hire-btn {
background: #1a1a1a;
color: white;
}
.telegram-section .hire-btn:hover {
background: #333;
color: white;
}
.telegram-section .feature-item {
color: #333;
}
.telegram-section .feature-item::before {
color: rgba(51, 51, 51, 0.7);
}
/* YouTube specific */
.youtube-video {
position: relative;
right: 100px;
top: 50px;
width: 300px;
height: 200px;
background: #fff;
border-radius: 15px;
padding: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.video-player {
width: 100%;
height: 70%;
background: #000;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.video-controls {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.play-btn {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
}
.progress-bar {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
margin: 0 10px;
}
.progress-fill {
width: 30%;
height: 100%;
background: #FF0000;
border-radius: 2px;
}
.video-info {
padding: 10px 0;
}
.video-title {
height: 12px;
background: #333;
border-radius: 6px;
margin-bottom: 8px;
}
/* Telegram Mockups */
.telegram-grid {
position: relative;
right: 50px;
top: 20px;
width: 350px;
height: 300px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.telegram-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.telegram-card:hover {
transform: translateY(-5px);
}
.telegram-card:nth-child(1) {
transform: rotate(-3deg);
}
.telegram-card:nth-child(2) {
transform: rotate(2deg);
}
.telegram-card:nth-child(3) {
transform: rotate(1deg);
}
.telegram-card:nth-child(4) {
transform: rotate(-2deg);
}
.telegram-image {
width: 100%;
height: 80px;
object-fit: cover;
}
.telegram-content {
padding: 10px;
height: 60px;
}
.telegram-brand {
height: 8px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
border-radius: 4px;
margin-bottom: 6px;
width: 60%;
}
.telegram-text {
height: 6px;
background: #ddd;
border-radius: 3px;
margin-bottom: 4px;
}
.telegram-text:nth-child(3) {
width: 80%;
}
.telegram-text:nth-child(4) {
width: 60%;
}
@media (max-width: 768px) {
.features-grid {
grid-template-columns: 1fr;
}
.phone-mockups {
height: 300px;
}
.phone {
width: 120px;
height: 220px;
}
.phone-1,
.phone-2,
.phone-3 {
right: 20px;
top: 0;
}
.phone-2 {
right: 80px;
}
.phone-3 {
right: 140px;
}
.youtube-video {
width: 250px;
height: 150px;
right: 20px;
}
.telegram-grid {
width: 280px;
right: 10px;
grid-template-columns: 1fr;
height: 400px;
}
}
/* Animation */
.section {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --------------influncer section end here------------ */
/* --------------influncer gallery section start here------------ */
.gallery-section {
position: relative;
z-index: 1;
}
.title {
font-size: 46px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
color: var(--main-color);
}
.filter {
text-align: center;
max-width: 1050px;
margin: auto;
}
.btn {
padding: 10px 20px;
margin: 5px 4px 4px 0;
display: inline-block;
color: #003;
background: #eee;
border: 1px solid var(--main-color);
transition: all 0.4s;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
}
.btn:hover,
.btn-active {
background: var(--main-color);
color: #fff;
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
.gallery {
display: flex;
justify-content: center;
width: fit-content;
max-width: 1320px;
flex-wrap: wrap;
margin: 25px auto;
/* gap: 14px; */
}
.gallery a {
display: flex;
}
.gallery img {
width: 200px;
height: 220px;
object-fit: cover;
transition: 0.3s ease-in-out;
border-radius: 12px;
overflow: hidden;
margin: 10px 10px;
}
.gallery img:hover {
transform: scale(1.1);
}
.sets .hide,
.sets .pophide {
width: 0%;
opacity: 0;
}
.closeBtn {
position: absolute;
font-size: 22px;
font-weight: 500;
right: 25px;
top: 25px;
color: white;
transition: 0.5s linear;
padding: 8px 40px;
border-radius: 25px;
background: red;
outline-offset: -6px;
outline: 2px solid #fff;
}
.closeBtn:hover {
cursor: pointer;
background: white;
color: black;
outline: 2px solid #000;
}
.openDiv {
width: 100%;
height: 100vh;
background: #000000e7;
position: fixed;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
left: 0;
z-index: 9999;
}
.imgPreview {
width: 70%;
object-fit: scale-down;
max-height: 40vw;
height: auto;
}
.prevButton,
.nextButton {
transition: 1s linear;
padding: 10px 35px;
font-size: 18px;
border: none;
color: white;
background: #0005;
border-radius: 10px;
border: 1px solid white;
margin: 10px;
}
.prevButton:hover,
.nextButton:hover {
background: #fff;
color: black;
}
/* resposive CSS Code */
@media (max-width: 1199px) {
.section-padding {
padding-top: 70px;
}
}
@media (max-width: 991px) {
.section-padding {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.title {
font-size: 36px;
}
.gallery img {
margin: 8px 8px;
width: 175px;
}
.closeBtn {
padding: 6px 25px;
}
.prevButton,
.nextButton {
font-size: 18px;
padding: 8px 25px;
}
}
@media (max-width: 540px) {
.section-padding {
padding-top: 30px;
}
.gallery img {
margin: 8px 6px;
width: 155px;
}
.closeBtn {
font-size: 18px;
border-radius: 15px;
}
.prevButton,
.nextButton {
font-size: 18px;
padding: 6px 20px;
border-radius: 10px;
margin: 5px;
}
.imgPreview {
width: 90%;
max-height: 50vh;
height: auto;
}
}
/* --------------influncer gallery section end here------------ */
/* start section section */
.stats-section {
padding: 50px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.stats-section .section-title {
text-align: center;
font-size: 2.8rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.section-title .highlight {
color: var(--main-color);
font-weight: 800;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.stat-card {
text-align: center;
padding: 40px 20px;
background: white;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}
.stat-number {
font-size: 25px;
font-weight: 700;
margin-bottom: 15px;
display: block;
}
.stat-card:nth-child(1) .stat-number {
color: var(--main-color);
}
.stat-card:nth-child(2) .stat-number {
color: var(--main-color);
}
.stat-card:nth-child(3) .stat-number {
color: var(--main-color);
}
.stat-card:nth-child(4) .stat-number {
color: var(--main-color);
}
.stat-description {
font-size: 1.1rem;
color: #6c757d;
font-weight: 500;
line-height: 1.4;
}
.achievements-section {
background: white;
border-radius: 30px;
padding: 60px 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: center;
}
.achievement-item {
text-align: center;
padding: 30px 20px;
transition: all 0.3s ease;
}
.achievement-item:hover {
transform: scale(1.05);
}
.achievement-logo {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: bold;
color: white;
text-decoration: none;
}
.et-logo {
background: linear-gradient(135deg, #1e3c72, #2a5298);
}
.award-logo {
background: linear-gradient(135deg, #f12711, #f5af19);
}
.global-logo {
background: linear-gradient(135deg, #134e5e, #71b280);
}
.dashboard-logo {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.achievement-text {
font-size: 0.95rem;
color: #6c757d;
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.section-title {
font-size: 2.2rem;
}
.stat-number {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.achievements-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 50px;
}
.stat-number {
font-size: 2.5rem;
}
.achievements-section {
padding: 40px 20px;
}
}
.animate-counter {
animation: countUp 2s ease-out;
}
.animate-fade-in {
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes countUp {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
.stagger-animation .stat-card:nth-child(1) {
animation-delay: 0.1s;
}
.stagger-animation .stat-card:nth-child(2) {
animation-delay: 0.2s;
}
.stagger-animation .stat-card:nth-child(3) {
animation-delay: 0.3s;
}
.stagger-animation .stat-card:nth-child(4) {
animation-delay: 0.4s;
}
/* ===================contact us page start here============================= */
.cu-hero {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
padding: 3rem 0 2rem;
border-bottom: 1px solid #e2e8f0;
}
.cu-breadcrumb a {
color: var(--text-color);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s ease;
}
.cu-breadcrumb a:hover {
color: var(--main-color);
}
.cu-title {
color: var(--black-color);
font-weight: 800;
letter-spacing: -0.5px;
}
.cu-sub {
color: var(--text-color);
font-size: 1.1rem;
max-width: 600px;
}
.cu-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
background-color: var(--white-color);
color: var(--black-color);
border: 2px solid #e2e8f0;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9375rem;
}
.cu-btn:hover {
background-color: var(--main-color);
color: var(--white-color);
border-color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.15);
}
.cu-btn-primary {
background-color: var(--main-color);
color: var(--white-color);
border-color: var(--main-color);
}
.cu-btn-primary:hover {
background-color: #c6003a;
border-color: #c6003a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.25);
}
.cu-btn-danger {
background-color: transparent;
color: #ef4444;
border-color: #ef4444;
}
.cu-btn-danger:hover {
background-color: #ef4444;
color: var(--white-color);
}
.cu-main {
padding: 3rem 0;
}
/* Card Styles */
.cu-card {
background: var(--white-color);
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.3s ease;
}
.cu-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* Contact Info */
.cu-info ul li {
display: flex;
align-items: flex-start;
padding: 0.5rem 0;
color: var(--text-color);
}
.cu-info ul li i {
margin-top: 0.125rem;
color: var(--main-color);
}
.cu-info ul li a {
color: var(--text-color);
text-decoration: none;
transition: color 0.2s ease;
}
.cu-info ul li a:hover {
color: var(--main-color);
}
.cu-social {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e2e8f0;
}
.cu-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #f8fafc;
border-radius: 50%;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.cu-social a:hover {
background-color: var(--main-color);
color: var(--white-color);
transform: translateY(-2px);
}
/* Map Placeholder */
.cu-map {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 12px;
height: 370px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed #cbd5e1;
overflow: hidden;
}
.cu-pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: var(--main-color);
animation: float 3s ease-in-out infinite;
}
.cu-map-note {
position: absolute;
bottom: 1rem;
background-color: rgba(255, 255, 255, 0.9);
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
color: var(--text-color);
}
@keyframes float {
0%,
100% {
transform: translate(-50%, -50%) translateY(0);
}
50% {
transform: translate(-50%, -50%) translateY(-10px);
}
}
/* Form Styles */
.cu-form .form-label {
font-weight: 600;
color: var(--black-color);
margin-bottom: 0.5rem;
font-size: 0.9375rem;
}
.cu-form .form-control,
.cu-form .form-select {
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
transition: all 0.3s ease;
}
.cu-form .form-control:focus,
.cu-form .form-select:focus {
border-color: var(--main-color);
box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
}
.cu-form .form-control:invalid:not(:focus):not(:placeholder-shown),
.cu-form .form-select:invalid:not(:focus) {
border-color: #ef4444;
}
.cu-form .form-text {
font-size: 0.8125rem;
color: var(--text-color);
margin-top: 0.25rem;
}
/* Character Counter */
.cu-counter {
font-size: 0.8125rem;
color: var(--text-color);
}
#cu-count {
color: var(--main-color);
font-weight: 600;
}
/* Checkbox */
.form-check-input:checked {
background-color: var(--main-color);
border-color: var(--main-color);
}
.form-check-input:focus {
border-color: var(--main-color);
box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
}
/* Email Link */
#cu-mailto {
color: var(--main-color) !important;
}
#cu-mailto:hover {
text-decoration: underline !important;
}
/* Toast Notification */
.cu-toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(--white-color);
border: 1px solid #10b981;
border-left: 4px solid #10b981;
border-radius: 8px;
padding: 1rem 1.5rem;
max-width: 350px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transform: translateY(100px);
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 1000;
}
.cu-toast.show {
transform: translateY(0);
opacity: 1;
}
.cu-toast strong {
color: #10b981;
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.cu-hero {
padding: 2rem 0 1.5rem;
}
.cu-title {
font-size: 1.75rem;
}
.cu-sub {
font-size: 1rem;
}
.cu-btn {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
}
.cu-card {
padding: 1.5rem;
}
.cu-toast {
left: 1rem;
right: 1rem;
max-width: none;
}
}
/* Form Validation Styles */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
border-color: #ef4444;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.was-validated .form-check-input:invalid {
border-color: #ef4444;
}
.was-validated .form-check-input:invalid:checked {
background-color: var(--main-color);
}
/* ==================about us page start here================================ */
.ab-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 4rem 0 3rem;
color: var(--white-color);
position: relative;
overflow: hidden;
}
.ab-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
}
.ab-kicker {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--secondary-color);
background: rgba(248, 213, 83, 0.1);
padding: 0.5rem 1rem;
border-radius: 20px;
margin-bottom: 1.5rem;
}
.ab-title {
color: var(--white-color);
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
font-size: 3rem;
}
.ab-sub {
color: rgba(255, 255, 255, 0.8);
font-size: 1.125rem;
line-height: 1.6;
max-width: 600px;
}
.ab-cta {
margin: 2rem 0;
}
.ab-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 2rem;
background: rgba(255, 255, 255, 0.1);
color: var(--white-color);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.ab-btn:hover {
background: var(--main-color);
border-color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(224, 2, 67, 0.3);
}
.ab-btn-primary {
background: var(--main-color);
border-color: var(--main-color);
}
.ab-btn-primary:hover {
background: #c6003a;
border-color: #c6003a;
box-shadow: 0 12px 30px rgba(224, 2, 67, 0.4);
}
.ab-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ab-stat {
text-align: center;
}
.ab-num {
font-size: 2.5rem;
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 0.5rem;
font-family: 'Poppins', sans-serif;
}
.ab-lbl {
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.ab-card {
background: var(--white-color);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #e2e8f0;
}
.ab-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Mission & Vision */
.ab-mv {
padding: 4rem 0;
}
.ab-mv .ab-card {
padding: 2.5rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.ab-mv h3 {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
/* Values Section */
.ab-values {
padding: 4rem 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.ab-val-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--main-color), #ff2e63);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--white-color);
font-size: 1.5rem;
}
.ab-values h4 {
margin-bottom: 1rem;
font-size: 1.25rem;
}
.ab-values p {
color: var(--text-color);
line-height: 1.6;
}
/* Timeline */
.ab-section:not(.ab-hero):not(.ab-values) {
padding: 4rem 0;
}
.ab-timeline {
position: relative;
padding-left: 2rem;
}
.ab-timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--main-color), var(--secondary-color));
}
.ab-tl-item {
position: relative;
padding: 1.5rem 0 1.5rem 2rem;
}
.ab-tl-item::before {
content: '';
position: absolute;
left: -0.5rem;
top: 2rem;
width: 1rem;
height: 1rem;
background: var(--main-color);
border-radius: 50%;
border: 3px solid var(--white-color);
box-shadow: 0 0 0 4px var(--main-color);
}
.ab-tl-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--black-color);
margin-bottom: 0.5rem;
}
.ab-tl-meta {
display: inline-block;
background: linear-gradient(135deg, var(--main-color), #ff2e63);
color: var(--white-color);
padding: 0.25rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
/* Team Section */
.ab-team {
background: var(--white-color);
}
.ab-member {
position: relative;
overflow: hidden;
border-radius: 12px;
height: 100%;
}
.ab-photo {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-member:hover .ab-photo {
transform: scale(1.05);
}
.ab-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
color: var(--white-color);
padding: 2rem 1.5rem 1.5rem;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-member:hover .ab-info {
transform: translateY(0);
}
.ab-name {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.ab-role {
color: var(--secondary-color);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.ab-social {
display: flex;
gap: 0.75rem;
}
.ab-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--white-color);
text-decoration: none;
transition: all 0.3s ease;
}
.ab-social a:hover {
background: var(--main-color);
transform: translateY(-2px);
}
/* Partners */
.ab-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
align-items: center;
}
.ab-logo {
background: var(--white-color);
border: 2px solid #e2e8f0;
border-radius: 8px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: var(--black-color);
transition: all 0.3s ease;
}
.ab-logo:hover {
border-color: var(--main-color);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* CTA Band */
.ab-cta-band {
background: linear-gradient(135deg, var(--main-color), #ff2e63);
color: var(--white-color);
padding: 2.5rem;
border-radius: 12px;
margin-top: 2rem;
}
.ab-cta-band h3 {
color: var(--white-color);
}
/* Animations */
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Intersection Observer Animations */
.ab-animate {
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Responsive Design */
@media (max-width: 992px) {
.ab-title {
font-size: 2.5rem;
}
.ab-stats {
grid-template-columns: repeat(2, 1fr);
}
.ab-logos {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.ab-hero {
padding: 3rem 0 2rem;
}
.ab-title {
font-size: 2rem;
}
.ab-sub {
font-size: 1rem;
}
.ab-btn {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
.ab-stats {
grid-template-columns: 1fr;
gap: 1rem;
}
.ab-cta-band {
text-align: center;
}
}
/* ====================faq page start here============================ */
.fq-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 3rem 0 2rem;
color: var(--white-color);
position: relative;
overflow: hidden;
}
.fq-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
}
.fq-title {
color: var(--white-color);
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.5rem;
font-size: 2.5rem;
}
.fq-sub {
color: rgba(255, 255, 255, 0.8);
font-size: 1.125rem;
max-width: 600px;
}
.fq-count {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
margin-top: 1rem;
backdrop-filter: blur(10px);
}
.fq-count span {
color: var(--secondary-color);
font-weight: 700;
}
/* Search Bar */
.fq-searchbar {
max-width: 400px;
}
.fq-searchbar .input-group {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
backdrop-filter: blur(10px);
overflow: hidden;
}
.fq-searchbar .input-group-text {
border: none;
color: rgba(255, 255, 255, 0.7);
background: transparent;
padding: 0.875rem 1.25rem;
}
.fq-searchbar .form-control {
background: transparent;
border: none;
color: var(--white-color);
padding: 0.875rem 0;
font-size: 1rem;
}
.fq-searchbar .form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.fq-searchbar .form-control:focus {
background: transparent;
color: var(--white-color);
box-shadow: none;
}
.fq-searchbar .btn {
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.7);
padding: 0.875rem 1.25rem;
transition: all 0.3s ease;
}
.fq-searchbar .btn:hover {
background: var(--main-color);
border-color: var(--main-color);
color: var(--white-color);
}
/* Category Tabs */
.fq-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0.5rem;
padding: 1rem 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fq-tabs::-webkit-scrollbar {
display: none;
}
.fq-tab {
flex: 0 0 auto;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid transparent;
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.fq-tab::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.fq-tab:hover::before {
left: 100%;
}
.fq-tab:hover {
background: rgba(224, 2, 67, 0.2);
color: var(--white-color);
transform: translateY(-2px);
}
.fq-tab.active {
background: var(--main-color);
color: var(--white-color);
border-color: var(--main-color);
box-shadow: 0 4px 15px rgba(224, 2, 67, 0.3);
}
/* Main Content */
.fq-main {
padding: 3rem 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.fq-card {
background: var(--white-color);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fq-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.fq-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--secondary-color), #c00239);
color: #1e293b;
padding: 0.375rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Accordion Styles */
.fq-accordion {
margin-top: 1rem;
}
.fq-acc-item {
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 0.75rem;
overflow: hidden;
background: var(--white-color);
transition: all 0.3s ease;
}
.fq-acc-item:last-child {
margin-bottom: 0;
}
.fq-acc-item.active {
border-color: var(--main-color);
box-shadow: 0 4px 15px rgba(224, 2, 67, 0.1);
}
.fq-acc-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
background: var(--white-color);
border: none;
text-align: left;
color: var(--black-color);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.fq-acc-btn:hover {
background: #f8fafc;
color: var(--main-color);
}
.fq-acc-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.fq-acc-icon {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.25rem;
color: var(--text-color);
}
.fq-acc-btn[aria-expanded="true"] .fq-acc-icon {
transform: rotate(180deg);
color: var(--main-color);
}
.fq-acc-panel {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
.fq-acc-panel.show {
padding: 1.5rem 1.5rem;
max-height: 500px;
opacity: 1;
}
.fq-acc-panel p {
color: var(--text-color);
line-height: 1.6;
margin-bottom: 0;
}
/* CTA Section */
.fq-cta {
background: linear-gradient(135deg, var(--main-color), #ff2e63);
padding: 2rem;
border-radius: 12px;
color: var(--white-color);
position: relative;
overflow: hidden;
}
.fq-cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
animation: float 20s linear infinite;
}
.fq-cta h5 {
color: var(--white-color);
font-weight: 700;
}
.fq-cta .fq-sub {
color: rgba(255, 255, 255, 0.9);
}
.fq-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 2rem;
background: var(--white-color);
color: var(--main-color);
border: 2px solid var(--white-color);
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
}
.fq-btn:hover {
background: transparent;
color: var(--white-color);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.fq-btn-primary {
background: var(--secondary-color);
color: #1e293b;
border-color: var(--secondary-color);
}
.fq-btn-primary:hover {
background: transparent;
color: var(--white-color);
}
/* Animations */
@keyframes float {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes highlight {
0%,
100% {
background-color: transparent;
}
50% {
background-color: rgba(248, 213, 83, 0.2);
}
}
.fq-animate {
animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.fq-highlight {
animation: highlight 1.5s ease;
}
/* Responsive Design */
@media (max-width: 992px) {
.fq-title {
font-size: 2rem;
}
.fq-tabs {
padding: 0.5rem 0;
}
.fq-tab {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
}
}
@media (max-width: 768px) {
.fq-hero {
padding: 2rem 0 1.5rem;
}
.fq-title {
font-size: 1.75rem;
}
.fq-sub {
font-size: 1rem;
}
.fq-acc-btn {
padding: 1rem 1.25rem;
font-size: 0.9375rem;
}
.fq-cta {
text-align: center;
padding: 1.5rem;
}
.fq-btn {
width: 100%;
justify-content: center;
}
}
/* ========================privacy policy page start here============================ */
.pp-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 3rem 0 2rem;
color: var(--white-color);
position: relative;
overflow: hidden;
}
.pp-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
}
.pp-breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.pp-breadcrumb a:hover {
color: var(--secondary-color);
}
.pp-title {
color: var(--white-color);
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.5rem;
font-size: 2.5rem;
}
.pp-sub {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 0.25rem;
}
.pp-sub time {
color: var(--secondary-color);
font-weight: 600;
}
.pp-cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.pp-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: var(--white-color);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
font-size: 0.9375rem;
}
.pp-btn:hover {
background: var(--main-color);
border-color: var(--main-color);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(224, 2, 67, 0.3);
}
.pp-btn-primary {
background: var(--main-color);
border-color: var(--main-color);
}
.pp-btn-primary:hover {
background: #c6003a;
border-color: #c6003a;
}
.pp-btn-danger {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.pp-btn-danger:hover {
background: #ef4444;
border-color: #ef4444;
color: var(--white-color);
}
/* Main Content */
.pp-main {
padding: 3rem 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
min-height: 100vh;
}
.pp-card {
background: var(--white-color);
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
padding: 2rem;
transition: all 0.3s ease;
}
.pp-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* Table of Contents */
.pp-toc {
position: sticky;
top: 2rem;
}
.pp-toc h6 {
color: var(--black-color);
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
#pp-search {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.625rem 1rem;
font-size: 0.875rem;
transition: all 0.3s ease;
margin-bottom: 1rem;
}
#pp-search:focus {
border-color: var(--main-color);
box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
background: var(--white-color);
}
.pp-toc-list {
list-style: none;
padding: 0;
margin: 0;
max-height: calc(100vh - 300px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--main-color) #f1f5f9;
}
.pp-toc-list::-webkit-scrollbar {
width: 4px;
}
.pp-toc-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 2px;
}
.pp-toc-list::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 2px;
}
.pp-toc-list li {
margin-bottom: 0.5rem;
}
.pp-toc-list a {
display: block;
padding: 0.75rem 1rem;
color: var(--text-color);
text-decoration: none;
border-radius: 8px;
font-size: 0.9375rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pp-toc-list a::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--main-color);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.pp-toc-list a:hover {
background: #f8fafc;
color: var(--black-color);
padding-left: 1.5rem;
}
.pp-toc-list a:hover::before {
transform: translateX(0);
}
.pp-toc-list a.active {
background: rgba(224, 2, 67, 0.05);
color: var(--main-color);
font-weight: 600;
padding-left: 1.5rem;
}
.pp-toc-list a.active::before {
transform: translateX(0);
}
/* Content Sections */
.pp-content .pp-card {
padding: 2.5rem;
}
.pp-section {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid #e2e8f0;
scroll-margin-top: 2rem;
}
.pp-section:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.pp-section h3 {
color: var(--black-color);
font-weight: 800;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.pp-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--secondary-color), #c00239);
color: #1e293b;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pp-callout {
background: linear-gradient(135deg, rgba(224, 2, 67, 0.05), rgba(248, 213, 83, 0.05));
border-left: 4px solid var(--main-color);
padding: 1.25rem;
border-radius: 0 8px 8px 0;
margin: 1.5rem 0;
}
.pp-callout strong {
color: var(--main-color);
}
.pp-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.pp-list li {
padding: 0.75rem 0 0.75rem 1.75rem;
color: var(--text-color);
position: relative;
line-height: 1.6;
}
.pp-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--main-color);
font-weight: bold;
}
.pp-meta {
color: var(--text-color);
font-size: 0.875rem;
font-style: italic;
margin-top: 1rem;
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
border-left: 3px solid var(--text-color);
}
/* Accordion */
.pp-accordion {
margin: 1rem 0;
border-radius: 8px;
overflow: hidden;
}
.pp-acc-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
background: #f8fafc;
border: none;
text-align: left;
color: var(--black-color);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 1px solid #e2e8f0;
}
.pp-acc-trigger:hover {
background: #f1f5f9;
color: var(--main-color);
}
.pp-acc-trigger[aria-expanded="true"] {
background: rgba(224, 2, 67, 0.05);
color: var(--main-color);
border-bottom-color: transparent;
}
.pp-acc-trigger i {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-acc-trigger[aria-expanded="true"] i {
transform: rotate(180deg);
}
.pp-acc-panel {
background: var(--white-color);
padding: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-acc-panel:not(.d-none) {
padding: 1.5rem;
max-height: 1000px;
}
/* Cookie Modal */
.pp-cookie-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-cookie-modal[aria-hidden="false"] {
opacity: 1;
visibility: visible;
}
.pp-cookie-dialog {
background: var(--white-color);
border-radius: 16px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: translateY(20px);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-cookie-modal[aria-hidden="false"] .pp-cookie-dialog {
transform: translateY(0);
}
.pp-cookie-header {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: var(--white-color);
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.pp-cookie-header h5 {
color: var(--white-color);
font-weight: 700;
display: flex;
align-items: center;
}
.pp-cookie-body {
padding: 1.5rem;
overflow-y: auto;
max-height: 60vh;
}
.pp-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
}
.pp-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.pp-switch span {
display: inline-block;
width: 50px;
height: 26px;
background: #e2e8f0;
border-radius: 13px;
position: relative;
transition: all 0.3s ease;
}
.pp-switch span::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: var(--white-color);
border-radius: 50%;
transition: transform 0.3s ease;
}
.pp-switch input:checked+span {
background: var(--main-color);
}
.pp-switch input:checked+span::after {
transform: translateX(24px);
}
.pp-switch input:disabled+span {
opacity: 0.5;
cursor: not-allowed;
}
.pp-cookie-footer {
padding: 1.5rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
gap: 1rem;
justify-content: space-between;
flex-wrap: wrap;
}
.pp-cookie-footer .pp-btn {
flex: 1;
min-width: 120px;
justify-content: center;
}
/* Text Highlight */
mark {
background: rgba(248, 213, 83, 0.4);
padding: 0 2px;
border-radius: 2px;
color: inherit;
}
/* Floating Scroll to Top Button */
.pp-scroll-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: var(--main-color);
color: var(--white-color);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
box-shadow: 0 4px 15px rgba(224, 2, 67, 0.3);
}
.pp-scroll-top:hover {
background: #c6003a;
transform: translateY(-5px);
}
.pp-scroll-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Responsive Design */
@media (max-width: 992px) {
.pp-title {
font-size: 2rem;
}
.pp-cta-row {
width: 100%;
margin-top: 1rem;
}
.pp-btn {
flex: 1;
min-width: 150px;
justify-content: center;
}
.pp-toc {
position: static;
margin-bottom: 2rem;
}
.pp-toc-list {
max-height: none;
}
}
@media (max-width: 768px) {
.pp-hero {
padding: 2rem 0 1.5rem;
}
.pp-title {
font-size: 1.75rem;
}
.pp-card {
padding: 1.5rem;
}
.pp-content .pp-card {
padding: 1.5rem;
}
.pp-section {
margin-bottom: 2rem;
padding-bottom: 2rem;
}
.pp-cookie-footer {
flex-direction: column;
}
.pp-cookie-footer .pp-btn {
width: 100%;
}
}
/* Print Styles */
@media print {
.pp-hero {
background: #fff !important;
color: #000 !important;
padding: 1rem 0 !important;
}
.pp-breadcrumb,
.pp-cta-row,
.pp-toc,
.pp-cookie-modal,
.pp-scroll-top {
display: none !important;
}
.pp-title {
color: #000 !important;
font-size: 2rem !important;
}
.pp-sub {
color: #666 !important;
}
.pp-card {
box-shadow: none !important;
border: 1px solid #ddd !important;
page-break-inside: avoid;
}
.pp-section {
page-break-inside: avoid;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pp-animate {
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* ===================term and condition page start here================================ */
.tc-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 3rem 0 2rem;
color: var(--white-color);
position: relative;
overflow: hidden;
}
.tc-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
}
.tc-hero::after {
content: '';
position: absolute;
top: 0;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.tc-breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
}
.tc-breadcrumb a:hover {
color: var(--secondary-color);
transform: translateX(-3px);
}
.tc-title {
color: var(--white-color);
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.5rem;
font-size: 2.5rem;
position: relative;
display: inline-block;
}
.tc-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: var(--main-color);
border-radius: 2px;
}
.tc-sub {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 0.25rem;
}
.tc-sub time {
color: var(--secondary-color);
font-weight: 600;
background: rgba(248, 213, 83, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 4px;
display: inline-block;
}
.tc-cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.tc-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.75rem;
background: rgba(255, 255, 255, 0.1);
color: var(--white-color);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
font-size: 0.9375rem;
position: relative;
overflow: hidden;
}
.tc-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.tc-btn:hover::before {
width: 300px;
height: 300px;
}
.tc-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.tc-btn-primary {
background: linear-gradient(135deg, var(--main-color), #ff2e63);
border: none;
}
.tc-btn-primary:hover {
background: linear-gradient(135deg, #c6003a, #e11d48);
box-shadow: 0 12px 30px rgba(224, 2, 67, 0.4);
}
.tc-btn-primary:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
.tc-btn-primary:disabled:hover::before {
width: 0;
height: 0;
}
/* Main Content */
.tc-main {
padding: 3rem 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
min-height: 100vh;
}
.tc-card {
background: var(--white-color);
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
padding: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.tc-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
}
.tc-card:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Table of Contents */
.tc-toc {
position: sticky;
top: 2rem;
}
.tc-toc h6 {
color: var(--black-color);
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tc-toc h6::before {
content: '📋';
font-size: 1rem;
}
#tc-search {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 0.875rem;
transition: all 0.3s ease;
margin-bottom: 1.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px;
padding-right: 2.5rem;
}
#tc-search:focus {
border-color: var(--main-color);
box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
background-color: var(--white-color);
}
.tc-toc-list {
list-style: none;
padding: 0;
margin: 0;
max-height: calc(100vh - 300px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--main-color) #f1f5f9;
}
.tc-toc-list::-webkit-scrollbar {
width: 4px;
}
.tc-toc-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 2px;
}
.tc-toc-list::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--main-color), var(--secondary-color));
border-radius: 2px;
}
.tc-toc-list li {
margin-bottom: 0.375rem;
position: relative;
}
.tc-toc-list a {
display: flex;
align-items: center;
padding: 0.875rem 0rem;
color: var(--text-color);
text-decoration: none;
border-radius: 8px;
font-size: 0.9375rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-left: 3px solid transparent;
}
.tc-toc-list a::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--main-color), var(--secondary-color));
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.tc-toc-list a:hover {
background: rgba(224, 2, 67, 0.05);
color: var(--main-color);
padding-left: 1.25rem;
}
.tc-toc-list a:hover::before {
transform: translateX(0);
}
.tc-toc-list a.active {
background: linear-gradient(135deg, rgba(224, 2, 67, 0.1), rgba(248, 213, 83, 0.1));
color: var(--main-color);
font-weight: 700;
border-left: 3px solid var(--main-color);
padding-left: 1.25rem;
}
.tc-toc-list a.active::before {
transform: translateX(0);
}
/* Content Sections */
.tc-content .tc-card {
padding: 3rem;
counter-reset: section;
}
.tc-section {
margin-bottom: 2.5rem;
/* padding-bottom: 3.5rem; */
border-bottom: 1px solid #e2e8f0;
scroll-margin-top: 1rem;
counter-increment: section;
position: relative;
}
.tc-section:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.tc-section h3 {
color: var(--black-color);
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 1.5rem;
position: relative;
display: flex;
align-items: center;
gap: 1rem;
}
/* .tc-section h3::before {
content: counter(section) '.';
color: var(--main-color);
font-size: 1.5rem;
font-weight: 900;
opacity: 0.8;
} */
.tc-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--secondary-color), #c00239);
color: #1e293b;
padding: 0.5rem 1.25rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(248, 213, 83, 0.3);
}
.tc-callout {
background: linear-gradient(135deg, rgba(224, 2, 67, 0.05), rgba(248, 213, 83, 0.05));
border-left: 4px solid var(--main-color);
padding: 1.5rem;
border-radius: 0 12px 12px 0;
margin: 1.5rem 0;
position: relative;
overflow: hidden;
}
.tc-callout::before {
content: 'ℹ️';
position: absolute;
right: 1rem;
top: 1rem;
opacity: 0.2;
font-size: 2rem;
}
.tc-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.tc-list li {
padding: 0.875rem 0 0.875rem 2rem;
color: var(--text-color);
position: relative;
line-height: 1.7;
border-bottom: 1px dashed #e2e8f0;
}
.tc-list li:last-child {
border-bottom: none;
}
.tc-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--main-color);
font-weight: bold;
font-size: 1.2rem;
}
/* Accordion */
.tc-accordion {
margin: 1rem 0;
border: 2px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
background: #f8fafc;
}
.tc-acc-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
background: #f8fafc;
border: none;
text-align: left;
color: var(--black-color);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.125rem;
}
.tc-acc-trigger:hover {
background: rgba(224, 2, 67, 0.05);
color: var(--main-color);
}
.tc-acc-trigger[aria-expanded="true"] {
background: linear-gradient(135deg, rgba(224, 2, 67, 0.1), rgba(248, 213, 83, 0.1));
color: var(--main-color);
border-bottom: 2px solid var(--main-color);
}
.tc-acc-trigger i {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-color);
}
.tc-acc-trigger[aria-expanded="true"] i {
transform: rotate(180deg);
color: var(--main-color);
}
.tc-acc-panel {
background: var(--white-color);
padding: 0;
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tc-acc-panel:not(.d-none) {
padding: 1.5rem;
max-height: 1000px;
}
/* Text Highlight */
mark {
background: linear-gradient(120deg, rgba(248, 213, 83, 0.3) 0%, rgba(248, 213, 83, 0.7) 100%);
padding: 0.125rem 0.375rem;
border-radius: 3px;
color: inherit;
font-weight: 600;
}
/* Acceptance Toast */
.tc-toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background: linear-gradient(135deg, var(--main-color), #ff2e63);
color: var(--white-color);
padding: 1.25rem 1.75rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(224, 2, 67, 0.3);
transform: translateY(100px);
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 1000;
max-width: 350px;
display: flex;
align-items: center;
gap: 1rem;
}
.tc-toast.show {
transform: translateY(0);
opacity: 1;
}
.tc-toast-icon {
font-size: 1.5rem;
}
.tc-toast-content {
flex: 1;
}
.tc-toast-content strong {
display: block;
font-size: 1rem;
margin-bottom: 0.25rem;
}
.tc-toast-content .small {
opacity: 0.9;
font-size: 0.875rem;
}
/* Floating Scroll to Top Button */
.tc-scroll-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--main-color), #ff2e63);
color: var(--white-color);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
box-shadow: 0 6px 20px rgba(224, 2, 67, 0.4);
font-size: 1.25rem;
}
.tc-scroll-top:hover {
transform: translateY(-5px) scale(1);
box-shadow: 0 12px 30px rgba(224, 2, 67, 0.5);
}
.tc-scroll-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Responsive Design */
@media (max-width: 1200px) {
.tc-content .tc-card {
padding: 2rem;
}
.tc-section {
margin-bottom: 2.5rem;
padding-bottom: 2.5rem;
}
}
@media (max-width: 992px) {
.tc-title {
font-size: 2rem;
}
.tc-cta-row {
width: 100%;
margin-top: 1.5rem;
}
.tc-btn {
flex: 1;
min-width: 200px;
justify-content: center;
}
.tc-toc {
position: static;
margin-bottom: 2rem;
}
.tc-toc-list {
max-height: none;
}
.tc-content .tc-card {
padding: 1.75rem;
}
}
@media (max-width: 768px) {
.tc-hero {
padding: 2rem 0 1.5rem;
}
.tc-title {
font-size: 1.75rem;
}
.tc-section h3 {
font-size: 1.5rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.tc-tag {
align-self: flex-start;
}
.tc-cta-row {
flex-direction: column;
}
.tc-btn {
width: 100%;
}
}
/* Print Styles */
@media print {
.tc-hero {
background: #fff !important;
color: #000 !important;
padding: 1rem 0 !important;
}
.tc-breadcrumb,
.tc-cta-row,
.tc-toc,
.tc-scroll-top,
.tc-toast {
display: none !important;
}
.tc-title {
color: #000 !important;
font-size: 2rem !important;
}
.tc-sub {
color: #666 !important;
}
.tc-card {
box-shadow: none !important;
border: 1px solid #ddd !important;
page-break-inside: avoid;
}
.tc-section {
page-break-inside: avoid;
break-inside: avoid;
}
.tc-list li {
border-bottom: 1px solid #ddd !important;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.tc-animate {
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tc-pulse {
animation: pulse 2s infinite;
}
/* ============ plateform page start here=================== */
.instagram-page{
padding: 50px 0px;
}
.instagram-page .insta-images{
height: 400px;
width: 100%;
object-fit: cover;
}
.instagram-page .insta-images img{
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
CENTRALIZED PAGE-SPECIFIC STYLES
All internal styles migrated from frontend blade templates
========================================================================== */
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > BLOG-DETAIL
Source: resources\views\frontend\page\blog-detail.blade.php
-------------------------------------------------------------------------- */
.blog-detail {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.blog-detail .ff-serif {
font-family: 'Poppins', sans-serif;
}
.blog-detail .bg-brand {
background-color: #E00243 !important;
}
.blog-detail .text-brand {
color: #E00243 !important;
}
.blog-detail .text-muted-bp {
color: #64748b !important;
}
.blog-detail .bp-avatar {
border: 2px solid #E00243;
}
/* Hero */
.blog-detail .bd-hero {
position: relative;
height: 500px;
overflow: hidden;
}
.blog-detail .bd-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-detail .bd-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .85) 30%, rgba(0, 0, 0, .2) 100%);
}
.blog-detail .bd-hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3rem 0;
}
/* Content */
.blog-detail .bd-content {
background: #fff;
border-radius: 1rem;
box-shadow: 0 4px 30px rgba(0, 0, 0, .06);
margin-top: -3rem;
position: relative;
z-index: 2;
}
.blog-detail .bd-body {
font-size: 1.05rem;
line-height: 1.85;
color: #334155;
}
.blog-detail .bd-body p {
margin-bottom: 1.25rem;
}
.blog-detail .bd-body img {
max-width: 100%;
border-radius: .5rem;
margin: 1rem 0;
}
.blog-detail .bd-body h2,
.blog-detail .bd-body h3,
.blog-detail .bd-body h4 {
color: #0f172a;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
}
.blog-detail .bd-body ul,
.blog-detail .bd-body ol {
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
.blog-detail .bd-body li {
margin-bottom: .5rem;
}
.blog-detail .bd-body blockquote {
border-left: 4px solid #E00243;
padding: 1rem 1.5rem;
margin: 1.5rem 0;
background: #fef2f2;
border-radius: 0 .5rem .5rem 0;
font-style: italic;
color: #475569;
}
/* Author Card */
.blog-detail .bd-author-card {
background: linear-gradient(135deg, #0f172a, #1e293b);
border-radius: 1rem;
color: #fff;
overflow: hidden;
}
.blog-detail .bd-author-card .bd-author-img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #E00243;
}
.blog-detail .bd-author-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: #fff;
text-decoration: none;
transition: all .3s ease;
}
.blog-detail .bd-author-social a:hover {
background: #E00243;
transform: translateY(-2px);
}
/* Related card */
.blog-detail .bd-related-card {
transition: transform .3s ease, box-shadow .3s ease;
border: 1.5px solid #f1f5f9 !important;
overflow: hidden;
}
.blog-detail .bd-related-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(224, 2, 67, .1) !important;
border-color: #E00243 !important;
}
.blog-detail .bd-related-img {
height: 200px;
overflow: hidden;
}
.blog-detail .bd-related-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.blog-detail .bd-related-card:hover .bd-related-img img {
transform: scale(1.07);
}
.blog-detail .bp-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-detail .bp-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Share buttons */
.blog-detail .bd-share a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #e2e8f0;
color: #64748b;
text-decoration: none;
transition: all .3s ease;
}
.blog-detail .bd-share a:hover {
border-color: #E00243;
color: #E00243;
transform: translateY(-2px);
}
/* Back button */
.blog-detail .bd-back {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.25rem;
background: rgba(255, 255, 255, .15);
color: #fff;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 2rem;
text-decoration: none;
font-size: .85rem;
font-weight: 500;
transition: all .3s ease;
backdrop-filter: blur(10px);
}
.blog-detail .bd-back:hover {
background: #E00243;
border-color: #E00243;
color: #fff;
}
@media (max-width: 768px) {
.blog-detail .bd-hero {
height: 350px;
}
.blog-detail .bd-content {
margin-top: -2rem;
}
.blog-detail .bd-body {
font-size: 1rem;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > BLOG
Source: resources\views\frontend\page\blog.blade.php
-------------------------------------------------------------------------- */
.blog-page {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.blog-page .ff-serif {
font-family: 'Poppins', sans-serif;
}
.blog-page .bg-brand {
background-color: #E00243 !important;
}
.blog-page .text-brand {
color: #E00243 !important;
}
.blog-page .border-brand {
border-color: #E00243 !important;
}
.blog-page .bg-yellow {
background-color: #E00243 !important;
}
.blog-page .text-muted-bp {
color: #64748b !important;
}
.blog-page .bp-hero-img-wrap {
height: 520px;
overflow: hidden;
border-radius: 1rem;
position: relative;
}
.blog-page .bp-hero-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.blog-page .bp-hero-img-wrap:hover img {
transform: scale(1.05);
}
.blog-page .bp-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .88) 40%, transparent);
border-radius: 1rem;
}
.blog-page .bp-hero-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
}
.blog-page .bp-card-img {
height: 200px;
overflow: hidden;
}
.blog-page .bp-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.blog-page .bp-blog-card:hover .bp-card-img img {
transform: scale(1.07);
}
.blog-page .bp-blog-card {
transition: transform .3s ease, box-shadow .3s ease;
border: 1.5px solid #f1f5f9 !important;
}
.blog-page .bp-blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(224, 2, 67, .1) !important;
border-color: #E00243 !important;
}
.blog-page .bp-h-card {
transition: transform .3s ease, box-shadow .3s ease;
border: 1.5px solid #f1f5f9 !important;
}
.blog-page .bp-h-card:hover {
transform: translateX(4px);
box-shadow: 0 8px 24px rgba(224, 2, 67, .08) !important;
border-color: #E00243 !important;
}
.blog-page .bp-h-card .bp-h-img {
width: 150px;
min-width: 150px;
overflow: hidden;
}
.blog-page .bp-h-card .bp-h-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.blog-page .bp-h-card:hover .bp-h-img img {
transform: scale(1.08);
}
.blog-page .bp-newsletter {
background: #000;
border-radius: 1rem;
position: relative;
overflow: hidden;
}
.blog-page .bp-newsletter::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: #E00243;
opacity: .15;
pointer-events: none;
}
.blog-page .bp-nw-input {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .15);
color: #fff;
border-radius: .5rem;
font-family: 'Poppins', sans-serif;
}
.blog-page .bp-nw-input::placeholder {
color: rgba(255, 255, 255, .35);
}
.blog-page .bp-nw-input:focus {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .3);
box-shadow: none;
outline: none;
}
.blog-page .bp-tl-num {
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 900;
color: #f1f5f9;
line-height: 1;
min-width: 36px;
transition: color .3s ease;
}
.blog-page .bp-tl-item:hover .bp-tl-num {
color: #E00243;
}
.blog-page .bp-tl-item:hover .bp-tl-title {
color: #E00243;
}
.blog-page .bp-tl-title {
transition: color .3s ease;
}
.blog-page .bp-sh-line {
flex: 1;
height: 2px;
background: linear-gradient(to right, #e2e8f0, transparent);
}
.blog-page .bp-tag-item:hover {
background: #E00243 !important;
border-color: #E00243 !important;
color: #000 !important;
}
.blog-page .bp-avatar {
border: 2px solid #E00243;
}
.blog-page .bp-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-page .bp-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-page .bp-header {
border-bottom: 3px solid #E00243;
}
.blog-page .bp-no-content {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #64748b;
}
.blog-page .bp-no-content i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: .4;
}
@media (max-width: 768px) {
.blog-page .bp-hero-img-wrap {
height: 360px;
}
.blog-page .bp-h-card .bp-h-img {
width: 110px;
min-width: 110px;
}
}
@media (max-width: 576px) {
.blog-page .bp-h-card {
flex-direction: column;
height: auto;
}
.blog-page .bp-h-card .bp-h-img {
width: 100%;
min-width: 100%;
height: 160px;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > CAMPAIGNS
Source: resources\views\frontend\page\campaigns.blade.php
-------------------------------------------------------------------------- */
:root {
--hive-400: #fbbf24;
--hive-500: #f59e0b;
--hive-600: #d97706;
--hive-900: #1a1a1a;
--gradient-start: #FBBF24;
--gradient-end: #FDE68A;
}
body {
font-family: 'Poppins', sans-serif;
color: #333;
overflow-x: hidden;
background-color: #f9fafb;
}
/* Custom Hexagon Pattern Background */
.bg-hex-pattern {
background-color: #1a1a1a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23262626' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
position: relative;
overflow: hidden;
}
.bg-hex-pattern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0.95));
z-index: 1;
}
/* Hero Section Styling */
.hero-section {
position: relative;
z-index: 2;
padding-top: 120px;
padding-bottom: 80px;
}
@media (min-width: 768px) {
.hero-section {
padding-top: 140px;
padding-bottom: 100px;
}
}
.hero-badge {
display: inline-block;
background: linear-gradient(90deg, var(--hive-500), var(--hive-400));
color: white;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 20px;
border-radius: 50px;
margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.hero-title {
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
}
.hero-title .gradient-text {
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
margin-top: 5px;
}
@media (min-width: 768px) {
.hero-title {
font-size: 3.5rem;
}
.hero-title .gradient-text {
display: inline;
}
}
@media (min-width: 992px) {
.hero-title {
font-size: 4rem;
}
}
.hero-description {
font-size: 1.125rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 700px;
margin: 0 auto 40px;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
align-items: center;
}
@media (min-width: 576px) {
.hero-buttons {
flex-direction: row;
}
}
.btn-primary-custom {
background: linear-gradient(90deg, var(--hive-500), var(--hive-400));
border: none;
color: white;
font-weight: 600;
padding: 14px 32px;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.btn-primary-custom:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
color: white;
background: linear-gradient(90deg, var(--hive-600), var(--hive-500));
}
.btn-outline-custom {
background: transparent;
border: 2px solid white;
color: white;
font-weight: 600;
padding: 14px 32px;
border-radius: 8px;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background: white;
color: var(--hive-900);
transform: translateY(-2px);
}
/* Section Styling */
.section-title {
font-weight: 800;
color: var(--hive-900);
margin-bottom: 16px;
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--hive-500), var(--hive-400));
border-radius: 2px;
}
.section-title.text-center::after {
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
font-size: 1.125rem;
color: #666;
max-width: 700px;
margin: 0 auto 50px;
}
/* Why Influencer Marketing Cards */
.benefit-card {
background: white;
border-radius: 12px;
padding: 30px 25px;
height: 100%;
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.benefit-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--hive-400);
}
.benefit-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.2));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: var(--hive-500);
font-size: 1.75rem;
}
.benefit-title {
font-weight: 700;
color: var(--hive-900);
margin-bottom: 12px;
font-size: 1.25rem;
}
.benefit-description {
color: #666;
line-height: 1.6;
margin: 0;
}
/* Strategy Section */
.strategy-section {
background: var(--hive-900);
position: relative;
overflow: hidden;
}
.strategy-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
border-radius: 50%;
filter: blur(60px);
}
.strategy-section::after {
content: '';
position: absolute;
bottom: -50%;
left: -10%;
width: 300px;
height: 300px;
background: linear-gradient(135deg, transparent, rgba(245, 158, 11, 0.1));
border-radius: 50%;
filter: blur(60px);
}
.strategy-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 30px;
height: 100%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.strategy-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--hive-500);
transform: translateY(-5px);
}
.strategy-number {
font-size: 3.5rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.1);
line-height: 1;
margin-bottom: 15px;
display: block;
}
.strategy-title {
font-weight: 700;
color: white;
margin-bottom: 12px;
font-size: 1.25rem;
}
.strategy-description {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
font-size: 0.9375rem;
margin: 0;
}
.strategy-border {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--hive-500), var(--hive-400));
}
/* Platforms Section */
.platform-card {
background: white;
border-radius: 12px;
padding: 25px;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.platform-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: var(--hive-400);
}
.platform-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 1.75rem;
}
.platform-icon.instagram {
background: linear-gradient(45deg, #833AB4, #E1306C, #FCAF45);
color: white;
}
.platform-icon.youtube {
background: linear-gradient(45deg, #FF0000, #FF6B6B);
color: white;
}
.platform-icon.linkedin {
background: linear-gradient(45deg, #0077B5, #00A0DC);
color: white;
}
.platform-icon.twitter {
background: linear-gradient(45deg, #1DA1F2, #1DA1F2);
color: white;
}
.platform-title {
font-weight: 700;
color: var(--hive-900);
margin-bottom: 8px;
font-size: 1.125rem;
}
.platform-description {
color: #666;
font-size: 0.875rem;
margin: 0;
}
/* Campaign Types Card */
.campaign-types-card {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid #e5e7eb;
position: relative;
overflow: hidden;
}
.campaign-types-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--hive-400), var(--hive-500));
border-radius: 0 0 0 100%;
opacity: 0.1;
}
.campaign-types-title {
font-weight: 800;
color: var(--hive-900);
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.campaign-types-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 4px;
background: linear-gradient(90deg, var(--hive-500), var(--hive-400));
border-radius: 2px;
}
.campaign-list {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.campaign-list li {
margin-bottom: 12px;
display: flex;
align-items: flex-start;
}
.campaign-list i {
color: var(--hive-500);
margin-right: 12px;
margin-top: 3px;
flex-shrink: 0;
}
.campaign-list span {
color: #555;
font-weight: 500;
}
.deliverables-title {
font-weight: 700;
color: var(--hive-900);
margin-bottom: 15px;
font-size: 1rem;
}
.deliverables-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.deliverable-tag {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.2));
color: var(--hive-600);
font-weight: 600;
font-size: 0.75rem;
padding: 6px 12px;
border-radius: 50px;
border: 1px solid rgba(245, 158, 11, 0.2);
}
/* Why Us Section */
.why-us-section {
background: linear-gradient(135deg, var(--hive-500), var(--hive-600));
position: relative;
overflow: hidden;
}
.why-us-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.3;
}
.why-us-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 30px 25px;
height: 100%;
transition: all 0.3s ease;
}
.why-us-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.3);
}
.why-us-icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: white;
opacity: 0.9;
}
.why-us-title {
font-weight: 700;
color: white;
margin-bottom: 12px;
font-size: 1.125rem;
}
.why-us-description {
color: rgba(255, 255, 255, 0.85);
font-size: 0.875rem;
line-height: 1.6;
margin: 0;
}
/* Contact Section */
.contact-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
.contact-info {
background: linear-gradient(135deg, var(--hive-900), #2d2d2d);
padding: 50px 40px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.contact-title {
font-weight: 800;
color: white;
margin-bottom: 20px;
line-height: 1.2;
}
.contact-description {
color: rgba(255, 255, 255, 0.85);
margin-bottom: 30px;
line-height: 1.6;
}
.contact-email {
display: flex;
align-items: center;
color: var(--hive-400);
font-weight: 600;
margin-top: auto;
}
.contact-email i {
margin-right: 12px;
font-size: 1.25rem;
}
.contact-form {
padding: 50px 40px;
background: #f8f9fa;
}
.form-label {
font-weight: 600;
color: #555;
margin-bottom: 8px;
}
.form-control-custom {
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 12px 16px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.form-control-custom:focus {
border-color: var(--hive-500);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
/* Animations */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 767.98px) {
.hero-section {
padding-top: 100px;
padding-bottom: 60px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-description {
font-size: 1rem;
}
.campaign-types-card,
.contact-info,
.contact-form {
padding: 30px 25px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.hero-title {
font-size: 3rem;
}
}
/* Custom spacing */
.section-py {
padding-top: 80px;
padding-bottom: 80px;
}
@media (min-width: 768px) {
.section-py {
padding-top: 100px;
padding-bottom: 100px;
}
}
/* Utility classes */
.text-hive-500 {
color: var(--hive-500);
}
.bg-hive-500 {
background-color: var(--hive-500);
}
.border-hive-500 {
border-color: var(--hive-500);
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > CASE-STUDY-DETAIL
Source: resources\views\frontend\page\case-study-detail.blade.php
-------------------------------------------------------------------------- */
.cs-detail {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.cs-detail .ff-serif {
font-family: 'Poppins', sans-serif;
}
.cs-detail .bg-brand {
background-color: #E00243 !important;
}
.cs-detail .text-brand {
color: #E00243 !important;
}
.cs-detail .text-muted-cs {
color: #64748b !important;
}
.cs-detail .cd-hero {
position: relative;
height: 500px;
overflow: hidden;
}
.cs-detail .cd-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cs-detail .cd-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .85) 30%, rgba(0, 0, 0, .2) 100%);
}
.cs-detail .cd-hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3rem 0;
}
.cs-detail .cd-content {
background: #fff;
border-radius: 1rem;
box-shadow: 0 4px 30px rgba(0, 0, 0, .06);
margin-top: -3rem;
position: relative;
z-index: 2;
}
.cs-detail .cd-body {
font-size: 1.05rem;
line-height: 1.85;
color: #334155;
}
.cs-detail .cd-body p {
margin-bottom: 1.25rem;
}
.cs-detail .cd-body img {
max-width: 100%;
border-radius: .5rem;
margin: 1rem 0;
}
.cs-detail .cd-body h2,
.cs-detail .cd-body h3,
.cs-detail .cd-body h4 {
color: #0f172a;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
}
.cs-detail .cd-body ul,
.cs-detail .cd-body ol {
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
.cs-detail .cd-body li {
margin-bottom: .5rem;
}
.cs-detail .cd-body blockquote {
border-left: 4px solid #E00243;
padding: 1rem 1.5rem;
margin: 1.5rem 0;
background: #fef2f2;
border-radius: 0 .5rem .5rem 0;
font-style: italic;
color: #475569;
}
.cs-detail .cd-back {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.25rem;
background: rgba(255, 255, 255, .15);
color: #fff;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 2rem;
text-decoration: none;
font-size: .85rem;
font-weight: 500;
transition: all .3s ease;
backdrop-filter: blur(10px);
}
.cs-detail .cd-back:hover {
background: #E00243;
border-color: #E00243;
color: #fff;
}
.cs-detail .cd-industry-badge {
display: inline-block;
background: linear-gradient(135deg, #E00243, #c00239);
color: #1e293b;
padding: 0.3rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cs-detail .cd-section-card {
background: #fff;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
border: 1px solid #f1f5f9;
overflow: hidden;
}
.cs-detail .cd-section-header {
padding: 1.25rem 1.5rem;
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.cs-detail .cd-section-header i {
font-size: 1.3rem;
}
.cs-detail .cd-challenge-header {
background: linear-gradient(135deg, #fef2f2, #fff1f2);
color: #E00243;
border-bottom: 2px solid #E00243;
}
.cs-detail .cd-solution-header {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
color: #16a34a;
border-bottom: 2px solid #16a34a;
}
.cs-detail .cd-results-header {
background: linear-gradient(135deg, #fefce8, #fef9c3);
color: #ca8a04;
border-bottom: 2px solid #E00243;
}
.cs-detail .cd-section-body {
padding: 1.5rem;
font-size: 1rem;
line-height: 1.75;
color: #334155;
}
.cs-detail .cd-section-body p {
margin-bottom: 1rem;
}
.cs-detail .cd-section-body ul,
.cs-detail .cd-section-body ol {
padding-left: 1.5rem;
}
.cs-detail .cd-section-body li {
margin-bottom: .5rem;
}
.cs-detail .cd-share a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #e2e8f0;
color: #64748b;
text-decoration: none;
transition: all .3s ease;
}
.cs-detail .cd-share a:hover {
border-color: #E00243;
color: #E00243;
transform: translateY(-2px);
}
.cs-detail .cd-info-card {
background: linear-gradient(135deg, #0f172a, #1e293b);
border-radius: 1rem;
color: #fff;
overflow: hidden;
}
.cs-detail .cd-related-card {
transition: transform .3s ease, box-shadow .3s ease;
border: 1.5px solid #f1f5f9 !important;
overflow: hidden;
}
.cs-detail .cd-related-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(224, 2, 67, .1) !important;
border-color: #E00243 !important;
}
.cs-detail .cd-related-img {
height: 200px;
overflow: hidden;
}
.cs-detail .cd-related-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.cs-detail .cd-related-card:hover .cd-related-img img {
transform: scale(1.07);
}
.cs-detail .cs-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cs-detail .cs-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.cs-detail .cd-hero {
height: 350px;
}
.cs-detail .cd-content {
margin-top: -2rem;
}
.cs-detail .cd-body {
font-size: 1rem;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > CASE-STUDY
Source: resources\views\frontend\page\case-study.blade.php
-------------------------------------------------------------------------- */
.cs-page {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.cs-page .ff-serif {
font-family: 'Poppins', sans-serif;
}
.cs-page .bg-brand {
background-color: #E00243 !important;
}
.cs-page .text-brand {
color: #E00243 !important;
}
.cs-page .border-brand {
border-color: #E00243 !important;
}
.cs-page .bg-yellow {
background-color: #E00243 !important;
}
.cs-page .text-muted-cs {
color: #64748b !important;
}
.cs-page .cs-header {
border-bottom: 3px solid #E00243;
}
.cs-page .cs-hero-img-wrap {
height: 520px;
overflow: hidden;
border-radius: 1rem;
position: relative;
}
.cs-page .cs-hero-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.cs-page .cs-hero-img-wrap:hover img {
transform: scale(1.05);
}
.cs-page .cs-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .88) 40%, transparent);
border-radius: 1rem;
}
.cs-page .cs-hero-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
}
.cs-page .cs-card-img {
height: 220px;
overflow: hidden;
}
.cs-page .cs-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.cs-page .cs-card:hover .cs-card-img img {
transform: scale(1.07);
}
.cs-page .cs-card {
transition: transform .3s ease, box-shadow .3s ease;
border: 1.5px solid #f1f5f9 !important;
}
.cs-page .cs-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(224, 2, 67, .1) !important;
border-color: #E00243 !important;
}
.cs-page .cs-industry-badge {
display: inline-block;
background: linear-gradient(135deg, #E00243, #c00239);
color: #1e293b;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cs-page .cs-client-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: #64748b;
font-weight: 500;
}
.cs-page .cs-sh-line {
flex: 1;
height: 2px;
background: linear-gradient(to right, #e2e8f0, transparent);
}
.cs-page .cs-filter-btn {
padding: 0.4rem 1rem;
border: 2px solid #e2e8f0;
border-radius: 20px;
background: #fff;
color: #64748b;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.cs-page .cs-filter-btn:hover,
.cs-page .cs-filter-btn.active {
background: #E00243;
color: #fff;
border-color: #E00243;
}
.cs-page .cs-sidebar-card {
transition: transform .3s ease, box-shadow .3s ease;
border: 1.5px solid #f1f5f9 !important;
}
.cs-page .cs-sidebar-card:hover {
transform: translateX(4px);
box-shadow: 0 8px 24px rgba(224, 2, 67, .08) !important;
border-color: #E00243 !important;
}
.cs-page .cs-newsletter {
background: #000;
border-radius: 1rem;
position: relative;
overflow: hidden;
}
.cs-page .cs-newsletter::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: #E00243;
opacity: .15;
pointer-events: none;
}
.cs-page .cs-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cs-page .cs-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cs-page .cs-no-content {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #64748b;
}
.cs-page .cs-no-content i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: .4;
}
.cs-page .cs-read-more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: #E00243;
font-weight: 600;
font-size: 0.85rem;
transition: gap 0.3s ease;
}
.cs-page .cs-card:hover .cs-read-more {
gap: 0.6rem;
}
@media (max-width: 768px) {
.cs-page .cs-hero-img-wrap {
height: 360px;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > INFLUENCER-DETAIL
Source: resources\views\frontend\page\influencer-detail.blade.php
-------------------------------------------------------------------------- */
:root {
--inf-primary: #E00243;
--inf-primary-dark: #c0023d;
--inf-dark: #1e293b;
--inf-light: #f8fafc;
--inf-border: #e2e8f0;
--inf-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--inf-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
--inf-shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
--inf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.inf-detail-page { background: var(--inf-light); }
/* Breadcrumb */
.inf-breadcrumb a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
transition: var(--inf-transition);
}
.inf-breadcrumb a:hover { color: #fff; }
/* Hero Section */
.inf-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 3rem 0;
color: #fff;
position: relative;
overflow: hidden;
}
.inf-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--inf-primary), #E00243);
}
.inf-hero::after {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(224,2,67,0.1) 0%, transparent 70%);
pointer-events: none;
}
.inf-hero-avatar {
position: relative;
width: 160px;
height: 160px;
}
.inf-avatar-img {
width: 160px;
height: 160px;
border-radius: 24px;
object-fit: cover;
border: 4px solid rgba(255,255,255,0.2);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.inf-avatar-placeholder {
width: 160px;
height: 160px;
border-radius: 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255,255,255,0.2);
}
.inf-avatar-placeholder span {
font-size: 48px;
font-weight: 800;
color: #fff;
letter-spacing: 3px;
}
.inf-platform-icon {
position: absolute;
bottom: -8px;
right: -8px;
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
border: 3px solid #0f172a;
}
.inf-platform-icon.instagram { background: #E4405F; }
.inf-platform-icon.youtube { background: #FF0000; }
.inf-platform-icon.facebook { background: #1877F2; }
.inf-platform-icon.linkedin { background: #0A66C2; }
.inf-platform-icon.tiktok { background: #000; }
.inf-platform-icon.twitter { background: #1DA1F2; }
.inf-platform-icon.default { background: #64748b; }
.inf-tier-badge {
padding: 4px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.inf-tier-badge.tier-nano { background: rgba(148,163,184,0.9); color: #fff; }
.inf-tier-badge.tier-micro { background: rgba(59,130,246,0.9); color: #fff; }
.inf-tier-badge.tier-mid { background: rgba(99,102,241,0.9); color: #fff; }
.inf-tier-badge.tier-macro { background: rgba(245,158,11,0.9); color: #fff; }
.inf-tier-badge.tier-mega { background: rgba(224,2,67,0.95); color: #fff; }
.inf-tier-badge.tier-default { background: rgba(30,41,59,0.9); color: #fff; }
.inf-platform-label {
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
color: #fff;
}
.inf-hero-name {
font-size: 2.5rem;
font-weight: 800;
margin: 8px 0 4px;
color: #fff;
letter-spacing: -0.5px;
}
.inf-hero-handle {
font-size: 16px;
color: rgba(255,255,255,0.7);
margin-bottom: 12px;
}
.inf-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.inf-meta-item {
font-size: 14px;
color: rgba(255,255,255,0.7);
display: flex;
align-items: center;
gap: 6px;
}
.inf-meta-item i { color: rgba(255,255,255,0.5); }
.inf-hero-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Buttons */
.inf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: var(--inf-transition);
border: none;
cursor: pointer;
white-space: nowrap;
}
.inf-btn-primary {
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
color: #fff;
}
.inf-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(224,2,67,0.3);
color: #fff;
}
.inf-btn-outline {
background: rgba(255,255,255,0.1);
border: 2px solid rgba(255,255,255,0.3);
color: #fff;
backdrop-filter: blur(10px);
}
.inf-btn-outline:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
color: #fff;
}
.inf-btn-outline-sm {
display: inline-flex;
align-items: center;
padding: 8px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: var(--inf-primary);
border: 2px solid var(--inf-primary);
background: transparent;
transition: var(--inf-transition);
}
.inf-btn-outline-sm:hover {
background: var(--inf-primary);
color: #fff;
}
.inf-btn-primary-sm {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
color: #fff;
transition: var(--inf-transition);
}
.inf-btn-primary-sm:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(224,2,67,0.3);
color: #fff;
}
/* Stats Section */
.inf-stats-section {
padding: 0;
margin-top: -30px;
position: relative;
z-index: 2;
}
.inf-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.inf-stat-card {
background: #fff;
border-radius: 16px;
padding: 24px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--inf-shadow-lg);
transition: var(--inf-transition);
}
.inf-stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--inf-shadow-xl);
}
.inf-stat-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
flex-shrink: 0;
}
.inf-stat-icon.engagement { background: linear-gradient(135deg, #f59e0b, #f97316); }
.inf-stat-icon.price { background: linear-gradient(135deg, #10b981, #059669); }
.inf-stat-icon.platform { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.inf-stat-data { display: flex; flex-direction: column; }
.inf-stat-number {
font-size: 22px;
font-weight: 800;
color: var(--inf-dark);
line-height: 1.2;
}
.inf-stat-label {
font-size: 13px;
color: #94a3b8;
margin-top: 2px;
}
/* Main Content */
.inf-main-content { padding: 40px 0; }
.inf-content-card {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: var(--inf-shadow-md);
}
.inf-section-title {
font-size: 20px;
font-weight: 700;
color: var(--inf-dark);
margin-bottom: 20px;
display: flex;
align-items: center;
}
.inf-section-title i { color: var(--inf-primary); }
.inf-description {
color: #475569;
line-height: 1.8;
font-size: 15px;
}
.inf-description p { margin-bottom: 16px; }
.inf-description p:last-child { margin-bottom: 0; }
.inf-categories { display: flex; flex-wrap: wrap; gap: 10px; }
.inf-category-pill {
padding: 10px 20px;
background: linear-gradient(135deg, rgba(224,2,67,0.06), rgba(224,2,67,0.12));
border: 1px solid rgba(224,2,67,0.15);
border-radius: 30px;
font-size: 14px;
font-weight: 600;
color: var(--inf-primary);
transition: var(--inf-transition);
}
.inf-category-pill:hover {
background: var(--inf-primary);
color: #fff;
transform: translateY(-2px);
}
/* Sidebar */
.inf-sidebar-card {
background: #fff;
border-radius: 20px;
padding: 28px;
box-shadow: var(--inf-shadow-md);
}
.inf-sidebar-title {
font-size: 18px;
font-weight: 700;
color: var(--inf-dark);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--inf-border);
}
.inf-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.inf-info-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--inf-border);
}
.inf-info-list li:last-child { border-bottom: none; }
.inf-info-label {
font-size: 14px;
color: #64748b;
display: flex;
align-items: center;
}
.inf-info-label i { color: #94a3b8; width: 16px; text-align: center; }
.inf-info-value {
font-size: 14px;
font-weight: 600;
color: var(--inf-dark);
}
.inf-tier-text.tier-nano { color: #94a3b8; }
.inf-tier-text.tier-micro { color: #3b82f6; }
.inf-tier-text.tier-mid { color: #6366f1; }
.inf-tier-text.tier-macro { color: #f59e0b; }
.inf-tier-text.tier-mega { color: var(--inf-primary); }
/* CTA Card */
.inf-cta-card {
background: linear-gradient(135deg, #0f172a, #1e293b);
border-radius: 20px;
padding: 32px;
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.inf-cta-card::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(224,2,67,0.15) 0%, transparent 70%);
pointer-events: none;
}
.inf-cta-icon {
width: 64px;
height: 64px;
background: rgba(224,2,67,0.2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #ff6b8a;
margin: 0 auto 16px;
}
.inf-cta-card h4 {
color: #fff;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.inf-cta-card p {
color: #94a3b8;
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
/* Share Buttons */
.inf-share-buttons {
display: flex;
gap: 10px;
}
.inf-share-btn {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
transition: var(--inf-transition);
text-decoration: none;
}
.inf-share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
color: #fff;
}
.inf-share-btn.twitter { background: #1DA1F2; }
.inf-share-btn.facebook { background: #1877F2; }
.inf-share-btn.linkedin { background: #0A66C2; }
.inf-share-btn.whatsapp { background: #25D366; }
/* Related Influencers */
.inf-related-section {
padding: 0 0 60px;
}
.inf-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.inf-related-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--inf-shadow-md);
transition: var(--inf-transition);
}
.inf-related-card:hover {
transform: translateY(-6px);
box-shadow: var(--inf-shadow-xl);
}
.inf-related-img {
position: relative;
height: 180px;
overflow: hidden;
}
.inf-related-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--inf-transition);
}
.inf-related-card:hover .inf-related-img img { transform: scale(1.05); }
.inf-related-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 36px;
font-weight: 800;
}
.inf-related-platform {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff;
}
.inf-related-platform.instagram { background: rgba(228,64,95,0.9); }
.inf-related-platform.youtube { background: rgba(255,0,0,0.9); }
.inf-related-platform.facebook { background: rgba(24,119,242,0.9); }
.inf-related-platform.linkedin { background: rgba(10,102,194,0.9); }
.inf-related-platform.tiktok { background: rgba(0,0,0,0.85); }
.inf-related-platform.twitter { background: rgba(29,161,242,0.9); }
.inf-related-platform.default { background: rgba(100,116,139,0.9); }
.inf-related-tier {
position: absolute;
bottom: 12px;
left: 12px;
padding: 3px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.inf-related-tier.tier-nano { background: rgba(148,163,184,0.9); color: #fff; }
.inf-related-tier.tier-micro { background: rgba(59,130,246,0.9); color: #fff; }
.inf-related-tier.tier-mid { background: rgba(99,102,241,0.9); color: #fff; }
.inf-related-tier.tier-macro { background: rgba(245,158,11,0.9); color: #fff; }
.inf-related-tier.tier-mega { background: rgba(224,2,67,0.95); color: #fff; }
.inf-related-tier.tier-default { background: rgba(30,41,59,0.9); color: #fff; }
.inf-related-body {
padding: 20px;
}
.inf-related-name {
font-size: 16px;
font-weight: 700;
color: var(--inf-dark);
margin: 0 0 4px;
}
.inf-related-handle {
font-size: 13px;
color: #94a3b8;
margin: 0 0 12px;
}
.inf-related-stats {
display: flex;
gap: 16px;
font-size: 13px;
color: #64748b;
}
.inf-related-stats i { color: var(--inf-primary); }
/* Responsive */
@media (max-width: 1024px) {
.inf-stats-grid { grid-template-columns: repeat(2, 1fr); }
.inf-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.inf-hero { padding: 2rem 0; }
.inf-hero-name { font-size: 1.75rem; }
.inf-hero-avatar { width: 120px; height: 120px; }
.inf-avatar-img, .inf-avatar-placeholder { width: 120px; height: 120px; }
.inf-avatar-placeholder span { font-size: 36px; }
.inf-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.inf-stat-card { padding: 16px; }
.inf-stat-number { font-size: 18px; }
.inf-related-grid { grid-template-columns: 1fr; }
.inf-hero-actions { flex-direction: row; flex-wrap: wrap; }
.inf-content-card { padding: 24px; }
}
@media (max-width: 576px) {
.inf-stats-grid { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > INFLUENCER
Source: resources\views\frontend\page\influencer.blade.php
-------------------------------------------------------------------------- */
:root {
--inf-primary: #E00243;
--inf-primary-dark: #c0023d;
--inf-secondary: #6366f1;
--inf-dark: #1e293b;
--inf-light: #f8fafc;
--inf-border: #e2e8f0;
--inf-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--inf-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--inf-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
--inf-shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
--inf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.influencer-pro-page { background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); min-height: 80vh; }
/* Sidebar */
.filters-sidebar {
background: #fff;
border-radius: 20px;
box-shadow: var(--inf-shadow-md);
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.sidebar-header {
padding: 24px;
border-bottom: 1px solid var(--inf-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-header h5 { font-size: 18px; font-weight: 700; color: var(--inf-dark); }
.sidebar-header .btn-link {
color: var(--inf-primary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.filters-body { padding: 20px 24px; }
.filter-group {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--inf-border);
}
.filter-group:last-child { border-bottom: none; }
.filter-title {
font-weight: 600;
font-size: 15px;
color: var(--inf-dark);
padding: 8px 0;
}
.filter-content { padding-top: 12px; }
.modern-input, .modern-select {
border: 2px solid var(--inf-border);
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
transition: var(--inf-transition);
}
.modern-input:focus, .modern-select:focus {
border-color: var(--inf-primary);
box-shadow: 0 0 0 4px rgba(224, 2, 67, 0.1);
outline: none;
}
.influencer-types {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.type-badge { position: relative; cursor: pointer; }
.type-badge input { position: absolute; opacity: 0; }
.type-badge span {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px;
border: 2px solid var(--inf-border);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
transition: var(--inf-transition);
}
.type-badge small { font-size: 11px; font-weight: 400; color: #94a3b8; margin-top: 2px; }
.type-badge input:checked ~ span {
border-color: var(--inf-primary);
background: rgba(224, 2, 67, 0.05);
color: var(--inf-primary);
}
.sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--inf-border); }
/* Results Header */
.results-header {
background: #fff;
padding: 24px;
border-radius: 16px;
box-shadow: var(--inf-shadow-sm);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.results-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--inf-dark); }
.results-count { margin: 4px 0 0; color: #64748b; font-size: 14px; }
.count-number { font-weight: 700; color: var(--inf-primary); }
.auth-hint { color: #94a3b8; font-size: 13px; }
.btn-filter-mobile {
padding: 10px 18px;
border: 2px solid var(--inf-border);
border-radius: 10px;
background: #fff;
font-weight: 600;
cursor: pointer;
transition: var(--inf-transition);
}
.btn-filter-mobile:hover { border-color: var(--inf-primary); color: var(--inf-primary); }
/* Active Filters */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-tag {
padding: 8px 16px;
background: rgba(224, 2, 67, 0.08);
border: 1px solid rgba(224, 2, 67, 0.2);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--inf-primary);
display: flex;
align-items: center;
gap: 8px;
}
.filter-tag a { color: var(--inf-primary); text-decoration: none; }
/* Influencer Grid */
.influencer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.influencer-card-pro { transition: var(--inf-transition); }
.card-inner {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--inf-shadow-md);
transition: var(--inf-transition);
height: 100%;
display: flex;
flex-direction: column;
}
.card-inner:hover {
transform: translateY(-8px);
box-shadow: var(--inf-shadow-xl);
}
.card-header-img {
position: relative;
height: 200px;
overflow: hidden;
}
.profile-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--inf-transition);
}
.card-inner:hover .profile-img { transform: scale(1.05); }
.profile-img-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.profile-img-placeholder i { font-size: 32px; margin-bottom: 8px; opacity: 0.7; }
.profile-img-placeholder span { font-size: 32px; font-weight: 800; letter-spacing: 2px; }
.card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent 50%);
padding: 16px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.platform-badges { display: flex; gap: 6px; }
.platform-badge {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
backdrop-filter: blur(10px);
color: #fff;
}
.platform-badge.instagram { background: rgba(228, 64, 95, 0.9); }
.platform-badge.youtube { background: rgba(255, 0, 0, 0.9); }
.platform-badge.facebook { background: rgba(24, 119, 242, 0.9); }
.platform-badge.linkedin { background: rgba(10, 102, 194, 0.9); }
.platform-badge.tiktok { background: rgba(0, 0, 0, 0.85); }
.platform-badge.twitter { background: rgba(29, 161, 242, 0.9); }
.platform-badge.default { background: rgba(100, 116, 139, 0.9); }
.tier-badge {
position: absolute;
bottom: 12px;
left: 12px;
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.tier-nano { background: rgba(148,163,184,0.9); color: #fff; }
.tier-micro { background: rgba(59,130,246,0.9); color: #fff; }
.tier-mid { background: rgba(99,102,241,0.9); color: #fff; }
.tier-macro { background: rgba(245,158,11,0.9); color: #fff; }
.tier-mega { background: rgba(224,2,67,0.95); color: #fff; }
.tier-default { background: rgba(30,41,59,0.9); color: #fff; }
.card-body-pro {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.profile-name { font-size: 18px; font-weight: 700; margin: 0; color: var(--inf-dark); }
.profile-username { font-size: 13px; color: #94a3b8; margin: 4px 0 0; }
.rating-badge {
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
padding: 6px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
color: #fff;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.stat-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--inf-light);
border-radius: 10px;
}
.stat-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--inf-primary);
font-size: 14px;
}
.stat-data { display: flex; flex-direction: column; }
.stat-value { font-size: 15px; font-weight: 700; color: var(--inf-dark); line-height: 1; }
.stat-label { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.category-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.category-tag {
padding: 5px 12px;
background: rgba(224, 2, 67, 0.06);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--inf-primary);
}
.meta-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
margin-bottom: 16px;
border-top: 1px solid var(--inf-border);
border-bottom: 1px solid var(--inf-border);
}
.location, .price { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64748b; }
.location i, .price i { color: #94a3b8; }
.price { font-weight: 700; color: var(--inf-dark); }
.card-actions { display: flex; gap: 8px; margin-top: auto; }
.btn-action {
flex: 1;
padding: 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(--inf-transition);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.btn-primary-action {
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
color: #fff;
}
.btn-primary-action:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(224, 2, 67, 0.3);
color: #fff;
}
.btn-secondary-action {
background: var(--inf-light);
color: var(--inf-primary);
padding: 12px 16px;
flex: 0;
}
.btn-secondary-action:hover { background: rgba(224, 2, 67, 0.1); color: var(--inf-primary); }
/* Login Banner */
.login-banner {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border-radius: 20px;
padding: 40px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.login-banner::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(224,2,67,0.15) 0%, transparent 70%);
pointer-events: none;
}
.login-banner-content {
display: flex;
align-items: center;
gap: 24px;
position: relative;
z-index: 1;
}
.login-banner-icon {
width: 64px;
height: 64px;
background: rgba(224, 2, 67, 0.2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ff6b8a;
flex-shrink: 0;
}
.login-banner-text { flex: 1; }
.login-banner-text h5 { color: #fff; margin-bottom: 4px; font-size: 18px; }
.login-banner-text p { color: #94a3b8; margin: 0; font-size: 14px; }
.login-banner-btn {
padding: 14px 28px;
border-radius: 12px;
font-weight: 600;
white-space: nowrap;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 80px 20px;
background: #fff;
border-radius: 20px;
box-shadow: var(--inf-shadow-sm);
}
.empty-state-icon {
width: 80px;
height: 80px;
background: var(--inf-light);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 32px;
color: #94a3b8;
}
.empty-state h4 { color: var(--inf-dark); margin-bottom: 8px; }
.empty-state p { color: #64748b; margin-bottom: 24px; }
/* Pagination */
.pagination-wrapper .pagination {
display: flex;
justify-content: center;
gap: 6px;
}
.pagination-wrapper .page-link {
border-radius: 10px;
border: 2px solid var(--inf-border);
color: var(--inf-dark);
font-weight: 600;
padding: 8px 16px;
transition: var(--inf-transition);
}
.pagination-wrapper .page-link:hover {
border-color: var(--inf-primary);
color: var(--inf-primary);
}
.pagination-wrapper .page-item.active .page-link {
background: var(--inf-primary);
border-color: var(--inf-primary);
color: #fff;
}
@media (max-width: 1024px) {
.influencer-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
}
@media (max-width: 768px) {
.influencer-grid { grid-template-columns: 1fr; }
.results-header { flex-direction: column; align-items: flex-start; }
.login-banner-content { flex-direction: column; text-align: center; }
.login-banner { padding: 30px 20px; }
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > LOGIN > BRAND-LOGIN
Source: resources\views\frontend\page\login\brand-login.blade.php
-------------------------------------------------------------------------- */
:root {
--brand-accent: #E00240;
--brand-accent-hover: #c00236;
--brand-black: #000000;
--brand-border: #e5e7eb;
--brand-light: #f8f9fa;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
color: var(--brand-black);
min-height: 100vh;
overflow-x: hidden;
}
.brand-bg {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.brand-bg .circle-1 {
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 500px;
background-color: rgba(224, 2, 64, 0.05);
border-radius: 50%;
filter: blur(100px);
}
.brand-bg .circle-2 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background-color: #f8f9fa;
border-radius: 50%;
filter: blur(80px);
}
.card-custom {
border-radius: 1rem;
border: 1px solid var(--brand-border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
max-width: 1350px;
margin: 0 auto;
}
.btn-brand {
background-color: var(--brand-accent);
border-color: var(--brand-accent);
color: white;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.btn-brand:hover {
background-color: var(--brand-accent-hover);
border-color: var(--brand-accent-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(224, 2, 64, 0.15);
}
.form-control-custom {
border-radius: 0.5rem;
border: 1px solid #dee2e6;
background-color: var(--brand-light);
padding: 0.75rem 1rem;
transition: all 0.2s ease;
}
.form-control-custom:focus {
border-color: var(--brand-accent);
box-shadow: 0 0 0 0.2rem rgba(224, 2, 64, 0.25);
background-color: white;
}
.section-number {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--brand-black);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 600;
margin-right: 0.75rem;
}
.section-title {
font-weight: 700;
font-size: 1.125rem;
color: var(--brand-black);
margin-bottom: 0;
}
.badge-brand {
background-color: rgba(224, 2, 64, 0.1);
color: var(--brand-accent);
border: 1px solid rgba(224, 2, 64, 0.2);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
text-transform: uppercase;
}
.header-section {
border-bottom: 1px solid var(--brand-border);
padding: 1.5rem 2rem;
}
.content-section {
padding: 1.5rem 2rem;
}
.footer-section {
border-top: 1px solid var(--brand-border);
padding: 1.5rem 2rem;
background-color: var(--brand-light);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.form-check-input:checked {
background-color: var(--brand-accent);
border-color: var(--brand-accent);
}
.form-check-input:focus {
border-color: var(--brand-accent);
box-shadow: 0 0 0 0.2rem rgba(224, 2, 64, 0.25);
}
.btn-back {
color: var(--brand-black);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.btn-back:hover {
color: var(--brand-accent);
}
.alert {
border-radius: 0.5rem;
border: none;
}
@media (max-width: 768px) {
.header-section,
.content-section,
.footer-section {
padding: 1.25rem 1rem;
}
.card-custom {
margin: 1rem;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > LOGIN > LOGIN
Source: resources\views\frontend\page\login\login.blade.php
-------------------------------------------------------------------------- */
:root {
--brand-accent: #E00240;
--brand-accent-hover: #c00236;
--brand-black: #000000;
--brand-border: #e5e7eb;
--brand-light: #f8f9fa;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
color: var(--brand-black);
min-height: 100vh;
overflow-x: hidden;
}
.login-bg {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.login-bg .circle-1 {
position: absolute;
top: 10%;
right: 10%;
width: 400px;
height: 400px;
background-color: rgba(224, 2, 64, 0.03);
border-radius: 50%;
filter: blur(80px);
}
.login-bg .circle-2 {
position: absolute;
bottom: 10%;
left: 10%;
width: 300px;
height: 300px;
background-color: #f8f9fa;
border-radius: 50%;
filter: blur(60px);
}
.card-custom {
border-radius: 1.25rem;
border: 1px solid var(--brand-border);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
max-width: 1350px;
margin: 0 auto;
overflow: hidden;
}
.card-custom:hover {
box-shadow: 0 15px 35px rgba(224, 2, 64, 0.12);
}
.login-content {
padding: 2.5rem;
background-color: white;
}
.btn-brand {
background-color: var(--brand-accent);
border-color: var(--brand-accent);
color: white;
font-weight: 600;
padding: 0.875rem 1.75rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.btn-brand:hover {
background-color: var(--brand-accent-hover);
border-color: var(--brand-accent-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(224, 2, 64, 0.15);
}
.form-control-custom {
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background-color: white;
padding: 0.875rem 1rem;
transition: all 0.2s ease;
font-size: 0.9375rem;
}
.form-control-custom:focus {
border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(224, 2, 64, 0.1);
background-color: white;
}
.input-with-icon {
position: relative;
}
.input-with-icon .icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 1rem;
}
.input-with-icon input {
padding-left: 3rem;
}
.form-check-input:checked {
background-color: var(--brand-accent);
border-color: var(--brand-accent);
}
.form-check-input:focus {
border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(224, 2, 64, 0.1);
}
.tab-content {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-tabs {
border-bottom: 2px solid var(--brand-border);
margin-bottom: 2rem;
}
.nav-tabs .nav-link {
border: none;
background: none;
color: #64748b;
font-weight: 600;
padding: 0.75rem 1.5rem;
margin-right: 1rem;
border-radius: 0.5rem 0.5rem 0 0;
transition: all 0.2s ease;
position: relative;
}
.nav-tabs .nav-link:hover {
color: var(--brand-black);
background-color: rgba(224, 2, 64, 0.05);
}
.nav-tabs .nav-link.active {
color: var(--brand-accent);
background-color: transparent;
border-bottom: 3px solid var(--brand-accent);
}
.nav-tabs .nav-link.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 3px;
background-color: var(--brand-accent);
border-radius: 3px 3px 0 0;
}
.user-type-icon {
width: 56px;
height: 56px;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.brand-icon {
background-color: rgba(224, 2, 64, 0.1);
color: var(--brand-accent);
}
.creator-icon {
background-color: rgba(30, 58, 138, 0.1);
color: #1e3a8a;
}
.separator {
display: flex;
align-items: center;
text-align: center;
margin: 1.5rem 0;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--brand-border);
}
.separator span {
padding: 0 1rem;
color: #94a3b8;
font-size: 0.875rem;
font-weight: 500;
}
.social-login-btn {
border: 1px solid var(--brand-border);
background-color: white;
color: var(--brand-black);
font-weight: 500;
padding: 0.75rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.social-login-btn:hover {
background-color: var(--brand-light);
border-color: #cbd5e1;
transform: translateY(-1px);
}
.google-btn {
color: #dc2626;
}
.facebook-btn {
color: #2563eb;
}
.linkedin-btn {
color: #0a66c2;
}
.feature-list {
list-style: none;
padding-left: 0;
}
.feature-list li {
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
color: #475569;
}
.feature-list li i {
color: var(--brand-accent);
font-size: 0.875rem;
}
.login-sidebar {
background: linear-gradient(135deg, rgba(224, 2, 64, 0.02) 0%, rgba(224, 2, 64, 0.05) 100%);
border-right: 1px solid var(--brand-border);
padding: 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 600px;
}
.login-main {
padding: 2.5rem;
}
@media (max-width: 768px) {
.login-sidebar {
display: none;
}
.login-content,
.login-main {
padding: 1.5rem;
}
.card-custom {
margin: 1rem;
}
}
.fade-in {
animation: fadeIn 0.3s ease;
}
.password-toggle {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
transition: color 0.2s ease;
z-index: 10;
}
.password-toggle:hover {
color: var(--brand-accent);
}
/* Hide tabs when only one type is shown */
.single-type-mode .nav-tabs {
display: none;
}
.single-type-mode .login-main {
padding-top: 3rem;
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > LOGIN > REGISTER-CREATOR
Source: resources\views\frontend\page\login\register-creator.blade.php
-------------------------------------------------------------------------- */
:root {
--brand-accent: #E00240;
--brand-accent-hover: #c00236;
--brand-black: #000000;
--brand-border: #e5e7eb;
--brand-light: #f8f9fa;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
color: var(--brand-black);
min-height: 100vh;
overflow-x: hidden;
}
.creator-bg {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.creator-bg .circle-1 {
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 500px;
background-color: rgba(224, 2, 64, 0.05);
border-radius: 50%;
filter: blur(100px);
}
.creator-bg .circle-2 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background-color: #f8f9fa;
border-radius: 50%;
filter: blur(80px);
}
.card-custom {
border-radius: 1rem;
border: 1px solid var(--brand-border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
max-width: 1350px;
margin: 0 auto;
}
.btn-brand {
background-color: var(--brand-accent);
border-color: var(--brand-accent);
color: white;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.btn-brand:hover {
background-color: var(--brand-accent-hover);
border-color: var(--brand-accent-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(224, 2, 64, 0.15);
}
.form-control-custom {
border-radius: 0.5rem;
border: 1px solid #dee2e6;
background-color: var(--brand-light);
padding: 0.75rem 1rem;
transition: all 0.2s ease;
}
.form-control-custom:focus {
border-color: var(--brand-accent);
box-shadow: 0 0 0 0.2rem rgba(224, 2, 64, 0.25);
background-color: white;
}
.section-number {
width: 2rem;
height: 2rem;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 600;
margin-right: 0.75rem;
}
.section-number.brand {
background-color: var(--brand-black);
}
.section-number.accent {
background-color: var(--brand-accent);
}
.section-title {
font-weight: 700;
font-size: 1.125rem;
color: var(--brand-black);
margin-bottom: 0;
}
.category-tag {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 2rem;
border: 1px solid var(--brand-border);
background-color: white;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
}
.category-checkbox:checked+.category-tag {
background-color: var(--brand-accent);
color: white;
border-color: var(--brand-accent);
}
.badge-creator {
background-color: rgba(224, 2, 64, 0.1);
color: var(--brand-accent);
border: 1px solid rgba(224, 2, 64, 0.2);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
text-transform: uppercase;
}
.header-section {
border-bottom: 1px solid var(--brand-border);
padding: 1.5rem 2rem;
}
.content-section {
padding: 1.5rem 2rem;
}
.footer-section {
border-top: 1px solid var(--brand-border);
padding: 1.5rem 2rem;
background-color: var(--brand-light);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.form-check-input:checked {
background-color: var(--brand-accent);
border-color: var(--brand-accent);
}
.form-check-input:focus {
border-color: var(--brand-accent);
box-shadow: 0 0 0 0.2rem rgba(224, 2, 64, 0.25);
}
.highlighted-section {
background-color: var(--brand-light);
border-left: 4px solid var(--brand-accent);
border-radius: 0 0.5rem 0.5rem 0;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.input-with-icon {
position: relative;
}
.input-with-icon .icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
}
.input-with-icon input {
padding-left: 3rem;
}
.btn-back {
color: var(--brand-black);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}
.btn-back:hover {
color: var(--brand-accent);
}
.alert {
border-radius: 0.5rem;
border: none;
}
@media (max-width: 768px) {
.header-section,
.content-section,
.footer-section {
padding: 1.25rem 1rem;
}
.card-custom {
margin: 1rem;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > PLATEFORM > FACEBOOK
Source: resources\views\frontend\page\plateform\facebook.blade.php
-------------------------------------------------------------------------- */
:root {
/* Facebook Brand Palette */
--brand-primary: #1877F2; /* Facebook Blue */
--brand-dark: #150D14;
--brand-white: #FFFFFF;
--brand-light-bg: #f0f7ff;
/* Signature Gradient: Bright Blue -> Deep Blue */
--brand-gradient: linear-gradient(135deg, #1877F2 0%, #0064e0 100%);
--brand-gradient-hover: linear-gradient(135deg, #166fe5 0%, #0050b3 100%);
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
scroll-behavior: smooth;
}
/* Color Utilities */
/* Gradient Text Utility */
.text-brand {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-brand-solid { color: var(--brand-primary) !important; }
.bg-brand {
background: var(--brand-gradient) !important;
}
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-light { background-color: var(--brand-light-bg) !important; }
/* Gradient Buttons */
.btn-brand {
background: var(--brand-gradient);
color: white;
border: none;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-brand:hover {
background: var(--brand-gradient-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4); /* Blue Glow */
}
.btn-outline-custom {
background-color: white;
color: var(--brand-dark);
border: 1px solid #dee2e6;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background-color: #f0f7ff;
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.hover-brand:hover {
color: var(--brand-primary) !important;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 700;
font-size: 1.25rem;
color: var(--brand-dark);
}
.nav-link {
color: #666;
font-weight: 500;
margin: 0 10px;
}
.nav-link:hover, .nav-link.active {
color: var(--brand-primary);
}
.logo-box {
width: 32px;
height: 32px;
background: var(--brand-gradient);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 8px;
}
/* Hero */
.hexagon-bg {
background-color: #ffffff;
opacity: 0.4;
background-image: radial-gradient(#1877F2 0.75px, transparent 0.75px), radial-gradient(#1877F2 0.75px, #ffffff 0.75px);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
}
.hero-section {
position: relative;
padding-top: 140px;
padding-bottom: 100px;
overflow: hidden;
}
.hero-blob {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
z-index: 0;
}
.blob-1 { background-color: #1877F2; top: -50px; right: -50px; }
.blob-2 { background-color: #00C6FF; bottom: -50px; left: -50px; }
.gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
background-color: #e7f3ff;
border: 1px solid rgba(24, 119, 242, 0.2);
color: #1877F2;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
}
/* Mockup */
.mockup-container {
margin-top: -60px;
position: relative;
z-index: 10;
}
.browser-window {
background: var(--brand-dark);
border-radius: 16px;
padding: 8px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.browser-header {
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.browser-url {
background: rgba(255,255,255,0.1);
color: #888;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 4px;
margin: 0 auto;
}
.dashboard-layout {
display: flex;
min-height: 600px;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.dash-sidebar {
width: 250px;
background-color: var(--brand-dark);
color: white;
padding: 20px;
display: none; /* Hidden on mobile by default */
}
@media (min-width: 768px) {
.dash-sidebar { display: block; }
}
.dash-nav-item {
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
cursor: pointer;
margin-bottom: 5px;
font-size: 0.9rem;
}
.dash-nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.dash-nav-item.active { background: rgba(255,255,255,0.1); color: white; font-weight: 500; }
.dash-main {
flex: 1;
background-color: #f8f9fa;
padding: 24px;
overflow-y: auto;
}
.stat-card {
background: white;
padding: 16px;
border-radius: 12px;
border: 1px solid #eee;
height: 100%;
}
/* Features */
.feature-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: transform 0.3s;
}
.group:hover .feature-icon-box { transform: scale(1.1); }
.bg-icon-blue { background-color: #e7f3ff; color: #1877F2; }
.bg-icon-teal { background-color: #e0f2f1; color: #009688; }
.bg-icon-indigo { background-color: #e8eaf6; color: #3f51b5; }
/* Dark Section */
.dark-data-section {
background-color: var(--brand-dark);
color: white;
position: relative;
overflow: hidden;
padding: 100px 0;
}
/* Testimonials */
.carousel-indicators [data-bs-target] {
background-color: var(--brand-primary);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
opacity: 0.5;
margin: 0 4px;
}
.carousel-indicators .active {
opacity: 1;
transform: scale(1.2);
}
/* FAQs */
.accordion-button:not(.collapsed) {
color: #1877F2;
background-color: #e7f3ff;
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(24, 119, 242, 0.3);
}
.accordion-button::after {
background-size: 1rem;
}
.accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
/* Footer */
footer {
background-color: var(--brand-dark);
color: #adb5bd;
padding: 60px 0 0;
}
footer h5 { color: white; font-weight: 600; margin-bottom: 20px; }
footer a { color: #adb5bd; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--brand-primary); }
/* Helpers */
.text-small { font-size: 0.875rem; }
.text-xsmall { font-size: 0.75rem; }
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > PLATEFORM > INSTAGRAM
Source: resources\views\frontend\page\plateform\instagram.blade.php
-------------------------------------------------------------------------- */
:root {
/* Instagram Brand Palette */
--brand-primary: #E1306C; /* Instagram Pink */
--brand-dark: #150D14;
--brand-white: #FFFFFF;
--brand-light-bg: #fafafa;
/* Signature Gradient: Purple -> Red/Pink -> Orange */
--brand-gradient: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%);
--brand-gradient-hover: linear-gradient(135deg, #6a2e91 0%, #d61818 50%, #d96226 100%);
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
scroll-behavior: smooth;
}
/* Color Utilities */
/* Gradient Text Utility */
.text-brand {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-brand-solid { color: var(--brand-primary) !important; }
.bg-brand {
background: var(--brand-gradient) !important;
}
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-light { background-color: var(--brand-light-bg) !important; }
/* Gradient Buttons */
.btn-brand {
background: var(--brand-gradient);
color: white;
border: none;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-brand:hover {
background: var(--brand-gradient-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(225, 48, 108, 0.4); /* Pink Glow */
}
.btn-outline-custom {
background-color: white;
color: var(--brand-dark);
border: 1px solid #dee2e6;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background-color: #fff0f5;
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.hover-brand:hover {
color: var(--brand-primary) !important;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 700;
font-size: 1.25rem;
color: var(--brand-dark);
}
.nav-link {
color: #666;
font-weight: 500;
margin: 0 10px;
}
.nav-link:hover, .nav-link.active {
color: var(--main-color) !important;
}
.logo-box {
width: 32px;
height: 32px;
background: var(--brand-gradient); /* Gradient Logo Box */
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 8px;
}
/* Hero */
.hexagon-bg {
background-color: #ffffff;
opacity: 0.4;
/* Using Instagram Pink for the dots */
background-image: radial-gradient(#E1306C 0.75px, transparent 0.75px), radial-gradient(#E1306C 0.75px, #ffffff 0.75px);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
}
.hero-section {
position: relative;
padding-top: 140px;
padding-bottom: 100px;
overflow: hidden;
}
.hero-blob {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.2; /* Slightly higher opacity for vibrancy */
z-index: 0;
}
.blob-1 { background-color: #833AB4; /* Purple */ top: -50px; right: -50px; }
.blob-2 { background-color: #F77737; /* Orange */ bottom: -50px; left: -50px; }
.gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
background-color: rgba(225, 48, 108, 0.08); /* Light Pink Tint */
border: 1px solid rgba(225, 48, 108, 0.2);
color: #E1306C;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
}
/* Mockup */
.mockup-container {
margin-top: -60px;
position: relative;
z-index: 10;
}
.browser-window {
background: var(--brand-dark);
border-radius: 16px;
padding: 8px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.browser-header {
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.browser-url {
background: rgba(255,255,255,0.1);
color: #888;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 4px;
margin: 0 auto;
}
.dashboard-layout {
display: flex;
min-height: 600px;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.dash-sidebar {
width: 250px;
background-color: var(--brand-dark);
color: white;
padding: 20px;
display: none; /* Hidden on mobile by default */
}
@media (min-width: 768px) {
.dash-sidebar { display: block; }
}
.dash-nav-item {
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
cursor: pointer;
margin-bottom: 5px;
font-size: 0.9rem;
}
.dash-nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.dash-nav-item.active { background: rgba(255,255,255,0.1); color: white; font-weight: 500; }
.dash-main {
flex: 1;
background-color: #f8f9fa;
padding: 24px;
overflow-y: auto;
}
.stat-card {
background: white;
padding: 16px;
border-radius: 12px;
border: 1px solid #eee;
height: 100%;
}
/* Features */
.feature-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: transform 0.3s;
}
.group:hover .feature-icon-box { transform: scale(1.1); }
/* Updated Icon Colors to Match Palette */
.bg-icon-purple { background-color: rgba(131, 58, 180, 0.1); color: #833AB4; } /* Purple */
.bg-icon-red { background-color: rgba(253, 29, 29, 0.1); color: #FD1D1D; } /* Red/Pink */
.bg-icon-orange { background-color: rgba(247, 119, 55, 0.1); color: #F77737; } /* Orange */
/* Dark Section */
.dark-data-section {
background-color: var(--brand-dark);
color: white;
position: relative;
overflow: hidden;
padding: 100px 0;
}
/* Testimonials */
.carousel-indicators [data-bs-target] {
background-color: var(--brand-primary);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
opacity: 0.5;
margin: 0 4px;
}
.carousel-indicators .active {
opacity: 1;
transform: scale(1.2);
}
/* FAQs */
.accordion-button:not(.collapsed) {
color: #C13584; /* Deep Pink */
background-color: rgba(225, 48, 108, 0.05);
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(225, 48, 108, 0.3);
}
.accordion-button::after {
background-size: 1rem;
}
.accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
/* Footer */
footer {
background-color: var(--brand-dark);
color: #adb5bd;
padding: 60px 0 0;
}
footer h5 { color: white; font-weight: 600; margin-bottom: 20px; }
footer a { color: #adb5bd; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--brand-primary); }
/* Helpers */
.text-small { font-size: 0.875rem; }
.text-xsmall { font-size: 0.75rem; }
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > PLATEFORM > LINKEDIN
Source: resources\views\frontend\page\plateform\linkedin.blade.php
-------------------------------------------------------------------------- */
:root {
/* LinkedIn Brand Palette */
--brand-primary: #0077B5;
/* LinkedIn Blue */
--brand-dark: #150D14;
--brand-white: #FFFFFF;
--brand-light-bg: #f3f9fc;
/* Signature Gradient: LinkedIn Blue -> Deep Blue */
--brand-gradient: linear-gradient(135deg, #0077B5 0%, #005582 100%);
--brand-gradient-hover: linear-gradient(135deg, #005E8E 0%, #004165 100%);
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
scroll-behavior: smooth;
}
/* Color Utilities */
/* Gradient Text Utility */
.text-brand {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-brand-solid {
color: var(--brand-primary) !important;
}
.bg-brand {
background: var(--brand-gradient) !important;
}
.bg-brand-dark {
background-color: var(--brand-dark) !important;
}
.bg-brand-light {
background-color: var(--brand-light-bg) !important;
}
/* Gradient Buttons */
.btn-brand {
background: var(--brand-gradient);
color: white;
border: none;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-brand:hover {
background: var(--brand-gradient-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 119, 181, 0.3);
/* Blue Glow */
}
.btn-outline-custom {
background-color: white;
color: var(--brand-dark);
border: 1px solid #dee2e6;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background-color: #e6f3f9;
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.hover-brand:hover {
color: var(--brand-primary) !important;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 700;
font-size: 1.25rem;
color: var(--brand-dark);
}
.nav-link {
color: #666;
font-weight: 500;
margin: 0 10px;
}
.nav-link:hover,
.nav-link.active {
color: var(--brand-primary);
}
.logo-box {
width: 32px;
height: 32px;
background: var(--brand-gradient);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 8px;
}
/* Hero */
.hexagon-bg {
background-color: #ffffff;
opacity: 0.4;
background-image: radial-gradient(#0077B5 0.75px, transparent 0.75px), radial-gradient(#0077B5 0.75px, #ffffff 0.75px);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.hero-section {
position: relative;
padding-top: 140px;
padding-bottom: 100px;
overflow: hidden;
}
.hero-blob {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
z-index: 0;
}
.blob-1 {
background-color: #0077B5;
top: -50px;
right: -50px;
}
.blob-2 {
background-color: #00A0DC;
bottom: -50px;
left: -50px;
}
.gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
background-color: #e6f3f9;
border: 1px solid rgba(0, 119, 181, 0.2);
color: #0077B5;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
}
/* Mockup */
.mockup-container {
margin-top: -60px;
position: relative;
z-index: 10;
}
.browser-window {
background: var(--brand-dark);
border-radius: 16px;
padding: 8px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.browser-header {
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.browser-url {
background: rgba(255, 255, 255, 0.1);
color: #888;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 4px;
margin: 0 auto;
}
.dashboard-layout {
display: flex;
min-height: 600px;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.dash-sidebar {
width: 250px;
background-color: var(--brand-dark);
color: white;
padding: 20px;
display: none;
/* Hidden on mobile by default */
}
@media (min-width: 768px) {
.dash-sidebar {
display: block;
}
}
.dash-nav-item {
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
cursor: pointer;
margin-bottom: 5px;
font-size: 0.9rem;
}
.dash-nav-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.dash-nav-item.active {
background: rgba(255, 255, 255, 0.1);
color: #0077B5;
font-weight: 500;
border-left: 3px solid #0077B5;
}
.dash-main {
flex: 1;
background-color: #f8f9fa;
padding: 24px;
overflow-y: auto;
}
.stat-card {
background: white;
padding: 16px;
border-radius: 12px;
border: 1px solid #eee;
height: 100%;
}
/* Features */
.feature-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: transform 0.3s;
}
.group:hover .feature-icon-box {
transform: scale(1.1);
}
.bg-icon-blue {
background-color: #e6f3f9;
color: #0077B5;
}
.bg-icon-slate {
background-color: #f1f5f9;
color: #475569;
}
.bg-icon-indigo {
background-color: #eef2ff;
color: #4f46e5;
}
/* Dark Section */
.dark-data-section {
background-color: var(--brand-dark);
color: white;
position: relative;
overflow: hidden;
padding: 100px 0;
}
/* Testimonials */
.carousel-indicators [data-bs-target] {
background-color: var(--brand-primary);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
opacity: 0.5;
margin: 0 4px;
}
.carousel-indicators .active {
opacity: 1;
transform: scale(1.2);
}
/* FAQs */
.accordion-button:not(.collapsed) {
color: #0077B5;
background-color: #e6f3f9;
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0, 119, 181, 0.3);
}
.accordion-button::after {
background-size: 1rem;
}
.accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
/* Footer */
footer {
background-color: var(--brand-dark);
color: #adb5bd;
padding: 60px 0 0;
}
footer h5 {
color: white;
font-weight: 600;
margin-bottom: 20px;
}
footer a {
color: #adb5bd;
text-decoration: none;
transition: color 0.2s;
}
footer a:hover {
color: var(--brand-primary);
}
/* Helpers */
.text-small {
font-size: 0.875rem;
}
.text-xsmall {
font-size: 0.75rem;
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > PLATEFORM > TELEGRAM
Source: resources\views\frontend\page\plateform\telegram.blade.php
-------------------------------------------------------------------------- */
:root {
/* Telegram Brand Palette */
--brand-primary: #24A1DE; /* Telegram Blue */
--brand-dark: #17212b; /* Telegram Dark Mode BG */
--brand-white: #FFFFFF;
--brand-light-bg: #f2faff;
/* Signature Gradient: Light Blue -> Standard Blue */
--brand-gradient: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
--brand-gradient-hover: linear-gradient(135deg, #24A1DE 0%, #1E88BD 100%);
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
scroll-behavior: smooth;
}
/* Color Utilities */
/* Gradient Text Utility */
.text-brand {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-brand-solid { color: var(--brand-primary) !important; }
.bg-brand {
background: var(--brand-gradient) !important;
}
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-light { background-color: var(--brand-light-bg) !important; }
/* Gradient Buttons */
.btn-brand {
background: var(--brand-gradient);
color: white;
border: none;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-brand:hover {
background: var(--brand-gradient-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(36, 161, 222, 0.4); /* Blue Glow */
}
.btn-outline-custom {
background-color: white;
color: var(--brand-dark);
border: 1px solid #dee2e6;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background-color: #f2faff;
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.hover-brand:hover {
color: var(--brand-primary) !important;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 700;
font-size: 1.25rem;
color: var(--brand-dark);
}
.nav-link {
color: #666;
font-weight: 500;
margin: 0 10px;
}
.nav-link:hover, .nav-link.active {
color: var(--brand-primary);
}
.logo-box {
width: 32px;
height: 32px;
background: var(--brand-gradient);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 8px;
}
/* Hero */
.hexagon-bg {
background-color: #ffffff;
opacity: 0.4;
background-image: radial-gradient(#24A1DE 0.75px, transparent 0.75px), radial-gradient(#24A1DE 0.75px, #ffffff 0.75px);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
}
.hero-section {
position: relative;
padding-top: 140px;
padding-bottom: 100px;
overflow: hidden;
}
.hero-blob {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
z-index: 0;
}
.blob-1 { background-color: #24A1DE; top: -50px; right: -50px; }
.blob-2 { background-color: #0088cc; bottom: -50px; left: -50px; }
.gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
background-color: #e3f2fd;
border: 1px solid rgba(36, 161, 222, 0.2);
color: #24A1DE;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
}
/* Mockup */
.mockup-container {
margin-top: -60px;
position: relative;
z-index: 10;
}
.browser-window {
background: var(--brand-dark);
border-radius: 16px;
padding: 8px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.browser-header {
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.browser-url {
background: rgba(255,255,255,0.1);
color: #888;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 4px;
margin: 0 auto;
}
.dashboard-layout {
display: flex;
min-height: 600px;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.dash-sidebar {
width: 250px;
background-color: var(--brand-dark);
color: white;
padding: 20px;
display: none; /* Hidden on mobile by default */
}
@media (min-width: 768px) {
.dash-sidebar { display: block; }
}
.dash-nav-item {
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
cursor: pointer;
margin-bottom: 5px;
font-size: 0.9rem;
}
.dash-nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.dash-nav-item.active { background: rgba(255,255,255,0.1); color: #24A1DE; font-weight: 500; border-left: 3px solid #24A1DE; }
.dash-main {
flex: 1;
background-color: #f8f9fa;
padding: 24px;
overflow-y: auto;
}
.stat-card {
background: white;
padding: 16px;
border-radius: 12px;
border: 1px solid #eee;
height: 100%;
}
/* Features */
.feature-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: transform 0.3s;
}
.group:hover .feature-icon-box { transform: scale(1.1); }
.bg-icon-blue { background-color: #e3f2fd; color: #24A1DE; }
.bg-icon-teal { background-color: #e0f2f1; color: #009688; }
.bg-icon-purple { background-color: #f3e5f5; color: #9c27b0; }
/* Dark Section */
.dark-data-section {
background-color: var(--brand-dark);
color: white;
position: relative;
overflow: hidden;
padding: 100px 0;
}
/* Testimonials */
.carousel-indicators [data-bs-target] {
background-color: var(--brand-primary);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
opacity: 0.5;
margin: 0 4px;
}
.carousel-indicators .active {
opacity: 1;
transform: scale(1.2);
}
/* FAQs */
.accordion-button:not(.collapsed) {
color: #24A1DE;
background-color: #e3f2fd;
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(36, 161, 222, 0.3);
}
.accordion-button::after {
background-size: 1rem;
}
.accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
/* Footer */
footer {
background-color: var(--brand-dark);
color: #adb5bd;
padding: 60px 0 0;
}
footer h5 { color: white; font-weight: 600; margin-bottom: 20px; }
footer a { color: #adb5bd; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--brand-primary); }
/* Helpers */
.text-small { font-size: 0.875rem; }
.text-xsmall { font-size: 0.75rem; }
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > PLATEFORM > YOUTUBE
Source: resources\views\frontend\page\plateform\youtube.blade.php
-------------------------------------------------------------------------- */
:root {
/* YouTube Brand Palette */
--brand-primary: #FF0000;
--brand-dark: #0F0F0F;
--brand-white: #FFFFFF;
--brand-light-bg: #fafafa;
/* Signature Gradient: Deep Red -> Bright Red -> Warm Red */
--brand-gradient: linear-gradient(135deg, #CC0000 0%, #FF0000 50%, #FF4E45 100%);
--brand-gradient-hover: linear-gradient(135deg, #a30000 0%, #cc0000 50%, #d94040 100%);
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
scroll-behavior: smooth;
}
.text-brand {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-brand-solid { color: var(--brand-primary) !important; }
.bg-brand {
background: var(--brand-gradient) !important;
}
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-light { background-color: var(--brand-light-bg) !important; }
/* Gradient Buttons */
.btn-brand {
background: var(--brand-gradient);
color: white;
border: none;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-brand:hover {
background: var(--brand-gradient-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 0, 0, 0.35);
}
.btn-outline-custom {
background-color: white;
color: var(--brand-dark);
border: 1px solid #dee2e6;
border-radius: 50px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background-color: #fff5f5;
color: var(--brand-primary);
border-color: var(--brand-primary);
}
.hover-brand:hover {
color: var(--brand-primary) !important;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 700;
font-size: 1.25rem;
color: var(--brand-dark);
}
.nav-link {
color: #666;
font-weight: 500;
margin: 0 10px;
}
.nav-link:hover, .nav-link.active {
color: var(--brand-primary);
}
.logo-box {
width: 32px;
height: 32px;
background: var(--brand-gradient);
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
margin-right: 8px;
}
/* Hero */
.hexagon-bg {
background-color: #ffffff;
opacity: 0.4;
background-image: radial-gradient(#FF0000 0.75px, transparent 0.75px), radial-gradient(#FF0000 0.75px, #ffffff 0.75px);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
}
.hero-section {
position: relative;
padding-top: 140px;
padding-bottom: 100px;
overflow: hidden;
}
.hero-blob {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
z-index: 0;
}
.blob-1 { background-color: #FF0000; top: -50px; right: -50px; }
.blob-2 { background-color: #FF4E45; bottom: -50px; left: -50px; }
.gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
background-color: rgba(255, 0, 0, 0.06);
border: 1px solid rgba(255, 0, 0, 0.2);
color: #FF0000;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
}
/* Mockup */
.mockup-container {
margin-top: -60px;
position: relative;
z-index: 10;
}
.browser-window {
background: var(--brand-dark);
border-radius: 16px;
padding: 8px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.browser-header {
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.browser-url {
background: rgba(255,255,255,0.1);
color: #888;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 4px;
margin: 0 auto;
}
.dashboard-layout {
display: flex;
min-height: 600px;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.dash-sidebar {
width: 250px;
background-color: var(--brand-dark);
color: white;
padding: 20px;
display: none;
}
@media (min-width: 768px) {
.dash-sidebar { display: block; }
}
.dash-nav-item {
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
cursor: pointer;
margin-bottom: 5px;
font-size: 0.9rem;
}
.dash-nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.dash-nav-item.active { background: rgba(255,255,255,0.1); color: white; font-weight: 500; }
.dash-main {
flex: 1;
background-color: #f8f9fa;
padding: 24px;
overflow-y: auto;
}
.stat-card {
background: white;
padding: 16px;
border-radius: 12px;
border: 1px solid #eee;
height: 100%;
}
/* Features */
.feature-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: transform 0.3s;
}
.group:hover .feature-icon-box { transform: scale(1.1); }
.bg-icon-red { background-color: rgba(255, 0, 0, 0.08); color: #FF0000; }
.bg-icon-dark { background-color: rgba(15, 15, 15, 0.08); color: #0F0F0F; }
.bg-icon-warm { background-color: rgba(255, 78, 69, 0.08); color: #FF4E45; }
/* Dark Section */
.dark-data-section {
background-color: var(--brand-dark);
color: white;
position: relative;
overflow: hidden;
padding: 100px 0;
}
/* Testimonials */
.carousel-indicators [data-bs-target] {
background-color: var(--brand-primary);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
opacity: 0.5;
margin: 0 4px;
}
.carousel-indicators .active {
opacity: 1;
transform: scale(1.2);
}
/* FAQs */
.accordion-button:not(.collapsed) {
color: #CC0000;
background-color: rgba(255, 0, 0, 0.05);
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(255, 0, 0, 0.3);
}
.accordion-button::after {
background-size: 1rem;
}
.accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
/* Footer */
footer {
background-color: var(--brand-dark);
color: #adb5bd;
padding: 60px 0 0;
}
footer h5 { color: white; font-weight: 600; margin-bottom: 20px; }
footer a { color: #adb5bd; text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--brand-primary); }
/* Content Format Cards */
.format-card {
background: white;
border: 1px solid #eee;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
transition: all 0.3s ease;
height: 100%;
}
.format-card:hover {
border-color: var(--brand-primary);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(255, 0, 0, 0.08);
}
.format-card .format-icon {
width: 64px;
height: 64px;
border-radius: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 1.5rem;
}
/* Helpers */
.text-small { font-size: 0.875rem; }
.text-xsmall { font-size: 0.75rem; }
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > PLATEFORM
Source: resources\views\frontend\page\plateform.blade.php
-------------------------------------------------------------------------- */
:root {
--brand-primary: #E00243;
--brand-dark: #0f172a;
--brand-white: #FFFFFF;
--brand-light-bg: #fef2f5;
--brand-gradient: linear-gradient(135deg, #E00243 0%, #ff2e63 50%, #ff6b6b 100%);
--brand-gradient-hover: linear-gradient(135deg, #c6003a 0%, #e11d48 50%, #f43f5e 100%);
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa;
color: #333;
scroll-behavior: smooth;
}
.text-brand {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-brand-solid { color: var(--brand-primary) !important; }
.bg-brand { background: var(--brand-gradient) !important; }
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.btn-brand {
background: var(--brand-gradient);
color: white;
border: none;
border-radius: 50px;
padding: 12px 28px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-brand:hover {
background: var(--brand-gradient-hover);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(224, 2, 67, 0.4);
}
.btn-outline-custom {
background-color: white;
color: var(--brand-dark);
border: 2px solid #dee2e6;
border-radius: 50px;
padding: 10px 24px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background-color: var(--brand-light-bg);
color: var(--brand-primary);
border-color: var(--brand-primary);
}
/* Hero */
.hero-platforms {
position: relative;
padding: 120px 0 80px;
overflow: hidden;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
color: white;
}
.hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(100px);
z-index: 0;
}
.blob-1 { width: 500px; height: 500px; background: rgba(224,2,67,0.15); top: -100px; right: -100px; }
.blob-2 { width: 400px; height: 400px; background: rgba(255,107,107,0.1); bottom: -100px; left: -100px; }
.blob-3 { width: 300px; height: 300px; background: rgba(24,119,242,0.1); top: 50%; left: 30%; }
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 50px;
background: rgba(224,2,67,0.15);
border: 1px solid rgba(224,2,67,0.3);
color: #ff6b6b;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 2rem;
}
.hero-platforms h1 {
color: white;
}
.gradient-text {
background: var(--brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.floating-icons {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
overflow: hidden;
}
.floating-icon {
position: absolute;
opacity: 0.06;
font-size: 4rem;
color: white;
animation: floatIcon 20s infinite ease-in-out;
}
.floating-icon:nth-child(1) { top: 15%; left: 8%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 60%; right: 12%; animation-delay: -5s; }
.floating-icon:nth-child(3) { bottom: 20%; left: 20%; animation-delay: -10s; }
.floating-icon:nth-child(4) { top: 25%; right: 25%; animation-delay: -15s; }
.floating-icon:nth-child(5) { bottom: 30%; right: 8%; animation-delay: -8s; }
@keyframes floatIcon {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-20px) rotate(5deg); }
75% { transform: translateY(15px) rotate(-3deg); }
}
/* Platform Cards */
.platforms-showcase {
padding: 80px 0;
background: white;
}
.platform-card {
background: white;
border-radius: 20px;
border: 1px solid #e2e8f0;
padding: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
height: 100%;
text-decoration: none;
display: block;
}
.platform-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0,0,0,0.12);
border-color: transparent;
text-decoration: none;
}
.platform-card-header {
padding: 28px 28px 20px;
position: relative;
overflow: hidden;
}
.platform-card-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
.platform-card.instagram .platform-card-header::before {
background: linear-gradient(90deg, #833AB4, #FD1D1D, #F77737);
}
.platform-card.youtube .platform-card-header::before {
background: linear-gradient(90deg, #FF0000, #CC0000);
}
.platform-card.facebook .platform-card-header::before {
background: linear-gradient(90deg, #1877F2, #0064e0);
}
.platform-card.linkedin .platform-card-header::before {
background: linear-gradient(90deg, #0077B5, #005582);
}
.platform-card.telegram .platform-card-header::before {
background: linear-gradient(90deg, #2AABEE, #229ED9);
}
.platform-icon-box {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 1.5rem;
color: white;
}
.platform-card.instagram .platform-icon-box { background: linear-gradient(135deg, #833AB4, #FD1D1D, #F77737); }
.platform-card.youtube .platform-icon-box { background: linear-gradient(135deg, #FF0000, #CC0000); }
.platform-card.facebook .platform-icon-box { background: linear-gradient(135deg, #1877F2, #0064e0); }
.platform-card.linkedin .platform-icon-box { background: linear-gradient(135deg, #0077B5, #005582); }
.platform-card.telegram .platform-icon-box { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.platform-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--brand-dark);
}
.platform-card p {
font-size: 0.875rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 0;
}
.platform-card-stats {
padding: 16px 28px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.platform-stat {
text-align: center;
}
.platform-stat-value {
font-size: 1.125rem;
font-weight: 700;
color: var(--brand-dark);
display: block;
}
.platform-stat-label {
font-size: 0.7rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.platform-card-footer {
padding: 16px 28px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #e2e8f0;
}
.platform-card-footer span {
font-size: 0.875rem;
font-weight: 600;
color: var(--brand-primary);
transition: all 0.3s;
}
.platform-card:hover .platform-card-footer span {
transform: translateX(4px);
}
.platform-card-footer i {
color: var(--brand-primary);
transition: transform 0.3s;
}
.platform-card:hover .platform-card-footer i {
transform: translateX(4px);
}
/* Features */
.features-section {
padding: 80px 0;
background: #f8fafc;
}
.feature-icon-box {
width: 64px;
height: 64px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: transform 0.3s;
}
.feature-box:hover .feature-icon-box { transform: scale(1.1); }
.bg-icon-rose { background-color: rgba(224,2,67,0.08); color: #E00243; }
.bg-icon-violet { background-color: rgba(139,92,246,0.08); color: #8b5cf6; }
.bg-icon-amber { background-color: rgba(245,158,11,0.08); color: #f59e0b; }
.feature-box {
background: white;
border-radius: 16px;
padding: 32px;
height: 100%;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.feature-box:hover {
border-color: transparent;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
/* Dark Data Section */
.dark-data-section {
background-color: var(--brand-dark);
color: white;
position: relative;
overflow: hidden;
padding: 100px 0;
}
.analytics-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 24px;
transition: all 0.3s ease;
}
.analytics-card:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-4px);
}
.platform-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.platform-bar-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.platform-bar-info { flex: 1; }
.platform-bar-name {
font-size: 0.875rem;
font-weight: 600;
color: white;
margin-bottom: 4px;
}
.platform-bar-track {
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
}
.platform-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 1s ease;
}
.platform-bar-value {
font-size: 0.875rem;
font-weight: 700;
min-width: 40px;
text-align: right;
}
/* Testimonials */
.carousel-indicators [data-bs-target] {
background-color: var(--brand-primary);
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
opacity: 0.5;
margin: 0 4px;
}
.carousel-indicators .active {
opacity: 1;
transform: scale(1.2);
}
/* FAQs */
.accordion-button:not(.collapsed) {
color: var(--brand-primary);
background-color: rgba(224,2,67,0.05);
font-weight: 600;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(224,2,67,0.3);
}
.accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
.text-small { font-size: 0.875rem; }
.text-xsmall { font-size: 0.75rem; }
/* Responsive */
@media (max-width: 768px) {
.hero-platforms { padding: 80px 0 60px; }
.hero-platforms h1 { font-size: 2rem; }
.platform-card-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.platform-stat-value { font-size: 1rem; }
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > SERVICE-CATEGORY
Source: resources\views\frontend\page\service-category.blade.php
-------------------------------------------------------------------------- */
:root {
--inf-primary: #E00243;
--inf-primary-dark: #c0023d;
--inf-secondary: #6366f1;
--inf-dark: #1e293b;
--inf-light: #f8fafc;
--inf-border: #e2e8f0;
--inf-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--inf-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--inf-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
--inf-shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
--inf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hero Section */
.sc-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 100px 0 60px;
color: #fff;
position: relative;
overflow: hidden;
}
.sc-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--inf-primary), #E00243);
}
.sc-hero-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.06;
background-image:
linear-gradient(var(--inf-primary) 1px, transparent 1px),
linear-gradient(90deg, var(--inf-primary) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}
.sc-hero-glow {
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.15), transparent 70%);
z-index: 0;
}
.sc-hero-glow-2 {
position: absolute;
bottom: -150px;
left: -100px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(248, 213, 83, 0.08), transparent 70%);
z-index: 0;
}
.sc-hero-content {
position: relative;
z-index: 2;
}
.sc-breadcrumb a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
transition: var(--inf-transition);
}
.sc-breadcrumb a:hover { color: #fff; }
.sc-platform-badge {
padding: 6px 18px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
color: #fff;
display: inline-flex;
align-items: center;
}
.sc-platform-badge.instagram { background: linear-gradient(135deg, #E4405F, #F77737); }
.sc-platform-badge.youtube { background: linear-gradient(135deg, #FF0000, #CC0000); }
.sc-platform-badge.facebook { background: linear-gradient(135deg, #1877F2, #0D6EFD); }
.sc-platform-badge.linkedin { background: linear-gradient(135deg, #0A66C2, #004182); }
.sc-platform-badge.telegram { background: linear-gradient(135deg, #0088cc, #006699); }
.sc-platform-badge.default { background: linear-gradient(135deg, #64748b, #475569); }
.sc-category-badge {
padding: 6px 18px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
color: rgba(255,255,255,0.9);
display: inline-flex;
align-items: center;
}
.sc-hero-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.15;
margin-bottom: 16px;
color: #fff;
}
.sc-gradient-text {
background: linear-gradient(90deg, var(--inf-primary), #ff6b8a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sc-hero-desc {
font-size: 1.1rem;
color: rgba(255,255,255,0.7);
max-width: 550px;
line-height: 1.7;
margin-bottom: 32px;
}
.sc-hero-stats {
display: flex;
gap: 40px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.sc-hero-stat h3 {
font-size: 1.75rem;
font-weight: 800;
color: #E00243;
margin-bottom: 4px;
}
.sc-hero-stat p {
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sc-hero-icon-wrap {
width: 180px;
height: 180px;
border-radius: 40px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
color: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
}
/* Main Content Area */
.sc-main { background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); min-height: 60vh; }
/* Sidebar - reuse influencer page styles */
.filters-sidebar {
background: #fff;
border-radius: 20px;
box-shadow: var(--inf-shadow-md);
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.sidebar-header {
padding: 24px;
border-bottom: 1px solid var(--inf-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-header h5 { font-size: 18px; font-weight: 700; color: var(--inf-dark); }
.sidebar-header .btn-link {
color: var(--inf-primary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.filters-body { padding: 20px 24px; }
.filter-group {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--inf-border);
}
.filter-group:last-child { border-bottom: none; }
.filter-title {
font-weight: 600;
font-size: 15px;
color: var(--inf-dark);
padding: 8px 0;
}
.filter-content { padding-top: 12px; }
.modern-input, .modern-select {
border: 2px solid var(--inf-border);
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
transition: var(--inf-transition);
}
.modern-input:focus, .modern-select:focus {
border-color: var(--inf-primary);
box-shadow: 0 0 0 4px rgba(224, 2, 67, 0.1);
outline: none;
}
.sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--inf-border); }
.sc-tier-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tier-link {
padding: 8px 16px;
border: 2px solid var(--inf-border);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: var(--inf-dark);
transition: var(--inf-transition);
}
.sc-tier-link:hover {
border-color: var(--inf-primary);
color: var(--inf-primary);
}
.sc-tier-link.active {
border-color: var(--inf-primary);
background: rgba(224, 2, 67, 0.05);
color: var(--inf-primary);
}
/* Results Header */
.results-header {
background: #fff;
padding: 24px;
border-radius: 16px;
box-shadow: var(--inf-shadow-sm);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.results-title { font-size: 24px; font-weight: 700; margin: 0; color: var(--inf-dark); }
.results-count { margin: 4px 0 0; color: #64748b; font-size: 14px; }
.count-number { font-weight: 700; color: var(--inf-primary); }
.auth-hint { color: #94a3b8; font-size: 13px; }
.btn-filter-mobile {
padding: 10px 18px;
border: 2px solid var(--inf-border);
border-radius: 10px;
background: #fff;
font-weight: 600;
cursor: pointer;
transition: var(--inf-transition);
}
.btn-filter-mobile:hover { border-color: var(--inf-primary); color: var(--inf-primary); }
/* Active Filters */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-tag {
padding: 8px 16px;
background: rgba(224, 2, 67, 0.08);
border: 1px solid rgba(224, 2, 67, 0.2);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--inf-primary);
display: flex;
align-items: center;
gap: 8px;
}
.filter-tag a { color: var(--inf-primary); text-decoration: none; }
/* Influencer Grid */
.influencer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.influencer-card-pro { transition: var(--inf-transition); }
.card-inner {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--inf-shadow-md);
transition: var(--inf-transition);
height: 100%;
display: flex;
flex-direction: column;
}
.card-inner:hover {
transform: translateY(-8px);
box-shadow: var(--inf-shadow-xl);
}
.card-header-img {
position: relative;
height: 200px;
overflow: hidden;
}
.profile-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--inf-transition);
}
.card-inner:hover .profile-img { transform: scale(1.05); }
.profile-img-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.profile-img-placeholder i { font-size: 32px; margin-bottom: 8px; opacity: 0.7; }
.profile-img-placeholder span { font-size: 32px; font-weight: 800; letter-spacing: 2px; }
.card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent 50%);
padding: 16px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.platform-badges { display: flex; gap: 6px; }
.platform-badge {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
backdrop-filter: blur(10px);
color: #fff;
}
.platform-badge.instagram { background: rgba(228, 64, 95, 0.9); }
.platform-badge.youtube { background: rgba(255, 0, 0, 0.9); }
.platform-badge.facebook { background: rgba(24, 119, 242, 0.9); }
.platform-badge.linkedin { background: rgba(10, 102, 194, 0.9); }
.platform-badge.tiktok { background: rgba(0, 0, 0, 0.85); }
.platform-badge.twitter { background: rgba(29, 161, 242, 0.9); }
.platform-badge.default { background: rgba(100, 116, 139, 0.9); }
.tier-badge {
position: absolute;
bottom: 12px;
left: 12px;
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.tier-nano { background: rgba(148,163,184,0.9); color: #fff; }
.tier-micro { background: rgba(59,130,246,0.9); color: #fff; }
.tier-mid { background: rgba(99,102,241,0.9); color: #fff; }
.tier-macro { background: rgba(245,158,11,0.9); color: #fff; }
.tier-mega { background: rgba(224,2,67,0.95); color: #fff; }
.tier-default { background: rgba(30,41,59,0.9); color: #fff; }
.card-body-pro {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.profile-name { font-size: 18px; font-weight: 700; margin: 0; color: var(--inf-dark); }
.profile-username { font-size: 13px; color: #94a3b8; margin: 4px 0 0; }
.rating-badge {
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
padding: 6px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
color: #fff;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.stat-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--inf-light);
border-radius: 10px;
}
.stat-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--inf-primary);
font-size: 14px;
}
.stat-data { display: flex; flex-direction: column; }
.stat-value { font-size: 15px; font-weight: 700; color: var(--inf-dark); line-height: 1; }
.stat-label { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.category-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.category-tag {
padding: 5px 12px;
background: rgba(224, 2, 67, 0.06);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--inf-primary);
}
.meta-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
margin-bottom: 16px;
border-top: 1px solid var(--inf-border);
border-bottom: 1px solid var(--inf-border);
}
.location, .price { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64748b; }
.location i, .price i { color: #94a3b8; }
.price { font-weight: 700; color: var(--inf-dark); }
.card-actions { display: flex; gap: 8px; margin-top: auto; }
.btn-action {
flex: 1;
padding: 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(--inf-transition);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.btn-primary-action {
background: linear-gradient(135deg, var(--inf-primary), #ff2e63);
color: #fff;
}
.btn-primary-action:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(224, 2, 67, 0.3);
color: #fff;
}
.btn-secondary-action {
background: var(--inf-light);
color: var(--inf-primary);
padding: 12px 16px;
flex: 0;
}
.btn-secondary-action:hover { background: rgba(224, 2, 67, 0.1); color: var(--inf-primary); }
/* Login Banner */
.login-banner {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border-radius: 20px;
padding: 40px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.login-banner::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(224,2,67,0.15) 0%, transparent 70%);
pointer-events: none;
}
.login-banner-content {
display: flex;
align-items: center;
gap: 24px;
position: relative;
z-index: 1;
}
.login-banner-icon {
width: 64px;
height: 64px;
background: rgba(224, 2, 67, 0.2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ff6b8a;
flex-shrink: 0;
}
.login-banner-text { flex: 1; }
.login-banner-text h5 { color: #fff; margin-bottom: 4px; font-size: 18px; }
.login-banner-text p { color: #94a3b8; margin: 0; font-size: 14px; }
.login-banner-btn {
padding: 14px 28px;
border-radius: 12px;
font-weight: 600;
white-space: nowrap;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 80px 20px;
background: #fff;
border-radius: 20px;
box-shadow: var(--inf-shadow-sm);
}
.empty-state-icon {
width: 80px;
height: 80px;
background: var(--inf-light);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 32px;
color: #94a3b8;
}
.empty-state h4 { color: var(--inf-dark); margin-bottom: 8px; }
.empty-state p { color: #64748b; margin-bottom: 24px; }
/* Pagination */
.pagination-wrapper .pagination {
display: flex;
justify-content: center;
gap: 6px;
}
.pagination-wrapper .page-link {
border-radius: 10px;
border: 2px solid var(--inf-border);
color: var(--inf-dark);
font-weight: 600;
padding: 8px 16px;
transition: var(--inf-transition);
}
.pagination-wrapper .page-link:hover {
border-color: var(--inf-primary);
color: var(--inf-primary);
}
.pagination-wrapper .page-item.active .page-link {
background: var(--inf-primary);
border-color: var(--inf-primary);
color: #fff;
}
@media (max-width: 1024px) {
.influencer-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
}
@media (max-width: 768px) {
.sc-hero { padding: 80px 0 40px; }
.sc-hero-title { font-size: 2rem; }
.sc-hero-stats { gap: 24px; flex-wrap: wrap; }
.influencer-grid { grid-template-columns: 1fr; }
.results-header { flex-direction: column; align-items: flex-start; }
.login-banner-content { flex-direction: column; text-align: center; }
.login-banner { padding: 30px 20px; }
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > SERVICES
Source: resources\views\frontend\page\services.blade.php
-------------------------------------------------------------------------- */
.svc-root {
--svc-primary: #E00243;
--svc-dark: #0f172a;
--svc-darker: #080d19;
--svc-light: #f8fafc;
--svc-gray: #64748b;
--svc-gold: #E00243;
}
/* Hero Section */
.svc-hero {
background: linear-gradient(135deg, var(--svc-dark) 0%, #1e293b 100%);
padding: 120px 0 80px;
position: relative;
overflow: hidden;
color: #fff;
}
.svc-hero-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.08;
background-image:
linear-gradient(var(--svc-primary) 1px, transparent 1px),
linear-gradient(90deg, var(--svc-primary) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}
.svc-hero-glow {
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.15), transparent 70%);
z-index: 0;
}
.svc-hero-glow-2 {
position: absolute;
bottom: -150px;
left: -100px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(248, 213, 83, 0.08), transparent 70%);
z-index: 0;
}
.svc-hero-content {
position: relative;
z-index: 2;
}
.svc-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(224, 2, 67, 0.15);
border: 1px solid rgba(224, 2, 67, 0.3);
color: #ff6b8a;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 24px;
}
.svc-hero h1 {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
color: #fff;
}
.svc-hero h1 .svc-gradient-text {
background: linear-gradient(90deg, var(--svc-primary), #ff6b8a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.svc-hero-desc {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.75);
max-width: 550px;
line-height: 1.7;
margin-bottom: 32px;
}
.svc-hero-btns {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.svc-btn-primary {
background: var(--svc-primary);
color: #fff;
font-weight: 600;
border-radius: 50px;
padding: 14px 32px;
border: 2px solid var(--svc-primary);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.svc-btn-primary:hover {
background: #c0023d;
border-color: #c0023d;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(224, 2, 67, 0.35);
}
.svc-btn-outline {
background: transparent;
color: #fff;
font-weight: 600;
border-radius: 50px;
padding: 14px 32px;
border: 2px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.svc-btn-outline:hover {
background: #fff;
color: var(--svc-dark);
border-color: #fff;
transform: translateY(-2px);
}
/* Hero Stats */
.svc-hero-stats {
display: flex;
gap: 40px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.svc-hero-stat h3 {
font-size: 2rem;
font-weight: 800;
color: var(--svc-gold);
margin-bottom: 4px;
}
.svc-hero-stat p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Hero Visual Card */
.svc-hero-visual {
position: relative;
z-index: 2;
}
.svc-float-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
transform: perspective(1000px) rotateY(-5deg) rotateX(3deg);
transition: transform 0.5s ease;
}
.svc-float-card:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.svc-float-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.svc-float-card-header h5 {
color: #fff;
font-weight: 700;
margin: 0;
}
.svc-float-card-header .badge {
background: rgba(224, 2, 67, 0.2);
color: #ff6b8a;
border: 1px solid rgba(224, 2, 67, 0.3);
font-size: 0.7rem;
}
.svc-mini-service {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 10px;
transition: all 0.3s ease;
}
.svc-mini-service:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(224, 2, 67, 0.3);
}
.svc-mini-icon {
width: 42px;
height: 42px;
background: linear-gradient(135deg, var(--svc-primary), #ff6b8a);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
flex-shrink: 0;
}
.svc-mini-service h6 {
color: #fff;
font-weight: 600;
margin: 0 0 2px;
font-size: 0.9rem;
}
.svc-mini-service small {
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
}
/* Services Grid Section */
.svc-grid-section {
padding: 100px 0;
background: var(--svc-light);
}
.svc-section-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(224, 2, 67, 0.08);
color: var(--svc-primary);
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
}
.svc-section-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--svc-dark);
margin-bottom: 12px;
line-height: 1.2;
}
.svc-section-subtitle {
color: var(--svc-gray);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 50px;
}
/* Service Cards */
.svc-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.svc-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
border-color: rgba(224, 2, 67, 0.2);
}
.svc-card-top {
background: linear-gradient(135deg, var(--svc-dark) 0%, #1e293b 100%);
padding: 32px 28px;
position: relative;
overflow: hidden;
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.svc-card-top::before {
content: '';
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.2), transparent 70%);
}
.svc-card-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--svc-primary), #ff6b8a);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.4rem;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.svc-card-top h4 {
color: #fff;
font-weight: 700;
font-size: 1.25rem;
margin: 0;
position: relative;
z-index: 1;
}
.svc-card-body {
padding: 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.svc-card-desc {
color: var(--svc-gray);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 20px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.svc-card-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.svc-card-feature-tag {
background: rgba(224, 2, 67, 0.06);
color: var(--svc-primary);
font-size: 0.75rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 50px;
border: 1px solid rgba(224, 2, 67, 0.12);
}
.svc-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--svc-primary);
font-weight: 600;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
margin-top: auto;
}
.svc-card-link:hover {
gap: 14px;
color: #c0023d;
}
.svc-card-link i {
transition: transform 0.3s ease;
}
.svc-card:hover .svc-card-link i {
transform: translateX(4px);
}
/* Featured Service */
.svc-featured {
padding: 80px 0;
background: #fff;
}
.svc-featured-card {
background: linear-gradient(135deg, var(--svc-dark) 0%, #1e293b 100%);
border-radius: 24px;
overflow: hidden;
position: relative;
}
.svc-featured-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(224, 2, 67, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(224, 2, 67, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
.svc-featured-content {
position: relative;
z-index: 1;
padding: 60px;
}
.svc-featured-content .svc-section-badge {
background: rgba(248, 213, 83, 0.15);
color: var(--svc-gold);
}
.svc-featured-content h2 {
color: #fff;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 16px;
}
.svc-featured-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 32px;
max-width: 500px;
}
.svc-featured-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
}
.svc-featured-list li {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.85);
padding: 8px 0;
font-weight: 500;
}
.svc-featured-list li i {
color: var(--svc-gold);
font-size: 0.85rem;
}
.svc-featured-visual {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.svc-featured-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
}
.svc-feat-stat {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 24px;
text-align: center;
transition: all 0.3s ease;
}
.svc-feat-stat:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(224, 2, 67, 0.3);
transform: translateY(-3px);
}
.svc-feat-stat i {
font-size: 1.5rem;
color: var(--svc-primary);
margin-bottom: 12px;
display: block;
}
.svc-feat-stat h4 {
color: #fff;
font-weight: 800;
font-size: 1.75rem;
margin-bottom: 4px;
}
.svc-feat-stat span {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Process Section */
.svc-process {
padding: 100px 0;
background: var(--svc-light);
}
.svc-process-step {
position: relative;
padding: 32px;
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
height: 100%;
transition: all 0.3s ease;
}
.svc-process-step:hover {
border-color: var(--svc-primary);
box-shadow: 0 10px 30px rgba(224, 2, 67, 0.1);
transform: translateY(-5px);
}
.svc-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--svc-primary), #ff6b8a);
color: #fff;
border-radius: 12px;
font-weight: 800;
font-size: 1.25rem;
margin-bottom: 20px;
}
.svc-process-step h5 {
font-weight: 700;
color: var(--svc-dark);
margin-bottom: 10px;
font-size: 1.125rem;
}
.svc-process-step p {
color: var(--svc-gray);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* CTA Section */
.svc-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--svc-primary), #ff2e63);
position: relative;
overflow: hidden;
}
.svc-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.4;
}
.svc-cta-content {
position: relative;
z-index: 1;
}
.svc-cta h2 {
font-size: 2.75rem;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}
.svc-cta p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
margin-bottom: 36px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.svc-cta .svc-btn-white {
background: #fff;
color: var(--svc-primary);
font-weight: 700;
border-radius: 50px;
padding: 16px 40px;
border: none;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1.05rem;
}
.svc-cta .svc-btn-white:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
color: var(--svc-primary);
}
/* Empty State */
.svc-empty {
text-align: center;
padding: 80px 20px;
}
.svc-empty i {
font-size: 4rem;
color: #cbd5e1;
margin-bottom: 20px;
}
.svc-empty h3 {
color: var(--svc-dark);
font-weight: 700;
margin-bottom: 10px;
}
.svc-empty p {
color: var(--svc-gray);
}
/* Animations */
.svc-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.svc-fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.svc-delay-100 { transition-delay: 0.1s; }
.svc-delay-200 { transition-delay: 0.2s; }
.svc-delay-300 { transition-delay: 0.3s; }
.svc-delay-400 { transition-delay: 0.4s; }
/* Gallery Preview */
.svc-gallery-strip {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.svc-gallery-thumb {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}
.svc-card:hover .svc-gallery-thumb {
border-color: var(--svc-primary);
}
.svc-gallery-more {
width: 48px;
height: 48px;
border-radius: 8px;
background: rgba(224, 2, 67, 0.06);
border: 2px solid rgba(224, 2, 67, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--svc-primary);
font-size: 0.7rem;
font-weight: 700;
}
/* Responsive */
@media (max-width: 991px) {
.svc-hero h1 { font-size: 2.5rem; }
.svc-hero-stats { gap: 24px; flex-wrap: wrap; }
.svc-featured-content { padding: 40px; }
.svc-featured-content h2 { font-size: 2rem; }
.svc-cta h2 { font-size: 2rem; }
.svc-section-title { font-size: 2rem; }
}
@media (max-width: 767px) {
.svc-hero { padding: 80px 0 60px; }
.svc-hero h1 { font-size: 2rem; }
.svc-float-card { display: none; }
.svc-featured-content { padding: 30px; }
.svc-featured-stats-grid { grid-template-columns: 1fr; }
.svc-cta h2 { font-size: 1.75rem; }
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > SOLUTION > EVENTPROMOTION
Source: resources\views\frontend\page\solution\eventPromotion.blade.php
-------------------------------------------------------------------------- */
/* Event-Specific Styles with Independent Prefix */
.event-root {
--event-primary: #E6212D;
--event-dark: #150D14;
--event-darker: #0d080c;
--event-light: #FFFFFF;
--event-gray: #4b5563;
}
/* Event Text Colors */
.event-text-primary { color: #E6212D !important; }
.event-text-dark { color: #150D14 !important; }
.event-text-white { color: #FFFFFF !important; }
.event-text-gradient {
background: linear-gradient(90deg, #E6212D, #ff8a93);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Event Backgrounds */
.event-bg-primary { background-color: #E6212D !important; }
.event-bg-dark { background-color: #150D14 !important; }
.event-bg-light { background-color: #FFFFFF !important; }
/* Event Buttons */
.event-btn-primary {
background-color: #E6212D;
color: white;
font-weight: 600;
border-radius: 50px;
padding: 12px 30px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid #E6212D;
position: relative;
overflow: hidden;
z-index: 1;
}
.event-btn-primary::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #b91c25;
transition: width 0.3s ease;
z-index: -1;
}
.event-btn-primary:hover {
color: white;
border-color: #b91c25;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(230, 33, 45, 0.4);
}
.event-btn-primary:hover::after {
width: 100%;
}
.event-btn-outline-light {
border-radius: 50px;
padding: 12px 30px;
font-weight: 600;
border: 2px solid rgba(255,255,255,0.3);
color: white;
transition: all 0.3s ease;
}
.event-btn-outline-light:hover {
background-color: white;
border-color: white;
color: #150D14;
}
/* Event Scarcity Banner */
.event-scarcity-banner {
background-color: #1a1a1a;
color: white;
font-size: 0.9rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1040;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
/* Event Hero Section */
.event-hero-section {
padding-top: 140px;
padding-bottom: 120px;
background-color: #150D14;
position: relative;
overflow: hidden;
color: white;
}
.event-grid-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image:
linear-gradient(#E6212D 1px, transparent 1px),
linear-gradient(90deg, #E6212D 1px, transparent 1px);
background-size: 50px 50px;
z-index: 0;
mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}
.event-hero-gradient {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(230, 33, 45, 0.15), transparent 60%);
z-index: 1;
}
.event-hero-content {
position: relative;
z-index: 2;
}
/* Event Dashboard Card */
.event-dashboard-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: transform 0.5s ease;
}
.event-dashboard-card:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.event-threat-meter {
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 4px;
overflow: hidden;
margin-top: 8px;
}
.event-threat-fill {
height: 100%;
background: #E6212D;
width: 85%;
border-radius: 4px;
box-shadow: 0 0 10px #E6212D;
animation: event-pulse-width 2s infinite ease-in-out;
}
@keyframes event-pulse-width {
0% { width: 85%; opacity: 0.8; }
50% { width: 88%; opacity: 1; }
100% { width: 85%; opacity: 0.8; }
}
/* Event Logo Strip */
.event-logo-strip {
filter: grayscale(100%) opacity(0.6);
transition: all 0.3s;
}
.event-logo-strip:hover {
filter: grayscale(0%) opacity(1);
}
/* Event Service Cards */
.event-service-card {
background: white;
border: 1px solid #f3f4f6;
border-radius: 16px;
padding: 40px 30px;
transition: all 0.4s ease;
height: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}
.event-service-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
background: linear-gradient(to top, rgba(230, 33, 45, 0.05), transparent);
transition: height 0.4s ease;
z-index: -1;
}
.event-service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
border-color: rgba(230, 33, 45, 0.2);
}
.event-service-card:hover::after {
height: 100%;
}
.event-icon-box {
width: 60px;
height: 60px;
background: #fff5f5;
color: #E6212D;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.event-service-card:hover .event-icon-box {
background: #E6212D;
color: white;
transform: rotateY(180deg);
}
/* Event Referral Section */
.event-referral-section {
background-color: #E6212D;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.event-referral-input:focus {
box-shadow: none;
border-color: transparent;
}
/* Event Crisis Banner */
.event-crisis-banner {
background: linear-gradient(135deg, #150D14 0%, #2a1b24 100%);
border-radius: 24px;
overflow: hidden;
position: relative;
border: 1px solid rgba(255,255,255,0.1);
}
.event-crisis-bg-pattern {
position: absolute;
right: 0;
bottom: 0;
font-size: 15rem;
color: rgba(255,255,255,0.03);
transform: translate(20%, 20%);
}
/* Event Process Timeline */
.event-process-number {
font-size: 4rem;
font-weight: 800;
color: rgba(255,255,255,0.05);
line-height: 1;
position: absolute;
top: -20px;
left: -10px;
z-index: 0;
}
.event-process-item {
position: relative;
z-index: 1;
background: rgba(255,255,255,0.03);
padding: 30px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s ease;
}
.event-process-item:hover {
transform: translateX(10px);
border-color: #E6212D;
}
/* Event Forms */
.event-form-control-dark {
background-color: #f8f9fa;
border: 1px solid #e5e7eb;
color: #333;
padding: 15px;
border-radius: 8px;
font-size: 0.95rem;
}
.event-form-control-dark:focus {
background-color: white;
border-color: #E6212D;
color: #333;
box-shadow: 0 0 0 4px rgba(230, 33, 45, 0.1);
}
/* Event FAQ */
.event-faq-accordion .accordion-button:not(.collapsed) {
color: #E6212D;
background-color: #fff5f5;
font-weight: 600;
}
.event-faq-accordion .accordion-button:focus {
box-shadow: none;
border-color: rgba(230, 33, 45, 0.3);
}
.event-faq-accordion .accordion-item {
border: 1px solid #eee;
margin-bottom: 10px;
border-radius: 8px !important;
overflow: hidden;
}
/* Event Toast */
.event-toast-container {
z-index: 1050;
}
@keyframes event-ping {
75%, 100% {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0;
}
}
/* Event Animations */
.event-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.event-fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.event-delay-100 { transition-delay: 0.1s; }
.event-delay-200 { transition-delay: 0.2s; }
.event-delay-300 { transition-delay: 0.3s; }
/* Event Progress Bar */
.event-progress {
height: 6px;
background: rgba(255,255,255,0.1);
}
.event-progress-bar {
background-color: #E6212D;
}
/* Event Stats Section */
.event-stats-card {
background: white;
border-radius: 1rem;
padding: 3rem;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Event Border Utilities */
.event-border-start-md {
border-left: none;
}
@media (min-width: 768px) {
.event-border-start-md {
border-left: 1px solid #e5e7eb;
}
}
/* --------------------------------------------------------------------------
PAGE: RESOURCES > VIEWS > FRONTEND > PAGE > SOLUTION > SHOW
Source: resources\views\frontend\page\solution\show.blade.php
-------------------------------------------------------------------------- */
.sol-root {
--sol-primary: #E00243;
--sol-dark: #0f172a;
--sol-gray: #64748b;
--sol-light: #f8fafc;
}
/* Banner Carousel */
.sol-banner-carousel {
position: relative;
overflow: hidden;
}
.sol-banner-carousel .carousel-item img {
width: 100%;
height: 400px;
object-fit: cover;
}
.sol-banner-carousel .carousel-control-prev,
.sol-banner-carousel .carousel-control-next {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.45);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.sol-banner-carousel:hover .carousel-control-prev,
.sol-banner-carousel:hover .carousel-control-next {
opacity: 1;
}
.sol-banner-carousel .carousel-control-prev {
left: 20px;
}
.sol-banner-carousel .carousel-control-next {
right: 20px;
}
.sol-banner-carousel .carousel-indicators {
margin-bottom: 16px;
}
.sol-banner-carousel .carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.5);
margin: 0 5px;
transition: all 0.3s ease;
}
.sol-banner-carousel .carousel-indicators .active {
background: #fff;
transform: scale(1.2);
}
.sol-banner-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
pointer-events: none;
z-index: 1;
}
/* Section Images Carousel */
.sol-section-images {
padding: 80px 0;
background: var(--sol-light);
}
.sol-section-images .swiper {
padding: 10px 0 50px;
}
.sol-section-img-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.4s ease;
background: #fff;
}
.sol-section-img-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
border-color: rgba(224, 2, 67, 0.2);
}
.sol-section-img-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.sol-section-img-card:hover img {
transform: scale(1.05);
}
.sol-section-images .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #cbd5e1;
opacity: 1;
transition: all 0.3s ease;
}
.sol-section-images .swiper-pagination-bullet-active {
background: var(--sol-primary);
width: 28px;
border-radius: 5px;
}
.sol-section-images .swiper-button-next,
.sol-section-images .swiper-button-prev {
width: 44px;
height: 44px;
background: #fff;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.sol-section-images .swiper-button-next:hover,
.sol-section-images .swiper-button-prev:hover {
background: var(--sol-primary);
box-shadow: 0 6px 20px rgba(224, 2, 67, 0.3);
}
.sol-section-images .swiper-button-next::after,
.sol-section-images .swiper-button-prev::after {
font-size: 16px;
font-weight: 700;
color: var(--sol-dark);
transition: color 0.3s ease;
}
.sol-section-images .swiper-button-next:hover::after,
.sol-section-images .swiper-button-prev:hover::after {
color: #fff;
}
/* Hero */
.sol-hero {
background: linear-gradient(135deg, var(--sol-dark) 0%, #1e293b 100%);
padding: 100px 0 70px;
color: #fff;
position: relative;
overflow: hidden;
}
.sol-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.06;
background-image:
linear-gradient(var(--sol-primary) 1px, transparent 1px),
linear-gradient(90deg, var(--sol-primary) 1px, transparent 1px);
background-size: 50px 50px;
mask-image: radial-gradient(circle at 70% 50%, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 70% 50%, black 20%, transparent 70%);
}
.sol-hero-glow {
position: absolute;
top: -100px;
right: -50px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.12), transparent 70%);
}
.sol-hero-content {
position: relative;
z-index: 2;
}
.sol-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: 0.875rem;
}
.sol-breadcrumb a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.3s ease;
}
.sol-breadcrumb a:hover {
color: #fff;
}
.sol-breadcrumb span {
color: rgba(255, 255, 255, 0.3);
}
.sol-breadcrumb .current {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.sol-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(224, 2, 67, 0.15);
border: 1px solid rgba(224, 2, 67, 0.3);
color: #ff6b8a;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 16px;
}
.sol-hero h1 {
font-size: 3rem;
font-weight: 800;
line-height: 1.15;
margin-bottom: 16px;
color: #fff;
}
.sol-hero-desc {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.7);
max-width: 550px;
line-height: 1.7;
margin-bottom: 28px;
}
.sol-hero-btn {
background: var(--sol-primary);
color: #fff;
font-weight: 600;
border-radius: 50px;
padding: 14px 32px;
border: none;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.sol-hero-btn:hover {
background: #c0023d;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(224, 2, 67, 0.35);
}
/* Gallery Features */
.sol-gallery {
padding: 80px 0;
background: var(--sol-light);
}
.sol-section-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(224, 2, 67, 0.08);
color: var(--sol-primary);
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
}
.sol-section-title {
font-size: 2.25rem;
font-weight: 800;
color: var(--sol-dark);
margin-bottom: 8px;
}
.sol-section-sub {
color: var(--sol-gray);
font-size: 1.05rem;
margin-bottom: 48px;
}
.sol-gallery-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
transition: all 0.4s ease;
height: 100%;
}
.sol-gallery-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
border-color: rgba(224, 2, 67, 0.2);
}
.sol-gallery-card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.sol-gallery-card .card-body {
padding: 24px;
}
.sol-gallery-card h5 {
font-weight: 700;
color: var(--sol-dark);
margin-bottom: 8px;
font-size: 1.1rem;
}
.sol-gallery-card p {
color: var(--sol-gray);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* Text Features */
.sol-features {
padding: 80px 0;
background: #fff;
}
.sol-feature-item {
background: var(--sol-light);
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 28px;
height: 100%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.sol-feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(to bottom, var(--sol-primary), #ff6b8a);
transition: height 0.4s ease;
}
.sol-feature-item:hover {
border-color: rgba(224, 2, 67, 0.2);
box-shadow: 0 8px 25px rgba(224, 2, 67, 0.08);
transform: translateY(-4px);
}
.sol-feature-item:hover::before {
height: 100%;
}
.sol-feature-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--sol-primary), #ff6b8a);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
margin-bottom: 16px;
}
.sol-feature-item h5 {
font-weight: 700;
color: var(--sol-dark);
margin-bottom: 8px;
font-size: 1.05rem;
}
.sol-feature-item p {
color: var(--sol-gray);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* CTA */
.sol-cta {
padding: 80px 0;
background: linear-gradient(135deg, var(--sol-primary) 0%, #ff2e63 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.sol-cta::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2l2 3.5-2 3z'/%3E%3C/g%3E%3C/svg%3E");
}
.sol-cta-content {
position: relative;
z-index: 1;
}
.sol-cta h2 {
color: #fff;
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 16px;
}
.sol-cta p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 32px;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
.sol-cta-btn {
background: #fff;
color: var(--sol-primary);
font-weight: 700;
padding: 16px 40px;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.sol-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
color: var(--sol-primary);
}
/* Back Link */
.sol-back {
padding: 24px 0;
background: var(--sol-light);
border-bottom: 1px solid #e2e8f0;
}
.sol-back a {
color: var(--sol-gray);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.3s ease;
}
.sol-back a:hover {
color: var(--sol-primary);
}
/* Animations */
.sol-fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.sol-fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 991px) {
.sol-hero h1 {
font-size: 2.25rem;
}
.sol-section-title {
font-size: 1.75rem;
}
.sol-cta h2 {
font-size: 1.75rem;
}
}
@media (max-width: 767px) {
.sol-hero {
padding: 80px 0 50px;
}
.sol-hero h1 {
font-size: 1.75rem;
}
}
/* ==========================================================================
INFLUENCER HIVE - MODERN ULTRA-PREMIUM HOMEPAGE DESIGN SYSTEM
========================================================================== */
.hive-gradient-text {
background: linear-gradient(135deg, #E00243 0%, #ff5277 50%, #E00243 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-hero-dark {
position: relative;
background: radial-gradient(circle at 50% 0%, rgba(224, 2, 67, 0.18) 0%, rgba(15, 23, 42, 0) 65%),
linear-gradient(180deg, #0b0f19 0%, #0f172a 100%);
overflow: hidden;
}
.hive-card-glass {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
border-radius: 1.25rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hive-card-glass:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -10px rgba(224, 2, 67, 0.12);
border-color: rgba(224, 2, 67, 0.3);
}
.hive-card-dark {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
border-radius: 1.25rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hive-card-dark:hover {
transform: translateY(-4px);
border-color: rgba(224, 2, 67, 0.4);
box-shadow: 0 20px 40px -10px rgba(224, 2, 67, 0.2);
}
.hive-badge-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 1rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.hive-platform-pill {
transition: all 0.25s ease;
border: 1px solid #e2e8f0;
}
.hive-platform-pill:hover, .hive-platform-pill.active {
background-color: #E00243;
color: #ffffff !important;
border-color: #E00243;
}
/* ==========================================================================
PRO CREATOR CARD DESIGN (Modern, Interactive, High-Converting)
========================================================================== */
.hive-creator-pro-card {
position: relative;
background: #ffffff;
border-radius: 1.25rem;
border: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hive-creator-pro-card:hover {
transform: translateY(-7px);
box-shadow: 0 22px 40px -12px rgba(224, 2, 67, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);
border-color: rgba(224, 2, 67, 0.35);
}
/* Card Cover Banner */
.hive-creator-cover-banner {
position: relative;
height: 72px;
background: linear-gradient(135deg, #fff0f3 0%, #fdf2f4 50%, #f8fafc 100%);
padding: 0.75rem 1rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
overflow: hidden;
}
.hive-creator-cover-banner.instagram {
background: linear-gradient(135deg, rgba(253, 89, 73, 0.12) 0%, rgba(214, 36, 159, 0.1) 50%, rgba(40, 90, 235, 0.08) 100%);
}
.hive-creator-cover-banner.youtube {
background: linear-gradient(135deg, rgba(255, 0, 0, 0.12) 0%, rgba(224, 2, 67, 0.08) 100%);
}
.hive-creator-cover-banner.linkedin {
background: linear-gradient(135deg, rgba(0, 119, 181, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
}
.hive-creator-cover-banner::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(224, 2, 67, 0.15), transparent);
}
/* Floating Badges on Cover */
.hive-tier-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(226, 232, 240, 0.8);
backdrop-filter: blur(8px);
font-size: 0.6875rem;
font-weight: 700;
color: #475569;
letter-spacing: 0.02em;
text-transform: capitalize;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.hive-platform-pill-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
border-radius: 9999px;
background: #ffffff;
font-size: 0.6875rem;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(226, 232, 240, 0.9);
text-transform: capitalize;
}
.hive-platform-pill-badge.instagram {
color: #d6249f;
}
.hive-platform-pill-badge.youtube {
color: #ff0000;
}
.hive-platform-pill-badge.linkedin {
color: #0077b5;
}
.hive-platform-pill-badge.facebook {
color: #1877f2;
}
.hive-platform-pill-badge.telegram {
color: #229ED9;
}
/* Card Body */
.hive-creator-body {
padding: 0 1.25rem 1.25rem;
position: relative;
z-index: 2;
}
/* Avatar Presentation (Guaranteed 100% round, no squeezing) */
.hive-avatar-anchor {
position: relative;
width: 68px;
height: 68px;
min-width: 68px;
min-height: 68px;
margin-top: -34px;
margin-bottom: 0.85rem;
flex-shrink: 0;
}
.hive-creator-avatar,
.hive-creator-avatar-placeholder {
width: 68px !important;
height: 68px !important;
min-width: 68px !important;
min-height: 68px !important;
max-width: 68px !important;
max-height: 68px !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
flex-shrink: 0 !important;
border: 3.5px solid #ffffff !important;
box-shadow: 0 6px 18px -2px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.hive-avatar-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #E00243;
color: #ffffff;
border: 2px solid #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
box-shadow: 0 2px 6px rgba(224, 2, 67, 0.4);
z-index: 3;
}
/* Name and Handle */
.hive-creator-name {
font-weight: 800;
color: #0f172a;
font-size: 14px !important;
line-height: 1.35;
margin-bottom: 0.2rem;
display: flex;
align-items: center;
gap: 0.35rem;
letter-spacing: -0.01em;
}
.hive-creator-name:hover {
color: #E00243;
}
.hive-creator-title {
font-size: 14px !important;
font-weight: 600;
color: #475569;
line-height: 1.35;
margin-bottom: 0.25rem;
display: block;
letter-spacing: -0.01em;
}
.hive-creator-handle {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
display: block;
margin-bottom: 0.85rem;
}
/* Categories Chips */
.hive-category-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.65rem;
border-radius: 6px;
background: #fff1f4;
border: 1px solid rgba(224, 2, 67, 0.16);
color: #E00243;
font-size: 0.7125rem;
font-weight: 700;
}
/* Pro Analytics Box */
.hive-pro-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 0.75rem 0.9rem;
background: #f8fafc;
border: 1px solid #eef2f6;
border-radius: 0.875rem;
margin: 1rem 0;
position: relative;
}
.hive-stat-col {
display: flex;
flex-direction: column;
}
.hive-stat-col:last-child {
border-left: 1px solid #e2e8f0;
padding-left: 0.75rem;
}
.hive-stat-micro-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
margin-bottom: 0.2rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.hive-stat-main-val {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.hive-stat-main-val.rating {
color: #E00243;
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Location & Pricing Micro Row */
.hive-creator-meta-strip {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
color: #64748b;
padding-top: 0.5rem;
margin-bottom: 1rem;
border-top: 1px dashed #e2e8f0;
}
/* Card CTA Button */
.hive-creator-action-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hive-creator-card-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem 1rem;
border-radius: 0.75rem;
background: linear-gradient(135deg, #E00243 0%, #ff1a57 100%);
color: #ffffff !important;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
box-shadow: 0 4px 14px rgba(224, 2, 67, 0.3);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
border: none;
}
.hive-creator-card-btn:hover {
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(224, 2, 67, 0.5);
color: #ffffff !important;
text-decoration: none;
}
.hive-creator-card-btn:hover i {
transform: translateX(3px);
}
.hive-creator-card-btn i {
transition: transform 0.2s ease;
}
.hive-creator-social-btn {
width: 38px;
height: 38px;
border-radius: 0.75rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.25s ease;
flex-shrink: 0;
}
.hive-creator-social-btn:hover {
background: #E00243;
color: #ffffff !important;
border-color: #E00243;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.35);
text-decoration: none;
}
.hive-step-number {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #E00243 0%, #ff5277 100%);
color: #ffffff;
font-weight: 800;
font-size: 1.125rem;
box-shadow: 0 6px 16px rgba(224, 2, 67, 0.3);
}
.hive-banner-container {
border-radius: 1.5rem;
overflow: hidden;
position: relative;
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
}
.hive-banner-container .carousel-item {
height: 480px;
}
@media (max-width: 768px) {
.hive-banner-container .carousel-item {
height: 280px;
}
}
.hive-banner-media {
width: 100%;
height: 100%;
object-fit: cover;
}
.marquee-container {
display: flex;
overflow: hidden;
user-select: none;
gap: 2rem;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: 2rem;
animation: marquee 25s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - 2rem)); }
}
/* ==========================================================================
FLOATING PILL NAVBAR DESIGN (Capsule Header Matching Reference)
========================================================================== */
.hive-header-floating {
position: sticky;
top: 0;
z-index: 1040;
padding-top: 14px;
padding-bottom: 8px;
background: transparent;
transition: all 0.3s ease;
}
.hive-pill-bar {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 9999px !important;
padding: 8px 14px 8px 24px !important;
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
max-width: 1380px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
@media (min-width: 992px) {
.hive-pill-bar {
height: 66px;
}
}
.hive-pill-bar .navbar-brand {
font-weight: 800 !important;
color: var(--black-color) !important;
font-size: 1.25rem !important;
display: inline-flex;
align-items: center;
margin-right: 1.25rem;
padding: 0;
text-decoration: none;
letter-spacing: -0.02em;
}
.hive-pill-bar .logo-text {
background-color: var(--main-color) !important;
color: #ffffff !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
padding: 2px 7px;
border-radius: 6px;
margin-left: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link::after,
.hive-nav-pill-wrapper .navbar-nav .nav-link::before {
display: none !important;
content: none !important;
}
/* Center Navigation Inner Pill Container */
@media (min-width: 992px) {
.hive-nav-pill-wrapper {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 9999px;
padding: 4px 6px;
display: inline-flex;
align-items: center;
}
.hive-nav-pill-wrapper .navbar-nav {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link {
font-size: 0.8125rem !important;
font-weight: 500 !important;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
background: transparent;
padding: 6px 14px !important;
border-radius: 9999px !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
white-space: nowrap;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link::after {
display: none !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link:hover,
.hive-nav-pill-wrapper .navbar-nav .nav-link.show,
.hive-nav-pill-wrapper .navbar-nav .nav-item.show .nav-link {
color: var(--main-color) !important;
-webkit-text-fill-color: var(--main-color) !important;
background: #ffffff !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.hive-nav-pill-wrapper .navbar-nav .nav-link.active {
color: var(--main-color) !important;
-webkit-text-fill-color: var(--main-color) !important;
background: #ffffff !important;
font-weight: 600 !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
}
/* Right Action Items */
.hive-nav-signin-link {
font-size: 0.84rem !important;
font-weight: 600 !important;
color: #0f172a !important;
text-decoration: none !important;
padding: 8px 16px;
border-radius: 9999px;
transition: all 0.2s ease;
white-space: nowrap;
}
.hive-nav-signin-link:hover {
color: var(--main-color) !important;
}
.hive-nav-getstarted-btn {
background: #0f172a !important;
color: #ffffff !important;
font-size: 0.84rem !important;
font-weight: 600 !important;
border-radius: 9999px !important;
padding: 8px 20px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
text-decoration: none !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
white-space: nowrap;
border: none;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}
.hive-nav-getstarted-btn:hover {
background: var(--main-color) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(224, 2, 67, 0.28);
}
.hive-nav-getstarted-btn i {
transition: transform 0.2s ease;
}
.hive-nav-getstarted-btn:hover i {
transform: translateX(3px);
}
/* Dropdown Menu Enhancements for Floating Pill */
.hive-pill-bar .dropdown-menu {
border-radius: 1rem !important;
box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
margin-top: 0 !important;
}
@media (min-width: 992px) {
.hive-pill-bar .platform-dropdown,
.hive-pill-bar .services-dropdown-menu,
.hive-pill-bar .solutions-dropdown-menu,
.hive-pill-bar .locations-dropdown-menu,
.hive-pill-bar .resources-dropdown-menu,
.hive-pill-bar .company-dropdown-menu {
position: absolute;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
}
}
/* Mobile & Tablet Responsiveness */
@media (max-width: 991.98px) {
.hive-header-floating {
padding-top: 10px;
}
.hive-pill-bar {
border-radius: 1.25rem !important;
padding: 10px 18px !important;
}
.hive-pill-bar .navbar-collapse {
margin-top: 12px;
padding: 16px;
background: #ffffff;
border-radius: 1rem;
border: 1px solid #e2e8f0;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}
.hive-nav-pill-wrapper {
width: 100%;
background: transparent;
padding: 0;
}
.hive-nav-pill-wrapper .navbar-nav {
width: 100%;
gap: 4px;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link {
padding: 10px 14px !important;
border-radius: 0.5rem;
display: block;
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link:hover {
background: #f8fafc;
color: var(--main-color) !important;
-webkit-text-fill-color: var(--main-color) !important;
}
.hive-header-actions {
flex-direction: column;
width: 100%;
gap: 8px !important;
margin-top: 14px !important;
}
.hive-nav-signin-link,
.hive-nav-getstarted-btn {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* ==========================================================================
ULTRA-MODERN MEGA DROPDOWN SYSTEM (Linear/Stripe Inspired)
Strict Palette: #E00243 (Brand), #0f172a (Dark), #ffffff (White), #475569 (Slate)
========================================================================== */
.hive-mega-dropdown {
background: #ffffff !important;
border-radius: 1.25rem !important;
border: 1px solid rgba(226, 232, 240, 0.9) !important;
box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.6) !important;
padding: 1.25rem !important;
margin: 0 !important;
backdrop-filter: blur(16px);
z-index: 1050;
}
/* Desktop Centered Positioning and Dimensions */
@media (min-width: 992px) {
.hive-pill-bar .dropdown {
position: static;
}
.hive-nav-pill-wrapper {
position: relative;
}
.hive-mega-dropdown {
position: absolute !important;
top: calc(100% + 14px) !important;
left: 50% !important;
transform: translateX(-50%) translateY(8px) !important;
right: auto !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
/* Invisible bridge to prevent hover loss */
.hive-mega-dropdown::before {
content: "";
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 20px;
}
.hive-mega-dropdown.show,
.dropdown:hover .hive-mega-dropdown {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
.hive-platform-dropdown {
width: min(720px, 94vw) !important;
}
.hive-services-dropdown {
width: min(940px, 95vw) !important;
}
.hive-solutions-dropdown {
width: min(860px, 95vw) !important;
}
.hive-locations-dropdown {
width: min(880px, 95vw) !important;
}
.hive-resources-dropdown {
width: min(720px, 92vw) !important;
}
.hive-company-dropdown {
width: min(720px, 92vw) !important;
}
}
/* Card Components */
.hive-dropdown-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem 0.75rem;
border-radius: 0.875rem;
background: #ffffff;
border: 1px solid #f1f5f9;
text-decoration: none !important;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.hive-dropdown-card:hover {
border-color: rgba(224, 2, 67, 0.35);
background: #ffffff;
box-shadow: 0 12px 24px -6px rgba(224, 2, 67, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
transform: translateY(-2px);
}
.hive-service-card {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 0.875rem;
padding: 0.875rem;
transition: all 0.2s ease;
}
.hive-service-card:hover {
background: #ffffff;
border-color: #cbd5e1;
box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.06);
}
.hive-tier-chip {
display: block;
padding: 0.35rem 0.5rem;
border-radius: 0.5rem;
text-decoration: none !important;
transition: all 0.15s ease;
}
.hive-tier-chip:hover {
background: rgba(224, 2, 67, 0.06);
}
.hive-resource-card {
display: flex;
flex-direction: column;
padding: 1.125rem;
border-radius: 1rem;
background: #ffffff;
border: 1px solid #f1f5f9;
text-decoration: none !important;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.hive-resource-card:hover {
border-color: rgba(224, 2, 67, 0.35);
box-shadow: 0 14px 28px -6px rgba(224, 2, 67, 0.09), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
transform: translateY(-2px);
}
.hive-state-pill {
padding: 0.4rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
outline: none;
}
.hive-state-pill:hover,
.hive-state-pill.active {
background: #E00243 !important;
color: #ffffff !important;
border-color: #E00243 !important;
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.25);
}
/* Custom Scrollbar for Dropdown Content */
.hive-mega-dropdown ::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.hive-mega-dropdown ::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.hive-mega-dropdown ::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.hive-mega-dropdown ::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Mobile & Tablet Responsiveness (< 992px) */
@media (max-width: 991.98px) {
.hive-mega-dropdown {
position: static !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
box-shadow: none !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.875rem !important;
padding: 1rem !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
display: none;
}
.hive-mega-dropdown.show {
display: block !important;
}
.hive-dropdown-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.hive-state-pill {
font-size: 0.7rem;
padding: 0.35rem 0.75rem;
}
}
/* ==========================================================================
FONT AWESOME ICON OVERRIDE & RESTORATION
Ensures *::before Poppins rule does not override Font Awesome icon glyphs
========================================================================== */
.fa, .fas, .far, .fal, .fad, .fa-solid, .fa-regular,
.fa::before, .fas::before, .far::before, .fal::before, .fad::before,
.fa-solid::before, .fa-regular::before,
[class^="fa-"]::before, [class*=" fa-"]::before {
font-family: "Font Awesome 6 Free", "FontAwesome" !important;
font-weight: 900 !important;
font-style: normal !important;
}
.fab, .fa-brands,
.fab::before, .fa-brands::before {
font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
font-weight: 400 !important;
font-style: normal !important;
}
/* ==========================================================================
MOBILE & TABLET NAVBAR AND MEGA-DROPDOWN ENHANCEMENTS (< 992px)
========================================================================== */
@media (max-width: 991.98px) {
.hive-header-floating {
padding-top: 8px !important;
}
.hive-pill-bar {
border-radius: 1.25rem !important;
padding: 10px 16px !important;
position: relative !important;
}
/* Collapsible container */
.hive-pill-bar .navbar-collapse {
margin-top: 12px !important;
padding: 16px !important;
background: #ffffff !important;
border-radius: 1rem !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.15) !important;
max-height: 80vh !important;
overflow-y: auto !important;
}
.hive-pill-bar .navbar-collapse:not(.show) {
display: none !important;
}
.hive-pill-bar .navbar-collapse.show {
display: block !important;
}
.hive-nav-pill-wrapper {
width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
display: block !important;
border-radius: 0 !important;
}
.hive-nav-pill-wrapper .navbar-nav {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-item {
width: 100% !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 12px 16px !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.75rem !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link:hover,
.hive-nav-pill-wrapper .navbar-nav .nav-link.active {
color: #E00243 !important;
-webkit-text-fill-color: #E00243 !important;
background: #fff1f4 !important;
border-color: rgba(224, 2, 67, 0.3) !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link::after,
.hive-nav-pill-wrapper .navbar-nav .nav-link::before {
display: none !important;
content: none !important;
}
.hive-nav-pill-wrapper .dropdown-menu.hive-mega-dropdown {
position: static !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.875rem !important;
padding: 14px !important;
margin-top: 8px !important;
margin-bottom: 8px !important;
box-shadow: none !important;
}
.hive-nav-pill-wrapper .dropdown-menu.hive-mega-dropdown:not(.show) {
display: none !important;
}
.hive-nav-pill-wrapper .dropdown-menu.hive-mega-dropdown.show {
display: block !important;
}
.hive-header-actions {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1px solid #e2e8f0 !important;
}
.hive-nav-signin-link,
.hive-nav-getstarted-btn {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 12px !important;
}
}
/* ==========================================================================
HERO VIDEO BACKGROUND IN HEADER & GET STARTED FIX
========================================================================== */
.hive-header-floating {
position: relative !important;
z-index: 1040 !important;
padding-top: 14px !important;
padding-bottom: 8px !important;
background: transparent !important;
}
.hive-header-hero-video-wrap {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
min-height: 680px !important;
max-height: 980px !important;
overflow: hidden !important;
z-index: 0 !important;
pointer-events: none !important;
}
.hive-header-hero-video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 25% !important;
}
.hive-header-hero-video-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg,
rgba(15, 23, 42, 0.40) 0%,
rgba(15, 23, 42, 0.60) 35%,
rgba(15, 23, 42, 0.82) 70%,
#0f172a 100%) !important;
backdrop-filter: blur(1px) !important;
}
.hive-hero-dark {
background: transparent !important;
position: relative !important;
z-index: 1 !important;
}
/* Get Started Button & Pill Layout Fix */
.hive-pill-bar {
width: 100% !important;
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 6px 18px 6px 22px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
background: rgba(255, 255, 255, 0.94) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
box-sizing: border-box !important;
}
@media (min-width: 992px) {
.hive-pill-bar .navbar-collapse {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
flex: 1 1 auto !important;
}
.hive-nav-pill-wrapper {
margin-left: auto !important;
margin-right: auto !important;
flex-shrink: 1 !important;
}
.hive-header-actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
.hive-nav-signin-link {
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: #0f172a !important;
padding: 6px 12px !important;
border-radius: 9999px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
display: inline-block !important;
}
.hive-nav-getstarted-btn {
background: #0f172a !important;
color: #ffffff !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
border-radius: 9999px !important;
padding: 7px 18px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
}
.hive-nav-getstarted-btn span {
white-space: nowrap !important;
}
}
/* Specific Responsive Tuning for 992px - 1280px */
@media (min-width: 992px) and (max-width: 1280px) {
.hive-pill-bar {
padding: 5px 12px 5px 16px !important;
}
.hive-pill-bar .navbar-brand {
font-size: 1.125rem !important;
margin-right: 0.5rem !important;
}
.hive-nav-pill-wrapper {
padding: 3px 4px !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link {
padding: 5px 8px !important;
font-size: 0.775rem !important;
gap: 2px !important;
}
.hive-header-actions {
gap: 6px !important;
}
.hive-nav-signin-link {
padding: 5px 8px !important;
font-size: 0.775rem !important;
}
.hive-nav-getstarted-btn {
padding: 6px 12px !important;
font-size: 0.775rem !important;
gap: 4px !important;
}
}
/* ==========================================================================
PERFECT HEADER ALIGNMENT (DEAD-CENTER MENUS & VERTICAL CENTERLINE)
========================================================================== */
@media (min-width: 992px) {
.hive-pill-bar {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 64px !important;
padding: 0 20px 0 24px !important;
box-sizing: border-box !important;
}
.hive-pill-bar .navbar-brand {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: 42px !important;
z-index: 2 !important;
}
.hive-pill-bar .navbar-collapse {
position: static !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* Dead-Center Horizontal and Vertical Alignment for Navigation Menu */
.hive-nav-pill-wrapper {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 3px 5px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
background: #f8fafc !important;
border: 1px solid #f1f5f9 !important;
border-radius: 9999px !important;
z-index: 10 !important;
box-sizing: border-box !important;
}
.hive-nav-pill-wrapper .navbar-nav {
display: inline-flex !important;
align-items: center !important;
height: 100% !important;
gap: 2px !important;
margin: 0 !important;
padding: 0 !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-item {
display: inline-flex !important;
align-items: center !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link {
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 12px !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
border-radius: 9999px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Actions aligned cleanly to the right */
.hive-header-actions {
margin-left: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
height: 42px !important;
z-index: 10 !important;
flex-shrink: 0 !important;
}
.hive-nav-signin-link {
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 14px !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: #0f172a !important;
line-height: 1 !important;
border-radius: 9999px !important;
text-decoration: none !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
.hive-nav-signin-link:hover {
color: var(--main-color) !important;
background: #fff1f4 !important;
}
.hive-nav-getstarted-btn {
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: #ffffff !important;
background: #0f172a !important;
line-height: 1 !important;
border-radius: 9999px !important;
text-decoration: none !important;
gap: 6px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
.hive-nav-getstarted-btn:hover {
background: var(--main-color) !important;
color: #ffffff !important;
box-shadow: 0 6px 16px rgba(224, 2, 67, 0.3) !important;
}
}
/* Responsive tuning for 992px to 1240px viewports */
@media (min-width: 992px) and (max-width: 1240px) {
.hive-pill-bar {
padding: 0 14px 0 18px !important;
}
.hive-pill-bar .navbar-brand {
font-size: 1.15rem !important;
}
.hive-nav-pill-wrapper {
padding: 2px 4px !important;
}
.hive-nav-pill-wrapper .navbar-nav .nav-link {
height: 32px !important;
padding: 0 8px !important;
font-size: 0.775rem !important;
}
.hive-header-actions {
gap: 6px !important;
}
.hive-nav-signin-link {
height: 34px !important;
padding: 0 10px !important;
font-size: 0.775rem !important;
}
.hive-nav-getstarted-btn {
height: 34px !important;
padding: 0 14px !important;
font-size: 0.775rem !important;
gap: 4px !important;
}
}
/* ==========================================================================
STRICT DESKTOP NAVBAR ALIGNMENT FIX (STATIC COLLAPSE & DEAD-CENTER MENU)
========================================================================== */
@media (min-width: 992px) {
.hive-pill-bar {
position: relative !important;
display: flex !important;
align-items: center !important;
height: 64px !important;
padding: 0 20px 0 24px !important;
box-sizing: border-box !important;
}
.hive-pill-bar .navbar-brand {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: 40px !important;
line-height: 1 !important;
z-index: 5 !important;
}
/* Set navbar-collapse to static so pill wrapper centers relative to hive-pill-bar */
.hive-pill-bar .navbar-collapse {
position: static !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* Dead-center in the whole pill-bar */
.hive-pill-bar .hive-nav-pill-wrapper {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 3px 6px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
background: #f8fafc !important;
border: 1px solid #f1f5f9 !important;
border-radius: 9999px !important;
z-index: 20 !important;
box-sizing: border-box !important;
}
.hive-pill-bar .hive-nav-pill-wrapper .navbar-nav {
display: inline-flex !important;
align-items: center !important;
height: 100% !important;
gap: 2px !important;
margin: 0 !important;
padding: 0 !important;
}
.hive-pill-bar .hive-nav-pill-wrapper .navbar-nav .nav-item {
display: inline-flex !important;
align-items: center !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.hive-pill-bar .hive-nav-pill-wrapper .navbar-nav .nav-link {
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 12px !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
border-radius: 9999px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Right-side action buttons on the EXACT same centerline */
.hive-pill-bar .hive-header-actions {
margin: 0 0 0 auto !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
height: 40px !important;
z-index: 5 !important;
flex-shrink: 0 !important;
}
.hive-pill-bar .hive-nav-signin-link {
margin: 0 !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 14px !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: #0f172a !important;
line-height: 1 !important;
border-radius: 9999px !important;
text-decoration: none !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
.hive-pill-bar .hive-nav-getstarted-btn {
margin: 0 !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
color: #ffffff !important;
background: #0f172a !important;
line-height: 1 !important;
border-radius: 9999px !important;
text-decoration: none !important;
gap: 6px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
}
/* ==========================================================================
PAGE: MODERN INFLUENCER DETAIL SUITE (PROFESSIONAL CREATOR DOSSIER)
========================================================================== */
.inf-detail-page {
background-color: #f8fafc;
min-height: 100vh;
color: #1e293b;
position: relative;
}
/* Breadcrumbs */
.inf-breadcrumb {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
padding: 0.4rem 1.1rem;
border-radius: 9999px;
font-size: 0.8125rem;
}
.inf-breadcrumb a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
transition: all 0.2s ease;
}
.inf-breadcrumb a:hover {
color: #ffffff;
}
/* Modern Cinematic Hero */
.inf-hero {
background: linear-gradient(135deg, #0b0f19 0%, #111827 50%, #1e1b4b 100%);
padding: 3.5rem 0 6.5rem;
color: #ffffff;
position: relative;
overflow: hidden;
}
.inf-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #E00243 0%, #ff4b72 50%, #8b5cf6 100%);
}
.inf-hero-glow-1 {
position: absolute;
top: -120px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.inf-hero-glow-2 {
position: absolute;
bottom: -150px;
left: -100px;
width: 450px;
height: 450px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
pointer-events: none;
}
/* Hero Profile Layout: Avatar on Left, All Text on Right */
.inf-hero-profile-container {
display: flex;
align-items: flex-start;
gap: 2.25rem;
position: relative;
z-index: 10;
}
.inf-hero-avatar-wrap {
flex-shrink: 0;
padding-top: 0.25rem;
}
.inf-hero-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.inf-hero-badges-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.inf-hero-sub-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.85rem;
}
.inf-sub-sep {
color: rgba(255, 255, 255, 0.35);
font-size: 0.85rem;
}
.inf-hero-bottom-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
margin-top: 0.25rem;
}
.inf-hero-actions-inline {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Avatar Presentation */
.inf-hero-avatar {
position: relative;
width: 140px;
height: 140px;
flex-shrink: 0;
}
.inf-avatar-img,
.inf-avatar-placeholder {
width: 140px !important;
height: 140px !important;
border-radius: 28px !important;
object-fit: cover !important;
border: 4px solid rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
background-color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
}
.inf-avatar-placeholder span {
font-size: 42px;
font-weight: 800;
color: #ffffff;
letter-spacing: 2px;
}
.inf-platform-icon {
position: absolute;
bottom: -6px;
right: -6px;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #ffffff;
border: 3px solid #0b0f19;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.inf-platform-icon.instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.inf-platform-icon.youtube { background: #ff0000; }
.inf-platform-icon.facebook { background: #1877f2; }
.inf-platform-icon.linkedin { background: #0077b5; }
.inf-platform-icon.default { background: #E00243; }
.inf-online-badge {
position: absolute;
top: 8px;
right: 8px;
width: 14px;
height: 14px;
background: #10b981;
border: 2.5px solid #0b0f19;
border-radius: 50%;
box-shadow: 0 0 10px #10b981;
}
/* Badges & Meta */
.inf-tier-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.inf-tier-badge.tier-nano { background: rgba(148, 163, 184, 0.2); border: 1px solid rgba(148, 163, 184, 0.4); color: #cbd5e1; }
.inf-tier-badge.tier-micro { background: rgba(224, 2, 67, 0.18); border: 1px solid rgba(224, 2, 67, 0.4); color: #ff6b8b; }
.inf-tier-badge.tier-macro { background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.4); color: #fcd34d; }
.inf-tier-badge.tier-mega { background: rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.4); color: #c4b5fd; }
.inf-tier-badge.tier-default { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; }
.inf-platform-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
backdrop-filter: blur(8px);
}
.inf-hero-name {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.2;
color: #ffffff;
letter-spacing: -0.02em;
margin-bottom: 0.25rem;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.inf-hero-title {
font-size: 1rem;
font-weight: 600;
color: #fda4af;
margin-bottom: 0.35rem;
letter-spacing: 0.01em;
}
.inf-hero-handle {
font-size: 0.875rem;
color: #94a3b8;
margin-bottom: 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
transition: color 0.2s ease;
}
.inf-hero-handle:hover {
color: #ffffff;
}
.inf-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.inf-meta-item {
font-size: 0.8125rem;
color: #cbd5e1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.06);
padding: 0.35rem 0.8rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.inf-meta-item i {
color: #ff4b72;
}
/* Hero Action CTAs */
.inf-hero-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 220px;
}
.inf-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
border-radius: 0.875rem;
font-size: 0.9375rem;
font-weight: 700;
color: #ffffff !important;
background: linear-gradient(135deg, #E00243 0%, #ff255b 100%);
box-shadow: 0 10px 25px -4px rgba(224, 2, 67, 0.45);
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
border: none;
}
.inf-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -4px rgba(224, 2, 67, 0.6);
color: #ffffff !important;
}
.inf-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
border-radius: 0.875rem;
font-size: 0.9375rem;
font-weight: 700;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
text-decoration: none;
transition: all 0.25s ease;
}
.inf-btn-outline:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
color: #ffffff !important;
}
/* High-Impact Executive Stats Section (Floating Cards) */
.inf-stats-section {
padding: 0;
margin-top: -2.75rem;
position: relative;
z-index: 10;
}
.inf-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.inf-stat-card {
background: #ffffff;
border-radius: 1.25rem;
padding: 1.35rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
border: 1px solid rgba(226, 232, 240, 0.9);
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.inf-stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(224, 2, 67, 0.2);
}
.inf-stat-icon-box {
width: 52px;
height: 52px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.inf-stat-icon-box.reach { background: rgba(224, 2, 67, 0.1); color: #E00243; }
.inf-stat-icon-box.engagement { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.inf-stat-icon-box.price { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.inf-stat-icon-box.trust { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.inf-stat-data {
display: flex;
flex-direction: column;
}
.inf-stat-main-number {
font-size: 1.35rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.inf-stat-main-number.highlight {
color: #E00243;
}
.inf-stat-title-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin-top: 0.15rem;
}
.inf-stat-sub-badge {
font-size: 0.6875rem;
font-weight: 600;
color: #10b981;
margin-top: 0.15rem;
}
/* Main Content Area */
.inf-main-content {
padding: 3rem 0 5rem;
}
.inf-content-card {
background: #ffffff;
border-radius: 1.5rem;
padding: 2rem 2.25rem;
border: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
margin-bottom: 2rem;
transition: all 0.25s ease;
}
.inf-content-card:hover {
box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
}
.inf-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f1f5f9;
}
.inf-card-title {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
display: flex;
align-items: center;
gap: 0.65rem;
letter-spacing: -0.01em;
margin: 0;
}
.inf-card-title i {
color: #E00243;
}
/* Editorial Description */
.inf-editorial-bio {
color: #334155;
font-size: 0.975rem;
line-height: 1.85;
}
.inf-editorial-bio p {
margin-bottom: 1.2rem;
}
.inf-editorial-bio p:last-child {
margin-bottom: 0;
}
/* Demographics & Insights */
.inf-demographics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.inf-demo-item {
background: #f8fafc;
border-radius: 1rem;
padding: 1.25rem;
border: 1px solid #eef2f6;
}
.inf-demo-label {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
font-weight: 700;
color: #475569;
margin-bottom: 0.5rem;
}
.inf-demo-bar-track {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 9999px;
overflow: hidden;
display: flex;
}
.inf-demo-bar-fill {
height: 100%;
background: linear-gradient(90deg, #E00243, #ff4b72);
border-radius: 9999px;
}
/* Packages Grid */
.inf-packages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.inf-package-card {
border: 1.5px solid #e2e8f0;
border-radius: 1.25rem;
padding: 1.5rem 1.25rem;
background: #ffffff;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.25s ease;
position: relative;
}
.inf-package-card:hover {
border-color: #E00243;
transform: translateY(-4px);
box-shadow: 0 12px 25px -5px rgba(224, 2, 67, 0.12);
}
.inf-package-card.featured {
border-color: #E00243;
background: linear-gradient(180deg, #fff7f9 0%, #ffffff 100%);
box-shadow: 0 8px 20px -4px rgba(224, 2, 67, 0.1);
}
.inf-package-badge {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: #E00243;
color: #ffffff;
font-size: 0.65rem;
font-weight: 800;
padding: 0.2rem 0.65rem;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.inf-pkg-type {
font-size: 0.75rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.inf-pkg-title {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.5rem;
}
.inf-pkg-desc {
font-size: 0.8125rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 1rem;
}
.inf-pkg-price {
font-size: 1.25rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.85rem;
}
.inf-pkg-features {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}
.inf-pkg-features li {
font-size: 0.785rem;
color: #475569;
margin-bottom: 0.4rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.inf-pkg-features li i {
color: #10b981;
font-size: 0.7rem;
}
/* Brand Collaborations */
.inf-brands-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.inf-brand-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.15rem;
border-radius: 9999px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #1e293b;
font-size: 0.875rem;
font-weight: 700;
transition: all 0.2s ease;
}
.inf-brand-pill:hover {
background: #ffffff;
border-color: #E00243;
color: #E00243;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(224, 2, 67, 0.1);
}
/* Tag Chips */
.inf-tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.inf-tag-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.9rem;
border-radius: 8px;
background: #fff1f4;
border: 1px solid rgba(224, 2, 67, 0.15);
color: #E00243;
font-size: 0.8125rem;
font-weight: 700;
transition: all 0.2s ease;
text-decoration: none;
}
.inf-tag-chip:hover {
background: #E00243;
color: #ffffff;
transform: translateY(-2px);
}
/* Sidebar Styles */
.inf-sidebar-card {
background: #ffffff;
border-radius: 1.5rem;
padding: 1.75rem;
border: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
margin-bottom: 1.75rem;
position: relative;
}
.inf-booking-card {
background: linear-gradient(180deg, #ffffff 0%, #fff7f9 100%);
border: 1.5px solid rgba(224, 2, 67, 0.25);
box-shadow: 0 12px 35px -5px rgba(224, 2, 67, 0.12);
}
.inf-booking-price-header {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px dashed rgba(224, 2, 67, 0.2);
}
.inf-booking-sub {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: #64748b;
letter-spacing: 0.04em;
}
.inf-booking-amount {
font-size: 2rem;
font-weight: 900;
color: #0f172a;
line-height: 1.1;
margin-top: 0.15rem;
}
.inf-booking-perk-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
}
.inf-booking-perk-list li {
font-size: 0.84rem;
color: #334155;
margin-bottom: 0.6rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.inf-booking-perk-list li i {
color: #E00243;
font-size: 0.85rem;
}
/* Info Table List */
.inf-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.inf-info-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 0;
border-bottom: 1px solid #f1f5f9;
}
.inf-info-list li:last-child {
border-bottom: none;
}
.inf-info-label {
font-size: 0.84rem;
color: #64748b;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.inf-info-label i {
color: #94a3b8;
width: 16px;
}
.inf-info-value {
font-size: 0.875rem;
font-weight: 700;
color: #0f172a;
}
/* Modern Share Pills */
.inf-share-pills-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.65rem;
}
.inf-share-circle-btn {
width: 100%;
aspect-ratio: 1/1;
border-radius: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
font-size: 1.15rem;
text-decoration: none;
transition: all 0.25s ease;
border: none;
cursor: pointer;
}
.inf-share-circle-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
color: #ffffff !important;
}
.inf-share-circle-btn.whatsapp { background: #25D366; }
.inf-share-circle-btn.linkedin { background: #0A66C2; }
.inf-share-circle-btn.twitter { background: #000000; }
.inf-share-circle-btn.copy-link { background: #475569; }
/* Responsive adjustments */
@media (max-width: 1024px) {
.inf-stats-grid { grid-template-columns: repeat(2, 1fr); }
.inf-packages-grid { grid-template-columns: 1fr; }
.inf-demographics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.inf-hero { padding: 2.5rem 0 4rem; }
.inf-hero-name { font-size: 1.75rem; }
.inf-hero-avatar, .inf-avatar-img, .inf-avatar-placeholder { width: 110px; height: 110px; }
.inf-avatar-placeholder span { font-size: 32px; }
.inf-stats-grid { grid-template-columns: 1fr; }
.inf-content-card { padding: 1.5rem; }
}
/* ==========================================================================
PAGE: MODERN PROFESSIONAL AUTH SYSTEM (LOGIN / SIGN IN)
========================================================================== */
.hive-auth-page {
min-height: calc(100vh - 80px);
background-color: #f8fafc;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
}
.hive-auth-glow-1 {
position: absolute;
top: -100px;
left: -100px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.hive-auth-glow-2 {
position: absolute;
bottom: -100px;
right: -100px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.hive-auth-card {
width: 100%;
max-width: 1100px;
background: #ffffff;
border-radius: 1.75rem;
box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(226, 232, 240, 0.85);
overflow: hidden;
position: relative;
z-index: 10;
}
/* Left Brand Showcase Panel */
.hive-auth-sidebar {
background: linear-gradient(145deg, #0b0f19 0%, #111827 50%, #1e1b4b 100%);
color: #ffffff;
padding: 3.5rem 3rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
min-height: 620px;
overflow: hidden;
}
.hive-auth-sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #E00243 0%, #ff4b72 50%, #8b5cf6 100%);
}
.hive-auth-sidebar-glow {
position: absolute;
top: 20%;
right: -20%;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(224, 2, 67, 0.22) 0%, transparent 70%);
pointer-events: none;
}
.hive-auth-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.75rem;
font-weight: 700;
color: #fda4af;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(8px);
margin-bottom: 1.5rem;
}
.hive-auth-title {
font-size: 1.85rem;
font-weight: 800;
line-height: 1.25;
color: #ffffff;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.hive-auth-desc {
font-size: 0.9375rem;
line-height: 1.6;
color: #94a3b8;
margin-bottom: 2rem;
}
/* Feature checklist */
.hive-auth-features {
list-style: none;
padding: 0;
margin: 0 0 2.5rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.hive-auth-features li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: #e2e8f0;
font-weight: 500;
}
.hive-auth-features li i {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(224, 2, 67, 0.18);
color: #ff4b72;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
flex-shrink: 0;
}
/* Mini Trust Card */
.hive-auth-trust-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border-radius: 1.25rem;
padding: 1.25rem;
position: relative;
}
.hive-trust-stats-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.75rem;
text-align: center;
}
.hive-trust-num {
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
display: block;
}
.hive-trust-label {
font-size: 0.6875rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Right Main Auth Panel */
.hive-auth-main {
padding: 3.5rem 3.25rem;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Interactive Role Toggle Switch */
.hive-role-toggle-wrap {
background: #f1f5f9;
padding: 0.35rem;
border-radius: 1rem;
display: flex;
margin-bottom: 2rem;
position: relative;
border: 1px solid #e2e8f0;
}
.hive-role-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
color: #64748b;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none;
}
.hive-role-btn.active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.hive-role-btn.active i {
color: #E00243;
}
.hive-auth-heading {
font-size: 1.65rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.35rem;
letter-spacing: -0.02em;
}
.hive-auth-subheading {
font-size: 0.875rem;
color: #64748b;
margin-bottom: 1.75rem;
}
/* Social Buttons */
.hive-social-auth-group {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin-bottom: 1.75rem;
}
@media (min-width: 992px) {
.hive-social-auth-group {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.75rem !important;
}
.hive-social-btn {
padding: 0.75rem 0.5rem !important;
white-space: nowrap !important;
}
}
.hive-social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
border-radius: 0.875rem;
border: 1.5px solid #e2e8f0;
background: #ffffff;
font-size: 0.875rem;
font-weight: 700;
color: #1e293b;
text-decoration: none;
transition: all 0.2s ease;
}
.hive-social-btn:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #0f172a;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* Separator */
.hive-auth-divider {
display: flex;
align-items: center;
text-align: center;
margin: 1.5rem 0;
color: #94a3b8;
font-size: 0.785rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hive-auth-divider::before,
.hive-auth-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e2e8f0;
}
.hive-auth-divider span {
padding: 0 1rem;
}
/* Form Groups */
.hive-field-wrap {
margin-bottom: 1.25rem;
}
.hive-field-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
font-weight: 700;
color: #334155;
margin-bottom: 0.4rem;
}
.hive-input-container {
position: relative;
display: flex;
align-items: center;
}
.hive-input-icon {
position: absolute;
left: 1.15rem;
color: #94a3b8;
font-size: 0.9375rem;
pointer-events: none;
transition: color 0.2s ease;
}
.hive-input-control {
width: 100%;
padding: 0.85rem 1.15rem 0.85rem 2.85rem;
border-radius: 0.875rem;
border: 1.5px solid #e2e8f0;
background: #f8fafc;
font-size: 0.9375rem;
color: #0f172a;
font-weight: 500;
transition: all 0.2s ease;
outline: none;
}
.hive-input-control:focus {
background: #ffffff;
border-color: #E00243;
box-shadow: 0 0 0 4px rgba(224, 2, 67, 0.1);
}
.hive-input-control:focus + .hive-input-icon {
color: #E00243;
}
.hive-password-toggle {
position: absolute;
right: 1.15rem;
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
font-size: 0.9375rem;
padding: 0.25rem;
transition: color 0.2s ease;
}
.hive-password-toggle:hover {
color: #0f172a;
}
/* Remember me & Forgot Password */
.hive-auth-options {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.75rem;
font-size: 0.84rem;
}
.hive-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: #475569;
font-weight: 600;
cursor: pointer;
}
.hive-forgot-link {
color: #E00243;
text-decoration: none;
font-weight: 700;
transition: color 0.2s ease;
}
.hive-forgot-link:hover {
color: #b00235;
text-decoration: underline;
}
/* Submit CTA */
.hive-auth-submit-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 1.5rem;
border-radius: 0.875rem;
font-size: 0.975rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #E00243 0%, #ff255b 100%);
box-shadow: 0 10px 25px -4px rgba(224, 2, 67, 0.45);
border: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
}
.hive-auth-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -4px rgba(224, 2, 67, 0.6);
color: #ffffff;
}
/* Switch Prompt Footer */
.hive-auth-footer-prompt {
text-align: center;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid #f1f5f9;
font-size: 0.875rem;
color: #64748b;
}
.hive-auth-footer-prompt a {
color: #E00243;
font-weight: 700;
text-decoration: none;
}
.hive-auth-footer-prompt a:hover {
text-decoration: underline;
}
/* Flash Alerts */
.hive-auth-alert {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.85rem 1.15rem;
border-radius: 0.875rem;
margin-bottom: 1.25rem;
font-size: 0.84rem;
font-weight: 600;
}
.hive-auth-alert.error {
background: #fff1f2;
border: 1px solid #fecdd3;
color: #e11d48;
}
.hive-auth-alert.success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #16a34a;
}
@media (max-width: 991px) {
.hive-auth-sidebar {
display: none;
}
.hive-auth-main {
padding: 2.5rem 1.75rem;
}
.hive-auth-card {
border-radius: 1.25rem;
}
}
/* ==========================================================================
PLATFORM PAGES DESIGN SYSTEM (Instagram, YouTube, LinkedIn, Facebook, Telegram)
Seamless Relative Header Integration & World-Class Visuals
========================================================================== */
/* Main Platform Hero Container */
.hive-platform-hero {
position: relative;
margin-top: -82px;
padding-top: 130px;
padding-bottom: 75px;
background: #090d16;
color: #ffffff;
overflow: hidden;
}
@media (max-width: 991px) {
.hive-platform-hero {
margin-top: -76px;
padding-top: 105px;
padding-bottom: 60px;
}
}
/* Ambient Platform Backdrop Glows */
.hive-hero-orb-1 {
position: absolute;
top: -60px;
left: 10%;
width: 650px;
height: 650px;
border-radius: 50%;
pointer-events: none;
filter: blur(100px);
z-index: 1;
}
.hive-hero-orb-2 {
position: absolute;
bottom: -80px;
right: 5%;
width: 550px;
height: 550px;
border-radius: 50%;
pointer-events: none;
filter: blur(110px);
z-index: 1;
}
.hive-hero-grid-mesh {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0.6;
pointer-events: none;
z-index: 1;
}
/* Platform-Specific Theming */
/* 1. Instagram */
.hive-hero-instagram .hive-hero-orb-1 {
background: radial-gradient(circle, rgba(225, 48, 108, 0.28) 0%, transparent 70%);
}
.hive-hero-instagram .hive-hero-orb-2 {
background: radial-gradient(circle, rgba(131, 58, 180, 0.24) 0%, transparent 70%);
}
.hive-gradient-instagram {
background: linear-gradient(135deg, #fd1d1d 0%, #E00243 45%, #ff8a00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-badge-instagram {
background: rgba(225, 48, 108, 0.12);
border: 1px solid rgba(225, 48, 108, 0.35);
color: #ff6b95;
}
/* 2. YouTube */
.hive-hero-youtube .hive-hero-orb-1 {
background: radial-gradient(circle, rgba(255, 0, 0, 0.28) 0%, transparent 70%);
}
.hive-hero-youtube .hive-hero-orb-2 {
background: radial-gradient(circle, rgba(224, 2, 67, 0.22) 0%, transparent 70%);
}
.hive-gradient-youtube {
background: linear-gradient(135deg, #ff4757 0%, #E00243 50%, #ffa502 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-badge-youtube {
background: rgba(255, 0, 0, 0.12);
border: 1px solid rgba(255, 0, 0, 0.35);
color: #ff6b6b;
}
/* 3. LinkedIn */
.hive-hero-linkedin .hive-hero-orb-1 {
background: radial-gradient(circle, rgba(10, 102, 194, 0.30) 0%, transparent 70%);
}
.hive-hero-linkedin .hive-hero-orb-2 {
background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%);
}
.hive-gradient-linkedin {
background: linear-gradient(135deg, #38bdf8 0%, #0A66C2 55%, #818cf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-badge-linkedin {
background: rgba(10, 102, 194, 0.14);
border: 1px solid rgba(56, 189, 248, 0.35);
color: #38bdf8;
}
/* 4. Facebook */
.hive-hero-facebook .hive-hero-orb-1 {
background: radial-gradient(circle, rgba(24, 119, 242, 0.30) 0%, transparent 70%);
}
.hive-hero-facebook .hive-hero-orb-2 {
background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
}
.hive-gradient-facebook {
background: linear-gradient(135deg, #60a5fa 0%, #1877F2 55%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-badge-facebook {
background: rgba(24, 119, 242, 0.14);
border: 1px solid rgba(96, 165, 250, 0.35);
color: #60a5fa;
}
/* 5. Telegram */
.hive-hero-telegram .hive-hero-orb-1 {
background: radial-gradient(circle, rgba(34, 158, 217, 0.32) 0%, transparent 70%);
}
.hive-hero-telegram .hive-hero-orb-2 {
background: radial-gradient(circle, rgba(6, 182, 212, 0.24) 0%, transparent 70%);
}
.hive-gradient-telegram {
background: linear-gradient(135deg, #22d3ee 0%, #229ED9 50%, #38bdf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-badge-telegram {
background: rgba(34, 158, 217, 0.14);
border: 1px solid rgba(34, 211, 238, 0.35);
color: #22d3ee;
}
/* Hero Content Styling */
.hive-platform-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 1rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.03em;
backdrop-filter: blur(8px);
margin-bottom: 1.5rem;
}
.hive-platform-hero-title {
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: -0.025em;
color: #ffffff;
margin-bottom: 1.25rem;
}
@media (min-width: 992px) {
.hive-platform-hero-title {
font-size: 30px !important;
}
}
.hive-platform-hero-desc {
font-size: 1.05rem;
line-height: 1.65;
color: #94a3b8;
max-width: 720px;
margin: 0 auto 2.25rem;
}
/* Hero CTA Row */
.hive-hero-cta-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
}
.hive-btn-primary-glow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.75rem;
border-radius: 0.875rem;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff !important;
background: linear-gradient(135deg, #E00243 0%, #ff2a5d 100%);
box-shadow: 0 10px 25px -4px rgba(224, 2, 67, 0.45);
border: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none !important;
}
.hive-btn-primary-glow:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -4px rgba(224, 2, 67, 0.6);
}
.hive-btn-secondary-glass {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.75rem;
border-radius: 0.875rem;
font-size: 0.95rem;
font-weight: 700;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none !important;
}
.hive-btn-secondary-glass:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* High-Authority Metric Strip */
.hive-platform-stats-strip {
background: rgba(15, 23, 42, 0.65);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
border-radius: 1.5rem;
padding: 1.5rem 2rem;
max-width: 1050px;
margin: 0 auto;
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}
.hive-platform-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
text-align: center;
}
@media (min-width: 768px) {
.hive-platform-stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
.hive-stat-cell-num {
font-size: 1.85rem;
font-weight: 800;
color: #ffffff;
display: block;
line-height: 1.2;
margin-bottom: 0.25rem;
}
.hive-stat-cell-label {
font-size: 0.75rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Deliverable Formats Section */
.hive-platform-section {
padding: 5rem 1rem;
background: #ffffff;
position: relative;
}
.hive-section-header {
text-align: center;
max-width: 680px;
margin: 0 auto 3.5rem;
}
.hive-section-kicker {
font-size: 0.8125rem;
font-weight: 700;
color: #E00243;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.65rem;
display: block;
}
.hive-section-title {
font-size: 2.15rem;
font-weight: 800;
color: #0f172a;
line-height: 1.25;
letter-spacing: -0.02em;
margin-bottom: 0.85rem;
}
.hive-section-desc {
font-size: 1rem;
color: #64748b;
line-height: 1.6;
}
/* Format Cards */
.hive-format-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 1.25rem;
padding: 2rem 1.75rem;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
height: 100%;
display: flex;
flex-direction: column;
}
.hive-format-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.08);
border-color: #cbd5e1;
}
.hive-format-icon-wrap {
width: 52px;
height: 52px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
margin-bottom: 1.35rem;
}
.hive-format-title {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.6rem;
}
.hive-format-desc {
font-size: 0.9rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 1.25rem;
flex-grow: 1;
}
.hive-format-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.hive-format-tag {
font-size: 0.72rem;
font-weight: 600;
padding: 0.25rem 0.65rem;
border-radius: 9999px;
background: #f1f5f9;
color: #475569;
}
/* Live Analytics Desk Preview */
.hive-platform-desk-section {
background: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 5rem 1rem;
}
.hive-analytics-desk {
background: #0f172a;
border-radius: 1.5rem;
padding: 2.5rem;
color: #ffffff;
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hive-desk-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 2rem;
}
.hive-desk-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.85rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 700;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #4ade80;
}
.hive-desk-stats-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.hive-desk-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.hive-desk-stat-box {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 1rem;
padding: 1.25rem;
}
.hive-desk-stat-label {
font-size: 0.785rem;
color: #94a3b8;
font-weight: 600;
margin-bottom: 0.35rem;
}
.hive-desk-stat-val {
font-size: 1.65rem;
font-weight: 800;
color: #ffffff;
}
/* Creator Profile Cards on Platform */
.hive-platform-creators-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
}
@media (min-width: 768px) {
.hive-platform-creators-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.hive-platform-creators-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.hive-platform-creator-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 1.25rem;
overflow: hidden;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
}
.hive-platform-creator-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px -8px rgba(15, 23, 42, 0.09);
border-color: #cbd5e1;
}
.hive-pcreator-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
border-bottom: 1px solid #f1f5f9;
}
.hive-pcreator-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hive-pcreator-info h4 {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.2rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.hive-pcreator-info p {
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0;
}
.hive-pcreator-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 1rem 1.25rem;
background: #f8fafc;
gap: 0.5rem;
text-align: center;
}
.hive-pcreator-mval {
font-size: 1.05rem;
font-weight: 800;
color: #0f172a;
display: block;
}
.hive-pcreator-mlabel {
font-size: 0.7rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
}
.hive-pcreator-footer {
padding: 1rem 1.25rem;
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hive-pcreator-rate {
font-size: 0.875rem;
font-weight: 800;
color: #E00243;
}
.hive-pcreator-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8125rem;
font-weight: 700;
padding: 0.45rem 1rem;
border-radius: 0.65rem;
background: #0f172a;
color: #ffffff !important;
text-decoration: none !important;
transition: all 0.2s ease;
}
.hive-pcreator-btn:hover {
background: #E00243;
}
/* High-Converting Platform CTA */
.hive-platform-cta-wrap {
background: linear-gradient(145deg, #090d16 0%, #111827 50%, #1e1b4b 100%);
border-radius: 2rem;
padding: 4rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
color: #ffffff;
box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hive-platform-cta-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #E00243 0%, #8b5cf6 50%, #38bdf8 100%);
}
.hive-platform-cta-title {
font-size: 2.35rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.hive-platform-cta-desc {
font-size: 1.05rem;
color: #94a3b8;
max-width: 640px;
margin: 0 auto 2.25rem;
line-height: 1.6;
}
/* Platform FAQ Accordion Styling */
.hive-platform-faq-item {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 1rem !important;
margin-bottom: 1rem;
overflow: hidden;
transition: all 0.2s ease;
}
.hive-platform-faq-item:hover {
border-color: #cbd5e1;
}
.hive-platform-faq-button {
background: #ffffff !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #0f172a !important;
padding: 1.25rem 1.5rem !important;
box-shadow: none !important;
}
.hive-platform-faq-body {
padding: 0 1.5rem 1.35rem 1.5rem !important;
color: #475569 !important;
font-size: 0.9375rem !important;
line-height: 1.65 !important;
visibility: visible !important;
}
/* Ensure all FAQ accordions and collapse contents are visible when opened */
.accordion-collapse,
.accordion-collapse *,
.accordion-body,
.collapse.show,
.collapsing {
visibility: visible !important;
}
.accordion-collapse:not(.show) {
display: none;
}
.accordion-collapse.show {
display: block;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-collapse {
display: flex !important;
visibility: visible !important;
}
}
/* ==========================================================================
HOME PAGE EXPANSIONS (Sections 2, 4, 5, 8)
========================================================================== */
/* 1. Niche & Industry Categories Grid (Section 2) */
.hive-niche-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 1.25rem;
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
height: 100%;
text-decoration: none !important;
color: inherit !important;
}
.hive-niche-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #E00243 0%, #ff4b72 100%);
opacity: 0;
transition: opacity 0.25s ease;
}
.hive-niche-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px -8px rgba(15, 23, 42, 0.08);
border-color: #f43f5e;
}
.hive-niche-card:hover::after {
opacity: 1;
}
.hive-niche-icon-wrap {
width: 48px;
height: 48px;
border-radius: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
margin-bottom: 1.25rem;
transition: transform 0.25s ease;
}
.hive-niche-card:hover .hive-niche-icon-wrap {
transform: scale(1.08);
}
.hive-niche-title {
font-size: 1.1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.4rem;
}
.hive-niche-desc {
font-size: 0.85rem;
color: #64748b;
line-height: 1.55;
margin-bottom: 1rem;
}
.hive-niche-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
font-size: 0.78rem;
font-weight: 700;
}
.hive-niche-count {
color: #E00243;
}
.hive-niche-arrow {
color: #94a3b8;
transition: all 0.2s ease;
}
.hive-niche-card:hover .hive-niche-arrow {
color: #E00243;
transform: translateX(3px);
}
/* 2. Creator Tier Breakdown Cards (Section 4) */
.hive-tier-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 1.5rem;
padding: 2.25rem 1.85rem;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
position: relative;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hive-tier-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.1);
border-color: #cbd5e1;
}
.hive-tier-card.featured {
border-color: #E00243;
box-shadow: 0 15px 35px -10px rgba(224, 2, 67, 0.15);
background: linear-gradient(180deg, #ffffff 0%, #fffbfb 100%);
}
.hive-tier-popular-badge {
position: absolute;
top: -12px;
right: 24px;
background: linear-gradient(135deg, #E00243 0%, #ff2a5d 100%);
color: #ffffff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.3rem 0.85rem;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.3);
}
.hive-tier-header {
margin-bottom: 1.5rem;
}
.hive-tier-name {
font-size: 1.45rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.25rem;
}
.hive-tier-reach {
font-size: 0.875rem;
font-weight: 700;
color: #E00243;
display: block;
margin-bottom: 0.75rem;
}
.hive-tier-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 700;
padding: 0.35rem 0.75rem;
border-radius: 9999px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #334155;
}
.hive-tier-pricing-box {
background: #f8fafc;
border-radius: 1rem;
padding: 1rem 1.25rem;
margin: 1.25rem 0;
border: 1px solid #edf2f7;
}
.hive-tier-price-val {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
}
.hive-tier-price-sub {
font-size: 0.72rem;
color: #64748b;
font-weight: 600;
}
.hive-tier-checklist {
list-style: none;
padding: 0;
margin: 0 0 1.75rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
flex-grow: 1;
}
.hive-tier-checklist li {
font-size: 0.85rem;
color: #475569;
display: flex;
align-items: flex-start;
gap: 0.6rem;
line-height: 1.5;
}
.hive-tier-checklist li i {
color: #10b981;
font-size: 0.85rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
/* 3. Pan-India Vernacular & City-Wise Reach Hubs (Section 5) */
.hive-reach-section {
background: #090d16;
color: #ffffff;
padding: 5rem 1rem;
position: relative;
overflow: hidden;
}
.hive-reach-hub-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.25rem;
padding: 1.5rem;
transition: all 0.25s ease;
backdrop-filter: blur(12px);
text-decoration: none !important;
display: block;
color: inherit !important;
}
.hive-reach-hub-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(224, 2, 67, 0.4);
transform: translateY(-3px);
}
.hive-reach-hub-city {
font-size: 1.15rem;
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.35rem;
}
.hive-reach-hub-city span.badge {
font-size: 0.68rem;
font-weight: 700;
background: rgba(224, 2, 67, 0.2);
color: #ff4b72;
border: 1px solid rgba(224, 2, 67, 0.35);
padding: 0.2rem 0.5rem;
border-radius: 9999px;
}
.hive-reach-hub-niches {
font-size: 0.8rem;
color: #94a3b8;
margin-bottom: 0.85rem;
line-height: 1.45;
}
.hive-reach-hub-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
font-weight: 700;
color: #cbd5e1;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hive-vernacular-strip {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.25rem;
padding: 1.5rem 2rem;
margin-top: 3rem;
}
.hive-vernacular-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 1rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.8125rem;
font-weight: 600;
color: #e2e8f0;
transition: all 0.2s ease;
}
.hive-vernacular-pill:hover {
background: rgba(224, 2, 67, 0.2);
border-color: #E00243;
color: #ffffff;
}
/* 4. Creator Economy Insights & Playbooks (Section 8) */
.hive-playbook-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 1.25rem;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none !important;
color: inherit !important;
}
.hive-playbook-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 35px -10px rgba(15, 23, 42, 0.09);
border-color: #cbd5e1;
}
.hive-playbook-cover {
height: 190px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 1.25rem;
}
.hive-playbook-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hive-playbook-card:hover .hive-playbook-cover-img {
transform: scale(1.05);
}
.hive-playbook-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.hive-playbook-tag {
position: relative;
z-index: 2;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.3rem 0.75rem;
border-radius: 9999px;
background: #E00243;
color: #ffffff;
}
.hive-playbook-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.hive-playbook-meta {
font-size: 0.75rem;
color: #94a3b8;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.hive-playbook-title {
font-size: 1.15rem;
font-weight: 800;
color: #0f172a;
line-height: 1.4;
margin-bottom: 0.65rem;
transition: color 0.2s ease;
}
.hive-playbook-card:hover .hive-playbook-title {
color: #E00243;
}
.hive-playbook-excerpt {
font-size: 0.875rem;
color: #64748b;
line-height: 1.6;
margin-bottom: 1.25rem;
}
.hive-playbook-cta {
font-size: 0.825rem;
font-weight: 700;
color: #E00243;
display: flex;
align-items: center;
gap: 0.4rem;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
}
/* ==========================================================================
STATE / REGIONAL INFLUENCER PAGE DESIGN SYSTEM
Professional, Simple, Modern, and Attractive
========================================================================== */
/* State Hero Container (Relative Header Seamless Integration) */
.hive-state-hero {
position: relative;
margin-top: -82px;
padding-top: 135px;
padding-bottom: 70px;
background: #090d16;
color: #ffffff;
overflow: hidden;
}
@media (max-width: 991px) {
.hive-state-hero {
margin-top: -76px;
padding-top: 110px;
padding-bottom: 55px;
}
}
.hive-state-orb-1 {
position: absolute;
top: -60px;
left: 8%;
width: 620px;
height: 620px;
border-radius: 50%;
pointer-events: none;
filter: blur(110px);
background: radial-gradient(circle, rgba(224, 2, 67, 0.28) 0%, transparent 70%);
z-index: 1;
}
.hive-state-orb-2 {
position: absolute;
bottom: -80px;
right: 6%;
width: 580px;
height: 580px;
border-radius: 50%;
pointer-events: none;
filter: blur(120px);
background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
z-index: 1;
}
.hive-state-breadcrumb {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
color: #94a3b8;
margin-bottom: 1rem;
}
.hive-state-breadcrumb a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.2s ease;
}
.hive-state-breadcrumb a:hover {
color: #E00243;
}
.hive-state-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 1rem;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.03em;
background: rgba(224, 2, 67, 0.12);
border: 1px solid rgba(224, 2, 67, 0.35);
color: #ff6b95;
margin-bottom: 1.25rem;
}
.hive-state-hero-title {
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: -0.025em;
color: #ffffff;
margin-bottom: 1.25rem;
}
.hive-gradient-karnataka {
background: linear-gradient(135deg, #ffb703 0%, #fb8500 38%, #E00243 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hive-state-hero-desc {
max-width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 1.05rem;
line-height: 1.7;
color: #94a3b8;
margin-bottom: 2rem;
}
/* Glass Metrics Bar in State Hero */
.hive-state-stats-strip {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 1.25rem;
padding: 1.25rem 2rem;
max-width: 940px;
margin: 2rem auto 0;
}
.hive-state-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
text-align: center;
}
@media (max-width: 767px) {
.hive-state-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
}
.hive-state-stat-num {
display: block;
font-size: 1.6rem;
font-weight: 800;
color: #ffffff;
line-height: 1.1;
letter-spacing: -0.02em;
}
.hive-state-stat-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
margin-top: 0.35rem;
}
/* State Filter Card (Simple & Professional Top Bar) */
.hive-state-filter-card {
background: #ffffff;
border-radius: 1.25rem;
border: 1px solid rgba(226, 232, 240, 0.9);
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
padding: 1.5rem;
margin-bottom: 2.5rem;
}
.hive-filter-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 1rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
color: #475569;
background: #f8fafc;
border: 1px solid #e2e8f0;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
}
.hive-filter-pill:hover {
color: #E00243;
border-color: rgba(224, 2, 67, 0.35);
background: #fff5f7;
transform: translateY(-1px);
}
.hive-filter-pill.active {
background: #E00243;
color: #ffffff !important;
border-color: #E00243;
box-shadow: 0 4px 12px rgba(224, 2, 67, 0.28);
}
.hive-filter-search-input {
width: 100%;
padding: 0.65rem 1rem 0.65rem 2.5rem;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 0.875rem;
color: #0f172a;
transition: all 0.2s ease;
}
.hive-filter-search-input:focus {
outline: none;
background: #ffffff;
border-color: #E00243;
box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.12);
}
/* Other States Strip */
.hive-state-hub-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.15rem;
border-radius: 0.75rem;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #334155;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.hive-state-hub-chip:hover {
border-color: #E00243;
color: #E00243;
transform: translateY(-2px);
box-shadow: 0 6px 16px -2px rgba(224, 2, 67, 0.12);
}
.hive-state-hub-chip.current {
background: #fff1f4;
border-color: rgba(224, 2, 67, 0.4);
color: #E00243;
font-weight: 700;
}
/* ==========================================================================
STRICT UNIVERSAL SECTION SPACING RULE: Max 35px Padding Top and Bottom
Applied across all pages for balanced, professional, and compact flow
========================================================================== */
section,
.hive-section,
.hive-platform-section,
.hive-platform-desk-section,
.hive-reach-section {
padding-top: 35px !important;
padding-bottom: 35px !important;
}
/* Allow hero section appropriate top clearance for floating pill nav */
.hive-hero-dark,
.hive-platform-hero,
.hive-state-hero {
padding-top: 100px !important;
padding-bottom: 35px !important;
}
@media (max-width: 991px) {
.hive-hero-dark,
.hive-platform-hero,
.hive-state-hero {
padding-top: 85px !important;
padding-bottom: 30px !important;
}
}
/* ==========================================================================
LIVE RUNNING CAMPAIGNS & AI ADS BANNER STYLES
========================================================================== */
.hive-campaign-card {
border-radius: 1.25rem;
background: #ffffff;
border: 1px solid #e2e8f0;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.hive-campaign-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
border-color: rgba(224, 2, 67, 0.3);
}
.hive-campaign-img-box {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0f172a;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
}
.hive-campaign-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hive-campaign-card:hover .hive-campaign-img-box img {
transform: scale(1.05);
}
.hive-live-pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #10b981;
display: inline-block;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
animation: hivePulse 2s infinite;
}
@keyframes hivePulse {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
.hive-campaign-filter-btn {
padding: 0.5rem 1.2rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
color: #475569;
background: #ffffff;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
cursor: pointer;
white-space: nowrap;
}
.hive-campaign-filter-btn:hover {
color: #E00243;
border-color: rgba(224, 2, 67, 0.3);
background: #fff5f7;
}
.hive-campaign-filter-btn.active {
color: #ffffff;
background: #E00243;
border-color: #E00243;
box-shadow: 0 4px 14px rgba(224, 2, 67, 0.25);
}
.hive-campaign-badge-tag {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(8px);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.hive-campaign-category-tag {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
padding: 4px 10px;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
background: rgba(224, 2, 67, 0.9);
backdrop-filter: blur(8px);
color: #ffffff;
}
.hive-campaign-progress-bar {
width: 100%;
height: 6px;
background-color: #f1f5f9;
border-radius: 9999px;
overflow: hidden;
}
.hive-campaign-progress-fill {
height: 100%;
border-radius: 9999px;
background: linear-gradient(90deg, #E00243 0%, #f43f5e 100%);
}