/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    padding: 0;
}

/* Background Image */
.background-container {
    background-image: url('https://images.alphacoders.com/127/1276993.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 20px;
}

/* Header Section */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

/* Each section gets an equal amount of space */
.profile-photo-container,
.name-info,
.contact-container {
    flex: 1;
}

/* Profile Photo Container */
.profile-photo-container {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-shrink: 0; 
}

/* Default GIF */
.profile-photo.gif {
    position: absolute;
    top: 25;
    left: 25;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.7s ease-in-out;
}

/* Local Profile Picture (Hidden by default) */
.profile-photo.photo {
    position: absolute;
    top: 25;
    left: 25;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

/* On hover, hide the GIF and show the photo */
.profile-photo-container:hover .gif {
    opacity: 0;
}

.profile-photo-container:hover .photo {
    opacity: 1;
}

/* Name in the Center */
.name-info {
    flex: 1;
    text-align: center;
}

/* Contact Container (wraps contact info and toggle button) */
.contact-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}

/* Contact Info on the Right (hidden initially) */
.contact-info {
    margin-right: 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* When visible, make the contact-info visible */
.contact-info.visible {
    visibility: visible;
    opacity: 1;
}

/* Styling for the toggle button */
.toggle-button {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 100px;
}

/* Styling for the image */
.toggle-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* Heading Style */
h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Header Text */
header p {
    margin: 5px 0;
}

a {
    color: #00aaff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Section Styling */
section {
    background: rgba(255, 255, 255, 0.6);
    padding: 40px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Collapsible Section Headers */
.section-header {
    cursor: pointer;
    font-size: 1.8rem;
    color: #333;
    border-bottom: 2px solid #a0d2eb;
    padding-bottom: 10px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.section-header:hover {
    background-color: rgba(0, 170, 255, 0.1);
}

/* Collapsible Section Content */
.section-content {
    display: none;
    padding-top: 10px;
}

.section-header.active + .section-content {
    display: block;
    animation: expand 0.3s ease-out;
}

/* Animation for expansion */
@keyframes expand {
    from { 
        opacity: 0; 
        transform: scaleY(0); 
    }
    to { 
        opacity: 1; 
        transform: scaleY(1); 
    }
}

/* Footer Styling */
footer {
    background: rgba(21, 183, 234, 0.6);
    text-align: center;
    padding: 10px 0;
    color: white;
    margin-top: 20px;
}

/* List Styling */
ul, ol {
    margin-left: 15px;
    padding-left: 5px;
}

/* Responsive Design - Mobile Layout */
@media (max-width: 768px) {
    .background-container {
        background-image: url('https://preview.redd.it/beautiful-nature-4k-mobile-wallpapers-pack-download-link-in-v0-9txew1f4a9hd1.jpeg?auto=webp&s=b7d20d29b9959040b2161f982fc4f265874eb1fa');
    }

    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* Centering profile image */
    .profile-photo-container {
        width: 100%;
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center;
        margin-bottom: 15px;
    }

    /* Adjusting image positioning */
    .profile-photo.gif{
        display: none; 
    }

    .profile-photo.photo {
        position: static; /* Remove absolute positioning */
        margin: 0 auto; /* Center the images */
        display: block;
    }

    .name-info {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Ensure contact info is always visible */
    .contact-info {
        visibility: visible !important;
        opacity: 1 !important;
        display: block; /* Ensure it displays */
    }

    .toggle-button {
        display: none; /* Hide toggle button on mobile */
    }
}

/* Even Smaller Mobile Devices */
@media (max-width: 480px) {
    .profile-photo {
        width: 80px;
        height: 80px;
    }

    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.8rem;
    }

    section {
        padding: 10px;
    }
}