/* ==========================================================================
PORTFOLIO WEBSITE - MAIN STYLESHEET
Author: Noman Iqbal
Version: 2.0
Description: Organized by sections matching index.php structure
========================================================================== */
/* ==========================================================================
TABLE OF CONTENTS
==========================================================================
1. ROOT VARIABLES & RESET
2. GLOBAL STYLES
3. PRELOADER SECTION
4. HEADER & NAVIGATION SECTION
5. HERO SECTION
6. ABOUT SECTION
7. INFO SECTION
8. ADVANTAGE SECTION
9. SKILLS SECTION
10. SERVICES SECTION
11. PROJECTS SECTION
12. TESTIMONIAL SECTION
13. PRICING SECTION
14. LATEST NEWS SECTION
15. CONTACT CTA SECTION
16. FOOTER SECTION
17. CONTACT MODAL
18. LIVE CHAT WIDGET
19. NOTIFICATIONS & OVERLAYS
20. UTILITIES & HELPERS
21. RESPONSIVE MEDIA QUERIES
========================================================================== */
/* ==========================================================================
1. ROOT VARIABLES & RESET
========================================================================== */
:root {
/* Color Palette */
--primary-color: #f5de55;
--secondary-color: #1a1a1a;
--text-dark: #111;
--text-light: #666;
--white: #fffbfb;
--gray-light: #000000;
--gray-medium: #888;
--success-color: #4caf50;
--error-color: #f44336;
--warning-color: #ff9800;
/* Typography */
--font-primary: "Poppins", sans-serif;
--font-size-base: 16px;
--font-size-h1: clamp(2.5rem, 6vw, 3.5rem);
--font-size-h2: clamp(2rem, 5vw, 2.8rem);
--font-size-h3: clamp(1.5rem, 4vw, 2rem);
--font-size-text: clamp(1rem, 2.5vw, 1.1rem);
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
/* Transitions */
--transition-fast: 0.3s ease;
--transition-medium: 0.5s ease;
--transition-slow: 0.8s ease;
/* Shadows */
--shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
--shadow-md: 0 5px 15px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
/* Border Radius */
--radius-sm: 5px;
--radius-md: 10px;
--radius-lg: 20px;
--radius-xl: 40px;
/* Z-index Scale */
--z-header: 1000;
--z-modal: 2000;
--z-notification: 3000;
--z-preloader: 10000;
}
/* ==========================================================================
2. GLOBAL STYLES
========================================================================== */
/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: var(--font-size-base);
/* Custom Scrollbar for Firefox */
scrollbar-width: thin;
scrollbar-color: var(--primary-color) var(--secondary-color);
}
body {
font-family: var(--font-primary);
background-color: var(--primary-color);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Custom Scrollbar for WebKit Browsers */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--secondary-color);
border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb {
background-color: var(--primary-color);
border-radius: var(--radius-md);
border: 2px solid var(--secondary-color);
}
::-webkit-scrollbar-thumb:hover {
background-color: #fff2a8;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--spacing-sm);
}
p {
margin-bottom: var(--spacing-sm);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* Utility Classes */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.section-title {
font-size: var(--font-size-h1);
font-weight: 700;
margin-bottom: var(--spacing-md);
text-align: center;
}
.section-text {
font-size: var(--font-size-text);
color: var(--text-light);
max-width: 700px;
margin: 0 auto var(--spacing-lg) auto;
text-align: center;
line-height: 1.7;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.no-scroll {
overflow: hidden;
}
/* ==========================================================================
3. PRELOADER SECTION
========================================================================== */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--text-dark);
display: flex;
justify-content: center;
align-items: center;
z-index: var(--z-preloader);
opacity: 1;
transition: transform 1.2s cubic-bezier(0.83, 0, 0.17, 1), opacity 1s ease;
}
.preloader-logo {
font-size: 3rem;
font-weight: 700;
color: var(--primary-color);
opacity: 1;
transition: opacity var(--transition-medium);
animation: fadeInLogo 1s ease-in-out;
}
@keyframes fadeInLogo {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.preloader.preloader-hidden {
transform: translateY(-100%);
opacity: 1;
}
.preloader.preloader-hidden .preloader-logo {
opacity: 0;
}
/* ==========================================================================
4. HEADER & NAVIGATION SECTION
========================================================================== */
/* Space element for fixed header background */
.space {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: var(--primary-color);
z-index: calc(var(--z-header) - 1);
}
/* ==========================================================================
3. HEADER & NAVIGATION
========================================================================== */
.main-nav {
position: fixed;
top: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
width: calc(100% - 60px);
max-width: 1300px; /* Max width for large screens */
height: 80px;
background-color: #ffffff;
border-radius: 40px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.nav-logo a {
font-size: 1.8em;
font-weight: 700;
color: #111;
text-decoration: none;
}
.nav-action .action-btn {
background-color: #f5de55;
color: #111;
padding: 8px 20px;
border-radius: 20px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-action .action-btn:hover {
background-color: #111;
color: #fff;
transform: scale(1.05);
}
.navigation {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.navigation ul {
display: flex;
list-style: none;
position: relative;
gap: 20px;
}
.navigation ul li {
position: relative;
width: 70px;
height: 70px;
z-index: 1;
}
.navigation ul li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: 500;
text-decoration: none;
}
.navigation ul li a .icon {
position: relative;
display: block;
line-height: 80px;
font-size: 1.5em;
color: #111;
transition: 0.5s;
opacity: 0;
}
.navigation ul li.active a .icon {
transform: translateY(-42px);
color: #111;
opacity: 1;
}
.navigation ul li a .text {
position: absolute;
color: #111;
font-size: 1rem;
opacity: 1;
transform: translateY(5px);
transition: 0.3s;
padding: 6px 18px;
border-radius: 8px;
font-weight: bold;
background: transparent;
}
.navigation ul li a:hover .text {
background: #f5de55;
color: #111;
}
.navigation ul li.active a .text {
opacity: 1;
transform: translateY(10px);
}
.indicator {
position: absolute;
top: -55%;
left: 0;
width: 70px;
height: 70px;
background-color: #f5de55;
border-radius: 50%;
border: 6px solid #111;
transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smoother bounce animation */
}
.indicator::before,
.indicator::after {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background: transparent;
box-shadow: 0 -10px 0 0 #000000; /* Matches header background */
}
.indicator::before {
left: -21px;
border-top-right-radius: 20px;
}
.indicator::after {
right: -21px;
border-top-left-radius: 20px;
}
.mobile-menu-icon {
display: none;
font-size: 1.8em;
color: #111;
cursor: pointer;
transition: transform 0.3s ease;
border: none;
background: transparent;
}
.mobile-menu-icon:hover {
transform: scale(1.1);
}
/* --- Responsive Navigation --- */
@media screen and (max-width: 1199px) {
.navigation ul {
gap: 10px;
}
.navigation ul li {
width: 65px;
height: 65px;
}
.indicator {
width: 65px;
height: 65px;
}
.navigation ul li a .text {
font-size: 0.9rem;
}
}
@media screen and (max-width: 991px) {
.main-nav {
height: 70px;
padding: 0 25px;
}
.navigation {
display: none;
}
.mobile-menu-icon {
display: block;
}
}
/* Mobile Menu - Open State */
.main-nav.mobile-menu-open {
height: auto;
border-radius: 20px;
flex-direction: column;
align-items: stretch;
padding: 15px;
}
.main-nav.mobile-menu-open .navigation {
display: block;
width: 100%;
margin-top: 15px;
}
.main-nav.mobile-menu-open .navigation ul {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.main-nav.mobile-menu-open .navigation ul li {
width: 100%;
height: auto;
}
.main-nav.mobile-menu-open .navigation ul li a {
flex-direction: row;
gap: 15px;
padding: 10px 15px;
border-radius: 10px;
justify-content: flex-start;
transition: background-color 0.3s ease;
}
.main-nav.mobile-menu-open .navigation ul li a:hover,
.main-nav.mobile-menu-open .navigation ul li.active a {
background-color: #f5de55;
}
.main-nav.mobile-menu-open .navigation ul li a .icon,
.main-nav.mobile-menu-open .navigation ul li.active a .icon {
position: static;
line-height: 1;
font-size: 1.2em;
opacity: 1;
transform: none;
}
.main-nav.mobile-menu-open .navigation ul li a .text,
.main-nav.mobile-menu-open .navigation ul li.active a .text {
position: static;
opacity: 1;
transform: none;
background: transparent;
padding: 0;
font-size: 1rem;
}
.main-nav.mobile-menu-open .indicator {
display: none;
}
@media screen and (max-width: 767px) {
.main-nav {
width: calc(100% - 30px);
height: 60px;
top: 20px;
}
.nav-logo a {
font-size: 1.5em;
}
}
@media screen and (max-width: 575px) {
.main-nav {
width: calc(100% - 20px);
top: 15px;
}
}
/* ==========================================================================
END: HEADER & NAVIGATION
========================================================================== */
/* ==========================================================================
START: AMAZING MODERN HERO SECTION (CONSOLIDATED & FIXED)
========================================================================== */
.modern-hero-section {
/* STRUCTURAL CALCULATION */
margin-top: 80px;
height: calc(100vh - 80px);
min-height: 600px;
/* THEME: Animated gradient background */
background: linear-gradient(135deg, #f5de55 0%, #1a1a1a 50%, #f5de55 100%);
background-attachment: fixed;
background-size: 200% 200%;
animation: gradientMovement 8s ease-in-out infinite;
/* General Properties */
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* --- Keyframes for All Animations in this Section --- */
@keyframes gradientMovement {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-25px) rotate(160deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes counterRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
/* CORRECTED: Single, reliable typewriter keyframe */
@keyframes typewriter {
0% {
width: 0;
}
50% {
width: 200px;
} /* Types out and pauses */
100% {
width: 0;
}
}
@keyframes blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@keyframes heroCardFloat {
0% {
transform: translateY(0);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateY(-10px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
100% {
transform: translateY(0);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
}
@keyframes mouseWheel {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* --- Animated Background Elements --- */
.hero-bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particle-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-svg-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 3;
}
/* Floating Shapes Styles */
.shape {
position: absolute;
background: linear-gradient(
45deg,
rgba(245, 222, 85, 0.2),
rgba(255, 255, 255, 0.05)
);
animation: float 8s ease-in-out infinite;
will-change: transform;
}
.shape-1 {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: -1s;
border-radius: 50%;
}
.shape-2 {
width: 60px;
height: 60px;
top: 70%;
right: 15%;
animation-delay: -2s;
border-radius: 20%;
}
.shape-3 {
width: 100px;
height: 100px;
top: 10%;
right: 20%;
animation-delay: -3s;
border-radius: 50%;
}
.shape-4 {
width: 40px;
height: 40px;
top: 50%;
left: 5%;
animation-delay: -4s;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.shape-5 {
width: 120px;
height: 120px;
bottom: 10%;
left: 15%;
animation-delay: -5s;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* SVG Tech Orbit Animation */
.tech-orbit {
position: absolute;
top: 50%;
right: -2%;
width: 400px;
height: 400px;
transform: translateY(-50%);
opacity: 0.7;
}
.tech-icon text {
font-family: "Poppins", sans-serif;
font-weight: 700;
fill: #1a1a1a;
text-anchor: middle;
dominant-baseline: middle;
font-size: 1.1rem;
}
.orbit-ring {
animation: rotate 20s linear infinite;
}
.tech-icon {
animation: counterRotate 20s linear infinite;
}
/* SVG Code Animation */
.code-animation {
position: absolute;
top: 5%;
left: 8%;
width: 150px;
height: 200px;
opacity: 0.7;
}
.code-line {
/* CORRECTED: Using steps() for a crisp, reliable typing animation */
animation: typewriter 5s steps(25) infinite;
}
.code-line-1 {
animation-delay: 0s;
}
.code-line-2 {
animation-delay: 0.5s;
}
.code-line-3 {
animation-delay: 1s;
}
.code-line-4 {
animation-delay: 1.5s;
}
.code-line-5 {
animation-delay: 2s;
}
.code-line-6 {
animation-delay: 2.5s;
}
.code-cursor {
animation: blink 1s ease-in-out infinite;
}
/* --- Glassmorphism Content Card --- */
.hero-content-wrapper {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.hero-glassmorphism-card {
width: 90%;
height: 85%;
max-width: 850px;
max-height: 650px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: clamp(1.5rem, 4vw, 3rem);
overflow: hidden;
animation: heroCardFloat 6s ease-in-out infinite;
}
/* --- Hero Content --- */
.hero-content {
width: 100%;
max-width: 600px;
}
.hero-main-title {
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 800;
line-height: 1;
margin: 0 0 0.5em 0;
background: linear-gradient(135deg, #f5de55 0%, #ffffff 50%, #f5de55 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: clamp(1.1rem, 3vw, 1.5rem);
min-height: 1.5em;
margin-bottom: 1.5em;
color: rgba(255, 255, 255, 0.9);
}
.hero-description p {
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
margin-bottom: 2em;
}
/* Buttons and Social Icons */
.hero-actions {
display: flex;
gap: clamp(0.8rem, 2vw, 1.25rem);
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2em;
}
.hero-btn {
padding: clamp(0.75rem, 1.5vw, 0.9rem) clamp(1.5rem, 3vw, 1.8rem);
font-size: clamp(0.9rem, 1.5vw, 1rem);
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
overflow: hidden;
z-index: 1;
}
.hero-btn.primary {
background: linear-gradient(135deg, #f5de55, #ffeb3b);
color: #111;
box-shadow: 0 8px 25px rgba(245, 222, 85, 0.3);
}
.hero-btn.secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.hero-btn:hover {
transform: translateY(-3px);
}
.hero-social-links {
display: flex;
justify-content: center;
gap: 1.25rem;
}
.social-link {
width: clamp(40px, 5vw, 45px);
height: clamp(40px, 5vw, 45px);
font-size: clamp(1rem, 2vw, 1.1rem);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
}
.social-link:hover {
transform: translateY(-5px) scale(1.1);
background: #f5de55;
color: #111;
}
/* --- Scroll Indicator --- */
.scroll-indicator-wrapper {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.8);
animation: bounce 2s infinite;
}
.mouse {
width: 25px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 15px;
position: relative;
}
.mouse-wheel {
width: 3px;
height: 8px;
background: rgba(255, 255, 255, 0.7);
border-radius: 2px;
margin: 6px auto 0 auto;
animation: mouseWheel 1.5s infinite;
}
.scroll-text {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.hero-svg-container,
.tech-orbit,
.code-animation {
display: none;
}
.shape {
opacity: 0.5;
}
}
@media (max-width: 768px) {
.modern-hero-section {
background-attachment: scroll;
}
.hero-glassmorphism-card {
height: 90%;
}
.hero-actions {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.hero-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 576px) {
.floating-shapes {
display: none;
}
.hero-description {
display: none;
}
.scroll-text {
display: none;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.scroll-indicator-wrapper {
display: none;
}
.hero-glassmorphism-card {
overflow-y: auto;
justify-content: flex-start;
padding-top: 2rem;
}
}
/* ==========================================================================
END: AMAZING MODERN HERO SECTION (CONSOLIDATED & FIXED)
========================================================================== */
/* ==========================================================================
START: 6. ABOUT SECTION (FINAL & CORRECTED REBUILD)
========================================================================== */
.about-section {
background-color: #1a1a1a;
color: #ffffff;
}
.about-container {
width: 100%;
height: clamp(600px, 85vh, 800px);
max-width: 1600px;
margin: 0 auto;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
/* --- Text Content Container --- */
.about-text-content {
position: relative;
z-index: 2;
width: 55%;
padding-left: 5%;
}
/* --- Image Container (Anchored Bottom-Right) --- */
.about-image-container {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: clamp(350px, 40vw, 600px);
}
.about-image {
width: 100%;
height: auto;
filter: grayscale(50%) brightness(0.8);
transition: filter 0.5s ease;
}
.about-image:hover {
filter: grayscale(0%) brightness(1);
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.hello-text-about {
font-size: 1.8rem;
color: #f5de55;
}
.about-name {
font-size: 4rem;
color: #f5de55;
}
.about-description {
font-size: 1.1rem;
max-width: 550px;
margin: 2px;
}
.about-cta-button {
padding: 15px 30px;
font-size: 1rem;
}
/* ... (All other base styles from your design apply here) ... */
.trust-indicator {
display: inline-flex;
align-items: center;
font-size: 1rem;
margin-bottom: 35px;
color: #f5de55;
}
.about-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.about-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.about-cta-button.primary {
background-color: #f5de55;
color: #111;
}
.about-cta-button.secondary {
background-color: transparent;
color: #f5de55;
border: 2px solid #f5de55;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.about-text-content {
width: 90%; /* Allow text to take up more space */
}
.about-image-container {
/* Make image smaller and more transparent to avoid visual clutter */
width: clamp(300px, 45vw, 450px);
opacity: 0.7;
}
/* Manual size tuning for Laptop */
.hello-text-about {
font-size: 1.8rem;
color: #f5de55;
}
.about-name {
font-size: 4rem;
color: #f5de55;
}
.about-description {
font-size: 1rem;
max-width: 500px;
margin: 2px;
}
.about-cta-button {
padding: 14px 28px;
font-size: 0.95rem;
}
/* ... (Shared styles) ... */
.trust-indicator {
display: inline-flex;
align-items: center;
font-size: 1rem;
margin-bottom: 35px;
color: #f5de55;
}
.about-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.about-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.about-cta-button.primary {
background-color: #f5de55;
color: #111;
}
.about-cta-button.secondary {
background-color: transparent;
color: #f5de55;
border: 2px solid #f5de55;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.about-text-content {
width: 90%;
}
.about-image-container {
width: clamp(280px, 50vw, 350px);
opacity: 0.7; /* Even more transparent */
}
/* Manual size tuning for Tablet */
.hello-text-about {
font-size: 1.4rem;
color: #f5de55;
}
.about-name {
font-size: 3rem;
color: #f5de55;
}
.about-description {
font-size: 0.9rem;
max-width: 450px;
margin: 2px;
}
.about-cta-button {
padding: 12px 24px;
font-size: 0.9rem;
}
/* ... (Shared styles) ... */
.trust-indicator {
display: inline-flex;
align-items: center;
font-size: 0.9rem;
margin-bottom: 30px;
color: #f5de55;
}
.about-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.about-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.about-cta-button.primary {
background-color: #f5de55;
color: #111;
}
.about-cta-button.secondary {
background-color: transparent;
color: #f5de55;
border: 2px solid #f5de55;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
/* THIS IS THE ONLY BREAKPOINT WHERE THE LAYOUT STACKS "UP AND DOWN" */
@media (max-width: 479px) {
.about-container {
/* CRITICAL: Resetting container for vertical flow */
height: auto;
display: flex;
flex-wrap: wrap-reverse;
padding: 60px 0;
}
.about-image-container {
/* CRITICAL: Resetting image for vertical flow */
position: static;
width: 90%;
max-width: 350px;
margin: 0 auto 40px auto;
opacity: 0.7; /* Full opacity on mobile */
}
.about-image {
filter: grayscale(50%); /* Full color on mobile */
}
.about-text-content {
/* CRITICAL: Resetting text for vertical flow */
width: 90%;
padding-left: 0;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Manual size tuning for Mobile */
.hello-text-about {
font-size: 1.3rem;
color: #f5de55;
}
.about-name {
font-size: 2.5rem;
color: #f5de55;
}
.about-description {
font-size: 0.9rem;
margin: 2px;
}
.about-cta-buttons {
flex-direction: column;
width: 100%;
max-width: 300px;
}
.about-cta-button {
padding: 14px 28px;
}
/* ... (Shared styles) ... */
.trust-indicator {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
margin-bottom: 30px;
color: #f5de55;
}
.about-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.about-cta-button.primary {
background-color: #f5de55;
color: #111;
margin-bottom: 4px;
}
.about-cta-button.secondary {
background-color: transparent;
color: #f5de55;
border: 2px solid #f5de55;
}
}
/* ==========================================================================
END: 6. ABOUT SECTION (FINAL & CORRECTED REBUILD)
========================================================================== */
/*
/* ==========================================================================
7. INFO SECTION
========================================================================== */
.info-section-wrapper {
padding: var(--spacing-xl) 0;
background: linear-gradient(135deg, #00000079 0%, #ffee5579 100%);
}
.info-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Info Slider */
.info-slider {
position: relative;
overflow: hidden;
min-height: 400px;
}
.info-section {
position: absolute;
width: 100%;
opacity: 0;
transform: translateX(100%);
transition: opacity var(--transition-medium),
transform var(--transition-medium);
}
.info-section.active {
position: relative;
opacity: 1;
transform: translateX(0);
}
.info-section h3 {
font-size: var(--font-size-h2);
text-align: center;
margin-bottom: var(--spacing-lg);
color: rgb(0, 0, 0);
}
/* Info Grid */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
.info-item {
background-color: var(--white);
padding: var(--spacing-md);
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-md);
transition: var(--transition-fast);
}
.info-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.info-item i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.info-item h4 {
font-size: 2rem;
color: var(--text-dark);
margin-bottom: var(--spacing-xs);
}
.info-item p {
color: var(--text-light);
font-size: 0.9rem;
}
/* Info Navigation Dots */
.info-nav {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
border: none;
cursor: pointer;
transition: var(--transition-fast);
}
.nav-dot.active {
background-color: black;
transform: scale(1.3);
}
.nav-dot:hover {
background-color: black;
opacity: 0.7;
}
/* ==========================================================================
START: 8. MY ADVANTAGE SECTION
========================================================================== */
.advantage-section {
background-color: #1a1a1a;
color: #ffffff;
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
overflow: hidden; /* Contains the floating icons */
}
.advantage-container {
display: grid;
/* Two-column layout for larger screens */
grid-template-columns: 1fr 1.2fr;
align-items: center;
gap: clamp(2rem, 6vw, 5rem);
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* --- Left Column (Image & Stats) --- */
.advantage-left {
position: relative;
}
.advantage-image-container {
position: relative;
border-radius: 20px;
overflow: hidden;
}
.advantage-image {
width: 100%;
height: auto;
display: block;
filter: grayscale(100%);
transition: filter 0.4s ease, transform 0.4s ease;
position: relative;
z-index: 2; /* Image is on top of icons */
}
.advantage-image-container:hover .advantage-image {
filter: grayscale(0%);
transform: scale(1.05);
}
/* Floating Tech Icons */
.tech-icon-float {
position: absolute;
width: 60px;
height: 60px;
background-color: rgba(30, 30, 30, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
animation: floatAnimation 6s ease-in-out infinite;
z-index: 1; /* Icons are behind the image */
}
.tech-icon-float i {
font-size: 2rem;
color: #f5de55;
}
#icon-1 {
top: 10%;
left: -20px;
animation-delay: 0s;
}
#icon-2 {
top: 20%;
right: -20px;
animation-delay: -1.5s;
}
#icon-3 {
bottom: 15%;
left: 25%;
animation-delay: -3s;
}
#icon-4 {
bottom: 30%;
right: 10%;
animation-delay: -4.5s;
}
#icon-5 {
top: 55%;
left: 5%;
animation-delay: -2s;
}
@keyframes floatAnimation {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
.advantage-stats {
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 1rem;
background-color: #2c2c2c;
padding: 1rem;
border-radius: 10px;
}
.stat-item i {
font-size: 1.8rem;
color: #f5de55;
}
.stat-item h3 {
margin: 0;
}
.stat-item p {
font-size: 0.8rem;
color: #ccc;
margin: 0;
}
/* --- Right Column (Text, Skills, CTA) --- */
.advantage-right {
text-align: left;
}
.section-title-left {
font-weight: 700;
margin-bottom: 1.5rem;
text-align: inherit; /* Inherits text-align from parent */
}
.section-text-left {
color: #ccc;
line-height: 1.8;
max-width: 600px;
text-align: inherit;
}
.advantage-skills-grid {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.advantage-skill-card {
background-color: #2c2c2c;
padding: 1.5rem;
border-radius: 15px;
border: 1px solid #444;
}
.advantage-skill-card h4 {
margin-bottom: 0.5rem;
font-weight: 500;
}
.advantage-skill-card .skill-percentage {
color: #f5de55;
font-weight: 700;
}
.advantage-cta {
margin-top: 2.5rem;
}
.advantage-cta-button {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(135deg, #f5de55 0%, #fff2a8 100%);
color: #111;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(245, 222, 85, 0.3);
}
.advantage-cta-button:hover {
transform: translateY(-3px) scale(1.05);
}
.advantage-cta-button i {
font-size: 1.2rem;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.section-title-left {
font-size: 2.8rem;
}
.section-text-left {
font-size: 1.1rem;
}
.stat-item h3 {
font-size: 1.5rem;
}
.advantage-skill-card h4 {
font-size: 1.1rem;
}
.advantage-skill-card .skill-percentage {
font-size: 2.5rem;
}
.advantage-cta-button {
padding: 18px 35px;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.advantage-container {
grid-template-columns: 1fr; /* Stack on smaller laptops / large tablets */
}
.advantage-right {
text-align: center; /* Center content when stacked */
}
.section-text-left {
margin-left: auto;
margin-right: auto;
}
.section-title-left {
font-size: 2.5rem;
}
.section-text-left {
font-size: 1rem;
}
.stat-item h3 {
font-size: 1.4rem;
}
.advantage-skill-card h4 {
font-size: 1rem;
}
.advantage-skill-card .skill-percentage {
font-size: 2.2rem;
}
.advantage-cta-button {
padding: 16px 32px;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.advantage-container {
grid-template-columns: 1fr; /* Single column layout */
}
.advantage-right {
text-align: center;
}
.section-text-left {
margin-left: auto;
margin-right: auto;
}
.section-title-left {
font-size: 2.2rem;
}
.section-text-left {
font-size: 0.95rem;
}
.stat-item h3 {
font-size: 1.3rem;
}
.advantage-skill-card h4 {
font-size: 0.95rem;
}
.advantage-skill-card .skill-percentage {
font-size: 2rem;
}
.advantage-cta-button {
padding: 14px 28px;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.advantage-container {
grid-template-columns: 1fr; /* Single column layout */
}
.advantage-right {
text-align: center;
}
.section-text-left {
margin-left: auto;
margin-right: auto;
}
.tech-icon-float {
width: 45px;
height: 45px;
}
.tech-icon-float i {
font-size: 1.5rem;
}
.advantage-stats,
.advantage-skills-grid {
grid-template-columns: 1fr; /* Stack stats and skills */
}
.section-title-left {
font-size: 2rem;
}
.section-text-left {
font-size: 0.9rem;
}
.stat-item h3 {
font-size: 1.2rem;
}
.advantage-skill-card h4 {
font-size: 0.9rem;
}
.advantage-skill-card .skill-percentage {
font-size: 1.8rem;
}
.advantage-cta-button {
padding: 12px 24px;
font-size: 0.9rem;
}
}
/* ==========================================================================
END: 8. MY ADVANTAGE SECTION
========================================================================== */
/* ==========================================================================
START: 9. SKILLS SECTION (MY TECH STACK)
========================================================================== */
.skills-section {
background-color: #1a1a1a;
color: #ffffff;
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
}
.skills-container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.skills-section .section-title {
margin-bottom: 1.5rem;
}
.skills-section .section-text {
color: #ccc;
max-width: 700px;
margin: 0 auto 3.5rem auto; /* More bottom margin to space it from the grid */
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.7;
}
.skills-grid-layout {
display: grid;
/*
* This creates a responsive grid. Items have a minimum width of 150px
* and will grow to fill the space. The browser automatically fits as
* many columns as possible.
*/
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.skill-tile {
background-color: #2c2c2c;
border: 1px solid #444;
border-radius: 15px;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
transition: all 0.3s ease;
}
.skill-tile i {
color: #f5de55; /* Theme yellow */
transition: transform 0.3s ease;
}
.skill-tile h4 {
font-weight: 500;
margin: 0;
}
/* --- Hover Effect --- */
.skill-tile:hover {
transform: translateY(-10px);
border-color: #f5de55;
box-shadow: 0 15px 30px rgba(245, 222, 85, 0.1);
}
.skill-tile:hover i {
transform: scale(1.1);
}
/* A special class to make certain tiles span two columns on larger screens */
.skill-tile.wide {
/* Spans 2 columns if there is space */
grid-column: span 2;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.skill-tile i {
font-size: 3rem;
}
.skill-tile h4 {
font-size: 1.1rem;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.skill-tile i {
font-size: 2.8rem;
}
.skill-tile h4 {
font-size: 1rem;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.skill-tile i {
font-size: 2.5rem;
}
.skill-tile h4 {
font-size: 0.95rem;
}
/* On tablets, we prevent the 'wide' tile from spanning to keep a balanced grid */
.skill-tile.wide {
grid-column: span 1;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.skills-grid-layout {
/* Adjust the minimum item width for very small screens */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.skill-tile i {
font-size: 2.2rem;
}
.skill-tile h4 {
font-size: 0.9rem;
}
.skill-tile.wide {
grid-column: span 1;
}
}
/* ==========================================================================
END: 9. SKILLS SECTION (MY TECH STACK)
========================================================================== */
/* ==========================================================================
START: 10. SERVICES SECTION (WHAT I OFFER)
========================================================================== */
.services-section {
background-color: #1a1a1a;
color: #ffffff;
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
}
.services-container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.services-section .section-title {
margin-bottom: 1.5rem;
}
.services-section .section-text {
color: #ccc;
max-width: 700px;
margin: 0 auto 3.5rem auto;
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.7;
}
.services-grid {
display: grid;
/* Creates a responsive grid where cards are at least 250px wide */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
/* --- 3D Card Flip Effect --- */
/* This is the container that creates the 3D space */
.service-card {
background-color: transparent;
height: 350px;
perspective: 1000px; /* The "camera" distance for the 3D effect */
border-radius: 15px; /* Added for focus-visible outline */
}
/* This is the inner element that actually flips */
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s;
transform-style: preserve-3d; /* This is crucial for the 3D effect */
}
/* The hover (or focus) trigger for the flip animation */
.service-card:hover .card-inner,
.service-card:focus-within .card-inner {
/* Added for keyboard accessibility */
transform: rotateY(180deg);
}
/* Common styles for both front and back faces */
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Hides the back of the element when flipped */
backface-visibility: hidden;
border-radius: 15px;
border: 1px solid #444;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
/* Styling for the front face (visible by default) */
.card-front {
background-color: #2c2c2c;
}
.card-front h3 {
font-weight: 600;
}
/* Styling for the back face (hidden by default) */
.card-back {
background-color: #2c2c2c;
color: #ffffff;
/* Flipped 180 degrees initially to be hidden */
transform: rotateY(180deg);
}
.card-back h3 {
font-weight: 600;
margin-bottom: 1rem;
color: #f5de55; /* Theme yellow */
}
.card-back p {
color: #ccc;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.card-cta {
font-weight: 600;
color: #f5de55; /* Theme yellow */
text-decoration: none;
transition: color 0.3s;
}
.card-cta:hover {
color: #ffffff;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.card-front i {
font-size: 3.5rem;
margin-bottom: 1.5rem;
}
.card-front h3 {
font-size: 1.5rem;
}
.card-back h3 {
font-size: 1.5rem;
}
.card-back p {
font-size: 1rem;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.services-grid {
/* On smaller laptops, max out at 3 columns for better spacing */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
max-width: 900px; /* Center the grid */
margin: 0 auto;
}
.card-front i {
font-size: 3.2rem;
margin-bottom: 1.2rem;
}
.card-front h3 {
font-size: 1.4rem;
}
.card-back h3 {
font-size: 1.4rem;
}
.card-back p {
font-size: 0.95rem;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.services-grid {
/* On tablets, max out at 2 columns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
max-width: 600px;
margin: 0 auto;
}
.card-front i {
font-size: 3rem;
margin-bottom: 1rem;
}
.card-front h3 {
font-size: 1.3rem;
}
.card-back h3 {
font-size: 1.3rem;
}
.card-back p {
font-size: 0.9rem;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.services-grid {
/* A single column layout is best for small phones */
grid-template-columns: 1fr;
}
.service-card {
/* Reduce card height on mobile to save vertical space */
height: 320px;
}
.card-front i {
font-size: 2.8rem;
}
.card-front h3 {
font-size: 1.2rem;
}
.card-back h3 {
font-size: 1.2rem;
}
.card-back p {
font-size: 0.85rem;
}
}
/* ==========================================================================
END: 10. SERVICES SECTION (WHAT I OFFER)
========================================================================== */
/* ==========================================================================
START: 11. FEATURED PROJECTS SECTION
========================================================================== */
.projects-section {
background-color: #1a1a1a;
color: #ffffff;
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
}
.projects-container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
text-align: center;
}
.projects-section .section-title {
margin-bottom: 1.5rem;
}
.projects-section .section-text {
color: #ccc;
max-width: 700px;
margin: 0 auto 3.5rem auto;
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.7;
}
.projects-grid {
display: grid;
/* Creates a responsive grid with a minimum item width of 320px */
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
/* --- Project Card Styling --- */
.project-card-new {
position: relative;
border-radius: 15px;
overflow: hidden; /* This is crucial for the hover effects and border-radius */
display: block;
height: 300px;
text-decoration: none;
background-color: #2c2c2c; /* Fallback color while image loads */
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.project-card-new:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.project-card-img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the card without distortion */
transition: transform 0.4s ease;
}
.project-card-new:hover .project-card-img {
transform: scale(1.05); /* Subtle zoom effect on hover */
}
/* --- Overlay Effect --- */
.project-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
/* A gradient that is solid black at the bottom and fades to transparent at the top */
background: linear-gradient(to top, rgba(17, 17, 17, 0.95) 40%, transparent);
display: flex;
flex-direction: column;
justify-content: flex-end; /* Aligns content to the bottom */
padding: 1.5rem;
/* Animation: The overlay fades in and slides up from the bottom */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.project-card-new:hover .project-card-overlay {
opacity: 1;
transform: translateY(0);
}
.project-card-text {
text-align: left;
color: #ffffff;
}
.project-card-text h3 {
font-weight: 600;
margin-bottom: 0.5rem;
}
.project-card-text p {
color: #ccc;
margin-bottom: 1rem;
}
.project-tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.project-tech-tags span {
background-color: rgba(255, 255, 255, 0.1);
padding: 4px 10px;
border-radius: 5px;
font-weight: 500;
}
.project-links {
display: flex;
gap: 1.5rem;
font-weight: 600;
}
.project-link-item {
color: #f5de55; /* Theme yellow */
display: flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s;
}
.project-link-item:hover {
color: #ffffff;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.project-card-text h3 {
font-size: 1.5rem;
}
.project-card-text p {
font-size: 0.9rem;
}
.project-tech-tags span {
font-size: 0.8rem;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.project-card-text h3 {
font-size: 1.4rem;
}
.project-card-text p {
font-size: 0.9rem;
}
.project-tech-tags span {
font-size: 0.8rem;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.projects-grid {
/* On tablets, we can adjust the min width to allow for a 2-column or 1-column layout */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.project-card-new {
height: 280px; /* Slightly shorter cards on tablet */
}
.project-card-text h3 {
font-size: 1.3rem;
}
.project-card-text p {
font-size: 0.85rem;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.projects-grid {
/* Force a single column on mobile */
grid-template-columns: 1fr;
}
.project-card-new {
height: 250px; /* Even shorter cards on mobile */
}
.project-card-overlay {
/* On mobile, the overlay is always visible for immediate context */
opacity: 1;
transform: translateY(0);
background: linear-gradient(to top, rgba(17, 17, 17, 1) 50%, transparent);
}
.project-card-new:hover {
/* Disable hover effects on mobile to prevent sticky states */
transform: none;
}
.project-card-new:hover .project-card-img {
transform: none;
}
}
/* ==========================================================================
END: 11. FEATURED PROJECTS SECTION
========================================================================== */
/* ==========================================================================
START: 12. TESTIMONIAL SECTION
========================================================================== */
.testimonial-section {
background-color: #1a1a1a;
color: #ffffff;
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
overflow: hidden; /* Important for the orbital layout */
}
.testimonial-container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.testimonial-section .section-title {
margin-bottom: 1.5rem;
}
.testimonial-section .section-text {
color: #ccc;
max-width: 700px;
margin: 0 auto 4rem auto;
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.7;
}
/* --- Interactive Testimonial Wall --- */
.testimonial-wall {
position: relative;
/* Height is set to contain the orbiting photos on desktop */
height: 500px;
margin-top: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/* The central card where the quote is displayed */
.testimonial-display {
width: 100%;
max-width: 600px;
position: relative;
z-index: 2; /* Sits on top of the photos */
}
.testimonial-quote {
background-color: #2c2c2c;
border-radius: 15px;
padding: 2.5rem;
border: 1px solid #444;
transition: all 0.4s ease;
}
.testimonial-quote i.fa-quote-left {
font-size: 2rem;
color: #f5de55; /* Theme yellow */
margin-bottom: 1.5rem;
}
.testimonial-quote p#testimonial-text {
font-style: italic;
line-height: 1.7;
margin-bottom: 1.5rem;
min-height: 120px; /* Prevents the card from resizing when text changes */
transition: opacity 0.3s ease;
}
.testimonial-quote h4#testimonial-author {
font-weight: 600;
color: #f5de55; /* Theme yellow */
}
.testimonial-quote span#testimonial-title {
color: #ccc;
}
/* --- Orbiting Client Photos (Desktop) --- */
.testimonial-client {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #444;
cursor: pointer;
transition: all 0.4s ease;
animation: float 6s ease-in-out infinite;
}
.testimonial-client img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Interaction effect: on hover, dim all photos except the hovered one */
.testimonial-wall:hover .testimonial-client {
opacity: 0.3;
transform: scale(0.9);
}
.testimonial-wall .testimonial-client:hover,
.testimonial-wall .testimonial-client:focus {
/* For accessibility */
opacity: 1;
transform: scale(1.1);
border-color: #f5de55; /* Theme yellow */
}
/* Positioning for the 'orbit' */
#client-1 {
top: 10%;
left: 15%;
animation-delay: 0s;
}
#client-2 {
top: 20%;
right: 5%;
animation-delay: -1s;
}
#client-3 {
bottom: 5%;
right: 20%;
animation-delay: -2s;
}
#client-4 {
bottom: 15%;
left: 2%;
animation-delay: -3s;
}
#client-5 {
top: 60%;
left: 22%;
animation-delay: -4s;
}
/* --- Final CTA at the bottom --- */
/* Testimonial CTA */
.testimonial-cta {
margin-top: 50px;
text-align: center;
}
.testimonial-cta-content {
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
border-radius: 20px;
padding: 50px 40px;
border: 1px solid #444;
}
.testimonial-cta-content h3 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
color: #ffffff;
}
.testimonial-cta-content p {
font-size: 1.1rem;
color: #ccc;
margin-bottom: 30px;
}
.testimonial-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #f5de55 0%, #fff2a8 100%);
color: #111;
padding: 18px 40px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(245, 222, 85, 0.3);
}
.testimonial-cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 35px rgba(245, 222, 85, 0.4);
background: linear-gradient(135deg, #fff2a8 0%, #f5de55 100%);
}
.testimonial-cta-button i {
font-size: 1.2rem;
}
/* ... (All CTA styles from previous sections are assumed to apply) ... */
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP & LAPTOP (above 992px) --- */
@media (min-width: 992px) {
.testimonial-quote p#testimonial-text {
font-size: 1.2rem;
}
.testimonial-quote h4#testimonial-author {
font-size: 1.3rem;
}
.testimonial-quote span#testimonial-title {
font-size: 0.9rem;
}
}
/* --- STYLES FOR TABLET (768px to 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
.testimonial-wall {
/* Reduce height for tablets */
height: 550px;
}
.testimonial-client {
/* Make photos smaller */
width: 70px;
height: 70px;
}
#client-1 {
left: 5%;
}
#client-2 {
right: 2%;
}
#client-3 {
right: 10%;
}
#client-4 {
left: 0;
}
#client-5 {
left: 15%;
}
.testimonial-quote p#testimonial-text {
font-size: 1.1rem;
}
.testimonial-quote h4#testimonial-author {
font-size: 1.2rem;
}
}
/* --- STYLES FOR MOBILE (below 768px) --- */
@media (max-width: 767px) {
.testimonial-wall {
/* CRITICAL: Change the layout for mobile */
height: auto; /* Height is now determined by content */
margin-top: 3rem;
display: block; /* Disable flexbox */
}
.testimonial-display {
/* The quote card is now the main element, no longer centered in a fixed-height wall */
margin: 0 auto 2.5rem auto; /* Center it and add space below */
}
.testimonial-quote {
padding: 2rem;
}
/* Create a flex container for the client photos on mobile */
.testimonial-client-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.testimonial-client {
/* CRITICAL: Reset all desktop positioning */
position: static;
animation: none;
opacity: 1 !important; /* Override hover opacity */
transform: none !important; /* Override hover transform */
}
/* For Mobile and Tablet, hovering the wall shouldn't dim photos */
.testimonial-wall:hover .testimonial-client {
opacity: 1;
transform: none;
}
.testimonial-client:hover {
transform: scale(1.1) !important; /* Keep the individual hover scale */
}
/* Manual tuning for Mobile */
.testimonial-quote p#testimonial-text {
font-size: 1rem;
min-height: 100px;
}
.testimonial-quote h4#testimonial-author {
font-size: 1.1rem;
}
.testimonial-quote span#testimonial-title {
font-size: 0.8rem;
}
}
/* ==========================================================================
END: 12. TESTIMONIAL SECTION
========================================================================== */
/* ==========================================================================
START: 13. PRICING SECTION
========================================================================== */
.pricing-section {
/* Uses your light theme background color */
background-color: #f5de55;
color: #111; /* Dark text for the light background */
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
}
.pricing-container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.pricing-section .section-title {
margin-bottom: 1.5rem;
}
.pricing-section .section-text {
/* Darker text color for better readability on yellow background */
color: #444;
max-width: 700px;
margin: 0 auto 3.5rem auto;
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.7;
}
.pricing-grid {
display: grid;
/* Creates a responsive grid with a minimum item width of 300px */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
align-items: center; /* Vertically aligns cards if they have different heights */
}
/* --- Pricing Card Styling --- */
.pricing-card {
background-color: #ffffff;
border-radius: 20px;
padding: 2.5rem;
text-align: left;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
transition: all 0.4s ease;
}
.pricing-card:hover {
transform: translateY(-10px);
}
/* --- "Most Popular" Card --- */
.pricing-card.popular {
/* Highlighted with your theme color and scaled up */
border-color: #1a1a1a;
transform: scale(1.05);
position: relative;
overflow: hidden; /* Keeps the badge tidy */
}
.pricing-card.popular:hover {
transform: scale(1.08) translateY(-5px); /* Slightly more hover effect */
}
.popular-badge {
position: absolute;
top: -1px;
right: -1px;
background-color: #1a1a1a; /* Dark badge for contrast */
color: #f5de55; /* Theme yellow text */
padding: 5px 20px;
font-size: 0.9rem;
font-weight: 600;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
/* --- Card Content --- */
.pricing-header h3 {
font-weight: 600;
}
.pricing-price {
font-weight: 700;
margin: 1.5rem 0;
}
.pricing-price sup {
font-size: 1.5rem;
font-weight: 500;
top: -1em;
}
.pricing-price span {
font-weight: 400;
color: #666;
}
.pricing-description {
color: #666;
margin-bottom: 2rem;
border-bottom: 1px solid #eee;
padding-bottom: 2rem;
}
.pricing-features {
list-style: none;
margin-bottom: 2.5rem;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
}
.pricing-features li i {
color: #f5de55; /* Theme yellow checkmark */
}
.pricing-features li strong {
color: #111;
}
.pricing-button {
display: block;
width: 100%;
text-align: center;
background-color: #111;
color: #fff;
padding: 1rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.pricing-button:hover {
background-color: #f5de55;
color: #111;
transform: scale(1.02);
}
.pricing-card.popular .pricing-button {
background-color: #f5de55;
color: #111;
}
.pricing-card.popular .pricing-button:hover {
background-color: #111;
color: #fff;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.pricing-header h3 {
font-size: 1.5rem;
}
.pricing-price {
font-size: 3rem;
}
.pricing-description {
font-size: 0.9rem;
}
.pricing-features li {
font-size: 1rem;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.pricing-grid {
/* On smaller laptops, switch to a max of 2 columns for better spacing */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 700px; /* Center the grid */
margin: 0 auto;
}
.pricing-card.popular {
transform: scale(1); /* Reset scale to prevent overflow issues */
}
.pricing-header h3 {
font-size: 1.4rem;
}
.pricing-price {
font-size: 2.8rem;
}
.pricing-description {
font-size: 0.9rem;
}
.pricing-features li {
font-size: 0.95rem;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.pricing-grid {
/* A single column layout is best for tablets */
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.pricing-card.popular {
transform: scale(1); /* Reset scale */
}
.pricing-header h3 {
font-size: 1.3rem;
}
.pricing-price {
font-size: 2.5rem;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-card {
padding: 2rem 1.5rem;
}
.pricing-card.popular {
transform: scale(1);
}
.pricing-price {
font-size: 2.2rem;
}
.pricing-features li {
font-size: 0.9rem;
}
}
/* ==========================================================================
END: 13. PRICING SECTION
========================================================================== */
/* ==========================================================================
START: 14. LATEST NEWS SECTION
========================================================================== */
.latest-news-section {
background-color: #1a1a1a;
color: #ffffff;
padding: clamp(4rem, 10vw, 7.5rem) 0;
margin-bottom: 2px; /* Consistent spacing */
}
.news-container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.latest-news-section .section-title {
margin-bottom: 1.5rem;
}
.latest-news-section .section-text {
color: #ccc;
max-width: 700px;
margin: 0 auto 3.5rem auto;
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.7;
}
.news-grid {
display: grid;
/* Creates a responsive grid with a minimum item width of 300px */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* --- News Card Styling --- */
.news-card {
background-color: #2c2c2c;
border-radius: 15px;
overflow: hidden; /* Keeps the image zoom tidy */
text-decoration: none;
color: #ffffff;
display: block;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.news-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.news-card-image {
height: 200px;
overflow: hidden; /* This is crucial for the image zoom effect */
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.news-card:hover .news-card-image img {
transform: scale(1.05);
}
.news-card-content {
padding: 1.5rem;
text-align: left;
}
.news-card-date {
font-size: 0.8rem;
color: #999;
font-weight: 500;
margin-bottom: 0.8rem;
display: block;
text-transform: uppercase;
}
.news-card-content h3 {
line-height: 1.4;
margin-bottom: 1rem;
transition: color 0.3s ease;
}
.news-card:hover h3 {
color: #f5de55; /* Theme yellow on hover */
}
.news-card-content p {
color: #ccc;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.news-card-cta {
font-weight: 600;
color: #f5de55; /* Theme yellow */
text-decoration: none;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.news-card-content h3 {
font-size: 1.4rem;
}
.news-card-content p {
font-size: 1rem;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.news-card-content h3 {
font-size: 1.3rem;
}
.news-card-content p {
font-size: 0.95rem;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.news-grid {
/* Max out at 2 columns on tablets */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 700px;
margin: 0 auto;
}
.news-card-content h3 {
font-size: 1.2rem;
}
.news-card-content p {
font-size: 0.9rem;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.news-grid {
/* Force a single column layout on small screens */
grid-template-columns: 1fr;
}
.news-card-content h3 {
font-size: 1.2rem;
}
.news-card-content p {
font-size: 0.9rem;
}
}
/* ==========================================================================
END: 14. LATEST NEWS SECTION
========================================================================== */
/* =a========================================================================
START: 15. FINAL CTA SECTION (LET'S CONNECT)
========================================================================== */
/* The .content-section class is used for the main wrapper */
.content-section {
/* Uses your light theme background color */
background-color: #f5de55;
color: #111; /* Dark text for the light background */
padding: clamp(4rem, 10vw, 7.5rem) 0;
text-align: center;
}
/* Reusing .section-title for consistency, but we'll tune it for this specific section */
.content-section .section-title {
margin-bottom: 1.5rem;
}
/* Reusing .section-text */
.content-section .section-text {
color: #444;
max-width: 700px;
margin: 0 auto 2.5rem auto;
font-size: clamp(1rem, 2.5vw, 1.2rem);
line-height: 1.7;
}
/* The main "Get In Touch" button */
.hero-button-contact {
display: inline-block;
background: #111;
color: #fff;
border-radius: 50px; /* Fully rounded */
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.hero-button-contact:hover {
background: #000;
color: #f5de55; /* Theme yellow on hover */
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP (1280px to 1600px) --- */
@media (min-width: 1280px) and (max-width: 1600px) {
.content-section .section-title {
font-size: 3rem;
}
.hero-button-contact {
padding: 1rem 2.5rem;
font-size: 1.1rem;
}
}
/* --- STYLES FOR LAPTOP (768px to 1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
.content-section .section-title {
font-size: 2.8rem;
}
.hero-button-contact {
padding: 1rem 2.2rem;
font-size: 1rem;
}
}
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
.content-section .section-title {
font-size: 2.5rem;
}
.hero-button-contact {
padding: 0.9rem 2rem;
font-size: 1rem;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.content-section .section-title {
font-size: 2.2rem;
}
.hero-button-contact {
padding: 0.8rem 1.8rem;
font-size: 0.9rem;
}
}
/* ==========================================================================
END: 15. FINAL CTA SECTION (LET'S CONNECT)
========================================================================== */
/* ==========================================================================
START: 16. FOOTER SECTION
========================================================================== */
.site-footer {
background-color: #1a1a1a;
color: #ccc;
/* The top padding is the primary spacing, the bottom bar has its own */
padding-top: clamp(4rem, 10vw, 6rem);
width: 100%;
position: relative;
z-index: 5; /* Ensures it's above the yellow body background if needed */
}
.footer-container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
display: grid;
/* A responsive grid that starts with 4 columns */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.5rem;
padding-bottom: 4rem; /* Space above the bottom bar */
}
.footer-column h4 {
font-size: 1.2rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 1.5rem;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 1rem;
}
.footer-column ul li a,
.footer-column ul li p {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #f5de55; /* Theme yellow on hover */
}
/* --- Column 1: Brand & Socials --- */
.footer-brand .footer-logo {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
text-decoration: none;
display: inline-block;
margin-bottom: 1rem;
}
.footer-tagline {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.footer-socials {
display: flex;
gap: 1rem;
}
.footer-socials a {
color: #ccc;
font-size: 1.5rem;
transition: transform 0.3s ease, color 0.3s ease;
}
.footer-socials a:hover {
color: #f5de55; /* Theme yellow on hover */
transform: translateY(-3px);
}
/* --- Column 4: Call to Action --- */
.footer-button {
background-color: #f5de55;
color: #111;
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-block;
transition: all 0.3s ease;
}
.footer-button:hover {
background-color: #ffffff;
transform: scale(1.05);
}
/* --- Bottom Bar --- */
.footer-bottom-bar {
border-top: 1px solid #333;
padding: 1.5rem 0;
text-align: center;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* No specific tuning needed for Desktop or Laptop, as the auto-fit grid handles it well. */
/* --- STYLES FOR TABLET (480px to 767px) --- */
@media (max-width: 767px) {
.footer-container {
/* On tablets, we lock it to a 2-column grid */
grid-template-columns: 1fr 1fr;
}
.footer-brand,
.footer-cta {
/* Make the brand and CTA span the full width */
grid-column: span 2;
text-align: center;
}
.footer-socials {
justify-content: center;
}
}
/* --- STYLES FOR MOBILE (below 480px) --- */
@media (max-width: 479px) {
.footer-container {
/* A single column layout is best for mobile */
grid-template-columns: 1fr;
text-align: center;
}
.footer-brand,
.footer-cta {
/* Reset the span for a natural single-column flow */
grid-column: span 1;
}
}
/* ==========================================================================
END: 16. FOOTER SECTION
========================================================================== */
/* ==========================================================================
START: 17. FULL-SCREEN CONTACT PAGE OVERLAY
========================================================================== */
.contact-page-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* A dark, slightly purple-toned radial gradient for the background */
background: radial-gradient(circle, #2c214d 0%, #1a1a1a 100%);
z-index: 9998; /* Sits just below the custom cursor */
display: flex;
align-items: center;
justify-content: center;
/* Animation properties for fade-in/fade-out */
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
/* Allows scrolling within the modal on very short screens */
overflow-y: auto;
}
/* This class is added by JavaScript to show the modal */
.contact-page-overlay.is-active {
opacity: 1;
pointer-events: auto;
}
/* --- "Back to Portfolio" Button --- */
.contact-close-btn {
position: absolute;
top: 40px;
left: 40px;
color: #fff;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
z-index: 10;
transition: color 0.3s ease;
}
.contact-close-btn:hover {
color: #f5de55; /* Theme yellow */
}
/* --- Main Modal Container --- */
.contact-page-container {
display: grid;
/* Two-column layout on larger screens */
grid-template-columns: 1fr 1.5fr;
gap: clamp(2rem, 6vw, 4rem);
width: 90%;
max-width: 1100px;
color: #fff;
padding: 4rem 0;
}
/* --- Left Column (Photo & Info) --- */
.contact-page-left {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.contact-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1.5rem;
border: 4px solid #f5de55; /* Theme yellow */
}
.contact-page-left h2 {
margin-bottom: 0.5rem;
}
.contact-page-left > p {
color: #ccc;
margin-bottom: 2rem;
}
.contact-page-info {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start; /* Aligns items to the left within this group */
text-align: left;
}
.contact-page-item {
color: #ccc;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: color 0.3s;
}
.contact-page-item:hover {
color: #f5de55;
}
.contact-page-item i {
color: #f5de55;
width: 20px;
text-align: center;
}
/* --- Right Column (Form) --- */
.contact-page-right > p {
color: #ccc;
margin-bottom: 2rem;
line-height: 1.7;
}
/* --- Form Row Layout --- */
.contact-page-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-page-form .form-group {
position: relative;
margin-bottom: 1.5rem;
}
/* Form row overrides form-group margin when inside a row */
.contact-page-form .form-row .form-group {
margin-bottom: 0;
}
.contact-page-form input,
.contact-page-form textarea,
.contact-page-form select {
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #444;
border-radius: 8px;
color: #fff;
font-size: 1rem;
transition: border-color 0.3s ease;
}
/* --- Select Dropdown Specific Styles --- */
.contact-page-form select {
cursor: pointer;
appearance: none; /* Remove default arrow */
background-image: url('data:image/svg+xml;charset=US-ASCII,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
}
.contact-page-form select:focus {
background-image: url('data:image/svg+xml;charset=US-ASCII,');
}
/* --- Option Styling (limited support) --- */
.contact-page-form select option {
background-color: #1a1a1a;
color: #fff;
padding: 8px;
}
/* This placeholder is just for the label animation */
.contact-page-form input:placeholder-shown,
.contact-page-form textarea:placeholder-shown {
background-color: transparent;
}
.contact-page-form label {
position: absolute;
top: -10px;
left: 8px;
color: #f5de55;
pointer-events: none;
font-size: 0.8rem;
background: #2a1f49;
padding: 0 5px;
/* Remove transition to keep labels fixed */
}
.contact-page-form input:focus,
.contact-page-form textarea:focus {
outline: none;
border-color: #f5de55;
}
/* Remove floating label animation - labels stay fixed at top */
/* .contact-page-form input:focus + label,
.contact-page-form input:valid + label,
.contact-page-form input.has-value + label,
.contact-page-form input:not(:placeholder-shown) + label,
.contact-page-form textarea:focus + label,
.contact-page-form textarea:valid + label,
.contact-page-form textarea.has-value + label,
.contact-page-form textarea:not(:placeholder-shown) + label,
.contact-page-form select:focus + label,
.contact-page-form select.has-value + label {
top: -10px;
left: 8px;
font-size: 0.8rem;
color: #f5de55;
background: #2a1f49;
padding: 0 5px;
} */
/* === PROFESSIONAL FORM ENHANCEMENTS === */
/* Capitalize input fields */
.capitalize-input {
text-transform: capitalize;
}
/* Phone number field styling */
.phone-group {
position: relative;
}
.phone-input-container {
display: flex;
gap: 5px;
}
.country-selector {
flex: 0 0 120px;
min-width: 120px;
font-size: 0.9rem;
padding: 8px 5px;
text-align: center;
border-radius: 8px 0 0 8px;
}
.phone-input-container input[type="tel"] {
flex: 1;
border-radius: 0 8px 8px 0;
border-left: none;
}
.phone-input-container input[type="tel"]:focus {
border-left: 1px solid #f5de55;
}
/* Searchable Country Dropdown */
.searchable-country-dropdown {
position: relative;
flex: 0 0 140px;
min-width: 140px;
}
.country-search-input {
width: 100%;
padding: 10px 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #444;
border-radius: 8px 0 0 8px;
color: #fff;
font-size: 0.85rem;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.country-search-input:focus {
outline: none;
border-color: #f5de55;
cursor: text;
}
.country-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #1a1a1a;
border: 1px solid #444;
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.country-dropdown.show {
display: block;
}
.country-option {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
transition: background-color 0.2s;
gap: 10px;
}
.country-option:hover,
.country-option.focused {
background-color: #333;
}
.country-flag {
font-size: 1.2rem;
flex-shrink: 0;
}
.country-details {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.country-code-name {
color: #fff;
font-weight: 500;
font-size: 0.9rem;
}
.country-number {
color: #f5de55;
font-size: 0.85rem;
font-weight: 600;
}
/* Custom scrollbar for country dropdown */
.country-dropdown::-webkit-scrollbar {
width: 4px;
}
.country-dropdown::-webkit-scrollbar-track {
background: #2c2c2c;
}
.country-dropdown::-webkit-scrollbar-thumb {
background-color: #f5de55;
border-radius: 2px;
}
/* Email suggestions styling */
.email-group {
position: relative;
}
.email-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #1a1a1a;
border: 1px solid #444;
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 150px;
overflow-y: auto;
z-index: 100;
display: none;
}
.email-suggestions.show {
display: block;
}
.email-suggestion {
padding: 10px;
cursor: pointer;
transition: background-color 0.2s;
color: #ccc;
font-size: 0.9rem;
}
.email-suggestion:hover,
.email-suggestion.active {
background-color: #333;
color: #f5de55;
}
.email-suggestion strong {
color: #fff;
}
/* Form validation states enhancements */
.form-group.valid input,
.form-group.valid textarea,
.form-group.valid select {
border-color: #4caf50;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.form-group.valid label {
color: #4caf50 !important;
}
.form-group.invalid input,
.form-group.invalid textarea,
.form-group.invalid select {
border-color: #f44336;
box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
animation: shake 0.5s ease-in-out;
}
.form-group.invalid label {
color: #f44336 !important;
}
/* Error messages styling */
.error-message {
position: absolute;
bottom: -20px;
left: 8px;
color: #f44336;
font-size: 0.75rem;
margin-top: 2px;
display: none;
}
.form-group.invalid .error-message {
display: block;
margin-bottom: 7px;
}
/* Success checkmark */
.form-group.valid::after {
content: "✓";
position: absolute;
right: 12px;
top: 12px;
color: #4caf50;
font-weight: bold;
font-size: 1.2rem;
pointer-events: none;
}
/* Hide checkmark for select fields (project type) */
.form-group.valid:has(select)::after {
display: none;
}
/* Fallback for browsers that don't support :has() */
.form-group.valid.no-checkmark::after {
display: none;
}
/* Loading state */
.form-loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.form-loading::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f5de55;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Select field focus styling */
.contact-page-form select:focus {
outline: none;
border-color: #f5de55;
}
/* --- Enhanced Form Styling --- */
/* Form validation states */
.contact-page-form .form-group.success input,
.contact-page-form .form-group.success textarea,
.contact-page-form .form-group.success select {
border-color: #4caf50;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.contact-page-form .form-group.success label {
color: #4caf50 !important;
}
.contact-page-form .form-group.error input,
.contact-page-form .form-group.error textarea,
.contact-page-form .form-group.error select {
border-color: #f44336;
box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
animation: shake 0.5s ease-in-out;
}
.contact-page-form .form-group.error label {
color: #f44336 !important;
}
.contact-page-form .form-group.optional-unfilled {
opacity: 0.8;
}
.contact-page-form .form-group.optional-unfilled label {
color: #999;
}
/* Error message styling */
.field-error {
display: block;
color: #f44336;
font-size: 0.85rem;
margin-top: 5px;
padding: 4px 8px;
background: rgba(244, 67, 54, 0.1);
border-radius: 4px;
border-left: 3px solid #f44336;
}
/* Success indicator */
.contact-page-form .form-group.success::after {
content: "✓";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #4caf50;
font-weight: bold;
font-size: 1.1rem;
pointer-events: none;
}
/* Enhanced select dropdown styling */
.contact-page-form select {
position: relative;
background-color: rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.contact-page-form select:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: #666;
}
/* Custom dropdown arrow animation */
.contact-page-form select:focus {
background-image: url('data:image/svg+xml;charset=US-ASCII,');
transform: scale(1.02);
}
/* Loading state for form */
.contact-page-form.loading {
pointer-events: none;
opacity: 0.7;
}
/* Form submit button enhancements */
.form-submit-btn {
width: 100%;
padding: 1rem;
background-color: #f5de55;
color: #111;
border: none;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.form-submit-btn:hover {
background-color: #fff;
transform: scale(1.02);
box-shadow: 0 4px 15px rgba(245, 222, 85, 0.4);
}
.form-submit-btn:active {
transform: scale(0.98);
}
.form-submit-btn:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
transform: none;
}
/* Ripple effect for submit button */
.form-submit-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.form-submit-btn:active::before {
width: 300px;
height: 300px;
}
/* Shake animation for validation errors */
@keyframes shake {
0%,
20%,
40%,
60%,
80% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-5px);
}
}
/* Notification styles for form feedback */
.form-notification {
background: rgba(26, 26, 26, 0.95);
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-left: 4px solid #f5de55;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.form-notification.show {
transform: translateX(0);
opacity: 1;
}
.form-notification.hide {
transform: translateX(100%);
opacity: 0;
}
.form-notification.success {
border-left-color: #4caf50;
}
.form-notification.error {
border-left-color: #f44336;
}
.form-notification-content {
display: flex;
align-items: flex-start;
gap: 12px;
}
.form-notification-icon {
flex-shrink: 0;
font-size: 1.2rem;
margin-top: 2px;
}
.form-notification.success .form-notification-icon {
color: #4caf50;
}
.form-notification.error .form-notification-icon {
color: #f44336;
}
.form-notification-text h4 {
margin: 0 0 4px 0;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
}
.form-notification-text p {
margin: 0;
color: #ccc;
font-size: 0.85rem;
line-height: 1.4;
}
.form-notification-close {
background: none;
border: none;
color: #ccc;
cursor: pointer;
font-size: 1.1rem;
padding: 0;
margin-left: auto;
transition: color 0.3s;
}
.form-notification-close:hover {
color: #fff;
}
/* ==========================================================================
MANUAL TUNING FOR EACH SCREEN
/* ========================================================================== */
/* --- STYLES FOR DESKTOP & LAPTOP (above 768px) --- */
@media (min-width: 768px) {
.contact-page-left h2 {
font-size: 2rem;
}
.contact-page-right h3 {
font-size: 2.5rem;
}
}
/* --- STYLES FOR TABLET & MOBILE (below 768px) --- */
@media (max-width: 767px) {
.contact-close-btn {
top: 20px;
left: 20px;
}
.contact-page-container {
/* Stack the columns vertically */
grid-template-columns: 1fr;
padding-top: 6rem; /* Add more top padding to clear the close button */
padding-bottom: 2rem;
}
.contact-page-left {
/* Center the info block on smaller screens */
align-items: center;
}
.contact-page-info {
align-items: center;
}
.contact-page-right {
text-align: center;
}
/* Stack form rows on tablets and mobile */
.contact-page-form .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.contact-page-form .form-row .form-group {
margin-bottom: 1.5rem;
}
/* Manual tuning for Mobile */
@media (max-width: 479px) {
.contact-page-left h2 {
font-size: 1.8rem;
}
.contact-page-right h3 {
font-size: 2rem;
}
}
}
/* ==========================================================================
END: 17. FULL-SCREEN CONTACT PAGE OVERLAY
========================================================================== */
/* ==========================================================================
START: 18. GLOBAL DEFINITIONS & KEYFRAMES
========================================================================== */
/* Define CSS variables at the root for sitewide use */
:root {
--primary-color: #f5de55;
}
/* A helper class to prevent background scrolling when modals are open */
.no-scroll {
overflow: hidden;
height: 100vh;
}
/* Consolidated Keyframe Animations */
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes slideInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* ==========================================================================
END: 18. GLOBAL DEFINITIONS & KEYFRAMES
========================================================================== */
/* ==========================================================================
START: 19. EXIT INTENT POPUP OVERLAY
========================================================================== */
.exit-intent-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.exit-intent-overlay.show {
opacity: 1;
visibility: visible;
}
.exit-intent-overlay.hiding {
opacity: 0;
visibility: hidden;
}
.exit-intent-modal {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 0;
position: relative;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
transform: scale(0.8) translateY(20px);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.exit-intent-overlay.show .exit-intent-modal {
transform: scale(1) translateY(0);
}
.exit-intent-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
font-size: 16px;
color: #666;
}
.exit-intent-close:hover {
background: #ff4444;
color: white;
transform: scale(1.1);
}
.exit-intent-content {
padding: 40px 30px 30px 30px;
text-align: center;
color: #333;
}
.exit-intent-icon {
margin: 0 auto 20px auto;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f5de55 0%, #ffed55 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 2s infinite;
}
.exit-intent-icon i {
font-size: 35px;
color: #1a1a1a;
}
.exit-intent-content h2 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
color: #1a1a1a;
line-height: 1.3;
}
.exit-intent-content > p {
font-size: 1.1rem;
color: #555;
margin-bottom: 25px;
line-height: 1.6;
}
.exit-intent-benefits {
margin-bottom: 30px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
text-align: left;
}
.benefit-item i {
color: #10b981;
font-size: 16px;
width: 20px;
flex-shrink: 0;
}
.benefit-item span {
font-size: 1rem;
color: #333;
font-weight: 500;
}
.exit-intent-cta {
background: linear-gradient(135deg, #f5de55 0%, #ffed55 100%);
color: #1a1a1a;
border: none;
border-radius: 50px;
padding: 16px 32px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(245, 222, 85, 0.4);
width: 100%;
margin-bottom: 15px;
}
.exit-intent-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(245, 222, 85, 0.6);
background: linear-gradient(135deg, #ffed55 0%, #f5de55 100%);
}
.exit-intent-disclaimer {
font-size: 0.85rem;
color: #777;
margin: 0;
font-style: italic;
}
/* Responsive adjustments for exit intent popup */
@media (max-width: 767px) {
.exit-intent-modal {
width: 95%;
max-width: none;
}
.exit-intent-content {
padding: 30px 20px 20px 20px;
}
.exit-intent-content h2 {
font-size: 1.5rem;
}
.exit-intent-icon {
width: 60px;
height: 60px;
}
.exit-intent-icon i {
font-size: 28px;
}
}
/* ==========================================================================
END: 19. EXIT INTENT POPUP OVERLAY
========================================================================== */
/* ==========================================================================
START: 20. LIVE CHAT WIDGET (CONSOLIDATED & FIXED)
========================================================================== */
.live-chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.chat-bubble {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), #ffed55);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(245, 222, 85, 0.4);
transition: all 0.3s ease;
position: relative;
border: none;
animation: pulse 2s infinite;
}
.chat-bubble:hover {
transform: scale(1.1);
}
.chat-bubble i {
font-size: 24px;
color: #1a1a1a;
}
.chat-notification {
position: absolute;
top: -5px;
right: -5px;
background: #ff4444;
color: white;
font-size: 12px;
font-weight: 600;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: bounce 1s infinite alternate;
}
.chat-window {
position: absolute;
bottom: 80px;
right: 0;
width: 320px;
height: 400px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
display: none;
flex-direction: column;
overflow: hidden;
}
.chat-window.active {
display: flex;
animation: slideInUp 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.chat-header {
background: #1a1a1a;
color: white;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.chat-header-info {
display: flex;
align-items: center;
gap: 0.8rem;
}
.chat-avatar {
width: 40px;
height: 40px;
background: var(--primary-color);
color: #1a1a1a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
}
.chat-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.status.online {
font-size: 12px;
color: #4ade80;
}
.chat-close {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 5px;
}
.chat-messages {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
background: #f8f9fa;
}
.message {
margin-bottom: 1rem;
max-width: 85%;
clear: both;
}
.message.bot-message {
float: left;
}
.message.user-message {
float: right;
}
.message-content {
padding: 0.8rem 1rem;
font-size: 14px;
line-height: 1.5;
}
.message.bot-message .message-content {
background: white;
border-radius: 18px 18px 18px 5px;
border: 1px solid #e0e0e0;
color: #333;
}
.message.user-message .message-content {
background: var(--primary-color);
border-radius: 18px 18px 5px 18px;
color: #1a1a1a;
font-weight: 500;
}
.message-time {
font-size: 11px;
color: #666;
margin-top: 0.3rem;
}
.message.bot-message .message-time {
text-align: left;
}
.message.user-message .message-time {
text-align: right;
}
/* Typing Indicator */
.typing-indicator {
display: flex;
align-items: center;
gap: 3px;
padding: 0.5rem 0;
}
.typing-indicator span {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #999;
animation: typing-pulse 1.4s infinite;
animation-fill-mode: both;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing-pulse {
0%,
60%,
100% {
transform: scale(1);
opacity: 0.5;
}
30% {
transform: scale(1.2);
opacity: 1;
}
}
.chat-input-container {
padding: 1rem;
background: white;
display: flex;
gap: 0.5rem;
border-top: 1px solid #eee;
flex-shrink: 0;
}
#chat-input {
flex: 1;
border: 1px solid #ddd;
border-radius: 25px;
padding: 0.8rem 1rem;
outline: none;
font-size: 14px;
font-family: inherit;
resize: none;
}
#chat-input:focus {
border-color: var(--primary-color);
}
#chat-send {
background: var(--primary-color);
color: #1a1a1a;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
#chat-send:hover {
transform: scale(1.05);
box-shadow: 0 2px 10px rgba(245, 222, 85, 0.4);
}
/* --- Responsive Fixes for Live Chat --- */
@media (max-width: 767px) {
.live-chat-widget {
bottom: 15px;
right: 15px;
}
.chat-bubble {
width: 55px;
height: 55px;
}
.chat-window {
width: calc(100vw - 30px);
height: calc(100vh - 90px);
max-height: 500px;
bottom: 70px;
right: 0;
}
}
/* ==========================================================================
END: 19. LIVE CHAT WIDGET (CONSOLIDATED & FIXED)
========================================================================== */
/* ==========================================================================
START: 21. SOCIAL PROOF NOTIFICATIONS (FINAL)
========================================================================== */
.social-proof-container {
position: fixed;
/* Default position: bottom-left corner for desktops */
bottom: 20px;
left: 20px;
z-index: 9999;
pointer-events: none;
}
.social-proof-notification {
background: white;
color: #1a1a1a;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
padding: 1rem;
margin-bottom: 1rem;
border-left: 4px solid var(--primary-color);
max-width: 320px;
transform: translateX(-120%);
opacity: 0;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative; /* Anchor for the close button */
}
.social-proof-notification.show {
transform: translateX(0);
opacity: 1;
}
.notification-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary-color), #ffed55);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
font-size: 16px;
flex-shrink: 0;
}
.notification-content {
flex-grow: 1;
padding-right: 1.5rem; /* Space for close button */
}
.notification-content p {
margin: 0;
font-size: 14px;
line-height: 1.4;
}
.notification-content p strong {
font-weight: 600;
}
.notification-time {
font-size: 12px;
color: #999;
margin-top: 0.5rem;
}
.notification-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background-color: #f0f0f0;
border: none;
border-radius: 50%;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.notification-close:hover {
background-color: #e0e0e0;
color: #111;
transform: rotate(90deg);
}
.notification-close i.fa-times {
font-size: 14px;
}
/* --- Responsive Fixes --- */
@media (max-width: 767px) {
.social-proof-container {
/* On mobile, position at the bottom-center */
left: 40%;
transform: translateX(-50%);
width: 70%;
}
.social-proof-notification {
max-width: 100%;
margin: 0 auto 1rem auto;
}
}
@media (max-width: 479px) {
/* Make the notification smaller on mobile */
.social-proof-notification {
padding: 0.75rem;
gap: 0.75rem;
}
.notification-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
.notification-content {
padding-right: 1.25rem;
}
.notification-content p {
font-size: 13px;
}
.notification-time {
font-size: 11px;
}
.notification-close {
width: 22px;
height: 22px;
top: 6px;
right: 6px;
}
.notification-close i.fa-times {
font-size: 12px;
}
}
/* ==========================================================================
END: 21. SOCIAL PROOF NOTIFICATIONS (FINAL)
========================================================================== */
/* ==========================================================================
START: 22. URGENCY BANNER (FINAL)
========================================================================== */
.urgency-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #ff416c, #ff4b2b);
color: white;
padding: 12px 20px;
z-index: 10001;
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
justify-content: center;
align-items: center;
}
.urgency-banner.show {
transform: translateY(0);
}
.urgency-content {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
padding-right: 30px; /* Space for the close button */
}
.urgency-content i.fa-clock {
font-size: 18px;
animation: pulse 1.5s infinite;
}
.urgency-content span {
font-size: 12px;
font-weight: 400;
}
.urgency-cta {
background: white;
color: #ff4b2b;
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 13px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.urgency-cta:hover {
transform: scale(1.05);
}
.urgency-close {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.urgency-close:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.urgency-close i.fa-times {
font-size: 18px;
display: block;
}
/* --- Responsive Fixes --- */
@media (max-width: 479px) {
.urgency-content {
gap: 0.8rem;
padding-right: 0;
width: 100%;
text-align: center;
}
.urgency-cta {
margin-top: 0.5rem;
}
.urgency-close {
top: 8px;
right: 8px;
transform: none;
}
}
/* ==========================================================================
END: 22. URGENCY BANNER (FINAL)
========================================================================== */