/* =====================================================
   STRAIGHT VIEW - MAIN STYLESHEET
   Author: Straight View Dev Team
   Version: 1.0
===================================================== */

/* ================= ROOT VARIABLES ================= */

:root {
    --primary: #7b2ff7;
    --secondary: #f107a3;
    --gradient: linear-gradient(135deg, #7b2ff7, #f107a3);
    --bg-light: #f5f6fa;
    --bg-dark: #1e1e2f;
    --card-light: #ffffff;
    --card-dark: #2a2a40;
    --text-light: #222;
    --text-dark: #f1f1f1;
    --sidebar-width: 250px;
}

/* ================= RESET ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

body {
    display: flex;
    min-height: 100vh;
    background: var(--bg-light);
    transition: 0.3s ease;
}

/* ================= DARK MODE ================= */

body.dark-mode {
    background: var(--bg-dark);
    color: var(--text-dark);
}

body.dark-mode .card {
    background: var(--card-dark);
}

body.dark-mode .sidebar {
    background: linear-gradient(180deg, #3a1c71, #d76d77);
}

body.dark-mode .topbar {
    background: #2b2b40;
}

body.dark-mode input {
    background: #3a3a55;
    color: #fff;
}

/* ================= SIDEBAR ================= */

.sidebar {
    width: var(--sidebar-width);
    background: var(--gradient);
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    transition: 0.3s ease;
}

.sidebar .logo {
    text-align: center;
    margin-bottom: 40px;
}

.sidebar .logo h2 span {
    color: #fff;
    font-weight: bold;
}

.sidebar nav ul {
    list-style: none;
}

.sidebar nav ul li {
    margin-bottom: 15px;
}

.sidebar nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px 15px;
    display: block;
    border-radius: 8px;
    transition: 0.3s;
}

.sidebar nav ul li a:hover,
.sidebar nav ul li a.active {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-footer {
    margin-top: auto;
    font-size: 12px;
    text-align: center;
    opacity: 0.8;
}

/* ================= MAIN CONTENT ================= */

.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 20px 30px;
    transition: 0.3s ease;
}

/* ================= TOPBAR ================= */

.topbar {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.topbar .left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.topbar .left button {
    background: var(--primary);
    border: none;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.topbar .right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.topbar input {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* ================= CARDS ================= */

.card {
    background: var(--card-light);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
}

/* ================= STATS GRID ================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card .number {
    font-size: 28px;
    margin: 10px 0;
    font-weight: bold;
}

.stat-card .positive {
    color: green;
    font-size: 14px;
}

/* ================= CHART GRID ================= */

.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.chart-card canvas {
    width: 100%;
    height: 250px;
}

/* ================= TABLE ================= */

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table th, table td {
    padding: 12px;
    text-align: left;
}

table thead {
    background: var(--gradient);
    color: #fff;
}

table tbody tr:nth-child(even) {
    background: #f2f2f2;
}

.status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #fff;
}

.status.active {
    background: #27ae60;
}

.status.pending {
    background: #f39c12;
}

.status.completed {
    background: #2980b9;
}

/* ================= PERFORMANCE ================= */

.performance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.progress-item {
    margin-bottom: 15px;
}

.progress {
    background: #ddd;
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
}

.progress span {
    display: block;
    height: 100%;
    background: var(--gradient);
}

/* ================= FOOTER ================= */

.footer {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    opacity: 0.8;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .performance-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .sidebar {
        position: fixed;
        left: -250px;
    }

    .sidebar.active {
        left: 0;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   ABOUT PAGE EXTENDED STYLES - STRAIGHT VIEW
===================================================== */

/* ================= ABOUT HEADER ================= */

.main-content h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

.main-content p {
    line-height: 1.7;
    font-size: 15px;
    opacity: 0.9;
}

/* ================= TEAM GRID ================= */

.stats-grid .card img {
    display: block;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    border: 4px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
                var(--gradient) border-box;
    transition: 0.3s ease;
}

.stats-grid .card:hover img {
    transform: scale(1.08);
}

/* ================= TEAM CARD STYLE ================= */

.stats-grid .card {
    text-align: center;
    transition: 0.3s ease;
    cursor: pointer;
}

.stats-grid .card h3 {
    margin-top: 10px;
    font-size: 18px;
}

.stats-grid .card p {
    font-size: 14px;
    margin-top: 5px;
    opacity: 0.8;
}

/* ================= TIMELINE ================= */

.card ul {
    list-style: none;
    padding-left: 0;
}

.card ul li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.card ul li::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6px;
}

/* ================= COMPANY STAT NUMBERS ================= */

.number {
    font-size: 30px;
    font-weight: bold;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ================= MISSION / VISION CARDS ================= */

.stats-grid .card ul li {
    font-size: 14px;
    opacity: 0.9;
}

/* ================= HOVER GLOW EFFECT ================= */

.card:hover {
    box-shadow: 0 15px 35px rgba(123, 47, 247, 0.25);
}

/* ================= DARK MODE FIXES ================= */

body.dark-mode .card ul li::before {
    background: #fff;
}

body.dark-mode .number {
    -webkit-text-fill-color: #fff;
}

/* ================= RESPONSIVE IMPROVEMENTS ================= */

@media (max-width: 992px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid .card {
        padding: 15px;
    }

    .main-content {
        padding: 15px;
    }

}

/* ================= EXTRA POLISH ================= */

/* Smooth section spacing */
section {
    margin-bottom: 40px;
}

/* Card title spacing */
.card h2, .card h3 {
    margin-bottom: 10px;
}

/* Better footer alignment */
.footer {
    margin-top: 50px;
}

/* Profile image animation */
.stats-grid .card img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stats-grid .card:hover img {
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Gradient border animation */
.stats-grid .card {
    border: 2px solid transparent;
    background-clip: padding-box;
}

.stats-grid .card:hover {
    border-image: var(--gradient);
    border-image-slice: 1;
}

/* Soft fade animation */
.card {
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/* TEAM PORTFOLIO GRID */

.team-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.team-card {
    background: #f2f2f2;
    padding: 25px;
    border-radius: 20px;
    transition: 0.3s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.team-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.team-header img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.skill-tags span {
    padding: 6px 14px;
    background: #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
}

.portfolio-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
}

.portfolio-buttons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.btn-dark {
    padding: 8px 18px;
    background: #111827;
    color: white;
    border-radius: 10px;
    text-decoration: none;
}

.btn-light {
    padding: 8px 18px;
    background: #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: black;
}

@media(max-width: 900px){
    .team-portfolio-grid{
        grid-template-columns: 1fr;
    }
}



/* SERVICES PAGE */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.service-card {
    background: #f2f2f2;
    padding: 25px;
    border-radius: 20px;
    transition: 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.service-card h3 {
    margin-bottom: 10px;
}

.service-card ul {
    margin-top: 10px;
    padding-left: 20px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.process-step {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 15px;
}

@media(max-width:1000px){
    .services-grid{
        grid-template-columns: repeat(2,1fr);
    }
    .process-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:700px){
    .services-grid{
        grid-template-columns: 1fr;
    }
    .process-grid{
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   SERVICES PAGE - SAME STYLE AS PORTFOLIO GRID
===================================================== */

/* Services Grid uses same layout as portfolio */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

/* Service Card */
.portfolio-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

/* Image */
.portfolio-item img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 15px;
    transition: 0.4s ease;
}

/* Title */
.portfolio-item h3 {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Description */
.portfolio-item p {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Button */
.portfolio-item button {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #7b2ff7, #f107a3);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* Hover Effects */
.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(123, 47, 247, 0.2);
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(123, 47, 247, 0.4);
}

/* ================= DARK MODE SUPPORT ================= */

body.dark-mode .portfolio-item {
    background: #2a2a40;
    color: #ffffff;
}

body.dark-mode .portfolio-item p {
    opacity: 0.7;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}




/* PRICING PAGE */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.pricing-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(123,47,247,0.2);
}

.pricing-card h2 {
    font-size: 36px;
    margin: 15px 0;
}

.pricing-card h2 span {
    font-size: 16px;
    opacity: 0.6;
}

.pricing-card ul {
    list-style: none;
    margin: 20px 0;
    text-align: left;
}

.pricing-card ul li {
    margin-bottom: 10px;
    font-size: 14px;
}

.pricing-card button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #7b2ff7, #f107a3);
    color: white;
    cursor: pointer;
    transition: 0.3s ease;
}

.pricing-card button:hover {
    transform: scale(1.05);
}

.featured {
    border: 3px solid #7b2ff7;
    transform: scale(1.05);
}

body.dark-mode .pricing-card {
    background: #2a2a40;
    color: white;
}

@media(max-width:1000px){
    .pricing-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:700px){
    .pricing-grid{
        grid-template-columns: 1fr;
    }
}




/* REVIEWS PAGE */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.review-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(123,47,247,0.2);
}

.review-card img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.review-card h3 {
    margin-bottom: 5px;
}

.stars {
    color: gold;
    margin-bottom: 10px;
    font-size: 18px;
}

.review-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
}

body.dark-mode .review-card {
    background: #2a2a40;
    color: white;
}

@media(max-width:1000px){
    .reviews-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:700px){
    .reviews-grid{
        grid-template-columns: 1fr;
    }
}




/* CONTACT PAGE */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.contact-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(123,47,247,0.2);
}

.contact-card h2 {
    margin-bottom: 10px;
}

.contact-card p {
    font-size: 14px;
    margin-bottom: 15px;
    opacity: 0.85;
}

/* FORM */

.contact-card form {
    display: flex;
    flex-direction: column;
}

.contact-card input,
.contact-card textarea {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.contact-card button {
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #7b2ff7, #f107a3);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s ease;
}

.contact-card button:hover {
    transform: scale(1.05);
}

.contact-info p {
    margin-bottom: 8px;
}

/* DARK MODE */

body.dark-mode .contact-card {
    background: #2a2a40;
    color: white;
}

body.dark-mode input,
body.dark-mode textarea {
    background: #3a3a55;
    color: white;
    border: 1px solid #555;
}

/* RESPONSIVE */

@media(max-width:900px){
    .contact-grid{
        grid-template-columns: 1fr;
    }
}




/* ================= THEME SYSTEM ================= */

/* ===== LIGHT THEME (DEFAULT) ===== */
body {
    background: #f3f4f8;
    color: #1f2937;
    transition: all 0.3s ease;
}

/* Light cards */
.card,
.stat-card,
.team-card,
.review-card,
.pricing-card,
.contact-card,
.portfolio-item,
.revenue-card,
.growth-card,
.recent-card {
    background: #ffffff;
    color: #1f2937;
    transition: all 0.3s ease;
}

/* Light header */
.topbar,
.page-header {
    background: #ffffff;
    color: #1f2937;
}

/* ===== DARK MODE ===== */
body.dark-mode {
    background: linear-gradient(135deg, #1f1f3a 0%, #141428 50%, #0f0f1d 100%);
    color: #ffffff;
}

/* Dark cards */
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .team-card,
body.dark-mode .review-card,
body.dark-mode .pricing-card,
body.dark-mode .contact-card,
body.dark-mode .portfolio-item,
body.dark-mode .revenue-card,
body.dark-mode .growth-card,
body.dark-mode .recent-card {
    background: #2b2d42;
    color: #ffffff;
}

/* Dark header */
body.dark-mode .topbar,
body.dark-mode .page-header {
    background: #2b2d42;
    color: #ffffff;
}



/* ===== FIX PORTFOLIO PAGE DARK MODE ===== */

body.dark-mode .portfolio-card,
body.dark-mode .portfolio-box,
body.dark-mode .portfolio-content,
body.dark-mode .portfolio-inner {
    background: #2b2d42 !important;
    color: #ffffff !important;
}

/* Remove white sections inside portfolio */
body.dark-mode .portfolio-card * {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Fix inner light panel (the white section with buttons) */
body.dark-mode .portfolio-card .inner-box {
    background: #3a3d5a !important;
}


/* ================= FIX PORTFOLIO PAGE ================= */

/* Portfolio Card */
.portfolio-card,
.team-card {
    background: #2b2d42;
    color: #ffffff;
}

/* Skill Tags Dark Style */
.portfolio-card .skill-tags span,
.team-card .skill-tags span {
    background: #3a3d5a;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Inner Content Box */
.portfolio-card .portfolio-inner,
.team-card .portfolio-inner {
    background: #1f2136;
    border-radius: 15px;
}

/* Dark Buttons */
.portfolio-card .btn,
.team-card .btn {
    background: #6a11cb;
    color: #ffffff;
    border: none;
}

.portfolio-card .btn:hover,
.team-card .btn:hover {
    background: #8e2de2;
}

/* Secondary Button */
.portfolio-card .btn-secondary,
.team-card .btn-secondary {
    background: #3a3d5a;
    color: #ffffff;
}




/* ================= LIGHT MODE FIX FOR PORTFOLIO ================= */

/* Portfolio Card Light */
body:not(.dark-mode) .portfolio-card,
body:not(.dark-mode) .team-card {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Skill Tags Light */
body:not(.dark-mode) .portfolio-card .skill-tags span,
body:not(.dark-mode) .team-card .skill-tags span {
    background: #e5e7eb;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

/* Inner Box Light */
body:not(.dark-mode) .portfolio-card .portfolio-inner,
body:not(.dark-mode) .team-card .portfolio-inner {
    background: #f9fafb;
}

/* Buttons Light */
body:not(.dark-mode) .portfolio-card button,
body:not(.dark-mode) .team-card button {
    border-radius: 8px;
}

/* Primary Button Light */
body:not(.dark-mode) .portfolio-card button:first-child,
body:not(.dark-mode) .team-card button:first-child {
    background: #111827;
    color: #ffffff;
}

/* Secondary Button Light */
body:not(.dark-mode) .portfolio-card button:last-child,
body:not(.dark-mode) .team-card button:last-child {
    background: #e5e7eb;
    color: #111827;
}



/* =========================================
   🔥 FINAL MOBILE + THEME STRUCTURE FIX
========================================= */

@media (max-width: 768px) {

    /* Stop flex layout breaking */
    body {
        display: block !important;
    }

    /* Sidebar becomes overlay */
    .sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        z-index: 9999;
    }

    .sidebar.active {
        left: 0 !important;
    }

    /* Main content full width */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 20px 15px !important;
    }

    /* Fix grids everywhere */
    .stats-grid,
    .team-portfolio-grid,
    .services-grid,
    .portfolio-grid,
    .pricing-grid,
    .reviews-grid,
    .contact-grid,
    .process-grid {
        grid-template-columns: 1fr !important;
    }

    /* Fix topbar spacing */
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .topbar .right {
        width: 100%;
        justify-content: space-between;
    }

    .topbar input {
        width: 100%;
    }

}



/* ================= TABLE THEME FIX ================= */

/* Default table styling */
table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    padding: 14px;
    text-align: left;
}

/* Light Mode */
body:not(.dark-mode) table thead {
    background: linear-gradient(135deg, #7b2ff7, #f107a3);
    color: #ffffff;
}

body:not(.dark-mode) table tbody tr {
    background: #ffffff;
    color: #1f2937;
}

body:not(.dark-mode) table tbody tr:nth-child(even) {
    background: #f3f4f6;
}

/* Dark Mode */
body.dark-mode table thead {
    background: linear-gradient(135deg, #7b2ff7, #f107a3);
    color: #ffffff;
}

body.dark-mode table tbody tr {
    background: #2b2d42;
    color: #ffffff;
}

body.dark-mode table tbody tr:nth-child(even) {
    background: #23243a;
}

/* Smooth transition */
table tbody tr {
    transition: background 0.3s ease, color 0.3s ease;
}

/* ================= MOBILE TABLE FIX ================= */

.card {
    overflow: hidden;
}

/* Make table scroll inside card on small screens */
@media (max-width: 768px) {

    .card table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .card table thead,
    .card table tbody,
    .card table tr {
        width: 100%;
    }

}

/* =========================================
   PERFECT FIXED CIRCLE TEAM (NO ROTATION)
========================================= */
/* ✅ Fixed Center + Continuous Rotation (No side movement) */

.teamCircle{
  width:100%;
  height:560px;
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.06);
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
}

.teamCircleGroup{
  width:460px;
  height:460px;
  position:relative;
}

/* Center Box stays fixed */
.teamCircleCenter{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:10;

  padding:16px 22px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  text-align:center;
}

.teamCircleCenter h2{
  margin:0;
  font-size:20px;
  font-weight:1000;
  color:#0f172a;
}

.teamCircleCenter p{
  margin:6px 0 0;
  font-size:13px;
  font-weight:800;
  color:#555;
}

/* ✅ THIS stays centered forever */
.teamCircleRingWrap{
  width:100%;
  height:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

/* ✅ ONLY rotate this ring (no translate inside animation) */
.teamCircleRing{
  width:100%;
  height:100%;
  border-radius:999px;
  position:relative;
  animation: spinCircle 12s linear infinite;
}

@keyframes spinCircle{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); } /* ✅ One fixed direction */
}

/* Members placed in perfect circle */
.teamCircleMember{
  position:absolute;
  top:50%;
  left:50%;
  width:78px;
  height:78px;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  border:4px solid rgba(0,0,0,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);

  transform:
    rotate(calc((360deg / 10) * (var(--i) - 1)))
    translateX(190px)
    rotate(calc(-1 * (360deg / 10) * (var(--i) - 1)));
}

/* Keep photos straight while ring rotates */
.teamCircleMember{
  animation: counterSpin 12s linear infinite;
}

@keyframes counterSpin{
  from{
    transform:
      rotate(calc((360deg / 10) * (var(--i) - 1)))
      translateX(190px)
      rotate(calc(-1 * (360deg / 10) * (var(--i) - 1)))
      rotate(0deg);
  }
  to{
    transform:
      rotate(calc((360deg / 10) * (var(--i) - 1)))
      translateX(190px)
      rotate(calc(-1 * (360deg / 10) * (var(--i) - 1)))
      rotate(-360deg);
  }
}

.teamCircleMember img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ Mobile */
@media(max-width:520px){
  .teamCircle{height:460px;}
  .teamCircleGroup{width:300px;height:300px;}

  .teamCircleMember{
    width:56px;height:56px;
    transform:
      rotate(calc((360deg / 10) * (var(--i) - 1)))
      translateX(125px)
      rotate(calc(-1 * (360deg / 10) * (var(--i) - 1)));
  }

  .teamCircleRing{ animation: spinCircleSmall 12s linear infinite; }

  @keyframes spinCircleSmall{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }

  .teamCircleMember{ animation: counterSpinSmall 12s linear infinite; }

  @keyframes counterSpinSmall{
    from{
      transform:
        rotate(calc((360deg / 10) * (var(--i) - 1)))
        translateX(125px)
        rotate(calc(-1 * (360deg / 10) * (var(--i) - 1)))
        rotate(0deg);
    }
    to{
      transform:
        rotate(calc((360deg / 10) * (var(--i) - 1)))
        translateX(125px)
        rotate(calc(-1 * (360deg / 10) * (var(--i) - 1)))
        rotate(-360deg);
    }
  }
}





.profile-img{
  width:120px;      /* adjust size */
  height:120px;     /* MUST be same as width */
  border-radius:50%;
  object-fit:cover;
  display:block;
}





/* Topbar right container fix */
.topbar .right{
  display:flex;
  align-items:center;
  gap:15px;
}

/* Profile Wrapper */
.topbar-profile{
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;

  border:2px solid #7b2ff7;
  box-shadow:0 5px 18px rgba(123,47,247,0.35);
  cursor:pointer;
  transition:0.3s ease;
}

/* Image */
.topbar-profile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Hover effect */
.topbar-profile:hover{
  transform:scale(1.08);
}





.theme-toggle{
    width:44px;
    height:44px;
    border-radius:14px;
    border:none;
    cursor:pointer;

    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.theme-toggle:hover{
    transform: scale(1.1);
}

body.dark-mode{
    background: linear-gradient(135deg,#1f1f3a 0%, #141428 50%, #0f0f1d 100%);
    color:white;
}



/* ================= SOCIAL MEDIA ================= */

.social-links{
    display:flex;
    gap:15px;
    justify-content:center;
    margin-top:20px;
}

.social{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:18px;
    color:white;
    text-decoration:none;
    transition:all 0.3s ease;
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
}

/* LinkedIn */
.social.linkedin{
    background:#0077b5;
}

/* Instagram */
.social.instagram{
    background: linear-gradient(45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5);
}

/* Gmail */
.social.gmail{
    background:#ea4335;
}

/* Hover Effect */
.social:hover{
    transform:translateY(-6px) scale(1.1);
    box-shadow:0 12px 25px rgba(0,0,0,0.25);
}

/* Dark Mode Adjust */
body.dark-mode .social{
    box-shadow:0 6px 20px rgba(255,255,255,0.1);
}






/* ================= FINAL WORKING THEME ================= */

:root{
  --bg: #f3f4f8;
  --text: #1f2937;
  --card: #ffffff;
  --header: #ffffff;
}

body{
  background: var(--bg);
  color: var(--text);
  transition: 0.3s ease;
}

/* Cards */
.card,
.team-card,
.review-card,
.pricing-card,
.contact-card,
.portfolio-item,
.stat-card{
  background: var(--card);
  color: var(--text);
}

/* Header */
.topbar{
  background: var(--header);
}

/* DARK MODE */
body.dark-mode{
  --bg: linear-gradient(135deg,#1f1f3a 0%,#141428 50%,#0f0f1d 100%);
  --text: #ffffff;
  --card: #2b2d42;
  --header: #2b2d42;
}



/* Instagram */
.social.instagram{
    background: linear-gradient(45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5);
}



/* ===== CONTACT FORM FINAL FIX ===== */

.contact-form{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px;
    border-radius:10px;
    border:1px solid #555;
    font-size:14px;
    box-sizing:border-box;
    transition:0.3s ease;
}

.contact-form textarea{
    min-height:140px;
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:#7b2ff7;
    box-shadow:0 0 0 2px rgba(123,47,247,0.2);
}

.contact-form button{
    padding:14px;
    border-radius:10px;
    border:none;
    font-size:15px;
    cursor:pointer;
    background: linear-gradient(135deg,#7b2ff7,#f107a3);
    color:white;
    transition:0.3s ease;
}

.contact-form button:hover{
    transform:scale(1.05);
}

/* Mobile safe */
@media(max-width:768px){
    .contact-form{
        gap:12px;
    }
}


/* ================= COMING SOON BOX ================= */

.coming-soon-box{
    display:none;
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 20px;
    background: linear-gradient(135deg,#7b2ff7,#f107a3);
    color:#fff;
    font-weight:600;
    border-radius:30px;
    font-size:14px;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    z-index:9999;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translate(-50%, -15px);
    }
    to{
        opacity:1;
        transform:translate(-50%, 0);
    }
}





/* =======================================
   ULTRA 3D ANIME CINEMATIC INTRO
======================================= */

#anime-intro {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #020210 0%, #000 70%);
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    overflow: hidden;
    z-index: 9999999;
}

/* Scene container */
.scene {
    width: 400px;
    height: 400px;
    transform-style: preserve-3d;
    animation: cameraZoom 5s ease forwards;
}

/* Tunnel container */
.tunnel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Rings */
.ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    transform-style: preserve-3d;
}

.r1 {
    border-top: 3px solid #00f0ff;
    border-left: 3px solid #9d00ff;
    animation: rotate1 2s linear infinite;
    box-shadow: 0 0 40px #00f0ff;
}

.r2 {
    border-bottom: 3px solid #ff00cc;
    border-right: 3px solid #0066ff;
    transform: translateZ(-60px);
    animation: rotate2 3s linear infinite reverse;
    box-shadow: 0 0 40px #ff00cc;
}

.r3 {
    border-top: 3px solid #00ff99;
    border-left: 3px solid #ff6600;
    transform: translateZ(-120px);
    animation: rotate3 4s linear infinite;
    box-shadow: 0 0 40px #00ff99;
}

/* Core */
.core {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #00f0ff, #0066ff);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 40px #00f0ff,
        0 0 80px #0066ff,
        0 0 120px #9d00ff;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Shockwave */
.shockwave {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
    animation: shock 4s ease-out forwards;
}

/* Animations */

@keyframes rotate1 {
    to { transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes rotate2 {
    to { transform: rotateY(360deg) rotateZ(360deg) translateZ(-60px); }
}

@keyframes rotate3 {
    to { transform: rotateX(360deg) rotateZ(360deg) translateZ(-120px); }
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes shock {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
    80% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes cameraZoom {
    0% { transform: scale(0.6); opacity: 0; }
    30% { transform: scale(1); opacity: 1; }
    80% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}






/* =========================
   MODERN SMOOTH CURSOR
========================= */

#cursorDot,
#cursorRing {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
}

/* Center dot */
#cursorDot {
  width: 8px;
  height: 8px;
  background: #7b2ff7;
  border-radius: 50%;
}

/* Outer ring */
#cursorRing {
  width: 32px;
  height: 32px;
  border: 2px solid #7b2ff7;
  border-radius: 50%;
  transition: width .2s ease, height .2s ease, border .2s ease;
}

/* Hover effect */
a:hover ~ #cursorRing,
button:hover ~ #cursorRing {
  width: 45px;
  height: 45px;
}

/* Dark mode color */
body.dark-mode #cursorDot,
body.dark-mode #cursorRing {
  background: #ff2da1;
  border-color: #ff2da1;
}

/* Hide default cursor only on desktop */
@media (hover: hover) {
  body {
    cursor: none;
  }
}


/* =========================
   3D WAVE CURSOR
========================= */

#waveCursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
}

/* Hide default cursor on desktop only */
@media (hover: hover) {
  body {
    cursor: none;
  }
}






/* ================= QR MODAL ================= */

.qr-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.qr-box{
  background:#ffffff;
  padding:30px;
  border-radius:20px;
  text-align:center;
  width:320px;
  max-width:90%;
  position:relative;
  animation:popupScale 0.3s ease;
}

.qr-box img{
  width:100%;
  max-width:250px;
  margin-top:15px;
}

.close-qr{
  position:absolute;
  top:10px;
  right:15px;
  font-size:22px;
  cursor:pointer;
}

@keyframes popupScale{
  from{transform:scale(0.8);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* Dark mode support */
body.dark-mode .qr-box{
  background:#2b2d42;
  color:#ffffff;
}