/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .cyber-navigation {
        gap: 0;
    }


    .cyber-nav-link {
        padding: 0 10px;

        font-size: 13px;
    }


    .cyber-nav-link::after {
        left: 10px;
        right: 10px;
    }


    .cyber-mega-inner {
        grid-template-columns: repeat(3, 1fr);
    }


    .cyber-hero-title {
        font-size: 58px;
    }


    .cyber-hero-visual {
        height: 520px;
    }


    .cyber-three-wrapper {
        width: 520px;
        height: 520px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 850px) {

    .cyber-navigation {
        display: none;
    }


    .cyber-menu-toggle {
        display: block;
    }


    .cyber-logo-text small {
        display: none;
    }


    .cyber-hero {
        padding-top: 72px;
    }


    .cyber-hero-container {
        width: 90%;

        min-height: auto;

        padding-top: 70px;
        padding-bottom: 80px;

        grid-template-columns: 1fr;

        text-align: center;
    }


    .cyber-hero-content {
        max-width: 700px;

        margin: auto;
    }


    .cyber-hero-eyebrow {
        justify-content: center;
    }


    .cyber-hero-title {
        font-size: clamp(
            43px,
            9vw,
            65px
        );

        letter-spacing: -2.5px;
    }


    .cyber-hero-description {
        margin-left: auto;
        margin-right: auto;
    }


    .cyber-hero-buttons {
        justify-content: center;

        flex-wrap: wrap;
    }


    .cyber-hero-trust {
        justify-content: center;
    }


    .cyber-hero-visual {
        height: 480px;

        margin-top: 20px;
    }


    .cyber-three-wrapper {
        width: 480px;

        height: 480px;
    }


    .cyber-card-ai {
        right: 0;
    }


    .cyber-card-cloud {
        left: 0;
    }


    .cyber-scroll-indicator {
        display: none;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .cyber-nav {
        height: 72px;
    }


    .cyber-nav-container {
        width: 90%;
    }


    .cyber-logo-text strong {
        font-size: 20px;
    }


    .cyber-logo-mark {
        width: 36px;
        height: 36px;
    }


    .cyber-hero-container {
        padding-top: 55px;
    }


    .cyber-hero-title {
        font-size: 43px;

        line-height: 1.06;
    }


    .cyber-hero-description {
        font-size: 15px;

        line-height: 1.7;
    }


    .cyber-hero-buttons {
        flex-direction: column;
    }


    .cyber-primary-button,
    .cyber-secondary-button {
        width: 100%;
    }


    .cyber-hero-trust {
        gap: 10px;
    }


    .cyber-hero-trust > div {
        padding-right: 12px;

        margin-right: 12px;
    }


    .cyber-hero-trust span {
        font-size: 8px;
    }


    .cyber-hero-visual {
        height: 350px;
    }


    .cyber-three-wrapper {
        width: 350px;

        height: 350px;
    }


    .cyber-floating-card {
        padding: 8px 10px;
    }


    .cyber-floating-card strong {
        font-size: 10px;
    }


    .cyber-floating-card span {
        font-size: 8px;
    }


    .cyber-floating-icon {
        width: 30px;

        height: 30px;
    }

}
/* =========================================
   ABOUT RESPONSIVE
========================================= */

@media (max-width: 850px) {

    .cyber-about-preview {
        padding: 90px 0;
    }


    .cyber-about-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .cyber-about-label {
        transform: none;

        width: auto;

        padding-top: 0;
    }


    .cyber-about-content h2 {
        font-size: 45px;

        letter-spacing: -2px;
    }


    .cyber-about-intro {
        font-size: 17px;
    }


    .cyber-about-stats {
        display: grid;

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

        border-left: none;

        border-top: 1px solid #e5e9ef;

        margin-top: 15px;
    }


    .cyber-about-stat {
        padding: 20px;

        border-bottom: none;

        border-right: 1px solid #e5e9ef;
    }


    .cyber-about-stat:first-child {
        padding-top: 20px;
    }


    .cyber-about-stat:last-child {
        border-right: none;
    }

}


@media (max-width: 480px) {

    .cyber-about-preview {
        padding: 75px 0;
    }


    .cyber-about-content h2 {
        font-size: 38px;
    }


    .cyber-about-intro {
        font-size: 16px;
    }


    .cyber-about-text {
        font-size: 14px;
    }


    .cyber-about-stats {
        grid-template-columns: 1fr;
    }


    .cyber-about-stat {
        border-right: none;

        border-bottom: 1px solid #e5e9ef;

        padding: 16px 0;
    }


    .cyber-about-stat:last-child {
        border-bottom: none;
    }

}
/* =========================================
   SERVICES RESPONSIVE
========================================= */

@media (max-width: 1000px) {

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


    .cyber-service-wide {
        grid-column: span 2;
    }

}


@media (max-width: 850px) {

    .cyber-services-preview {
        padding: 90px 0;
    }


    .cyber-services-heading {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 45px;
    }


    .cyber-services-grid {
        grid-template-columns: 1fr;
    }


    .cyber-service-wide {
        grid-column: span 1;
    }


    .cyber-service-card {
        min-height: 300px;
    }

}


@media (max-width: 480px) {

    .cyber-services-heading h2 {
        font-size: 38px;

        letter-spacing: -2px;
    }


    .cyber-services-heading p {
        font-size: 14px;
    }


    .cyber-service-card {
        min-height: 290px;

        padding: 23px;
    }


    .cyber-services-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

}
/* =========================================
   WHY CYBEROAKS RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .cyber-why-section {
        padding: 100px 0;
    }


    .cyber-why-container {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .cyber-why-left {
        max-width: 700px;
    }

}


@media (max-width: 600px) {

    .cyber-why-section {
        padding: 80px 0;
    }


    .cyber-why-container {
        width: 88%;

        gap: 50px;
    }


    .cyber-why-left h2 {
        font-size: 38px;

        letter-spacing: -2px;
    }


    .cyber-why-left > p {
        font-size: 14px;
    }


    .cyber-why-item {
        grid-template-columns:
            32px
            1fr
            25px;

        gap: 12px;

        padding: 24px 0;
    }


    .cyber-why-content h3 {
        font-size: 16px;
    }


    .cyber-why-content p {
        font-size: 12px;
    }

}
/* =====================================================
   STEP 7
   PORTFOLIO RESPONSIVE
===================================================== */


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {


    .cyber-project-featured {

        grid-template-columns:
            1fr;

    }


    .cyber-project-visual {

        min-height: 430px;

    }


    .cyber-project-visual img {

        min-height: 430px;

    }


    .cyber-project-row {

        grid-template-columns:
            1fr;

    }


}



/* =====================================================
   TABLET / MOBILE
===================================================== */

@media (max-width: 800px) {


    .cyber-portfolio-section {

        padding:
            100px
            0;

    }


    .cyber-portfolio-title {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 25px;

    }


    .cyber-portfolio-title h2 {

        font-size:
            42px;

        letter-spacing:
            -2px;

    }


    .cyber-project-info {

        padding:
            45px
            35px;

    }


    .cyber-project-info h3 {

        font-size:
            36px;

    }


}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 550px) {


    .cyber-portfolio-section {

        padding:
            80px
            0;

    }


    .cyber-portfolio-container {

        width:
            88%;

    }


    .cyber-portfolio-title h2 {

        font-size:
            36px;

        letter-spacing:
            -1.8px;

    }


    .cyber-project-visual {

        min-height:
            300px;

    }


    .cyber-project-visual img {

        min-height:
            300px;

    }


    .cyber-project-info {

        padding:
            35px
            25px;

    }


    .cyber-project-info h3 {

        font-size:
            31px;

        letter-spacing:
            -1.2px;

    }


    .cyber-project-info p {

        font-size:
            13px;

    }


    .cyber-project-small {

        grid-template-columns:
            105px
            1fr;

        min-height:
            170px;

    }


    .cyber-small-visual img {

        min-height:
            170px;

    }


    .cyber-small-info {

        padding:
            20px;

    }


    .cyber-small-info h3 {

        margin-top:
            15px;

        font-size:
            14px;

    }


    .cyber-portfolio-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

    }

}
/* =========================================
   STEP 9 — CONTACT RESPONSIVE
========================================= */

