/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    /* padding-top: 30px; same as .nav-container height */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-logo a:hover {
    color: #3498db;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: #3498db;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #3498db;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Home Section */
.home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    text-align: center;
    position: relative;
    padding: 120px 10px 80px 10px;
}

.nav-logo-img {
    height: 50px;
    /* adjust size as needed */
    width: auto;
    /* keeps aspect ratio */
    display: block;
}


.home-content {
    max-width: 700px;
    margin: 0 auto;
}

.greeting {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.home-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.name-highlight {
    color: #3498db;
}

.role-container {
    margin-bottom: 2rem;
}

.role-prefix {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    display: block;
}

.animated-roles {
    font-size: 1.3rem;
    font-weight: 600;
    color: #3498db;
}

.home-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.home-skills {
    margin-bottom: 2.5rem;
}

.skills-label {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 500px;
    margin: 0 auto;
}

.skill-tag {
    background: rgba(52, 152, 219, 0.15);
    border: 1px solid rgba(52, 152, 219, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.skill-tag:hover {
    background: rgba(52, 152, 219, 0.25);
    border-color: #3498db;
    transform: translateY(-1px);
}

.home-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-2px);
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
}

/* Section Styles */
.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: #2c3e50;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 3px;
    background: #3498db;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* About Section */
.about {
    padding: 100px 0;
    background: #f8f9fa;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.about-image {
    text-align: center;
}

.profile-img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #3498db;
    transition: transform 0.3s ease;
}

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

.about-text p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #555;
}

.skills {
    margin-top: 2rem;
}

.skills h3 {
    margin-bottom: 2rem;
    color: #2c3e50;
    text-align: center;
}

.skills-category {
    margin-bottom: 2.5rem;
}

.skills-category h4 {
    margin-bottom: 1rem;
    color: #34495e;
    font-size: 1.1rem;
    text-align: center;
    position: relative;
}

.skills-category h4::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #3498db;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 0.8rem;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.1);
}

.skill-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.3);
}

.skill-item i {
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}

.skill-item span {
    font-weight: 600;
    color: #333;
    text-align: center;
    font-size: 0.9rem;
}

/* Specific icon colors for different technologies */
.skill-item:nth-child(1) i {
    color: #FF9900;
}

/* AWS */
.skill-item:nth-child(2) i {
    color: #2496ED;
}

/* Docker */
.skill-item:nth-child(3) i {
    color: #326CE5;
}

/* Kubernetes */
.skill-item:nth-child(4) i {
    color: #623CE4;
}

/* Terraform */
.skill-item:nth-child(5) i {
    color: #EE0000;
}

/* Ansible */
.skill-item:nth-child(6) i {
    color: #FF9900;
}

/* CloudFormation */

.skills-category:nth-child(3) .skill-item:nth-child(1) i {
    color: #FC6D26;
}

/* GitLab */
.skills-category:nth-child(3) .skill-item:nth-child(2) i {
    color: #D33833;
}

/* Jenkins */
.skills-category:nth-child(3) .skill-item:nth-child(3) i {
    color: #F05032;
}

/* Git */
.skills-category:nth-child(3) .skill-item:nth-child(4) i {
    color: #632CA6;
}

/* Datadog */

.skills-category:nth-child(4) .skill-item:nth-child(1) i {
    color: #3776AB;
}

/* Python */
.skills-category:nth-child(4) .skill-item:nth-child(2) i {
    color: #4EAA25;
}

/* Bash */
.skills-category:nth-child(4) .skill-item:nth-child(3) i {
    color: #FCC624;
}

/* Linux */
.skills-category:nth-child(4) .skill-item:nth-child(4) i {
    color: #F7DF1E;
}

/* JavaScript */
.skills-category:nth-child(4) .skill-item:nth-child(5) i {
    color: #E34F26;
}

/* HTML5 */
.skills-category:nth-child(4) .skill-item:nth-child(6) i {
    color: #1572B6;
}

/* CSS3 */

/* Experience Section */
.experience {
    padding: 100px 0;
    background: #f8f9fa;
}

.experience-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.experience-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    border-left: 4px solid #3498db;
}

.experience-card.current {
    border-left-color: #27ae60;
}

.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.experience-header {
    padding: 2rem;
    background: white;
    border-bottom: 1px solid #eee;
}

.experience-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.experience-date {
    background: #3498db;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.experience-card.current .experience-date {
    background: #27ae60;
}

.experience-status {
    background: #f39c12;
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.experience-title h3 {
    color: #2c3e50;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.experience-title h4 {
    color: #7f8c8d;
    font-size: 1rem;
    font-weight: 500;
}

.experience-body {
    padding: 0 2rem 2rem 2rem;
}

.experience-summary p {
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.experience-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.experience-card:hover .experience-details {
    max-height: 500px;
}

.experience-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.experience-details li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
    color: #666;
}

.experience-details li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
}

.experience-card.current .experience-details li::before {
    color: #27ae60;
}

.experience-details strong {
    color: #2c3e50;
    font-weight: 600;
}

.experience-tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.tech-badge {
    background: #ecf0f1;
    color: #2c3e50;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tech-badge:hover {
    background: #3498db;
    color: white;
    transform: translateY(-1px);
}

