:root {
    --brick: #EB6440;
    --navy-blue1: #0A2647;
    --navy-blue2: #27374D;
    --blue: #144272;
    --medium-blue: #497174;
    --light-blue: #DDE6ED;
}

.section-title {
    color: white;
}

/* HEADER STYLES */
.header-section, .time-container {
    display: flex;
    flex-flow: row wrap;
}

.grid-item {
    flex: 0 0 50%;
}

.intro-container {
    display: flex;
    float: left;
}

.intro-inner {
    width: 90%;
    display: flex;
    align-items: center;
}

.intro-content>* {
    color: var(--light-blue);
    width: fit-content;
}

.intro-content h1 {
    font-size: 4rem;
}

.intro-content h3 {
    font-size: 2rem;
}

.avatar-container {
    display: flex;
    float: right;
    justify-content: end;
}

.avatar-inner {
    text-align: center;
    width: 60%;
    background: var(--light-blue);
    padding: 25px;
    padding-bottom: 0;
    border-radius: 32px;
}

.avatar {
    width: 100%;
    filter: drop-shadow(0px -5px 20px #22222285);
}

.typewriter-animation {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid var(--brick);
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation:
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

/* END HEADER STYLES */


/* PROJECTS STYLES */
.project-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 75px auto;
    color: var(--light-blue);
}

.projects-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.project-item {
    background-color: white;
    border-radius: 16px;
    overflow: hidden;
}

.proj-title {
    transition: all .3s ease-in-out;
}

.project-item:hover .proj-title {
    color: var(--blue);
}

.project-item .project-photo {
    height: 300px;
    object-fit: cover;
    object-position: top center;
    transition: all 3s ease-in-out;

}

.project-item:hover .project-photo {
    object-position: bottom center;
}

/* END PROJECTS STYLES */


/* RESUME STYLES */
.resume-section {
    height: 75vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    pointer-events: none;
    transition: all .3s ease-in-out;
    position: relative;
    border-radius: 16px;
}

.blur-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    border-radius: 16px;
}

.resume-title-container-en, .resume-description-en, .resume-title-container-fa, .resume-description-fa {
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out;

}

/* .resume-title-container-en, .resume-description-en, .resume-title-container-fa, .resume-description-fa {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out;
    transform: translate(0, -50%);

}



.resume-title-container-en {
    left: 5%;
    top: 50%;
}

.resume-description-en {
    right: 5%;
    top: 50%;
    max-width: 300px;
}

.resume-title-container-fa {
    right: 5%;
    top: 50%;
}

.resume-description-fa {
    left: 5%;
    top: 50%;
    max-width: 300px;
} */
.event {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.time-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 75px auto;
    color: var(--light-blue);
    position: relative;
    padding: 50px 0;
}

.resume-section::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
    height: 100%;
    width: 2px;
    background-color: var(--light-blue);
}

.resume-item {
    /* position: relative; */
    margin: 50px 0;
}

.resume-item:nth-child(2) {
    margin-top: 0;
}

.time-title, .time-option {
    font-weight: bold;
    cursor: pointer;
    z-index: 3;
}

.resume-section .time-title {
    transition: all .2s ease;
    pointer-events: auto;
}

.resume-section .time-title:hover {
    color: var(--navy-blue1);
}

.time-option {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .2s ease;
}

.time-option:hover+.time-title, .time-title:hover, .time-option:checked+.time-title {
    color: var(--pmz-black);
}

.time-option:not(:checked) {
    visibility: hidden;
    opacity: 0;
}

.time-option:checked+.resume-title-container {
    visibility: visible;
    opacity: 1;
}

/* .resume-item:nth-child(2n+1) .time-option {
    left: 148px;
}

.resume-item:nth-child(2n) .time-option {
    right: 148px;
} */

.resume-item:nth-child(2n+1) {
    margin-right: 225px;
}

.resume-item:nth-child(2n) {
    margin-left: 225px;
}

.speech-bubble {
    position: relative;
    background: transparent;
    color: white;
    padding: 10px 20px;
    border: 2px solid white;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
}

.speech-bubble:hover {
    background-color: white;
}

.speech-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
}

.resume-item:nth-child(2n+1) .speech-bubble::before {
    right: -20px;
    border-color: transparent transparent transparent white;
}

.resume-item:nth-child(2n) .speech-bubble::before {
    left: -20px;
    border-color: transparent white transparent transparent;
}

.time-option:checked+.speech-bubble {
    background: white;
    color: var(--pmz-black);
}

.time-container:checked+.speech-bubble::before {
    border-color: transparent white transparent transparent;
}

