/* ======================================== */
/* =================================== BODY */
/* ======================================== */



.index-body {
    width: 100%;
    height: auto;
    position: relative;
}



/* ================================================== */
/* =================================== BODY - SECTION */
/* ================================================== */



.index-body section {
    width: 100%;
    min-height: 100vh;
    background-color: var(--primary-color);
}



/* ========================================================== */
/* =================================== BODY - SECTION - INTRO */
/* ========================================================== */



.index-body section .intro {
    width: 100%;
    min-height: 100vh;
    padding: 150px 15% 5% 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

@media (max-width:1443px) {
    .index-body section .intro {
        padding: 150px 10% 4% 10%;
    }
}

@media (max-width:1025px) {
    .index-body section .intro {
        padding: 150px 5% 5% 5%;
    }
}

.index-body section .intro.chat-started {
    justify-content: flex-start;
    padding-top: 200px;
    gap: 100px;
}

.index-body section .intro .wlcm {
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
    overflow: hidden;
}

.index-body section .intro.chat-started .wlcm {
    display: none;
}

.index-body section .intro .wlcm h1 {
    color: var(--trinary-color);
    font-size: var(--big-font-size);
}

.index-body section .intro .wlcm h2 {
    color: var(--trinary-color);
}



/* ======================================================================= */
/* =================================== BODY - SECTION - INTRO - CHAT TRACK */
/* ======================================================================= */



.index-body section .intro .chat-track {
    width: 100%;
    height: auto;
    display: none;
}

.index-body section .intro.chat-started .chat-track {
    min-height: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.index-body section .intro .chat-track .message {
    max-width: 75%;
    padding: 14px 18px;
    border-radius: 20px;
}

.index-body section .intro .chat-track .message p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.index-body section .intro .chat-track .user-message {
    align-self: flex-start;
    background-color: rgba(241, 245, 249, 0.08);
    color: var(--trinary-color);
    border-bottom-left-radius: 6px;
}

.index-body section .intro .chat-track .portfolio-message {
    align-self: flex-end;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-bottom-right-radius: 6px;
}

.index-body section .intro .chat-track .thinking-message {
    width: fit-content;
    min-width: 80px;
}

.index-body section .intro .chat-track .thinking-loader {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.index-body section .intro .chat-track .thinking-loader span {
    width: 7px;
    height: 7px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: block;
    animation: thinkingDot 1s infinite ease-in-out;
}

.index-body section .intro .chat-track .thinking-loader span:nth-child(2) {
    animation-delay: .15s;
}

.index-body section .intro .chat-track .thinking-loader span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes thinkingDot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .35;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}



/* =================================================================== */
/* =================================== BODY - SECTION - INTRO - PROMPT */
/* =================================================================== */



.index-body section .intro .prompt-wrapper {
    width: 100%;
    height: auto;
    padding: 2px;
    overflow: visible;
    position: relative;
    border-radius: 36px;
    background-color: rgba(248, 250, 252, 0.08);

    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.10),
        0 0 28px rgba(139, 92, 246, 0.18),
        0 0 80px rgba(139, 92, 246, 0.08),
        0 28px 90px rgba(0, 0, 0, 0.34);

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

.index-body section .intro .prompt-wrapper:hover {
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.16),
        0 0 38px rgba(139, 92, 246, 0.24),
        0 0 100px rgba(139, 92, 246, 0.11),
        0 32px 100px rgba(0, 0, 0, 0.38);
}

/* animated border layer */
.index-body section .intro .prompt-wrapper .prompt-border {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.index-body section .intro.chat-started .prompt-wrapper .prompt-border {
    display: none;
}

.index-body section .intro .prompt-wrapper .prompt-border::before {
    content: '';
    width: 160%;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 260deg,
        var(--secondary-color) 300deg,
        var(--secondary-color) 340deg,
        transparent 360deg
    );
    animation: promptBorderRotate 4s infinite linear;
    will-change: rotate;
}

@keyframes promptBorderRotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

/* prompt body */
.index-body section .intro .prompt-wrapper .prompt {
    width: 100%;
    height: auto;
    padding: 30px;
    background-color: var(--surface-color);
    border-radius: 34px;
    position: relative;
    z-index: 2;
}

@media (max-width:500px) {
    .index-body section .intro .prompt-wrapper .prompt {
        padding: 30px 20px;
    }
}

.index-body section .intro .prompt-wrapper .prompt textarea {
    width: 100%;
    min-height: 100px;
    max-height: 400px;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--trinary-color);
    resize: none;
    overflow-y: hidden;
    scrollbar-color: transparent transparent;
}