/* Achievements Section
.achievements {
    padding: 100px 0;
    background: #f8f9fa;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.achievement-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 4px solid #3498db;
    position: relative;
    overflow: hidden;
}

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #2980b9);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.achievement-card:hover::before {
    transform: scaleX(1);
}

.achievement-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(52, 152, 219, 0.2);
}

.achievement-card.featured {
    border-left-color: #f39c12;
    background: linear-gradient(135deg, #fff 0%, #fef9e7 100%);
}

.achievement-card.featured::before {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.achievement-card.special {
    border-left-color: #9b59b6;
    background: linear-gradient(135deg, #fff 0%, #f4f1f8 100%);
}

.achievement-card.special::before {
    background: linear-gradient(90deg, #9b59b6, #8e44ad);
}

.achievement-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2980b9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.achievement-card.featured .achievement-icon {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.achievement-card.special .achievement-icon {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.achievement-card:hover .achievement-icon {
    transform: scale(1.1) rotate(5deg);
}

.achievement-icon i {
    font-size: 1.5rem;
    color: white;
}

.achievement-content h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.4;
}

.achievement-summary p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.achievement-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.achievement-card:hover .achievement-details {
    max-height: 400px;
}

.achievement-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.achievement-details li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
    color: #666;
    font-size: 0.9rem;
}

.achievement-details li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
}

.achievement-card.featured .achievement-details li::before {
    color: #f39c12;
}

.achievement-card.special .achievement-details li::before {
    color: #9b59b6;
}

.achievement-details strong {
    color: #2c3e50;
    font-weight: 600;
}

.achievement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.achievement-card.featured .tag {
    background: #fef3e0;
    color: #d68910;
}

.achievement-card.special .tag {
    background: #f4ecf7;
    color: #7d3c98;
} */

.tag:hover {
    transform: scale(1.05);
}



/* Contact Section */
.contact {
    padding: 100px 0;
    background: #f8f9fa;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.contact-info p {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #3498db;
}

.contact-link i {
    width: 20px;
    font-size: 1.2rem;
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ============================================================================
   EMAILJS INTEGRATION STYLES
   ============================================================================
   
   These styles support the EmailJS contact form integration by providing
   visual feedback during form submission and email sending operations.
   
   LOADING STATE FUNCTIONALITY:
   - Visual spinner indicates email is being sent via EmailJS
   - Button disabled state prevents duplicate form submissions  
   - Opacity change provides clear visual feedback of processing state
   - Hover effects disabled during loading to reinforce disabled state
   
   TESTING THE LOADING STATES:
   1. Submit contact form and verify loading spinner appears immediately
   2. Check that button becomes unclickable during EmailJS submission
   3. Confirm button text changes to "Sending..." with spinner animation
   4. Verify button returns to normal state after EmailJS completion
   5. Test that hover effects are disabled during loading state
   6. Ensure loading state works across different browsers and devices
   
   INTEGRATION POINTS:
   - .loading-spinner class is dynamically added by JavaScript during submission
   - .btn.loading class is applied to submit button during EmailJS operations
   - Styles coordinate with handleFormSubmission() and setButtonLoadingState() functions
   
   CUSTOMIZATION OPTIONS:
   - Change spinner colors by modifying border properties
   - Adjust spinner size by changing width/height values
   - Modify loading opacity for different visual emphasis
   - Customize animation speed by changing animation duration
*/

/* Loading Spinner Animation for EmailJS Form Submission */
.loading-spinner {
    display: inline-block;
    width: 16px;
    /* Compact size for button integration */
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* Semi-transparent border for depth */
    border-top: 2px solid white;
    /* Solid white for spinning effect */
    border-radius: 50%;
    /* Perfect circle shape */
    animation: spin 1s linear infinite;
    /* Smooth continuous rotation */
    margin-right: 8px;
    /* Space between spinner and "Sending..." text */
    vertical-align: middle;
    /* Align with button text baseline */
}

/* Submit Button Loading State During EmailJS Operations */
.btn.loading {
    opacity: 0.8;
    /* Visual indication of disabled state */
    cursor: not-allowed;
    /* Shows disabled cursor on hover */
    transform: none !important;
    /* Disable normal button animations */
}

/* Disable All Hover Effects During EmailJS Processing */
.btn.loading:hover {
    transform: none !important;
    /* Prevent hover scale/transform effects */
    box-shadow: none !important;
    /* Disable hover shadow effects */
}

/* Keyframe Animation for Loading Spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    /* Start position */
    100% {
        transform: rotate(360deg);
    }

    /* Full rotation */
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}



/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu a {
        padding: 0.5rem;
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .home {
        padding: 100px 15px 60px 15px;
    }

    .home-title {
        font-size: 2.2rem;
    }

    .home-description {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .home-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .skills-tags {
        gap: 0.4rem;
    }

    .skill-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }

    .home-skills {
        margin-bottom: 2rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }



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

    .skills-category {
        margin-bottom: 2rem;
    }

    /* Experience responsive */
    .experience-cards {
        grid-template-columns: 1fr;
    }

    .experience-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .experience-header {
        padding: 1.5rem;
    }

    .experience-body {
        padding: 1.5rem;
    }

    .experience-title h3 {
        font-size: 1.3rem;
    }

    .experience-title h4 {
        font-size: 1rem;
    }

    /* Achievements responsive */
    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .achievement-card {
        padding: 1.5rem;
    }

    .achievement-icon {
        width: 50px;
        height: 50px;
    }

    .achievement-icon i {
        font-size: 1.3rem;
    }

    .achievement-details li {
        font-size: 0.85rem;
        padding-left: 1.2rem;
    }

    .achievement-card:hover .achievement-details {
        max-height: 350px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .home {
        padding: 90px 15px 50px 15px;
    }

    .home-title {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .greeting {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }

    .role-prefix {
        font-size: 1rem;
    }

    .animated-roles {
        font-size: 1.1rem;
    }

    .home-description {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
    }

    .skills-label {
        font-size: 0.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .profile-img {
        width: 200px;
        height: 200px;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .home-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .role-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .animated-roles {
        height: 1.8rem;
    }

    .role {
        font-size: 1.1rem;
    }

    .floating-shapes .shape {
        display: none;
    }
}