.single-about-img {
    position: relative;
    box-shadow: 0 5px 20px rgba(14, 25, 80, .30);
}

.single-about-img img {
    max-width: 500px;
    height: 468px;
}

.about {
    padding: 50px 0 10px 0;
}

.about-content {
    padding-top: 120px;
}
.about ul li {
    list-style: none;
}

/*.single-about-txt*/
.single-about-txt h3 {
    font-size: 18px;
    color: #3c4258;
    text-transform: initial;
    line-height: 1.8;
}

.single-about-txt p {
    font-size: 16px;
    color: #999fb3;
    padding: 35px 0 43px;
    border-bottom: 1px solid #999fb3;
}

.single-about-txt p:last-of-type {
    /*background: red !important;*/
    /*padding: 1px 0;*/
    line-height: 2;
    padding-bottom: 17px;
}

.single-about-add-info {
    margin: 35px 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
    font-size: .9rem;
    color: #fff; /* Default color for text */
    display: inline-block; /* Ensures animations like scale work properly */

}

.single-about-add-info:hover {
    color: #a4a6ae;
    font-size: 1.1rem;
    transform: scale(1.01); /* Slightly increase the size */
    text-shadow: 0 4px 8px rgba(87, 104, 159, 0.5); /* Add a soft glow shadow */

}

.single-about-add-info h3 {
    color: #636a82;
    font-size: 16px;
    text-transform: capitalize;
}

.single-about-add-info p {
    font-weight: 300;
    border: 0;
    padding: 0;
    margin-top: 3px;
}
.single-about-add-info a i {
    padding-right: 10px;
}

/*.single-about-txt*/

/*.single-about-img */
.single-about-img {
    position: relative;
    box-shadow: 0 5px 20px rgba(14, 25, 80, .30);
    margin-top: 3.5rem;
}

.single-about-img:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(85, 89, 110, 0.3);
}

.single-about-img img {
    max-width: 500px;
    height: 468px;
}

.about-list-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: #1f2c6c;
}

/*.ab-list-icon */
.about-list-icon ul {
    display: flex;
}

.about-list-icon ul li a {
    padding-right: 22px;
    cursor: pointer;
    color: #fff;
}

.about-list-icon ul li a {
    cursor: pointer;
    color: #fff;
    display: inline-block;
    border: 2px solid;
    margin-left: 20px;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
}

.about-list-icon ul li a i {
    margin-left: 6px;
}

.about-content .info {
    /*padding-left:1rem;*/
}




.skills {
    margin-top: 1rem;
}

#skills p {
    font-size: 16px;
    color: #999fb3;
    padding: 5px 0;
    /*border-bottom: 1px solid #999fb3;*/
    margin: 1px 0;
}

#about-prof h1 {
    padding-bottom: .3rem;
}

#about-prof h5 {
    padding-bottom: .3rem;
}

#about-prof .single-about-txt{
    padding-top: 3rem;
}
#about-prof .single-about-txt p:last-of-type {
    padding: .3rem 0;
}


@media (max-width: 480px) {
    .about-content .info {
        /*padding-left: 2rem;*/
    }
    .single-about-add-info {
        margin: 10px 0;
        font-size: 1.2rem;
        width: 100% !important;
    }

    .single-about-add-info a i {
        padding-right: 10px;
    }

    .single-about-img{
        margin-top: 1rem;
    }

    .about {
        padding: 50px 3px 10px 3px;
    }
    #about-prof .single-about-txt{
        padding-top: 1rem;
    }

    .skills {
        margin-top: 0;
    }
}


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap");

/**,*/
/**::before,*/
/**::after {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    box-sizing: border-box;*/
/*}*/

body {
    --color: rgba(30, 30, 30);
    --bgColor: rgba(245, 245, 245);
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 2rem;
    font-family: "Poppins", sans-serif;
    color: var(--color);
    background: var(--bgColor);
}

h1 {
    text-align: center;
}

/* Target the specific ul */
/*.experience .timeline-list {*/
/*    --col-gap: 2rem;*/
/*    --row-gap: 2rem;*/
/*    --line-w: 0.25rem;*/

/*    display: grid;*/
/*    grid-template-columns: var(--line-w) 1fr;*/
/*    !*grid-auto-rows: auto;*!*/

