.elementor-1897 .elementor-element.elementor-element-e7b8bb7{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}@media(max-width:767px){.elementor-1897 .elementor-element.elementor-element-e7b8bb7{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}/* Start custom CSS for html, class: .elementor-element-2e80831 */.profile {
    width: 100% !important;     /* full width */
    margin: 0 !important;       /* remove extra margin */
    padding: 15px !important;   /* keep small padding inside */
    border-radius: 12px !important;  /* keep the rounded corners */
    box-sizing: border-box !important;
}

.elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
  .profile {
    border-radius: 0 !important; /* optional: make edges flush on small devices */
    padding: 10px !important;
  }
}


/* Section Titles */
.section-title {
    font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.8em !important;
    letter-spacing: 0.5px !important;
    text-transform: capitalize !important;
    border-left: 4px solid #764ba2 !important;
    padding-left: 8px !important;
    margin-bottom: 12px !important;
}

/* Card Titles (Business Names, Experience Roles) */
.business-name,
.experience-role {
    font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.2em !important;
    color: #ffffff !important;
}

/* Main Header Name (Krishnamurthhy) */
.name {
    font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
    font-weight: 700 !important;   /* heavier to stand out */
    font-size: 1.5em !important;     /* larger */
    letter-spacing: 1px !important;
    color: #ffffff !important;     /* white text in dark theme */
}

/* Smaller subtitles (Job Title, Company, Description) */
.title,
.experience-company,
.business-desc,
.experience-desc {
    font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1em !important;
    color: inherit !important;
}

.profile-pic img {
    width: 120px;        /* adjust size */
    height: 120px;
    border-radius: 8px;  /* small rounded corners, or 0px for perfect square */
    object-fit: cover;   /* keeps aspect ratio, crops excess */
    border: 3px solid #fff; /* optional border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* same style as before */
}

/* Contact Buttons Wrapper */
.contact-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

