/* ==========================================
   1. GLOBAL RESET & DYNAMIC COLOR THEMES
   ========================================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-color: #f8fafc;
    --orange-primary: #7c3aed;
    --black-pill: #0f172a;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-light: #e2e8f0;
    --font-main: 'Plus Jakarta Sans', sans-serif;
}

body.theme-sunset {
    --bg-color: #fffbfb;
    --orange-primary: #ff4d24;
    --black-pill: #18181b;
    --text-dark: #18181b;
    --text-muted: #71717a;
    --border-light: #f4e4e7;
}

body.theme-cyan {
    --bg-color: #f0fdf4;
    --orange-primary: #06b6d4;
    --black-pill: #064e3b;
    --text-dark: #022c22;
    --text-muted: #047857;
    --border-light: #a7f3d0;
}

body.theme-gold {
    --bg-color: #fdfbf7;
    --orange-primary: #d97706;
    --black-pill: #1c1917;
    --text-dark: #1c1917;
    --text-muted: #78350f;
    --border-light: #fef3c7;
}

body.theme-monochrome {
    --bg-color: #f4f4f5;
    --orange-primary: #18181b;
    --black-pill: #000000;
    --text-dark: #09090b;
    --text-muted: #71717a;
    --border-light: #e4e4e7;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    font-family: var(--font-main);
    min-height: 100vh;
    position: relative;
    padding-bottom: 40px;
}

*, *::before, *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

body::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    z-index: -1;
    pointer-events: none;
}

/* SLOW SITE PRELOADER SCREEN */
#sitePreloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #0f172a;
    color: #ffffff;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader-logo { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -1px; }
.preloader-logo span { color: #7c3aed; }
.spinner-line { width: 200px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow: hidden; position: relative; }
.spinner-line::after {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 40%;
    background: #7c3aed; border-radius: 100px; animation: loadingBar 2.5s infinite ease-in-out;
}
@keyframes loadingBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* MODAL OVERLAY */
.hire-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hire-modal-overlay.active { display: flex !important; opacity: 1 !important; visibility: visible !important; }

.hire-modal-card {
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 32px;
    max-width: 540px; width: 100%; padding: 36px 30px; position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25); transform: scale(0.85);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); max-height: 90vh; overflow-y: auto;
}
.hire-modal-overlay.active .hire-modal-card { transform: scale(1); }