/*    grid-auto-columns: max-content;*/
/*    column-gap: var(--col-gap);*/
/*    list-style: none;*/
/*    width: min(60rem, 90%);*/
/*    margin-inline: auto;*/
/*    padding: 0;*/
/*}*/

/*!* Make sure the second item starts at the right position *!*/
/*.experience .timeline-list li:nth-child(2) {*/
/*    grid-row: 2/4; !* This positions the second item properly *!*/
/*}*/

/*!* Vertical timeline line *!*/
/*.experience .timeline-list::before {*/
/*    content: "";*/
/*    grid-column: 1;*/
/*    grid-row: 1 / span 20;*/
/*    background: rgb(225, 225, 225);*/
/*    border-radius: calc(var(--line-w) / 2);*/
/*}*/

/*!* Row gaps between list items *!*/
/*.experience .timeline-list li:not(:last-child) {*/
/*    margin-bottom: var(--row-gap);*/
/*}*/

/*!* Cards (list items) *!*/
/*.experience .timeline-list li {*/
/*    grid-column: 2;*/
/*    --inlineP: 1.5rem;*/
/*    margin-inline: var(--inlineP);*/
/*    grid-row: span 2;*/
/*    display: grid;*/
/*    grid-template-rows: min-content min-content min-content;*/
/*}*/

/*!* The date block *!*/
/*.experience .timeline-list li .date {*/
/*    --dateH: 3rem;*/
/*    height: var(--dateH);*/
/*    margin-inline: calc(var(--inlineP) * -1);*/

/*    text-align: center;*/
/*    background-color: var(--accent-color);*/

/*    color: white;*/
/*    font-size: 1.25rem;*/
/*    font-weight: 700;*/

/*    display: grid;*/
/*    place-content: center;*/
/*    position: relative;*/

/*    border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);*/
/*}*/

/*!* Date flap *!*/
/*.experience .timeline-list li .date::before {*/
/*    content: "";*/
/*    width: var(--inlineP);*/
/*    aspect-ratio: 1;*/
/*    background: var(--accent-color);*/
/*    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    clip-path: polygon(0 0, 100% 0, 0 100%);*/
/*    right: 0;*/
/*}*/

/*!* Circle Indicator *!*/
/*.experience .timeline-list li .date::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 2rem;*/
/*    aspect-ratio: 1;*/
/*    background: var(--bgColor, white);*/
/*    border: 0.3rem solid var(--accent-color);*/
/*    border-radius: 50%;*/
/*    top: 50%;*/
/*    transform: translate(50%, -50%);*/
/*    right: calc(100% + var(--col-gap) + var(--line-w) / 2);*/
/*}*/



/*!* Title and Description Styling *!*/
/*.experience .timeline-list li .title,*/
/*.experience .timeline-list li .descr {*/
/*    background: var(--bgColor, white);*/
/*    position: relative;*/
/*    padding-inline: 1.5rem;*/
/*}*/

/*.experience .timeline-list li .title {*/
/*    overflow: hidden;*/
/*    padding-block-start: 1.5rem;*/
/*    padding-block-end: 1rem;*/
/*    font-weight: 500;*/
/*}*/

/*.experience .timeline-list li .descr {*/
/*    padding-block-end: 1.5rem;*/
/*    font-weight: 300;*/
/*}*/

/*!* Shadows for Text Blocks *!*/
/*.experience .timeline-list li .title::before,*/
/*.experience .timeline-list li .descr::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 90%;*/
/*    height: 0.5rem;*/
/*    background: rgba(0, 0, 0, 0.5);*/
/*    left: 50%;*/
/*    border-radius: 50%;*/
/*    filter: blur(4px);*/
/*    transform: translate(-50%, 50%);*/
/*}*/

/*.experience .timeline-list li .title::before {*/
/*    bottom: calc(100% + 0.125rem);*/
/*}*/

/*.experience .timeline-list li .descr::before {*/
/*    z-index: -1;*/
/*    bottom: 0.25rem;*/
/*}*/

