/* #region RESPONSIVE CSS */

/* ***************************************************************************************************************************************************************/
/* ****   RESPONSIVE CSS   ***************************************************************************************************************************************/
/* ***************************************************************************************************************************************************************/

/* Extra Large Devices (Desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Styles for large desktops */

    .project-item.backoffice, .media-item.backoffice {
        width: calc(25% - 0.5rem);
    }
}

@media (max-width: 1200px) {
   
}

/* Large Devices (Laptops/Desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {

    .project-item.backoffice, .media-item.backoffice {
        width: calc(33% - 0.5rem);
    }
    /* Styles for medium to large screens */
}

/* Medium Devices (Tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Styles for tablets and small laptops */

    .project-item.backoffice, .media-item.backoffice {
        width: calc(50% - 0.5rem);
    }

    .image-grid.backoffice {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small Devices (Landscape Phones, 576px and up) */
@media (min-width: 576px) and (max-width: 768px) {
    /* Styles for larger mobile phones (landscape orientation) */
}

/* Extra Small Devices (Portrait Phones, Less than 576px) */
@media (max-width: 575px) {
    /* Styles for small mobile devices */
}

/* High-Resolution Screens (4K and up) */
@media (min-width: 2560px) {
    /* Styles for ultra-high resolution screens */
}

/* Portrait Mode for Tablets and Smartphones */
@media (orientation: portrait) and (max-width: 991px) {
    /* Adjustments specific to portrait orientation */
}

/* Landscape Mode for Tablets and Smartphones */
@media (orientation: landscape) and (max-width: 991px) {
    /* Adjustments specific to landscape orientation */
}

/* Retina Display (High DPI) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Styles for retina and high-resolution displays */
}

/* Common device-specific breakpoints */

/* iPad Pro (12.9") Portrait & Landscape */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* Styles for iPad Pro 12.9" */
}

/* iPad (7.9" & 9.7" versions) Portrait & Landscape */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Styles for iPads 7.9" and 9.7" */
}

/* iPad (7.9" & 9.7" versions) Portrait & Landscape */
@media (max-width: 576px) {

}

@media (min-width: 576px) and (max-width: 1024px) {
    
}

@media (min-width: 813px) and (max-width: 990px) {
    
}

@media (max-width: 360px) {

}

/* iPhone X, XS, 11 Pro (375px wide) */
@media (max-width: 812px) {

}

/* iPhone 6, 7, 8, SE (2nd gen) (375px wide) */
@media (min-width: 375px) and (max-width: 667px) {
 
}

/* Galaxy S9, Pixel 3, and similar Android phones (360px wide) */
@media (min-width: 360px) and (max-width: 740px) {
    /* Styles for Galaxy S9, Pixel 3 */
}

@media (max-width: 992px) {
    #logo-big-bg {
        padding-left: 10%;
        padding-right: 10%;
    }

    .main-section {
        padding-left: 10%;
        padding-right: 10%;
    }

    header#site-header, footer {
        padding-left: 10%;
        padding-right: 10%;
    }

    .scroll-to-top {
        right: 10%;
    }

    #project-details {
        flex-flow: column;
    }

        #project-details #left,
        #project-details #right,
        #project-details #right #image-gallery {
            overflow: unset;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    #project-details.backoffice {
        flex-flow: column;
    }

    #project-details.backoffice #image-gallery {
        max-height: 100%;
    }
}

@media (max-width: 767px) {

    .modal-project-caret {
        width: 3.5rem;
    }

    .modal-project-caret[data-pos="left"] {
        content: "Ant.";
        justify-content: center;
        padding-right: 0.3rem;
        flex-flow: column;
        align-items: center;
    }

        .modal-project-caret[data-pos="left"]::before {
            content: "Ant.";
            width: auto;
        }

        .modal-project-caret[data-pos="left"] small {
            display: none;
        }

    .modal-project-caret[data-pos="right"] {
        content: "Próx.";
        justify-content: center;
        padding-left: 0.3rem;
        flex-flow: column;
        align-items: center;
    }

        .modal-project-caret[data-pos="right"]::before {
            content: "Próx.";
            width: auto;
        }

        .modal-project-caret[data-pos="right"] small {
            display: none;
        }

    #side-menu {
        width: 100%;
        z-index: 1003;
    }

    header#site-header {
        height: 55px;
    }

    #intro-text {
        width: auto;
    }

     .modal-project .modal-body {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    .image-grid {
        grid-template-columns: auto;
    }

    #about-intro-section .intro #opening {
        flex-flow: wrap;
        justify-content: space-evenly;
        align-items: center;
    }

    #message-form.show {
        min-width: 100%;
        padding: 0;
        margin: 0;
        margin-bottom: 4rem;
    }

    .sticky-section-header {
        left: -0.5rem;
    }

        .sticky-section-header .header {
            font-size: 95%;
            letter-spacing: 18px;
        }

    #jobs {
        grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
    }

    #ver-projetos-content {
        flex-flow: row;
        column-gap: 3.5rem;
    }

    .project-item.backoffice, .media-item.backoffice {
        width: calc(100%);
    }

    body.backoffice header {
        max-height: 100%;
        min-height: auto;
        height: 100%;
    }

    #main-nav ul {
        align-items: center;
        justify-content: center;
        margin: 2rem 0;
    }

    .image-grid.backoffice {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .projects-filter-div.sticky {
        padding-left: 0;
        padding-right: 0;
    }

    .search-div {
        width: 100%;
    }

    .actions-div .search-div input {
        min-width: 100%;
        width: 100%;
    }

    #project-search .action-btns-div,
    #media-search .action-btns-div {
        margin-left: auto !important;
        margin-top: 0.75rem !important;
    }

    body.backoffice {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .scroll-to-top {
        bottom: 45px;
        width: 45px;
        height: 45px;
    }

        .scroll-to-top.backoffice {
            width: 45px;
            height: 45px;
            bottom: 12px;
            right: 23px;
        }

    #settingsForm {
        width: 100%;
        min-width: 100%;
        margin: auto;
    }

    #project-details #left,
    #project-details #right {
        height: auto !important;
    }

    #about-me-main-section .bullet-list {
        width: 100% !important;
    }

    #logo-big-bg {
        height: 100%;
    }

    #socials-main-div {
        margin-bottom: 3rem;
    }

    #logo-big-bg::before {
        font-size: calc(100vw - 10rem);
    }
}

/* ***************************************************************************************************************************************************************/
/* ****   / RESPONSIVE CSS   ***************************************************************************************************************************************/
/* ***************************************************************************************************************************************************************/

/* #endregion */