@media (max-width: 950px) {

    .cyber-contact-section {
        padding: 110px 0;
    }

    .cyber-contact-header {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cyber-contact-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .cyber-contact-intro {
        max-width: 600px;
    }

}


@media (max-width: 650px) {

    .cyber-contact-section {
        padding: 85px 0;
    }

    .cyber-contact-container {
        width: 88%;
    }

    .cyber-contact-header {
        margin-top: 35px;
        margin-bottom: 45px;
    }

    .cyber-contact-title h2 {
        font-size: 48px;
        letter-spacing: -2.5px;
    }

    .cyber-contact-intro p {
        font-size: 13px;
    }

    .cyber-contact-form-wrapper {
        padding: 28px 22px;
    }

    .cyber-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cyber-contact-info-item {
        padding: 21px 0;
    }

}
/* =========================================
   STEP 10 — FOOTER RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .cyber-footer-top {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 45px;
    }

    .cyber-footer-brand {
        grid-column: span 3;
        max-width: 500px;
    }

}


@media (max-width: 700px) {

    .cyber-footer {
        padding: 65px 0 25px;
    }

    .cyber-footer-container {
        width: 88%;
    }

    .cyber-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px 25px;
    }

    .cyber-footer-brand {
        grid-column: span 2;
    }

    .cyber-footer-line {
        margin-top: 50px;
    }

    .cyber-footer-bottom {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cyber-footer-bottom-links {
        flex-wrap: wrap;
        gap: 15px;
    }

    .cyber-back-top {
        justify-self: start;
    }

}


@media (max-width: 450px) {

    .cyber-footer-top {
        grid-template-columns: 1fr;
    }

    .cyber-footer-brand {
        grid-column: span 1;
    }

}
/* =========================================
   STEP 11 — ABOUT RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .cyber-about-hero {
        padding: 130px 0 90px;
    }

    .cyber-about-hero-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .cyber-about-hero-content {
        max-width: 700px;
    }

    .cyber-about-hero-image {
        height: 500px;
    }

    .cyber-values-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 800px) {

    .cyber-about-intro-grid,
    .cyber-about-why-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .cyber-direction-grid {
        grid-template-columns: 1fr;
    }

    .cyber-about-contact-inner {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .cyber-about-hero {
        padding: 110px 0 75px;
    }

    .cyber-about-hero-container,
    .cyber-about-container {
        width: 88%;
    }

    .cyber-about-hero-content h1 {
        font-size: 52px;
        letter-spacing: -2.5px;
    }

    .cyber-about-hero-content p {
        font-size: 13px;
    }

    .cyber-about-hero-image {
        height: 360px;
    }

    .cyber-about-intro,
    .cyber-about-direction,
    .cyber-values-section,
    .cyber-about-why {
        padding: 85px 0;
    }

    .cyber-about-intro-grid h2,
    .cyber-values-heading h2,
    .cyber-about-why h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .cyber-direction-card {
        min-height: 350px;
        padding: 30px;
    }

    .cyber-values-grid {
        grid-template-columns: 1fr;
    }

    .cyber-value-card {
        min-height: 220px;
    }

    .cyber-about-contact {
        padding: 70px 0;
    }

    .cyber-about-contact-inner h2 {
        font-size: 40px;
    }

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

@media (max-width: 1000px) {

    .cyber-about-banner {
        height: 580px;
    }

    .cyber-about-company-grid,
    .cyber-about-tech-grid,
    .cyber-about-why-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .cyber-values-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cyber-about-tech-content {
        padding-top: 0;
    }

}


@media (max-width: 800px) {

    .cyber-direction-grid {
        grid-template-columns: 1fr;
    }

    .cyber-values-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .cyber-about-final-cta-inner {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .cyber-about-banner {
        height: 530px;
    }

    .cyber-about-banner-content {
        width: 88%;
        padding-top: 45px;
    }

    .cyber-about-banner-content h1 {
        font-size: 53px;

        letter-spacing: -2.5px;
    }

    .cyber-about-banner-content > p {
        max-width: 390px;

        font-size: 13px;

        line-height: 1.75;
    }

    .cyber-about-company,
    .cyber-about-direction,
    .cyber-values-section,
    .cyber-about-tech,
    .cyber-about-why {
        padding: 85px 0;
    }

    .cyber-about-container {
        width: 88%;
    }

    .cyber-about-company-heading h2,
    .cyber-about-direction-header h2,
    .cyber-values-heading h2,
    .cyber-about-tech-heading h2,
    .cyber-about-why h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }

    .cyber-about-company-grid {
        margin-top: 40px;
    }

    .cyber-about-stats {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .cyber-about-stat {
        border-right: none;

        border-bottom: 1px solid #dfe5ec;
    }

    .cyber-about-stat:last-child {
        border-bottom: none;
    }

    .cyber-direction-card {
        min-height: 360px;

        padding: 30px;
    }

    .cyber-direction-card h3 {
        font-size: 32px;
    }

    .cyber-values-grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }

    .cyber-value-card {
        min-height: 245px;
    }

    .cyber-about-tech-grid {
        gap: 35px;
    }

    .cyber-about-why-grid {
        gap: 45px;
    }

    .cyber-about-final-cta {
        padding: 70px 0;
    }

    .cyber-about-final-cta-inner h2 {
        font-size: 40px;

        letter-spacing: -2px;
    }

}
/* =========================================================
   CYBEROAKS ABOUT PAGE RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .cyber-nav {
        width: 90%;
    }

    .cyber-nav-links {
        gap: 20px;
    }

    .cyber-about-company-grid,
    .cyber-about-tech-grid,
    .cyber-about-why-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

    .cyber-about-contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cyber-about-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 800px) {

    .cyber-navbar {
        height: 72px;
    }

    .cyber-nav-links {
        display: none;
    }

    .cyber-menu-toggle {
        display: flex;
    }

    .cyber-about-banner {
        min-height: 600px;
    }

    .cyber-about-banner-content {
        padding: 70px 0;
    }

    .cyber-about-banner h1 {
        font-size: clamp(48px, 10vw, 75px);
        letter-spacing: -3px;
    }

    .cyber-about-company,
    .cyber-about-direction,
    .cyber-values-section,
    .cyber-about-tech,
    .cyber-about-why,
    .cyber-about-contact {
        padding: 85px 0;
    }

    .cyber-about-direction-grid {
        grid-template-columns: 1fr;
    }

    .cyber-about-stats {
        grid-template-columns: 1fr;
    }

    .cyber-values-grid {
        grid-template-columns: 1fr;
    }

    .cyber-about-tech h2,
    .cyber-about-company h2,
    .cyber-about-why h2 {
        font-size: 48px;
    }

    .cyber-contact-form {
        grid-template-columns: 1fr;
    }

    .cyber-contact-field.full,
    .cyber-contact-submit {
        grid-column: auto;
    }
}


@media (max-width: 600px) {

    .cyber-about-container {
        width: 88%;
    }

    .cyber-about-banner {
        min-height: 560px;
    }

    .cyber-about-banner h1 {
        font-size: 48px;
    }

    .cyber-about-banner p {
        font-size: 14px;
    }

    .cyber-about-direction-card {
        padding: 32px;
        min-height: 260px;
    }

    .cyber-about-tech h2,
    .cyber-about-company h2,
    .cyber-about-why h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .cyber-about-final-cta {
        padding: 90px 20px;
    }

    .cyber-about-final-cta h2 {
        font-size: 48px;
    }

    .cyber-about-footer-grid {
        grid-template-columns: 1fr;
    }
}