/* =========================================================
   NAVBAR RESPONSIVE
========================================================= */


@media (max-width: 991.98px) {

    .op-navbar {

        min-height: 70px;

    }


    .op-navbar-logo {

        width: 165px;

    }


    .op-navbar .navbar-collapse {

        margin-top: 15px;

        padding: 15px 0 20px;

        background: #080808;

        border-top: 1px solid #1c1c1c;

    }


    .op-nav-link {

        padding: 12px 15px !important;

    }


    .op-nav-link::after {

        display: none;

    }


    .op-nav-link:hover {

        background: rgba(255, 30, 30, 0.05);

    }


    .op-navbar-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        padding: 15px;

        border-top: 1px solid #1c1c1c;

        margin-top: 10px;

    }


    .op-nav-login {

        padding: 10px 0;

        text-align: center;

    }


    .op-navbar-actions .op-btn {

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-navbar-logo {

        width: 145px;

    }


    .op-navbar-toggler {

        width: 42px;

        height: 42px;

    }

}

/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-hero {

        min-height: auto;

        padding: 80px 0 90px;

    }


    .op-hero-title {

        font-size: clamp(
            3rem,
            8vw,
            4.5rem
        );

    }


    .op-hero-terminal-wrapper {

        max-width: 650px;

        margin: 20px auto 0;

    }

}


@media (max-width: 767.98px) {

    .op-hero {

        padding: 65px 0 75px;

    }


    .op-hero-eyebrow {

        font-size: 10px;

        letter-spacing: 1px;

    }


    .op-hero-title {

        font-size: clamp(
            2.8rem,
            12vw,
            4rem
        );

        letter-spacing: -0.8px;

    }


    .op-hero-description {

        font-size: 15px;

        line-height: 1.7;

    }


    .op-hero-actions {

        flex-direction: column;

    }


    .op-hero-actions .op-btn {

        width: 100%;

    }


    .op-hero-features {

        flex-direction: column;

        gap: 12px;

    }


    .op-hero-terminal-wrapper {

        padding: 10px;

    }


    .op-hero-terminal {

        transform: none;

    }


    .op-hero-terminal:hover {

        transform: none;

    }


    .op-hero-floating-card {

        right: -5px;

        bottom: -15px;

    }

}


@media (max-width: 575.98px) {

    .op-hero-title {

        font-size: 2.7rem;

    }


    .op-hero-terminal .op-terminal-body {

        min-height: 280px;

        padding: 20px;

        font-size: 12px;

    }


    .op-hero-floating-card {

        position: relative;

        right: auto;

        bottom: auto;

        margin: 15px auto 0;

        width: fit-content;

    }

}