/* END RESUME STYLES */

/* PERSONALITY STYLES */
.about-section {
    margin: 5em auto;
    color: var(--light-blue);
}

.personalities-inner {
    display: grid;
    justify-items: center;
}

.personality-cards-container {
    display: flex;
    width: 100%;
    column-gap: 50px !important;
    justify-content: center;
}

.personality-card {
    width: 100%;
    color: white;
    padding: 20px;
    display: grid;
    row-gap: 20px;
    align-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all .3s ease-in-out;
    margin: 0 auto;
}

.personality-card:hover {
    background-color: var(--brick);
    box-shadow: 0px 0px 10px 1px var(--brick);
    transform: translateY(-5px);
}

.card-icon img {
    width: 50px;
}

/* END PERSONALITY STYLES */


/* SKILL STYLES */
@import "normalize.css";


:root {
    --border: hsl(280 10% 50% / 1);
    --card: hsl(237 36% 10%);
    --color: hsl(240 18% 80%);
    --border-width: 2px;
    --border-radius: 12px;
}

@property --start {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.skills-container {
    margin: 100px auto;
}

.grid-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--gap) * 1px);

}

.skills-inner {
    --spread: 60;
    flex-wrap: wrap;
    flex-direction: var(--direction);
    margin: 0 auto;
    justify-content: space-between;
    place-items: center;
    position: relative;
    touch-action: none;
}

.skills-title-box {
    width: 100%;

}

.skills-title-box h1 {
    font-size: 3em;
}

.skill-card-item {
    --active: 0.15;
    --start: 0;
    height: 100%;
    background: var(--card);
    padding: 2rem;
    border-radius: var(--border-radius);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    direction: ltr;
}

.skill-card-item:is(:hover, :focus-visible) {
    z-index: 2;
}

.glows {
    pointer-events: none;
    position: absolute;
    inset: 0;
    filter: blur(calc(var(--blur) * 1px));
}

.glows::after,
.glows::before {
    --alpha: 0;
    content: "";
    background-attachment: fixed;
    position: absolute;
    inset: -5px;
    border: 10px solid transparent;
    border-radius: var(--border-radius);
    mask:
        linear-gradient(#0000, #0000),
        conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
    mask-composite: intersect;
    mask-clip: padding-box, border-box;
    opacity: var(--active);
    transition: opacity 1s;
}

.skill-card-item::before {
    position: absolute;
    inset: 0;
    border: var(--border-width) solid transparent;
    content: "";
    border-radius: var(--border-radius);
    pointer-events: none;
    background: var(--border);
    background-attachment: fixed;
    border-radius: var(--border-radius);
    mask:
        linear-gradient(#0000, #0000),
        conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
            hsl(0 0% 100% / 0.15) 0deg,
            white,
            hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    opacity: var(--active);
    transition: opacity 1s;
}

.skill-card-item::after {
    --bg-size: 100%;
    content: "";
    pointer-events: none;
    position: absolute;
    background-attachment: fixed;
    border-radius: var(--border-radius);
    opacity: var(--active, 0);
    transition: opacity 1s;
    --alpha: 0;
    inset: 0;
    border: var(--border-width) solid transparent;
    mask:
        linear-gradient(#0000, #0000),
        conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
    filter: brightness(1.5);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
}


.skill-card-item h2 {
    margin: 0;
    padding: 1rem 0;
    font-weight: bold;
    font-size: 1.5rem;
}

.card-image {
    width: 40%;
    aspect-ratio: 3/2;
    object-fit: contain;
    object-position: center left;
}


.card-progress {
    background: rgba(255, 255, 255, 0.1);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 15px;
    width: 100%;
    overflow: visible;
}

.progress-value {
    box-shadow: 0 10px 40px -10px #fff;
    border-radius: 100px;
    background: #fff;
    height: 5px;
    width: 0;
}

.card-progress[data-title]::after {
    bottom: -2em;
    right: 45%;
}


/* END SKILL STYLES */

/* CONTACT STYLES */
.contact-section {
    display: flex;
}

.contact-info-container {
    display: grid;
    align-items: center;
    text-align: center;
}

.contact-info-container .section-title {
    line-height: 1.7em;
}

.social-container .social-item {
    vertical-align: middle;
    padding: 5px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    color: white;
    opacity: 0.75;
    transition: all 0.2s ease;
}

.social-item:hover {
    opacity: 1;
}

.form-container {
    color: var(--light-blue);
}

.form-control {
    background-color: var(--navy-blue2);
    border-color: var(--light-blue);
    color: var(--light-blue);
}

.form-control::placeholder {
    color: var(--light-blue);
    opacity: 0.5;
}

.form-control:focus {
    background-color: var(--navy-blue2);
    color: white;
    box-shadow: unset;
}


.contact-btn {
    width: 100%;
    color: white;
    border: 1px solid white;
    transition: all .3s ease-in-out;
    font-weight: bold;
}

.contact-btn:hover {
    background-color: var(--light-blue);
    color: var(--navy-blue1);
}

/* END CONTACT STYLES */





.timeline-container {
    direction: ltr;
    position: relative;
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    display: grid;
}

/* Timeline vertical line */
.timeline-container::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 4px;
    height: 100%;
    background: white;
    transform: translateX(-50%);
    border-radius: 8px;
}

.timeline-item:nth-child(2n) {
    justify-self: end;
}

/* Timeline items */
.timeline-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* Content box */
.timeline-item {
    background: white;
    color: black;
    padding: 15px 20px;
    border-radius: 16px;
    width: 40%;
    transition: all .3s ease-in-out;
    flex-direction: column;
    position: relative;
    display: flex;
    margin: 30px 0;
    cursor: pointer;

}

.timeline-item:hover {
    background-color: var(--brick);
    box-shadow: 0px 0px 10px 1px var(--brick);
    color: white;

}

/* Left/right positioning */
.left {
    justify-content: flex-start;
}

.right {
    justify-content: flex-end;
}


.left.timeline-item:hover::before {
    border-left-color: var(--brick);
}

.right.timeline-item:hover::before {
    border-right-color: var(--brick);
}

.timeline-content {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.4s ease-in-out;
}

.timeline-content.show {
    opacity: 1;
    transform: scaleY(1);
    max-height: 200px;
}

/* Speech bubble effect */
.timeline-item::before {
    content: "";
    position: absolute;
    top: 50%;
    border: 10px solid transparent;
    transform: translateY(-50%);
    transition: all .3s ease-in-out;

}

.left.timeline-item::before {
    right: -20px;
    border-left-color: white;
}

.right.timeline-item::before {
    left: -20px;
    border-right-color: white;
}

.btn-light-color{
    color: white;
}

/* Circle indicators */
.circle {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    left: 125%;
    transform: translateX(-50%);
}

.right .circle {
    right: 125%;
    transform: translateX(50%);
    left: unset;
}

#order-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal-width columns */
  gap: 1rem; /* spacing between columns */
}

#order-form p:nth-of-type(1),
#order-form p:nth-of-type(2) {
  grid-column: span 1; /* each takes one column */
}

