/* ============================================
GLOBAL STYLES & VARIABLES
============================================ */
:root {
--service-primary-blue: #1760bb;
--service-primary-blue-dark: #10509e;
--service-primary-gradient: linear-gradient(135deg, #1760bb 0%, #10509e 100%);
--service-text-dark: #1a202c;
--service-text-gray: #4a5568;
--service-text-light: #718096;
--service-bg-white: #ffffff;
--service-bg-light: #f7fafc;
--service-border-light: #e2e8f0;
--service-shadow-sm: 0 2px 8px rgba(23, 96, 187, 0.08);
--service-shadow-md: 0 8px 24px rgba(23, 96, 187, 0.12);
--service-shadow-lg: 0 16px 48px rgba(23, 96, 187, 0.16);
--service-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes service-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes service-fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: service-fadeInUp 0.8s ease-out both;
}
/* ============================================
ANDROID CUSTOM APPS SECTION
============================================ */
.android-custom-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 140px;
position: relative;
overflow: hidden;
scroll-margin-top: 140px;
}
.android-custom-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.android-custom-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.android-custom-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.android-hero-location {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: service-fadeInDown 0.8s ease-out both;
}
.android-hero-location:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(23, 96, 187, 0.15) 0%, rgba(16, 80, 158, 0.12) 100%);
box-shadow: 0 6px 20px rgba(23, 96, 187, 0.15);
border-color: rgba(23, 96, 187, 0.25);
}
.android-custom-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 2rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
}
.android-custom-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.android-custom-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.android-custom-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.android-custom-image {
width: 100%;
max-width: 550px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.android-custom-image:hover {
transform: translateY(-8px);
box-shadow: 0 25px 70px rgba(23, 96, 187, 0.25);
}
@media (max-width: 991.98px) {
.android-custom-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.android-custom-content {
text-align: center;
}
.android-hero-location {
margin-bottom: 1.25rem;
}
.android-custom-title::after {
left: 50%;
transform: translateX(-50%);
}
.android-custom-image {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 767.98px) {
.android-custom-section {
padding: 80px 0;
padding-top: 120px;
scroll-margin-top: 120px;
}
.android-custom-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.android-hero-location {
font-size: 0.7rem;
padding: 0.55rem 1.25rem;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.android-custom-title {
font-size: clamp(1.75rem, 5vw, 2.25rem);
margin-bottom: 1.5rem;
}
.android-custom-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
margin-top: 2rem;
}
.android-custom-image {
max-width: 100%;
}
}
/* ============================================
ANDROID DEVELOPMENT COMPANY SECTION
============================================ */
.android-company-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.android-company-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 90% 20%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 10% 80%, rgba(23, 96, 187, 0.03) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.android-company-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.android-company-content {
animation: service-fadeInUp 0.8s ease-out both;
text-align: center;
}
.android-company-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
}
.android-company-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.android-company-description {
font-size: clamp(1rem, 1.4vw, 1.1rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-top: 2.5rem;
margin-bottom: 2rem;
text-align: left;
}
.android-company-description p {
margin-bottom: 1.5rem;
}
.android-company-description p:last-child {
margin-bottom: 0;
}
/* ============================================
ANDROID FEATURES SECTION
============================================ */
.android-features-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.android-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.android-features-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.android-features-header {
text-align: center;
margin-bottom: 4rem;
}
.android-features-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.android-features-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.android-features-subtitle {
font-size: clamp(1.15rem, 2vw, 1.35rem);
font-weight: 600;
color: var(--service-text-gray);
margin-top: 1.5rem;
}
.android-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.android-feature-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.android-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--service-primary-gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.android-feature-card:hover::before {
transform: scaleX(1);
}
.android-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.android-feature-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1rem;
line-height: 1.4;
letter-spacing: -0.3px;
}
.android-feature-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
@media (max-width: 991.98px) {
.android-company-wrapper {
max-width: 900px;
}
.android-features-grid {
gap: 1.75rem;
}
.android-feature-card {
padding: 2rem 1.75rem;
}
}
@media (max-width: 767.98px) {
.android-company-section {
padding: 80px 0;
}
.android-company-wrapper {
padding: 0 1.5rem;
}
.android-company-title {
font-size: clamp(1.75rem, 5vw, 2.25rem);
margin-bottom: 1.5rem;
}
.android-company-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
margin-top: 2rem;
}
.android-features-section {
padding: 80px 0;
}
.android-features-wrapper {
padding: 0 1.5rem;
}
.android-features-header {
margin-bottom: 3rem;
}
.android-features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.android-feature-card {
padding: 2rem 1.5rem;
}
}
/* ============================================
ANDROID SHORT SUMMARY SECTION
============================================ */
.android-summary-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.android-summary-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.android-summary-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
text-align: center;
}
.android-summary-text {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
color: var(--service-text-gray);
line-height: 1.9;
margin: 0;
font-weight: 500;
animation: service-fadeInUp 0.8s ease-out both;
}
/* ============================================
ANDROID CTA SECTION
============================================ */
.android-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.android-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.android-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
}
.android-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
animation: service-fadeInUp 0.8s ease-out both;
transition: all 0.3s ease;
}
.android-cta-icon-wrapper:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.android-cta-icon {
font-size: 2.5rem;
color: #ffffff;
transition: all 0.3s ease;
}
.android-cta-content {
flex: 1;
text-align: left;
}
.android-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
animation: service-fadeInUp 0.8s ease-out 0.2s both;
text-transform: uppercase;
}
.android-cta-subtitle {
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.6;
animation: service-fadeInUp 0.8s ease-out 0.3s both;
}
.android-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
white-space: nowrap;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.android-cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(23, 96, 187, 0.12), transparent);
transition: left 0.6s ease;
}
.android-cta-button:hover::before {
left: 100%;
}
.android-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
text-decoration: none;
color: var(--service-primary-blue);
}
.android-cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.android-cta-button:hover i {
transform: translateX(5px);
}
@media (max-width: 991.98px) {
.android-cta-wrapper {
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
}
.android-cta-icon-wrapper {
margin: 0 auto;
}
.android-cta-content {
text-align: center;
}
.android-cta-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.android-summary-section {
padding: 60px 0;
}
.android-summary-wrapper {
padding: 0 1.5rem;
}
.android-cta-section {
padding: 80px 0;
}
.android-cta-wrapper {
padding: 0 1.5rem;
gap: 2rem;
}
.android-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.android-cta-icon {
font-size: 2rem;
}
.android-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
margin-bottom: 0.5rem;
}
.android-cta-subtitle {
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.android-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
}
/* ============================================
IPHONE CUSTOM APPS SECTION
============================================ */
.iphone-custom-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
scroll-margin-top: 160px;
}
.iphone-custom-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.iphone-custom-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.iphone-custom-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.iphone-hero-location {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation: service-fadeInDown 0.8s ease-out both;
}
.iphone-hero-location:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(23, 96, 187, 0.15) 0%, rgba(16, 80, 158, 0.12) 100%);
box-shadow: 0 6px 20px rgba(23, 96, 187, 0.15);
border-color: rgba(23, 96, 187, 0.25);
}
.iphone-custom-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 2rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
}
.iphone-custom-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.iphone-custom-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.iphone-custom-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.iphone-custom-image {
width: 100%;
max-width: 550px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.iphone-custom-image:hover {
transform: translateY(-8px);
box-shadow: 0 25px 70px rgba(23, 96, 187, 0.25);
}
/* ============================================
IPHONE COMPANY SECTION
============================================ */
.iphone-company-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.iphone-company-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 90% 20%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 10% 80%, rgba(23, 96, 187, 0.03) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.iphone-company-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.iphone-company-content {
animation: service-fadeInUp 0.8s ease-out both;
text-align: center;
}
.iphone-company-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
}
.iphone-company-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.iphone-company-description {
font-size: clamp(1rem, 1.4vw, 1.1rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-top: 2.5rem;
margin-bottom: 2rem;
text-align: left;
}
.iphone-company-description p {
margin-bottom: 1.5rem;
}
.iphone-company-description p:last-child {
margin-bottom: 0;
}
.iphone-company-categories {
margin-top: 3rem;
}
.iphone-company-categories-title {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 2rem;
text-align: left;
}
.iphone-company-categories-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.iphone-company-category {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 15px;
border: 1.5px solid #e3edfa;
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.iphone-company-category:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.15);
border-color: var(--service-primary-blue);
}
.iphone-company-category-icon {
font-size: 1.5rem;
color: var(--service-primary-blue);
min-width: 30px;
}
.iphone-company-category-text {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.6;
margin: 0;
}
/* ============================================
IPHONE SUMMARY SECTION
============================================ */
.iphone-summary-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.iphone-summary-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.iphone-summary-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
text-align: center;
}
.iphone-summary-text {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
color: var(--service-text-gray);
line-height: 1.9;
margin: 0;
font-weight: 500;
animation: service-fadeInUp 0.8s ease-out both;
}
/* ============================================
IPHONE CTA SECTION
============================================ */
.iphone-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.iphone-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 1;
}
.iphone-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
}
.iphone-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
animation: service-fadeInUp 0.8s ease-out both;
transition: all 0.3s ease;
}
.iphone-cta-icon-wrapper:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.iphone-cta-icon {
font-size: 2.5rem;
color: #ffffff;
transition: all 0.3s ease;
}
.iphone-cta-content {
flex: 1;
text-align: left;
}
.iphone-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
animation: service-fadeInUp 0.8s ease-out 0.2s both;
text-transform: uppercase;
}
.iphone-cta-subtitle {
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.6;
animation: service-fadeInUp 0.8s ease-out 0.3s both;
}
.iphone-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
white-space: nowrap;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.iphone-cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(23, 96, 187, 0.12), transparent);
transition: left 0.6s ease;
}
.iphone-cta-button:hover::before {
left: 100%;
}
.iphone-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
text-decoration: none;
color: var(--service-primary-blue);
}
.iphone-cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.iphone-cta-button:hover i {
transform: translateX(5px);
}
@media (max-width: 991.98px) {
.iphone-custom-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.iphone-custom-content {
text-align: center;
}
.iphone-hero-location {
margin-bottom: 1.25rem;
}
.iphone-custom-title::after {
left: 50%;
transform: translateX(-50%);
}
.iphone-custom-image {
max-width: 450px;
margin: 0 auto;
}
.iphone-company-wrapper {
max-width: 900px;
}
.iphone-company-categories-list {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.iphone-cta-wrapper {
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
}
.iphone-cta-icon-wrapper {
margin: 0 auto;
}
.iphone-cta-content {
text-align: center;
}
.iphone-cta-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.iphone-custom-section {
padding: 80px 0;
padding-top: 120px;
scroll-margin-top: 120px;
}
.iphone-custom-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.iphone-hero-location {
font-size: 0.7rem;
padding: 0.55rem 1.25rem;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.iphone-custom-title {
font-size: clamp(1.75rem, 5vw, 2.25rem);
margin-bottom: 1.5rem;
}
.iphone-custom-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
margin-top: 2rem;
}
.iphone-custom-image {
max-width: 100%;
}
.iphone-company-section {
padding: 80px 0;
}
.iphone-company-wrapper {
padding: 0 1.5rem;
}
.iphone-company-title {
font-size: clamp(1.75rem, 5vw, 2.25rem);
margin-bottom: 1.5rem;
}
.iphone-company-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
margin-top: 2rem;
}
.iphone-company-categories-list {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.iphone-company-category {
padding: 1.25rem;
}
.iphone-summary-section {
padding: 60px 0;
}
.iphone-summary-wrapper {
padding: 0 1.5rem;
}
.iphone-cta-section {
padding: 80px 0;
}
.iphone-cta-wrapper {
padding: 0 1.5rem;
gap: 2rem;
}
.iphone-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.iphone-cta-icon {
font-size: 2rem;
}
.iphone-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
margin-bottom: 0.5rem;
}
.iphone-cta-subtitle {
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.iphone-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
}
/* ============================================
ECOMMERCE HERO SECTION
============================================ */
.ecommerce-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.ecommerce-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.ecommerce-hero .hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.ecommerce-hero .hero-content-left {
animation: service-fadeInUp 0.8s ease-out both;
}
.ecommerce-hero .hero-location {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.ecommerce-hero .hero-main-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ecommerce-hero .hero-subtitle {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 600;
color: var(--service-text-gray);
margin-bottom: 1.5rem;
}
.ecommerce-hero .hero-cta-text {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-dark);
font-weight: 600;
margin-bottom: 0.5rem;
}
.ecommerce-hero .hero-sell-text {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}
.ecommerce-hero .hero-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ecommerce-hero .hero-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
.ecommerce-hero .hero-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.ecommerce-hero .hero-image {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
}
@media (max-width: 991.98px) {
.ecommerce-hero .hero-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.ecommerce-hero .hero-content-left {
text-align: center;
}
}
@media (max-width: 767.98px) {
.ecommerce-hero {
padding: 80px 0;
padding-top: 120px;
}
.ecommerce-hero .hero-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
}
/* ============================================
TABBED SECTION (ECOMMERCE)
============================================ */
.tabbed-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.tabbed-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 90% 20%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 10% 80%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.tabbed-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.tabbed-header {
text-align: center;
margin-bottom: 4rem;
}
.tabbed-subtitle {
font-size: clamp(0.875rem, 1.2vw, 1rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.tabbed-main-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.tabbed-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
}
.tabbed-container {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
margin-top: 3rem;
}
.tabbed-sidebar {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.tab-btn {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border: 1.5px solid #e3edfa;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
font-size: clamp(0.9rem, 1.1vw, 1rem);
font-weight: 600;
color: var(--service-text-gray);
}
.tab-btn i {
font-size: 1.25rem;
color: var(--service-primary-blue);
min-width: 24px;
}
.tab-btn:hover {
background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
border-color: var(--service-primary-blue);
transform: translateX(5px);
color: var(--service-text-dark);
}
.tab-btn.active {
background: var(--service-primary-gradient);
border-color: var(--service-primary-blue);
color: #ffffff;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.tab-btn.active i {
color: #ffffff;
}
.tabbed-content-area {
position: relative;
min-height: 400px;
}
.tab-content {
display: none;
animation: service-fadeInUp 0.5s ease-out;
}
.tab-content.active {
display: block;
}
.tab-content-inner {
display: flex;
flex-direction: column;
gap: 3rem;
align-items: stretch;
}
.tab-content-text {
animation: service-fadeInUp 0.6s ease-out;
order: 1;
width: 100%;
}
.tab-content-title {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.tab-content-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.tab-content-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.tab-content-list-item {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
padding-left: 2.5rem;
position: relative;
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.tab-content-list-item:hover {
color: var(--service-text-dark);
transform: translateX(5px);
}
.tab-content-list-item::before {
content: '✓';
position: absolute;
left: 0;
top: 0.15rem;
color: #ffffff;
font-weight: 700;
font-size: 0.875rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--service-primary-gradient);
border-radius: 50%;
font-family: Arial, sans-serif;
box-shadow: 0 2px 8px rgba(23, 96, 187, 0.2);
transition: all 0.3s ease;
}
.tab-content-list-item:hover::before {
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(23, 96, 187, 0.3);
}
.tab-content-image-wrapper {
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.6s ease-out 0.2s both;
order: 2;
width: 100%;
margin-top: 2rem;
}
.tab-content-image {
width: 100%;
max-width: 500px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.15);
}
/* ============================================
FEATURES LIST SECTION (ECOMMERCE)
============================================ */
.features-list-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.features-list-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.features-list-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.features-list-header {
text-align: center;
margin-bottom: 4rem;
}
.features-list-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.features-list-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-item {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2rem 1.5rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.feature-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.feature-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.feature-icon i {
font-size: 1.75rem;
color: #ffffff;
}
.feature-text {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
font-weight: 600;
color: var(--service-text-dark);
line-height: 1.5;
margin: 0;
}
/* ============================================
ECOMMERCE CTA SECTION
============================================ */
.ecommerce-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ecommerce-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
opacity: 1;
}
.ecommerce-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.ecommerce-cta-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
.ecommerce-cta-content {
display: flex;
align-items: center;
gap: 2rem;
}
.ecommerce-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
}
.ecommerce-cta-icon {
font-size: 2.5rem;
color: #ffffff;
}
.ecommerce-cta-text-content {
flex: 1;
}
.ecommerce-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
}
.ecommerce-cta-description {
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.6;
}
.ecommerce-cta-button-wrapper {
display: flex;
align-items: center;
}
.ecommerce-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.ecommerce-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--service-primary-blue);
}
.ecommerce-cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.ecommerce-cta-button:hover i {
transform: translateX(5px);
}
@media (max-width: 991.98px) {
.tabbed-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.tabbed-sidebar {
flex-direction: row;
overflow-x: auto;
padding-bottom: 1rem;
}
.tab-btn {
min-width: 200px;
white-space: nowrap;
}
.tab-content-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.features-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.ecommerce-cta-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.ecommerce-cta-content {
flex-direction: column;
text-align: center;
}
.ecommerce-cta-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.tabbed-section {
padding: 80px 0;
}
.tabbed-wrapper {
padding: 0 1.5rem;
}
.tabbed-header {
margin-bottom: 3rem;
}
.features-list-section {
padding: 80px 0;
}
.features-list-wrapper {
padding: 0 1.5rem;
}
.features-list-header {
margin-bottom: 3rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ecommerce-cta-section {
padding: 80px 0;
}
.ecommerce-cta-wrapper {
padding: 0 1.5rem;
}
.ecommerce-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.ecommerce-cta-icon {
font-size: 2rem;
}
.ecommerce-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
margin-bottom: 0.5rem;
}
.ecommerce-cta-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.ecommerce-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
}
/* ============================================
MOBILE HERO SECTION
============================================ */
.mobile-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.mobile-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.mobile-hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.mobile-hero-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.mobile-hero-location {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.mobile-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 2rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.mobile-hero-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-hero-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
.mobile-hero-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.mobile-hero-image {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
}
@media (max-width: 991.98px) {
.mobile-hero-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.mobile-hero-content {
text-align: center;
}
}
@media (max-width: 767.98px) {
.mobile-hero {
padding: 80px 0;
padding-top: 120px;
}
.mobile-hero-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
}
/* ============================================
WELCOME SECTION (MOBILE)
============================================ */
.welcome-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.welcome-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.welcome-image-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.welcome-image {
width: 100%;
max-width: 500px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.15);
}
.welcome-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.welcome-heading {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 2rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.welcome-text {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
}
/* ============================================
PLATFORMS SECTION (MOBILE)
============================================ */
.platforms-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.platforms-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.platforms-header {
text-align: center;
margin-bottom: 4rem;
}
.platforms-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.platforms-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
}
.platforms-description-bottom {
margin-top: 1.5rem;
}
.platforms-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.platforms-image-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.platforms-image {
width: 100%;
max-width: 500px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.15);
}
.platforms-dev-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.development-content-item {
animation: service-fadeInUp 0.8s ease-out both;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.development-content-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--service-primary-gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.development-content-item:hover::before {
transform: scaleX(1);
}
.development-content-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}
.development-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
padding-left: 3rem;
display: flex;
align-items: center;
gap: 1rem;
}
.development-title {
position: relative;
padding-left: 4rem;
display: flex;
align-items: center;
min-height: 50px;
}
.development-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: var(--service-primary-gradient);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
font-weight: 400;
font-size: 1.5rem;
color: #ffffff;
visibility: visible !important;
opacity: 1 !important;
}
.development-content-item:first-child .development-title::before {
content: '\f17b'; /* Android icon - Font Awesome Brands */
font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', sans-serif;
font-weight: 400;
}
.development-content-item:last-child .development-title::before {
content: '\f179'; /* Apple/iOS icon - Font Awesome Brands */
font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', sans-serif;
font-weight: 400;
}
.development-content-item:hover .development-title::before {
transform: translateY(-50%) scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(23, 96, 187, 0.3);
}
.development-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
margin-top: 1rem;
padding-left: 4rem;
}
/* ============================================
MOBILE APP SECTION
============================================ */
.mobile-app-section {
background: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.mobile-app-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.mobile-app-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
}
.mobile-app-content {
display: flex;
align-items: center;
gap: 2rem;
}
.mobile-app-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.mobile-app-icon {
font-size: 2rem;
color: #ffffff;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif !important;
font-weight: 900 !important;
}
.mobile-app-text-content {
flex: 1;
}
.mobile-app-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.mobile-app-subtitle {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
margin: 0;
line-height: 1.6;
}
.mobile-app-button-wrapper {
display: flex;
align-items: center;
}
.mobile-app-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.mobile-app-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
/* ============================================
COMBINED CONTENT SECTION (MOBILE)
============================================ */
.combined-content-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.combined-content-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.combined-content-text {
animation: service-fadeInUp 0.8s ease-out both;
}
.combined-content-main-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 3rem;
letter-spacing: -0.5px;
line-height: 1.3;
text-align: center;
}
.combined-content-block {
margin-bottom: 3rem;
}
.combined-content-block:last-child {
margin-bottom: 0;
}
.combined-content-subtitle {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.combined-content-paragraph {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.combined-content-paragraph:last-child {
margin-bottom: 0;
}
/* ============================================
IDEAS SECTION (MOBILE)
============================================ */
.ideas-section {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 150px 0;
position: relative;
overflow: hidden;
}
.ideas-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.85) 0%, rgba(16, 80, 158, 0.9) 100%);
opacity: 1;
}
.ideas-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.ideas-content {
text-align: center;
animation: service-fadeInUp 0.8s ease-out both;
}
.ideas-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}
.ideas-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: rgba(255, 255, 255, 0.95);
line-height: 1.8;
margin: 0;
}
/* ============================================
MOBILE CTA SECTION
============================================ */
.mobile-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.mobile-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
opacity: 1;
}
.mobile-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.mobile-cta-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
.mobile-cta-content {
display: flex;
align-items: center;
gap: 2rem;
}
.mobile-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
}
.mobile-cta-icon {
font-size: 2.5rem;
color: #ffffff;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif !important;
font-weight: 900 !important;
}
.mobile-cta-text-content {
flex: 1;
}
.mobile-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
}
.mobile-cta-description {
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.6;
}
.mobile-cta-button-wrapper {
display: flex;
align-items: center;
}
.mobile-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.mobile-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--service-primary-blue);
}
.mobile-cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.mobile-cta-button:hover i {
transform: translateX(5px);
}
@media (max-width: 991.98px) {
.welcome-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.welcome-content {
text-align: center;
}
.platforms-content-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.development-content-item {
padding: 2rem 1.5rem;
}
.development-title {
padding-left: 3.5rem;
font-size: clamp(1.25rem, 3vw, 1.5rem);
}
.development-title::before {
width: 45px;
height: 45px;
font-size: 1.25rem;
}
.development-description {
padding-left: 3.5rem;
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.mobile-app-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.mobile-app-content {
flex-direction: column;
text-align: center;
}
.mobile-cta-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.mobile-cta-content {
flex-direction: column;
text-align: center;
}
.mobile-cta-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.welcome-section {
padding: 80px 0;
}
.welcome-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.platforms-section {
padding: 80px 0;
}
.platforms-wrapper {
padding: 0 1.5rem;
}
.platforms-header {
margin-bottom: 3rem;
}
.mobile-app-section {
padding: 60px 0;
}
.mobile-app-wrapper {
padding: 0 1.5rem;
}
.mobile-app-grid {
padding: 2rem 1.5rem;
}
.combined-content-section {
padding: 80px 0;
}
.combined-content-wrapper {
padding: 0 1.5rem;
}
.ideas-section {
padding: 100px 0;
}
.ideas-wrapper {
padding: 0 1.5rem;
}
.mobile-cta-section {
padding: 80px 0;
}
.mobile-cta-wrapper {
padding: 0 1.5rem;
}
.mobile-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.mobile-cta-icon {
font-size: 2rem;
}
.mobile-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
margin-bottom: 0.5rem;
}
.mobile-cta-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.mobile-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
}
/* ============================================
PPC HERO SECTION
============================================ */
.ppc-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.ppc-hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.ppc-hero-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.ppc-hero-badge {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.ppc-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ppc-hero-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.ppc-hero-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.ppc-hero-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
}
.ppc-hero-feature i {
color: var(--service-primary-blue);
font-size: 1.25rem;
min-width: 24px;
margin-top: 0.25rem;
}
.ppc-hero-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.ppc-hero-image {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
}
/* ============================================
PPC QUOTE SECTION
============================================ */
.ppc-quote-section {
background: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.ppc-quote-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
}
.ppc-quote-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 20px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.ppc-quote-icon {
font-size: 2.5rem;
color: #ffffff;
}
.ppc-quote-content {
flex: 1;
}
.ppc-quote-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin: 0;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ppc-quote-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.ppc-quote-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
/* ============================================
PPC PHASES SECTION
============================================ */
.ppc-phases-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ppc-phases-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.ppc-phases-header {
text-align: center;
margin-bottom: 4rem;
}
.ppc-phases-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ppc-phases-intro {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
}
.ppc-phases-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.ppc-phase-card {
background: #ffffff;
border-radius: 20px;
padding: 3rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ppc-phase-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.ppc-phase-number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: var(--service-primary-gradient);
border-radius: 20px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
color: #ffffff;
text-align: center;
}
.ppc-phase-number-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.25rem;
}
.ppc-phase-number-digit {
font-size: 2.5rem;
font-weight: 900;
line-height: 1;
}
.ppc-phase-content {
flex: 1;
}
.ppc-phase-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ppc-phase-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.ppc-phase-points {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ppc-phase-point {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.ppc-phase-point-icon {
font-size: 1.25rem;
color: var(--service-primary-blue);
min-width: 24px;
margin-top: 0.25rem;
}
.ppc-phase-point-title {
font-size: clamp(1rem, 1.3vw, 1.1rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
}
.ppc-phase-point-text {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
@media (max-width: 991.98px) {
.ppc-hero-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.ppc-hero-content {
text-align: center;
}
.ppc-quote-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.ppc-quote-icon-wrapper {
margin: 0 auto;
}
.ppc-quote-button {
width: 100%;
justify-content: center;
}
.ppc-phase-card {
grid-template-columns: 1fr;
gap: 2rem;
}
.ppc-phase-number {
margin: 0 auto;
}
}
@media (max-width: 767.98px) {
.ppc-hero {
padding: 80px 0;
padding-top: 120px;
}
.ppc-hero-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.ppc-quote-section {
padding: 60px 0;
}
.ppc-quote-wrapper {
padding: 2rem 1.5rem;
}
.ppc-phases-section {
padding: 80px 0;
}
.ppc-phases-wrapper {
padding: 0 1.5rem;
}
.ppc-phases-header {
margin-bottom: 3rem;
}
.ppc-phase-card {
padding: 2rem 1.5rem;
}
.ppc-phase-number {
width: 80px;
height: 80px;
}
.ppc-phase-number-digit {
font-size: 2rem;
}
}
/* ============================================
PPC KEYS SECTION
============================================ */
.ppc-keys-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ppc-keys-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.ppc-keys-header {
text-align: center;
margin-bottom: 4rem;
}
.ppc-keys-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ppc-keys-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.ppc-key-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.ppc-key-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.ppc-key-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.ppc-key-icon i {
font-size: 2rem;
color: #ffffff;
}
.ppc-key-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1rem;
line-height: 1.4;
}
.ppc-key-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
PPC TARGETING SECTION
============================================ */
.ppc-targeting-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ppc-targeting-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.ppc-targeting-header {
text-align: center;
margin-bottom: 4rem;
}
.ppc-targeting-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.ppc-targeting-intro {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
}
.ppc-targeting-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.ppc-targeting-item {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
display: flex;
align-items: flex-start;
gap: 1.5rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ppc-targeting-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.ppc-targeting-icon {
width: 60px;
height: 60px;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.ppc-targeting-icon i {
font-size: 1.75rem;
color: #ffffff;
}
.ppc-targeting-content {
flex: 1;
}
.ppc-targeting-item-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 0.75rem;
line-height: 1.4;
}
.ppc-targeting-item-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
PPC FINAL CTA SECTION
============================================ */
.ppc-final-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ppc-final-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
opacity: 1;
}
.ppc-final-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
}
.ppc-final-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
}
.ppc-final-cta-icon {
font-size: 2.5rem;
color: #ffffff;
}
.ppc-final-cta-content {
flex: 1;
text-align: left;
}
.ppc-final-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin: 0;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}
.ppc-final-cta-title .highlight {
color: rgba(255, 255, 255, 0.95);
font-style: italic;
}
.ppc-final-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.ppc-final-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--service-primary-blue);
}
@media (max-width: 991.98px) {
.ppc-keys-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ppc-targeting-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ppc-final-cta-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.ppc-final-cta-icon-wrapper {
margin: 0 auto;
}
.ppc-final-cta-content {
text-align: center;
}
.ppc-final-cta-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.ppc-keys-section {
padding: 80px 0;
}
.ppc-keys-wrapper {
padding: 0 1.5rem;
}
.ppc-keys-header {
margin-bottom: 3rem;
}
.ppc-targeting-section {
padding: 80px 0;
}
.ppc-targeting-wrapper {
padding: 0 1.5rem;
}
.ppc-targeting-header {
margin-bottom: 3rem;
}
.ppc-final-cta-section {
padding: 80px 0;
}
.ppc-final-cta-wrapper {
padding: 0 1.5rem;
gap: 2rem;
}
.ppc-final-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.ppc-final-cta-icon {
font-size: 2rem;
}
.ppc-final-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
}
.ppc-final-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
}
/* ============================================
SEO HERO SECTION
============================================ */
.seo-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.seo-hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.seo-hero-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.seo-hero-badge {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.seo-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.seo-hero-tagline {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 600;
color: var(--service-primary-blue);
margin-bottom: 0.5rem;
font-style: italic;
}
.seo-hero-subtitle {
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 600;
color: var(--service-text-gray);
margin-bottom: 2rem;
}
.seo-hero-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.seo-hero-description p {
margin-bottom: 1rem;
}
.seo-hero-description p:last-child {
margin-bottom: 0;
}
.seo-hero-image-wrapper {
position: sticky;
top: 160px;
}
.seo-hero-inquiry-form {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
border: 1.5px solid #e3edfa;
}
.seo-hero-inquiry-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.seo-hero-inquiry-title i {
color: var(--service-primary-blue);
font-size: 1.5rem;
}
.seo-hero-inquiry-desc {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}
.seo-hero-form-group {
margin-bottom: 1.5rem;
}
.seo-hero-form-group label {
font-size: clamp(0.9rem, 1.1vw, 1rem);
font-weight: 600;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
display: block;
}
.seo-hero-form-group .form-control,
.seo-hero-form-group .form-select {
width: 100%;
padding: 0.875rem 1.25rem;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
border: 1.5px solid #e3edfa;
border-radius: 10px;
transition: all 0.3s ease;
background: #ffffff;
color: var(--service-text-dark);
}
.seo-hero-form-group .form-control:focus,
.seo-hero-form-group .form-select:focus {
outline: none;
border-color: var(--service-primary-blue);
box-shadow: 0 0 0 3px rgba(23, 96, 187, 0.1);
}
.seo-hero-form-btn {
width: 100%;
padding: 1rem 2rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
border: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
}
.seo-hero-form-btn:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
}
/* ============================================
SMM HERO SECTION
============================================ */
.smm-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.smm-hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.smm-hero-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.smm-hero-badge {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.smm-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.smm-hero-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
}
.smm-hero-description p {
margin-bottom: 1rem;
}
.smm-hero-description p:last-child {
margin-bottom: 0;
}
.smm-hero-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.smm-hero-image {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
}
/* ============================================
SMM QUOTE SECTION
============================================ */
.smm-quote-section {
background: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.smm-quote-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
}
.smm-quote-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 20px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.smm-quote-icon {
font-size: 2.5rem;
color: #ffffff;
}
.smm-quote-content {
flex: 1;
}
.smm-quote-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin: 0;
letter-spacing: -0.5px;
line-height: 1.3;
}
.smm-quote-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.smm-quote-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
@media (max-width: 991.98px) {
.seo-hero-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.seo-hero-content {
text-align: center;
}
.seo-hero-image-wrapper {
position: static;
}
.smm-hero-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.smm-hero-content {
text-align: center;
}
.smm-quote-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.smm-quote-icon-wrapper {
margin: 0 auto;
}
.smm-quote-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.seo-hero {
padding: 80px 0;
padding-top: 120px;
}
.seo-hero-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.seo-hero-inquiry-form {
padding: 2rem 1.5rem;
}
.smm-hero {
padding: 80px 0;
padding-top: 120px;
}
.smm-hero-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.smm-quote-section {
padding: 60px 0;
}
.smm-quote-wrapper {
padding: 2rem 1.5rem;
}
}
/* ============================================
WEBDESIGN HERO SECTION
============================================ */
.webdesign-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.webdesign-hero .hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.webdesign-hero .hero-left {
animation: service-fadeInUp 0.8s ease-out both;
}
.webdesign-hero .hero-location {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.webdesign-hero .hero-title {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.2;
}
.webdesign-hero .hero-title span {
color: var(--service-primary-blue);
}
.webdesign-hero .hero-tagline {
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 600;
color: var(--service-text-gray);
margin-bottom: 1.5rem;
font-style: italic;
}
.webdesign-hero .hero-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.webdesign-hero .hero-features-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.webdesign-hero .hero-feature-item {
padding: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 15px;
border: 1.5px solid #e3edfa;
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.08);
transition: all 0.3s ease;
}
.webdesign-hero .hero-feature-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.15);
border-color: var(--service-primary-blue);
}
.webdesign-hero .hero-feature-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
}
.webdesign-hero .hero-feature-desc {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
.webdesign-hero .hero-express-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-primary-blue);
margin-top: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.webdesign-hero .hero-right {
position: sticky;
top: 160px;
}
.webdesign-hero .hero-inquiry-form {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
border: 1.5px solid #e3edfa;
}
.webdesign-hero .hero-inquiry-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 2rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.webdesign-hero .hero-form-row {
margin-bottom: 1.5rem;
}
.webdesign-hero .hero-form-label {
font-size: clamp(0.9rem, 1.1vw, 1rem);
font-weight: 600;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
display: block;
}
.webdesign-hero .hero-form-input,
.webdesign-hero .hero-form-select {
width: 100%;
padding: 0.875rem 1.25rem;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
border: 1.5px solid #e3edfa;
border-radius: 10px;
transition: all 0.3s ease;
background: #ffffff;
color: var(--service-text-dark);
font-family: inherit;
}
.webdesign-hero .hero-form-input:focus,
.webdesign-hero .hero-form-select:focus {
outline: none;
border-color: var(--service-primary-blue);
box-shadow: 0 0 0 3px rgba(23, 96, 187, 0.1);
}
.webdesign-hero .hero-select-wrapper {
position: relative;
}
.webdesign-hero .hero-select-arrow {
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--service-text-gray);
font-size: 0.875rem;
}
.webdesign-hero .hero-submit-button {
width: 100%;
padding: 1rem 2rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
border: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
}
.webdesign-hero .hero-submit-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
}
/* ============================================
WEBDEV HERO SECTION
============================================ */
.webdev-hero {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.webdev-hero .hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.webdev-hero .hero-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.webdev-hero .hero-main-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.webdev-hero .hero-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.webdev-hero .hero-technologies-intro {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
}
.webdev-hero .hero-tech-category {
margin-bottom: 2rem;
}
.webdev-hero .hero-sub-title {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 900;
color: var(--service-primary-blue);
margin-bottom: 1rem;
}
.webdev-hero .hero-tech-tags {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.webdev-hero .hero-tech-tag {
display: inline-block;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border: 1.5px solid #e3edfa;
border-radius: 50px;
font-size: clamp(0.9rem, 1.1vw, 1rem);
font-weight: 600;
color: var(--service-text-dark);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.08);
transition: all 0.3s ease;
}
.webdev-hero .hero-tech-tag:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.15);
border-color: var(--service-primary-blue);
}
.webdev-hero .hero-tech-content {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
}
/* ============================================
CAPABILITIES HEADER SECTION (WEBDEV)
============================================ */
.capabilities-header-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.capabilities-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.capabilities-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.capabilities-content .hero-location {
font-size: clamp(0.75rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--service-primary-blue);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.5rem;
display: inline-block;
padding: 0.65rem 1.5rem;
background: linear-gradient(135deg, rgba(23, 96, 187, 0.1) 0%, rgba(16, 80, 158, 0.08) 100%);
border-radius: 50px;
border: 1.5px solid rgba(23, 96, 187, 0.15);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(23, 96, 187, 0.1);
}
.capabilities-main-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.capabilities-subtitle {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
}
.capabilities-image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: service-fadeInUp 0.8s ease-out 0.2s both;
}
.capabilities-image {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
}
/* ============================================
WEBSITE CTA SECTION (SHARED)
============================================ */
.website-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.website-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
opacity: 1;
}
.website-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.website-cta-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
.website-cta-content {
display: flex;
align-items: center;
gap: 2rem;
}
.website-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
}
.website-cta-icon {
font-size: 2.5rem;
color: #ffffff;
}
.website-cta-text-content {
flex: 1;
}
.website-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
}
.website-cta-description {
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.6;
}
.website-cta-button-wrapper {
display: flex;
align-items: center;
}
.website-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.website-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--service-primary-blue);
}
.website-cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.website-cta-button:hover i {
transform: translateX(5px);
}
/* ============================================
SERVICES INDEX HERO SECTION
============================================ */
.services-hero-bg {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
padding-top: 160px;
position: relative;
overflow: hidden;
}
.services-hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 30%, rgba(23, 96, 187, 0.04) 0%, transparent 50%),
radial-gradient(circle at 90% 70%, rgba(23, 96, 187, 0.03) 0%, transparent 50%);
opacity: 1;
}
.services-hero-wrapper {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.services-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.services-lead {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.hero-ecommerce-promo {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
margin-top: 2rem;
}
.hero-ecommerce-title {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 0.75rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.hero-ecommerce-desc {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.hero-ecommerce-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2.5rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-ecommerce-btn:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
.inquiry-form-card {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
border: 1.5px solid #e3edfa;
position: sticky;
top: 160px;
}
.inquiry-form-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.inquiry-form-title i {
color: var(--service-primary-blue);
font-size: 1.5rem;
}
.inquiry-form-desc {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}
.inquiry-form-group {
margin-bottom: 1.5rem;
}
.inquiry-form-group label {
font-size: clamp(0.9rem, 1.1vw, 1rem);
font-weight: 600;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
display: block;
}
.inquiry-form-group .form-control,
.inquiry-form-group .form-select {
width: 100%;
padding: 0.875rem 1.25rem;
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
border: 1.5px solid #e3edfa;
border-radius: 10px;
transition: all 0.3s ease;
background: #ffffff;
color: var(--service-text-dark);
}
.inquiry-form-group .form-control:focus,
.inquiry-form-group .form-select:focus {
outline: none;
border-color: var(--service-primary-blue);
box-shadow: 0 0 0 3px rgba(23, 96, 187, 0.1);
}
.inquiry-form-btn {
width: 100%;
padding: 1rem 2rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
border: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
}
.inquiry-form-btn:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
}
/* ============================================
SERVICES LISTING SECTION
============================================ */
.services-container {
max-width: 1400px;
margin: 0 auto;
padding: 100px 2rem;
position: relative;
z-index: 2;
}
.services-listing {
position: relative;
z-index: 2;
}
.service-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.service-icon {
width: 70px;
height: 70px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.service-icon i {
font-size: 2rem;
color: #ffffff;
}
.service-title {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
text-transform: uppercase;
}
.service-desc {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin-bottom: 2rem;
flex: 1;
}
.service-card-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 2rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: auto;
}
.service-card-btn:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(23, 96, 187, 0.3);
text-decoration: none;
color: #ffffff;
}
.service-card-btn i {
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.service-card-btn:hover i {
transform: translateX(5px);
}
.service-contact-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: var(--service-primary-gradient);
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(23, 96, 187, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.service-contact-btn:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(23, 96, 187, 0.35);
text-decoration: none;
color: #ffffff;
}
@media (max-width: 991.98px) {
.webdesign-hero .hero-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.webdesign-hero .hero-left {
text-align: center;
}
.webdesign-hero .hero-right {
position: static;
}
.capabilities-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.capabilities-content {
text-align: center;
}
.website-cta-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.website-cta-content {
flex-direction: column;
text-align: center;
}
.website-cta-button {
width: 100%;
justify-content: center;
}
.services-hero-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
.inquiry-form-card {
position: static;
}
}
@media (max-width: 767.98px) {
.webdesign-hero {
padding: 80px 0;
padding-top: 120px;
}
.webdesign-hero .hero-content {
padding: 0 1.5rem;
gap: 2.5rem;
}
.webdesign-hero .hero-inquiry-form {
padding: 2rem 1.5rem;
}
.webdev-hero {
padding: 80px 0;
padding-top: 120px;
}
.webdev-hero .hero-wrapper {
padding: 0 1.5rem;
}
.capabilities-header-section {
padding: 80px 0;
padding-top: 120px;
}
.capabilities-wrapper {
padding: 0 1.5rem;
gap: 2.5rem;
}
.website-cta-section {
padding: 80px 0;
}
.website-cta-wrapper {
padding: 0 1.5rem;
}
.website-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.website-cta-icon {
font-size: 2rem;
}
.website-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
margin-bottom: 0.5rem;
}
.website-cta-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.website-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
.services-hero-bg {
padding: 80px 0;
padding-top: 120px;
}
.services-container {
padding: 80px 1.5rem;
}
.service-card {
padding: 2rem 1.5rem;
}
}
/* ============================================
STUDIO SECTION (WEBDESIGN)
============================================ */
.studio-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.studio-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.studio-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.studio-image-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.studio-image {
width: 100%;
max-width: 500px;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.15);
}
.studio-content {
animation: service-fadeInUp 0.8s ease-out both;
}
.studio-heading {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 2rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.studio-description-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.studio-description-item {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
padding-left: 2rem;
position: relative;
}
.studio-description-item::before {
content: '✓';
position: absolute;
left: 0;
color: var(--service-primary-blue);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.8;
}
/* ============================================
QUALITY SECTION (WEBDESIGN)
============================================ */
.quality-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.quality-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.quality-section-header {
text-align: center;
margin-bottom: 4rem;
}
.quality-section-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.quality-section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.quality-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.quality-service-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.quality-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.quality-icon-container {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.quality-service-icon {
font-size: 2rem;
color: #ffffff;
}
.quality-service-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1rem;
line-height: 1.4;
}
.quality-service-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
CREATIVE SERVICES SECTION (WEBDESIGN)
============================================ */
.creative-services-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.creative-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.section-heading {
text-align: center;
margin-bottom: 4rem;
}
.section-main-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.section-main-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.creative-tabs-container {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
margin-top: 3rem;
}
.creative-tabs-sidebar {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.creative-tab-btn {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border: 1.5px solid #e3edfa;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
font-size: clamp(0.9rem, 1.1vw, 1rem);
font-weight: 600;
color: var(--service-text-gray);
}
.creative-tab-btn i {
font-size: 1.25rem;
color: var(--service-primary-blue);
min-width: 24px;
}
.creative-tab-btn:hover {
background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
border-color: var(--service-primary-blue);
transform: translateX(5px);
color: var(--service-text-dark);
}
.creative-tab-btn.active {
background: var(--service-primary-gradient);
border-color: var(--service-primary-blue);
color: #ffffff;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.creative-tab-btn.active i {
color: #ffffff;
}
.creative-tabs-content {
position: relative;
min-height: 400px;
}
.creative-tab-content {
display: none;
animation: service-fadeInUp 0.5s ease-out;
text-align: left;
padding: 2rem;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
border-radius: 20px;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
}
.creative-tab-content.active {
display: block;
}
.creative-content-icon {
width: 80px;
height: 80px;
margin: 0 0 2rem 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 20px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.creative-content-icon i {
font-size: 2.5rem;
color: #ffffff;
}
.creative-content-title {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
line-height: 1.3;
text-align: left;
}
.creative-content-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
max-width: 800px;
text-align: left;
}
@media (max-width: 991.98px) {
.studio-content-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.studio-content {
text-align: center;
}
.quality-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.creative-tabs-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.creative-tabs-sidebar {
flex-direction: row;
overflow-x: auto;
padding-bottom: 1rem;
}
.creative-tab-btn {
min-width: 200px;
white-space: nowrap;
}
}
@media (max-width: 767.98px) {
.studio-section {
padding: 80px 0;
}
.studio-wrapper {
padding: 0 1.5rem;
}
.studio-content-grid {
gap: 2.5rem;
}
.quality-section {
padding: 80px 0;
}
.quality-wrapper {
padding: 0 1.5rem;
}
.quality-section-header {
margin-bottom: 3rem;
}
.quality-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.creative-services-section {
padding: 80px 0;
}
.creative-wrapper {
padding: 0 1.5rem;
}
.section-heading {
margin-bottom: 3rem;
}
.creative-tab-content {
text-align: center;
}
.creative-content-icon {
margin: 0 auto 2rem;
}
.creative-content-title {
text-align: center;
}
.creative-content-description {
text-align: center;
}
}
/* ============================================
SEO STRENGTHS SECTION
============================================ */
.seo-strengths-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.seo-strengths-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.seo-strengths-header {
text-align: center;
margin-bottom: 4rem;
}
.seo-strengths-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.seo-strengths-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.seo-strengths-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.seo-strength-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.seo-strength-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.seo-strength-icon-wrapper {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.seo-strength-icon {
font-size: 2rem;
color: #ffffff;
}
.seo-strength-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1rem;
line-height: 1.4;
}
.seo-strength-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
SEO EFFICACIES SECTION
============================================ */
.seo-efficacies-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.seo-efficacies-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.seo-efficacies-header {
text-align: center;
margin-bottom: 4rem;
}
.seo-efficacies-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.seo-efficacies-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.seo-efficacies-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.seo-efficacy-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.seo-efficacy-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.seo-efficacy-icon-wrapper {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.seo-efficacy-icon {
font-size: 2rem;
color: #ffffff;
}
.seo-efficacy-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1rem;
line-height: 1.4;
}
.seo-efficacy-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
SEO CASE STUDIES SECTION
============================================ */
.seo-case-studies-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.seo-case-studies-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.seo-case-studies-header {
text-align: center;
margin-bottom: 4rem;
}
.seo-case-studies-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.seo-case-studies-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.seo-case-studies-intro {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
max-width: 900px;
margin: 1.5rem auto 0;
}
.seo-case-studies-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.seo-case-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
overflow: hidden;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.seo-case-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.seo-case-image-wrapper {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
}
.seo-case-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.seo-case-card:hover .seo-case-image {
transform: scale(1.1);
}
.seo-case-content {
padding: 2rem;
}
.seo-case-title {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.seo-case-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.seo-case-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: clamp(0.85rem, 1vw, 0.95rem);
color: var(--service-text-gray);
}
.seo-case-meta-item i {
color: var(--service-primary-blue);
font-size: 1rem;
}
.seo-case-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.seo-case-stats {
display: flex;
gap: 1.5rem;
padding-top: 1.5rem;
border-top: 1.5px solid #e3edfa;
}
.seo-case-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.seo-case-stat-value {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 900;
color: var(--service-primary-blue);
line-height: 1;
}
.seo-case-stat-label {
font-size: clamp(0.85rem, 1vw, 0.95rem);
color: var(--service-text-gray);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
SEO PROCESS SECTION
============================================ */
.seo-process-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.seo-process-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.seo-process-header {
text-align: center;
margin-bottom: 4rem;
}
.seo-process-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.seo-process-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.seo-process-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.seo-process-item {
display: flex;
align-items: flex-start;
gap: 2rem;
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.seo-process-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.seo-process-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.seo-process-icon {
font-size: 2rem;
color: #ffffff;
}
.seo-process-content {
flex: 1;
}
.seo-process-text {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin: 0;
}
/* ============================================
SEO AFTERMATH SECTION
============================================ */
.seo-aftermath-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.seo-aftermath-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.seo-aftermath-header {
text-align: center;
margin-bottom: 4rem;
}
.seo-aftermath-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.seo-aftermath-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.seo-aftermath-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.seo-aftermath-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.seo-aftermath-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.seo-aftermath-icon-wrapper {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.seo-aftermath-icon {
font-size: 2rem;
color: #ffffff;
}
.seo-aftermath-text {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
font-weight: 600;
color: var(--service-text-dark);
line-height: 1.7;
margin: 0;
}
/* ============================================
SEO CTA SECTION
============================================ */
.seo-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.seo-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
opacity: 1;
}
.seo-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
}
.seo-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
}
.seo-cta-icon {
font-size: 2.5rem;
color: #ffffff;
}
.seo-cta-content {
flex: 1;
text-align: left;
}
.seo-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin-bottom: 0.75rem;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}
.seo-cta-description {
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
line-height: 1.6;
}
.seo-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.seo-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--service-primary-blue);
}
.seo-cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.seo-cta-button:hover i {
transform: translateX(5px);
}
/* ============================================
SMM PHASES SECTION
============================================ */
.smm-phases-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.smm-phases-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.smm-phases-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.smm-phase-card {
background: #ffffff;
border-radius: 20px;
padding: 3rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.smm-phase-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.smm-phase-number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: var(--service-primary-gradient);
border-radius: 20px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
color: #ffffff;
text-align: center;
}
.smm-phase-number-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.25rem;
}
.smm-phase-number-digit {
font-size: 2.5rem;
font-weight: 900;
line-height: 1;
}
.smm-phase-content {
flex: 1;
}
.smm-phase-title {
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
}
.smm-phase-description {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
margin-bottom: 2rem;
}
.smm-phase-points {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.smm-phase-point {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.smm-phase-point-icon {
font-size: 1.25rem;
color: var(--service-primary-blue);
min-width: 24px;
margin-top: 0.25rem;
}
.smm-phase-point-title {
font-size: clamp(1rem, 1.3vw, 1.1rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 0.5rem;
}
.smm-phase-point-text {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
SMM FEATURES SECTION
============================================ */
.smm-features-section {
background: #ffffff;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.smm-features-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.smm-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.smm-feature-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2.5rem 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.smm-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.smm-feature-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.smm-feature-icon i {
font-size: 2rem;
color: #ffffff;
}
.smm-feature-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 1rem;
line-height: 1.4;
}
.smm-feature-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
SMM INTEGRATION SECTION
============================================ */
.smm-integration-section {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.smm-integration-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.smm-integration-header {
text-align: center;
margin-bottom: 4rem;
}
.smm-integration-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
color: var(--service-text-dark);
margin-bottom: 1rem;
letter-spacing: -0.5px;
line-height: 1.3;
position: relative;
display: inline-block;
}
.smm-integration-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--service-primary-gradient);
border-radius: 2px;
}
.smm-integration-intro {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--service-text-gray);
line-height: 1.8;
max-width: 900px;
margin: 1.5rem auto 0;
}
.smm-integration-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.smm-integration-item {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 2rem;
border: 1.5px solid #e3edfa;
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
display: flex;
align-items: flex-start;
gap: 1.5rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.smm-integration-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
border-color: var(--service-primary-blue);
}
.smm-integration-icon {
width: 60px;
height: 60px;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--service-primary-gradient);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
}
.smm-integration-icon i {
font-size: 1.75rem;
color: #ffffff;
}
.smm-integration-content {
flex: 1;
}
.smm-integration-item-title {
font-size: clamp(1.15rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--service-text-dark);
margin-bottom: 0.75rem;
line-height: 1.4;
}
.smm-integration-item-description {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
color: var(--service-text-gray);
line-height: 1.7;
margin: 0;
}
/* ============================================
SMM FINAL CTA SECTION
============================================ */
.smm-final-cta-section {
background: var(--service-primary-gradient);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.smm-final-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
opacity: 1;
}
.smm-final-cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 3rem;
align-items: center;
}
.smm-final-cta-icon-wrapper {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
}
.smm-final-cta-icon {
font-size: 2.5rem;
color: #ffffff;
}
.smm-final-cta-content {
flex: 1;
text-align: left;
}
.smm-final-cta-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 900;
color: #ffffff;
margin: 0;
line-height: 1.3;
letter-spacing: -0.5px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}
.smm-final-cta-title .highlight {
color: rgba(255, 255, 255, 0.95);
font-style: italic;
}
.smm-final-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 3rem;
background: #ffffff;
color: var(--service-primary-blue);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.smm-final-cta-button:hover {
transform: translateY(-4px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--service-primary-blue);
}
@media (max-width: 991.98px) {
.seo-strengths-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.seo-efficacies-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.seo-case-studies-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.seo-aftermath-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.seo-cta-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.seo-cta-icon-wrapper {
margin: 0 auto;
}
.seo-cta-content {
text-align: center;
}
.seo-cta-button {
width: 100%;
justify-content: center;
}
.smm-phase-card {
grid-template-columns: 1fr;
gap: 2rem;
}
.smm-phase-number {
margin: 0 auto;
}
.smm-features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.smm-integration-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.smm-final-cta-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.smm-final-cta-icon-wrapper {
margin: 0 auto;
}
.smm-final-cta-content {
text-align: center;
}
.smm-final-cta-button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.seo-strengths-section {
padding: 80px 0;
}
.seo-strengths-wrapper {
padding: 0 1.5rem;
}
.seo-strengths-header {
margin-bottom: 3rem;
}
.seo-strengths-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.seo-efficacies-section {
padding: 80px 0;
}
.seo-efficacies-wrapper {
padding: 0 1.5rem;
}
.seo-efficacies-header {
margin-bottom: 3rem;
}
.seo-efficacies-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.seo-case-studies-section {
padding: 80px 0;
}
.seo-case-studies-wrapper {
padding: 0 1.5rem;
}
.seo-case-studies-header {
margin-bottom: 3rem;
}
.seo-process-section {
padding: 80px 0;
}
.seo-process-wrapper {
padding: 0 1.5rem;
}
.seo-process-header {
margin-bottom: 3rem;
}
.seo-aftermath-section {
padding: 80px 0;
}
.seo-aftermath-wrapper {
padding: 0 1.5rem;
}
.seo-aftermath-header {
margin-bottom: 3rem;
}
.seo-aftermath-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.seo-cta-section {
padding: 80px 0;
}
.seo-cta-wrapper {
padding: 0 1.5rem;
gap: 2rem;
}
.seo-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.seo-cta-icon {
font-size: 2rem;
}
.seo-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
margin-bottom: 0.5rem;
}
.seo-cta-description {
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.seo-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
.smm-phases-section {
padding: 80px 0;
}
.smm-phases-wrapper {
padding: 0 1.5rem;
}
.smm-phase-card {
padding: 2rem 1.5rem;
}
.smm-phase-number {
width: 80px;
height: 80px;
}
.smm-phase-number-digit {
font-size: 2rem;
}
.smm-features-section {
padding: 80px 0;
}
.smm-features-wrapper {
padding: 0 1.5rem;
}
.smm-integration-section {
padding: 80px 0;
}
.smm-integration-wrapper {
padding: 0 1.5rem;
}
.smm-integration-header {
margin-bottom: 3rem;
}
.smm-final-cta-section {
padding: 80px 0;
}
.smm-final-cta-wrapper {
padding: 0 1.5rem;
gap: 2rem;
}
.smm-final-cta-icon-wrapper {
width: 70px;
height: 70px;
min-width: 70px;
}
.smm-final-cta-icon {
font-size: 2rem;
}
.smm-final-cta-title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
}
.smm-final-cta-button {
padding: 1rem 2.5rem;
font-size: 1rem;
}
}
/* ============================================
GLOBAL IMPROVEMENTS FOR SMOOTH DESIGN
============================================ */
/* Removed - scroll-behavior should be on html, not individual sections */
/* Removed - images should be handled individually, not globally */
/* Smooth transitions for all interactive elements */
.tab-btn,
.service-card,
.feature-item,
.quality-service-card,
.creative-tab-btn,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Removed - was breaking grid layouts */
/* Fix for Bootstrap container conflicts */
.services-container.container {
max-width: 1400px;
margin: 0 auto;
}
/* Ensure proper z-index layering */
.services-hero-bg,
.ecommerce-hero,
.iphone-custom-section,
.mobile-hero,
.ppc-hero,
.seo-hero,
.smm-hero,
.webdesign-hero,
.webdev-hero,
.capabilities-header-section {
position: relative;
z-index: 1;
}
/* Smooth hover effects */
.service-card:hover,
.feature-item:hover,
.quality-service-card:hover,
.creative-tab-btn:hover,
.ppc-phase-card:hover,
.smm-phase-card:hover,
.seo-strength-card:hover,
.seo-efficacy-card:hover,
.seo-case-card:hover,
.smm-feature-card:hover,
.smm-integration-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
}
/* Professional button styles */
.hero-button,
.hero-ecommerce-btn,
.service-card-btn,
.service-contact-btn,
.ecommerce-cta-button,
.mobile-cta-button,
.ppc-quote-button,
.smm-quote-button,
.seo-cta-button,
.website-cta-button,
.iphone-cta-button,
.android-cta-button,
.ppc-final-cta-button,
.smm-final-cta-button {
position: relative;
overflow: hidden;
z-index: 1;
}
.hero-button::before,
.hero-ecommerce-btn::before,
.service-card-btn::before,
.service-contact-btn::before,
.ecommerce-cta-button::before,
.mobile-cta-button::before,
.ppc-quote-button::before,
.smm-quote-button::before,
.seo-cta-button::before,
.website-cta-button::before,
.iphone-cta-button::before,
.android-cta-button::before,
.ppc-final-cta-button::before,
.smm-final-cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
z-index: -1;
}
.hero-button:hover::before,
.hero-ecommerce-btn:hover::before,
.service-card-btn:hover::before,
.service-contact-btn:hover::before,
.ecommerce-cta-button:hover::before,
.mobile-cta-button:hover::before,
.ppc-quote-button:hover::before,
.smm-quote-button:hover::before,
.seo-cta-button:hover::before,
.website-cta-button:hover::before,
.iphone-cta-button:hover::before,
.android-cta-button:hover::before,
.ppc-final-cta-button:hover::before,
.smm-final-cta-button:hover::before {
left: 100%;
}
/* Ensure proper text rendering */
.services-hero-title,
.ecommerce-hero .hero-main-title,
.iphone-custom-title,
.mobile-hero-title,
.ppc-hero-title,
.seo-hero-title,
.smm-hero-title,
.webdesign-hero .hero-title,
.webdev-hero .hero-main-title,
.capabilities-main-title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Professional card shadows */
.service-card,
.feature-item,
.quality-service-card,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item,
.android-feature-card,
.iphone-company-category {
box-shadow: 0 8px 30px rgba(23, 96, 187, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover,
.feature-item:hover,
.quality-service-card:hover,
.ppc-phase-card:hover,
.smm-phase-card:hover,
.seo-strength-card:hover,
.seo-efficacy-card:hover,
.seo-case-card:hover,
.smm-feature-card:hover,
.smm-integration-item:hover,
.android-feature-card:hover,
.iphone-company-category:hover {
box-shadow: 0 15px 50px rgba(23, 96, 187, 0.2);
}
/* Smooth image transitions */
.services-hero-bg img,
.ecommerce-hero .hero-image,
.iphone-custom-image,
.mobile-hero-image,
.ppc-hero-image,
.seo-hero-image,
.smm-hero-image,
.webdesign-hero img,
.webdev-hero img,
.capabilities-image,
.welcome-image,
.platforms-image,
.studio-image {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.services-hero-bg img:hover,
.ecommerce-hero .hero-image:hover,
.iphone-custom-image:hover,
.mobile-hero-image:hover,
.ppc-hero-image:hover,
.seo-hero-image:hover,
.smm-hero-image:hover,
.webdesign-hero img:hover,
.webdev-hero img:hover,
.capabilities-image:hover,
.welcome-image:hover,
.platforms-image:hover,
.studio-image:hover {
transform: scale(1.05);
}
/* Professional form styling */
.inquiry-form-card .form-control,
.inquiry-form-card .form-select,
.seo-hero-inquiry-form .form-control,
.seo-hero-inquiry-form .form-select,
.webdesign-hero .hero-form-input,
.webdesign-hero .hero-form-select {
transition: all 0.3s ease;
border: 1.5px solid #e3edfa;
}
.inquiry-form-card .form-control:focus,
.inquiry-form-card .form-select:focus,
.seo-hero-inquiry-form .form-control:focus,
.seo-hero-inquiry-form .form-select:focus,
.webdesign-hero .hero-form-input:focus,
.webdesign-hero .hero-form-select:focus {
border-color: var(--service-primary-blue);
box-shadow: 0 0 0 3px rgba(23, 96, 187, 0.1);
outline: none;
}
/* Removed - was overriding individual section padding settings */
/* Removed - was overriding individual section styles */
/* Removed - was overriding individual title styles */
/* Removed - was overriding individual description styles */
/* Removed - was overriding individual section responsive styles */
/* Print styles - hide unnecessary elements */
@media print {
.hero-button,
.service-card-btn,
.service-contact-btn,
.ecommerce-cta-button,
.mobile-cta-button,
.ppc-quote-button,
.smm-quote-button,
.seo-cta-button,
.website-cta-button,
.iphone-cta-button,
.android-cta-button,
.ppc-final-cta-button,
.smm-final-cta-button {
display: none;
}
}
/* ============================================
FINAL POLISH FOR PROFESSIONAL DESIGN
============================================ */
/* Removed global section style - was causing conflicts */
/* Professional gradient overlays */
.ecommerce-hero::before,
.iphone-custom-section::before,
.mobile-hero::before,
.ppc-hero::before,
.seo-hero::before,
.smm-hero::before,
.webdesign-hero::before,
.webdev-hero::before,
.capabilities-header-section::before,
.services-hero-bg::before,
.tabbed-section::before,
.features-list-section::before,
.welcome-section::before,
.platforms-section::before,
.mobile-app-section::before,
.combined-content-section::before,
.ideas-section::before,
.mobile-cta-section::before,
.ppc-phases-section::before,
.ppc-keys-section::before,
.ppc-targeting-section::before,
.seo-strengths-section::before,
.seo-efficacies-section::before,
.seo-case-studies-section::before,
.seo-process-section::before,
.seo-aftermath-section::before,
.smm-phases-section::before,
.smm-features-section::before,
.smm-integration-section::before,
.studio-section::before,
.quality-section::before,
.creative-services-section::before,
.android-company-section::before,
.android-features-section::before,
.android-summary-section::before,
.iphone-company-section::before,
.iphone-summary-section::before {
pointer-events: none;
z-index: 1;
}
/* Ensure content is above background overlays */
.ecommerce-hero > *,
.iphone-custom-section > *,
.mobile-hero > *,
.ppc-hero > *,
.seo-hero > *,
.smm-hero > *,
.webdesign-hero > *,
.webdev-hero > *,
.capabilities-header-section > *,
.services-hero-bg > *,
.tabbed-section > *,
.features-list-section > *,
.welcome-section > *,
.platforms-section > *,
.mobile-app-section > *,
.combined-content-section > *,
.ideas-section > *,
.mobile-cta-section > *,
.ppc-phases-section > *,
.ppc-keys-section > *,
.ppc-targeting-section > *,
.seo-strengths-section > *,
.seo-efficacies-section > *,
.seo-case-studies-section > *,
.seo-process-section > *,
.seo-aftermath-section > *,
.smm-phases-section > *,
.smm-features-section > *,
.smm-integration-section > *,
.studio-section > *,
.quality-section > *,
.creative-services-section > *,
.android-company-section > *,
.android-features-section > *,
.android-summary-section > *,
.iphone-company-section > *,
.iphone-summary-section > * {
position: relative;
z-index: 2;
}
/* Removed global typography - was breaking existing styles */
/* Smooth focus states - Remove unwanted borders on click, keep for keyboard navigation */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
a[class*="btn"]:focus:not(:focus-visible),
.hero-button:focus:not(:focus-visible),
.service-card-btn:focus:not(:focus-visible),
.service-contact-btn:focus:not(:focus-visible),
.ecommerce-cta-button:focus:not(:focus-visible),
.mobile-cta-button:focus:not(:focus-visible),
.ppc-quote-button:focus:not(:focus-visible),
.smm-quote-button:focus:not(:focus-visible),
.seo-cta-button:focus:not(:focus-visible),
.website-cta-button:focus:not(:focus-visible),
.iphone-cta-button:focus:not(:focus-visible),
.android-cta-button:focus:not(:focus-visible),
.ppc-final-cta-button:focus:not(:focus-visible),
.smm-final-cta-button:focus:not(:focus-visible),
.tab-btn:focus:not(:focus-visible),
.creative-tab-btn:focus:not(:focus-visible) {
outline: none !important;
border: none !important;
}
/* Keep focus-visible for keyboard navigation accessibility */
button:focus-visible,
a:focus-visible,
.btn:focus-visible,
a[class*="btn"]:focus-visible,
.hero-button:focus-visible,
.service-card-btn:focus-visible,
.service-contact-btn:focus-visible,
.ecommerce-cta-button:focus-visible,
.mobile-cta-button:focus-visible,
.ppc-quote-button:focus-visible,
.smm-quote-button:focus-visible,
.seo-cta-button:focus-visible,
.website-cta-button:focus-visible,
.iphone-cta-button:focus-visible,
.android-cta-button:focus-visible,
.ppc-final-cta-button:focus-visible,
.smm-final-cta-button:focus-visible,
.tab-btn:focus-visible,
.creative-tab-btn:focus-visible {
outline: 2px solid var(--service-primary-blue);
outline-offset: 2px;
border-radius: 4px;
}
/* Form inputs keep focus for usability */
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--service-primary-blue);
outline-offset: 2px;
}
/* Professional loading states */
.hero-button:disabled,
.service-card-btn:disabled,
.inquiry-form-btn:disabled,
.seo-hero-form-btn:disabled,
.hero-submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Ensure proper image aspect ratios */
.services-hero-bg img,
.ecommerce-hero .hero-image,
.iphone-custom-image,
.mobile-hero-image,
.ppc-hero-image,
.seo-hero-image,
.smm-hero-image,
.webdesign-hero img,
.webdev-hero img,
.capabilities-image,
.welcome-image,
.platforms-image,
.studio-image,
.tab-content-image {
aspect-ratio: auto;
object-fit: contain;
}
/* Professional border radius consistency */
.service-card,
.feature-item,
.quality-service-card,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item,
.android-feature-card,
.iphone-company-category,
.tab-btn,
.creative-tab-btn,
.inquiry-form-card,
.seo-hero-inquiry-form,
.webdesign-hero .hero-inquiry-form {
border-radius: 20px;
}
/* Icon styling is handled in comprehensive fixes section above */
/* Removed global html and link styles - was causing conflicts */
/* Ensure proper button text alignment */
.hero-button,
.hero-ecommerce-btn,
.service-card-btn,
.service-contact-btn,
.ecommerce-cta-button,
.mobile-cta-button,
.ppc-quote-button,
.smm-quote-button,
.seo-cta-button,
.website-cta-button,
.iphone-cta-button,
.android-cta-button,
.ppc-final-cta-button,
.smm-final-cta-button,
.inquiry-form-btn,
.seo-hero-form-btn,
.hero-submit-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-align: center;
}
/* Professional form styling improvements */
.inquiry-form-card,
.seo-hero-inquiry-form,
.webdesign-hero .hero-inquiry-form {
background: #ffffff;
border: 1.5px solid #e3edfa;
box-shadow: 0 20px 60px rgba(23, 96, 187, 0.15);
}
/* Removed - was overriding existing grid layouts */
/* Removed - was overriding individual grid gap settings */
/* Removed - was overriding individual card styles */
/* Removed - was overriding individual hover styles */
/* Removed - text wrapping should be handled individually */
/* Professional loading animation */
@keyframes service-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.loading {
animation: service-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Removed - was too global and causing conflicts */
/* Professional error states */
.form-control.is-invalid,
.form-select.is-invalid {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.form-control.is-valid,
.form-select.is-valid {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}
/* Professional success states */
.alert-success {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border: 1.5px solid #28a745;
color: #155724;
border-radius: 10px;
padding: 1rem 1.5rem;
}
.alert-error {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border: 1.5px solid #dc3545;
color: #721c24;
border-radius: 10px;
padding: 1rem 1.5rem;
}
/* Professional tooltip styling */
[data-tooltip] {
position: relative;
}
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1rem;
background: var(--service-text-dark);
color: #ffffff;
border-radius: 8px;
font-size: 0.875rem;
white-space: nowrap;
z-index: 1000;
margin-bottom: 0.5rem;
}
[data-tooltip]:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--service-text-dark);
z-index: 1000;
margin-bottom: -5px;
}
/* ============================================
PROFESSIONAL DESIGN IMPROVEMENTS
============================================ */
/* Smooth scroll behavior for better UX */
html {
scroll-behavior: smooth;
}
/* Better image rendering */
.services-hero-bg img,
.ecommerce-hero .hero-image,
.iphone-custom-image,
.mobile-hero-image,
.ppc-hero-image,
.seo-hero-image,
.smm-hero-image,
.webdesign-hero img,
.webdev-hero img,
.capabilities-image,
.welcome-image,
.platforms-image,
.studio-image,
.tab-content-image {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Professional card hover improvements */
.service-card,
.feature-item,
.quality-service-card,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item,
.android-feature-card,
.iphone-company-category {
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.service-card:hover,
.feature-item:hover,
.quality-service-card:hover,
.ppc-phase-card:hover,
.smm-phase-card:hover,
.seo-strength-card:hover,
.seo-efficacy-card:hover,
.seo-case-card:hover,
.smm-feature-card:hover,
.smm-integration-item:hover,
.android-feature-card:hover,
.iphone-company-category:hover {
will-change: auto;
}
/* Better button transitions */
.hero-button,
.hero-ecommerce-btn,
.service-card-btn,
.service-contact-btn,
.ecommerce-cta-button,
.mobile-cta-button,
.ppc-quote-button,
.smm-quote-button,
.seo-cta-button,
.website-cta-button,
.iphone-cta-button,
.android-cta-button,
.ppc-final-cta-button,
.smm-final-cta-button,
.inquiry-form-btn,
.seo-hero-form-btn,
.hero-submit-button {
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.hero-button:hover,
.hero-ecommerce-btn:hover,
.service-card-btn:hover,
.service-contact-btn:hover,
.ecommerce-cta-button:hover,
.mobile-cta-button:hover,
.ppc-quote-button:hover,
.smm-quote-button:hover,
.seo-cta-button:hover,
.website-cta-button:hover,
.iphone-cta-button:hover,
.android-cta-button:hover,
.ppc-final-cta-button:hover,
.smm-final-cta-button:hover,
.inquiry-form-btn:hover,
.seo-hero-form-btn:hover,
.hero-submit-button:hover {
will-change: auto;
}
/* Better text rendering */
.services-hero-title,
.ecommerce-hero .hero-main-title,
.iphone-custom-title,
.mobile-hero-title,
.ppc-hero-title,
.seo-hero-title,
.smm-hero-title,
.webdesign-hero .hero-title,
.webdev-hero .hero-main-title,
.capabilities-main-title,
.tabbed-main-title,
.features-list-title,
.platforms-title,
.welcome-heading {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
font-kerning: normal;
}
/* Better form input styling */
.inquiry-form-card .form-control,
.inquiry-form-card .form-select,
.seo-hero-inquiry-form .form-control,
.seo-hero-inquiry-form .form-select,
.webdesign-hero .hero-form-input,
.webdesign-hero .hero-form-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-clip: padding-box;
}
.inquiry-form-card .form-control:focus,
.inquiry-form-card .form-select:focus,
.seo-hero-inquiry-form .form-control:focus,
.seo-hero-inquiry-form .form-select:focus,
.webdesign-hero .hero-form-input:focus,
.webdesign-hero .hero-form-select:focus {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Better tab button styling */
.tab-btn,
.creative-tab-btn {
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.tab-btn:hover,
.creative-tab-btn:hover {
will-change: auto;
}
.tab-btn.active,
.creative-tab-btn.active {
will-change: auto;
}
/* Better icon animations */
.service-icon i,
.feature-icon i,
.quality-service-icon,
.ppc-key-icon i,
.smm-feature-icon i,
.smm-integration-icon i,
.seo-strength-icon,
.seo-efficacy-icon,
.seo-aftermath-icon,
.android-feature-card::before,
.iphone-company-category-icon {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-icon i,
.feature-item:hover .feature-icon i,
.quality-service-card:hover .quality-service-icon,
.ppc-key-card:hover .ppc-key-icon i,
.smm-feature-card:hover .smm-feature-icon i,
.smm-integration-item:hover .smm-integration-icon i,
.seo-strength-card:hover .seo-strength-icon,
.seo-efficacy-card:hover .seo-efficacy-icon,
.seo-aftermath-card:hover .seo-aftermath-icon {
transform: scale(1.1) rotate(5deg);
}
/* Better section transitions */
.tabbed-section,
.features-list-section,
.ecommerce-cta-section,
.welcome-section,
.platforms-section,
.mobile-app-section,
.combined-content-section,
.ideas-section,
.mobile-cta-section,
.ppc-quote-section,
.ppc-phases-section,
.ppc-keys-section,
.ppc-targeting-section,
.ppc-final-cta-section,
.seo-strengths-section,
.seo-efficacies-section,
.seo-case-studies-section,
.seo-process-section,
.seo-aftermath-section,
.seo-cta-section,
.smm-quote-section,
.smm-phases-section,
.smm-features-section,
.smm-integration-section,
.smm-final-cta-section,
.studio-section,
.quality-section,
.creative-services-section,
.website-cta-section,
.android-company-section,
.android-features-section,
.android-summary-section,
.android-cta-section,
.iphone-company-section,
.iphone-summary-section,
.iphone-cta-section {
will-change: scroll-position;
}
/* Better gradient overlays */
.ecommerce-hero::before,
.iphone-custom-section::before,
.mobile-hero::before,
.ppc-hero::before,
.seo-hero::before,
.smm-hero::before,
.webdesign-hero::before,
.webdev-hero::before,
.capabilities-header-section::before,
.services-hero-bg::before,
.tabbed-section::before,
.features-list-section::before,
.welcome-section::before,
.platforms-section::before,
.mobile-app-section::before,
.combined-content-section::before,
.ideas-section::before,
.mobile-cta-section::before,
.ppc-phases-section::before,
.ppc-keys-section::before,
.ppc-targeting-section::before,
.seo-strengths-section::before,
.seo-efficacies-section::before,
.seo-case-studies-section::before,
.seo-process-section::before,
.seo-aftermath-section::before,
.smm-phases-section::before,
.smm-features-section::before,
.smm-integration-section::before,
.studio-section::before,
.quality-section::before,
.creative-services-section::before,
.android-company-section::before,
.android-features-section::before,
.android-summary-section::before,
.iphone-company-section::before,
.iphone-summary-section::before {
will-change: opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Better animation performance */
.fade-in-up,
.android-custom-content,
.iphone-custom-content,
.mobile-hero-content,
.ppc-hero-content,
.seo-hero-content,
.smm-hero-content,
.webdesign-hero .hero-left,
.webdev-hero .hero-content,
.capabilities-content {
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Better responsive images */
@media (max-width: 767.98px) {
.services-hero-bg img,
.ecommerce-hero .hero-image,
.iphone-custom-image,
.mobile-hero-image,
.ppc-hero-image,
.seo-hero-image,
.smm-hero-image,
.webdesign-hero img,
.webdev-hero img,
.capabilities-image,
.welcome-image,
.platforms-image,
.studio-image,
.tab-content-image {
max-width: 100%;
height: auto;
}
}
/* Better focus states for accessibility */
.hero-button:focus,
.hero-ecommerce-btn:focus,
.service-card-btn:focus,
.service-contact-btn:focus,
.ecommerce-cta-button:focus,
.mobile-cta-button:focus,
.ppc-quote-button:focus,
.smm-quote-button:focus,
.seo-cta-button:focus,
.website-cta-button:focus,
.iphone-cta-button:focus,
.android-cta-button:focus,
.ppc-final-cta-button:focus,
.smm-final-cta-button:focus,
.tab-btn:focus,
.creative-tab-btn:focus:not(:focus-visible),
.inquiry-form-btn:focus:not(:focus-visible),
.seo-hero-form-btn:focus:not(:focus-visible),
.hero-submit-button:focus:not(:focus-visible) {
outline: none !important;
border: none !important;
}
.creative-tab-btn:focus-visible,
.inquiry-form-btn:focus-visible,
.seo-hero-form-btn:focus-visible,
.hero-submit-button:focus-visible {
outline: 3px solid var(--service-primary-blue);
outline-offset: 3px;
border-radius: 4px;
}
/* Better loading states */
.hero-button:disabled,
.service-card-btn:disabled,
.inquiry-form-btn:disabled,
.seo-hero-form-btn:disabled,
.hero-submit-button:disabled,
.tab-btn:disabled,
.creative-tab-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(0.5);
}
/* Better print styles */
@media print {
.services-hero-bg::before,
.ecommerce-hero::before,
.iphone-custom-section::before,
.mobile-hero::before,
.ppc-hero::before,
.seo-hero::before,
.smm-hero::before,
.webdesign-hero::before,
.webdev-hero::before,
.capabilities-header-section::before {
display: none;
}
.service-card,
.feature-item,
.quality-service-card,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item,
.android-feature-card,
.iphone-company-category {
box-shadow: none;
border: 1px solid #e3edfa;
page-break-inside: avoid;
}
}
/* Better selection styling */
::selection {
background: var(--service-primary-blue);
color: #ffffff;
}
::-moz-selection {
background: var(--service-primary-blue);
color: #ffffff;
}
/* Better scrollbar styling for webkit browsers */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--service-primary-blue);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--service-primary-blue-dark);
}
/* Better container max-width */
.services-container.container {
max-width: 1400px;
}
/* Better spacing for service cards grid */
.services-listing .row {
margin-left: -15px;
margin-right: -15px;
}
.services-listing .row > [class*='col-'] {
padding-left: 15px;
padding-right: 15px;
}
/* Better shadow consistency */
/* ============================================
PROFESSIONAL DESIGN IMPROVEMENTS
============================================ */
/* Professional card performance optimization */
.service-card,
.feature-item,
.quality-service-card,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item,
.android-feature-card,
.iphone-company-category {
will-change: transform;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Professional text rendering for headings */
.android-custom-title,
.iphone-custom-title,
.hero-main-title,
.tabbed-main-title,
.android-company-title,
.android-features-title,
.seo-hero-title,
.smm-hero-title,
.ppc-hero-title,
.mobile-hero-title,
.webdesign-hero .hero-title,
.webdev-hero-title {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Smooth image rendering for service images */
.android-custom-image,
.iphone-custom-image,
.hero-image,
.tab-content-image,
.platforms-image,
.studio-image,
.capabilities-image,
.welcome-image {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
max-width: 100%;
height: auto;
display: block;
}
/* Professional button text rendering */
.hero-button,
.hero-ecommerce-btn,
.service-card-btn,
.service-contact-btn,
.ecommerce-cta-button,
.mobile-cta-button,
.ppc-quote-button,
.smm-quote-button,
.seo-cta-button,
.website-cta-button,
.iphone-cta-button,
.android-cta-button,
.ppc-final-cta-button,
.smm-final-cta-button,
.inquiry-form-btn,
.seo-hero-form-btn,
.hero-submit-button {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Professional form input rendering */
.hero-form-input,
.hero-form-select,
.inquiry-form-input,
.inquiry-form-select,
.seo-hero-form-input,
.seo-hero-form-select {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Ensure proper overflow handling for sections */
.android-custom-section,
.iphone-custom-section,
.ecommerce-hero,
.mobile-hero,
.ppc-hero,
.seo-hero,
.smm-hero,
.webdesign-hero,
.webdev-hero {
overflow-x: hidden;
}
/* Professional section spacing - only for specific sections that need it */
.tabbed-section,
.features-list-section,
.welcome-section,
.platforms-section,
.mobile-app-section,
.combined-content-section,
.ideas-section,
.mobile-cta-section,
.ppc-phases-section,
.ppc-keys-section,
.ppc-targeting-section,
.seo-strengths-section,
.seo-efficacies-section,
.seo-case-studies-section,
.seo-process-section,
.seo-aftermath-section,
.smm-phases-section,
.smm-features-section,
.smm-integration-section,
.studio-section,
.quality-section,
.creative-services-section,
.android-company-section,
.android-features-section,
.android-summary-section,
.iphone-company-section,
.iphone-summary-section {
position: relative;
overflow-x: hidden;
}
.shadow-sm {
box-shadow: 0 2px 8px rgba(23, 96, 187, 0.08) !important;
}
/* Better animation delays for staggered effects */
.fade-in-up:nth-child(1) {
animation-delay: 0.1s;
}
.fade-in-up:nth-child(2) {
animation-delay: 0.2s;
}
.fade-in-up:nth-child(3) {
animation-delay: 0.3s;
}
.fade-in-up:nth-child(4) {
animation-delay: 0.4s;
}
.fade-in-up:nth-child(5) {
animation-delay: 0.5s;
}
.fade-in-up:nth-child(6) {
animation-delay: 0.6s;
}
/* Better responsive typography */
@media (max-width: 575.98px) {
.services-hero-title,
.ecommerce-hero .hero-main-title,
.iphone-custom-title,
.mobile-hero-title,
.ppc-hero-title,
.seo-hero-title,
.smm-hero-title,
.webdesign-hero .hero-title,
.webdev-hero .hero-main-title,
.capabilities-main-title {
font-size: clamp(1.5rem, 6vw, 2rem);
}
}
/* Better button icon transitions */
.hero-button i,
.hero-ecommerce-btn i,
.service-card-btn i,
.service-contact-btn i,
.ecommerce-cta-button i,
.mobile-cta-button i,
.ppc-quote-button i,
.smm-quote-button i,
.seo-cta-button i,
.website-cta-button i,
.iphone-cta-button i,
.android-cta-button i,
.ppc-final-cta-button i,
.smm-final-cta-button i {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}
.hero-button:hover i,
.hero-ecommerce-btn:hover i,
.service-card-btn:hover i,
.service-contact-btn:hover i,
.ecommerce-cta-button:hover i,
.mobile-cta-button:hover i,
.ppc-quote-button:hover i,
.smm-quote-button:hover i,
.seo-cta-button:hover i,
.website-cta-button:hover i,
.iphone-cta-button:hover i,
.android-cta-button:hover i,
.ppc-final-cta-button:hover i,
.smm-final-cta-button:hover i {
transform: translateX(5px);
}
/* Better card border radius consistency */
.service-card,
.feature-item,
.quality-service-card,
.ppc-phase-card,
.smm-phase-card,
.seo-strength-card,
.seo-efficacy-card,
.seo-case-card,
.smm-feature-card,
.smm-integration-item,
.android-feature-card,
.iphone-company-category,
.tab-btn,
.creative-tab-btn,
.inquiry-form-card,
.seo-hero-inquiry-form,
.webdesign-hero .hero-inquiry-form,
.hero-ecommerce-promo {
border-radius: 20px;
overflow: hidden;
}
/* Better section spacing */
.tabbed-section + .features-list-section,
.features-list-section + .ecommerce-cta-section,
.welcome-section + .platforms-section,
.platforms-section + .mobile-app-section,
.mobile-app-section + .combined-content-section,
.combined-content-section + .ideas-section,
.ideas-section + .mobile-cta-section {
margin-top: 0;
}
/* Better CTA section backgrounds */
.ecommerce-cta-section,
.mobile-cta-section,
.ppc-final-cta-section,
.seo-cta-section,
.smm-final-cta-section,
.website-cta-section,
.iphone-cta-section,
.android-cta-section {
background-attachment: fixed;
background-size: cover;
background-position: center;
}
@media (max-width: 767.98px) {
.ecommerce-cta-section,
.mobile-cta-section,
.ppc-final-cta-section,
.seo-cta-section,
.smm-final-cta-section,
.website-cta-section,
.iphone-cta-section,
.android-cta-section {
background-attachment: scroll;
}
}
/* ============================================
ICON STYLES - COMPREHENSIVE FIXES
============================================ */
/* Ensure all icon containers have proper backgrounds */
.service-icon,
.feature-icon,
.quality-icon-container,
.ppc-key-icon,
.smm-feature-icon,
.smm-integration-icon,
.seo-strength-icon-wrapper,
.seo-efficacy-icon-wrapper,
.seo-aftermath-icon-wrapper {
background: var(--service-primary-gradient);
background-image: linear-gradient(135deg, #1760bb 0%, #10509e 100%);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(23, 96, 187, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
/* ============================================
FONT AWESOME ICONS - BASE STYLES
============================================ */
/* All Font Awesome icons - base styles */
.fas,
.far,
.fal,
.fab {
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'Font Awesome 6 Pro', 'Font Awesome 5 Pro', sans-serif !important;
font-weight: 900 !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
line-height: 1 !important;
display: inline-block !important;
text-transform: none !important;
letter-spacing: normal !important;
word-wrap: normal !important;
white-space: nowrap !important;
direction: ltr !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Bootstrap Icons - separate from Font Awesome */
.bi,
[class^="bi-"],
[class*=" bi-"] {
font-family: "bootstrap-icons" !important;
font-weight: normal !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
line-height: 1 !important;
display: inline-block !important;
text-transform: none !important;
letter-spacing: normal !important;
word-wrap: normal !important;
white-space: nowrap !important;
direction: ltr !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
visibility: visible !important;
opacity: 1 !important;
vertical-align: -0.125em !important;
}
/* Ensure icons inside containers are visible with proper colors */
.service-icon .fas,
.service-icon .far,
.service-icon .fal,
.service-icon .fab,
.service-icon i {
color: #ffffff;
}
.feature-icon .fas,
.feature-icon .far,
.feature-icon .fal,
.feature-icon .fab,
.feature-icon i {
color: #ffffff;
}
.quality-icon-container .fas,
.quality-icon-container .far,
.quality-icon-container .fal,
.quality-icon-container .fab,
.quality-service-icon {
color: #ffffff;
}
.ppc-key-icon .fas,
.ppc-key-icon .far,
.ppc-key-icon .fal,
.ppc-key-icon .fab,
.ppc-key-icon i {
color: #ffffff;
}
.smm-feature-icon .fas,
.smm-feature-icon .far,
.smm-feature-icon .fal,
.smm-feature-icon .fab,
.smm-feature-icon i {
color: #ffffff;
}
.smm-integration-icon .fas,
.smm-integration-icon .far,
.smm-integration-icon .fal,
.smm-integration-icon .fab,
.smm-integration-icon i {
color: #ffffff;
}
.seo-strength-icon-wrapper .fas,
.seo-strength-icon-wrapper .far,
.seo-strength-icon-wrapper .fal,
.seo-strength-icon-wrapper .fab,
.seo-strength-icon {
color: #ffffff;
}
.seo-efficacy-icon-wrapper .fas,
.seo-efficacy-icon-wrapper .far,
.seo-efficacy-icon-wrapper .fal,
.seo-efficacy-icon-wrapper .fab,
.seo-efficacy-icon {
color: #ffffff;
}
.seo-aftermath-icon-wrapper .fas,
.seo-aftermath-icon-wrapper .far,
.seo-aftermath-icon-wrapper .fal,
.seo-aftermath-icon-wrapper .fab,
.seo-aftermath-icon {
color: #ffffff;
}
.mobile-app-icon-wrapper .fas,
.mobile-app-icon-wrapper .far,
.mobile-app-icon-wrapper .fal,
.mobile-app-icon-wrapper .fab,
.ppc-quote-icon-wrapper .fas,
.ppc-quote-icon-wrapper .far,
.ppc-quote-icon-wrapper .fal,
.ppc-quote-icon-wrapper .fab,
.android-cta-icon-wrapper .fas,
.android-cta-icon-wrapper .far,
.android-cta-icon-wrapper .fal,
.android-cta-icon-wrapper .fab,
.iphone-cta-icon-wrapper .fas,
.iphone-cta-icon-wrapper .far,
.iphone-cta-icon-wrapper .fal,
.iphone-cta-icon-wrapper .fab,
.ecommerce-cta-icon-wrapper .fas,
.ecommerce-cta-icon-wrapper .far,
.ecommerce-cta-icon-wrapper .fal,
.ecommerce-cta-icon-wrapper .fab,
.mobile-cta-icon-wrapper .fas,
.mobile-cta-icon-wrapper .far,
.mobile-cta-icon-wrapper .fal,
.mobile-cta-icon-wrapper .fab,
.seo-cta-icon-wrapper .fas,
.seo-cta-icon-wrapper .far,
.seo-cta-icon-wrapper .fal,
.seo-cta-icon-wrapper .fab,
.website-cta-icon-wrapper .fas,
.website-cta-icon-wrapper .far,
.website-cta-icon-wrapper .fal,
.website-cta-icon-wrapper .fab,
.ppc-final-cta-icon-wrapper .fas,
.ppc-final-cta-icon-wrapper .far,
.ppc-final-cta-icon-wrapper .fal,
.ppc-final-cta-icon-wrapper .fab,
.smm-final-cta-icon-wrapper .fas,
.smm-final-cta-icon-wrapper .far,
.smm-final-cta-icon-wrapper .fal,
.smm-final-cta-icon-wrapper .fab,
.smm-quote-icon-wrapper .fas,
.smm-quote-icon-wrapper .far,
.smm-quote-icon-wrapper .fal,
.smm-quote-icon-wrapper .fab {
visibility: visible !important;
opacity: 1 !important;
display: inline-block !important;
font-size: inherit !important;
color: inherit !important;
}
/* Additional icon containers (CTA sections, etc.) */
.mobile-app-icon-wrapper,
.ppc-quote-icon-wrapper,
.android-cta-icon-wrapper,
.iphone-cta-icon-wrapper,
.ecommerce-cta-icon-wrapper,
.mobile-cta-icon-wrapper,
.seo-cta-icon-wrapper,
.website-cta-icon-wrapper,
.ppc-final-cta-icon-wrapper,
.smm-final-cta-icon-wrapper,
.smm-quote-icon-wrapper {
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Fix for tab button icons */
.tab-btn .fas,
.tab-btn .far,
.tab-btn .fal,
.tab-btn .fab,
.creative-tab-btn .fas,
.creative-tab-btn .far,
.creative-tab-btn .fal,
.creative-tab-btn .fab {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 1.25rem !important;
min-width: 24px !important;
text-align: center !important;
}
/* Fix for button icons */
.hero-button .fas,
.hero-button .far,
.hero-button .fal,
.hero-button .fab,
.hero-ecommerce-btn .fas,
.hero-ecommerce-btn .far,
.hero-ecommerce-btn .fal,
.hero-ecommerce-btn .fab,
.service-card-btn .fas,
.service-card-btn .far,
.service-card-btn .fal,
.service-card-btn .fab,
.service-contact-btn .fas,
.service-contact-btn .far,
.service-contact-btn .fal,
.service-contact-btn .fab,
.ecommerce-cta-button .fas,
.ecommerce-cta-button .far,
.ecommerce-cta-button .fal,
.ecommerce-cta-button .fab,
.mobile-cta-button .fas,
.mobile-cta-button .far,
.mobile-cta-button .fal,
.mobile-cta-button .fab,
.ppc-quote-button .fas,
.ppc-quote-button .far,
.ppc-quote-button .fal,
.ppc-quote-button .fab,
.smm-quote-button .fas,
.smm-quote-button .far,
.smm-quote-button .fal,
.smm-quote-button .fab,
.seo-cta-button .fas,
.seo-cta-button .far,
.seo-cta-button .fal,
.seo-cta-button .fab,
.website-cta-button .fas,
.website-cta-button .far,
.website-cta-button .fal,
.website-cta-button .fab,
.iphone-cta-button .fas,
.iphone-cta-button .far,
.iphone-cta-button .fal,
.iphone-cta-button .fab,
.android-cta-button .fas,
.android-cta-button .far,
.android-cta-button .fal,
.android-cta-button .fab,
.ppc-final-cta-button .fas,
.ppc-final-cta-button .far,
.ppc-final-cta-button .fal,
.ppc-final-cta-button .fab,
.smm-final-cta-button .fas,
.smm-final-cta-button .far,
.smm-final-cta-button .fal,
.smm-final-cta-button .fab,
.mobile-app-button .fas,
.mobile-app-button .far,
.mobile-app-button .fal,
.mobile-app-button .fab {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 1.2rem !important;
transition: transform 0.3s ease !important;
}
/* Icon hover effects */
.hero-button:hover .fas,
.hero-button:hover .far,
.hero-button:hover .fal,
.hero-button:hover .fab,
.hero-ecommerce-btn:hover .fas,
.hero-ecommerce-btn:hover .far,
.hero-ecommerce-btn:hover .fal,
.hero-ecommerce-btn:hover .fab,
.service-card-btn:hover .fas,
.service-card-btn:hover .far,
.service-card-btn:hover .fal,
.service-card-btn:hover .fab,
.service-contact-btn:hover .fas,
.service-contact-btn:hover .far,
.service-contact-btn:hover .fal,
.service-contact-btn:hover .fab,
.ecommerce-cta-button:hover .fas,
.ecommerce-cta-button:hover .far,
.ecommerce-cta-button:hover .fal,
.ecommerce-cta-button:hover .fab,
.mobile-cta-button:hover .fas,
.mobile-cta-button:hover .far,
.mobile-cta-button:hover .fal,
.mobile-cta-button:hover .fab,
.ppc-quote-button:hover .fas,
.ppc-quote-button:hover .far,
.ppc-quote-button:hover .fal,
.ppc-quote-button:hover .fab,
.smm-quote-button:hover .fas,
.smm-quote-button:hover .far,
.smm-quote-button:hover .fal,
.smm-quote-button:hover .fab,
.seo-cta-button:hover .fas,
.seo-cta-button:hover .far,
.seo-cta-button:hover .fal,
.seo-cta-button:hover .fab,
.website-cta-button:hover .fas,
.website-cta-button:hover .far,
.website-cta-button:hover .fal,
.website-cta-button:hover .fab,
.iphone-cta-button:hover .fas,
.iphone-cta-button:hover .far,
.iphone-cta-button:hover .fal,
.iphone-cta-button:hover .fab,
.android-cta-button:hover .fas,
.android-cta-button:hover .far,
.android-cta-button:hover .fal,
.android-cta-button:hover .fab,
.ppc-final-cta-button:hover .fas,
.ppc-final-cta-button:hover .far,
.ppc-final-cta-button:hover .fal,
.ppc-final-cta-button:hover .fab,
.smm-final-cta-button:hover .fas,
.smm-final-cta-button:hover .far,
.smm-final-cta-button:hover .fal,
.smm-final-cta-button:hover .fab,
.mobile-app-button:hover .fas,
.mobile-app-button:hover .far,
.mobile-app-button:hover .fal,
.mobile-app-button:hover .fab {
transform: translateX(5px) !important;
}
/* Ensure icon sizes are consistent */
.service-icon .fas,
.service-icon .far,
.service-icon .fal,
.service-icon .fab {
font-size: 2rem !important;
}
.feature-icon .fas,
.feature-icon .far,
.feature-icon .fal,
.feature-icon .fab {
font-size: 1.75rem !important;
}
.quality-service-icon.fas,
.quality-service-icon.far,
.quality-service-icon.fal,
.quality-service-icon.fab {
font-size: 2rem !important;
}
.ppc-key-icon .fas,
.ppc-key-icon .far,
.ppc-key-icon .fal,
.ppc-key-icon .fab {
font-size: 2rem !important;
}
.smm-feature-icon .fas,
.smm-feature-icon .far,
.smm-feature-icon .fal,
.smm-feature-icon .fab {
font-size: 2rem !important;
}
.smm-integration-icon .fas,
.smm-integration-icon .far,
.smm-integration-icon .fal,
.smm-integration-icon .fab {
font-size: 1.75rem !important;
}
.seo-strength-icon.fas,
.seo-strength-icon.far,
.seo-strength-icon.fal,
.seo-strength-icon.fab,
.seo-efficacy-icon.fas,
.seo-efficacy-icon.far,
.seo-efficacy-icon.fal,
.seo-efficacy-icon.fab,
.seo-aftermath-icon.fas,
.seo-aftermath-icon.far,
.seo-aftermath-icon.fal,
.seo-aftermath-icon.fab {
font-size: 2rem !important;
}
.mobile-app-icon.fas,
.mobile-app-icon.far,
.mobile-app-icon.fal,
.mobile-app-icon.fab {
font-size: 2rem !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure mobile app page button icons are visible */
.mobile-hero-button i,
.mobile-app-button i,
.mobile-cta-button i {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif !important;
font-weight: 900 !important;
}
.ppc-quote-icon.fas,
.ppc-quote-icon.far,
.ppc-quote-icon.fal,
.ppc-quote-icon.fab {
font-size: 2.5rem !important;
}
.android-cta-icon.fas,
.android-cta-icon.far,
.android-cta-icon.fal,
.android-cta-icon.fab,
.iphone-cta-icon.fas,
.iphone-cta-icon.far,
.iphone-cta-icon.fal,
.iphone-cta-icon.fab,
.ecommerce-cta-icon.fas,
.ecommerce-cta-icon.far,
.ecommerce-cta-icon.fal,
.ecommerce-cta-icon.fab,
.mobile-cta-icon.fas,
.mobile-cta-icon.far,
.mobile-cta-icon.fal,
.mobile-cta-icon.fab,
.seo-cta-icon.fas,
.seo-cta-icon.far,
.seo-cta-icon.fal,
.seo-cta-icon.fab,
.website-cta-icon.fas,
.website-cta-icon.far,
.website-cta-icon.fal,
.website-cta-icon.fab,
.ppc-final-cta-icon.fas,
.ppc-final-cta-icon.far,
.ppc-final-cta-icon.fal,
.ppc-final-cta-icon.fab,
.smm-final-cta-icon.fas,
.smm-final-cta-icon.far,
.smm-final-cta-icon.fal,
.smm-final-cta-icon.fab,
.smm-quote-icon.fas,
.smm-quote-icon.far,
.smm-quote-icon.fal,
.smm-quote-icon.fab {
font-size: 2.5rem !important;
}
/* Fix for icon loading issues - Using local fonts */
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
url('../webfonts/fa-solid-900.ttf') format('truetype');
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
url('../webfonts/fa-solid-900.ttf') format('truetype');
}
/* Ensure icons don't break layout */
/* ============================================
CSS OPTIMIZATION COMPLETE
- Fixed focus outline issues (removed unwanted borders on click)
- Added focus-visible for keyboard navigation accessibility
- Optimized animations and transitions
- Professional, clean & smooth design maintained
============================================ */
.fas::before,
.far::before,
.fal::before,
.fab::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}