/* =========================================================
   INDEX PAGE SECTION 02 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-skills-section {

        padding: 90px 0;

    }


    .op-skills-intro {

        display: block;

        margin-bottom: 50px;

    }


    .op-skills-intro-right {

        max-width: 650px;

        margin-top: 25px;

    }


    .op-skill-card-premium {

        min-height: 390px;

    }

}


@media (max-width: 767.98px) {

    .op-skills-section {

        padding: 70px 0;

    }


    .op-skills-intro-left h2 {

        font-size: 2.7rem;

    }


    .op-skill-card-premium {

        min-height: auto;

        padding: 28px;

    }


    .op-skill-bg-number {

        font-size: 110px;

    }


    .op-skill-content h3 {

        font-size: 26px;

    }


    .op-skills-statement {

        gap: 10px;

    }


    .op-statement-line {

        width: 25px;

    }


    .op-statement-content {

        flex-wrap: wrap;

        justify-content: center;

        font-size: 10px;

        text-align: center;

    }

}


@media (max-width: 575.98px) {

    .op-skills-intro-left h2 {

        font-size: 2.35rem;

    }


    .op-skill-card-premium {

        padding: 24px;

    }


    .op-skill-content h3 {

        font-size: 24px;

    }


    .op-tool {

        min-width: 70px;

        height: 48px;

    }

}


/* =========================================================
   INDEX PAGE SECTION 03 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-labs-section {

        padding: 90px 0;

    }


    .op-labs-header {

        display: block;

        margin-bottom: 50px;

    }


    .op-labs-header-right {

        max-width: 600px;

        margin-top: 25px;

    }

}


@media (max-width: 767.98px) {

    .op-labs-section {

        padding: 70px 0;

    }


    .op-labs-header-left h2 {

        font-size: 2.7rem;

    }


    .op-lab-visual {

        height: 190px;

    }


    .op-lab-terminal {

        width: 80%;

    }


    .op-lab-content {

        padding: 24px;

    }


    .op-lab-content h3 {

        font-size: 24px;

    }


    .op-labs-bottom {

        display: block;

        padding: 25px;

    }


    .op-labs-bottom .op-btn {

        margin-top: 20px;

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-labs-header-left h2 {

        font-size: 2.35rem;

    }


    .op-lab-visual {

        height: 175px;

    }


    .op-lab-terminal {

        width: 85%;

        padding: 15px;

    }


    .op-lab-terminal strong {

        font-size: 10px;

    }

}


/* =========================================================
   SECTION 04 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-courses-section {

        padding: 90px 0;

    }


    .op-courses-header {

        display: block;

    }


    .op-courses-header-description {

        margin-top: 25px;

        max-width: 600px;

    }


    .op-featured-course {

        padding: 40px;

    }


    .op-course-terminal {

        max-width: 600px;

        margin: 10px auto 0;

    }

}


@media (max-width: 767.98px) {

    .op-courses-section {

        padding: 70px 0;

    }


    .op-courses-header h2 {

        font-size: 2.7rem;

    }


    .op-featured-course {

        padding: 28px;

    }


    .op-featured-course-number {

        font-size: 140px;

    }


    .op-featured-course h3 {

        font-size: 3rem;

    }


    .op-course-meta {

        flex-direction: column;

        gap: 10px;

    }


    .op-course-terminal {

        transform: none;

    }


    .op-featured-course:hover
    .op-course-terminal {

        transform: none;

    }


    .op-course-card {

        padding: 26px;

    }


    .op-courses-bottom {

        display: block;

    }


    .op-courses-bottom .op-btn {

        margin-top: 20px;

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-courses-header h2 {

        font-size: 2.35rem;

    }


    .op-featured-course h3 {

        font-size: 2.7rem;

    }


    .op-featured-course-description {

        font-size: 13px;

    }


    .op-course-terminal-body {

        padding: 18px;

        font-size: 10px;

    }

}

/* =========================================================
   SECTION 05 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-live-section {

        padding: 90px 0;

    }


    .op-live-wrapper {

        padding: 50px;

    }


    .op-live-session-card {

        max-width: 600px;

        margin: 10px auto 0;

    }

}


@media (max-width: 767.98px) {

    .op-live-section {

        padding: 70px 0;

    }


    .op-live-wrapper {

        padding: 30px;

    }


    .op-live-content h2 {

        font-size: 3rem;

    }


    .op-live-features {

        grid-template-columns: 1fr;

    }


    .op-live-actions {

        flex-direction: column;

        align-items: flex-start;

    }


    .op-live-session-card {

        transform: none;

    }


    .op-live-session-card:hover {

        transform: translateY(-3px);

    }

}


@media (max-width: 575.98px) {

    .op-live-wrapper {

        padding: 24px;

    }


    .op-live-content h2 {

        font-size: 2.6rem;

    }


    .op-live-description {

        font-size: 13px;

    }


    .op-live-session-body {

        padding: 24px;

    }


    .op-live-session-body h3 {

        font-size: 22px;

    }

}

/* =========================================================
   SECTION 06 RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-why-section {

        padding: 90px 0;

    }


    .op-why-card {

        min-height: 280px;

    }
     .op-why-header {

        display: block;

        margin-bottom: 50px;

    }


    .op-why-header-right {

        max-width: 600px;

        margin-top: 25px;

    }

}


@media (max-width: 767.98px) {

    .op-why-section {

        padding: 70px 0;

    }


    .op-why-header {

        margin-bottom: 45px;

    }


    .op-why-header h2 {

        font-size: 2.7rem;

    }
    
    .op-why-header-left h2 {

        font-size: 2.7rem;

    }


    .op-why-grid {

        grid-template-columns: 1fr;

    }


    .op-why-card {

        min-height: auto;

        padding: 30px;

    }


    .op-why-card-number {

        font-size: 80px;

    }


    .op-why-philosophy {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .op-why-philosophy-text {

        flex-wrap: wrap;

        gap: 8px;

        font-size: 9px;

    }

}


@media (max-width: 575.98px) {

    .op-why-header h2 {

        font-size: 2.35rem;

    }


    .op-why-card {

        padding: 25px;

    }


    .op-why-card h3 {

        font-size: 22px;

    }


    .op-why-card p {

        font-size: 12px;

    }

}
/* =========================================================
   SECTION 07 RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

    .op-final-cta-section {

        padding: 80px 0;

    }


    .op-final-cta {

        min-height: 450px;

        padding: 65px 25px;

    }


    .op-final-cta-content h2 {

        font-size: 3rem;

    }


    .op-final-cta-content > p {

        font-size: 13px;

    }


    .op-final-cta-actions {

        flex-direction: column;

        width: 100%;

    }


    .op-final-cta-actions .op-btn {

        width: 100%;

    }


    .op-final-cta-note {

        gap: 12px;

    }


    .op-final-crosshair {

        width: 240px;

        height: 240px;

    }

}


@media (max-width: 575.98px) {

    .op-final-cta {

        padding: 55px 20px;

    }


    .op-final-cta-content h2 {

        font-size: 2.55rem;

    }


    .op-final-cta-note span {

        font-size: 7px;

    }

}


/* =========================================================
   COURSES PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-courses-page-hero {

        padding: 130px 0 90px;

    }


    .op-catalog-header {

        display: block;

    }


    .op-catalog-header-description {

        max-width: 600px;

        margin-top: 25px;

    }


    .op-premium-course-card {

        display: block;

    }


    .op-premium-course-action {

        align-items: flex-start;

        margin-top: 25px;

        padding-top: 20px;

        border-top: 1px solid #191919;

    }

}


@media (max-width: 767.98px) {

    .op-courses-page-hero {

        padding: 110px 0 75px;

    }


    .op-courses-page-hero h1 {

        font-size: 3.5rem;

    }


    .op-courses-hero-stats {

        gap: 20px;

        flex-wrap: wrap;

    }


    .op-course-catalog-section,
    .op-premium-courses-section,
    .op-course-page-cta {

        padding: 80px 0;

    }


    .op-catalog-header h2 {

        font-size: 2.7rem;

    }


    .op-premium-course-card {

        padding: 35px 25px;

    }


    .op-premium-course-main {

        display: block;

    }


    .op-premium-course-icon {

        margin-bottom: 20px;

    }


    .op-premium-course-content h3 {

        font-size: 26px;

    }


    .op-premium-course-action {

        min-width: 0;

    }


    .op-course-page-cta-actions {

        flex-direction: column;

    }


    .op-course-page-cta-actions .op-btn {

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-courses-page-hero h1 {

        font-size: 3rem;

    }


    .op-courses-hero-stats {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

    }


    .op-catalog-header h2 {

        font-size: 2.35rem;

    }


    .op-catalog-card-body {

        min-height: auto;

    }


    .op-catalog-card-body p {

        min-height: auto;

    }


    .op-premium-course-card {

        padding: 30px 20px;

    }


    .op-premium-course-content h3 {

        font-size: 24px;

    }

}

/* LABS PAGE */
/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-labs-page-hero {

        padding: 130px 0 90px;

    }


    .op-labs-catalog-header {

        display: block;

    }


    .op-labs-catalog-header-right {

        max-width: 600px;

        margin-top: 25px;

    }


    .op-lab-steps {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .op-lab-step:nth-child(2) {

        border-right: 0;

    }


    .op-lab-step:nth-child(-n+2) {

        border-bottom: 1px solid #202020;

    }

}