/*!* Responsive Layout for Wider Screens *!*/
/*@media (min-width: 40rem) {*/
/*    .experience .timeline-list {*/
/*        grid-template-columns: 1fr var(--line-w) 1fr;*/
/*    }*/
/*    .experience .timeline-list::before {*/
/*        grid-column: 2;*/
/*    }*/
/*    .experience .timeline-list li:nth-child(odd) {*/
/*        grid-column: 1;*/
/*    }*/
/*    .experience .timeline-list li:nth-child(even) {*/
/*        grid-column: 3;*/
/*    }*/

/*    .experience .timeline-list li:nth-child(odd) .date::before {*/
/*        clip-path: polygon(0 0, 100% 0, 100% 100%);*/
/*        left: 0;*/
/*    }*/

/*    .experience .timeline-list li:nth-child(odd) .date::after {*/
/*        transform: translate(-50%, -50%);*/
/*        left: calc(100% + var(--col-gap) + var(--line-w) / 2);*/
/*    }*/
/*    .experience .timeline-list li:nth-child(odd) .date {*/
/*        border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;*/
/*    }*/
/*}*/
/*!* Responsive Layout for Mobile Screens *!*/
/*@media (max-width: 768px) {*/
/*    .experience .timeline-list {*/
/*        position: relative;*/

/*        display: grid; !* Continue using grid for timeline *!*/
/*        grid-template-columns: 1fr; !* Single-column layout *!*/
/*        grid-auto-flow: row; !* Stack items vertically *!*/
/*        row-gap: var(--row-gap); !* Maintain consistent spacing *!*/
/*    }*/

/*    !* Adjust or hide the vertical timeline line on mobile *!*/
/*    .experience .timeline-list::before {*/
/*        grid-column: 1; !* Adjust to align correctly *!*/
/*        grid-row: 1 / -1; !* Spans all rows *!*/
/*        background: rgb(225, 225, 225); !* Background color for the line *!*/
/*        width: var(--line-w); !* Maintain consistent width *!*/
/*        height: 90%; !* Full timeline height *!*/
/*        position: absolute; !* Explicit positioning *!*/
/*        left: 0; !* Ensure it sticks to the left *!*/
/*        margin-left: calc(var(--inlineP) / 2); !* Adjust spacing *!*/
/*    }*/

/*    !* Fix list items to work inside the single-column setup *!*/
/*    .experience .timeline-list li {*/
/*        grid-row: auto; !* Reset custom row positions *!*/
/*        grid-column: auto; !* Reset column positions for single column *!*/
/*        margin-inline: 0; !* Remove left/right margins *!*/
/*        position: relative; !* Needed for correctly positioned pseudo-elements *!*/
/*    }*/
/*}*/


/* Target the specific ul */
.experience .timeline-list {
    --col-gap: 2rem;
    --row-gap: 2rem;
    --line-w: 0.25rem;

    display: flex;
    flex-direction: column;
    position: relative;
    list-style: none;
    width: min(60rem, 90%);
    margin-inline: auto;
    padding: 0;
}

/* Vertical timeline line */
.experience .timeline-list::before {
    content: "";
    position: absolute;
    left: calc(var(--line-w) / 2);
    top: 0;
    height: 100%;
    width: var(--line-w);
    background: rgb(225, 225, 225);
    border-radius: calc(var(--line-w) / 2);
    transform: translateX(-50%);
}

/* Row gaps between list items */
.experience .timeline-list li:not(:last-child) {
    margin-bottom: var(--row-gap);
}

/* Cards (list items) */
.experience .timeline-list li {
    --inlineP: 1.5rem;
    /*--inlineP: -1.5rem;*/
    position: relative;
    margin-left: calc(var(--line-w) + var(--col-gap));
    margin-right: var(--inlineP);
    display: flex;
    flex-direction: column;
}