@media (max-width:1025px) {
    .index-body section .intro .prompt-wrapper .prompt textarea {
        min-height: 70px;
    }
}

@media (max-width:768px) {
    .index-body section .intro .prompt-wrapper .prompt textarea {
        min-height: 50px;
    }
}

.index-body section .intro.chat-started .prompt-wrapper .prompt textarea {
    min-height: 50px;
}

.index-body section .intro .prompt-wrapper .prompt textarea::placeholder {
    color: rgba(248, 250, 252, 0.65);
}

/* footer */
.index-body section .intro .prompt-wrapper .prompt .footer {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 30;
}

@media (max-width:500px) {
    .index-body section .intro .prompt-wrapper .prompt .footer {
        gap: 10px;
    }
}

/* CUSTOM SELECT */
.index-body section .intro .prompt-wrapper .prompt .footer .custom-select {
    width: auto;
    position: relative;
    z-index: 40;
}

@media (max-width:500px) {
    .index-body section .intro .prompt-wrapper .prompt .footer .custom-select {
        width: 80%;
    }
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-selected {
    width: 100%;
    min-height: 55px;
    padding: 0 18px 0 22px;
    background-color: rgba(248, 250, 252, 0.04);
    color: var(--trinary-color);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 50px;
    outline: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 30px rgba(0, 0, 0, 0.18);

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-selected span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--trinary-color);
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-selected svg {
    width: 18px;
    min-width: 18px;
    stroke: var(--trinary-color);
    opacity: 0.75;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        stroke 0.3s ease;
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select.active .select-selected svg {
    transform: rotate(180deg);
    opacity: 1;
    stroke: var(--secondary-color);
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-options {
    width: 100%;
    padding: 8px;
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    z-index: 50;

    background:
        linear-gradient(180deg, rgba(18, 26, 47, 0.98), rgba(11, 16, 32, 0.98));
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 24px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(139, 92, 246, 0.08),
        0 0 40px rgba(139, 92, 246, 0.12);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom center;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select.active .select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-option {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    background-color: transparent;
    color: rgba(248, 250, 252, 0.82);
    border: none;
    border-radius: 16px;
    outline: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    font-size: 14px;
    font-weight: 500;
    text-align: left;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-option:hover {
    background-color: rgba(139, 92, 246, 0.14);
    color: var(--trinary-color);
    transform: translateX(3px);
}

.index-body section .intro .prompt-wrapper .prompt .footer .custom-select .select-option.active {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--trinary-color);
}

/* send button */
.index-body section .intro .prompt-wrapper .prompt .footer > button {
    width: 50px;
    height: 50px;
    padding: 10px;
    background-color: var(--trinary-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex: 0 0 auto;

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

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.index-body section .intro .prompt-wrapper .prompt .footer > button svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-color);
}

.prompt .footer > button.disabled {
    opacity: 0.5;
    pointer-events: none;
}



/* =============================================================================== */
/* =================================== BODY - SECTION - INTRO - PROMPT SUGGESTIONS */
/* =============================================================================== */



.index-body section .intro .prompt-suggestions {
    width: 100%;
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 10px;
}

@media (max-width:768px) {
    .index-body section .intro .prompt-suggestions {
        grid-template-columns: repeat(2,1fr);
    }
}

.index-body section .intro.chat-started .prompt-suggestions {
    display: none;
}

.index-body section .intro .prompt-suggestions > div {
    height: auto;
    background-color: var(--surface-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
    border-radius: 16px;
    cursor: pointer;
    transition: all ease-in-out .3s;
    position: relative;
}

@media (max-width:768px) {
    .index-body section .intro .prompt-suggestions > div:first-child {
        display: none;
    }
}

.index-body section .intro .prompt-suggestions > div:hover {
    transform: translateY(-5px);
}

.index-body section .intro .prompt-suggestions > div h3 {
    color: var(--trinary-color);
    font-size: var(--intermediate-font-size);
}

.index-body section .intro .prompt-suggestions > div p {
    color: var(--trinary-color);
    font-size: var(--tiny-font-size);
}



/* =================================================================== */
/* =================================== BODY - SECTION - CONTENTS POPUP */
/* =================================================================== */



.index-body section .contents-popup-wrapper {
    width: 90%;
    height: 90%;
    padding: 3% 2%;
    background-color: var(--primary-color);
    position: fixed;
    top: 5%;
    left: 5%;
    border-radius: 36px;
    z-index: 101;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.178);
    transition: all ease-in-out .3s;
    display: none;
}

.index-body section .contents-popup-wrapper.pop {
    display: block;
}

.index-body section .contents-popup-wrapper.expand {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 0px;
}

.index-body section .contents-popup-wrapper .contents-popup {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--trinary-color) transparent;
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con {
    width: 100%;
    height: auto;
    padding: 0% 5% 5% 5%;
    position: relative;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body > [data-section] {
    display: none;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body > [data-section].active {
    display: flex;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header {
    width: fit-content;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 1%;
    z-index: 10;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header .ctas {
    width: auto;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header .ctas button {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.096);
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header .ctas button:hover {
    background-color: var(--trinary-color);
}

.index-body section .contents-popup-wrapper.expand .contents-popup .topic-con > .header .ctas button:first-child {
    background-color: var(--trinary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header .ctas button svg {
    width: 100%;
    height: 100%;
    stroke: var(--trinary-color);
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header .ctas button svg.shrink {
    display: none;
}

.index-body section .contents-popup-wrapper.expand .contents-popup .topic-con > .header .ctas button svg.shrink {
    display: block;
    stroke: var(--primary-color);
}

.index-body section .contents-popup-wrapper.expand .contents-popup .topic-con > .header .ctas button svg.expand {
    display: none;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .header .ctas button:hover svg {
    stroke: var(--primary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
    margin-top: 30px;
}


/* ================================================================================================ */
/* =================================== BODY - SECTION - CONTENTS POPUP - TOPIC BODY - ABOUT ME BODY */
/* ================================================================================================ */



.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body > .about-me-con.active {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > h2 {
    font-size: var(--medium-font-size);
    color: var(--trinary-color);
    position: relative;
    padding-bottom: 30px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > h2::after {
    content: '';
    width: 30%;
    height: 2px;
    background-color: var(--trinary-color);
    position: absolute;
    top: 100%;
    left: 0%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > h3 {
    font-size: var(--huge-font-size);
    color: var(--trinary-color);
    font-weight: normal;
    opacity: .8;
    margin-top: 30px;
}

@media (max-width:1025px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > h3 {
        margin-top: 20px;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > .grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 30px;
}

@media (max-width:1025px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:768px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > .grid > .item {
    height: auto;
    padding: 20px;
    background-color: var(--trinary-color);
    border: 1px solid rgba(255, 255, 255, 0.226);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > .grid > .item > h4 {
    font-size: var(--intermediate-font-size);
    color: var(--primary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .about-me-con > .grid > .item > p {
    color: var(--primary-color);
    opacity: .8;
}



/* ================================================================================================== */
/* =================================== BODY - SECTION - CONTENTS POPUP - TOPIC BODY - CONTACT ME BODY */
/* ================================================================================================== */



.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body > .contact-me-con.active {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body > .contact-me-con.active {
        flex-direction: column;
        gap: 40px;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets {
        width: 100%;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > span {
    opacity: .7;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets h2 {
    font-size: var(--big-font-size);
    font-weight: normal;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets p {
    margin-top: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    row-gap: 40px;
    margin-top: 50px;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid {
        margin-top: 0px;
    }
}

@media (max-width:500px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid {
        gap: 30px;
        row-gap: 20px;
    }
}

@media (max-width:420px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid {
        gap: 20px;
        row-gap: 20px;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div {
    width: 100%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div > span {
    opacity: .7;
    display: block;
    margin-bottom: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div > p {
    line-height: unset;
    margin-top: 10px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div .socials {
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}


.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div .socials a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transition: all ease-in-out .5s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div .socials a:hover {
    scale: 1.2;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div .socials a svg {
    width: 100%;
    height: 100%;
    fill: var(--trinary-color);
    opacity: .9;
    transition: all ease-in-out .5s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con .contact-us-form-dets > .grid > div .socials a:hover svg {
    opacity: 1;
}




.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form {
    width: 50%;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    gap: 20px;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form {
        width: 100%;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input {
    width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 50px;
    border: none;
    background-color: rgba(255, 255, 255, 0.041);
    border: 1px solid rgba(0, 0, 0, 0.103);
    outline: none;
    transition: all ease-in-out .3s;
    color: var(--trinary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input::placeholder {
    color: var(--trinary-color);
    opacity: .7;
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input:hover,
.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input:valid {
    background-color: var(--trinary-color);
    color: var(--primary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input:hover::placeholder {
    color: var(--primary-color);
    opacity: .7;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input[type=email] {
    width: 100%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form textarea {
    width: 100%;
    min-height: 200px;
    padding: 40px 20px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.103);
    outline: none;
    background-color: rgba(255, 255, 255, 0.041);
    border-radius: 36px;
    transition: all ease-in-out .3s;
    color: var(--trinary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form textarea::placeholder {
    color: var(--trinary-color);
    opacity: .7;
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form textarea:hover,
.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form textarea:valid {
    background-color: var(--trinary-color);
    color: var(--primary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form textarea:hover::placeholder {
    color: var(--primary-color);
    opacity: .7;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input[type=submit] {
    width: fit-content;
    height: auto;
    background-color: var(--trinary-color);
    color: var(--primary-color);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.205);
    cursor: pointer;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .contact-me-con form.contact-us-form input[type=submit]:hover {
    background-color: var(--primary-color);
    color: var(--trinary-color);
}



/* ================================================================================================ */
/* =================================== BODY - SECTION - CONTENTS POPUP - TOPIC BODY - PROJECTS BODY */
/* ================================================================================================ */



.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body > .projects-con.active {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
}

@media (max-width:768px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: start;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters > span {
    font-size: var(--intermediate-font-size);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters > div {
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters > div button {
    width: auto;
    height: auto;
    padding: 15px 20px;
    background-color: var(--primary-color);
    color: var(--trinary-color);
    border: 1px solid white;
    border-radius: 50px;
    transition: all ease-in-out .3s;
    cursor: pointer;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters > div button.active,
.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.filters > div button:hover {
    background-color: var(--trinary-color);
    color: var(--primary-color);
}



/* ================================================================================================================ */
/* =================================== BODY - SECTION - CONTENTS POPUP - TOPIC BODY - PROJECTS BODY - PROJECTS GRID */
/* ================================================================================================================ */



.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    row-gap: 40px;
    margin-top: 50px;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:768px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid {
        grid-template-columns: repeat(1,1fr);
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 20px;
    transition: all ease-in-out .3s;
    position: relative;
    padding: 20px;
    border-radius: 36px;
}

@media (max-width:400px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item {
        padding: 0px;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.expand {
    gap: 0px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.header {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.header > strong {
    color: var(--trinary-color);
    font-size: var(--intermediate-font-size);
    font-weight: bolder;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.header > button {
    width: 45px;
    height: 45px;
    padding: 8px;
    background-color: var(--trinary-color);
    border: 1px solid var(--trinary-color);
    border-radius: 12px;
    transition: all ease-in-out .3s;
    cursor: pointer;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.expand > div.initial > div.header > button,
.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.header > button:hover {
    background-color: var(--primary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.header > button svg {
    width: 100%;
    height: 100%;
    fill: var(--primary-color);
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.expand > div.initial > div.header > button svg {
    transform: rotateZ(180deg);
    fill: var(--trinary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.header > button:hover svg {
    fill: var(--trinary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > img {
    max-width: 300px;
    height: 400px;
    object-fit: cover;
    transition: all ease-in .3s;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > img {
        max-width: 250px;
        height: 350px;
    }
}

@media (max-width:1025px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > img {
        max-width: 200px;
        height: 300px;
    }
}

/* PROJECTS THUMBNAILS */

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.sapphire > div.initial > img {
    filter: drop-shadow(0px 0px 100px #5a72f5);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.najafi > div.initial > img {
    filter: drop-shadow(0px 0px 100px red);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.unique > div.initial > img {
    filter: drop-shadow(0px 0px 100px #c45b39);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.oserth > div.initial > img {
    filter: drop-shadow(0px 0px 100px #c1ddc7);
    /* scale: 1.2; */
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.sahelnom > div.initial > img {
    filter: drop-shadow(0px 0px 100px #00aec0);
    /* scale: 1.2; */
}

@media (max-width:768px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.sahelnom > div.initial > img {
        max-width: 300px;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.mozaik > div.initial > img {
    filter: drop-shadow(0px 0px 100px #f69b27);
    height: 260px;
}

@media (max-width:1443px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.mozaik > div.initial > img {
        object-fit: contain;
    }
}

@media (max-width:768px) {
    .index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.mozaik > div.initial > img {
        max-width: 300px;
    }
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.abualjoud > div.initial > img {
    filter: drop-shadow(0px 0px 100px red) invert(1);
}

/* END */

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.expand > div.initial > img {
    height: 0px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.project-tags {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 10px;
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.initial > div.project-tags span {
    width: auto;
    height: auto;
    padding: 15px 20px;
    background-color: var(--primary-color);
    backdrop-filter: blur(50px);
    border: 1px solid white;
    color: var(--trinary-color);
    border-radius: 50px;
    font-size: var(--tiny-font-size);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body {
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    gap: 20px;
    transition: all ease-in-out .3s;
    position: relative;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item.expand > div.body {
    height: 300px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body p {
    color: var(--trinary-color);
    opacity: .8;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body a {
    width: auto;
    height: auto;
    padding: 15px 20px;
    background-color: var(--primary-color);
    border: 1px solid var(--trinary-color);
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all ease-in-out .3s;
    border-radius: 50px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body a:hover {
    background-color: var(--trinary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body a span {
    color: var(--trinary-color);
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body a:hover span {
    color: var(--primary-color);
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .projects-con > div.grid > div.item > div.body a svg {
    width: 20px;
    height: 20px;
    stroke: var(--trinary-color);
    transition: all ease-in-out .3s;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body  .projects-con > div.grid > div.item > div.body a:hover svg {
    stroke: var(--primary-color);
}



/* =================================================================== */
/* =================================== BODY - SECTION - MESSAGES POPIP */
/* =================================================================== */



.index-body section .msgs-popup-wrapper {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.788);
    z-index: 101;
    position: fixed;
    top: 0%;
    left: 0%;
    display: none;
}

.index-body section .msgs-popup-wrapper.pop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.index-body section .msgs-popup-wrapper > div {
    width: auto;
    min-height: 100px;
    background-color: var(--primary-color);
    border: 1px solid rgba(255, 255, 255, 0.178);
    border-radius: 36px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media (max-width:768px) {
    .index-body section .msgs-popup-wrapper > div {
        min-height: auto;
        padding: 30px 20px;
    }
}

.index-body section .msgs-popup-wrapper > div p {
    width: 100%;
    text-align: center;
    color: var(--trinary-color);
    opacity: .8;
}

.index-body section .msgs-popup-wrapper > div .ctas {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.index-body section .msgs-popup-wrapper > div .ctas button {
    width: auto;
    height: auto;
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.178);
    background-color: var(--secondary-color);
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.index-body section .msgs-popup-wrapper > div .ctas button.agree {
    background-color: var(--secondary-color);
}

.index-body section .msgs-popup-wrapper > div .ctas button.agree:hover {
    background-color: var(--primary-color);
}

.index-body section .msgs-popup-wrapper > div .ctas button.back {
    background-color: var(--primary-color);
}

.index-body section .msgs-popup-wrapper > div .ctas button.back:hover {
    background-color: var(--trinary-color);
    color: var(--primary-color);
}



/* =============================================================================== */
/* =================================== CONTENT POPUP SKELETON LOADING - LINE STYLE */
/* =============================================================================== */



.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body.loading > [data-section] {
    display: none !important;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 26px;
    padding-top: 60px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body.loading .section-skeleton {
    display: flex !important;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-line {
    height: 24px;
    border-radius: 50px;
    background: linear-gradient(
        90deg,
        var(--surface-color) 0%,
        rgba(139, 92, 246, 0.24) 35%,
        rgba(248, 250, 252, 0.22) 50%,
        rgba(139, 92, 246, 0.24) 65%,
        var(--surface-color) 100%
    );
    background-size: 280% 100%;
    animation: skeletonLineLoading 6.8s infinite linear;
    opacity: 0.95;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-line.short {
    width: 34%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-line.medium {
    width: 58%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-line.long {
    width: 86%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-line.full {
    width: 100%;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 25px;
}

.index-body section .contents-popup-wrapper .contents-popup .topic-con > .body .section-skeleton .skeleton-group.soft {
    border-radius: 28px;
}

@keyframes skeletonLineLoading {
    0% {
        background-position: 130% 0;
    }

    100% {
        background-position: -130% 0;
    }
}