/* WordPress Theme Override - Force our styles */
body, html {
margin: 0 !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
line-height: 1.6 !important;
color: #333333 !important;
background-color: #ffffff !important;
overflow-x: hidden !important;
}
/* Reset ALL WordPress default styles */
.wp-block-navigation,
.wp-block-navigation ul,
.wp-block-navigation li,
.wp-block-navigation a,
.wp-block-site-title,
.wp-block-site-tagline,
.wp-block-template-part,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block,
.wp-block *,
.wp-block-button,
.wp-block-button *,
.wp-block-buttons,
.wp-block-buttons *,
.wp-block-heading,
.wp-block-heading *,
.wp-block-paragraph,
.wp-block-paragraph *,
.wp-block-list,
.wp-block-list *,
.wp-block-quote,
.wp-block-quote *,
.wp-block-pullquote,
.wp-block-pullquote *,
.wp-block-code,
.wp-block-code *,
.wp-block-preformatted,
.wp-block-preformatted *,
.wp-block-verse,
.wp-block-verse *,
.wp-block-table,
.wp-block-table *,
.wp-block-spacer,
.wp-block-spacer *,
.wp-block-separator,
.wp-block-separator *,
.wp-block-more,
.wp-block-more *,
.wp-block-nextpage,
.wp-block-nextpage *,
.wp-block-embed,
.wp-block-embed *,
.wp-block-cover,
.wp-block-cover *,
.wp-block-media-text,
.wp-block-media-text *,
.wp-block-gallery,
.wp-block-gallery *,
.wp-block-image,
.wp-block-image *,
.wp-block-audio,
.wp-block-audio *,
.wp-block-video,
.wp-block-video *,
.wp-block-file,
.wp-block-file *,
.wp-block-calendar,
.wp-block-calendar *,
.wp-block-archives,
.wp-block-archives *,
.wp-block-categories,
.wp-block-categories *,
.wp-block-latest-posts,
.wp-block-latest-posts *,
.wp-block-latest-comments,
.wp-block-latest-comments *,
.wp-block-rss,
.wp-block-rss *,
.wp-block-search,
.wp-block-search *,
.wp-block-social-links,
.wp-block-social-links *,
.wp-block-tag-cloud,
.wp-block-tag-cloud *,
.wp-block-query,
.wp-block-query *,
.wp-block-post-template,
.wp-block-post-template *,
.wp-block-query-pagination,
.wp-block-query-pagination *,
.wp-block-query-pagination-next,
.wp-block-query-pagination-next *,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-previous *,
.wp-block-query-pagination-numbers,
.wp-block-query-pagination-numbers *,
.wp-block-post-title,
.wp-block-post-title *,
.wp-block-post-excerpt,
.wp-block-post-excerpt *,
.wp-block-post-featured-image,
.wp-block-post-featured-image *,
.wp-block-post-date,
.wp-block-post-date *,
.wp-block-post-terms,
.wp-block-post-terms *,
.wp-block-post-author,
.wp-block-post-author *,
.wp-block-post-comments,
.wp-block-post-comments *,
.wp-block-post-content,
.wp-block-post-content *,
.wp-block-post-navigation-link,
.wp-block-post-navigation-link *,
.wp-block-post-navigation-link-previous,
.wp-block-post-navigation-link-previous *,
.wp-block-post-navigation-link-next,
.wp-block-post-navigation-link-next *,
.wp-block-query-loop,
.wp-block-query-loop *,
.wp-block-template-part,
.wp-block-template-part *,
.wp-block-site-header,
.wp-block-site-header *,
.wp-block-site-footer,
.wp-block-site-footer *,
.wp-block-site-logo,
.wp-block-site-logo *,
.wp-block-site-title,
.wp-block-site-title *,
.wp-block-site-tagline,
.wp-block-site-tagline *,
.wp-block-navigation,
.wp-block-navigation *,
.wp-block-navigation-link,
.wp-block-navigation-link *,
.wp-block-navigation-submenu,
.wp-block-navigation-submenu *,
.wp-block-navigation-link-page,
.wp-block-navigation-link-page *,
.wp-block-navigation-link-custom,
.wp-block-navigation-link-custom *,
.wp-block-navigation-link-home,
.wp-block-navigation-link-home *,
.wp-block-navigation-link-https,
.wp-block-navigation-link-https *,
.wp-block-navigation-link-http,
.wp-block-navigation-link-http *,
.wp-block-navigation-link-mailto,
.wp-block-navigation-link-mailto *,
.wp-block-navigation-link-tel,
.wp-block-navigation-link-tel *,
.wp-block-navigation-link-relative,
.wp-block-navigation-link-relative *,
.wp-block-navigation-link-external,
.wp-block-navigation-link-external *,
.wp-block-navigation-link-internal,
.wp-block-navigation-link-internal *,
.wp-block-navigation-link-has-icon,
.wp-block-navigation-link-has-icon *,
.wp-block-navigation-link-has-text,
.wp-block-navigation-link-has-text *,
.wp-block-navigation-link-has-icon-has-text,
.wp-block-navigation-link-has-icon-has-text *,
.wp-block-navigation-link-has-icon-no-text,
.wp-block-navigation-link-has-icon-no-text *,
.wp-block-navigation-link-no-icon-has-text,
.wp-block-navigation-link-no-icon-has-text *,
.wp-block-navigation-link-no-icon-no-text,
.wp-block-navigation-link-no-icon-no-text *,
.wp-block-navigation-link-has-submenu,
.wp-block-navigation-link-has-submenu *,
.wp-block-navigation-link-no-submenu,
.wp-block-navigation-link-no-submenu *,
.wp-block-navigation-link-has-submenu-has-icon,
.wp-block-navigation-link-has-submenu-has-icon *,
.wp-block-navigation-link-has-submenu-no-icon,
.wp-block-navigation-link-has-submenu-no-icon *,
.wp-block-navigation-link-no-submenu-has-icon,
.wp-block-navigation-link-no-submenu-has-icon *,
.wp-block-navigation-link-no-submenu-no-icon,
.wp-block-navigation-link-no-submenu-no-icon *,
.wp-block-navigation-link-has-submenu-has-icon-has-text,
.wp-block-navigation-link-has-submenu-has-icon-has-text *,
.wp-block-navigation-link-has-submenu-has-icon-no-text,
.wp-block-navigation-link-has-submenu-has-icon-no-text *,
.wp-block-navigation-link-has-submenu-no-icon-has-text,
.wp-block-navigation-link-has-submenu-no-icon-has-text *,
.wp-block-navigation-link-has-submenu-no-icon-no-text,
.wp-block-navigation-link-has-submenu-no-icon-no-text *,
.wp-block-navigation-link-no-submenu-has-icon-has-text,
.wp-block-navigation-link-no-submenu-has-icon-has-text *,
.wp-block-navigation-link-no-submenu-has-icon-no-text,
.wp-block-navigation-link-no-submenu-has-icon-no-text *,
.wp-block-navigation-link-no-submenu-no-icon-has-text,
.wp-block-navigation-link-no-submenu-no-icon-has-text *,
.wp-block-navigation-link-no-submenu-no-icon-no-text,
.wp-block-navigation-link-no-submenu-no-icon-no-text * {
all: unset !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
list-style: none !important;
display: block !important;
position: static !important;
float: none !important;
clear: none !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
z-index: auto !important;
transform: none !important;
transition: none !important;
animation: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Base styles and variables */
:root {
/* Main Color Palette - Dark Green Theme */
--primary-color: #2E7D32; /* Dark Green - Main Color */
--primary-color-rgb: 46, 125, 50;
--secondary-color: #4CAF50; /* Medium Green */
--secondary-color-rgb: 76, 175, 80;
--accent-color: #81C784; /* Light Green */
--accent-color-rgb: 129, 199, 132;
/* Supporting Colors */
--success-color: #66BB6A; /* Success Green */
--info-color: #42A5F5; /* Info Blue */
--warning-color: #FFA726; /* Warning Orange */
--error-color: #EF5350; /* Error Red */
/* Neutral Colors */
--text-color: #333333;
--light-text: #666666;
--lighter-text: #999999;
--background: #ffffff;
--light-background: #f9f9f9;
--lighter-background: #f5f5f5;
--dark-background: #1A202C;
/* Layout */
--max-width: 1200px;
--border-radius: 15px;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background);
overflow-x: hidden;
margin: 0;
padding: 0;
}
/* Typography */
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
}
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.5rem;
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1rem;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.75rem;
}
.lead {
font-size: clamp(1.125rem, 2vw, 1.5rem);
color: var(--light-text);
margin-bottom: 2rem;
}
/* Layout */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 2rem;
}
section {
padding: 6rem 0;
position: relative;
overflow: hidden;
}
/* Navigation */
.nav {
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 78%, #28a745 78%);
backdrop-filter: blur(10px);
padding: 1rem 2rem;
border-radius: 50px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
width: min(95%, 800px);
}
.logo {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
align-items: center;
flex-wrap: nowrap;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
display: inline-block;
}
.nav-links a:hover {
color: var(--primary-color);
}
/* Existing Clients Link Styling */
.nav-links .payments-link {
background: transparent;
color: white !important;
padding: 0.5rem 1rem;
padding-right: 1.5rem;
margin-right: -1.5rem;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.nav-links .payments-link:hover {
color: white !important;
transform: translateY(-2px);
}
/* Hero Section */
.hero {
min-height: 90vh;
display: flex;
align-items: center;
background: var(--dark-background);
position: relative;
color: white;
margin-bottom: -2px;
padding-bottom: 150px;
}
.hero-layout {
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.hero-profile {
position: relative;
z-index: 2;
}
.profile-image-container {
position: relative;
width: 280px;
height: 350px;
}
.profile-image-border {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 30px;
padding: 8px;
transform: rotate(-3deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transition: var(--transition);
}
.profile-image-border:hover {
transform: rotate(0deg) scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
.hero-profile-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25px;
display: block;
}
.profile-decoration-1 {
position: absolute;
top: -15px;
right: -15px;
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
opacity: 0.8;
animation: float 3s ease-in-out infinite;
}
.profile-decoration-2 {
position: absolute;
bottom: -20px;
left: -20px;
width: 40px;
height: 40px;
background: var(--secondary-color);
border-radius: 8px;
transform: rotate(45deg);
opacity: 0.6;
animation: float 3s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.hero-content {
max-width: 800px;
position: relative;
z-index: 2;
}
.hero-content h1,
.hero-content .lead {
color: white;
}
.hero .lead {
color: rgba(255, 255, 255, 0.8);
}
.decorative-elements {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index: 1;
}
.shape {
position: absolute;
opacity: 0.15;
border-radius: 50%;
}
.shape-1 {
width: 300px;
height: 300px;
top: 10%;
right: -100px;
background: var(--primary-color);
opacity: 0.2;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: 20%;
left: -50px;
background: var(--accent-color);
opacity: 0.15;
}
.shape-3 {
width: 150px;
height: 150px;
top: 50%;
left: 30%;
background: var(--secondary-color);
opacity: 0.2;
}
.wave-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: visible;
line-height: 0;
transform: translateY(1px);
}
.wave-divider svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 250px;
}
.wave-divider .shape-fill {
fill: var(--background);
}
/* Buttons */
.cta-button {
display: inline-block;
padding: 1rem 2rem;
background: var(--primary-color);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 500;
transition: var(--transition);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(42, 157, 143, 0.2);
}
/* Hiring Options Section */
.hiring-options {
background: var(--background);
color: var(--text-color);
position: relative;
overflow: hidden;
padding: 3rem 0;
}
.hiring-intro {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.hiring-intro h2 {
color: var(--text-color);
margin-bottom: 1rem;
font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.hiring-intro .subtitle {
color: var(--light-text);
font-size: 1.25rem;
}
.hiring-arrows {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
position: relative;
z-index: 2;
margin-top: 1rem;
max-width: 100%;
padding-top: 120px;
}
.hiring-arrows-svg {
position: absolute;
top: -120px;
left: 0;
width: 100%;
height: auto;
z-index: 1;
pointer-events: none;
}
.arrow-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
z-index: 2;
padding: 1rem;
margin-top: 1rem;
}
.arrow-container.left-arrow {
margin-left: -100px;
}
.arrow-container.right-arrow {
margin-right: -100px;
}
.arrow-content {
background: rgba(255, 255, 255, 0.95);
padding: 1.5rem;
border-radius: 20px;
transition: var(--transition);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
max-width: 250px;
}
.organic-arrow {
width: 300px;
height: 150px;
margin-bottom: 2rem;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
transition: var(--transition);
}
.organic-arrow:hover {
transform: scale(1.05);
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
}
.arrow-path {
transition: var(--transition);
}
.left-arrow .arrow-path:hover {
stroke-width: 12;
}
.right-arrow .arrow-path:hover {
stroke-width: 12;
}
.cloud-content {
background: rgba(255, 255, 255, 0.95);
padding: 2rem;
border-radius: 25px;
transition: var(--transition);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.cloud-content:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.02);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.cloud-content h3 {
color: var(--text-color);
margin-bottom: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
}
.cloud-content p {
color: var(--light-text);
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.5;
}
.hiring-button {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: 2px solid transparent;
}
.hiring-button.primary {
background: white;
color: var(--primary-color);
}
.hiring-button.primary:hover {
background: transparent;
color: white;
border-color: white;
transform: translateY(-2px);
}
.hiring-button.secondary {
background: transparent;
color: white;
border-color: white;
}
.hiring-button.secondary:hover {
background: white;
color: var(--secondary-color);
transform: translateY(-2px);
}
/* Section Separator */
.section-separator {
position: relative;
height: 120px;
overflow: hidden;
background: var(--light-background);
}
.section-separator svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.section-separator .shape-fill {
fill: var(--light-background);
}
/* About Section */
.about {
position: relative;
background: var(--light-background);
padding-top: 4rem;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-image {
position: relative;
}
.profile-img {
width: 100%;
border-radius: var(--border-radius);
position: relative;
z-index: 2;
}
.image-decoration {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
top: 20px;
left: 20px;
z-index: 1;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 0;
}
.skills-grid-container {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* About Content Styling */
.about-content p {
font-size: 1.2rem;
line-height: 1.8;
color: #333;
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
}
/* Color styling for bold words in about section */
.about-content strong {
font-weight: 700;
transition: color 0.3s ease;
}
/* Pastel Blue for core value propositions and approach */
.about-content .blue-text {
color: #667eea;
}
/* Pastel Pink for company names, retention, and achievements */
.about-content .teal-text {
color: #f093fb;
}
/* Pastel Purple for key strengths and capabilities */
.about-content .purple-text {
color: #667eea;
}
.skill-card {
padding: 2rem;
background: var(--light-background);
border-radius: var(--border-radius);
text-align: center;
transition: var(--transition);
}
.skill-card:hover {
transform: translateY(-5px);
}
.skill-card i {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
/* Skills Assessment Section */
.skills-assessment {
background: var(--light-background);
padding: 4rem 0;
position: relative;
}
.skills-assessment .section-header {
text-align: center;
margin-bottom: 3rem;
}
.skills-assessment .section-header h2 {
color: var(--primary-color);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.skills-assessment .section-header .subtitle {
color: var(--light-text);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.skills-rating-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.skills-column h4 {
color: var(--primary-color);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
text-align: center;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary-color);
}
.skill-rating {
margin-bottom: 1.2rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.skill-name {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-color);
line-height: 1.3;
}
.rating-bar {
position: relative;
height: 8px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: hidden;
}
.rating-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
border-radius: 4px;
transition: width 0.8s ease-in-out;
position: relative;
}
.rating-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.rating-text {
position: absolute;
right: -35px;
top: -2px;
font-size: 0.75rem;
font-weight: 600;
color: var(--primary-color);
background: white;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--primary-color);
}
/* Responsive design for skills rating */
@media (max-width: 768px) {
.skills-rating-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.skills-column h4 {
font-size: 1rem;
}
.skill-name {
font-size: 0.85rem;
}
.rating-text {
right: -30px;
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
.skills-rating-section {
padding: 1.5rem;
margin-top: 2rem;
}
.rating-text {
right: -25px;
font-size: 0.65rem;
}
}
/* Skills Assessment - Playful Version */
.skills-playful {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 4rem 0;
position: relative;
}
.skills-playful .section-header {
text-align: center;
margin-bottom: 3rem;
}
.skills-playful .section-header h2 {
color: white;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.skills-playful .section-header .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.skills-playful .skills-column h4 {
color: white;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
text-align: center;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.skills-playful .skill-rating {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
padding: 1rem;
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.skills-playful .skill-name {
font-size: 0.9rem;
font-weight: 500;
color: white;
line-height: 1.3;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.skills-playful .star-rating {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
}
.skills-playful .star {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.skills-playful .star::before {
content: '★';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
/* Color scheme for different rating levels */
.skills-playful .star-1.filled::before {
color: #ff6b6b; /* Red for level 1 */
}
.skills-playful .star-2.filled::before {
color: #ffa726; /* Orange for level 2 */
}
.skills-playful .star-3.filled::before {
color: #ffd54f; /* Yellow for level 3 */
}
.skills-playful .star-4.filled::before {
color: #4fc3f7; /* Blue for level 4 */
}
.skills-playful .star-5.filled::before {
color: #ab47bc; /* Purple for level 5 */
}
.skills-playful .star:hover {
transform: scale(1.2);
filter: brightness(1.2);
}
.skills-playful .rating-number {
font-size: 0.9rem;
font-weight: 600;
color: white;
text-align: center;
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 6px;
margin-top: 0.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Responsive design for playful skills */
@media (max-width: 768px) {
.skills-playful .skills-rating-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.skills-playful .skills-column h4 {
font-size: 1.1rem;
}
.skills-playful .skill-name {
font-size: 0.85rem;
}
.skills-playful .star {
width: 18px;
height: 18px;
}
.skills-playful .star::before {
font-size: 18px;
line-height: 18px;
}
}
@media (max-width: 480px) {
.skills-playful {
padding: 2rem 0;
}
.skills-playful .section-header h2 {
font-size: 2rem;
}
.skills-playful .star {
width: 16px;
height: 16px;
}
.skills-playful .star::before {
font-size: 16px;
line-height: 16px;
}
}
/* Skills Assessment - Modern Bars Version */
.skills-modern {
background: white;
padding: 4rem 0;
position: relative;
}
.skills-modern .section-header {
text-align: center;
margin-bottom: 3rem;
}
.skills-modern .section-header h2 {
color: #4A90E2;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: 'Inter', sans-serif;
}
.skills-modern .section-header .subtitle {
color: #666;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.skills-bars-container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 3rem;
}
.skills-category h3 {
color: #333;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
text-align: center;
font-family: 'Inter', sans-serif;
}
.skill-bar-item {
margin-bottom: 1.5rem;
}
.skill-bar {
position: relative;
height: 50px;
background: #f5f5f5;
border-radius: 25px;
overflow: hidden;
display: flex;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.skill-fill {
height: 100%;
border-radius: 25px;
position: relative;
transition: width 1s ease-in-out;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
color: white;
font-weight: 600;
font-size: 0.9rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.skill-label {
position: absolute;
left: 20px;
z-index: 2;
font-weight: 600;
color: white;
}
.skill-percentage {
position: absolute;
right: 20px;
z-index: 2;
font-weight: 600;
color: white;
}
/* Color scheme inspired by the image */
.skill-fill.communication {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.collaboration {
background: linear-gradient(90deg, #EC4899, #F472B6);
}
.skill-fill.leadership {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.problem-solving {
background: linear-gradient(90deg, #06B6D4, #22D3EE);
}
.skill-fill.critical-thinking {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.time-management {
background: linear-gradient(90deg, #EC4899, #F472B6);
}
.skill-fill.conflict-resolution {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.web-development {
background: linear-gradient(90deg, #10B981, #34D399);
}
.skill-fill.javascript {
background: linear-gradient(90deg, #F59E0B, #FBBF24);
}
.skill-fill.game-development {
background: linear-gradient(90deg, #EF4444, #F87171);
}
.skill-fill.database {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.seo {
background: linear-gradient(90deg, #06B6D4, #22D3EE);
}
.skill-fill.ui-ux {
background: linear-gradient(90deg, #EC4899, #F472B6);
}
.skill-fill.project-tools {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.creativity {
background: linear-gradient(90deg, #10B981, #34D399);
}
.skill-fill.adaptability {
background: linear-gradient(90deg, #06B6D4, #22D3EE);
}
.skill-fill.attention-detail {
background: linear-gradient(90deg, #F59E0B, #FBBF24);
}
.skill-fill.reliability {
background: linear-gradient(90deg, #10B981, #34D399);
}
.skill-fill.continuous-learning {
background: linear-gradient(90deg, #8B5CF6, #A855F7);
}
.skill-fill.work-ethic {
background: linear-gradient(90deg, #06B6D4, #22D3EE);
}
.skill-fill.empathy {
background: linear-gradient(90deg, #EC4899, #F472B6);
}
/* Animation for bars on load */
.skill-fill {
animation: fillBar 1.5s ease-out forwards;
}
@keyframes fillBar {
from {
width: 0% !important;
}
to {
width: var(--final-width) !important;
}
}
/* Hover effects */
.skill-bar:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.skill-bar:hover .skill-fill {
filter: brightness(1.1);
}
/* Responsive design */
@media (max-width: 768px) {
.skills-modern .section-header h2 {
font-size: 2rem;
}
.skills-category h3 {
font-size: 1.3rem;
}
.skill-bar {
height: 45px;
}
.skill-label, .skill-percentage {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.skills-modern {
padding: 2rem 0;
}
.skills-modern .section-header h2 {
font-size: 1.8rem;
}
.skill-bar {
height: 40px;
}
.skill-label, .skill-percentage {
font-size: 0.8rem;
padding: 0 15px;
}
}
/* Skills Assessment - 3-Column Modern Bars Version */
.skills-modern-3col {
background: white;
padding: 4rem 0;
position: relative;
}
.skills-modern-3col .section-header {
text-align: center;
margin-bottom: 3rem;
}
.skills-modern-3col .section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.skills-modern-3col .section-header .subtitle {
font-size: 1.1rem;
color: #666;
font-family: 'Inter', sans-serif;
}
.skills-modern-3col .section-header .assessment-note {
font-size: 1rem;
color: #666;
font-style: normal;
margin-top: 1rem;
font-family: 'Inter', sans-serif;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
text-align: center;
white-space: normal;
overflow: visible;
}
.skills-modern-3col .expert-text {
color: #667eea;
font-weight: 600;
}
.skills-modern-3col .proficient-text {
color: #f093fb;
font-weight: 600;
}
.skills-modern-3col .learning-text {
color: #4facfe;
font-weight: 600;
}
.skills-modern-3col .skills-rating-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.skills-modern-3col .skills-column {
background: #f8f9fa;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.skills-modern-3col .skills-column h4 {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
text-align: center;
font-family: 'Playfair Display', serif;
}
.skills-modern-3col .skill-bar-item {
margin-bottom: 1.5rem;
}
.skills-modern-3col .skill-bar {
position: relative;
height: 36px;
border-radius: 18px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.skills-modern-3col .skill-fill {
height: 100%;
border-radius: 18px;
transition: width 1s ease-in-out;
position: relative;
}
.skills-modern-3col .skill-label {
font-size: 0.9rem;
font-weight: 500;
color: white;
display: block;
margin-bottom: 0.2rem;
font-family: 'Inter', sans-serif;
}
.skills-modern-3col .skill-percentage {
font-size: 0.8rem;
font-weight: 600;
color: #333;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-family: 'Inter', sans-serif;
}
/* Color schemes for different skills - Solid Colors with Faded Backgrounds */
.skills-modern-3col .skill-bar.communication { background: rgba(102, 126, 234, 0.2); }
.skills-modern-3col .skill-bar.collaboration { background: rgba(240, 147, 251, 0.2); }
.skills-modern-3col .skill-bar.leadership { background: rgba(79, 172, 254, 0.2); }
.skills-modern-3col .skill-bar.problem-solving { background: rgba(67, 233, 123, 0.2); }
.skills-modern-3col .skill-bar.critical-thinking { background: rgba(250, 112, 154, 0.2); }
.skills-modern-3col .skill-bar.time-management { background: rgba(168, 237, 234, 0.2); }
.skills-modern-3col .skill-bar.conflict-resolution { background: rgba(255, 107, 53, 0.2); }
.skills-modern-3col .skill-bar.web-development { background: rgba(102, 126, 234, 0.2); }
.skills-modern-3col .skill-bar.javascript { background: rgba(240, 147, 251, 0.2); }
.skills-modern-3col .skill-bar.game-development { background: rgba(79, 172, 254, 0.2); }
.skills-modern-3col .skill-bar.database { background: rgba(67, 233, 123, 0.2); }
.skills-modern-3col .skill-bar.seo { background: rgba(250, 112, 154, 0.2); }
.skills-modern-3col .skill-bar.ui-ux { background: rgba(168, 237, 234, 0.2); }
.skills-modern-3col .skill-bar.project-tools { background: rgba(255, 107, 53, 0.2); }
.skills-modern-3col .skill-bar.creativity { background: rgba(102, 126, 234, 0.2); }
.skills-modern-3col .skill-bar.adaptability { background: rgba(240, 147, 251, 0.2); }
.skills-modern-3col .skill-bar.attention-detail { background: rgba(79, 172, 254, 0.2); }
.skills-modern-3col .skill-bar.reliability { background: rgba(67, 233, 123, 0.2); }
.skills-modern-3col .skill-bar.continuous-learning { background: rgba(250, 112, 154, 0.2); }
.skills-modern-3col .skill-bar.work-ethic { background: rgba(168, 237, 234, 0.2); }
.skills-modern-3col .skill-bar.empathy { background: rgba(255, 107, 53, 0.2); }
/* Solid fill colors */
.skills-modern-3col .communication { background: #667eea; }
.skills-modern-3col .collaboration { background: #f093fb; }
.skills-modern-3col .leadership { background: #4facfe; }
.skills-modern-3col .problem-solving { background: #43e97b; }
.skills-modern-3col .critical-thinking { background: #fa709a; }
.skills-modern-3col .time-management { background: #a8edea; }
.skills-modern-3col .conflict-resolution { background: #ff6b35; }
.skills-modern-3col .web-development { background: #667eea; }
.skills-modern-3col .javascript { background: #f093fb; }
.skills-modern-3col .game-development { background: #4facfe; }
.skills-modern-3col .database { background: #43e97b; }
.skills-modern-3col .seo { background: #fa709a; }
.skills-modern-3col .ui-ux { background: #a8edea; }
.skills-modern-3col .project-tools { background: #ff6b35; }
.skills-modern-3col .creativity { background: #667eea; }
.skills-modern-3col .adaptability { background: #f093fb; }
.skills-modern-3col .attention-detail { background: #4facfe; }
.skills-modern-3col .reliability { background: #43e97b; }
.skills-modern-3col .continuous-learning { background: #fa709a; }
.skills-modern-3col .work-ethic { background: #a8edea; }
.skills-modern-3col .empathy { background: #ff6b35; }
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Responsive design for skills assessment */
@media (max-width: 768px) {
.skills-modern-3col .skills-rating-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.skills-modern-3col .section-header h2 {
font-size: 2rem;
}
.skills-modern-3col .skills-column {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.skills-modern-3col {
padding: 2rem 0;
}
.skills-modern-3col .section-header h2 {
font-size: 1.8rem;
}
.skills-modern-3col .skills-column {
padding: 1rem;
}
.skills-modern-3col .skill-bar {
height: 28px;
}
.skills-modern-3col .skill-label {
font-size: 0.8rem;
}
}
/* Work Section */
.work-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.work-item {
position: relative;
cursor: pointer;
}
.work-item h3 {
margin-top: 1rem;
margin-bottom: 0.25rem;
font-size: 1.25rem;
}
.work-item p {
color: var(--light-text);
font-size: 0.875rem;
}
.work-image {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
aspect-ratio: 16/9;
}
.work-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.work-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.play-button {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transform: scale(0.8);
transition: transform 0.3s ease;
}
.play-button i {
color: var(--primary-color);
font-size: 1.5rem;
margin-left: 4px; /* Slight offset for play icon */
}
.work-item:hover .work-overlay {
opacity: 1;
}
.work-item:hover .play-button {
transform: scale(1);
}
.work-item:hover img {
transform: scale(1.05);
}
/* New Consulting Projects Section - Layered Layout */
.consulting-new {
background: var(--light-background);
padding: 6rem 0;
position: relative;
}
.consulting-new .section-header {
text-align: center;
margin-bottom: 4rem;
}
.consulting-new .section-header h2 {
color: var(--primary-color);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.consulting-new .section-header .subtitle {
color: var(--light-text);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
font-family: 'Inter', sans-serif;
}
/* Project Layered Layout */
.project-layered {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
align-items: center;
margin-bottom: 6rem;
padding: 3rem 0;
}
.project-layered:nth-child(even) {
direction: rtl;
}
.project-layered:nth-child(even) .project-content {
direction: ltr;
}
/* Image Gallery */
.project-images {
position: relative;
height: 450px;
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.image-stack {
position: relative;
width: 100%;
height: 100%;
}
.project-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: all 0.5s ease;
opacity: 0;
transform: scale(0.95);
}
.project-image.active {
opacity: 1;
transform: scale(1);
}
/* Image Navigation Slider */
.image-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
z-index: 10;
background: rgba(255, 255, 255, 0.2);
padding: 8px 12px;
border-radius: 25px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.image-dot {
width: 40px;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.image-dot::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: white;
border-radius: 3px;
transition: width 0.3s ease;
}
.image-dot.active::before {
width: 100%;
}
.image-dot:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.05);
}
/* Enhanced slider animations */
.image-dot::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.image-dot.active::after {
transform: translateX(100%);
}
/* Smooth transitions for all slider elements */
.image-nav {
transition: all 0.3s ease;
}
.image-nav:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateX(-50%) scale(1.05);
}
/* Image Counter */
.image-counter {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
z-index: 10;
}
/* Project Content */
.project-content {
padding: 2rem;
min-width: 0;
}
.project-content h3 {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
font-family: 'Playfair Display', serif;
line-height: 1.2;
word-wrap: break-word;
}
.project-subtitle {
font-size: 1.1rem;
color: var(--light-text);
margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
}
.project-description {
font-size: 1rem;
line-height: 1.7;
color: var(--text-color);
margin-bottom: 2rem;
font-family: 'Inter', sans-serif;
}
/* Project Stats */
.project-stats {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
font-family: 'Playfair Display', serif;
}
.stat-label {
display: block;
font-size: 0.9rem;
color: var(--light-text);
font-family: 'Inter', sans-serif;
margin-top: 0.25rem;
}
/* Project Tech Tags */
.project-tech {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2rem;
}
.tech-tag {
background: var(--primary-color);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
font-family: 'Inter', sans-serif;
}
/* Project Link */
.project-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-family: 'Inter', sans-serif;
transition: all 0.3s ease;
}
.project-link:hover {
color: var(--secondary-color);
transform: translateX(5px);
}
/* Responsive Design */
@media (max-width: 768px) {
.project-layered {
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
.project-layered:nth-child(even) {
direction: ltr;
}
.project-images {
height: 350px;
}
.image-nav {
bottom: 15px;
padding: 6px 10px;
}
.image-dot {
width: 30px;
height: 5px;
}
.image-counter {
top: 15px;
right: 15px;
padding: 6px 10px;
font-size: 0.8rem;
}
.project-content {
padding: 1rem 0;
}
.project-content h3 {
font-size: 1.8rem;
}
.project-stats {
gap: 1rem;
}
.stat-number {
font-size: 1.5rem;
}
}
/* Project Achievements Styling */
.project-achievements {
margin-top: 1rem;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e1e5e9;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
}
.achievements-connector {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 15px;
background: linear-gradient(180deg, transparent 0%, var(--primary-color) 100%);
}
.achievements-content h4 {
color: var(--primary-color);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
font-family: 'Playfair Display', serif;
}
.achievements-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.achievements-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.achievements-column li {
position: relative;
padding-left: 1.2rem;
margin-bottom: 0.5rem;
color: var(--text-color);
font-size: 0.9rem;
line-height: 1.4;
font-family: 'Inter', sans-serif;
}
.achievements-column li::before {
content: "▸";
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
}
@media (max-width: 480px) {
.consulting-new {
padding: 4rem 0;
}
.consulting-new .section-header h2 {
font-size: 2rem;
}
.project-images {
height: 250px;
}
.image-nav {
bottom: 10px;
padding: 4px 8px;
}
.image-dot {
width: 25px;
height: 4px;
}
.image-counter {
top: 10px;
right: 10px;
padding: 4px 8px;
font-size: 0.7rem;
}
.project-stats {
flex-direction: column;
gap: 1rem;
}
.achievements-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.project-achievements {
padding: 1rem;
margin-top: 1rem;
}
}
/* Project Achievements - Spanning both columns */
.project-achievements {
margin-top: 1rem;
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e1e5e9;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.project-achievements .achievement-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.project-achievements .achievement-list li {
position: relative;
padding-left: 1.5rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-color);
font-family: 'Inter', sans-serif;
}
.project-achievements .achievement-list li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.project-achievements {
margin-top: 1rem;
padding: 1rem;
}
.project-achievements .achievement-list {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
/* Contact Section */
.contact-form {
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #E2E8F0;
border-radius: var(--border-radius);
font-family: inherit;
transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.1);
}
.submit-button {
background: var(--primary-color);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: var(--border-radius);
cursor: pointer;
font-weight: 500;
transition: var(--transition);
}
.submit-button:hover {
background: var(--secondary-color);
}
/* Rotating Gallery Carousel */
.rotating-gallery {
padding: 100px 0;
background: var(--light-background);
text-align: center;
}
.gallery-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3rem;
}
.gallery {
--s: 280px; /* control the size */
--d: 15s; /* animation duration */
display: grid;
width: var(--s);
aspect-ratio: 1;
overflow: hidden;
padding: calc(var(--s)/20);
border-radius: 50%;
position: relative;
clip-path: circle(49.5%); /* to avoid a few glitch caused by overflow: hidden */
}
.gallery::after {
content: "";
position: absolute;
inset: 0;
padding: inherit;
border-radius: inherit;
background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.gallery > img {
grid-area: 1/1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
transform-origin: 50% calc(50%/0.342 + 50%); /* math.sin(180deg/9) ≈ 0.342 */
}
.gallery::after,
.gallery > img {
animation: rotate-gallery var(--d) infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.gallery > img:nth-child(2) {
animation-delay: calc(-1/9 * var(--d));
}
.gallery > img:nth-child(3) {
animation-delay: calc(-2/9 * var(--d));
}
.gallery > img:nth-child(4) {
animation-delay: calc(-3/9 * var(--d));
}
.gallery > img:nth-child(5) {
animation-delay: calc(-4/9 * var(--d));
}
.gallery > img:nth-child(6) {
animation-delay: calc(-5/9 * var(--d));
}
.gallery > img:nth-child(7) {
animation-delay: calc(-6/9 * var(--d));
}
.gallery > img:nth-child(8) {
animation-delay: calc(-7/9 * var(--d));
}
.gallery > img:nth-child(9) {
animation-delay: calc(-8/9 * var(--d));
}
@keyframes rotate-gallery {
0%, 3% {
transform: rotate(0);
}
9.11%, 12.11% {
transform: rotate(-40deg);
}
18.22%, 21.22% {
transform: rotate(-80deg);
}
27.33%, 30.33% {
transform: rotate(-120deg);
}
36.44%, 39.44% {
transform: rotate(-160deg);
}
45.55%, 48.55% {
transform: rotate(-200deg);
}
54.66%, 57.66% {
transform: rotate(-240deg);
}
63.77%, 66.77% {
transform: rotate(-280deg);
}
72.88%, 75.88% {
transform: rotate(-320deg);
}
98%, 100% {
transform: rotate(-360deg);
}
}
/* Responsive adjustments for the gallery */
@media (max-width: 768px) {
.gallery {
--s: 220px;
--d: 12s;
}
}
@media (max-width: 480px) {
.gallery {
--s: 180px;
--d: 10s;
}
}
/* NEW: Rectangular Gallery with Rounded Edges */
.rectangular-gallery {
--w: 400px; /* control the width */
--h: 300px; /* control the height */
--d: 15s; /* animation duration */
display: grid;
width: var(--w);
height: var(--h);
overflow: hidden;
padding: calc(var(--w)/20);
border-radius: 20px;
position: relative;
clip-path: inset(0 0 0 0); /* rectangular instead of circular */
}
.rectangular-gallery::after {
content: "";
position: absolute;
inset: 0;
padding: inherit;
border-radius: inherit;
background: repeating-linear-gradient(90deg, #789048 0px, #789048 10px, #DFBA69 10px, #DFBA69 20px);
background-size: 20px 100%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: border-slide var(--d) infinite linear;
}
.rectangular-gallery > img {
grid-area: 1/1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
transform-origin: center center;
}
.rectangular-gallery::after {
animation: border-slide var(--d) infinite linear;
}
.rectangular-gallery > img {
animation: slide-gallery var(--d) infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.rectangular-gallery > img:nth-child(2) {
animation-delay: calc(-1/9 * var(--d));
}
.rectangular-gallery > img:nth-child(3) {
animation-delay: calc(-2/9 * var(--d));
}
.rectangular-gallery > img:nth-child(4) {
animation-delay: calc(-3/9 * var(--d));
}
.rectangular-gallery > img:nth-child(5) {
animation-delay: calc(-4/9 * var(--d));
}
.rectangular-gallery > img:nth-child(6) {
animation-delay: calc(-5/9 * var(--d));
}
.rectangular-gallery > img:nth-child(7) {
animation-delay: calc(-6/9 * var(--d));
}
.rectangular-gallery > img:nth-child(8) {
animation-delay: calc(-7/9 * var(--d));
}
.rectangular-gallery > img:nth-child(9) {
animation-delay: calc(-8/9 * var(--d));
}
@keyframes border-slide {
0% {
background-position: 0px 0px;
}
100% {
background-position: 20px 0px;
}
}
@keyframes slide-gallery {
0%, 3% {
transform: translateX(0) scale(1);
opacity: 1;
}
9.11%, 12.11% {
transform: translateX(-100%) scale(0.8);
opacity: 0.8;
}
18.22%, 21.22% {
transform: translateX(-200%) scale(0.6);
opacity: 0.6;
}
27.33%, 30.33% {
transform: translateX(-300%) scale(0.4);
opacity: 0.4;
}
36.44%, 39.44% {
transform: translateX(-400%) scale(0.2);
opacity: 0.2;
}
45.55%, 48.55% {
transform: translateX(-500%) scale(0.1);
opacity: 0.1;
}
54.66%, 57.66% {
transform: translateX(-600%) scale(0.05);
opacity: 0.05;
}
63.77%, 66.77% {
transform: translateX(-700%) scale(0.02);
opacity: 0.02;
}
72.88%, 75.88% {
transform: translateX(-800%) scale(0.01);
opacity: 0.01;
}
98%, 100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
/* Responsive adjustments for the rectangular gallery */
@media (max-width: 768px) {
.rectangular-gallery {
--w: 320px;
--h: 240px;
--d: 12s;
}
}
@media (max-width: 480px) {
.rectangular-gallery {
--w: 280px;
--h: 210px;
--d: 10s;
}
}
/* Footer */
.footer {
background: var(--dark-background);
color: white;
padding: 4rem 0 2rem;
position: relative;
margin-top: 0;
overflow: hidden;
}
.footer-content {
position: relative;
z-index: 2;
}
.footer-waves {
position: absolute !important;
bottom: 100%;
left: 0;
width: 100%;
overflow: visible;
line-height: 0;
transform: translateY(1px); /* Prevent any tiny gaps */
}
.footer-waves svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 250px;
}
.footer-waves .shape-fill {
fill: var(--dark-background);
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
position: relative;
z-index: 1;
}
.footer-col h3 {
color: white;
margin-bottom: 1.5rem;
}
.social-links,
.post-links {
list-style: none;
}
.social-links li,
.post-links li {
margin-bottom: 1rem;
}
.social-links a,
.post-links a {
color: #A0AEC0;
text-decoration: none;
transition: var(--transition);
}
.social-links a:hover,
.post-links a:hover {
color: white;
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: #A0AEC0;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav {
padding: 1rem;
width: min(95%, 95vw);
}
.nav-links {
gap: 1rem;
font-size: 0.875rem;
}
.hero-layout {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.hiring-arrows {
flex-direction: column;
gap: 2rem;
}
.organic-arrow {
width: 250px;
height: 120px;
}
.arrow-content {
padding: 1.5rem;
}
.profile-image-container {
width: 220px;
height: 275px;
margin: 0 auto;
}
.profile-image-border {
transform: rotate(-2deg);
}
.profile-image-border:hover {
transform: rotate(0deg) scale(1.02);
}
.about-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-image {
order: -1;
}
.footer {
margin-top: 0;
}
.footer-waves svg {
height: 150px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.work-grid {
grid-template-columns: 1fr;
}
}
/* Animations */
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.15; }
50% { transform: scale(1.1); opacity: 0.25; }
100% { transform: scale(1); opacity: 0.15; }
}
@keyframes orbit {
0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}
@keyframes wave {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(10px) translateY(-10px); }
50% { transform: translateX(20px) translateY(0); }
75% { transform: translateX(10px) translateY(10px); }
100% { transform: translateX(0) translateY(0); }
}
.shape {
position: absolute;
opacity: 0.15;
border-radius: 50%;
pointer-events: none;
}
/* About section shapes */
.shape-about-1 {
width: 300px;
height: 300px;
top: 10%;
right: -100px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
animation: pulse 8s ease-in-out infinite;
}
.shape-about-2 {
width: 200px;
height: 200px;
bottom: 20%;
left: -50px;
background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
animation: orbit 15s linear infinite;
}
.shape-about-3 {
width: 150px;
height: 150px;
top: 40%;
left: 30%;
background: var(--accent-color);
animation: wave 10s ease-in-out infinite;
}
/* Work section shapes */
.shape-work-1 {
width: 250px;
height: 250px;
top: -50px;
right: 10%;
background: linear-gradient(135deg, var(--primary-color), transparent);
animation: float 12s ease-in-out infinite;
opacity: 0.2;
}
.shape-work-2 {
width: 180px;
height: 180px;
bottom: 10%;
left: 5%;
background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
animation: pulse 10s ease-in-out infinite;
opacity: 0.25;
}
.shape-work-3 {
width: 120px;
height: 120px;
top: 30%;
right: 20%;
background: var(--accent-color);
animation: orbit 20s linear infinite;
opacity: 0.2;
}
/* Showcase section shapes */
.shape-showcase-1 {
width: 400px;
height: 400px;
top: -100px;
left: -100px;
background: linear-gradient(45deg, var(--primary-color), transparent);
animation: pulse 15s ease-in-out infinite;
opacity: 0.15;
}
.shape-showcase-2 {
width: 200px;
height: 200px;
bottom: 20%;
right: 10%;
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
animation: wave 12s ease-in-out infinite;
opacity: 0.2;
}
.shape-showcase-3 {
width: 150px;
height: 150px;
top: 40%;
right: 30%;
background: var(--primary-color);
animation: orbit 25s linear infinite;
opacity: 0.18;
}
/* Contact section shapes */
.shape-contact-1 {
width: 350px;
height: 350px;
top: -50px;
right: -100px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
animation: pulse 12s ease-in-out infinite;
opacity: 0.2;
}
.shape-contact-2 {
width: 200px;
height: 200px;
bottom: 10%;
left: -50px;
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
animation: wave 15s ease-in-out infinite;
opacity: 0.25;
}
.shape-contact-3 {
width: 150px;
height: 150px;
top: 30%;
left: 20%;
background: var(--secondary-color);
animation: orbit 18s linear infinite;
opacity: 0.2;
}
/* Make all sections with shapes relative */
.about, .work, .showcase, .contact {
position: relative;
overflow: hidden;
}
/* Ensure content stays above shapes */
.section-header, .about-grid, .work-grid, .masonry-grid, .contact-content {
position: relative;
z-index: 2;
}
/* Showcase Section with Masonry Grid */
.showcase {
background-color: var(--light-background);
position: relative;
overflow: hidden;
}
.masonry-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.grid-item {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
transition: transform 0.3s ease;
}
.grid-item:hover {
transform: translateY(-5px);
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.grid-item:hover img {
transform: scale(1.05);
}
.grid-item-large {
grid-column: 1;
grid-row: 1 / span 2;
height: 100%;
}
.grid-item .item-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
transform: translateY(20px);
opacity: 0;
transition: all 0.3s ease;
}
.grid-item:hover .item-content {
transform: translateY(0);
opacity: 1;
}
.item-content h3 {
font-size: 1.25rem;
margin-bottom: 0.25rem;
color: white;
}
.item-content p {
font-size: 0.875rem;
opacity: 0.8;
}
@media (max-width: 768px) {
.masonry-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.grid-item-large {
grid-column: auto;
grid-row: auto;
}
}
.resume {
padding: 100px 0;
background-color: #fff;
}
.resume-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
width: 100%;
margin: 0;
}
.resume-card {
background: white;
border-radius: 15px;
padding: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.resume-card:hover {
transform: translateY(-5px);
}
.resume-header {
margin: 0;
padding: 2rem 2rem 1rem;
position: relative;
border-left: 5px solid var(--primary-color);
}
.resume-content {
padding: 0 2rem 2rem;
border-left: 5px solid var(--accent-color);
}
/* Add different colors for different positions */
.resume-card:nth-child(1) .resume-header {
border-left-color: var(--primary-color);
}
.resume-card:nth-child(1) .resume-content {
border-left-color: rgba(var(--primary-color-rgb), 0.3);
}
.resume-card:nth-child(2) .resume-header {
border-left-color: var(--secondary-color);
}
.resume-card:nth-child(2) .resume-content {
border-left-color: rgba(var(--secondary-color-rgb), 0.3);
}
.resume-card:nth-child(3) .resume-header {
border-left-color: var(--accent-color);
}
.resume-card:nth-child(3) .resume-content {
border-left-color: rgba(var(--accent-color-rgb), 0.3);
}
.resume-header h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: #333;
margin-bottom: 0.5rem;
position: relative;
}
.company {
font-family: 'Inter', sans-serif;
color: var(--text-color);
font-size: 1.1rem;
margin-bottom: 0.25rem;
opacity: 0.9;
}
.duration {
font-family: 'Inter', sans-serif;
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 500;
margin-top: 0.25rem;
}
.experience-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0;
}
.experience-list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 1rem;
font-family: 'Inter', sans-serif;
color: var(--text-color);
line-height: 1.6;
}
.experience-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--primary-color);
}
/* Update responsive styles */
@media (max-width: 768px) {
.resume-header,
.resume-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.resume-header h3 {
font-size: 1.5rem;
}
}
.resume-download {
text-align: center;
margin-top: 2rem;
}
.btn-download {
display: inline-block;
padding: 1rem 2rem;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 30px;
font-family: 'Inter', sans-serif;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid #4CAF50;
}
.btn-download:hover {
background-color: transparent;
color: #4CAF50;
}
.skills-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.skill-category {
margin-bottom: 1.5rem;
}
.skill-category h4 {
font-family: 'Playfair Display', serif;
color: var(--primary-color);
font-size: 1.2rem;
margin-bottom: 1rem;
position: relative;
}
.skill-category h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-color);
}
.skills-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
list-style: none;
padding: 0;
}
.skills-list li {
position: relative;
padding-left: 1.5rem;
font-family: 'Inter', sans-serif;
color: var(--text-color);
line-height: 1.6;
}
.skills-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
}
.resume .section-header {
text-align: center;
margin-bottom: 3rem;
}
.resume .subtitle {
color: var(--light-text);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
@media (max-width: 768px) {
.skills-container {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Consulting Section */
.consulting {
background-color: var(--light-background);
padding: 100px 0;
}
.consulting-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 3rem auto 0;
align-items: start;
}
.project-link {
text-decoration: none;
color: inherit;
display: block;
position: relative;
}
.project-link::after {
content: '';
position: absolute;
top: 1rem;
right: 1rem;
width: 24px;
height: 24px;
background: url('data:image/svg+xml,');
opacity: 0;
transform: translate(10px, -10px);
transition: all 0.3s ease;
z-index: 10;
}
.project-link:hover::after {
opacity: 1;
transform: translate(0, 0);
}
.project-link:hover .project-image img {
transform: scale(1.05);
}
.project-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
height: auto;
display: flex;
flex-direction: column;
}
.project-card:hover {
transform: translateY(-5px);
}
.project-image {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.project-preview {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.project-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
opacity: 0.2;
transition: opacity 0.3s ease;
}
.project-card:hover .project-image::after {
opacity: 0;
}
.project-card:hover .project-preview {
transform: scale(1.05);
}
.image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-text {
color: var(--light-text);
font-size: 0.9rem;
font-weight: 500;
}
.project-content {
padding: 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.project-duration {
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 500;
margin: 0.5rem 0 1rem;
}
.project-description {
margin-bottom: 1.5rem;
}
.achievement-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.achievement-list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.75rem;
font-size: 0.95rem;
color: var(--text-color);
}
.achievement-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--primary-color);
}
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.tech-tag {
background: var(--light-background);
color: var(--primary-color);
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.testimonial {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1.5rem;
padding: 1.5rem 2rem 0;
position: relative;
}
.testimonial-slider {
position: relative;
margin: 2rem 0;
min-height: 200px;
padding: 0 1rem;
}
.testimonial-slide {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.testimonial-slide.active {
visibility: visible;
position: relative;
opacity: 1;
}
.testimonial-header {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 1rem;
}
.testimonial-avatar {
flex-shrink: 0;
width: 80px;
height: 80px;
}
.testimonial-bubble {
flex: 1;
background: linear-gradient(135deg, var(--light-background), #e8eef9);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.testimonial-bubble::before {
content: '';
position: absolute;
left: -10px;
top: 30px;
width: 20px;
height: 20px;
background: linear-gradient(135deg, var(--light-background), #e8eef9);
transform: rotate(45deg);
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.05);
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.testimonial-bubble blockquote {
font-style: italic;
color: var(--text-color);
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
position: relative;
z-index: 1;
}
.testimonial-bubble .testimonial-author {
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 500;
margin-top: 1rem;
text-align: right;
}
.testimonial-controls {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
gap: 1.5rem;
}
.testimonial-nav {
background: none;
border: 2px solid var(--primary-color);
color: var(--primary-color);
cursor: pointer;
padding: 0.6rem;
transition: all 0.3s ease;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.testimonial-nav:hover {
transform: scale(1.1);
background: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}
.testimonial-nav:active {
transform: scale(0.95);
}
.testimonial-dots {
display: flex;
gap: 0.75rem;
}
.testimonial-dot {
width: 10px;
height: 10px;
border: none;
background-color: #E2E8F0;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50%;
padding: 0;
position: relative;
}
.testimonial-dot::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid var(--primary-color);
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
}
.testimonial-dot:hover {
transform: scale(1.2);
background-color: #CBD5E0;
}
.testimonial-dot.active {
background-color: var(--primary-color);
transform: scale(1.2);
}
.testimonial-dot.active::after {
opacity: 1;
transform: scale(1);
}
@media (max-width: 768px) {
.testimonial-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.testimonial-bubble::before {
left: 50%;
top: -10px;
transform: translateX(-50%) rotate(45deg);
}
.testimonial-bubble .testimonial-author {
text-align: center;
}
}
/* Car Animation */
#car {
transform-origin: center;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
#car image {
transform: scale(1, 1);
}
#carPath {
stroke: rgba(0,0,0,0.1);
fill: none;
}
@media (prefers-reduced-motion: reduce) {
#car {
display: none;
}
}
/* Site Family Showcase */
.site-family {
margin: 2rem 0;
background: var(--light-background);
border-radius: var(--border-radius);
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.site-family-tabs {
display: flex;
gap: 0.5rem;
margin: 1rem 0;
overflow-x: auto;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.site-family-tabs::-webkit-scrollbar {
display: none;
}
.site-tab {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--light-background);
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85rem;
color: var(--text-color);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.site-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: currentColor;
opacity: 0.1;
transition: opacity 0.3s ease;
}
.site-tab i {
font-size: 0.9rem;
opacity: 0.7;
position: relative;
}
/* Site-specific colors */
.site-tab[data-site="uinterview"] {
color: #E53E3E;
opacity: 0.7;
}
.site-tab[data-site="upolitics"] {
color: #3182CE;
opacity: 0.7;
}
.site-tab[data-site="usports"] {
color: #38A169;
opacity: 0.7;
}
.site-tab[data-site="ugames"] {
color: #805AD5;
opacity: 0.7;
}
.site-tab.active {
opacity: 1;
background: rgba(var(--primary-color-rgb), 0.1);
}
.site-tab.active::before {
opacity: 0;
}
.site-tab.active i {
opacity: 1;
}
.site-tab:hover:not(.active)::before {
opacity: 0.15;
}
/* Dark theme adjustments */
.additional-projects .site-tab {
background: rgba(255, 255, 255, 0.05);
}
.additional-projects .site-tab::before {
opacity: 0.2;
}
.additional-projects .site-tab:hover:not(.active)::before {
opacity: 0.3;
}
@media (max-width: 768px) {
.project-content h3 {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.project-content h3 .subtitle {
font-size: 0.75em;
opacity: 0.7;
}
.site-family-tabs {
margin: 0.75rem 0;
}
.site-tab {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.site-tab i {
font-size: 0.8rem;
}
}
.site-preview-container {
position: relative;
width: 100%;
height: 100%;
}
.site-preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scale(1.05);
transition: all 0.5s ease;
object-fit: cover;
}
.site-preview.active {
opacity: 1;
transform: scale(1);
}
.browser-frame {
background: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.browser-header {
background: #f1f5f9;
padding: 0.75rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.browser-dots {
display: flex;
gap: 0.375rem;
}
.browser-dots span {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #e2e8f0;
}
.browser-dots span:nth-child(1) { background: #ef4444; }
.browser-dots span:nth-child(2) { background: #f59e0b; }
.browser-dots span:nth-child(3) { background: #10b981; }
.browser-address {
flex-grow: 1;
background: white;
padding: 0.375rem 1rem;
border-radius: 15px;
font-size: 0.875rem;
color: var(--light-text);
font-family: monospace;
}
.browser-frame img {
width: 100%;
height: calc(100% - 3rem);
object-fit: cover;
object-position: top;
}
/* Dark theme adjustments */
.additional-projects .site-family {
background: rgba(255, 255, 255, 0.1);
}
.additional-projects .site-tab {
background: rgba(255, 255, 255, 0.05);
color: white;
}
.additional-projects .site-tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.1);
}
.additional-projects .browser-frame {
background: rgba(255, 255, 255, 0.05);
}
.additional-projects .browser-header {
background: rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.1);
}
.additional-projects .browser-address {
background: rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
.site-family {
padding: 1rem;
}
.site-preview-container {
height: 300px;
}
.site-family-tabs {
margin: 0.75rem 0;
}
.site-tab {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.site-tab i {
font-size: 0.8rem;
}
}
.project-content h3 {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.project-content h3 .subtitle {
font-weight: 400;
color: #718096;
opacity: 0.7;
font-size: 0.85em;
}
.site-family-tabs {
display: flex;
gap: 0.5rem;
margin: 1rem 0;
overflow-x: auto;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
.site-tab {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--light-background);
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0.7;
}
/* Site-specific colors */
.site-tab[data-site="uinterview"] {
color: #E53E3E;
}
.site-tab[data-site="upolitics"] {
color: #3182CE;
}
.site-tab[data-site="usports"] {
color: #38A169;
}
.site-tab[data-site="ugames"] {
color: #805AD5;
}
.site-tab.active {
opacity: 1;
background: rgba(var(--primary-color-rgb), 0.1);
}
.site-tab:hover {
opacity: 1;
}
.site-tab i {
font-size: 0.9rem;
}
@media (max-width: 768px) {
.project-content h3 {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.project-content h3 .subtitle {
font-size: 0.75em;
opacity: 0.7;
}
.site-family-tabs {
margin: 0.75rem 0;
}
.site-tab {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.site-tab i {
font-size: 0.8rem;
}
}
.testimonial-slider {
position: relative;
overflow: visible;
margin: 2rem 0;
min-height: 200px; /* Ensure minimum height for content */
}
.testimonial-slide {
display: none;
opacity: 0;
position: absolute;
width: 100%;
height: auto;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transition: clip-path 0.6s ease, opacity 0.3s ease;
}
.testimonial-slide.active {
display: block;
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.testimonial-slide.slide-out {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
opacity: 0;
}
/* Ensure testimonial content is not cut off */
.testimonial-header {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 1rem;
position: relative;
width: 100%;
}
.testimonial-bubble {
position: relative;
background: linear-gradient(135deg, var(--light-background), #e8eef9);
border-radius: 20px;
padding: 1.5rem;
flex-grow: 1;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
}
/* Rest of your testimonial styles remain the same */
.testimonial-controls {
display: flex;
align-items: center;
justify-content: center;
margin-top: 1.5rem;
gap: 1.5rem;
}
.testimonial-nav {
background: none;
border: 2px solid var(--primary-color);
color: var(--primary-color);
cursor: pointer;
padding: 0.6rem;
transition: all 0.3s ease;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.testimonial-nav:hover {
transform: scale(1.1);
background: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}
.testimonial-nav:active {
transform: scale(0.95);
}
.testimonial-nav.prev {
margin-right: 0.5rem;
}
.testimonial-nav.next {
margin-left: 0.5rem;
}
.testimonial-nav i {
font-size: 1rem;
transition: transform 0.3s ease;
}
.testimonial-nav.prev:hover i {
transform: translateX(-2px);
}
.testimonial-nav.next:hover i {
transform: translateX(2px);
}
.testimonial-dots {
display: flex;
gap: 0.75rem;
}
.testimonial-dot {
width: 10px;
height: 10px;
border: none;
background-color: #E2E8F0;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50%;
padding: 0;
position: relative;
}
.testimonial-dot::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid var(--primary-color);
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
}
.testimonial-dot:hover {
transform: scale(1.2);
background-color: #CBD5E0;
}
.testimonial-dot.active {
background-color: var(--primary-color);
transform: scale(1.2);
}
.testimonial-dot.active::after {
opacity: 1;
transform: scale(1);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.consulting-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.project-image {
height: 250px;
}
}
/* Client Portal Styles */
.billing {
background: var(--light-background);
position: relative;
overflow: hidden;
}
.billing-card {
background: var(--background);
border-radius: var(--border-radius);
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 2rem;
margin-top: 2rem;
position: relative;
overflow: hidden;
}
.billing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.billing-icon {
flex-shrink: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
.billing-content {
flex: 1;
}
.billing-content h3 {
margin-bottom: 1rem;
color: var(--text-color);
}
.billing-content p {
margin-bottom: 2rem;
color: var(--light-text);
line-height: 1.6;
}
.billing-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--primary-color);
color: white;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.billing-button:hover {
background: #45a049;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}
.services {
position: relative;
overflow: hidden;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: var(--background);
border-radius: var(--border-radius);
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.service-card h3 {
margin-bottom: 1rem;
color: var(--text-color);
}
.service-card p {
color: var(--light-text);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.service-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-tag {
background: rgba(76, 175, 80, 0.1);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.pricing {
background: var(--light-background);
position: relative;
overflow: hidden;
}
.pricing-card {
background: var(--background);
border-radius: var(--border-radius);
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
display: flex;
align-items: flex-start;
gap: 2rem;
margin-top: 2rem;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
}
.pricing-icon {
flex-shrink: 0;
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
.pricing-content {
flex: 1;
}
.pricing-content h3 {
margin-bottom: 1rem;
color: var(--text-color);
}
.pricing-content p {
margin-bottom: 2rem;
color: var(--light-text);
line-height: 1.6;
}
.rate-breakdown {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.rate-item {
background: rgba(76, 175, 80, 0.05);
padding: 1.5rem;
border-radius: 10px;
border-left: 4px solid var(--primary-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.rate-label {
font-weight: 600;
color: var(--text-color);
}
.rate-amount {
font-weight: 700;
color: var(--primary-color);
font-size: 1.125rem;
}
.pricing-note {
font-size: 0.875rem;
color: var(--light-text);
font-style: italic;
margin-top: 1rem;
}
.contact-cta {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-content h2 {
color: white;
margin-bottom: 1rem;
}
.cta-content p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
font-size: 1.125rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-button.primary {
background: white;
color: var(--primary-color);
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cta-button.primary:hover {
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.cta-button.secondary {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: 2px solid rgba(255, 255, 255, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.cta-button.secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* Active navigation state */
.nav-links a.active {
color: var(--primary-color);
font-weight: 600;
}
/* Responsive adjustments for client portal */
@media (max-width: 768px) {
.billing-card {
flex-direction: column;
text-align: center;
padding: 2rem;
}
.billing-icon {
margin-bottom: 1rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.service-card {
padding: 2rem;
}
.pricing-card {
flex-direction: column;
text-align: center;
padding: 2rem;
}
.pricing-icon {
margin-bottom: 1rem;
}
.rate-breakdown {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-button {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Expertise Section Styles */
.expertise {
position: relative;
overflow: hidden;
}
.expertise-content {
margin-top: 3rem;
}
.expertise-intro {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3rem;
background: var(--background);
padding: 2.5rem;
border-radius: var(--border-radius);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.expertise-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.75rem;
}
.expertise-text h3 {
margin-bottom: 1rem;
color: var(--text-color);
}
.expertise-text p {
color: var(--light-text);
line-height: 1.6;
font-size: 1.125rem;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.tool-category {
background: var(--background);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.tool-category:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.tool-category h4 {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
color: var(--text-color);
font-size: 1.25rem;
}
.tool-category h4 i {
color: var(--primary-color);
font-size: 1.125rem;
}
.tool-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tool-tag {
background: rgba(33, 150, 243, 0.1);
color: var(--secondary-color);
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid rgba(33, 150, 243, 0.2);
transition: var(--transition);
}
.tool-tag:hover {
background: var(--secondary-color);
color: white;
transform: translateY(-2px);
}
.optimization-card {
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
color: white;
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
display: flex;
align-items: flex-start;
gap: 2rem;
position: relative;
overflow: hidden;
}
.optimization-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.optimization-icon {
flex-shrink: 0;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
backdrop-filter: blur(10px);
}
.optimization-content {
flex: 1;
position: relative;
z-index: 1;
}
.optimization-content h3 {
margin-bottom: 1rem;
color: white;
}
.optimization-content p {
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-size: 1.125rem;
}
.optimization-benefits {
display: grid;
gap: 1rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 1rem;
color: rgba(255, 255, 255, 0.9);
}
.benefit-item i {
color: white;
font-size: 1.125rem;
flex-shrink: 0;
}
/* Responsive adjustments for expertise section */
@media (max-width: 768px) {
.expertise-intro {
flex-direction: column;
text-align: center;
padding: 2rem;
}
.expertise-icon {
margin-bottom: 1rem;
}
.tools-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.tool-category {
padding: 1.5rem;
}
.optimization-card {
flex-direction: column;
text-align: center;
padding: 2rem;
}
.optimization-icon {
margin-bottom: 1rem;
}
}
/* Email Gate Styles */
.email-gate {
margin: 2rem 0;
text-align: center;
}
.gate-btn {
position: relative;
background: none;
border: none;
padding: 0;
cursor: pointer;
width: 100%;
max-width: 500px;
margin: 0 auto;
display: block;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.gate-btn:active {
transform: translateY(0);
}
.email-banner {
display: flex;
align-items: center;
padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.email-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 1.5rem;
}
.email-text {
flex: 1;
text-align: left;
}
.email-address {
font-family: 'Courier New', monospace;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 0.25rem;
}
.email-hint {
font-size: 0.875rem;
opacity: 0.8;
font-weight: 400;
}
.qr-placeholder {
flex-shrink: 0;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.75rem;
margin-left: 1rem;
}
.qr-placeholder i {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.hint {
display: block;
margin-top: 0.75rem;
font-size: 0.875rem;
color: #666;
font-weight: 500;
}
/* Removed conflicting progress bar styles */
.revealed {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 0 auto;
max-width: 500px;
}
.revealed.hidden {
display: none;
}
.mailto {
color: white;
text-decoration: none;
font-family: 'Courier New', monospace;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 1px;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
transition: background 0.2s ease;
}
.mailto:hover {
background: rgba(255, 255, 255, 0.3);
color: white;
text-decoration: none;
}
.copy {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.copy:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
}
.copied {
color: #4ade80;
font-weight: 600;
font-size: 0.875rem;
}
.copied.hidden {
display: none;
}
/* Responsive adjustments for email gate */
@media (max-width: 768px) {
.email-banner {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.email-icon {
margin-right: 0;
margin-bottom: 1rem;
}
.email-text {
text-align: center;
margin-bottom: 1rem;
}
.qr-placeholder {
margin-left: 0;
}
.revealed {
flex-direction: column;
gap: 0.75rem;
}
.email-address {
font-size: 1rem;
letter-spacing: 1px;
}
}
/* NEW: Working Image Slider CSS */
.working-slider {
padding: 100px 0;
background: var(--light-background, #f8f9fa);
text-align: center;
}
.slider-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3rem;
}
.parent {
width: 681px;
height: 384px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 16px;
background: #000;
border: 1px solid #a8edea;
}
.parent svg {
position: absolute;
z-index: 1;
width: 681px;
height: 384px;
top: 0;
left: 0;
}
.parent button {
position: absolute;
z-index: 50;
width: 40px;
overflow: hidden;
height: 40px;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.parent button:focus {
outline-width: 0;
}
.parent circle {
fill: none;
transition: 0.3s;
}
/* Pastel colored circles for the main slider */
/* Left side circles (svg2) - Blue/Purple theme */
.parent .circle1 { stroke: #667eea; transition-delay: 0.05s; }
.parent .circle2 { stroke: #f093fb; transition-delay: 0.1s; }
.parent .circle3 { stroke: #4facfe; transition-delay: 0.15s; }
.parent .circle4 { stroke: #43e97b; transition-delay: 0.2s; }
.parent .circle5 { stroke: #fa709a; transition-delay: 0.25s; }
.parent .circle6 { stroke: #a8edea; transition-delay: 0.3s; }
.parent .circle7 { stroke: #667eea; transition-delay: 0.35s; }
.parent .circle8 { stroke: #f093fb; transition-delay: 0.4s; }
.parent .circle9 { stroke: #4facfe; transition-delay: 0.45s; }
/* Right side circles (svg1) - Green/Teal theme */
.parent .circle10 { stroke: #43e97b; transition-delay: 0.05s; }
.parent .circle11 { stroke: #fa709a; transition-delay: 0.1s; }
.parent .circle12 { stroke: #a8edea; transition-delay: 0.15s; }
.parent .circle13 { stroke: #667eea; transition-delay: 0.2s; }
.parent .circle14 { stroke: #f093fb; transition-delay: 0.25s; }
.parent .circle15 { stroke: #4facfe; transition-delay: 0.3s; }
.parent .circle16 { stroke: #43e97b; transition-delay: 0.35s; }
.parent .circle17 { stroke: #fa709a; transition-delay: 0.4s; }
.parent .circle18 { stroke: #a8edea; transition-delay: 0.45s; }
.parent #svg1 circle {
transition-timing-function: linear;
}
.parent #svg2 circle {
transition-timing-function: linear;
}
.parent #Capa_1 {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-7px, -8px);
}
.parent #Capa_2 {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-9px, -8px);
}
.parent .right {
margin-left: 628px;
margin-top: 168px;
border: 1px solid #849494;
background-color: transparent;
transition: .5s;
}
.parent .right:hover {
background-color: #fff;
}
.parent .left {
margin-left: 0.5%;
margin-top: 168px;
border: 1px solid #849494;
background-color: transparent;
transition: .5s;
}
.parent .left:hover {
background-color: #fff;
}
.parent .slider {
position: absolute;
width: 400%;
height: 100%;
background: #000;
display: flex;
overflow: hidden;
top: 0;
left: 0;
}
.parent .slide1, .parent .slide2, .parent .slide3, .parent .slide4 {
position: absolute;
background-position: center;
background-size: cover;
color: transparent;
font-size: 0;
padding-top: 0;
font-weight: 800;
font-family: 'Heebo', sans-serif;
text-align: center;
width: 25%;
height: 100%;
z-index: 10;
transition: 1.4s;
top: 0;
}
.parent .slide1 {
background-image: url('images/projects/uinterview-preview.webp');
left: 0%;
background-repeat: no-repeat;
background-size: cover;
}
.parent .slide2 {
background-image: url('images/projects/upolitics-preview.webp');
left: 25%;
background-repeat: no-repeat;
background-size: cover;
}
.parent .slide3 {
background-image: url('images/projects/usports-preview.webp');
left: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.parent .slide4 {
background-image: url('images/projects/nydata-preview.jpg');
left: 75%;
background-repeat: no-repeat;
background-size: cover;
}
.parent .tran {
transform: scale(1.3);
}
.parent .up1 {
z-index: 20;
}
.parent .up2 {
z-index: 40;
}
.parent .steap {
stroke-width: 0;
}
.parent .streak {
stroke-width: 82px;
}
@media (max-width: 700px) {
.parent {
margin-left: 1%;
}
}
/* Consulting Projects Sliders */
/* Uinterview Slider */
.parent-uinterview {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 16px;
background: #000;
/* Temporary debugging - remove after fixing */
border: 2px solid green;
}
.parent-uinterview svg {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.parent-uinterview button {
position: absolute;
z-index: 100;
width: 40px;
overflow: hidden;
height: 40px;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.parent-uinterview button:focus {
outline-width: 0;
}
.parent-uinterview circle {
fill: none;
transition: 0.3s;
}
/* Pastel colored circles for Uinterview slider */
.parent-uinterview .circle1-uinterview { stroke: #667eea; transition-delay: 0.05s; }
.parent-uinterview .circle2-uinterview { stroke: #f093fb; transition-delay: 0.1s; }
.parent-uinterview .circle3-uinterview { stroke: #4facfe; transition-delay: 0.15s; }
.parent-uinterview .circle4-uinterview { stroke: #43e97b; transition-delay: 0.2s; }
.parent-uinterview .circle5-uinterview { stroke: #fa709a; transition-delay: 0.25s; }
.parent-uinterview .circle6-uinterview { stroke: #a8edea; transition-delay: 0.3s; }
.parent-uinterview .circle7-uinterview { stroke: #667eea; transition-delay: 0.35s; }
.parent-uinterview .circle8-uinterview { stroke: #f093fb; transition-delay: 0.4s; }
.parent-uinterview .circle9-uinterview { stroke: #4facfe; transition-delay: 0.45s; }
.parent-uinterview .circle10-uinterview { stroke: #43e97b; transition-delay: 0.05s; }
.parent-uinterview .circle11-uinterview { stroke: #fa709a; transition-delay: 0.1s; }
.parent-uinterview .circle12-uinterview { stroke: #a8edea; transition-delay: 0.15s; }
.parent-uinterview .circle13-uinterview { stroke: #667eea; transition-delay: 0.2s; }
.parent-uinterview .circle14-uinterview { stroke: #f093fb; transition-delay: 0.25s; }
.parent-uinterview .circle15-uinterview { stroke: #4facfe; transition-delay: 0.3s; }
.parent-uinterview .circle16-uinterview { stroke: #43e97b; transition-delay: 0.35s; }
.parent-uinterview .circle17-uinterview { stroke: #fa709a; transition-delay: 0.4s; }
.parent-uinterview .circle18-uinterview { stroke: #a8edea; transition-delay: 0.45s; }
.parent-uinterview #svg1-uinterview circle {
transition-timing-function: linear;
}
.parent-uinterview #svg2-uinterview circle {
transition-timing-function: linear;
}
.parent-uinterview #Capa_1_uinterview {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-7px, -8px);
}
.parent-uinterview #Capa_2_uinterview {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-9px, -8px);
}
.parent-uinterview .right-uinterview {
right: 10px;
top: 50%;
transform: translateY(-50%);
border: 1px solid #849494;
background-color: rgba(255, 255, 255, 0.9);
transition: .5s;
display: flex;
align-items: center;
justify-content: center;
}
.parent-uinterview .right-uinterview:hover {
background-color: #fff;
}
.parent-uinterview .left-uinterview {
left: 10px;
top: 50%;
transform: translateY(-50%);
border: 1px solid #849494;
background-color: rgba(255, 255, 255, 0.9);
transition: .5s;
display: flex;
align-items: center;
justify-content: center;
}
.parent-uinterview .left-uinterview:hover {
background-color: #fff;
}
/* Custom CSS Arrows */
.parent-uinterview .arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #333333;
display: block;
margin: 0 auto;
}
.parent-uinterview .arrow-left {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid #333333;
display: block;
margin: 0 auto;
}
.parent-uinterview .right-uinterview:hover .arrow-right {
border-left-color: #000000;
}
.parent-uinterview .left-uinterview:hover .arrow-left {
border-right-color: #000000;
}
.parent-uinterview .slider-uinterview {
position: absolute;
width: 300%;
height: 100%;
background: #000;
overflow: hidden;
top: 0;
left: 0;
transition: left 0.8s ease-in-out;
border: 2px solid red; /* DEBUG: Temporary border */
}
.parent-uinterview .slide1-uinterview, .parent-uinterview .slide2-uinterview, .parent-uinterview .slide3-uinterview {
position: absolute;
background-position: center;
background-size: cover;
color: white;
font-size: 24px;
padding-top: 20px;
font-weight: 800;
font-family: 'Heebo', sans-serif;
text-align: center;
width: 33.333%;
height: 100%;
z-index: 10;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
border: 1px solid yellow; /* DEBUG: Temporary border */
background-color: rgba(0,0,0,0.3); /* DEBUG: Semi-transparent background */
}
.parent-uinterview .slide1-uinterview {
background-image: url('images/projects/uinterview-preview.webp');
left: 0%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-uinterview .slide2-uinterview {
background-image: url('images/projects/upolitics-preview.webp');
left: 33.333%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-uinterview .slide3-uinterview {
background-image: url('images/projects/usports-preview.webp');
left: 66.666%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-uinterview .tran-uinterview {
transform: scale(1.3);
}
.parent-uinterview .up1-uinterview {
z-index: 20;
}
.parent-uinterview .up2-uinterview {
z-index: 30;
}
.parent-uinterview .steap-uinterview {
stroke-width: 0;
}
.parent-uinterview .streak-uinterview {
stroke-width: 82px;
}
/* NY Data Science Slider */
.parent-nydata {
width: 681px;
height: 384px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 16px;
background: #000;
}
.parent-nydata svg {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.parent-nydata button {
position: absolute;
z-index: 50;
width: 40px;
overflow: hidden;
height: 40px;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.parent-nydata button:focus {
outline-width: 0;
}
.parent-nydata circle {
fill: none;
transition: 0.3s;
}
/* Pastel colored circles for NY Data Science slider */
.parent-nydata .circle1-nydata { stroke: #667eea; transition-delay: 0.05s; }
.parent-nydata .circle2-nydata { stroke: #f093fb; transition-delay: 0.1s; }
.parent-nydata .circle3-nydata { stroke: #4facfe; transition-delay: 0.15s; }
.parent-nydata .circle4-nydata { stroke: #43e97b; transition-delay: 0.2s; }
.parent-nydata .circle5-nydata { stroke: #fa709a; transition-delay: 0.25s; }
.parent-nydata .circle6-nydata { stroke: #a8edea; transition-delay: 0.3s; }
.parent-nydata .circle7-nydata { stroke: #667eea; transition-delay: 0.35s; }
.parent-nydata .circle8-nydata { stroke: #f093fb; transition-delay: 0.4s; }
.parent-nydata .circle9-nydata { stroke: #4facfe; transition-delay: 0.45s; }
.parent-nydata .circle10-nydata { stroke: #43e97b; transition-delay: 0.05s; }
.parent-nydata .circle11-nydata { stroke: #fa709a; transition-delay: 0.1s; }
.parent-nydata .circle12-nydata { stroke: #a8edea; transition-delay: 0.15s; }
.parent-nydata .circle13-nydata { stroke: #667eea; transition-delay: 0.2s; }
.parent-nydata .circle14-nydata { stroke: #f093fb; transition-delay: 0.25s; }
.parent-nydata .circle15-nydata { stroke: #4facfe; transition-delay: 0.3s; }
.parent-nydata .circle16-nydata { stroke: #43e97b; transition-delay: 0.35s; }
.parent-nydata .circle17-nydata { stroke: #fa709a; transition-delay: 0.4s; }
.parent-nydata .circle18-nydata { stroke: #a8edea; transition-delay: 0.45s; }
.parent-nydata #svg1-nydata circle {
transition-timing-function: linear;
}
.parent-nydata #svg2-nydata circle {
transition-timing-function: linear;
}
.parent-nydata #Capa_1_nydata {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-7px, -8px);
}
.parent-nydata #Capa_2_nydata {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-9px, -8px);
}
.parent-nydata .right-nydata {
right: 10px;
top: 50%;
transform: translateY(-50%);
border: 1px solid #849494;
background-color: transparent;
transition: .5s;
}
.parent-nydata .right-nydata:hover {
background-color: #fff;
}
.parent-nydata .left-nydata {
left: 10px;
top: 50%;
transform: translateY(-50%);
border: 1px solid #849494;
background-color: transparent;
transition: .5s;
}
.parent-nydata .left-nydata:hover {
background-color: #fff;
}
.parent-nydata .slider-nydata {
position: absolute;
width: 300%;
height: 100%;
background: #000;
display: flex;
overflow: hidden;
top: 0;
left: 0;
}
.parent-nydata .slide1-nydata, .parent-nydata .slide2-nydata, .parent-nydata .slide3-nydata {
position: absolute;
background-position: center;
background-size: cover;
color: transparent;
font-size: 0;
padding-top: 0;
font-weight: 800;
font-family: 'Heebo', sans-serif;
text-align: center;
width: 33.333%;
height: 100%;
z-index: 10;
transition: 1.4s;
top: 0;
}
.parent-nydata .slide1-nydata {
background-image: url('images/projects/nydata-preview.jpg');
left: 0%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-nydata .slide2-nydata {
background-image: url('images/projects/nydata-preview.jpg');
left: 33.333%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-nydata .slide3-nydata {
background-image: url('images/projects/nydata-preview.jpg');
left: 66.666%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-nydata .tran-nydata {
transform: scale(1.3);
}
.parent-nydata .up1-nydata {
z-index: 20;
}
.parent-nydata .up2-nydata {
z-index: 40;
}
.parent-nydata .steap-nydata {
stroke-width: 0;
}
.parent-nydata .streak-nydata {
stroke-width: 82px;
}
/* Hand Therapy Slider */
.parent-handtherapy {
width: 681px;
height: 384px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 16px;
background: #000;
}
.parent-handtherapy svg {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.parent-handtherapy button {
position: absolute;
z-index: 50;
width: 40px;
overflow: hidden;
height: 40px;
border: none;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.parent-handtherapy button:focus {
outline-width: 0;
}
.parent-handtherapy circle {
fill: none;
transition: 0.3s;
}
/* Pastel colored circles for Hand Therapy slider */
.parent-handtherapy .circle1-handtherapy { stroke: #667eea; transition-delay: 0.05s; }
.parent-handtherapy .circle2-handtherapy { stroke: #f093fb; transition-delay: 0.1s; }
.parent-handtherapy .circle3-handtherapy { stroke: #4facfe; transition-delay: 0.15s; }
.parent-handtherapy .circle4-handtherapy { stroke: #43e97b; transition-delay: 0.2s; }
.parent-handtherapy .circle5-handtherapy { stroke: #fa709a; transition-delay: 0.25s; }
.parent-handtherapy .circle6-handtherapy { stroke: #a8edea; transition-delay: 0.3s; }
.parent-handtherapy .circle7-handtherapy { stroke: #667eea; transition-delay: 0.35s; }
.parent-handtherapy .circle8-handtherapy { stroke: #f093fb; transition-delay: 0.4s; }
.parent-handtherapy .circle9-handtherapy { stroke: #4facfe; transition-delay: 0.45s; }
.parent-handtherapy .circle10-handtherapy { stroke: #43e97b; transition-delay: 0.05s; }
.parent-handtherapy .circle11-handtherapy { stroke: #fa709a; transition-delay: 0.1s; }
.parent-handtherapy .circle12-handtherapy { stroke: #a8edea; transition-delay: 0.15s; }
.parent-handtherapy .circle13-handtherapy { stroke: #667eea; transition-delay: 0.2s; }
.parent-handtherapy .circle14-handtherapy { stroke: #f093fb; transition-delay: 0.25s; }
.parent-handtherapy .circle15-handtherapy { stroke: #4facfe; transition-delay: 0.3s; }
.parent-handtherapy .circle16-handtherapy { stroke: #43e97b; transition-delay: 0.35s; }
.parent-handtherapy .circle17-handtherapy { stroke: #fa709a; transition-delay: 0.4s; }
.parent-handtherapy .circle18-handtherapy { stroke: #a8edea; transition-delay: 0.45s; }
.parent-handtherapy #svg1-handtherapy circle {
transition-timing-function: linear;
}
.parent-handtherapy #svg2-handtherapy circle {
transition-timing-function: linear;
}
.parent-handtherapy #Capa_1_handtherapy {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-7px, -8px);
}
.parent-handtherapy #Capa_2_handtherapy {
position: absolute;
width: 16px;
height: 16px;
transform: translate(-9px, -8px);
}
.parent-handtherapy .right-handtherapy {
right: 10px;
top: 50%;
transform: translateY(-50%);
border: 1px solid #849494;
background-color: transparent;
transition: .5s;
}
.parent-handtherapy .right-handtherapy:hover {
background-color: #fff;
}
.parent-handtherapy .left-handtherapy {
left: 10px;
top: 50%;
transform: translateY(-50%);
border: 1px solid #849494;
background-color: transparent;
transition: .5s;
}
.parent-handtherapy .left-handtherapy:hover {
background-color: #fff;
}
.parent-handtherapy .slider-handtherapy {
position: absolute;
width: 300%;
height: 100%;
background: #000;
display: flex;
overflow: hidden;
top: 0;
left: 0;
}
.parent-handtherapy .slide1-handtherapy, .parent-handtherapy .slide2-handtherapy, .parent-handtherapy .slide3-handtherapy {
position: absolute;
background-position: center;
background-size: cover;
color: transparent;
font-size: 0;
padding-top: 0;
font-weight: 800;
font-family: 'Heebo', sans-serif;
text-align: center;
width: 33.333%;
height: 100%;
z-index: 10;
transition: 1.4s;
top: 0;
}
.parent-handtherapy .slide1-handtherapy {
background-image: url('images/projects/handtherapy-preview.webp');
left: 0%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-handtherapy .slide2-handtherapy {
background-image: url('images/projects/handtherapy-preview.webp');
left: 33.333%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-handtherapy .slide3-handtherapy {
background-image: url('images/projects/handtherapy-preview.webp');
left: 66.666%;
background-repeat: no-repeat;
background-size: cover;
}
.parent-handtherapy .tran-handtherapy {
transform: scale(1.3);
}
.parent-handtherapy .up1-handtherapy {
z-index: 20;
}
.parent-handtherapy .up2-handtherapy {
z-index: 40;
}
.parent-handtherapy .steap-handtherapy {
stroke-width: 0;
}
.parent-handtherapy .streak-handtherapy {
stroke-width: 82px;
}
@media (max-width: 700px) {
.parent-uinterview, .parent-nydata, .parent-handtherapy {
margin-left: 1%;
}
}
/* Contact Section Styles */
.contact {
padding: 100px 0;
background-color: var(--light-background);
position: relative;
overflow: hidden;
}
.contact-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.contact-info {
margin-bottom: 3rem;
}
.contact-info p {
font-size: 1.125rem;
color: var(--text-color);
margin-bottom: 2rem;
line-height: 1.6;
}
.contact-options {
margin-top: 3rem;
text-align: left;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.contact-options p {
font-size: 1.125rem;
color: var(--text-color);
margin-bottom: 1.5rem;
font-weight: 600;
}
.contact-options ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.contact-options li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-options li:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.contact-options i {
font-size: 1.25rem;
color: var(--primary-color);
flex-shrink: 0;
}
.contact-options a {
color: var(--text-color);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.contact-options a:hover {
color: var(--primary-color);
}
/* Responsive adjustments for contact section */
@media (max-width: 768px) {
.contact {
padding: 60px 0;
}
.contact-options ul {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.contact-options li {
padding: 0.75rem;
}
.contact-info p {
font-size: 1rem;
}
}
/* Email Gate Styles */
.email-gate {
margin: 2rem 0;
text-align: center;
}
.gate-btn {
position: relative;
background: none;
border: none;
padding: 0;
cursor: pointer;
width: 100%;
max-width: 500px;
margin: 0 auto;
display: block;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.gate-btn:active {
transform: translateY(0);
}
.email-banner {
display: flex;
align-items: center;
padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.email-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 1.5rem;
}
.email-text {
flex: 1;
text-align: left;
}
.email-address {
font-family: 'Courier New', monospace;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 0.25rem;
}
.email-hint {
font-size: 0.875rem;
opacity: 0.8;
font-weight: 400;
}
.qr-placeholder {
flex-shrink: 0;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.75rem;
margin-left: 1rem;
}
.qr-placeholder i {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.hint {
display: block;
margin-top: 0.75rem;
font-size: 0.875rem;
color: #666;
font-weight: 500;
}
/* Removed conflicting progress bar styles with !important */
.revealed {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 0 auto;
max-width: 500px;
}
.revealed.hidden {
display: none;
}
.mailto {
color: white;
text-decoration: none;
font-family: 'Courier New', monospace;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 1px;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
transition: background 0.2s ease;
}
.mailto:hover {
background: rgba(255, 255, 255, 0.3);
color: white;
text-decoration: none;
}
.copy {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.copy:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
}
.copied {
color: #4ade80;
font-weight: 600;
font-size: 0.875rem;
}
.copied.hidden {
display: none;
}
/* Responsive adjustments for email gate */
@media (max-width: 768px) {
.email-banner {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.email-icon {
margin-right: 0;
margin-bottom: 1rem;
}
.email-text {
text-align: center;
margin-bottom: 1rem;
}
.qr-placeholder {
margin-left: 0;
}
.revealed {
flex-direction: column;
gap: 0.75rem;
}
.email-address {
font-size: 1rem;
letter-spacing: 1px;
}
}
/* Simple fix for white box issue - minimal change */
.project-layered .slider-container {
background: transparent;
position: relative;
}