/* =Variables
-------------------------------------------------------------- */
:root {
--primary-color: #6C63FF;
--secondary-color: #FF6584;
--accent-color: #00D4FF;
--dark-color: #2D3748;
--light-bg: #F7FAFC;
--white: #FFFFFF;
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #00D4FF 0%, #6C63FF 100%);
--font-arabic: 'Tajawal', sans-serif;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
/* Service Page Colors */
--twitter-primary: #1da1f2;
--twitter-secondary: #0d8bd9;
--tiktok-primary: #fe2c55;
--tiktok-secondary: #25f4ee;
--snapchat-primary: #fffc00;
--instagram-primary: #833ab4;
--instagram-secondary: #fd1d1d;
--instagram-tertiary: #fcb045;
--facebook-primary: #1877f2;
--facebook-secondary: #42a5f5;
--youtube-primary: #ff0000;
--youtube-secondary: #cc0000;
}
/* =Global Styles
-------------------------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
width: 100%;
}
body {
font-family: var(--font-arabic);
background-color: var(--light-bg);
color: var(--dark-color);
line-height: 1.6;
position: relative;
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px;
}
/* =Typography
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: 1rem;
}
/* =Buttons
-------------------------------------------------------------- */
.btn {
display: inline-block;
padding: 12px 30px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
outline: none;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-service {
background: var(--gradient-secondary);
color: var(--white);
font-size: 14px;
padding: 10px 25px;
}
.btn-submit {
background: #4A90E2;
color: var(--white);
width: 100%;
padding: 15px;
font-size: 16px;
}
/* =Header & Navigation
-------------------------------------------------------------- */
.site-header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar {
padding: 0.5rem 0;
}
.navbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.navbar-brand .site-title {
text-decoration: none;
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}
.brand-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-menu {
flex: 1;
display: flex;
justify-content: center;
}
.navbar-nav {
display: flex;
list-style: none;
gap: 0.5rem;
margin: 0;
padding: 0;
}
.navbar-nav li {
margin: 0;
}
.navbar-nav a {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
transition: all 0.3s ease;
padding: 10px 22px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
display: inline-block;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.navbar-nav a:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
border-color: rgba(255, 255, 255, 0.5);
}
.navbar-social {
display: flex;
gap: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
background: var(--light-bg);
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
}
.navbar-toggler {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.navbar-toggler-icon {
display: block;
width: 25px;
height: 3px;
background: var(--dark-color);
position: relative;
transition: all 0.3s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--dark-color);
left: 0;
transition: all 0.3s ease;
}
.navbar-toggler-icon::before {
top: -8px;
}
.navbar-toggler-icon::after {
top: 8px;
}
/* =Hero Section - General
-------------------------------------------------------------- */
.hero-section {
position: relative;
padding: 80px 0 40px;
background: var(--light-bg);
overflow: hidden;
min-height: 600px;
}
.floating-icons {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
}
.social-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--white);
animation: float 6s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.social-icon.facebook {
background: #3b5998;
top: 10%;
left: 5%;
animation-delay: 0s;
}
.social-icon.twitter {
background: #1da1f2;
top: 20%;
right: 10%;
animation-delay: 1s;
}
.social-icon.instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
bottom: 30%;
left: 10%;
animation-delay: 2s;
}
.social-icon.snapchat {
background: #fffc00;
color: #000;
top: 50%;
right: 5%;
animation-delay: 3s;
}
.social-icon.youtube {
background: #ff0000;
bottom: 20%;
right: 15%;
animation-delay: 4s;
}
.social-icon.whatsapp {
background: #25d366;
top: 40%;
left: 8%;
animation-delay: 5s;
}
.social-icon.linkedin {
background: #0077b5;
bottom: 10%;
left: 20%;
animation-delay: 0.5s;
}
.social-icon.pinterest {
background: #bd081c;
top: 15%;
left: 25%;
animation-delay: 1.5s;
}
.social-icon.tiktok {
background: #000;
bottom: 40%;
right: 8%;
animation-delay: 2.5s;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
position: relative;
z-index: 2;
}
.hero-text {
text-align: right;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1.5rem;
color: var(--dark-color);
line-height: 1.2;
}
.hero-description {
font-size: 1.25rem;
color: #718096;
margin-bottom: 2rem;
line-height: 1.8;
}
.hero-image {
position: relative;
animation: hero-float 8s ease-in-out infinite;
}
.hero-image img {
width: 100%;
height: auto;
max-width: 500px;
margin: 0 auto;
display: block;
}
@keyframes hero-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-10px) rotate(1deg); }
50% { transform: translateY(0) rotate(0deg); }
75% { transform: translateY(-5px) rotate(-1deg); }
}
/* =Service Pages Hero Sections
-------------------------------------------------------------- */
/* Twitter Hero */
.twitter-services-page {
padding-top: 0;
position: relative;
overflow-x: hidden;
}
.twitter-hero {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 15%, #1da1f2 30%, #0074cc 45%, #1da1f2 60%, #42a5f5 75%, #1da1f2 100%);
background-size: 400% 400%;
padding: 110px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
animation: twitter-sky-flow 12s ease-in-out infinite;
}
@keyframes twitter-sky-flow {
0%, 100% { background-position: 0% 50%; }
25% { background-position: 100% 0%; }
50% { background-position: 50% 100%; }
75% { background-position: 0% 50%; }
}
.twitter-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
animation: twitter-clouds 25s linear infinite;
pointer-events: none;
}
@keyframes twitter-clouds {
0% { transform: translateX(-150px) translateY(-30px); }
100% { transform: translateX(150px) translateY(30px); }
}
/* TikTok Hero */
.tiktok-services-page {
padding-top: 0;
position: relative;
overflow-x: hidden;
}
.tiktok-hero {
background: linear-gradient(135deg, #000000 0%, #fe2c55 15%, #25f4ee 30%, #000000 45%, #fe2c55 60%, #25f4ee 75%, #000000 100%);
padding: 120px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
animation: tiktok-bg-shift 8s ease-in-out infinite;
}
@keyframes tiktok-bg-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.tiktok-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
animation: tiktok-elements 20s linear infinite;
pointer-events: none;
}
@keyframes tiktok-elements {
0% { transform: translateX(-100px) translateY(-50px) rotate(0deg); }
100% { transform: translateX(100px) translateY(50px) rotate(360deg); }
}
/* Snapchat Hero */
.snapchat-services-page {
padding-top: 0;
}
.snapchat-hero {
background: linear-gradient(135deg, #fffc00 0%, #ffed4e 50%, #f5f543 100%);
padding: 80px 0;
text-align: center;
color: #000;
position: relative;
overflow: hidden;
}
.snapchat-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
animation: snapchat-pattern 15s linear infinite;
pointer-events: none;
}
@keyframes snapchat-pattern {
0% { transform: translateX(-50px) translateY(-25px); }
100% { transform: translateX(50px) translateY(25px); }
}
/* Instagram Hero */
.instagram-services-page {
padding-top: 0;
}
.instagram-hero {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 25%, #fcb045 50%, #e1306c 75%, #405de6 100%);
padding: 100px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.instagram-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
animation: instagram-particles 25s linear infinite;
pointer-events: none;
}
@keyframes instagram-particles {
0% { transform: translateX(-100px) translateY(-50px) rotate(0deg); }
100% { transform: translateX(100px) translateY(50px) rotate(360deg); }
}
/* Facebook Hero */
.facebook-services-page {
padding-top: 0;
}
.facebook-hero {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 25%, #166fe5 50%, #0d47a1 75%, #1565c0 100%);
padding: 100px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.facebook-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 70% 20%, rgba(255,255,255,0.08) 3px, transparent 3px),
radial-gradient(circle at 30% 70%, rgba(255,255,255,0.12) 1px, transparent 1px),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.06) 2px, transparent 2px);
background-size: 80px 80px, 120px 120px, 60px 60px, 100px 100px;
animation: facebook-network 30s linear infinite;
pointer-events: none;
}
@keyframes facebook-network {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-50px, -30px) rotate(360deg); }
}
/* YouTube Hero */
.youtube-services-page {
padding-top: 0;
}
.youtube-hero {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 50%, #990000 100%);
padding: 80px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.youtube-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url('data:image/svg+xml,');
animation: youtube-particles 20s linear infinite;
pointer-events: none;
}
@keyframes youtube-particles {
0% { transform: translateX(-100px) translateY(-100px); }
100% { transform: translateX(100px) translateY(100px); }
}
/* Hero Icons - Common Animations */
.hero-icon {
font-size: 7rem;
margin-bottom: 2.5rem;
position: relative;
display: inline-block;
}
.twitter-hero .hero-icon {
font-size: 8.5rem;
margin-bottom: 3.5rem;
animation: twitter-flight 10s ease-in-out infinite;
text-shadow: 0 0 150px rgba(255, 255, 255, 0.9), 0 0 80px rgba(29, 161, 242, 0.7);
filter: drop-shadow(0 0 100px rgba(255, 255, 255, 0.8));
}
.tiktok-hero .hero-icon {
font-size: 9rem;
margin-bottom: 3rem;
animation: tiktok-viral 6s ease-in-out infinite;
text-shadow: 0 0 120px rgba(254, 44, 85, 0.8), 0 0 60px rgba(37, 244, 238, 0.6);
filter: drop-shadow(0 0 80px rgba(254, 44, 85, 0.7));
}
.snapchat-hero .hero-icon {
font-size: 6rem;
margin-bottom: 2rem;
animation: snapchat-ghost 6s ease-in-out infinite;
text-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
color: #000;
}
.instagram-hero .hero-icon {
font-size: 7rem;
margin-bottom: 2.5rem;
animation: instagram-camera 8s ease-in-out infinite;
text-shadow: 0 0 80px rgba(255, 255, 255, 0.6);
filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
}
.facebook-hero .hero-icon {
font-size: 8rem;
margin-bottom: 3rem;
animation: facebook-pulse 10s ease-in-out infinite;
text-shadow: 0 0 100px rgba(255, 255, 255, 0.8);
filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.6));
}
.youtube-hero .hero-icon {
font-size: 5rem;
margin-bottom: 2rem;
animation: youtube-glow 3s ease-in-out infinite;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
/* Hero Icon Animations */
@keyframes twitter-flight {
0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
20% { transform: translateY(-50px) scale(1.15) rotate(8deg); }
40% { transform: translateY(-20px) scale(1.08) rotate(-5deg); }
60% { transform: translateY(-35px) scale(1.12) rotate(3deg); }
80% { transform: translateY(-10px) scale(1.05) rotate(-2deg); }
}
@keyframes tiktok-viral {
0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
25% { transform: translateY(-40px) scale(1.15) rotate(5deg); }
50% { transform: translateY(0) scale(1.1) rotate(0deg); }
75% { transform: translateY(-25px) scale(1.08) rotate(-3deg); }
}
@keyframes snapchat-ghost {
0%, 100% { transform: translateY(0) scale(1); }
25% { transform: translateY(-20px) scale(1.05); }
50% { transform: translateY(0) scale(1); }
75% { transform: translateY(-10px) scale(1.02); }
}
@keyframes instagram-camera {
0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
25% { transform: translateY(-25px) scale(1.08) rotate(3deg); }
50% { transform: translateY(0) scale(1.05) rotate(0deg); }
75% { transform: translateY(-15px) scale(1.03) rotate(-2deg); }
}
@keyframes facebook-pulse {
0%, 100% { transform: translateY(0) scale(1); }
25% { transform: translateY(-30px) scale(1.12); }
50% { transform: translateY(0) scale(1.08); }
75% { transform: translateY(-20px) scale(1.05); }
}
@keyframes youtube-glow {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); }
50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5)); }
}
/* =Service Navigation Tags - Base Styles
-------------------------------------------------------------- */
.service-nav {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
position: relative !important;
z-index: 100 !important;
transition: all 0.3s ease !important;
padding: 10px 0 !important; /* Reduced from 30px */
margin-top: -10px !important;
}
.service-nav.sticky {
position: fixed !important;
top: 70px !important;
left: 0 !important;
right: 0 !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
animation: slideDown 0.3s ease !important;
padding: 15px 0 !important;
box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
}
@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
.service-nav .nav-items {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
.service-nav .nav-item {
flex: none !important;
max-width: none !important;
text-align: center !important;
padding: 12px 20px !important;
text-decoration: none !important;
color: #4A5568 !important;
font-weight: 600 !important;
font-size: 14px !important;
border: none !important;
border-radius: 25px !important;
background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%) !important;
transition: all 0.3s ease !important;
position: relative !important;
display: inline-flex !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
backdrop-filter: blur(5px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
.service-nav .nav-item:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
transform: translateY(-3px) scale(1.05) !important;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
}
.service-nav .nav-item.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
transform: translateY(-2px) !important; /* Reduced transform for consistency */
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
padding: 12px 20px !important; /* Same padding as non-active items */
margin: 0 !important; /* Remove any unwanted margins */
}
.service-nav .nav-item.active::before {
margin-left: 15px !important; /* Consistent with non-active items */
}
/* Service Navigation - Platform Specific */
/* Twitter Navigation */
.twitter-services-page .service-nav {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(45px) !important;
box-shadow: 0 18px 70px rgba(29, 161, 242, 0.25) !important;
border-bottom: 8px solid transparent !important;
background-image: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)), linear-gradient(135deg, #1da1f2 0%, #0d8bd9 25%, #42a5f5 50%, #1da1f2 75%, #0074cc 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.twitter-services-page .service-nav .nav-item {
color: #ffffff !important;
text-shadow: 0 4px 10px rgba(0,0,0,0.9) !important;
background: rgba(29, 161, 242, 0.25) !important;
border: 6px solid transparent !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
background-image: linear-gradient(135deg, rgba(29, 161, 242, 0.25) 0%, rgba(66, 165, 245, 0.2) 100%), linear-gradient(135deg, #1da1f2 0%, #42a5f5 50%, #0d8bd9 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.twitter-services-page .service-nav .nav-item:hover {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 50%, #0074cc 100%) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 25px 60px rgba(29, 161, 242, 0.7) !important;
transform: translateY(-12px) scale(1.15) !important;
}
.twitter-services-page .service-nav .nav-item.active {
background: linear-gradient(135deg, #0d8bd9 0%, #1da1f2 50%, #42a5f5 100%) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.7) !important;
box-shadow: 0 8px 25px rgba(13, 139, 217, 0.4) !important; /* Reduced shadow */
transform: translateY(-2px) scale(1.02) !important; /* Reduced scale */
padding: 12px 20px !important; /* Consistent padding */
margin: 0 !important;
}
/* TikTok Navigation */
.tiktok-services-page .service-nav {
background: rgba(0, 0, 0, 0.95) !important;
backdrop-filter: blur(40px) !important;
box-shadow: 0 15px 60px rgba(254, 44, 85, 0.3) !important;
border-bottom: 6px solid transparent !important;
background-image: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)), linear-gradient(135deg, #fe2c55 0%, #25f4ee 50%, #fe2c55 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.tiktok-services-page .service-nav .nav-item {
color: #ffffff !important;
text-shadow: 0 3px 8px rgba(0,0,0,0.8) !important;
background: rgba(254, 44, 85, 0.2) !important;
border: 5px solid transparent !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
background-image: linear-gradient(135deg, rgba(254, 44, 85, 0.2) 0%, rgba(37, 244, 238, 0.15) 100%), linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.tiktok-services-page .service-nav .nav-item:hover {
background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 50%, #000000 100%) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.5) !important;
box-shadow: 0 20px 50px rgba(254, 44, 85, 0.6) !important;
transform: translateY(-10px) scale(1.12) !important;
}
.tiktok-services-page .service-nav .nav-item.active {
background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 8px 25px rgba(37, 244, 238, 0.4) !important; /* Reduced shadow */
transform: translateY(-2px) scale(1.02) !important; /* Reduced scale */
padding: 12px 20px !important; /* Consistent padding */
margin: 0 !important;
}
/* Instagram Navigation */
.instagram-services-page .service-nav {
background: rgba(255, 255, 255, 0.97) !important;
backdrop-filter: blur(30px) !important;
box-shadow: 0 10px 40px rgba(131, 58, 180, 0.15) !important;
border-bottom: 4px solid transparent !important;
background-image: linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)), linear-gradient(135deg, #833ab4 0%, #fd1d1d 25%, #fcb045 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.instagram-services-page .service-nav .nav-item {
color: #ffffff !important;
text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
background: rgba(131, 58, 180, 0.3) !important;
border: 3px solid transparent !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
background-image: linear-gradient(135deg, rgba(131, 58, 180, 0.3) 0%, rgba(225, 48, 108, 0.1) 100%), linear-gradient(135deg, #833ab4 0%, #e1306c 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.instagram-services-page .service-nav .nav-item:hover {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
color: white !important;
border-color: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 15px 40px rgba(131, 58, 180, 0.4) !important;
transform: translateY(-6px) scale(1.08) !important;
}
.instagram-services-page .service-nav .nav-item.active {
background: linear-gradient(135deg, #833ab4 0%, #e1306c 100%) !important;
color: white !important;
border-color: rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 8px 25px rgba(131, 58, 180, 0.3) !important; /* Reduced shadow */
transform: translateY(-2px) scale(1.02) !important; /* Reduced scale */
padding: 12px 20px !important; /* Consistent padding */
margin: 0 !important;
}
/* Facebook Navigation */
.facebook-services-page .service-nav {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(35px) !important;
box-shadow: 0 12px 50px rgba(24, 119, 242, 0.2) !important;
border-bottom: 5px solid transparent !important;
background-image: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)), linear-gradient(135deg, #1877f2 0%, #42a5f5 50%, #166fe5 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.facebook-services-page .service-nav .nav-item {
color: #ffffff !important;
text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
background: rgba(24, 119, 242, 0.3) !important;
border: 4px solid transparent !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
background-image: linear-gradient(135deg, rgba(24, 119, 242, 0.3) 0%, rgba(66, 165, 245, 0.08) 100%), linear-gradient(135deg, #1877f2 0%, #42a5f5 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.facebook-services-page .service-nav .nav-item:hover {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 50%, #166fe5 100%) !important;
color: white !important;
border-color: rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 18px 45px rgba(24, 119, 242, 0.5) !important;
transform: translateY(-8px) scale(1.1) !important;
}
/* Facebook Navigation Active Fix */
.facebook-services-page .service-nav .nav-item.active {
background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%) !important;
color: white !important;
border-color: rgba(255, 255, 255, 0.5) !important;
box-shadow: 0 8px 25px rgba(24, 119, 242, 0.4) !important; /* Reduced shadow */
transform: translateY(-2px) scale(1.02) !important; /* Reduced scale */
padding: 12px 20px !important; /* Consistent padding */
margin: 0 !important;
}
/* Snapchat Navigation */
.snapchat-services-page .service-nav {
background: rgba(255, 252, 0, 0.95) !important;
backdrop-filter: blur(25px) !important;
box-shadow: 0 8px 32px rgba(255, 252, 0, 0.3) !important;
border-bottom: 3px solid rgba(0, 0, 0, 0.1) !important;
}
.snapchat-services-page .service-nav .nav-item {
background: rgba(0, 0, 0, 0.1) !important;
color: #000 !important;
border: 3px solid transparent !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.snapchat-services-page .service-nav .nav-item:hover {
background: rgba(0, 0, 0, 0.8) !important;
color: #fffc00 !important;
border-color: rgba(0, 0, 0, 0.9) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
transform: translateY(-5px) scale(1.05) !important;
}
/* Snapchat Navigation Active Fix */
.snapchat-services-page .service-nav .nav-item.active {
background: rgba(0, 0, 0, 0.9) !important;
color: #fffc00 !important;
border-color: rgba(0, 0, 0, 1) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; /* Reduced shadow */
transform: translateY(-2px) scale(1.02) !important; /* Reduced scale */
padding: 12px 20px !important; /* Consistent padding */
margin: 0 !important;
}
/* YouTube Navigation */
.youtube-services-page .service-nav {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(15px) !important;
}
.youtube-services-page .service-nav .nav-item {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
color: #495057 !important;
border: 2px solid transparent !important;
}
.youtube-services-page .service-nav .nav-item:hover {
background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%) !important;
color: white !important;
border-color: #ff0000 !important;
box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3) !important;
}
/* YouTube Navigation Active Fix */
.youtube-services-page .service-nav .nav-item.active {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
color: white !important;
border-color: #990000 !important;
box-shadow: 0 8px 25px rgba(255, 0, 0, 0.25) !important; /* Reduced shadow */
transform: translateY(-2px) scale(1.02) !important; /* Reduced scale */
padding: 12px 20px !important; /* Consistent padding */
margin: 0 !important;
}
/* Navigation Icons */
.service-nav .nav-item::before {
content: '' !important;
display: inline-block !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
margin-left: 8px !important;
vertical-align: middle !important;
}
/* Twitter Icons */
.twitter-services-page .service-nav .nav-item::before {
width: 28px !important;
height: 28px !important;
margin-left: 22px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
border: 5px solid rgba(255, 255, 255, 0.7) !important;
}
.twitter-services-page .service-nav .nav-item[href*="followers"]::before {
background: linear-gradient(135deg, #1da1f2 0%, #42a5f5 100%) !important;
}
.twitter-services-page .service-nav .nav-item[href*="retweets"]::before {
background: linear-gradient(135deg, #00c851 0%, #4caf50 100%) !important;
}
.twitter-services-page .service-nav .nav-item[href*="likes"]::before {
background: linear-gradient(135deg, #ff3547 0%, #e91e63 100%) !important;
}
.twitter-services-page .service-nav .nav-item[href*="views"]::before {
background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%) !important;
}
/* TikTok Icons */
.tiktok-services-page .service-nav .nav-item::before {
width: 26px !important;
height: 26px !important;
margin-left: 20px !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
border: 4px solid rgba(255, 255, 255, 0.6) !important;
}
.tiktok-services-page .service-nav .nav-item[href*="followers"]::before {
background: linear-gradient(135deg, #fe2c55 0%, #ff6b9d 100%) !important;
}
.tiktok-services-page .service-nav .nav-item[href*="likes"]::before {
background: linear-gradient(135deg, #25f4ee 0%, #4facfe 100%) !important;
}
.tiktok-services-page .service-nav .nav-item[href*="views"]:not([href*="live"])::before {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.tiktok-services-page .service-nav .nav-item[href*="live-views"]::before {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}
.tiktok-services-page .service-nav .nav-item[href*="comments"]::before {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
}
/* Instagram Icons */
.instagram-services-page .service-nav .nav-item::before {
width: 22px !important;
height: 22px !important;
border-radius: 8px !important;
margin-left: 15px !important;
box-shadow: 0 5px 12px rgba(0,0,0,0.25) !important;
border: 3px solid rgba(255, 255, 255, 0.4) !important;
}
.instagram-services-page .service-nav .nav-item[href*="followers-arab"]::before {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
}
.instagram-services-page .service-nav .nav-item[href*="followers-foreign"]::before {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
}
.instagram-services-page .service-nav .nav-item[href*="likes-arab"]::before {
background: linear-gradient(135deg, #ed64a6 0%, #d53f8c 100%) !important;
}
.instagram-services-page .service-nav .nav-item[href*="likes-foreign"]::before {
background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
}
.instagram-services-page .service-nav .nav-item[href*="views"]::before {
background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%) !important;
}
.instagram-services-page .service-nav .nav-item[href*="comments"]::before {
background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%) !important;
}
/* Facebook Icons */
.facebook-services-page .service-nav .nav-item::before {
width: 24px !important;
height: 24px !important;
border-radius: 10px !important;
margin-left: 18px !important;
box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important;
border: 4px solid rgba(255, 255, 255, 0.5) !important;
}
.facebook-services-page .service-nav .nav-item[href*="page-likes"]::before {
background: linear-gradient(135deg, #e91e63 0%, #f06292 100%) !important;
}
.facebook-services-page .service-nav .nav-item[href*="page-followers"]::before {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%) !important;
}
.facebook-services-page .service-nav .nav-item[href*="profile-followers"]::before {
background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
}
.facebook-services-page .service-nav .nav-item[href*="post-likes"]::before {
background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%) !important;
}
.facebook-services-page .service-nav .nav-item[href*="video-views"]::before {
background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%) !important;
}
.facebook-services-page .service-nav .nav-item[href*="comments"]::before {
background: linear-gradient(135deg, #00bcd4 0%, #4dd0e1 100%) !important;
}
/* Snapchat Icons */
.snapchat-services-page .service-nav .nav-item::before {
width: 20px !important;
height: 20px !important;
border-radius: 6px !important;
margin-left: 12px !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.snapchat-services-page .service-nav .nav-item[href*="followers"]::before {
background: linear-gradient(135deg, #000000 0%, #333333 100%) !important;
}
.snapchat-services-page .service-nav .nav-item[href*="views"]:not([href*="story"])::before {
background: linear-gradient(135deg, #ff0000 0%, #ff4444 100%) !important;
}
.snapchat-services-page .service-nav .nav-item[href*="story-views"]::before {
background: linear-gradient(135deg, #9c27b0 0%, #e91e63 100%) !important;
}
.snapchat-services-page .service-nav .nav-item[href*="score-boost"]::before {
background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%) !important;
}
.snapchat-services-page .service-nav .nav-item[href*="premium-features"]::before {
background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%) !important;
}
/* YouTube Icons */
.youtube-services-page .service-nav .nav-item::before {
width: 14px !important;
height: 14px !important;
border-radius: 3px !important;
margin-left: 10px !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.youtube-services-page .service-nav .nav-item[href*="subscribers"]::before {
background: linear-gradient(135deg, #ff0000 0%, #ff4444 100%) !important;
}
.youtube-services-page .service-nav .nav-item[href*="views"]::before {
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%) !important;
}
.youtube-services-page .service-nav .nav-item[href*="likes"]::before {
background: linear-gradient(135deg, #fbbc04 0%, #ea4335 100%) !important;
}
.youtube-services-page .service-nav .nav-item[href*="comments"]::before {
background: linear-gradient(135deg, #9c27b0 0%, #e91e63 100%) !important;
}
.youtube-services-page .service-nav .nav-item[href*="watch-hours"]::before {
background: linear-gradient(135deg, #ff9800 0%, #f44336 100%) !important;
}
/* =WooCommerce Product Cards - Base Override
-------------------------------------------------------------- */
.woocommerce ul.products,
ul.products,
.woocommerce .products,
.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
margin: 50px 0 !important;
padding: 0 !important;
list-style: none !important;
clear: both !important;
width: 100% !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.woocommerce .products::before,
.woocommerce .products::after {
display: none !important;
content: none !important;
}
.woocommerce ul.products li.product,
ul.products li.product,
.woocommerce .products li.product,
.products li.product,
.woocommerce ul.products .product,
ul.products .product {
float: none !important;
width: 100% !important;
background: white !important;
border-radius: 20px !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
overflow: visible !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
min-height: 450px !important;
max-width: none !important;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
.woocommerce .products li.product:hover {
transform: translateY(-8px) !important;
box-shadow: 0 20px 40px rgba(131, 58, 180, 0.2) !important;
}
/* Hide All Product Images */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
ul.products li.product a img,
ul.products li.product img,
.woocommerce-LoopProduct-link img,
.attachment-woocommerce_thumbnail,
.wp-post-image,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce .products img {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
opacity: 0 !important;
position: absolute !important;
left: -9999px !important;
}
/* Price Circle Design */
.woocommerce ul.products li.product .price,
ul.products li.product .price,
.woocommerce .products .price,
.products .price {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
width: 100px !important;
height: 100px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
margin: 30px auto 20px !important;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3) !important;
position: relative !important;
order: -10 !important;
z-index: 10 !important;
}
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins,
.woocommerce .products .price ins {
text-decoration: none !important;
color: white !important;
}
.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
display: none !important;
}
/* Product Title as Quantity */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
.woocommerce .products .woocommerce-loop-product__title,
.woocommerce .products h2 {
font-size: 2.5rem !important;
font-weight: 800 !important;
color: #2D3748 !important;
margin: 10px 0 15px !important;
padding: 0 20px !important;
order: -5 !important;
line-height: 1.1 !important;
text-align: center !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.woocommerce ul.products li.product h2::after,
ul.products li.product .woocommerce-loop-product__title::after,
ul.products li.product h2::after {
content: '' !important;
display: block !important;
width: 60px !important;
height: 3px !important;
background: linear-gradient(135deg, #00D4FF 0%, #6C63FF 100%) !important;
margin: 15px auto !important;
border-radius: 2px !important;
}
/* Short Description */
.woocommerce ul.products li.product .product-short-description,
ul.products li.product .product-short-description,
.woocommerce .products .product-short-description {
padding: 0 25px 20px !important;
margin: 0 !important;
color: #4A5568 !important;
font-size: 1rem !important;
order: -3 !important;
line-height: 1.6 !important;
font-weight: 500 !important;
flex-grow: 1 !important;
text-align: center !important;
}
/* Features List */
.woocommerce ul.products li.product .product-features,
ul.products li.product .product-features,
.woocommerce .products .product-features {
padding: 0 25px 25px !important;
order: -1 !important;
}
.woocommerce ul.products li.product .product-features ul,
ul.products li.product .product-features ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
}
.woocommerce ul.products li.product .product-features li,
ul.products li.product .product-features li {
padding: 6px 0 !important;
color: #718096 !important;
font-size: 0.85rem !important;
position: relative !important;
text-align: center !important;
padding-right: 20px !important;
}
.woocommerce ul.products li.product .product-features li::before,
ul.products li.product .product-features li::before {
content: '✓' !important;
position: absolute !important;
right: 0 !important;
color: #48BB78 !important;
font-weight: bold !important;
font-size: 0.9rem !important;
}
/* Buy Button */
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
ul.products li.product .add_to_cart_button,
.woocommerce .products .button,
.woocommerce .products .add_to_cart_button {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 100%) !important;
color: white !important;
padding: 15px 35px !important;
margin: 0 auto 25px !important;
border-radius: 50px !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 16px !important;
transition: all 0.3s ease !important;
display: inline-block !important;
border: none !important;
order: 10 !important;
box-shadow: 0 5px 15px rgba(131, 58, 180, 0.3) !important;
cursor: pointer !important;
}
.woocommerce ul.products li.product .button:hover,
ul.products li.product .button:hover,
.woocommerce .products .button:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(131, 58, 180, 0.4) !important;
background: linear-gradient(135deg, #722fa8 0%, #e01818 100%) !important;
color: white !important;
}
/* Sale Badge */
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale,
.woocommerce .products .onsale {
position: absolute !important;
top: 15px !important;
right: 15px !important;
background: #FF6584 !important;
color: white !important;
padding: 8px 15px !important;
border-radius: 20px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
z-index: 10 !important;
min-height: auto !important;
min-width: auto !important;
line-height: 1 !important;
box-shadow: 0 3px 10px rgba(255, 101, 132, 0.3) !important;
}
.added_to_cart {
display: none !important;
}
/* Service-Specific Product Card Enhancements */
/* Twitter Product Cards */
.twitter-services-page .woocommerce ul.products li.product {
border: 10px solid transparent !important;
transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;
background-image: linear-gradient(135deg, #ffffff 0%, #f8faff 100%), linear-gradient(135deg, #1da1f2 0%, #0d8bd9 25%, #42a5f5 50%, #1da1f2 75%, #0074cc 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.twitter-services-page .woocommerce ul.products li.product::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25px;
background: linear-gradient(90deg, #1da1f2 0%, #0d8bd9 15%, #42a5f5 30%, #1da1f2 45%, #0074cc 60%, #1da1f2 75%, #42a5f5 90%, #1da1f2 100%);
background-size: 400% 100%;
animation: twitter-tweet-flow 4s linear infinite;
transform: scaleX(0);
transition: transform 0.9s ease;
}
@keyframes twitter-tweet-flow {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.twitter-services-page .woocommerce ul.products li.product:hover::before {
transform: scaleX(1);
}
.twitter-services-page .woocommerce ul.products li.product:hover {
transform: translateY(-40px) scale(1.15) rotate(1deg) !important;
box-shadow: 0 80px 160px rgba(29, 161, 242, 0.45) !important;
border-color: rgba(29, 161, 242, 0.8) !important;
}
.twitter-services-page .woocommerce ul.products li.product .price {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 50%, #42a5f5 100%) !important;
box-shadow: 0 25px 55px rgba(29, 161, 242, 0.6) !important;
border: 8px solid rgba(255, 255, 255, 0.6) !important;
font-weight: 900 !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}
.twitter-services-page .woocommerce ul.products li.product .button {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 50%, #0074cc 100%) !important;
font-weight: 900 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-size: 1.15rem !important;
text-shadow: 0 6px 12px rgba(0, 0, 0, 0.7) !important;
}
.twitter-services-page .woocommerce ul.products li.product .button:hover {
background: linear-gradient(135deg, #0d8bd9 0%, #0074cc 50%, #005999 100%) !important;
transform: translateY(-12px) scale(1.2) !important;
box-shadow: 0 40px 80px rgba(29, 161, 242, 0.8) !important;
border-color: rgba(255, 255, 255, 0.9) !important;
}
.twitter-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 50%, #42a5f5 100%);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: twitter-title-tweet 6s ease-in-out infinite;
}
@keyframes twitter-title-tweet {
0%, 100% { background-position: 0% 50%; }
33% { background-position: 100% 0%; }
66% { background-position: 50% 100%; }
}
.twitter-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after {
content: '💬';
position: absolute;
top: -40px;
right: -50px;
font-size: 3.2rem;
animation: twitter-chat 10s ease-in-out infinite;
opacity: 0.8;
}
@keyframes twitter-chat {
0%, 100% { transform: scale(1) rotate(-25deg); }
25% { transform: scale(1.9) rotate(25deg); }
50% { transform: scale(1.6) rotate(0deg); }
75% { transform: scale(1.7) rotate(-15deg); }
}
/* TikTok Product Cards */
.tiktok-services-page .woocommerce ul.products li.product {
border: 8px solid transparent !important;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
background-image: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%), linear-gradient(135deg, #fe2c55 0%, #25f4ee 50%, #000000 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.tiktok-services-page .woocommerce ul.products li.product::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(90deg, #fe2c55 0%, #25f4ee 25%, #000000 50%, #fe2c55 75%, #25f4ee 100%);
background-size: 300% 100%;
animation: tiktok-border-flow 3s linear infinite;
transform: scaleX(0);
transition: transform 0.8s ease;
}
@keyframes tiktok-border-flow {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.tiktok-services-page .woocommerce ul.products li.product:hover::before {
transform: scaleX(1);
}
.tiktok-services-page .woocommerce ul.products li.product:hover {
transform: translateY(-35px) scale(1.12) rotate(2deg) !important;
box-shadow: 0 70px 140px rgba(254, 44, 85, 0.4) !important;
border-color: rgba(254, 44, 85, 0.7) !important;
}
.tiktok-services-page .woocommerce ul.products li.product .price {
background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%) !important;
color: #000 !important;
box-shadow: 0 20px 45px rgba(254, 44, 85, 0.5) !important;
border: 6px solid rgba(255, 255, 255, 0.5) !important;
font-weight: 900 !important;
text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8) !important;
}
.tiktok-services-page .woocommerce ul.products li.product .button {
background: linear-gradient(135deg, #000000 0%, #fe2c55 50%, #25f4ee 100%) !important;
font-weight: 900 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-size: 1.1rem !important;
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.8) !important;
}
.tiktok-services-page .woocommerce ul.products li.product .button:hover {
background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 50%, #000000 100%) !important;
transform: translateY(-10px) scale(1.18) !important;
box-shadow: 0 35px 70px rgba(37, 244, 238, 0.7) !important;
border-color: rgba(255, 255, 255, 0.8) !important;
}
.tiktok-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: tiktok-title-pulse 4s ease-in-out infinite;
}
@keyframes tiktok-title-pulse {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.tiktok-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after {
content: '🔥';
position: absolute;
top: -35px;
right: -45px;
font-size: 3rem;
animation: tiktok-fire 8s ease-in-out infinite;
opacity: 0.8;
}
@keyframes tiktok-fire {
0%, 100% { transform: scale(1) rotate(-20deg); }
25% { transform: scale(1.8) rotate(20deg); }
50% { transform: scale(1.5) rotate(0deg); }
75% { transform: scale(1.6) rotate(-15deg); }
}
/* Instagram Product Cards */
.instagram-services-page .woocommerce ul.products li.product {
border: 5px solid transparent !important;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
background-image: linear-gradient(135deg, #ffffff 0%, #fafafa 100%), linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.instagram-services-page .woocommerce ul.products li.product::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 12px;
background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 25%, #fcb045 50%, #e1306c 75%, #833ab4 100%);
transform: scaleX(0);
transition: transform 0.6s ease;
}
.instagram-services-page .woocommerce ul.products li.product:hover::before {
transform: scaleX(1);
}
.instagram-services-page .woocommerce ul.products li.product:hover {
transform: translateY(-25px) scale(1.08) !important;
box-shadow: 0 50px 100px rgba(131, 58, 180, 0.3) !important;
border-color: rgba(131, 58, 180, 0.5) !important;
}
.instagram-services-page .woocommerce ul.products li.product .price {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
box-shadow: 0 15px 35px rgba(131, 58, 180, 0.4) !important;
border: 4px solid rgba(255, 255, 255, 0.3) !important;
font-weight: 900 !important;
}
.instagram-services-page .woocommerce ul.products li.product .button {
background: linear-gradient(135deg, #833ab4 0%, #e1306c 100%) !important;
font-weight: 900 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-size: 1rem !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}
.instagram-services-page .woocommerce ul.products li.product .button:hover {
background: linear-gradient(135deg, #fd1d1d 0%, #fcb045 100%) !important;
transform: translateY(-6px) scale(1.12) !important;
box-shadow: 0 25px 50px rgba(253, 29, 29, 0.5) !important;
border-color: rgba(255, 255, 255, 0.6) !important;
}
.instagram-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.instagram-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after {
content: '❤️';
position: absolute;
top: -25px;
right: -35px;
font-size: 2.2rem;
animation: instagram-heart 6s ease-in-out infinite;
opacity: 0.8;
}
@keyframes instagram-heart {
0%, 100% { transform: scale(1) rotate(-12deg); }
25% { transform: scale(1.5) rotate(12deg); }
50% { transform: scale(1.3) rotate(0deg); }
75% { transform: scale(1.4) rotate(-8deg); }
}
/* Facebook Product Cards */
.facebook-services-page .woocommerce ul.products li.product {
border: 6px solid transparent !important;
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
background-image: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%), linear-gradient(135deg, #1877f2 0%, #42a5f5 50%, #166fe5 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
}
.facebook-services-page .woocommerce ul.products li.product::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 15px;
background: linear-gradient(90deg, #1877f2 0%, #42a5f5 25%, #166fe5 50%, #0d47a1 75%, #1877f2 100%);
transform: scaleX(0);
transition: transform 0.7s ease;
}
.facebook-services-page .woocommerce ul.products li.product:hover::before {
transform: scaleX(1);
}
.facebook-services-page .woocommerce ul.products li.product:hover {
transform: translateY(-30px) scale(1.1) !important;
box-shadow: 0 60px 120px rgba(24, 119, 242, 0.35) !important;
border-color: rgba(24, 119, 242, 0.6) !important;
}
.facebook-services-page .woocommerce ul.products li.product .price {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%) !important;
box-shadow: 0 18px 40px rgba(24, 119, 242, 0.4) !important;
border: 5px solid rgba(255, 255, 255, 0.4) !important;
font-weight: 900 !important;
}
.facebook-services-page .woocommerce ul.products li.product .button {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%) !important;
font-weight: 900 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
font-size: 1.05rem !important;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
}
.facebook-services-page .woocommerce ul.products li.product .button:hover {
background: linear-gradient(135deg, #166fe5 0%, #0d47a1 100%) !important;
transform: translateY(-8px) scale(1.15) !important;
box-shadow: 0 30px 60px rgba(24, 119, 242, 0.6) !important;
border-color: rgba(255, 255, 255, 0.7) !important;
}
.facebook-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.facebook-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after {
content: '👍';
position: absolute;
top: -30px;
right: -40px;
font-size: 2.5rem;
animation: facebook-reaction 8s ease-in-out infinite;
opacity: 0.8;
}
@keyframes facebook-reaction {
0%, 100% { transform: scale(1) rotate(-15deg); }
25% { transform: scale(1.6) rotate(15deg); }
50% { transform: scale(1.4) rotate(0deg); }
75% { transform: scale(1.5) rotate(-10deg); }
}
/* Snapchat Product Cards */
.snapchat-services-page .woocommerce ul.products li.product {
border: 4px solid transparent !important;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
background: linear-gradient(135deg, #ffffff 0%, #fffef7 100%) !important;
}
.snapchat-services-page .woocommerce ul.products li.product::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background: linear-gradient(90deg, #fffc00 0%, #000000 50%, #fffc00 100%);
transform: scaleX(0);
transition: transform 0.5s ease;
}
.snapchat-services-page .woocommerce ul.products li.product:hover::before {
transform: scaleX(1);
}
.snapchat-services-page .woocommerce ul.products li.product:hover {
transform: translateY(-20px) scale(1.05) !important;
box-shadow: 0 40px 80px rgba(255, 252, 0, 0.3) !important;
border-color: rgba(255, 252, 0, 0.6) !important;
}
.snapchat-services-page .woocommerce ul.products li.product .price {
background: linear-gradient(135deg, #fffc00 0%, #000000 100%) !important;
color: #000 !important;
box-shadow: 0 12px 30px rgba(255, 252, 0, 0.4) !important;
border: 4px solid rgba(0, 0, 0, 0.1) !important;
font-weight: 900 !important;
}
.snapchat-services-page .woocommerce ul.products li.product .button:hover {
background: linear-gradient(135deg, #fffc00 0%, #000000 100%) !important;
color: #000 !important;
transform: translateY(-5px) scale(1.1) !important;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
border-color: rgba(255, 252, 0, 0.5) !important;
}
.snapchat-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
color: #000 !important;
font-weight: 900 !important;
}
.snapchat-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after {
content: '💛';
position: absolute;
top: -20px;
right: -30px;
font-size: 2rem;
animation: snapchat-heart 5s ease-in-out infinite;
opacity: 0.7;
}
@keyframes snapchat-heart {
0%, 100% { transform: scale(1) rotate(-10deg); }
25% { transform: scale(1.4) rotate(10deg); }
50% { transform: scale(1.2) rotate(0deg); }
75% { transform: scale(1.3) rotate(-5deg); }
}
/* YouTube Product Cards */
.youtube-services-page .woocommerce ul.products li.product {
border: 2px solid transparent !important;
transition: all 0.4s ease !important;
}
.youtube-services-page .woocommerce ul.products li.product:hover {
transform: translateY(-12px) !important;
box-shadow: 0 25px 50px rgba(255, 0, 0, 0.15) !important;
border-color: rgba(255, 0, 0, 0.2) !important;
}
.youtube-services-page .woocommerce ul.products li.product .price {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
color: white !important;
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3) !important;
}
.youtube-services-page .woocommerce ul.products li.product .button {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
color: white !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
.youtube-services-page .woocommerce ul.products li.product .button:hover {
background: linear-gradient(135deg, #cc0000 0%, #990000 100%) !important;
transform: translateY(-3px) scale(1.05) !important;
box-shadow: 0 12px 30px rgba(255, 0, 0, 0.4) !important;
}
/* =Section Styling
-------------------------------------------------------------- */
.service-section {
padding: 80px 0;
min-height: 600px;
}
.service-section:nth-child(even) {
background: #f8f9fa;
}
.section-title {
text-align: center;
margin-bottom: 50px;
color: var(--dark-color);
position: relative;
font-weight: 700;
font-size: 2.5rem;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--gradient-primary);
margin: 20px auto 0;
border-radius: 2px;
}
/* Service-Specific Section Titles */
/* Twitter Section Titles */
.twitter-services-page .section-title {
color: #14171a;
font-weight: 900;
font-size: 3.4rem;
letter-spacing: -1.8px;
text-transform: uppercase;
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 25%, #42a5f5 50%, #1da1f2 75%, #0074cc 100%);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: twitter-text-flow 8s ease-in-out infinite;
}
@keyframes twitter-text-flow {
0%, 100% { background-position: 0% 50%; }
25% { background-position: 100% 0%; }
50% { background-position: 50% 100%; }
75% { background-position: 0% 50%; }
}
.twitter-services-page .section-title::after {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 50%, #42a5f5 100%) !important;
height: 18px !important;
border-radius: 9px !important;
width: 220px !important;
}
.twitter-services-page .section-title::before {
content: '🐦';
position: absolute;
left: -110px;
top: 50%;
transform: translateY(-50%);
font-size: 5rem;
opacity: 0.4;
animation: twitter-bird-flight 12s ease-in-out infinite;
}
@keyframes twitter-bird-flight {
0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
20% { transform: translateY(-50%) scale(1.6) rotate(25deg); }
40% { transform: translateY(-50%) scale(1.4) rotate(-15deg); }
60% { transform: translateY(-50%) scale(1.5) rotate(10deg); }
80% { transform: translateY(-50%) scale(1.3) rotate(-5deg); }
}
/* TikTok Section Titles */
.tiktok-services-page .section-title {
color: #000;
font-weight: 900;
font-size: 3.2rem;
letter-spacing: -1.5px;
text-transform: uppercase;
background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 50%, #000000 100%);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: tiktok-text-wave 5s ease-in-out infinite;
}
@keyframes tiktok-text-wave {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.tiktok-services-page .section-title::after {
background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%) !important;
height: 15px !important;
border-radius: 8px !important;
width: 200px !important;
}
.tiktok-services-page .section-title::before {
content: '🎵';
position: absolute;
left: -100px;
top: 50%;
transform: translateY(-50%);
font-size: 4.5rem;
opacity: 0.4;
animation: tiktok-music 10s ease-in-out infinite;
}
@keyframes tiktok-music {
0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
25% { transform: translateY(-50%) scale(1.5) rotate(30deg); }
50% { transform: translateY(-50%) scale(1.3) rotate(0deg); }
75% { transform: translateY(-50%) scale(1.4) rotate(-20deg); }
}
/* Instagram Section Titles */
.instagram-services-page .section-title {
color: #2d3748;
font-weight: 900;
font-size: 2.8rem;
letter-spacing: -1px;
text-transform: uppercase;
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.instagram-services-page .section-title::after {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
height: 10px !important;
border-radius: 5px !important;
width: 150px !important;
}
.instagram-services-page .section-title::before {
content: '📸';
position: absolute;
left: -80px;
top: 50%;
transform: translateY(-50%);
font-size: 3.5rem;
opacity: 0.4;
animation: instagram-snap 6s ease-in-out infinite;
}
@keyframes instagram-snap {
0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
25% { transform: translateY(-50%) scale(1.3) rotate(15deg); }
50% { transform: translateY(-50%) scale(1.2) rotate(0deg); }
75% { transform: translateY(-50%) scale(1.25) rotate(-10deg); }
}
/* Facebook Section Titles */
.facebook-services-page .section-title {
color: #1a1a1a;
font-weight: 900;
font-size: 3rem;
letter-spacing: -1.2px;
text-transform: uppercase;
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 50%, #166fe5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.facebook-services-page .section-title::after {
background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%) !important;
height: 12px !important;
border-radius: 6px !important;
width: 180px !important;
}
.facebook-services-page .section-title::before {
content: '👍';
position: absolute;
left: -90px;
top: 50%;
transform: translateY(-50%);
font-size: 4rem;
opacity: 0.4;
animation: facebook-thumbs 8s ease-in-out infinite;
}
@keyframes facebook-thumbs {
0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
25% { transform: translateY(-50%) scale(1.4) rotate(20deg); }
50% { transform: translateY(-50%) scale(1.3) rotate(0deg); }
75% { transform: translateY(-50%) scale(1.35) rotate(-15deg); }
}
/* Snapchat Section Titles */
.snapchat-services-page .section-title {
color: #000;
font-weight: 900;
font-size: 2.6rem;
letter-spacing: -0.8px;
text-transform: uppercase;
}
.snapchat-services-page .section-title::after {
background: linear-gradient(135deg, #fffc00 0%, #000000 100%) !important;
height: 8px !important;
border-radius: 4px !important;
width: 120px !important;
}
.snapchat-services-page .section-title::before {
content: '👻';
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%);
font-size: 3rem;
opacity: 0.4;
animation: snapchat-emoji 5s ease-in-out infinite;
}
@keyframes snapchat-emoji {
0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
25% { transform: translateY(-50%) scale(1.2) rotate(10deg); }
50% { transform: translateY(-50%) scale(1.1) rotate(0deg); }
75% { transform: translateY(-50%) scale(1.15) rotate(-5deg); }
}
/* YouTube Section Titles */
.youtube-services-page .section-title {
color: #212529;
font-weight: 800;
font-size: 2.2rem;
}
.youtube-services-page .section-title::after {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%) !important;
height: 5px !important;
border-radius: 3px !important;
}
/* Section Background Patterns */
.twitter-services-page .service-section:nth-child(even) {
background: linear-gradient(135deg, rgba(29, 161, 242, 0.04) 0%, rgba(255, 255, 255, 0.98) 100%);
border-radius: 60px;
margin: 60px 0;
padding: 140px 60px;
border: 8px solid rgba(29, 161, 242, 0.12);
transform: rotate(-0.3deg);
}
.twitter-services-page .service-section:nth-child(odd) {
background: linear-gradient(135deg, rgba(66, 165, 245, 0.04) 0%, rgba(255, 255, 255, 0.98) 100%);
border-radius: 60px;
margin: 60px 0;
padding: 140px 60px;
border: 8px solid rgba(66, 165, 245, 0.12);
transform: rotate(0.3deg);
}
.tiktok-services-page .service-section:nth-child(even) {
background: linear-gradient(135deg, rgba(254, 44, 85, 0.03) 0%, rgba(255, 255, 255, 0.97) 100%);
border-radius: 50px;
margin: 50px 0;
padding: 120px 50px;
border: 6px solid rgba(254, 44, 85, 0.1);
transform: rotate(-0.5deg);
}
.tiktok-services-page .service-section:nth-child(odd) {
background: linear-gradient(135deg, rgba(37, 244, 238, 0.03) 0%, rgba(255, 255, 255, 0.97) 100%);
border-radius: 50px;
margin: 50px 0;
padding: 120px 50px;
border: 6px solid rgba(37, 244, 238, 0.1);
transform: rotate(0.5deg);
}
.instagram-services-page .service-section:nth-child(even) {
background: linear-gradient(135deg, rgba(131, 58, 180, 0.03) 0%, rgba(255, 255, 255, 0.95) 100%);
border-radius: 35px;
margin: 30px 0;
padding: 80px 30px;
border: 3px solid rgba(131, 58, 180, 0.1);
}
.instagram-services-page .service-section:nth-child(odd) {
background: linear-gradient(135deg, rgba(253, 29, 29, 0.03) 0%, rgba(255, 255, 255, 0.95) 100%);
border-radius: 35px;
margin: 30px 0;
padding: 80px 30px;
border: 3px solid rgba(253, 29, 29, 0.1);
}
.facebook-services-page .service-section:nth-child(even) {
background: linear-gradient(135deg, rgba(24, 119, 242, 0.04) 0%, rgba(255, 255, 255, 0.96) 100%);
border-radius: 40px;
margin: 40px 0;
padding: 100px 40px;
border: 4px solid rgba(24, 119, 242, 0.1);
}
.facebook-services-page .service-section:nth-child(odd) {
background: linear-gradient(135deg, rgba(66, 165, 245, 0.04) 0%, rgba(255, 255, 255, 0.96) 100%);
border-radius: 40px;
margin: 40px 0;
padding: 100px 40px;
border: 4px solid rgba(66, 165, 245, 0.1);
}
.snapchat-services-page .service-section:nth-child(even) {
background: linear-gradient(135deg, rgba(255, 252, 0, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
border-radius: 30px;
margin: 20px 0;
padding: 60px 20px;
}
.snapchat-services-page .service-section:nth-child(odd) {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
border-radius: 30px;
margin: 20px 0;
padding: 60px 20px;
}
/* Background Patterns */
.twitter-services-page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: 0;
}
.tiktok-services-page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: 0;
}
.instagram-services-page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: 0;
}
.facebook-services-page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: 0;
}
.snapchat-services-page::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: 0;
}
/* =Hero Title Styling - Platform Specific
-------------------------------------------------------------- */
.twitter-hero .hero-title {
font-size: 4.2rem;
margin-bottom: 2.8rem;
color: white;
text-shadow: 6px 6px 18px rgba(0, 0, 0, 0.6);
font-weight: 900;
letter-spacing: -2.5px;
background: linear-gradient(45deg, #ffffff 0%, #e3f2fd 20%, #ffffff 40%, #bbdefb 60%, #ffffff 80%, #e3f2fd 100%);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: twitter-title-shimmer 6s ease-in-out infinite;
position: relative;
}
@keyframes twitter-title-shimmer {
0%, 100% { background-position: 0% 50%; }
25% { background-position: 100% 0%; }
50% { background-position: 50% 100%; }
75% { background-position: 0% 50%; }
}
.twitter-hero .hero-title::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 8px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
border-radius: 4px;
animation: twitter-underline 4s ease-in-out infinite;
}
@keyframes twitter-underline {
0%, 100% { width: 140px; opacity: 0.8; }
50% { width: 200px; opacity: 0.4; }
}
.tiktok-hero .hero-title {
font-size: 4.5rem;
margin-bottom: 3rem;
color: white;
text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
font-weight: 900;
letter-spacing: -2px;
background: linear-gradient(45deg, #ffffff 0%, #fe2c55 25%, #25f4ee 50%, #ffffff 75%, #fe2c55 100%);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: tiktok-title-glow 4s ease-in-out infinite;
}
@keyframes tiktok-title-glow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.snapchat-hero .hero-title {
font-size: 3.2rem;
margin-bottom: 1.5rem;
color: #000;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
font-weight: 900;
letter-spacing: -1px;
}
.instagram-hero .hero-title {
font-size: 3.5rem;
margin-bottom: 2rem;
color: white;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
font-weight: 900;
letter-spacing: -1.5px;
background: linear-gradient(45deg, #ffffff 0%, #f8f8f8 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.facebook-hero .hero-title {
font-size: 4rem;
margin-bottom: 2.5rem;
color: white;
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
font-weight: 900;
letter-spacing: -2px;
background: linear-gradient(45deg, #ffffff 0%, #e3f2fd 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.facebook-hero .hero-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 6px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
border-radius: 3px;
}
.youtube-hero .hero-title {
font-size: 2.8rem;
margin-bottom: 1.5rem;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
font-weight: 800;
}
/* Hero Descriptions */
.twitter-hero .hero-description {
font-size: 1.65rem;
max-width: 1150px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.96);
text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
line-height: 2.3;
font-weight: 600;
}
.tiktok-hero .hero-description {
font-size: 1.6rem;
max-width: 1100px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.95);
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
line-height: 2.2;
font-weight: 600;
}
.snapchat-hero .hero-description {
font-size: 1.35rem;
max-width: 900px;
margin: 0 auto;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.5);
line-height: 1.8;
font-weight: 600;
}
.instagram-hero .hero-description {
font-size: 1.4rem;
max-width: 950px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.95);
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
line-height: 1.9;
font-weight: 600;
}
.facebook-hero .hero-description {
font-size: 1.5rem;
max-width: 1000px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.95);
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
line-height: 2;
font-weight: 600;
}
.youtube-hero .hero-description {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.9);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Hero Icon Complex Animations */
.twitter-hero .hero-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
height: 280px;
border: 12px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
border-style: dashed;
animation: twitter-orbit-outer 15s linear infinite;
}
.twitter-hero .hero-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 350px;
border: 8px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
border-style: dotted;
animation: twitter-orbit-outer 20s linear infinite reverse;
}
@keyframes twitter-orbit-outer {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.tiktok-hero .hero-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
border: 10px solid rgba(254, 44, 85, 0.2);
border-radius: 50%;
animation: tiktok-pulse-red 4s ease-in-out infinite;
}
.tiktok-hero .hero-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 320px;
border: 8px solid rgba(37, 244, 238, 0.15);
border-radius: 50%;
animation: tiktok-pulse-cyan 6s ease-in-out infinite reverse;
}
@keyframes tiktok-pulse-red {
0%, 100% {
transform: translate(-50%, -50%) scale(1) rotate(0deg);
opacity: 0.4;
border-color: rgba(254, 44, 85, 0.2);
}
50% {
transform: translate(-50%, -50%) scale(1.3) rotate(180deg);
opacity: 0.1;
border-color: rgba(254, 44, 85, 0.4);
}
}
@keyframes tiktok-pulse-cyan {
0%, 100% {
transform: translate(-50%, -50%) scale(1) rotate(0deg);
opacity: 0.3;
border-color: rgba(37, 244, 238, 0.15);
}
50% {
transform: translate(-50%, -50%) scale(1.4) rotate(-180deg);
opacity: 0.05;
border-color: rgba(37, 244, 238, 0.3);
}
}
.snapchat-hero .hero-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
height: 160px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
animation: snapchat-pulse 4s ease-in-out infinite;
}
.snapchat-hero .hero-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 3px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
animation: snapchat-pulse 6s ease-in-out infinite reverse;
}
@keyframes snapchat-pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.1;
}
}
.instagram-hero .hero-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
border: 6px solid rgba(255, 255, 255, 0.15);
border-radius: 25px;
animation: instagram-frame 6s ease-in-out infinite;
}
.instagram-hero .hero-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
border: 4px solid rgba(255, 255, 255, 0.08);
border-radius: 30px;
animation: instagram-frame 9s ease-in-out infinite reverse;
}
@keyframes instagram-frame {
0%, 100% {
transform: translate(-50%, -50%) scale(1) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.15) rotate(180deg);
opacity: 0.1;
}
}
.facebook-hero .hero-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 8px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
animation: facebook-orbit 12s linear infinite;
}
.facebook-hero .hero-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 260px;
height: 260px;
border: 5px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: facebook-orbit 18s linear infinite reverse;
}
@keyframes facebook-orbit {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* =Service Cards (Original Homepage)
-------------------------------------------------------------- */
.service-cards {
margin-top: 50px;
}
.cards-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.service-card {
background: var(--white);
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.service-card i {
font-size: 3rem;
margin-bottom: 1rem;
}
.service-card.youtube i { color: #ff0000; }
.service-card.instagram i { color: #e4405f; }
.service-card.facebook i { color: #3b5998; }
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.service-card p {
color: #718096;
font-size: 0.9rem;
}
/* =Process Section
-------------------------------------------------------------- */
.process-section {
padding: 80px 0;
background: var(--light-bg);
}
.process-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.process-step {
text-align: center;
position: relative;
}
.step-icon {
position: relative;
display: inline-block;
width: 120px;
height: 120px;
background: var(--white);
border-radius: 20px;
box-shadow: var(--shadow-md);
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.step-icon i {
font-size: 3rem;
color: var(--primary-color);
}
.step-number {
position: absolute;
top: -15px;
right: -15px;
width: 40px;
height: 40px;
background: var(--gradient-primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
}
.process-step h3 {
font-size: 1.25rem;
color: var(--dark-color);
}
/* =Testimonials Section
-------------------------------------------------------------- */
.testimonials-section {
padding: 80px 0;
background: var(--white);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.testimonial-card {
background: var(--light-bg);
padding: 30px;
border-radius: 20px;
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.testimonial-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-info h4 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.testimonial-role {
color: #718096;
font-size: 0.9rem;
margin-bottom: 10px;
}
.stars {
color: #ffc107;
}
.stars i {
font-size: 0.9rem;
}
.testimonial-text {
color: #4a5568;
line-height: 1.8;
}
.testimonial-highlight {
margin-top: 50px;
}
.highlight-card {
background: var(--gradient-primary);
padding: 40px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 30px;
color: var(--white);
box-shadow: var(--shadow-xl);
}
.highlight-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255, 255, 255, 0.3);
}
.highlight-content {
flex: 1;
}
.highlight-text {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 20px;
color: var(--white);
}
.highlight-content h4 {
font-size: 1.25rem;
margin-bottom: 10px;
}
.highlight-content .stars {
color: var(--white);
}
/* =Why Us Section
-------------------------------------------------------------- */
.why-us-section {
padding: 80px 0;
background: var(--light-bg);
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.feature-card {
background: var(--white);
padding: 40px;
border-radius: 20px;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.feature-icon {
width: 80px;
height: 80px;
background: var(--gradient-secondary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.feature-icon i {
font-size: 2.5rem;
color: var(--white);
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--dark-color);
}
.feature-card p {
color: #4a5568;
line-height: 1.8;
}
/* =Contact Section
-------------------------------------------------------------- */
.contact-section {
padding: 80px 0;
background: var(--gradient-secondary);
}
.contact-wrapper {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.contact-section .section-title {
color: var(--white);
margin-bottom: 20px;
}
.contact-section .section-title::after {
background: var(--white);
}
.contact-description {
color: var(--white);
font-size: 1.1rem;
margin-bottom: 40px;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group input {
width: 100%;
padding: 15px 25px;
border: none;
border-radius: 50px;
font-size: 16px;
font-family: var(--font-arabic);
background: rgba(255, 255, 255, 0.9);
}
.form-group input:focus {
outline: none;
background: var(--white);
box-shadow: var(--shadow-lg);
}
/* =Floating Elements - Platform Specific
-------------------------------------------------------------- */
.twitter-services-page::after {
content: '📱';
position: fixed;
bottom: 35%;
right: 1%;
font-size: 7rem;
color: rgba(29, 161, 242, 0.2);
animation: twitter-phone 18s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes twitter-phone {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
25% { transform: translateY(-80px) rotate(35deg) scale(1.4); }
50% { transform: translateY(0) rotate(0deg) scale(1.3); }
75% { transform: translateY(-50px) rotate(-30deg) scale(1.2); }
}
.tiktok-services-page::after {
content: '🎤';
position: fixed;
bottom: 20%;
right: 2%;
font-size: 6rem;
color: rgba(254, 44, 85, 0.2);
animation: tiktok-mic 15s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes tiktok-mic {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
25% { transform: translateY(-60px) rotate(30deg) scale(1.3); }
50% { transform: translateY(0) rotate(0deg) scale(1.2); }
75% { transform: translateY(-40px) rotate(-25deg) scale(1.15); }
}
.snapchat-services-page::after {
content: '👻';
position: fixed;
bottom: 20%;
right: 5%;
font-size: 3rem;
color: rgba(255, 252, 0, 0.2);
animation: snapchat-float 8s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes snapchat-float {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
25% { transform: translateY(-30px) rotate(15deg) scale(1.1); }
50% { transform: translateY(0) rotate(0deg) scale(1); }
75% { transform: translateY(-15px) rotate(-10deg) scale(1.05); }
}
.instagram-services-page::after {
content: '📱';
position: fixed;
bottom: 25%;
right: 4%;
font-size: 4rem;
color: rgba(131, 58, 180, 0.2);
animation: instagram-phone 10s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes instagram-phone {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
25% { transform: translateY(-40px) rotate(20deg) scale(1.15); }
50% { transform: translateY(0) rotate(0deg) scale(1.1); }
75% { transform: translateY(-20px) rotate(-15deg) scale(1.08); }
}
.facebook-services-page::after {
content: '💙';
position: fixed;
bottom: 30%;
right: 3%;
font-size: 5rem;
color: rgba(24, 119, 242, 0.2);
animation: facebook-heart 12s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes facebook-heart {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
25% { transform: translateY(-50px) rotate(25deg) scale(1.2); }
50% { transform: translateY(0) rotate(0deg) scale(1.15); }
75% { transform: translateY(-30px) rotate(-20deg) scale(1.1); }
}
/* =Scroll to Top Button
-------------------------------------------------------------- */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(100px);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 100%);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 35px rgba(131, 58, 180, 0.4);
}
.scroll-to-top:active {
transform: translateY(-3px) scale(1.05);
}
.scroll-to-top i {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-8px); }
60% { transform: translateY(-4px); }
}
/* Alternative Styles */
.scroll-to-top.pill-style {
width: auto;
height: 50px;
padding: 0 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
}
.scroll-to-top.pill-style::before {
content: 'أعلى';
margin-left: 8px;
}
.scroll-to-top.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #333;
}
.scroll-to-top.glass:hover {
background: rgba(255, 255, 255, 0.3);
color: #333;
}
/* =Fade In Animation
-------------------------------------------------------------- */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* =Checkout Page Styling
-------------------------------------------------------------- */
.custom-checkout-page {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 0;
}
.checkout-hero {
padding: 40px 0 20px;
text-align: center;
color: white;
}
.checkout-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.checkout-subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 30px;
}
.progress-bar {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 30px;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0.5;
transition: all 0.3s ease;
}
.progress-step.active {
opacity: 1;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
border: 2px solid rgba(255,255,255,0.3);
}
.progress-step.active .step-number {
background: white;
color: #667eea;
border-color: white;
}
.checkout-content {
padding: 40px 0 80px;
}
.checkout-wrapper {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.order-summary {
position: sticky;
top: 100px;
height: fit-content;
}
.summary-card {
background: white;
border-radius: 25px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.2);
}
.summary-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 25px;
color: #2d3748;
text-align: center;
}
.product-info {
display: flex;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 2px solid #f7fafc;
}
.service-icon {
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.service-icon.instagram {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.product-details h4 {
font-size: 1.3rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 5px;
}
.product-type {
color: #718096;
font-size: 0.9rem;
margin-bottom: 15px;
}
.product-features {
display: flex;
flex-direction: column;
gap: 5px;
}
.feature {
font-size: 0.85rem;
color: #48bb78;
font-weight: 500;
}
.pricing-breakdown {
background: #f7fafc;
border-radius: 15px;
padding: 20px;
}
.price-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 1rem;
}
.price-row:last-child {
margin-bottom: 0;
}
.discount-row {
color: #e53e3e;
font-weight: 600;
}
.total-row {
border-top: 2px solid #e2e8f0;
padding-top: 15px;
font-size: 1.2rem;
font-weight: 700;
color: #2d3748;
}
.checkout-form {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.form-section {
margin-bottom: 35px;
padding-bottom: 30px;
border-bottom: 2px solid #f7fafc;
}
.form-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.section-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.section-icon {
width: 50px;
height: 50px;
border-radius: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.section-header h3 {
font-size: 1.4rem;
font-weight: 700;
color: #2d3748;
margin: 0;
}
.security-badge {
margin-right: auto;
display: flex;
align-items: center;
gap: 8px;
background: rgba(72, 187, 120, 0.1);
padding: 8px 15px;
border-radius: 20px;
color: #38a169;
font-size: 0.9rem;
font-weight: 600;
}
.form-group {
margin-bottom: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group label {
display: block;
font-weight: 600;
color: #4a5568;
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-group input {
width: 100%;
padding: 15px 20px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #f7fafc;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.input-wrapper {
position: relative;
}
.input-prefix {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #718096;
font-weight: 600;
font-size: 1.1rem;
}
.input-wrapper input {
padding-left: 45px;
}
.help-text {
color: #718096;
font-size: 0.85rem;
margin-top: 5px;
}
.coupon-wrapper {
display: flex;
gap: 15px;
}
.coupon-wrapper input {
flex: 1;
}
.btn-apply-coupon {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
border: none;
padding: 15px 25px;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.btn-apply-coupon:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(72, 187, 120, 0.3);
}
.coupon-message {
margin-top: 10px;
padding: 10px 15px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
}
.coupon-message.success {
background: rgba(72, 187, 120, 0.1);
color: #38a169;
border: 1px solid rgba(72, 187, 120, 0.3);
}
.coupon-message.error {
background: rgba(229, 62, 62, 0.1);
color: #e53e3e;
border: 1px solid rgba(229, 62, 62, 0.3);
}
.payment-form {
background: #f7fafc;
padding: 25px;
border-radius: 15px;
margin-top: 20px;
}
.card-icons {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 8px;
}
.card-icons i {
font-size: 1.5rem;
opacity: 0.6;
}
.final-section {
text-align: center;
padding-top: 30px;
}
.terms-checkbox {
margin-bottom: 30px;
}
.terms-checkbox input {
width: auto !important;
margin-left: 10px;
}
.terms-checkbox label {
color: #4a5568;
font-size: 0.9rem;
}
.terms-checkbox a {
color: #667eea;
text-decoration: none;
font-weight: 600;
}
.terms-checkbox a:hover {
text-decoration: underline;
}
.btn-place-order {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 20px 40px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 400px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
}
.btn-place-order:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}
.btn-place-order:active {
transform: translateY(-1px);
}
.btn-text, .btn-price {
display: inline-block;
}
.btn-price {
margin-right: 15px;
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 20px;
}
.btn-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spinner {
width: 25px;
height: 25px;
border: 3px solid rgba(255,255,255,0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.trust-indicators {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 8px;
color: #718096;
font-size: 0.9rem;
font-weight: 500;
}
.trust-item i {
color: #48bb78;
}
/* WooCommerce Checkout Integration */
.woocommerce-checkout {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 0;
}
.woocommerce-checkout .container {
max-width: 1200px;
margin: 0 auto;
}
.woocommerce-checkout .col2-set {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#custom_checkout_fields h3 {
color: #2d3748;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #667eea;
position: relative;
}
.woocommerce-billing-fields h3::before,
.woocommerce-additional-fields h3::before,
#custom_checkout_fields h3::before {
content: '👤';
margin-left: 10px;
font-size: 1.2rem;
}
#custom_checkout_fields h3::before {
content: '📱';
}
.woocommerce-checkout .form-row {
margin-bottom: 20px;
}
.woocommerce-checkout .form-row label {
font-weight: 600;
color: #4a5568;
margin-bottom: 8px;
display: block;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
width: 100% !important;
padding: 15px 20px !important;
border: 2px solid #e2e8f0 !important;
border-radius: 12px !important;
font-size: 16px !important;
transition: all 0.3s ease !important;
background: #f7fafc !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
outline: none !important;
border-color: #667eea !important;
background: white !important;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}
#custom_checkout_fields {
background: #f7fafc;
padding: 25px;
border-radius: 15px;
margin: 30px 0;
border: 2px solid #e2e8f0;
}
.woocommerce-checkout-review-order {
background: #f7fafc;
padding: 30px;
border-radius: 20px;
position: sticky;
top: 100px;
}
.woocommerce-checkout-review-order h3 {
color: #2d3748;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
}
.woocommerce-checkout-review-order-table {
margin-bottom: 25px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
padding: 15px 0;
border-bottom: 1px solid #e2e8f0;
}
.woocommerce-checkout-review-order-table .order-total {
font-size: 1.2rem;
font-weight: 700;
color: #2d3748;
}
.woocommerce-checkout-payment {
background: white;
border-radius: 15px;
padding: 25px;
border: 2px solid #e2e8f0;
margin-top: 20px;
}
.woocommerce-checkout-payment .payment_methods {
background: #f7fafc;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.woocommerce-checkout-payment .payment_method_cardinity {
background: white;
border-radius: 10px;
padding: 15px;
border: 2px solid #e2e8f0;
}
.woocommerce-checkout-payment .payment_method_cardinity label {
font-weight: 600;
color: #2d3748;
font-size: 1.1rem;
}
.woocommerce-checkout #place_order {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: white !important;
padding: 18px 40px !important;
border-radius: 50px !important;
font-weight: 700 !important;
font-size: 18px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100% !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.woocommerce-checkout #place_order:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4) !important;
}
.checkout-security {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
padding: 15px;
background: rgba(72, 187, 120, 0.1);
border-radius: 12px;
font-size: 0.9rem;
color: #38a169;
font-weight: 600;
}
.checkout-security::before {
content: '🔒';
font-size: 1.2rem;
}
.woocommerce-checkout.processing #place_order {
background: #cbd5e0 !important;
cursor: not-allowed !important;
transform: none !important;
}
.woocommerce-checkout.processing #place_order::after {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
}
.woocommerce-message {
background: rgba(72, 187, 120, 0.1) !important;
color: #38a169 !important;
border: 2px solid rgba(72, 187, 120, 0.3) !important;
border-radius: 12px !important;
padding: 15px 20px !important;
margin: 20px 0 !important;
}
.woocommerce-error {
background: rgba(229, 62, 62, 0.1) !important;
color: #e53e3e !important;
border: 2px solid rgba(229, 62, 62, 0.3) !important;
border-radius: 12px !important;
padding: 15px 20px !important;
margin: 20px 0 !important;
}
/* =Standard Pages Styling
-------------------------------------------------------------- */
.standard-page {
padding-top: 0;
}
.page-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 60px 0 40px;
color: white;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
animation: float-dots 20s linear infinite;
pointer-events: none;
}
@keyframes float-dots {
0% { transform: translateY(0); }
100% { transform: translateY(-100px); }
}
.breadcrumb {
margin-bottom: 20px;
font-size: 0.9rem;
opacity: 0.9;
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb a:hover {
color: white;
}
.breadcrumb .separator {
margin: 0 10px;
opacity: 0.6;
}
.breadcrumb .current {
color: white;
font-weight: 600;
}
.page-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
.page-description {
font-size: 1.2rem;
opacity: 0.95;
max-width: 600px;
line-height: 1.6;
}
.page-content-section {
padding: 80px 0;
background: #f8f9fa;
}
.content-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 50px;
align-items: start;
}
.page-content {
background: white;
padding: 50px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
}
.page-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px 20px 0 0;
}
.content-body {
line-height: 1.8;
color: #333;
}
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
color: #2d3748;
margin-top: 30px;
margin-bottom: 15px;
font-weight: 700;
}
.content-body h2 {
font-size: 1.8rem;
border-bottom: 3px solid #e2e8f0;
padding-bottom: 10px;
}
.content-body h3 {
font-size: 1.5rem;
color: #4a5568;
}
.content-body p {
margin-bottom: 20px;
text-align: justify;
}
.content-body ul,
.content-body ol {
margin: 20px 0;
padding-right: 30px;
}
.content-body li {
margin-bottom: 8px;
line-height: 1.6;
}
.content-body strong {
color: #2d3748;
font-weight: 700;
}
.content-body a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.content-body a:hover {
color: #764ba2;
text-decoration: underline;
}
.page-sidebar {
display: flex;
flex-direction: column;
gap: 30px;
}
.info-card {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
}
.info-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.info-header i {
font-size: 1.5rem;
color: #667eea;
}
.info-header h3 {
margin: 0;
font-size: 1.25rem;
color: #2d3748;
}
.info-content p {
color: #4a5568;
line-height: 1.6;
margin-bottom: 20px;
}
.info-link {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.info-link:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.quick-links {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
}
.quick-links h4 {
margin-bottom: 20px;
color: #2d3748;
font-size: 1.2rem;
font-weight: 700;
}
.quick-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.quick-links li {
margin-bottom: 12px;
}
.quick-links a {
color: #4a5568;
text-decoration: none;
padding: 8px 15px;
border-radius: 10px;
display: block;
transition: all 0.3s ease;
position: relative;
padding-right: 35px;
}
.quick-links a::before {
content: '◀';
position: absolute;
right: 15px;
color: #cbd5e0;
transition: all 0.3s ease;
}
.quick-links a:hover {
background: #f7fafc;
color: #667eea;
transform: translateX(-5px);
}
.quick-links a:hover::before {
color: #667eea;
transform: translateX(-3px);
}
.contact-cta {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
padding: 60px 0;
text-align: center;
color: white;
}
.cta-content h3 {
font-size: 2rem;
margin-bottom: 15px;
font-weight: 700;
}
.cta-content p {
font-size: 1.1rem;
margin-bottom: 30px;
opacity: 0.9;
}
/* =Footer
-------------------------------------------------------------- */
.site-footer {
background: var(--dark-color);
color: var(--white);
padding: 60px 0 20px;
}
.footer-widgets {
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-widget-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.footer-widget h3 {
font-size: 1.25rem;
margin-bottom: 20px;
}
.footer-widget ul {
list-style: none;
padding: 0;
}
.footer-widget ul li {
margin-bottom: 10px;
}
.footer-widget a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-widget a:hover {
color: var(--white);
}
.site-info {
padding: 30px 0;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright p {
margin: 0;
color: rgba(255, 255, 255, 0.7);
}
.footer-menu {
display: flex;
justify-content: center;
align-items: center;
}
.footer-nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav-links li {
margin: 0;
}
.footer-nav-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
padding: 5px 10px;
border-radius: 15px;
}
.footer-nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--white);
transition: width 0.3s ease;
}
.footer-nav-links a:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.1);
}
.footer-nav-links a:hover::after {
width: 80%;
}
.footer-brand .brand-text {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
}
/* =Responsive Design
-------------------------------------------------------------- */
@media (max-width: 1024px) {
.container {
max-width: 960px;
}
.hero-title {
font-size: 2.5rem;
}
.services-grid,
.cards-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.woocommerce ul.products,
ul.products,
.woocommerce .products {
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
}
}
@media (max-width: 992px) {
.packages-grid {
grid-template-columns: repeat(3, 1fr);
}
.service-nav .nav-items {
gap: 0;
}
.service-nav .nav-item {
padding: 15px 20px;
font-size: 0.9rem;
}
.checkout-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.woocommerce-checkout .col2-set {
grid-template-columns: 1fr;
gap: 30px;
padding: 30px 20px;
}
.woocommerce-checkout-review-order {
position: static;
}
.content-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.page-content {
padding: 40px 30px;
}
.page-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
/* Navigation */
.navbar-toggler {
display: block;
z-index: 1001;
}
.navbar-menu {
position: fixed;
top: 70px;
right: -100%;
width: 100%;
height: calc(100vh - 70px);
background: var(--white);
transition: right 0.3s ease;
z-index: 999;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}
.navbar-menu.active {
right: 0;
}
.navbar-nav {
flex-direction: column;
padding: 30px 20px;
gap: 1rem;
}
.navbar-nav a {
width: 100%;
text-align: center;
padding: 15px;
}
.navbar-social {
display: none;
}
/* Hero */
.hero-section {
padding: 40px 0 20px;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 30px;
}
.hero-text {
text-align: center;
order: 2;
padding: 0 20px;
}
.hero-image {
order: 1;
max-width: 300px;
margin: 0 auto;
}
.hero-title {
font-size: 2rem;
}
.hero-description {
font-size: 1rem;
}
.floating-icons {
display: none;
}
/* Service Pages */
.twitter-hero .hero-title {
font-size: 3.2rem;
}
.twitter-hero .hero-icon {
font-size: 6.8rem;
}
.tiktok-hero .hero-title {
font-size: 3rem;
}
.tiktok-hero .hero-icon {
font-size: 6.5rem;
}
.snapchat-hero .hero-title {
font-size: 2.5rem;
}
.snapchat-hero .hero-icon {
font-size: 5rem;
}
.instagram-hero .hero-title {
font-size: 2.8rem;
}
.instagram-hero .hero-icon {
font-size: 5.5rem;
}
.facebook-hero .hero-title {
font-size: 2.8rem;
}
.facebook-hero .hero-icon {
font-size: 6rem;
}
.youtube-hero .hero-title {
font-size: 2.2rem;
}
.youtube-hero .hero-icon {
font-size: 4rem;
}
/* Hide complex animations on mobile */
.twitter-hero .hero-icon::before,
.twitter-hero .hero-icon::after,
.tiktok-hero .hero-icon::before,
.tiktok-hero .hero-icon::after,
.snapchat-hero .hero-icon::before,
.snapchat-hero .hero-icon::after,
.instagram-hero .hero-icon::before,
.instagram-hero .hero-icon::after,
.facebook-hero .hero-icon::before,
.facebook-hero .hero-icon::after {
display: none;
}
/* Section titles */
.twitter-services-page .section-title::before,
.tiktok-services-page .section-title::before,
.snapchat-services-page .section-title::before,
.instagram-services-page .section-title::before,
.facebook-services-page .section-title::before {
display: none;
}
.twitter-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.tiktok-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.snapchat-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.instagram-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.facebook-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after {
display: none;
}
/* Hide floating elements */
.twitter-services-page::before,
.twitter-services-page::after,
.tiktok-services-page::before,
.tiktok-services-page::after,
.snapchat-services-page::before,
.snapchat-services-page::after,
.instagram-services-page::before,
.instagram-services-page::after,
.facebook-services-page::before,
.facebook-services-page::after {
display: none;
}
/* Navigation adjustments */
.service-nav .nav-item {
text-transform: none !important;
letter-spacing: 0.8px !important;
}
.twitter-services-page .service-nav .nav-item,
.tiktok-services-page .service-nav .nav-item {
text-transform: none !important;
letter-spacing: 0.5px !important;
}
.instagram-services-page .service-nav .nav-item,
.facebook-services-page .service-nav .nav-item {
text-transform: none !important;
letter-spacing: 0.3px !important;
}
/* Section title sizes */
.twitter-services-page .section-title {
font-size: 2.8rem;
}
.tiktok-services-page .section-title {
font-size: 2.6rem;
}
.instagram-services-page .section-title {
font-size: 2.2rem;
}
.facebook-services-page .section-title {
font-size: 2.4rem;
}
/* Section backgrounds */
.twitter-services-page .service-section:nth-child(even),
.twitter-services-page .service-section:nth-child(odd) {
transform: none;
margin: 40px 0;
padding: 100px 40px;
}
.tiktok-services-page .service-section:nth-child(even),
.tiktok-services-page .service-section:nth-child(odd) {
transform: none;
margin: 30px 0;
padding: 80px 30px;
}
/* Sections */
.services-grid,
.cards-wrapper,
.process-steps,
.testimonials-grid,
.features-grid {
grid-template-columns: 1fr;
}
.packages-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.woocommerce ul.products,
ul.products,
.woocommerce .products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
min-height: 400px !important;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
width: 80px !important;
height: 80px !important;
font-size: 1rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product h2 {
font-size: 2.2rem !important;
}
.service-nav .nav-items {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.service-nav .nav-items::-webkit-scrollbar {
display: none;
}
.service-nav .nav-item {
flex: 0 0 auto;
min-width: 120px;
}
.footer-widget-area {
grid-template-columns: 1fr;
text-align: center;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
.footer-nav-links {
flex-direction: column;
gap: 15px;
}
.footer-menu {
order: 2;
}
.footer-brand {
order: 3;
}
/* Checkout responsive */
.checkout-hero {
padding: 30px 0 15px;
}
.checkout-title {
font-size: 2rem;
}
.progress-bar {
gap: 20px;
}
.checkout-form {
padding: 30px 20px;
}
.form-row {
grid-template-columns: 1fr;
}
.trust-indicators {
gap: 20px;
}
/* Page content */
.page-hero {
padding: 40px 0 30px;
}
.page-title {
font-size: 2rem;
}
.page-description {
font-size: 1rem;
}
.page-content {
padding: 30px 20px;
}
.page-content-section {
padding: 50px 0;
}
.contact-cta {
padding: 40px 0;
}
.cta-content h3 {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
.container {
padding: 0 15px;
width: 100%;
}
.navbar-wrapper {
gap: 1rem;
}
.floating-icons {
display: none;
}
.btn {
padding: 10px 25px;
font-size: 14px;
}
.highlight-card {
flex-direction: column;
text-align: center;
}
.service-cards {
padding: 0 15px;
}
.hero-section {
width: 100%;
overflow: hidden;
}
.woocommerce ul.products,
ul.products,
.woocommerce .products {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product h2 {
font-size: 2rem !important;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
font-size: 0.9rem !important;
}
.service-nav .nav-items {
gap: 8px !important;
padding: 0 15px !important;
}
.service-nav .nav-item {
padding: 6px 12px !important;
font-size: 11px !important;
}
.service-nav .nav-item::before {
width: 8px !important;
height: 8px !important;
margin-left: 6px !important;
}
.twitter-services-page .service-nav .nav-item::before,
.tiktok-services-page .service-nav .nav-item::before {
width: 8px !important;
height: 8px !important;
margin-left: 6px !important;
}
.progress-bar {
flex-direction: column;
gap: 15px;
}
.coupon-wrapper {
flex-direction: column;
}
.trust-indicators {
flex-direction: column;
gap: 15px;
}
.scroll-to-top {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
font-size: 18px;
}
.scroll-to-top.pill-style {
height: 45px;
padding: 0 15px;
font-size: 12px;
}
}
/* =Performance Optimizations
-------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.twitter-hero .hero-icon,
.twitter-hero::before,
.twitter-hero,
.twitter-services-page .section-title::before,
.twitter-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.twitter-services-page::after,
.twitter-services-page .section-title,
.twitter-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
.tiktok-hero .hero-icon,
.tiktok-hero::before,
.tiktok-services-page .section-title::before,
.tiktok-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.tiktok-services-page::after,
.tiktok-hero,
.tiktok-services-page .section-title,
.tiktok-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
.snapchat-hero .hero-icon,
.snapchat-hero::before,
.snapchat-services-page .section-title::before,
.snapchat-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.snapchat-services-page::after,
.instagram-hero .hero-icon,
.instagram-hero::before,
.instagram-services-page .section-title::before,
.instagram-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.instagram-services-page::after,
.facebook-hero .hero-icon,
.facebook-hero::before,
.facebook-services-page .section-title::before,
.facebook-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title::after,
.facebook-services-page::after,
.youtube-hero .hero-icon,
.hero-float,
.float,
.scroll-to-top i {
animation: none !important;
}
}
/* =High Contrast Mode
-------------------------------------------------------------- */
@media (prefers-contrast: high) {
.twitter-services-page .section-title,
.twitter-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
.tiktok-services-page .section-title,
.tiktok-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
.instagram-services-page .section-title,
.facebook-services-page .section-title,
.facebook-services-page .woocommerce ul.products li.product .woocommerce-loop-product__title {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}
}
/* =Dark Mode Support
-------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
.snapchat-services-page .section-title {
color: #000;
}
.youtube-services-page .section-title {
color: #f8f9fa;
}
}
/* =Print Styles
-------------------------------------------------------------- */
@media print {
.page-hero,
.page-sidebar,
.contact-cta,
.scroll-to-top,
.floating-icons,
.service-nav,
.navbar,
.site-footer {
display: none !important;
}
.content-wrapper {
grid-template-columns: 1fr;
}
.page-content {
box-shadow: none;
padding: 20px;
}
.hero-section {
background: none !important;
color: #000 !important;
}
.service-section {
background: none !important;
}
}
/* =Override any theme conflicts
-------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none !important;
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
/* =Utility Classes
-------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.visually-hidden {
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;
}
/* Services Section */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.service-box {
background: #fff;
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.service-box:hover {
transform: translateY(-5px);
}
.service-box i {
font-size: 3rem;
margin-bottom: 1rem;
}
.service-box h3 {
margin: 1rem 0;
font-size: 1.5rem;
}
.service-box p {
color: #666;
margin-bottom: 1.5rem;
}
.btn-service {
background: #007cba;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s ease;
}
.btn-service:hover {
background: #005a87;
}
/* Platform-specific colors */
.service-box.facebook i { color: #1877f2; }
.service-box.instagram i { color: #e4405f; }
.service-box.youtube i { color: #ff0000; }
.service-box.tiktok i { color: #000; }
.service-box.twitter i { color: #1da1f2; }
/* ===================================================
MOBILE CHECKOUT FIELD WIDTH FIX
=================================================== */
/* MOBILE: Force full width and remove excessive padding */
@media (max-width: 768px) {
/* Remove container restrictions */
body.woocommerce-checkout,
.woocommerce-checkout {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Main checkout container */
.woocommerce {
margin: 0 !important;
padding: 10px !important;
max-width: 100% !important;
width: 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
background: #f8f9fa !important;
}
/* Remove all grid layouts and force full width */
.woocommerce .col2-set,
.col2-set {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.col-1,
.col-2 {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
/* Billing fields container */
.woocommerce-billing-fields,
.woocommerce-billing-fields__field-wrapper {
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
background: white !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* Form rows - FORCE full width */
.form-row,
.woocommerce .form-row,
.woocommerce-checkout .form-row {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 15px 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
/* Specific form row types */
.form-row-wide,
.form-row-first,
.form-row-last {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
float: none !important;
}
/* Input fields - STRETCH to full width */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row select,
.form-row textarea,
.woocommerce .form-row input,
.woocommerce .form-row select,
.woocommerce .form-row textarea {
width: 100% !important;
max-width: 100% !important;
padding: 15px 12px !important;
margin: 0 !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
font-size: 16px !important; /* Prevents zoom on iOS */
box-sizing: border-box !important;
background: #fff !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
/* Input focus state */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
border-color: #667eea !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}
/* Labels */
.form-row label {
display: block !important;
width: 100% !important;
margin-bottom: 5px !important;
font-weight: 600 !important;
color: #333 !important;
font-size: 14px !important;
}
/* Custom checkout fields (Instagram username) */
#custom_checkout_fields,
.custom-checkout-section {
width: 100% !important;
padding: 15px 10px !important;
margin: 15px 0 !important;
background: white !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* Order review section */
.woocommerce-checkout-review-order,
#order_review {
width: 100% !important;
padding: 15px 10px !important;
margin: 15px 0 !important;
background: white !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* Payment section */
.woocommerce-checkout-payment,
#payment {
width: 100% !important;
padding: 15px 10px !important;
margin: 15px 0 !important;
background: white !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* Payment method fields */
.payment_method_cardinity input[type="text"] {
width: 100% !important;
max-width: 100% !important;
padding: 12px 10px !important;
margin: 5px 0 !important;
font-size: 16px !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
box-sizing: border-box !important;
}
/* Place order button */
#place_order,
.woocommerce-checkout #place_order {
width: 100% !important;
max-width: 100% !important;
padding: 18px 20px !important;
margin: 20px 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
/* Coupon toggle and form */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
width: 100% !important;
padding: 15px 10px !important;
margin: 15px 0 !important;
box-sizing: border-box !important;
}
.checkout_coupon .form-row {
display: block !important;
width: 100% !important;
}
.checkout_coupon input[type="text"],
.checkout_coupon .button {
width: 100% !important;
margin: 5px 0 !important;
box-sizing: border-box !important;
}
/* Remove any theme-specific padding/margins that conflict */
.site-main,
.content-area,
.site-content {
padding: 0 !important;
margin: 0 !important;
}
/* Force remove any flex that causes width issues */
.checkout_coupon .form-row {
display: block !important;
flex-direction: column !important;
}
/* Override any grid layouts */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
grid-column: 1 / -1 !important;
width: 100% !important;
}
/* Additional input field targeting for Cardinity */
input[name="cardinity_card_holder"],
input[name="cardinity_card_number"],
input[name="cardinity_card_expiry"],
input[name="cardinity_card_cvc"] {
width: 100% !important;
max-width: 100% !important;
margin: 5px 0 !important;
padding: 12px 10px !important;
font-size: 16px !important;
box-sizing: border-box !important;
}
/* Make sure any floating elements don't interfere */
.woocommerce-checkout *,
.woocommerce-checkout *:before,
.woocommerce-checkout *:after {
box-sizing: border-box !important;
}
/* Clear any floats */
.woocommerce-checkout::after,
.col2-set::after,
.form-row::after {
content: "";
display: table;
clear: both;
}
/* Responsive header adjustment */
.woocommerce-checkout h3 {
font-size: 18px !important;
margin: 15px 0 10px 0 !important;
padding: 0 10px !important;
}
/* Table responsiveness for order review */
.woocommerce-checkout-review-order-table {
width: 100% !important;
font-size: 14px !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
padding: 8px 5px !important;
font-size: 14px !important;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.woocommerce {
padding: 5px !important;
}
.woocommerce-billing-fields,
.woocommerce-checkout-review-order,
.woocommerce-checkout-payment,
#custom_checkout_fields {
padding: 10px 8px !important;
margin: 10px 0 !important;
}
.form-row input,
.form-row select,
.form-row textarea {
padding: 12px 8px !important;
font-size: 16px !important;
}
.form-row label {
font-size: 13px !important;
}
#place_order {
padding: 15px 15px !important;
font-size: 15px !important;
}
}
/* --- Revised WooCommerce Checkout Field Styles - v4 (Grid Fix) --- */
/* Target the main grid container */
body.woocommerce-checkout #customer_details.col2-set {
display: block !important; /* Override display: grid */
width: 100% !important;
}
/* Force the first column (billing details) to take full width */
body.woocommerce-checkout #customer_details.col2-set .col-1 {
width: 100% !important;
max-width: 100% !important;
float: none !important; /* Ensure no floating */
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 20px; /* Add some space before the next section if needed */
}
/* Force the second column (order review/shipping) to also take full width and clear */
body.woocommerce-checkout #customer_details.col2-set .col-2 {
width: 100% !important;
max-width: 100% !important;
float: none !important; /* Ensure no floating */
clear: both !important; /* Ensure it appears below col-1 */
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure form rows within the targeted column take full width */
body.woocommerce-checkout #customer_details .col-1 .form-row {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Keep the input field styling (ensure it's still applied) */
body.woocommerce-checkout form.checkout .form-row#instagram_username_field input.input-text,
body.woocommerce-checkout form.checkout .form-row#billing_email_field input.input-text,
body.woocommerce-checkout form.checkout .form-row#billing_phone_field input.input-text {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
text-align: right !important;
float: none !important;
display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 10px !important;
}
/* Ensure labels are correctly aligned above */
body.woocommerce-checkout form.checkout .form-row label {
text-align: right !important;
display: block !important;
width: 100% !important;
margin-bottom: 8px !important;
float: none !important;
}
/* --- End Revised Styles --- */
/* Important: Clear your browser cache and any WordPress caching plugins after adding this CSS. */