@media (max-width: 767.98px) {

    .op-labs-page-hero {

        padding: 110px 0 75px;

    }


    .op-labs-page-hero h1 {

        font-size: 3.5rem;

    }


    .op-labs-hero-stats {

        gap: 20px;

        flex-wrap: wrap;

    }


    .op-labs-intro-section,
    .op-labs-how-section,
    .op-labs-page-cta {

        padding: 80px 0;

    }


    .op-labs-catalog-header-left h2 {

        font-size: 2.7rem;

    }


    .op-labs-toolbar {

        display: block;

    }


    .op-labs-toolbar-right {

        margin-top: 10px;

    }


    .op-lab-catalog-visual {

        height: 220px;

    }


    .op-lab-terminal-window {

        width: 82%;

    }


    .op-lab-catalog-body {

        min-height: auto;

    }


    .op-lab-catalog-body > p {

        min-height: auto;

    }


    .op-lab-steps {

        grid-template-columns: 1fr;

    }


    .op-lab-step {

        min-height: auto;

        border-right: 0;

        border-bottom: 1px solid #202020;

    }


    .op-lab-step:last-child {

        border-bottom: 0;

    }


    .op-labs-page-cta-inner {

        padding: 55px 20px;

    }

}


@media (max-width: 575.98px) {

    .op-labs-page-hero h1 {

        font-size: 3rem;

    }


    .op-labs-hero-stats {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

    }


    .op-labs-catalog-header-left h2 {

        font-size: 2.35rem;

    }


    .op-lab-catalog-body {

        padding: 24px;

    }


    .op-lab-catalog-body h3 {

        font-size: 24px;

    }


    .op-lab-catalog-footer {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-labs-page-cta-inner h2 {

        font-size: 2.6rem;

    }

}


/* =========================================================
   LAB DETAIL PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-lab-detail-heading {

        align-items: flex-start;

        flex-direction: column;

    }


    .op-lab-points {

        width: 130px;

    }


    .op-lab-sidebar {

        position: relative;

        top: auto;

    }


    .op-lab-target-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .op-lab-target-grid div:nth-child(2) {

        border-right: 0;

    }


    .op-lab-target-grid div:nth-child(-n+2) {

        border-bottom: 1px solid #1c1c1c;

    }

}


@media (max-width: 767.98px) {

    .op-lab-detail-header {

        padding: 110px 0 45px;

    }


    .op-lab-detail-heading h1 {

        font-size: 3rem;

    }


    .op-lab-workspace {

        padding: 40px 0 70px;

    }


    .op-lab-content-section {

        padding: 25px;

    }


    .op-lab-objectives {

        display: block;

    }


    .op-lab-objectives ul {

        grid-template-columns: 1fr;

    }


    .op-lab-flag-form {

        flex-direction: column;

    }


    .op-lab-final-form {

        flex-direction: column;

    }


    .op-lab-completion-box {

        align-items: flex-start;

        flex-wrap: wrap;

    }

}


@media (max-width: 575.98px) {

    .op-lab-detail-heading h1 {

        font-size: 2.5rem;

    }


    .op-lab-target-grid {

        grid-template-columns: 1fr;

    }


    .op-lab-target-grid div {

        border-right: 0;

        border-bottom: 1px solid #1c1c1c;

    }


    .op-lab-target-grid div:last-child {

        border-bottom: 0;

    }


    .op-lab-task-header {

        display: block;

    }


    .op-lab-task-points {

        display: inline-block;

        margin-top: 5px;

    }


    .op-lab-choice-group {

        flex-direction: column;

    }


    .op-lab-choice-group label span {

        width: 100%;

    }

}
/* =========================================================
   LIVE TRAINING PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-live-hero {

        padding: 135px 0 95px;

    }


    .op-live-positioning-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .op-live-format-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .op-live-format-card:nth-child(2) {

        border-right: 0;

    }


    .op-live-format-card:nth-child(-n+2) {

        border-bottom: 1px solid #202020;

    }


    .op-live-early-box {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}


@media (max-width: 767.98px) {

    .op-live-hero {

        padding: 110px 0 75px;

    }


    .op-live-hero h1 {

        font-size: 3.5rem;

    }


    .op-live-hero-actions {

        flex-direction: column;

    }


    .op-live-hero-actions .op-btn {

        width: 100%;

    }


    .op-live-hero-note {

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }


    .op-live-positioning,
    .op-live-learning-section,
    .op-live-format-section,
    .op-live-audience-section,
    .op-live-early-section,
    .op-live-final-section {

        padding: 80px 0;

    }


    .op-live-section-header h2,
    .op-live-positioning h2 {

        font-size: 2.7rem;

    }


    .op-live-learning-card {

        display: block;

    }


    .op-live-learning-icon {

        margin-bottom: 20px;

    }


    .op-live-format-grid {

        grid-template-columns: 1fr;

    }


    .op-live-format-card {

        border-right: 0;

        border-bottom: 1px solid #202020;

    }


    .op-live-format-card:last-child {

        border-bottom: 0;

    }


    .op-live-early-box {

        padding: 40px 25px;

    }


    .op-live-final-actions {

        flex-direction: column;

    }


    .op-live-final-actions .op-btn {

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-live-hero h1 {

        font-size: 3rem;

    }


    .op-live-early-content h2 {

        font-size: 2.7rem;

    }

}

/* =========================================================
   ABOUT PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-about-hero {

        padding: 135px 0 90px;

    }


    .op-about-two-column {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .op-about-platform-section
    .op-about-two-column {

        gap: 40px;

    }


    .op-about-security-box {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 767.98px) {

    .op-about-hero {

        padding: 110px 0 75px;

    }


    .op-about-hero h1 {

        font-size: 3.5rem;

    }


    .op-about-introduction,
    .op-about-mission-section,
    .op-about-difference-section,
    .op-about-platform-section,
    .op-about-values-section,
    .op-about-security-section,
    .op-about-future-section,
    .op-about-cta-section {

        padding: 80px 0;

    }


    .op-about-two-column h2,
    .op-about-section-heading h2 {

        font-size: 2.7rem;

    }


    .op-about-mission-card {

        padding: 30px;

    }


    .op-about-mission-card h2 {

        font-size: 26px;

    }


    .op-about-values-grid {

        grid-template-columns: 1fr;

    }


    .op-about-security-box {

        padding: 35px 25px;

    }


    .op-about-cta-actions {

        flex-direction: column;

    }


    .op-about-cta-actions .op-btn {

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-about-hero h1 {

        font-size: 3rem;

    }


    .op-about-large-text {

        font-size: 16px !important;

    }


    .op-about-card-top {

        margin-bottom: 30px;

    }


    .op-about-principle {

        min-height: auto;

    }


    .op-about-future-content h2 {

        font-size: 2.8rem;

    }


    .op-about-cta {

        padding: 60px 20px;

    }


    .op-about-cta h2 {

        font-size: 2.7rem;

    }

}


/* =========================================================
  CONTACT PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-contact-hero {

        padding: 135px 0 90px;

    }


    .op-contact-info {

        padding-right: 0;

    }

}


@media (max-width: 767.98px) {

    .op-contact-hero {

        padding: 110px 0 75px;

    }


    .op-contact-hero h1 {

        font-size: 3.5rem;

    }


    .op-contact-main,
    .op-contact-options,
    .op-contact-faq,
    .op-contact-final {

        padding: 80px 0;

    }


    .op-contact-info h2,
    .op-contact-section-header h2 {

        font-size: 2.7rem;

    }


    .op-contact-form-wrapper {

        padding: 25px;

    }


    .op-contact-form > .op-btn {

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-contact-hero h1 {

        font-size: 3rem;

    }


    .op-contact-faq-question {

        font-size: 11px;

    }
        .op-contact-final-actions .op-btn {

        width: 100%;

    }

}
/* =========================================================
   PRIVACY POLICY PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .op-legal-hero {

        padding: 135px 0 85px;

    }


    .op-legal-sidebar {

        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        margin-bottom: 30px;

        border-left: 0;

        border-top: 1px solid #202020;

        border-bottom: 1px solid #202020;

        padding: 15px 0;

    }


    .op-legal-sidebar-title {

        grid-column: 1 / -1;

        padding: 5px 0 10px;

    }


    .op-legal-sidebar a {

        padding: 7px 0;

    }

}


@media (max-width: 767.98px) {

    .op-legal-hero {

        padding: 110px 0 70px;

    }


    .op-legal-hero h1 {

        font-size: 3.5rem;

    }


    .op-legal-section,
    .op-legal-final {

        padding: 75px 0;

    }


    .op-legal-sidebar {

        grid-template-columns: 1fr;

    }


    .op-legal-sidebar-title {

        grid-column: auto;

    }


    .op-legal-content h2 {

        font-size: 24px;

    }


    .op-legal-content p,
    .op-legal-content li {

        font-size: 11px;

    }


    .op-legal-contact-box {

        flex-direction: column;

    }


    .op-legal-contact-box > div {

        width: 100%;

    }

}


@media (max-width: 575.98px) {

    .op-legal-hero h1 {

        font-size: 3rem;

    }


    .op-legal-content section {

        padding-bottom: 50px;

        margin-bottom: 50px;

    }

}