/* The date block */
.experience .timeline-list li .date {
    --dateH: 3rem;
    height: var(--dateH);
    margin-inline: calc(var(--inlineP) * -1) 0;

    text-align: center;
    background-color: var(--accent-color);

    color: white;
    font-size: 1.25rem;
    font-weight: 700;

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

    border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* Date flap */
.experience .timeline-list li .date::before {
    content: "";
    width: var(--inlineP);
    aspect-ratio: 1;
    background: var(--accent-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
    position: absolute;
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    right: 0;
}

/* Circle Indicator */
.experience .timeline-list li .date::after {
    content: "";
    position: absolute;
    width: 2rem;
    aspect-ratio: 1;
    background: var(--bgColor, white);
    border: 0.3rem solid var(--accent-color);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: calc(-1 * (var(--col-gap) + var(--line-w) / 2));
}

/* Title and Description Styling */
.experience .timeline-list li .title,
.experience .timeline-list li .descr {
    background: var(--bgColor, white);
    position: relative;
    padding-inline: 1.5rem;
}

.experience .timeline-list li .title {
    overflow: hidden;
    padding-block-start: 1.5rem;
    padding-block-end: 1rem;
    font-weight: 500;
}

.experience .timeline-list li .descr {
    padding-block-end: 1.5rem;
    font-weight: 300;
}

/* Shadows for Text Blocks */
.experience .timeline-list li .title::before,
.experience .timeline-list li .descr::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    left: 50%;
    border-radius: 50%;
    filter: blur(4px);
    transform: translate(-50%, 50%);
}

.experience .timeline-list li .title::before {
    bottom: calc(100% + 0.125rem);
}

.experience .timeline-list li .descr::before {
    z-index: -1;
    bottom: 0.25rem;
}

/* Responsive Layout for Wider Screens */
@media (min-width: 40rem) {
    .experience .timeline-list::before {
        left: 50%;
        /*--inlineP: -1.5rem;*/
    }

    .experience .timeline-list li {
        width: calc(50% - var(--col-gap) / 2);
        align-self: flex-start;
        margin-left: 0;
        margin-right: 0;
    }

    .experience .timeline-list li:nth-child(odd) {
        align-self: flex-start;
        margin-right: calc(50% + var(--col-gap) / 2);
    }

    .experience .timeline-list li:nth-child(even) {
        align-self: flex-end;
        margin-left: calc(50% + var(--col-gap) / 2);
    }

    .experience .timeline-list li:nth-child(even) .date::after {
        left: auto;
        right: calc(100% + var(--col-gap));
        transform: translate(50%, -50%);
    }

    .experience .timeline-list li:nth-child(odd) .date::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        left: 0;
        right: auto;
    }

    .experience .timeline-list li:nth-child(odd) .date {
        border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
    }

    .experience .timeline-list li:nth-child(even) .date::after {
        transform: translate(50%, -50%);
    }
}

/* Responsive Layout for Mobile Screens */
@media (max-width: 768px) {
    .experience .timeline-list {
        position: relative;
        display: flex;
        flex-direction: column;
        /*width: min(60rem, 75%);*/
    }

    /* Adjust the vertical timeline line on mobile */
    .experience .timeline-list::before {
        left: calc(var(--inlineP) / 2);
        height: 90%;
    }

    /* Fix list items to work inside the single-column setup */
    .experience .timeline-list li {
        margin-left: var(--inlineP);
        position: relative;
    }

    .experience .timeline-list li .date::after {
        left: calc(-1 * var(--inlineP));
    }
}

@media (max-width: 480px) {
    .experience .timeline-list {
        margin: 0 0 0 3rem;
    }

    /* Adjust the vertical timeline line on mobile */
    .experience .timeline-list::before {
        --inlineP: -.5rem;
        left: calc(var(--inlineP) / 2);
        height: 90%;
    }

    /* Fix list items to work inside the single-column setup */
    /*.experience .timeline-list li {*/
    /*    margin-left: var(--inlineP);*/
    /*    position: relative;*/
    /*}*/

    /*.experience .timeline-list li .date::after {*/
    /*    left: calc(-1 * var(--inlineP));*/
    /*}*/
}


#articles {
    padding: 1rem;
}
#articles h5 {
    padding-bottom: .3rem;
}

#articles ul li {
    list-style: none;
    padding: .2rem;
    margin: .2rem 0 1rem 0;
}

#extra p{
    font-size: 16px;
    color: #999fb3;
    padding: 5px 0;
    /* border-bottom: 1px solid #999fb3; */
    margin: 1px 0;
}


#prof-1 #description {
    padding: 2rem 0 1rem 0;
}

#prof-1 h1 {
    padding: 2rem 0 1rem 0;
}