:root {
    --color-white: #ffffff;
    --color-black: #1a1a1a;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-700: #333;
    --color-primary: #4361ee;
    --color-secondary: #7209b7;
    --color-accent: #f72585;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
}

.author-bg {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.author-header {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    color: var(--color-white);
    position: relative;
}

.author-image-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 1.5rem;
}

.author-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.verified-badge {
    position: absolute;
    bottom: 10px;
    right: 0px;
    background: var(--color-white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.author-name {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.75rem;
}

.display-name {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-white);
    margin: 0;
}

.title {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: .5rem;
    font-weight: 400;
}

.author-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-size: 1.25rem;
    transition: var(--transition);
    text-decoration: none;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

.author-card {
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    margin: 2rem 0;
    transition: var(--transition);
}

.author-details {
    display: grid;
    grid-template-columns: 1fr; /* mobile: single column */
    gap: 2rem;
}

/* Biography always full width */
.bio {
    grid-column: 1 / -1;
}

.section {
    margin-bottom: 0;
}

.section-title {
    display: flex;
    align-items: center;
    position: relative;
   
}

.section-title svg {
    margin-right: 0.5rem; /* spacing between icon and text */
    flex-shrink: 0;
    height: 32px;
    width: 32px;
    fill: var(--color-accent); /* if you want to use CSS color variable */
}

.section-title h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    position: relative;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}


/* Keep the underline effect under the whole container */
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

.bio,
.experience,
.credentials,
.publications,
.knows-about {
    background: var(--color-gray-100);
    padding: 20px 0px 0px 45px;
    border-radius: var(--border-radius);
}

.bio p,
.experience p,
.credentials p,
.publications p,
.knows-about p {
    line-height: 1.7;
    color: var(--color-black);
    padding-bottom: 1rem;
}

.bio ul,
.experience ul,
.credentials ul,
.publications ul,
.knows-about ul {
    list-style-type: none;
    margin-left: 20px;
    padding: 1rem 0 0 0;
    color: var(--color-gray-700);
}

.bio ul li,
.experience ul li,
.credentials ul li,
.publications ul li,
.knows-about ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

.bio ul li::before,
.experience ul li::before,
.credentials ul li::before,
.publications ul li::before,
.knows-about ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23f72585'><path d='M479-352.3q-52.39 0-89.54-37.04Q352.3-426.37 352.3-479q0-52.87 37.16-89.66 37.15-36.8 89.54-36.8 52.87 0 89.78 36.8Q605.7-531.87 605.7-479q0 52.63-36.92 89.66Q531.87-352.3 479-352.3Zm0 280.43L303.98-246.89l64.89-64.89L480-200.41l110.37-110.37 63.89 63.65L479-71.87ZM246.13-303.98 71.11-479l174.78-174.78 64.89 64.89-111.13 111.13 110.13 110.13-63.65 63.65Zm121.74-345.24-63.89-63.65 175.26-175.26 175.02 175.02-64.89 64.89L478-759.35 367.87-649.22Zm344.48 345.24-64.65-64.65 111.13-111.13-110.37-110.37 63.89-63.89L887.37-479 712.35-303.98Z'/></svg>");
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

/* Responsive Design */

/* Desktop and Tablet: two columns except bio spans full width */
@media (min-width: 768px) {
    .author-header {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }

    .author-image-container {
        margin-bottom: 0;
    }

    .author-info {
        flex: 1;
    }

    .author-details {
        grid-template-columns: 1fr 1fr; /* two equal columns */
    }

    .bio {
        grid-column: 1 / -1; /* bio full width */
    }
    .bio,
    .experience,
    .credentials,
    .publications,
    .knows-about {
        padding: 15px;
    }
}

/* Larger Desktop adjustments */
@media (min-width: 992px) {
    .author-details {
        grid-template-columns: 1fr 1fr; /* same as tablet/desktop */
    }
}

/* Small devices: stack sections vertically */
@media (max-width: 767.98px) {
    .display-name {
        font-size: 1.8rem;
    }
    .author-header {
        align-items: center; /* Centers child items */
        text-align: center; /* Centers text */
        padding: 1.5rem;
    }

    .author-image-container {
        margin: 0 auto 1.5rem auto; /* Centers image block */
    }

    .author-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .author-social {
        justify-content: center;
    }

    .author-details {
        gap: 0rem;
    }

    .bio {
        grid-column: 1 / -1; /* bio full width */
    }
    .bio,
    .experience,
    .credentials,
    .publications,
    .knows-about {
        padding: 15px;
    }
}

.contact-section {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    margin-top: 3rem;
}

.contact-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.contact-subtitle {
    font-size: 1rem;
    color: var(--color-gray-700);
    margin-bottom: 2rem;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* On tablets and up, show two columns */
@media (min-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* Full-width fields override */
.form-group-full {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--color-gray-100);
    transition: var(--transition);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

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

.submit-button {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 0.85rem 2rem;
    font-size: 1rem;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition);
}

.submit-button:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}