@media (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}

:root {
    --font-primary: morabba;
    --font-secondary: morabba;
    --color-primary: rgb(19, 155, 253);
    --color-primary-alt: rgb(19, 253, 253);
    --color-primary-: 19, 155, 253;
    --color-primary-alt-: 19, 253, 253;
    --shadow-1: 0 2px 22px #13fdfd7d;
}

.site-logo {
    width: 110px;
}

.fn__single_media img {
    aspect-ratio: 4 / 3;
}

 .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
 .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
     background-image: none !important;
 }

@media screen and (max-height: 1024px) {
    .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
    .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
        background-image: none !important;
    }
}

@media screen and (max-height: 640px) {
    .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
    .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
        background-image: none !important;
    }
}

.for-animation-inner {
    padding: 50px;
    background: var(--color-card);
    grid-row-gap: 2.78rem;
    border: 1px solid var(--stroke-dark-100);
    background-image: var(--footer-bg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5.28rem 12.22rem;
    display: flex;
    position: relative;
    overflow: hidden
}


.navbar-info .nav-icon {
    margin-left: 8px !important;
}


.expertise-main {
    height: 380px;
    overflow: hidden;
    position: relative;
}

.expertise-marquee-track {
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: scrollUpExpertise 20s linear infinite;
}

.expertise-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes scrollUpExpertise {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.expertise-item .text h4 {
    font-size: 13px !important;
    margin-top: 8px;
    line-height: 1.5;
}


#resume .h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
}

#resume .h4.timeline-item-title {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #e0e0e0 !important;
}

#resume .timeline-text {
    font-size: 13.5px !important;
    line-height: 1.8;
}


#resume .tmp-profile-card,
#resume .skills-list {
    height: auto !important;
    min-height: min-content;
    overflow: visible !important;
}


.portfolio-scroll-container {
    max-height: none !important;
    overflow-y: visible !important;
}


.filter-list .filter-item button.active {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-1);
}


.filter-list .filter-item button {
    padding: 0 20px !important;
    font-size: 13px !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 36px !important;
    border-radius: 50px !important;
    transition: 0.3s ease;
}


.project-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
}


.common-button-groups .tmp-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2px 2px !important;
}

.common-button-groups .icon-reverse-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100%;
}


.common-button-groups .btn-text,
.common-button-groups .btn-icon {
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: color 0.3s ease !important;
}


.common-button-groups .btn-icon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 18px;
}


.common-button-groups .btn-bg,
.common-button-groups .btn-bg-hover {
    display: none !important;
}


.common-button-groups .tmp-btn:hover .btn-text,
.common-button-groups .tmp-btn:hover .btn-icon {
    color: var(--color-primary-alt) !important;
    transform: none !important;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 5px var(--color-primary), inset 0 0 2px var(--color-primary);
        border-color: var(--color-primary);
    }
    50% {
        box-shadow: 0 0 15px var(--color-primary-alt), inset 0 0 8px var(--color-primary-alt);
        border-color: var(--color-primary-alt);
    }
    100% {
        box-shadow: 0 0 5px var(--color-primary), inset 0 0 2px var(--color-primary);
        border-color: var(--color-primary);
    }
}

.common-button-groups .tmp-btn {
    animation: borderGlow 2.5s infinite alternate !important;
    border: 1px solid var(--color-primary) !important;
}

#contact .wpcf7-form-control.wpcf7-tel,
#contact .wpcf7-form-control.wpcf7-email {
    text-align: right !important;
    direction: rtl !important;
}

#contact .wpcf7-form-control::placeholder {
    text-align: right !important;
}