.modal-close-btn {
    position: absolute; top: 20px; right: 20px; width: 38px; height: 38px;
    background: #f1f5f9; border: none; border-radius: 50%; font-size: 1.1rem;
    font-weight: 700; color: var(--text-dark); cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.modal-close-btn:hover { background: #e2e8f0; transform: rotate(90deg); }

.modal-header { text-align: center; margin-bottom: 24px; }
.modal-header h3 { font-size: 1.7rem; font-weight: 800; color: var(--text-dark); margin: 6px 0 8px 0; }
.modal-header p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }

.platforms-grid { display: flex; flex-direction: column; gap: 12px; }
.platform-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-radius: 18px; background: #f8fafc;
    border: 1px solid var(--border-light); text-decoration: none; color: var(--text-dark);
}
.platform-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
.platform-left { display: flex; align-items: center; gap: 12px; }
.platform-icon-circle {
    width: 40px; height: 40px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem; color: white; font-weight: 800;
}
.fiverr-bg { background: #1dbf73; }
.upwork-bg { background: #14a800; }
.whatsapp-bg { background: #25d366; }
.facebook-bg { background: #1877f2; }
.platform-text h4 { font-size: 1rem; font-weight: 800; color: var(--text-dark); }
.platform-text p { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.platform-arrow-circle {
    width: 30px; height: 30px; background: #ffffff; border: 1px solid var(--border-light);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
}

/* CUSTOM PRICE CALCULATOR MODAL STYLES */
.calc-option-group { margin-bottom: 18px; text-align: left; }
.calc-label { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; display: block; }
.calc-pills-row { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-pill-btn {
    padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border-light);
    background: #f8fafc; color: var(--text-dark); font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.calc-pill-btn.active { background: var(--orange-primary); color: #ffffff; border-color: var(--orange-primary); }
.calc-range-slider { width: 100%; accent-color: var(--orange-primary); cursor: pointer; }
.calc-total-box { background: var(--black-pill); color: #ffffff; border-radius: 20px; padding: 20px; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.calc-total-box h4 { font-size: 0.9rem; font-weight: 700; opacity: 0.9; }
.calc-price-display { font-size: 1.8rem; font-weight: 800; color: #ffffff; }
.btn-submit-calc { width: 100%; margin-top: 14px; background: var(--orange-primary); color: #ffffff; border: none; padding: 14px; border-radius: 100px; font-weight: 800; font-size: 0.95rem; cursor: pointer; }

/* FLOATING THEME SWITCHER */
.theme-switcher-pill {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    background: #ffffff; border: 1px solid var(--border-light);
    padding: 10px 18px; border-radius: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.theme-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; background: var(--orange-primary); }
.theme-btn-text { font-size: 0.82rem; font-weight: 800; color: var(--text-dark); }

/* STICKY TRANSPARENT GLASSMORPHISM NAVBAR */
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 9999;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-light);
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar.scrolled {
    background: rgba(248, 250, 252, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: rgba(226, 232, 240, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    padding: 16px 32px;
}

body.theme-sunset .navbar.scrolled { background: rgba(255, 251, 251, 0.75) !important; }
body.theme-cyan .navbar.scrolled { background: rgba(240, 253, 244, 0.75) !important; }
body.theme-gold .navbar.scrolled { background: rgba(253, 251, 247, 0.75) !important; }
body.theme-monochrome .navbar.scrolled { background: rgba(244, 244, 245, 0.75) !important; }

.logo { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 800; color: var(--text-dark); text-decoration: none; }
.logo-icon { width: 32px; height: 32px; background: var(--orange-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--text-muted); font-weight: 500; font-size: 0.9rem; }
.nav-links a.active, .nav-links a:hover { color: var(--orange-primary); }
.btn-nav-contact { background: var(--black-pill); color: white; padding: 12px 28px; border-radius: 100px; font-weight: 600; font-size: 0.9rem; cursor: pointer; border: none; }

/* HERO SECTION */
.hero { max-width: 1200px; margin: 20px auto 0 auto; padding: 10px 32px 0 32px; position: relative; }
.stamp-hire-me { position: absolute; top: 10px; right: 40px; width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: white; box-shadow: 0 8px 20px rgba(0,0,0,0.06); border: 1px solid var(--border-light); cursor: pointer; z-index: 10; }
.rotating-text-svg { position: absolute; width: 100%; height: 100%; animation: rotateText 10s linear infinite; }
.rotating-text-svg text { font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px; fill: #111111; }
@keyframes rotateText { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.stamp-inner { width: 42px; height: 42px; background: var(--orange-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; z-index: 2; }
.hero-title-wrapper { text-align: center; margin-bottom: 16px; }
.subtitle-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dark); font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.subtitle-tag::before { content: ''; width: 16px; height: 2px; background: var(--orange-primary); }
.main-title { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.03em; }
.main-title span { color: var(--orange-primary); }
.role-text { color: var(--text-muted); font-size: 1.05rem; font-weight: 500; margin-top: 4px; }

.hero-layout { display: grid; grid-template-columns: 280px 1fr 280px; align-items: end; gap: 20px; position: relative; margin-top: 10px; }
.testimonial-box { padding-bottom: 40px; }
.quote-icon { font-size: 2.2rem; color: var(--orange-primary); line-height: 1; margin-bottom: 6px; font-family: serif; }
.testimonial-text { font-size: 0.98rem; line-height: 1.45; color: var(--text-dark); font-weight: 600; margin-bottom: 20px; }
.client-reviews { display: flex; align-items: center; gap: 12px; }
.avatar-group { display: flex; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid white; margin-left: -10px; object-fit: cover; }
.avatar:first-child { margin-left: 0; }
.review-stats h4 { font-size: 0.9rem; font-weight: 800; }
.review-stats p { font-size: 0.72rem; color: var(--text-muted); }

.center-image-container { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 410px; }
.orange-shape-bg {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 420px !important; height: 370px !important; background-color: var(--orange-primary) !important;
    border-radius: 210px 210px 0 0 !important; z-index: 1; box-shadow: inset 0 0 0 1000px var(--orange-primary);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px) !important;
    background-size: 14px 14px !important;
}
.person-img-wrapper { position: relative; z-index: 2; width: 330px; height: 390px; display: flex; align-items: flex-end; justify-content: center; }
.person-img { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom center; }

.action-pills-bar {
    position: absolute; bottom: 20px; z-index: 3; background: #ffffff; padding: 4px;
    border-radius: 100px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); display: flex; align-items: center;
    border: 1px solid var(--border-light); animation: floatPill 4s ease-in-out infinite; width: 260px; overflow: hidden;
}
@keyframes floatPill { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.action-pills-bar::before {
    content: ''; position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
    background: var(--black-pill); border-radius: 100px; z-index: 1; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.action-pills-bar.shift-right::before { transform: translateX(100%); }
.pill-tab { position: relative; z-index: 2; width: 50%; padding: 10px 0; border-radius: 100px; font-weight: 700; font-size: 0.88rem; border: none; background: transparent; color: var(--text-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pill-tab.active { color: #ffffff !important; }
.pill-tab .arrow { width: 18px; height: 18px; background: var(--orange-primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; color: white; }

.right-content { padding-bottom: 30px; display: flex; flex-direction: column; gap: 30px; align-items: flex-end; }
.skills-cloud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 250px; }
.tag { padding: 7px 16px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.tag-black { background: var(--black-pill); color: white; }
.tag-orange { background: var(--orange-primary); color: white; }
.socials-title { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; }
.social-icons { display: flex; gap: 8px; }
.social-btn { width: 34px; height: 34px; border-radius: 50%; background: white; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-dark); text-decoration: none; font-weight: 700; }

.ticker-bar { background: var(--black-pill); color: white; padding: 14px 0; margin-top: 30px; overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; align-items: center; gap: 40px; animation: marquee 20s linear infinite; }
.ticker-item { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 40px; }
.ticker-star { color: var(--orange-primary); font-size: 1.1rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* SERVICES SECTION */
.services-section { max-width: 1100px; margin: 80px auto; padding: 0 24px; }
.services-header { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-end; margin-bottom: 40px; }
.section-tag { color: var(--orange-primary); font-size: 0.95rem; font-weight: 600; display: block; margin-bottom: 6px; }
.section-title { font-size: 2.8rem; font-weight: 800; color: #111; line-height: 1.1; }

.accordion-list { display: flex; flex-direction: column; gap: 16px; }
.accordion-item { background: #ffffff; border: 1px solid var(--border-light); border-radius: 20px; padding: 24px 32px; cursor: pointer; overflow: hidden; }
.accordion-header { display: flex; align-items: center; justify-content: space-between; }
.item-num { font-size: 1.3rem; font-weight: 800; color: #111; width: 60px; }
.item-title { font-size: 1.4rem; font-weight: 800; color: #111; flex-grow: 1; }
.arrow-btn { width: 42px; height: 42px; background: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: #111; }
.accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.3s ease; }

.accordion-item.active { background: var(--black-pill); color: #ffffff; padding: 36px 40px; border-radius: 24px; }
.accordion-item.active .item-num, .accordion-item.active .item-title { color: #ffffff; }
.accordion-item.active .arrow-btn { background: var(--orange-primary); color: #ffffff; transform: rotate(45deg); }
.accordion-item.active .accordion-content { max-height: 1000px; opacity: 1; margin-top: 24px; }

.tags-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.service-tag { background: rgba(255,255,255,0.1); color: #cbd5e1; padding: 8px 18px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.15); }
.service-desc { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; max-width: 600px; margin-bottom: 28px; }
.service-img-preview { width: 100%; max-width: 550px; height: 240px; border-radius: 16px; overflow: hidden; }
.service-img-preview img { width: 100%; height: 100%; object-fit: cover; }
.services-footer { display: flex; justify-content: center; margin-top: 40px; }
.btn-view-all { display: inline-flex; align-items: center; background: var(--orange-primary); padding: 6px 8px 6px 28px; border-radius: 100px; color: #fff; font-weight: 700; border: none; cursor: pointer; }
.btn-arrow { width: 38px; height: 38px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 16px; }

/* ABOUT SECTION */
.about-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; display: grid; grid-template-columns: 420px 1fr; gap: 60px; align-items: center; }
.about-image-wrapper { position: relative; display: flex; justify-content: center; }
.about-orange-arch { width: 320px; height: 360px; background: var(--orange-primary); border-radius: 180px 180px 0 0; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.about-person-img { width: 100%; height: auto; max-height: 105%; object-fit: contain; position: relative; z-index: 2; }
.badge-customers { position: absolute; top: 40px; left: -20px; background: #ffffff; padding: 16px 22px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: 1px solid var(--border-light); z-index: 3; text-align: center; }
.badge-certified { position: absolute; bottom: 20px; right: -20px; background: #ffffff; padding: 10px 18px; border-radius: 100px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: 1px solid var(--border-light); z-index: 3; display: flex; align-items: center; gap: 10px; }

.about-heading { font-size: clamp(1.6rem, 3.8vw, 3rem); font-weight: 800; color: var(--text-dark); margin-bottom: 18px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.typing-text { color: var(--orange-primary); display: inline-block; }
.about-desc { color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin-bottom: 36px; }
.about-stats-grid { display: flex; gap: 48px; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--border-light); }
.stat-item h3 { font-size: 2.2rem; font-weight: 800; }
.stat-item p { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.about-contact-pills { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.info-pill { display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid var(--border-light); padding: 10px 22px; border-radius: 100px; text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 0.9rem; }
.pill-icon { width: 32px; height: 32px; background: var(--orange-primary); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* TOOLS SECTION */
.tools-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; text-align: center; }
.tools-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.tools-title { font-size: 2.8rem; font-weight: 800; margin-top: 6px; }
.tools-title span { color: var(--orange-primary); }
.tools-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.tool-card { 
    background: #ffffff; border: 1px solid var(--border-light); border-radius: 120px 120px 24px 24px; 
    padding: 30px 15px 25px 15px; display: flex; flex-direction: column; align-items: center; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.03); position: relative; cursor: pointer;
}

.tool-hover-popup {
    position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%) translateY(10px);
    background: var(--black-pill); color: #ffffff; padding: 12px 18px; border-radius: 16px;
    font-size: 0.88rem; font-weight: 700; white-space: nowrap; opacity: 0; visibility: hidden;
    pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 100;
    border-left: 3px solid var(--orange-primary);
}
.tool-hover-popup::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border-width: 6px; border-style: solid; border-color: var(--black-pill) transparent transparent transparent;
}
.tool-card:hover .tool-hover-popup { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.tool-icon-wrapper { width: 65px; height: 65px; background: #f8fafc; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.tool-icon-wrapper img { width: 32px; height: 32px; object-fit: contain; }
.tool-percent { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.tool-name { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

/* EXPERIENCE SECTION */
.experience-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; }
.exp-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 50px; }
.exp-title { font-size: 2.8rem; font-weight: 800; }
.exp-title span { color: var(--orange-primary); }
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.exp-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: 28px; padding: 36px 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.exp-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); }
.exp-icon-circle { width: 48px; height: 48px; background: var(--orange-primary); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.exp-list { display: flex; flex-direction: column; gap: 28px; }
.exp-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 16px; }
.exp-year-badge { background: var(--black-pill); color: #ffffff; padding: 8px 18px; border-radius: 100px; font-size: 0.82rem; font-weight: 700; white-space: nowrap !important; flex-shrink: 0; }

/* PORTFOLIO SECTION */
.portfolio-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; }
.portfolio-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
.portfolio-title { font-size: 2.8rem; font-weight: 800; }
.portfolio-title span { color: var(--orange-primary); }
.btn-view-all-projects { display: inline-flex; align-items: center; background: var(--orange-primary); padding: 6px 8px 6px 24px; border-radius: 100px; color: #ffffff; font-weight: 700; font-size: 0.9rem; gap: 12px; border: none; cursor: pointer; text-decoration: none; }
.btn-view-all-projects .arrow-pill { width: 34px; height: 34px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.portfolio-list { display: flex; flex-direction: column; gap: 32px; }
.portfolio-card { background: #f1f5f9; border: 1px solid var(--border-light); border-radius: 28px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.portfolio-card.reverse { grid-template-columns: 1fr 1fr; }
.portfolio-card.reverse .project-preview { order: 2; }
.portfolio-card.reverse .project-info { order: 1; }

.project-preview { width: 100%; height: 320px; border-radius: 20px; overflow: hidden; background: #ffffff; border: 1px solid var(--border-light); position: relative; cursor: pointer; }
.project-preview img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: transform 4s ease-in-out; }
.project-preview:hover img { transform: translateY(calc(-100% + 320px)); }

.project-info h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 12px; }
.project-info h3 span { color: var(--orange-primary); }
.project-desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; }
.project-meta-box { background: #ffffff; border-radius: 18px; padding: 16px 20px; border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; font-weight: 600; }
.btn-view-details { color: var(--orange-primary); font-weight: 700; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ALL PROJECTS MODAL DRAWER */
#allProjectsModal .hire-modal-card { max-width: 800px; padding: 40px; }
.all-projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.mini-proj-card { background: #f8fafc; border: 1px solid var(--border-light); border-radius: 20px; padding: 16px; text-align: left; }
.mini-proj-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }

/* AWARDS SECTION */
.awards-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; text-align: center; }
.awards-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.awards-title { font-size: 2.8rem; font-weight: 800; }
.awards-title span { color: var(--orange-primary); }
.awards-slider-wrapper { width: 100%; overflow: hidden; position: relative; padding: 10px 0; }
.awards-track { display: flex; gap: 24px; transition: transform 0.5s ease-in-out; }
.award-card { flex: 0 0 calc(33.333% - 16px); min-width: 280px; background: #ffffff; border: 1px solid var(--border-light); border-radius: 24px; padding: 32px 24px; position: relative; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.award-num { position: absolute; top: 16px; right: 20px; font-size: 3rem; font-weight: 800; color: rgba(0,0,0,0.04); }
.laurel-badge { width: 55px; height: 55px; margin-bottom: 20px; }
.laurel-badge svg { width: 100%; height: 100%; fill: var(--orange-primary); }

/* PRICING SECTION */
.pricing-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; }
.pricing-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
.pricing-title { font-size: 2.8rem; font-weight: 800; }
.pricing-title span { color: var(--orange-primary); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: 28px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.price-banner { background: var(--orange-primary); color: #ffffff; border-radius: 20px; padding: 28px 24px; position: relative; margin-bottom: 24px; }
.banner-plan-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.banner-amount { font-size: 2.3rem; font-weight: 800; }
.banner-arrow-icon { position: absolute; top: 24px; right: 20px; width: 38px; height: 38px; background: #ffffff; color: var(--orange-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.pricing-features-list { list-style: none; display: flex; flex-direction: column; gap: 16px; padding: 0 12px 16px 12px; }
.feature-item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 600; }
.feature-check { width: 22px; height: 22px; background: var(--orange-primary); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
.feature-item.muted { color: var(--text-muted); opacity: 0.5; }
.feature-item.muted .feature-check { background: #e2e8f0; color: #94a3b8; }

/* TESTIMONIALS SECTION */
.testimonials-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; text-align: center; }
.testimonials-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 36px; }
.testimonials-title { font-size: 2.8rem; font-weight: 800; }
.testimonials-title span { color: var(--orange-primary); }

.testimonials-slider-container { width: 100%; overflow: hidden; margin-top: 30px; margin-bottom: 32px; position: relative; }
.testimonials-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; }
.testimonial-slide-item { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 4px; }
.testimonial-card-item { background: #ffffff; border: 1px solid var(--border-light); border-radius: 28px; padding: 32px; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.client-profile-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.client-meta-left { display: flex; align-items: center; gap: 14px; }
.client-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.client-name-box h4 { font-size: 1.1rem; font-weight: 800; }
.client-quote-circle { width: 40px; height: 40px; background: #f8fafc; border: 1px solid var(--border-light); color: var(--orange-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-family: serif; }
.star-rating-row { color: var(--orange-primary); font-size: 1rem; margin-bottom: 16px; }
.testimonial-body-text { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }
.testimonial-slider-dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dot-item { width: 10px; height: 10px; border-radius: 100px; background: #cbd5e1; cursor: pointer; transition: all 0.3s ease; }
.dot-item.active { width: 28px; background: var(--orange-primary); }

/* FAQS SECTION */
.faqs-section { max-width: 1100px; margin: 100px auto 80px auto; padding: 0 24px; }
.faqs-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; width: 100%; }
.faqs-title { font-size: 2.8rem; font-weight: 800; margin-top: 6px; text-align: center; }
.faqs-title span { color: var(--orange-primary); }

.faqs-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.faq-accordion-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #ffffff; border: 1px solid var(--border-light); border-radius: 18px; padding: 20px 24px; cursor: pointer; }
.faq-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-question-text { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); }
.faq-plus-icon { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); }
.faq-answer-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
.faq-item.active { background: var(--orange-primary); border-color: var(--orange-primary); }
.faq-item.active .faq-question-text, .faq-item.active .faq-plus-icon { color: #ffffff; }
.faq-item.active .faq-plus-icon { transform: rotate(45deg); }
.faq-item.active .faq-answer-content { max-height: 300px; opacity: 1; margin-top: 14px; color: rgba(255, 255, 255, 0.95); }

.faq-widgets-col { display: flex; flex-direction: column; gap: 20px; }
.faq-dark-cta-card { 
    background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%);
    color: #ffffff; border-radius: 28px; padding: 28px; text-align: center; 
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.25); border: 2px solid var(--orange-primary);
}
.faq-dark-cta-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.faq-dark-cta-card p { font-size: 0.78rem; color: #94a3b8; margin-bottom: 16px; }

.calendly-mini-box { background: #ffffff; border-radius: 18px; padding: 16px; color: #0f172a; text-align: center; }
.calendly-mini-box h4 { font-size: 0.95rem; font-weight: 800; margin-bottom: 4px; }
.calendly-mini-box p { font-size: 0.75rem; color: #64748b; margin-bottom: 14px; }
.btn-calendly-book {
    background: var(--orange-primary); color: #ffffff; border: none; padding: 10px 20px;
    border-radius: 100px; font-weight: 700; font-size: 0.82rem; cursor: pointer; width: 100%;
}
.btn-calendly-book:hover { transform: scale(1.03); }

.faq-light-call-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: 24px; padding: 24px; display: flex; align-items: center; gap: 16px; }
.call-icon-circle { width: 44px; height: 44px; background: rgba(124, 58, 237, 0.1); color: var(--orange-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* FOOTER */
.site-footer { background: #ffffff; border-top: 1px solid var(--border-light); padding-top: 60px; margin-top: 80px; }
.footer-cta-bar { max-width: 1100px; margin: 0 auto 60px auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.footer-cta-title { font-size: 3rem; font-weight: 800; }
.footer-cta-title span { color: var(--orange-primary); }
.btn-footer-contact { display: inline-flex; align-items: center; background: var(--orange-primary); padding: 6px 8px 6px 28px; border-radius: 100px; color: #ffffff; font-weight: 700; border: none; cursor: pointer; gap: 16px; }
.btn-footer-contact .arrow-pill { width: 38px; height: 38px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.footer-main-grid { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px 24px; display: grid; grid-template-columns: 320px 1fr 1fr 300px; gap: 40px; border-bottom: 1px solid var(--border-light); }
.footer-bio p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 16px 0 24px 0; }
.footer-col-title { font-size: 1rem; font-weight: 800; color: var(--orange-primary); margin-bottom: 20px; }
.footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-nav-list a { text-decoration: none; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; }
.newsletter-form { position: relative; margin-top: 12px; }
.newsletter-input { width: 100%; background: #f1f5f9; border: 1px solid var(--border-light); padding: 14px 50px 14px 18px; border-radius: 100px; font-size: 0.85rem; outline: none; }
.btn-newsletter-send { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px; background: #000000; color: #ffffff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.footer-bottom-bar { max-width: 1100px; margin: 0 auto; padding: 24px; text-align: center; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 992px) {
    .hero-layout { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 28px; }
    .right-content { align-items: center; }
    .skills-cloud { justify-content: center; }
    .stamp-hire-me { display: none; }
    .services-header { grid-template-columns: 1fr; gap: 12px; text-align: left; }
    .about-section { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .about-content { padding-left: 0; }
    .about-stats-grid, .about-contact-pills { justify-content: center; }
    .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .exp-grid, .faqs-layout, .pricing-grid, .awards-grid { grid-template-columns: 1fr; gap: 20px; }
    .portfolio-card, .portfolio-card.reverse { grid-template-columns: 1fr; gap: 20px; }
    .portfolio-card.reverse .project-preview { order: 1; }
    .portfolio-card.reverse .project-info { order: 2; }
    .footer-main-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .pricing-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .award-card { flex: 0 0 100%; min-width: 100%; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .navbar { padding: 16px 20px; }
    .main-title { font-size: 2.1rem !important; line-height: 1.25 !important; }
    .section-title, .tools-title, .exp-title, .portfolio-title, .awards-title, .pricing-title, .testimonials-title, .faqs-title, .footer-cta-title { font-size: 1.7rem !important; line-height: 1.3 !important; }
    .about-heading { font-size: 1.5rem !important; flex-wrap: wrap; justify-content: center; }
    .center-image-container { height: 310px; }
    .orange-shape-bg { width: 290px !important; height: 260px !important; border-radius: 150px 150px 0 0 !important; }
    .person-img-wrapper { width: 260px !important; height: 300px !important; }
    .action-pills-bar { width: 230px; bottom: 12px; }
    .pill-tab { font-size: 0.8rem; padding: 8px 0; }
    .accordion-item { padding: 18px 20px; }
    .accordion-item.active { padding: 22px 20px; }
    .item-title { font-size: 1.1rem; }
    .item-num { width: 36px; font-size: 1.05rem; }
    .portfolio-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .portfolio-card { padding: 20px; }
    .project-preview { height: 240px; }
    .testimonial-slide-item { grid-template-columns: 1fr; }
    .testimonial-card-item:nth-child(2) { display: none; }
    .theme-switcher-pill { bottom: 16px; right: 16px; padding: 8px 14px; }
    .footer-cta-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
    .footer-main-grid { grid-template-columns: 1fr; gap: 28px; }
}