@media (max-width: 1078px) {
    .nav-links-first {
        display: none;
    }
    #about div.about-container {
        display: flex;
        flex-direction: column;
    }
    .about-image img {
        max-height: 480px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    .project-image {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .project-image img {
        max-width: 100% !important;
        width: auto;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 992px) {
    #gallery p.lead {
        max-width: 100% !important;
    }
}

@media (max-width: 994px) {
    .summary-item {
        max-width: 200px;
    }
}

@media (max-width: 850px) {
    .dev-profile {
        flex-direction: column !important;
        gap: 50px !important;
    }
    .about-text {
        gap: 50px !important;
    }
}

@media (max-width: 816px) {
    nav .nav-links-second .cta-two {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav-links-second {
        gap: 10px !important;
    }
    .gallery-container {
        display: flex;
        flex-direction: column;
    }
    .gallery-item:nth-child(odd):last-child {
        width: 100%;
    }
    .faq-section div.faq-card .faq-question {
        max-width: none;
    }
    .faq-question::after {
        margin-left: 50px;
    }
    .popup-content .btn-primary {
        padding: 16px 28px;
    }
    footer .desktop-only {
        display: none;
    }
    footer.footer .container .footer-container {
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #summary {
        padding-bottom: 50px;
    }
    .summary-item:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

@media (max-width: 710px) {
    html body .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important; /* Important flag must be kept, without it hero content is invisible */
    }
    #gallery .mobile-only {
        margin-bottom: 75px;
    }
    .faq-answer {
        max-width: 95% !important;
    }
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        gap: 5px;
        padding-bottom: 40px;
    }
    .footer-bottom p {
        margin-bottom: 0;
    }
    #packages-page section .container p.desktop-only,
    #packages-page section .container p.mobile-only {
        text-align: center;
    }
}

@media (max-width: 572px) {
    nav .nav-links-second .btn-primary {
        display: none;
    }
}

@media (max-width: 526px) {
    #hero {
        padding-bottom: 75px;
    }
    .desktop-only {
        display: none;
    }
    html body main #about .about-container .about-image img {
        max-height: 200px !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    footer.footer .intro {
        max-width: 80%;
    }
    footer.footer .container .footer-container .footer-links {
        display: flex;
    }
    .sidebar {
        max-width: 80% !important;
    }
    .summary-row {
        display: flex !important;
        flex-direction: column !important;
    }
    .summary-item i:hover {
        transform: none;
    }
    .summary-item i:active {
        transform: scale(1.15) rotate(-30deg);
    }
}

@media (max-width: 451px) {
    .nav-links-second {
        display: none;
    }
    html body footer.footer .container .footer-container .footer-links {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        text-align: center;
        gap: 75px;
    }
}

@media (hover: hover) {
    .about-image img:hover {
        transform: scale(1.05);
    }
    .about-image img:active {
        transform: scale(1.05);
    }
    .faq-card:hover {
        background-color: #efefef;
    }
    .faq-card:active {
        background-color: #efefef;
    }
    .footer-col ul li a:hover {
        color: var(--main-white);
    }
    .footer-col ul li a:active {
        color: var(--main-white);
    }
}