/* Responsive styles for Index page
   Breakpoints: 1024px, 768px, 600px
*/

@media (max-width: 1024px) {
    .ipp-index-hero {
        height: 680px;
    }

    .ipp-index-hero h1 {
        max-width: 90%;
        text-align: center;
    }

    .ipp-quote h3 br {
        display: none;
    }

    .ipp-capability {
        padding: 0 0 52px;
    }

    .ipp-capability-inner {
        height: 560px;
        border-radius: 18px;
    }

    .ipp-capability-content {
        top: 54px;
        left: 54px;
        max-width: 620px;
        z-index: 2;
    }

    .ipp-capability-inner::after {
        background: linear-gradient(90deg, rgba(46, 64, 82, 0.58) 0%, rgba(46, 64, 82, 0.28) 50%, rgba(46, 64, 82, 0) 100%);
    }

    .ipp-capability-content h3 {
        margin-bottom: 20px;
    }

    .ipp-capability-content p {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .ipp-index-hero {
        height: 560px;
    }

    .ipp-index-hero-video {
        object-position: center center;
    }

    .ipp-hero-content {
        padding: 0 28px;
        text-align: center;
    }

    .ipp-capability {
        padding: 0 0 46px;
    }

    .ipp-capability-inner {
        height: auto;
        min-height: 500px;
        border-radius: 16px;
    }

    .ipp-capability-image {
        position: absolute;
        opacity: 0.58;
    }

    .ipp-capability-content {
        position: relative;
        top: auto;
        left: auto;
        z-index: 2;
        max-width: none;
        padding: 50px 42px;
    }

    .ipp-capability-inner::after {
        background: linear-gradient(90deg, rgba(46, 64, 82, 0.54) 0%, rgba(46, 64, 82, 0.22) 64%, rgba(46, 64, 82, 0) 100%);
    }

    .ipp-capability-content h3 {
        margin-bottom: 18px;
    }

    .ipp-capability-content p {
        margin-bottom: 28px;
    }
}

@media (max-width: 600px) {
    .ipp-index-hero {
        height: 460px;
    }

    .ipp-hero-content {
        padding: 0 22px;
    }

    .ipp-capability {
        padding: 0 0 38px;
    }

    .ipp-capability-inner {
        min-height: 440px;
        border-radius: 14px;
    }

    .ipp-capability-image {
        object-position: center center;
        opacity: 0.5;
    }

    .ipp-capability-content {
        padding: 40px 24px;
    }

    .ipp-capability-inner::after {
        background: linear-gradient(90deg, rgba(46, 64, 82, 0.52) 0%, rgba(46, 64, 82, 0.18) 70%, rgba(46, 64, 82, 0) 100%);
    }

    .ipp-capability-content h3 {
        margin-bottom: 16px;
    }

    .ipp-capability-content p {
        margin-bottom: 24px;
    }

    .ipp-capability-content .whiteButton {
        width: 100%;
    }
}