/* Base Button Style */
.contact-btn {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 25px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

/* Share Button (gradient) */
.contact-btn.share {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #fff !important;
    border: none !important;
}

/* Save Contact Button (outlined style) */
.contact-btn.save {
    background: #fff !important;
    color: #667eea !important;
    border: 2px solid #667eea !important;
}

/* Hover Effects */
.contact-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

body.light-theme .name {
    color: #212529!important;;
}

body.light-theme .title {
    color: #495057 !important;;
}

.name {
    color: #ffffff;   /* White text */
    font-weight: 700;
}

.title {
    color: #c0c0c0 !important;   /* Light gray text */
    font-weight: 500;
}

/* Light Theme Override */
body.light-theme .name {
    color: #212529 !important;   /* Dark gray (almost black) */
}

body.light-theme .title {
    color: #343a40 !important;   /* Dark gray for better readability */
}

button, .btn {
    border-radius: 50px !important;  /* Force pill/curve shape */
    padding: 10px 24px;              /* Adjust padding */
    font-weight: 600;                /* Make text bold */
    transition: all 0.3s ease;
}

button:hover, .btn:hover {
    transform: scale(1.05);          /* Subtle hover zoom */
}

/* Default (dark theme) */
body {
    background-color: #121212 !important;   /* Dark background */
    color: #ffffff!important;              /* White text */
}

/* Light Theme text colors */
body.light-theme .name {
    color: #ffffff!important;   /* Keep white for visibility */
}

body.light-theme .title {
    color: #c0c0c0!important;   /* Softer gray */
}

body.light-theme .btn {
    background-color: #f8f9fa !important;  /* Light button */
    color: #212529 !important;
}

.contact-info p,
.contact-info a,
.contact-info span {
    display: block;
    word-wrap: break-word;       /* Break long words */
    overflow-wrap: break-word;   /* Modern support */
    white-space: normal;         /* Allow text to wrap */
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;              /* space between icon & text */
}

.contact-item .text {
    flex: 1;                /* allow text to use remaining space */
    min-width: 0;           /* CRUCIAL: lets flexbox shrink text */
    white-space: normal !important;    /* allow wrapping */
    overflow-wrap: anywhere;/* break long email/urls */
    word-break: break-word;
}

.elementor-icon-list-item {
    display: flex;
    align-items: flex-start;   /* icon stays at top if text wraps */
    gap: 10px;
    width: 100%;              /* take full container width */
}

.elementor-icon-list-text {
    flex: 1;
    min-width: 0;
    white-space: normal !important;   /* force text to break */
    word-break: break-all !important; /* break long words anywhere */
    overflow-wrap: anywhere !important;
    line-height: 1.6;
}

.contact-container .elementor-icon-list-item {
    margin-bottom: 8px; /* spacing between items */
}

.contact-container .elementor-icon-list-icon {
    font-size: 18px;    /* keep icon size same */
}

.contact-container .elementor-icon-list-text {
    font-size: 16px;    /* keep text size same */
}

body .elementor .name {
    color: var(--text-primary) !important;
}

body .elementor .business-name,
body .elementor .experience-role {
    color: var(--text-primary) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7b8bb7 */.container {
            max-width: 420px;
            width: 100%;
            background: #1a1a1a;
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
            position: relative;
            transition: all 0.3s ease;
        }

        /* Theme Toggle Switch */
        .theme-toggle-container {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .theme-toggle {
            position: relative;
            display: inline-block;
            width: 65px;
            height: 32px;
        }

        .theme-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .theme-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            transition: .3s;
            border-radius: 34px;
        }

        .theme-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 3px;
            bottom: 3px;
            background: linear-gradient(135deg, #0078d4, #107c10);
            transition: .3s;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-slider:after {
            content: '🌙';
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            transition: .3s;
        }

        input:checked + .theme-slider {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 193, 7, 0.5);
        }

        input:checked + .theme-slider:before {
            transform: translateX(29px);
            background: linear-gradient(135deg, #ffb900, #ff8c00);
        }

        input:checked + .theme-slider:after {
            content: '☀️';
            left: 8px;
        }

        .theme-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        /* Header Section */
        .header {
            background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
            border-radius: 28px;
            margin: 20px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .profile-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 25px 25px;
            cursor: pointer;
            text-align: center;
        }

        .profile-pic {
            width: 140px;
            height: 140px;
            border-radius: 25px;
            background: linear-gradient(135deg, #0078d4, #107c10);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 4px solid rgba(255, 255, 255, 0.15);
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 40px rgba(0, 120, 212, 0.3);
        }

        .profile-pic i {
            font-size: 48px;
            color: white;
        }

        .profile-pic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 21px;
        }

        .profile-info {
            width: 100%;
        }

        .name {
            color: #ffffff;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            line-height: 1.3;
        }

        .title {
            color: #c0c0c0;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            line-height: 1.4;
            margin-bottom: 15px;
        }

        .dropdown-arrow {
            color: #888;
            font-size: 20px;
            transition: transform 0.3s ease, color 0.3s ease;
            margin-top: 10px;
        }

        .dropdown-arrow.rotated {
            transform: rotate(180deg);
        }

        .contact-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 25px;
        }

        .contact-details.expanded {
            max-height: 600px;
            padding: 0 25px 25px;
        }

        .contact-item-header {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }

        .contact-item-header:last-child {
            border-bottom: none;
        }

        .contact-icon-header {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: linear-gradient(135deg, #0078d4, #107c10);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
            box-shadow: 0 4px 15px rgba(0, 120, 212, 0.2);
        }

        .contact-info-header {
            flex: 1;
        }

        .contact-label {
            color: #888;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 3px;
            transition: all 0.3s ease;
        }

        .contact-value {
            color: #ffffff;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            line-height: 1.4;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 25px;
            padding: 25px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 15px;
            transition: all 0.3s ease;
        }

        .social-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #b0b0b0;
            font-size: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .social-icon.linkedin:hover { 
            color: #0077B5; 
            border-color: #0077B5;
            background: rgba(0, 119, 181, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 119, 181, 0.3);
        }
        .social-icon.twitter:hover { 
            color: #1DA1F2; 
            border-color: #1DA1F2;
            background: rgba(29, 161, 242, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(29, 161, 242, 0.3);
        }
        .social-icon.instagram:hover { 
            color: #E4405F; 
            border-color: #E4405F;
            background: rgba(228, 64, 95, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(228, 64, 95, 0.3);
        }
        .social-icon.facebook:hover { 
            color: #4267B2; 
            border-color: #4267B2;
            background: rgba(66, 103, 178, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(66, 103, 178, 0.3);
        }

        /* Content Sections */
        .content {
            padding: 0 30px 30px;
        }

        .section {
            margin-bottom: 40px;
            display: none;
        }

        .section.active {
            display: block;
        }

        .section-title {
            color: #ffffff;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 12px;
            transition: all 0.3s ease;
            text-align: center;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(135deg, #0078d4, #107c10);
            border-radius: 2px;
        }

        .section-text {
            color: #c0c0c0;
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 22px;
            transition: all 0.3s ease;
            text-align: justify;
        }

        /* QR Code Section */
        .qr-section {
            text-align: center;
            margin: 35px 0;
        }

        .qr-container {
            background: white;
            padding: 25px;
            border-radius: 18px;
            display: inline-block;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .qr-code {
            width: 220px;
            height: 220px;
            background: #f8f9fa;
            border: 3px solid #e9ecef;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .qr-placeholder {
            font-size: 56px;
            color: #0078d4;
            margin-bottom: 12px;
        }

        .qr-text {
            color: #666;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            line-height: 1.4;
        }

        .qr-description {
            color: #c0c0c0;
            font-size: 16px;
            margin-top: 18px;
            transition: all 0.3s ease;
        }

        /* Business Cards */
        .business-grid {
            display: grid;
            gap: 25px;
        }

        .business-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 18px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .business-logo {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            background: linear-gradient(135deg, #0078d4, #107c10);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 18px;
            box-shadow: 0 8px 25px rgba(0, 120, 212, 0.2);
        }

        .business-name {
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            line-height: 1.3;
        }

        .business-desc {
            color: #c0c0c0;
            font-size: 16px;
            margin-bottom: 18px;
            transition: all 0.3s ease;
            line-height: 1.6;
        }

        .know-more-btn {
            background: linear-gradient(135deg, #0078d4, #107c10);
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 25px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(0, 120, 212, 0.3);
        }

        .know-more-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 120, 212, 0.5);
        }

        /* Experience Section */
        .experience-item {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 18px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }

        .experience-header {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            margin-bottom: 18px;
        }

        .experience-logo {
            width: 55px;
            height: 55px;
            border-radius: 12px;
            background: linear-gradient(135deg, #ffb900, #ff8c00);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a1a1a;
            font-size: 20px;
            font-weight: bold;
            flex-shrink: 0;
            box-shadow: 0 8px 25px rgba(255, 185, 0, 0.2);
        }

        .experience-details {
            flex: 1;
        }

        .experience-role {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 6px;
            transition: all 0.3s ease;
            line-height: 1.3;
        }

        .experience-company {
            color: #0078d4;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .experience-duration {
            color: #888;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .experience-desc {
            color: #c0c0c0;
            font-size: 16px;
            line-height: 1.7;
            transition: all 0.3s ease;
        }

        /* Contact Info */
        .contact-info {
            display: grid;
            gap: 18px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 18px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .contact-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .contact-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0078d4, #107c10);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            box-shadow: 0 6px 20px rgba(0, 120, 212, 0.2);
        }

        .contact-text {
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            transition: all 0.3s ease;
        }

        .contact-text strong {
            display: block;
            margin-bottom: 4px;
            font-size: 18px;
        }

        /* BNI Section Styles */
        .bni-header {
            background: linear-gradient(135deg, #ffb900, #ff8c00);
            color: #1a1a1a;
            padding: 20px 25px;
            border-radius: 18px;
            margin-bottom: 30px;
            text-align: center;
            font-weight: 700;
            font-size: 18px;
            box-shadow: 0 10px 30px rgba(255, 185, 0, 0.3);
        }

        .bni-achievements {
            background: rgba(255, 185, 0, 0.1);
            border-radius: 18px;
            padding: 25px;
            border: 1px solid rgba(255, 185, 0, 0.3);
            margin-top: 25px;
            transition: all 0.3s ease;
        }

        .bni-achievements h3 {
            color: #ffb900;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .bni-achievements ul {
            list-style: none;
            padding: 0;
        }

        .bni-achievements li {
            color: #c0c0c0;
            font-size: 16px;
            margin-bottom: 10px;
            padding-left: 20px;
            position: relative;
            transition: all 0.3s ease;
            line-height: 1.5;
        }

        .bni-achievements li::before {
            content: '•';
            color: #ffb900;
            font-weight: bold;
            font-size: 18px;
            position: absolute;
            left: 0;
        }

        /* Navigation Footer */
        .nav-footer {
            background: rgba(0, 0, 0, 0.3);
            padding: 18px 20px;
            display: flex;
            justify-content: space-around;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .nav-item {
            text-align: center;
            text-decoration: none;
            color: #b0b0b0;
            font-size: 12px;
            font-weight: 600;
            padding: 8px 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 65px;
        }

        .nav-item i {
            font-size: 18px;
        }

        .nav-item.active,
        .nav-item:hover {
            color: #0078d4;
            transform: translateY(-2px);
        }

        .contact-buttons {
            display: flex;
            flex-direction: column;
            gap: 18px;
            margin-top: 25px;
        }

        .contact-btn {
            width: 100%;
            padding: 16px;
            border-radius: 28px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.3s ease;
        }

        .contact-btn.share {
            background: linear-gradient(135deg, #0078d4, #107c10);
            color: #fff;
            box-shadow: 0 8px 25px rgba(0, 120, 212, 0.3);
        }

        .contact-btn.save {
            background: #fff;
            color: #0078d4;
            border: 3px solid #0078d4;
        }

        .contact-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.3);
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #0078d4, #107c10, #ffb900, #d83b01);
            border-radius: 28px 28px 0 0;
        }

        /* Light Theme Styles */
        body.light-theme {
            background: linear-gradient(135deg, #e3f2fd 0%, #f1f8e9 50%, #fff3e0 100%);
            color: #212529;
        }

        body.light-theme .container {
            background: #ffffff;
            color: #212529;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
        }

        body.light-theme .header {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        }

        body.light-theme .name {
            color: #212529;
        }

        body.light-theme .title {
            color: #495057;
        }

        body.light-theme .dropdown-arrow {
            color: #6c757d;
        }

        body.light-theme .section-title {
            color: #212529;
        }

        body.light-theme .section-text {
            color: #343a40;
        }

        body.light-theme .contact-item-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.light-theme .contact-label {
            color: #6c757d;
        }

        body.light-theme .contact-value {
            color: #212529;
        }

        body.light-theme .social-icons {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.light-theme .social-icon {
            color: #6c757d;
            border-color: rgba(0, 0, 0, 0.1);
        }

        body.light-theme .business-card {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
        }

        body.light-theme .business-name {
            color: #212529;
        }

        body.light-theme .business-desc {
            color: #343a40;
        }

        body.light-theme .experience-item {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
        }

        body.light-theme .experience-role {
            color: #212529;
        }

        body.light-theme .experience-duration {
            color: #6c757d;
        }

        body.light-theme .experience-desc {
            color: #343a40;
        }

        body.light-theme .bni-achievements {
            background: rgba(255, 185, 0, 0.1);
            border-color: rgba(255, 185, 0, 0.3);
        }

        body.light-theme .bni-achievements li {
            color: #343a40;
        }

        body.light-theme .contact-item {
            background: rgba(0, 0, 0, 0.03);
        }

        body.light-theme .contact-item:hover {
            background: rgba(0, 0, 0, 0.08);
        }

        body.light-theme .contact-text {
            color: #212529;
        }

        body.light-theme .nav-footer {
            background: rgba(0, 0, 0, 0.05);
            border-top-color: rgba(0, 0, 0, 0.1);
        }

        body.light-theme .nav-item {
            color: #6c757d;
        }

        body.light-theme .nav-item.active,
        body.light-theme .nav-item:hover {
            color: #0078d4;
        }

        body.light-theme .qr-description {
            color: #495057;
        }

        body.light-theme .contact-btn.save {
            background: #0078d4;
            color: #fff;
            border-color: #0078d4;
        }

        body.light-theme .theme-label {
            color: #495057;
        }

        body.light-theme .theme-slider {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.2);
        }

        /* Responsive Design */
        @media (max-width: 480px) {
            .container {
                margin: 10px;
                max-width: none;
                border-radius: 25px;
            }
            
            .header {
                margin: 15px;
                border-radius: 25px;
            }
            
            .content {
                padding: 0 20px 20px;
            }
            
            .nav-footer {
                padding: 15px;
            }

            .nav-item {
                font-size: 11px;
                min-width: 55px;
            }

            .nav-item i {
                font-size: 16px;
            }

            .qr-code {
                width: 180px;
                height: 180px;
            }

            .qr-container {
                padding: 20px;
            }

            .profile-pic {
                width: 120px;
                height: 120px;
            }

            .name {
                font-size: 24px;
            }

            .title {
                font-size: 14px;
            }

            .section-title {
                font-size: 22px;
            }

            .section-text {
                font-size: 15px;
            }

            .theme-toggle-container {
                top: 15px;
                right: 15px;
            }

            .theme-toggle {
                width: 55px;
                height: 28px;
            }

            .theme-slider:before {
                height: 20px;
                width: 20px;
            }

            input:checked + .theme-slider:before {
                transform: translateX(25px);
            }
        }
    </style>/* End custom CSS */