

@media (max-width: 1439px) {
    .custom-container {
        width: 100%;
    }
    .sticky-sidebar {
        width: 122px;
        overflow: hidden;
    }
    .page-content-wrapper {
        width: calc(100% - 158px);
    }
    .sticky-sidebar .sticky-sidebar-inner {
        padding: 34px 20px 24px;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom .social-link-wrap,
    .menu-lists ul li a .title,
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-me .sidebar-me-inner .content,
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-logo .left {
        display: none;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom .copyright-text {
        padding: 12px 17px;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-me .sidebar-me-inner {
        padding: 0;
        flex-direction: column;
        gap: 0;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top {
        width: 70px;
        margin-left: auto;
        margin-right: auto;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-me .sidebar-me-inner .img-box {
        border: none;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-logo .right {
        width: 100%;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-logo .right #current-time {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        background: linear-gradient(-90deg, rgba(212, 145, 23, 0.04) 0%, rgba(212, 145, 23, 0.02) 100%);
        font-size: 20px;
    }
    .menu-lists ul li a {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-area .hero-img {
        height: auto;
    }
    .page-content-wrapper section {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 1181px) {
    .project-img-2-col .custom-container,
    .problem-and-solution-wrap .custom-container,
    .project-detail-top .custom-row,
    .hero-content-top,
    .hero-area .custom-row {
        flex-direction: column;
    }
    .hero-content-top .resume-download, 
    .hero-content-top .time {
        width: 100%;
    }
    .available-link {
        justify-content: center;
    }
    .hero-area .hero-img {
        order: 2;
        height: 378px;
        width: 100%;
    }
    .hero-area .hero-content-bottom .hero-content {
        padding-bottom: 54px;
    }
    .edc-and-exp-area .edc-and-exp-inner {
        grid-template-columns: repeat(1, 1fr);
    }
    .blog-items,
    .gallery-lists,
    .project-lists {
        grid-template-columns: repeat(2, 1fr);
    }
    .project-detail-top .right,
    .project-detail-top .project-address-lists {
        max-width: 100%;
    }
}

@media (max-width: 855px) {
    .hero-area .hero-content-bottom .hero-content {
        padding-bottom: 27px;
    }
    .hero-area .hero-content-bottom {
        flex-direction: column;
    }
    .hero-area .hero-content-bottom .hero-content {
        align-self: stretch;
        width: 100%;
    }
    .hero-area .hero-content-bottom .hero-map-wrap {
        max-width: 100%;
        width: 100%;
        height: 300px;
    }
    .hero2-area .hero-content-right{
        order: 2;

    }
}
@media (max-width: 809px) {
    .project-details-content-box-2 .custom-container, .project-img-2-col .custom-container, .problem-and-solution-wrap .custom-container, .project-details-hero-wrap .custom-container, .project-detail-top .custom-container, .newsletter-area .custom-container, .project2-area .custom-container, .contact-area .custom-container, .gallery2-area .custom-container, .gallery-area .custom-container, .testimonial-area .custom-container, .blog-area .custom-container, .stack-area .custom-container, .edc-and-exp-area .custom-container,
    .custom-container {
        padding: 20px;
    }
    .sticky-sidebar{
        position: absolute;
        width: calc(100% - 36px);
        z-index: 999999;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-logo .left {
        display: flex;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-logo .right {
        display: none;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-logo {
        margin: 0;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom,
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .sidebar-me {
        display: none;
    }
    .project-detail-content-wrap,
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top {
        width: 100%;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom.responsive-mode .social-link-wrap,
    .menu-lists ul li a .title {
        display: block;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom.responsive-mode  {
        display: flex;
    }
    .menu-lists ul li a {
        width: 100%;
        height: auto;
        padding: 15px 0 15px 18px;
        justify-content: flex-start;
    }
    .social-link-wrap {
        width: auto;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom .copyright-text {
        flex: 1;
        -webkit-backdrop-filter: blur(26.2525px);
        backdrop-filter: blur(26.2525px);
        background: linear-gradient(2.66357e-06deg, rgba(212, 145, 23, 0.05) 0%, rgba(182, 102, 195, 0.05) 100%);
        justify-content: center;
    }
    .social-link-wrap .social-links {
        padding: 12px 18px;
    }
    .sticky-sidebar .menu-lists {
        padding-top: 61px;
        padding-bottom: 61px;
    }
    .sticky-sidebar::before {
        content: "";
        border: 7.5px solid rgba(6, 15, 21, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0;
        border-radius: inherit;
        pointer-events: none;
    }
    .sticky-sidebar .sticky-sidebar-inner {
        padding: 20px;
        height: min-content;
        transition: .5s;
    }
    .sticky-sidebar {
        height: 100px;
        transition: height .3s;
    }
    .sticky-sidebar.active-nav {
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
        transition: height .5s;
        height: 561px;
    }
    main {
        padding: 130px 18px 18px;
    }
    .page-content-wrapper {
        width: 100%;
    }
    .project-slider-box .project-img {
        height: 256px;
        overflow: hidden;
    }
    .project-slider-box .project-img img {
        object-fit: cover;
        height: 100%;
    }
    .blog-items2,
    .gallery-lists,
    .project-lists,
    .blog-items,
    .stack-lists,
    .service-lists,
    .project-experience-wrap {
        grid-template-columns: repeat(1, 1fr);
    }
    .newsletter-box,
    .footer-area,
    .contact-inner {
        flex-direction: column;
    }
    .contact-inner .contact-infos {
        max-width: 100%;
    }
    .contact-infos ul li .content {
        flex: 1;
    }
    .contact-infos ul li .content p a {
        display: block;
    }
    .contact-infos ul li .content p a + a {
        margin-top: 8px;
    }
    .footer-area {
        row-gap: 20px;
    }
    .footer-area .left {
        flex-wrap: wrap;
        justify-content: center;
    }
    .sticky-sidebar .sticky-sidebar-inner .sidebar-top .humberg-menu {
        display: block;
    }
    .sticky-sidebar.active-nav .sticky-sidebar-inner .sidebar-top .humberg-menu {
        width: 30px;
    }
    .img-box {
        width: 100%;
        height: 295px;
        overflow: hidden;
    }
    .img-box img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .footer-area {
        padding-top: 35px;
        padding-bottom: 28px;
        margin-top: 40px;
    }
    .gallery-box.gallery2-box {
        height: 270px;
    }
    .gallery-box.gallery2-box img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    .gallery-box.gallery2-box .hover-img {
        display: none;
    }
    .project-area .project-header.section-header {
        flex-wrap: wrap;
    }
    .project-area .project-header.section-header .theme-btn {
        order: 1;
    }
    .project-area .project-header.section-header .animation-texts-wrap {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .hero-area .hero-content-bottom .hero-content h1 {
        font-size: 20px;
        letter-spacing: -.75px;
        line-height: 21px;
    }
}

/* Collapsed (icon-only) sidebar tooltips */
@media (min-width: 810px) and (max-width: 1439px) {
    .sticky-sidebar {
        overflow: visible;
    }
    .menu-lists ul li a {
        position: relative;
    }
    .menu-lists ul li a[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        background: rgba(6, 15, 21, 0.92);
        color: #f9f9f9;
        border: .75px solid rgba(212, 145, 23, 0.45);
        padding: 7px 11px;
        font-size: 12px;
        letter-spacing: .3px;
        white-space: nowrap;
        border-radius: 6px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .18s ease;
        z-index: 100;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .menu-lists ul li a[data-tooltip]::before {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: rgba(212, 145, 23, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .18s ease;
    }
    .menu-lists ul li a[data-tooltip]:hover::after,
    .menu-lists ul li a[data-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
    .menu-lists ul li a[data-tooltip]:hover::before,
    .menu-lists ul li a[data-tooltip]:focus-visible::before {
        opacity: 1;
        visibility: visible;
    }
}

/* Keep the hero portrait card the same height as the panels beside it */
@media (min-width: 1182px) {
    .hero-area .hero-img {
        height: auto;
        align-self: stretch;
    }
}

/* Mobile hero order: photo -> bio -> globe -> available/date/contact */
@media (max-width: 809px) {
    .hero-area .hero-img {
        order: 1;
        height: auto;
    }
    .hero-area .hero-img img {
        height: auto;
    }
    .hero-area .hero-content-right {
        order: 2;
    }
    .hero-area .hero-content-right .hero-content-bottom {
        order: 1;
    }
    .hero-area .hero-content-right .hero-content-top {
        order: 2;
    }
}

/* WhatsApp CTA on small screens */
@media (max-width: 809px) {
    .whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 56px;
        padding: 0;
    }
    .whatsapp-float span {
        display: none;
    }
    .contact-infos ul li .content p a.whatsapp-link {
        display: inline-flex;
    }
}

/* Very small phones */
@media (max-width: 359px) {
    .contact-infos ul {
        padding: 15px;
    }
    .contact-infos ul li {
        gap: 12px;
    }
    .contact-infos ul li .content {
        padding: 14px 16px 20px 16px;
    }
    .available-link {
        font-size: 12px;
        padding: 12px 14px;
        gap: 10px;
    }
}

/* Cap the layout on large TVs and centre the whole shell */
@media (min-width: 1920px) {
    main {
        max-width: 1920px;
        margin-inline: auto;
    }
    .sticky-sidebar {
        left: calc((100vw - 1920px) / 2 + 18px);
    }
    .whatsapp-float {
        right: calc((100vw - 1920px) / 2 + 24px);
    }
}