#order-form p:nth-of-type(n+3), #order-form .btn-container {
  grid-column: 1 / -1; /* everything after spans full width */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .container-fluid{
        gap: 25px;
    }
    .navbar-toggler{
        display: none;
    }

    .grid-item {
        flex: 0 0 100%;
    }

    .header-section {
        gap: 25px;
    }

    .avatar-inner {
        text-align: center;
        width: 100%;
    }

    .card-image {
        width: 50%;
    }

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

    .skill-card-item, .skills-title-box {
        width: 100%;
        padding: 1rem;
    }

    .projects-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-section {
        flex-direction: column;
        gap: 25px;
    }

    .top-btn {
        right: 5px;
    }

    .personality-cards-container {
        gap: 25px !important;
        flex-wrap: wrap;
    }

    .col-2 {
        width: 100%;
        flex: 0 0 45%;
    }

    .speech-bubble {
        font-size: 14px;
        padding: 5px 15px;
    }

    .resume-item:nth-child(2n+1) {
        margin-right: 175px;
    }

    .resume-item:nth-child(2n) {
        margin-left: 175px;
    }

    .timeline-item::before, .left.timeline-item::before, .right.timeline-item::before {
        left: -10px;
        border-right-color: white;
        right: unset;
        border-left: none;
    }

    .timeline-container::before {
        left: 20px;
    }

    .timeline-item {
        flex-direction: column;
        align-items: flex-start !important;
        justify-self: flex-start !important;
        width: calc(100% - 25px);
        margin-left: 25px;
    }

    .timeline-content {
        width: 80%;
        text-align: left;
    }

    .circle, .right .circle {
        left: -25px !important;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .left .timeline-content::before {
        right: unset;
        left: -10px;
        border-left: none;
    }

    .skills-inner {
        touch-action:auto;
    }

}

@media only screen and (min-width: 768px) and (max-width:992px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .personality-cards-container.grid-4{
        grid-template-columns: repeat(4, 1fr);
    }
} 


/* The typing effect */
@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 70%;
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }

    50% {
        border-color: var(--brick);
    }
}