@media (max-width: 768px) {


    .common-button-groups {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .common-button-groups .tmp-btn {
        padding: 8px 5px !important;
        height: 42px !important;
        min-height: unset !important;
        flex: 1 !important;
    }

    .common-button-groups .btn-text {
        font-size: 10.5px !important;
    }

    .common-button-groups .btn-icon svg {
        width: 16px !important;
        height: 16px !important;
    }


    .navbar-info.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 5px;
    }

    .navbar-info.nav-tabs .menu-item a {
        font-size: 10px !important;
        padding: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .navbar-info.nav-tabs .nav-icon {
        margin-left: 0 !important;
    }

    .navbar-info.nav-tabs .nav-icon svg {
        width: 18px !important;
        height: 18px !important;
    }


    .ready-chatting-option {
        bottom: 85px !important;
    }


    .inner-logo {
        display: none !important;
    }


    .for-animation-inner {
        padding: 30px 15px 100px !important;
    }


    .footer-area .f-divider {
        display: none !important;
    }

    .footer-area .f-line {
        display: block !important;
        margin-top: 5px !important;
    }

    .footer-area .description {
        font-size: 11px !important;
        margin-top: 10px !important;
    }

}

@media (max-width: 768px) {
    .filter-list {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .filter-list .filter-item button {
        padding: 0 12px !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }
}

#modal-portfolio-img {
    object-fit: contain !important;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 8px;
    max-height: 65vh !important;
    transition: opacity 0.4s ease-in-out;
}


.tmp-portfolio-single-card img:not(:first-child) {
    display: none !important;
}

.offline-slider-dot {
    width: 10px;
    height: 10px;
    background: #555;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.offline-slider-dot.active {
    background: var(--color-primary, #13FDFD);
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--color-primary, #13FDFD);
}

.expertise-marquee-track {
    display: flex;
    flex-direction: column;
    animation: smoothMarquee 20s linear infinite;
}

@keyframes smoothMarquee {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}


@media (max-width: 768px) {

    .scrollToTop {
        left: auto !important;
        right: 20px !important;
        bottom: 80px !important;
    }
}

@media (max-width: 768px) {


    .portfolio-bentogrid-area-swiper .swiper-button-prev,
    .portfolio-bentogrid-area-swiper .swiper-button-next {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        transform: scale(0.8);
    }


    .work-experiance-slider li {
        display: flex !important;
        align-items: center !important;

    }


    .work-experiance-slider li .date {
        flex: 0 0 55px !important;
        min-width: 40px !important;
        padding-left: 10px !important;
        margin-right: 1px !important;
    }


    .work-experiance-slider li .info {
        flex: 1 !important;
        width: 100% !important;
    }

    .work-experiance-slider li .date p {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    .work-experiance-slider li .info .title {
        font-size: 14px !important;
    }


    @media (max-width: 768px) {


        .elementor-element-2468431,
        .elementor-element-040e015 {
            min-height: auto !important;
            height: auto !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }


        .portfolio-bentogrid-area-swiper,
        .mySwiper-bentogrid,
        .mySwiper-bentogrid .swiper-wrapper {
            min-height: auto !important;
            height: auto !important;

        }


        .elementor-element-2468431 + .container {
            margin-top: -120px !important;
            padding-top: 0 !important;
            position: relative;
            z-index: 10;
        }
        #tmp-page-content-bento {
            padding: 0px 0 0px;
        }
    }

}
.for-animation-inner {
    background-image: var(--footer-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.for-animation-inner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-color: #11141a;
    background-position: center;
    background-size: cover;
    padding: 30px 20px;
    z-index: 1;
}


.top-light-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary));
    box-shadow: 0 0 10px var(--color-primary);
    animation: lineMoveRight 4s linear infinite;
}


.bottom-light-line {
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--color-primary));
    box-shadow: 0 0 10px var(--color-primary);
    animation: lineMoveLeft 4s linear infinite;
    animation-delay: 2s;
}

@keyframes lineMoveRight {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes lineMoveLeft {
    0% { right: -100%; }
    100% { right: 100%; }
}

@media (max-width: 768px) {

    .footer {
        padding-bottom: 65px !important;
    }

    .for-animation-inner {
        padding: 10px 15px !important;
    }


    .footer-area .description {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        font-size: 12px !important;
    }


    .footer-area .f-divider {
        display: none !important;
    }
}