/* ===============================
   PenTester.Ca Responsive Stylesheet
   =============================== */

/* ===============================
   Breakpoint Config: 1440px and below
   =============================== */
@media (max-width: 1440px) {
    .header-menu-wrap .custom-container {
        max-width: 100%;
        padding-left: var(--page-margin);
        padding-right: var(--page-margin);
    }

    .custom-container {
        padding-right: var(--page-margin);
        padding-left: var(--page-margin);
        max-width: 1440px;
    }

    .about-sec {
        padding-left: 0;
        padding-right: 0;
    }

    .about-sec-nobg {
        padding-left: 0;
        padding-right: 0;
    }

    .about-sec .custom-container,
    .about-sec-nobg .custom-container {
        padding-left: var(--page-margin);
        padding-right: var(--page-margin);
    }
}

/* ===============================
   Breakpoint Config: 1439px and below
   =============================== */
@media (max-width: 1439px) {
    .section-header {
        flex-direction: column;
        gap: 20px;
    }

    .section-header .section-subtitle,
    .section-header .section-subtitlelight {
        width: 100%;
    }

    .about-sec .funfacts-wrap {
        gap: 24px;
    }

    .about-sec .section-header .section-title {
        font-weight: 400;
    }

    .about-sec-nobg .funfacts-wrap {
        gap: 24px;
    }

    .about-sec-nobg .section-header .section-title {
        font-weight: 400;
    }

    .footer-area .footer-top > .row {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer-area .footer-top > .row .col-md-3 {
        order: 2;
    }

    .footer-area .footer-top > .row .col-md-3:nth-child(2) {
        width: 100%;
        order: 1;
        margin-bottom: 50px;
    }

    .footer-widget {
        gap: 80px;
    }

    .footer-area .footer-top {
        padding: 50px var(--page-margin) 60px var(--page-margin);
    }

    .project-single-content-wrap .section-header .right {
        width: 100%;
    }

    .funfact-box .funfact-blurb p {
        font-size: 13px;
    }

    .feedback-box .content p {
        font-size: 13px;
        line-height: 18px;
    }
}

/* ===============================
   Breakpoint Config: 1200px and below
   =============================== */
@media (max-width: 1200px) {
    .feedback-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-sec-2 .feature-project .img-box {
        height: 368px;
    }

    .feature-sec-2 .feature-project-2 .img-box {
        height: 308px;
    }

    .funfact-box .funfact-blurb p {
        font-size: 13px;
    }

    .feedback-box .content p {
        font-size: 13px;
        line-height: 18px;
    }

    .about-sec .funfacts-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
   Breakpoint Config: 1024px and below
   =============================== */
@media (max-width: 1024px) {
    .feedback-sec {
        padding: 40px var(--page-margin) 50px var(--page-margin);
    }

    .feature-sec {
        padding:40px 0px 40px 0px;
    }

    .funfact-box .funfact-blurb p {
        font-size: 13px;
    }

    .feedback-box .content p {
        font-size: 13px;
        line-height: 18px;
    }

    .feature-project-info-box,
    .header-sidebar-wrap .header-sidebar-content {
        width: 100%;
    }

    .about-sec .funfacts-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
   Breakpoint Config: 809px and below
   =============================== */
@media (max-width: 809px) {
    .preloader-wrap {
        gap: 32px;
    }

    .preloader-wrap img {
        max-width: 200px;
    }

    .header-sidebar-wrap .header-sidebar-content .header-sidebar-bottom,
    .header-sidebar-wrap .header-sidebar-content .sidebar-menu {
        padding-left: var(--page-margin);
    }

    .header-sidebar-wrap .header-sidebar-content .header-sidebar-top {
        padding-left: var(--page-margin);
        padding-right: var(--page-margin);
    }

    .header-sidebar-wrap .header-sidebar-content .header-sidebar-top ul li {
        gap: 25px;
    }

    .about-sec .funfacts-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-sec-nobg .funfacts-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-col-2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .feature-sec-2 .feature-project .img-box {
        height: 308px;
    }

    .feature-project-2 {
        padding-bottom: 30px;
    }

    .feature-project .feature-project-infos {
        flex-direction: column;
        gap: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .feature-project-infos .feature-project-info-box:nth-child(3),
    .feature-project-infos .feature-project-info-box:nth-child(4) {
        width: 100%;
    }

    .funfact-box .funfact-blurb p {
        font-size: 12px;
    }

    .feedback-box .content p {
        font-size: 12px;
        line-height: 17px;
    }

    .brand-box .brand-inner {
        padding-left: var(--page-margin);
        padding-right: var(--page-margin);
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-box .brand-inner h3 {
        font-size: 38px;
        line-height: 44px;
    }

    .brand-box .brand-inner .date {
        width: 100%;
        text-align: left;
    }

    .brand-box .brand-hover-logo {
        right: var(--page-margin);
        max-height: 28px;
        max-width: 110px;
    }

    .feedback-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .feature-project-2.feature-project-2 .blog-preview-text,
    .feature-sec-2 .feature-project-2 .blog-preview-text {
        height: 340px;
        padding: 24px;
    }

    .feature-project .blog-preview-text p {
        font-size: 18px;
        line-height: 28px;
    }

    .blog-article-section h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .blog-article-section h3 {
        font-size: 21px;
        line-height: 28px;
    }

    .blog-article-section p,
    .blog-article-section li {
        font-size: 18px;
        line-height: 30px;
    }

    .blog-article-content {
        gap: 48px;
    }

    .footer-area .footer-top > .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 50px;
        margin: 0;
    }

    .footer-area .footer-top > .row > .col-md-3 {
        display: contents;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(1) > .footer-widget,
    .footer-area .footer-top > .row > .col-md-3:nth-child(3) > .footer-widget {
        display: contents;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(2) > * {
        order: 1;
        width: 100%;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(1) .footer-widget-top {
        order: 2;
        width: 50%;
        align-items: flex-start;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(3) .footer-widget-top {
        order: 3;
        width: 50%;
        align-items: flex-end;
        text-align: right;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(3) .footer-widget-top ul {
        width: 100%;
        align-items: flex-end;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(3) .footer-widget-top ul li {
        width: 100%;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(3) .footer-widget-top ul li a {
        width: 100%;
        justify-content: flex-end;
        text-align: right;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(1) .copyright {
        order: 4;
        width: 100%;
        justify-content: center;
        padding-top: 10px;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(3) .copyright {
        display: none;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(1) .footer-heading,
    .footer-area .footer-top > .row > .col-md-3:nth-child(3) .footer-heading {
        font-size: 13px;
    }

    .footer-area .footer-top > .row > .col-md-3:nth-child(1) ul li a,
    .footer-area .footer-top > .row > .col-md-3:nth-child(3) ul li a {
        font-size: 14px;
    }

    .footer-area .footer-top {
        padding: 0 var(--page-margin) 50px var(--page-margin);
    }

    .footer-contact-infos {
        gap: 40px;
    }

    .footer-contact-infos .footer-widget-top .links {
        gap: 0;
    }

    .footer-contact-infos .footer-widget-top a {
        font-size: 30px;
        line-height: 52px;
    }

    .footer-area .footer-top > .row .col-md-3:nth-child(3) .footer-widget ul {
        align-items: flex-start;
    }
}

/* ===============================
   Breakpoint Config: 767px and below (phones)
   =============================== */
@media (max-width: 767px) {
    .hero-sec .hero-inner {
        height: auto;
        min-height: min(calc(100svh + 36px), 860px);
        padding-bottom: calc(var(--page-margin) + 2px);
        justify-content: space-between;
        gap: 24px;
    }

    .hero-sec .hero-top {
        order: 1;
    }

    .hero-sec .hero-bottom {
        order: 3;
    }

    .hero-sec .hero-inner .hero-video {
        order: 2;
        position: relative;
        top: auto;
        left: auto;
        z-index: 0;
        width: 85%;
        height: auto;
        aspect-ratio: 16 / 9;
        align-self: center;
        margin-top: calc((100vw - 2 * var(--page-margin)) * -0.06);
    }

    .hero-sec .hero-inner .hero-video video,
    .hero-sec .hero-inner .hero-video .video-overlay-bounds {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        transform: none;
    }

    .hero-sec .hero-bottom .hero-title span {
        font-size: clamp(38px, 10.2vw, 52px);
    }

    .about-sec .funfacts-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-sec .funfacts-wrap .funfact-box:nth-child(3),
    .about-sec .funfacts-wrap .funfact-box:nth-child(odd) {
        margin-top: 0;
    }

    .about-sec-nobg .funfacts-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-sec-nobg .funfacts-wrap .funfact-box:nth-child(3),
    .about-sec-nobg .funfacts-wrap .funfact-box:nth-child(odd) {
        margin-top: 0;
    }

    .feedback-sec {
        padding: 40px var(--page-margin) 40px var(--page-margin);
    }
}

/* ===============================
   Very Narrow Phone Config: 360px and below
   =============================== */
@media (max-width: 360px) {
    .footer-contact-infos .footer-widget-top a {
        font-size: 26px;
    }
}

/* ===============================
   Very Narrow Phone Config: 359px and below
   =============================== */
@media (max-width: 359px) {
    .hero-sec .hero-bottom .hero-title span {
        white-space: normal;
    }
}