/* =====================================================
   NAYAN CERA COLOURS
   Responsive Styles
===================================================== */


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

@media (max-width: 991.98px) {

    /* -----------------------------------------
       Header
    ----------------------------------------- */

    .site-header .navbar {
        min-height: 76px;
    }

    .site-logo {
        width: 145px;
    }


    /* -----------------------------------------
       Hamburger
    ----------------------------------------- */

    .navbar-toggler {
        padding: 7px;

        border: 0;
        border-radius: 4px;

        box-shadow: none !important;
    }

    .navbar-toggler:focus {
        box-shadow: none !important;
    }


    /* Normal header hamburger */

    .navbar-toggler-icon {
        width: 20px;
        height: 20px;

        background-size: 20px;
    }


    /* -----------------------------------------
       Mobile Menu Panel
    ----------------------------------------- */

    .navbar-collapse {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        padding: 15px 20px 22px;

        background: #ffffff;

        border-top: 1px solid #eeeeee;

        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    }


    .navbar-nav {
        align-items: stretch !important;

        gap: 0;
    }


    /* IMPORTANT:
       Always dark links inside mobile white panel
    */

    .site-header .navbar-collapse .navbar-nav .nav-link,
    .site-header.header-sticky .navbar-collapse .navbar-nav .nav-link {

        color: #242424;

        padding: 13px 5px !important;

        border-bottom: 1px solid #eeeeee;

        font-size: 14px;
        font-weight: 600;
    }


    /* Mobile active / hover */

    .site-header .navbar-collapse .navbar-nav .nav-link:hover,
    .site-header .navbar-collapse .navbar-nav .nav-link.active,
    .site-header.header-sticky .navbar-collapse .navbar-nav .nav-link:hover,
    .site-header.header-sticky .navbar-collapse .navbar-nav .nav-link.active {

        color: var(--primary);
    }


    /* Remove desktop underline */

    .navbar-nav .nav-link::after {
        display: none;
    }


    /* -----------------------------------------
       Product Dropdown
    ----------------------------------------- */

    .navbar .dropdown-menu {

        padding: 7px 0 7px 15px;

        margin: 0;

        border: 0;
        border-radius: 0;

        background: #f8f9fa;

        box-shadow: none;
    }


    .navbar .dropdown-item {

        padding: 10px 12px;

        color: #333333;

        font-size: 13px;
        font-weight: 600;
    }


    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {

        color: var(--primary);

        background: var(--primary-light);
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .nav-contact-btn {

        width: 100%;

        min-height: 45px;

        margin-top: 15px;

        color: #ffffff !important;

        background: var(--primary) !important;

        border-color: var(--primary) !important;
    }


    .nav-contact-btn:hover {

        color: #ffffff !important;

        background: var(--primary-dark) !important;

        border-color: var(--primary-dark) !important;
    }


    /* =================================================
       STICKY MOBILE HEADER
    ================================================= */

    .site-header.header-sticky .navbar {

        min-height: 70px;
    }


    .site-header.header-sticky .site-logo {

        width: 135px;
    }


    /* White hamburger when header becomes blue */

    .site-header.header-sticky .navbar-toggler-icon {

        filter: brightness(0) invert(1);
    }


    /* Sticky mobile menu must remain WHITE */

    .site-header.header-sticky .navbar-collapse {

        background: #ffffff;

        border-top: 0;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.14);
    }


    /* Sticky menu links remain dark */

    .site-header.header-sticky
    .navbar-collapse
    .navbar-nav
    .nav-link {

        color: #242424;

        padding: 13px 5px !important;
    }


    /* Sticky active link remains blue */

    .site-header.header-sticky
    .navbar-collapse
    .navbar-nav
    .nav-link:hover,

    .site-header.header-sticky
    .navbar-collapse
    .navbar-nav
    .nav-link.active {

        color: var(--primary);
    }


    /* Sticky CTA must stay blue */

    .site-header.header-sticky
    .navbar-collapse
    .nav-contact-btn {

        color: #ffffff !important;

        background: var(--primary) !important;

        border-color: var(--primary) !important;
    }


    /* -----------------------------------------
       Sections
    ----------------------------------------- */

    .section-padding {
        padding: 75px 0;
    }

}


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

@media (max-width: 767.98px) {

    .section-padding {
        padding: 60px 0;
    }

    .section-title {

        font-size: 34px;

        letter-spacing: -0.8px;
    }

}


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

@media (max-width: 575.98px) {

    .container {

        padding-left: 20px;
        padding-right: 20px;
    }


    .site-logo {

        width: 130px;
    }


    .site-header.header-sticky .site-logo {

        width: 125px;
    }


    .section-title {

        font-size: 30px;
    }

}

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

@media (max-width: 991.98px) {

    .home-hero {
        min-height: auto;

        background:
            linear-gradient(
                180deg,
                #f7f9fb 0%,
                #f7f9fb 48%,
                #edf4fa 48%,
                #edf4fa 100%
            );
    }


    .min-vh-hero {
        min-height: auto;
    }


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

        padding: 90px 0 60px;
    }


    .hero-title {
        max-width: 680px;

        font-size: 62px;
    }


    .hero-visual {
        min-height: 550px;

        padding-bottom: 70px;
    }


    .hero-product-image {
        max-width: 570px;
    }


    .hero-quality-card {
        right: 8%;
        bottom: 25%;
    }


    .hero-scroll {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .home-hero {
        background: #f7f9fb;
    }


    .hero-content {
        padding: 70px 0 40px;
    }


    .hero-eyebrow {
        margin-bottom: 18px;

        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .hero-eyebrow span {
        width: 28px;
    }


    .hero-title {
        margin-bottom: 20px;

        font-size: 48px;

        line-height: 1.02;

        letter-spacing: -2.5px;
    }


    .hero-description {
        margin-bottom: 27px;

        font-size: 14px;

        line-height: 1.7;
    }


    .hero-actions {
        gap: 20px;

        margin-bottom: 38px;
    }


    .hero-experience {
        padding-top: 22px;
    }


    .experience-number {
        font-size: 42px;
    }


    .hero-visual {
        min-height: 450px;

        margin-left: -20px;
        margin-right: -20px;

        padding: 30px 20px 60px;

        background: #edf4fa;
    }


    .hero-bg-word {
        font-size: 90px;
    }


    .hero-product-image {
        max-width: 470px;
    }


    .hero-quality-card {
        right: 20px;
        bottom: 50px;
    }


    .hero-circle-one,
    .hero-circle-two {
        display: none;
    }

}


@media (max-width: 575.98px) {

    .hero-content {
        padding-top: 55px;
    }


    .hero-title {
        font-size: 41px;

        letter-spacing: -2px;
    }


    .hero-actions {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .hero-actions .btn-primary-custom {
        width: 100%;
    }


    .hero-experience {
        width: 100%;
    }


    .hero-visual {
        min-height: 390px;

        margin-top: 15px;
    }


    .hero-bg-word {
        font-size: 65px;

        letter-spacing: 6px;
    }


    .hero-quality-card {
        right: 20px;
        bottom: 35px;

        padding: 11px 14px;
    }


    .hero-card-icon {
        width: 35px;
        height: 35px;

        font-size: 16px;
    }

}

/* =====================================================
   HOME ABOUT RESPONSIVE
===================================================== */

@media (max-width: 1199.98px) {

    .about-image-main {
        height: 560px;
    }

    .about-content {
        padding-left: 10px;
    }

}


@media (max-width: 991.98px) {

    .about-visual {
        max-width: 650px;

        margin: 0 auto 30px;
    }


    .about-image-main {
        height: 600px;
    }


    .about-content {
        max-width: 700px;

        padding-left: 0;
    }

}


@media (max-width: 767.98px) {

    .about-visual {
        padding: 0 30px 35px 0;
    }


    .about-image-main {
        height: 500px;

        border-radius:
            4px 55px 4px 4px;
    }


    .about-experience-card {
        min-width: 205px;

        padding: 20px 22px;
    }


    .about-exp-number {
        font-size: 45px;
    }


    .about-points {
        gap: 15px;
    }

}


@media (max-width: 575.98px) {

    .about-visual {
        padding:
            0 15px 45px 0;

        margin-bottom: 15px;
    }


    .about-image-main {
        height: 410px;

        border-radius:
            4px 45px 4px 4px;
    }


    .about-experience-card {
        right: 0;

        min-width: 185px;

        padding: 17px 18px;
    }


    .about-exp-number {
        font-size: 39px;
    }


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


    .about-points {
        grid-template-columns: 1fr;

        gap: 13px;

        margin-bottom: 30px;
    }


    .about-lead {
        font-size: 15px;
    }

}

/* =====================================================
   HOME PRODUCTS RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .product-heading-row {
        margin-bottom: 40px;
    }

    .products-intro {
        max-width: 650px;

        margin: 20px 0 0;
    }

    .product-showcase {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .product-showcase-card,
    .product-card-large,
    .product-card-wide {
        height: 380px;
        min-height: 380px;
    }

    .product-card-content,
    .product-card-large
    .product-card-content {
        padding: 28px;
    }

    .product-card-content h3,
    .product-card-large
    .product-card-content h3 {
        font-size: 32px;
    }

}


@media (max-width: 767.98px) {

    .product-showcase {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .product-showcase-card,
    .product-card-large,
    .product-card-wide {
        height: 400px;
        min-height: 400px;
    }

}


@media (max-width: 575.98px) {

    .product-showcase-card,
    .product-card-large,
    .product-card-wide {
        height: 350px;
        min-height: 350px;
    }

    .product-card-content,
    .product-card-large
    .product-card-content {
        padding: 23px;
    }

    .product-card-content h3,
    .product-card-large
    .product-card-content h3 {
        font-size: 29px;
    }

    .product-card-number {
        top: 20px;
        right: 20px;
    }

}

/* =====================================================
   HOME CAPABILITY RESPONSIVE
===================================================== */

@media (max-width: 1199.98px) {

    .capability-inner {
        padding:
            80px 50px 80px 35px;
    }

}


@media (max-width: 991.98px) {

    .capability-content {
        min-height: auto;
    }


    .capability-inner {
        max-width: 720px;

        margin: 0 auto;

        padding:
            80px 30px;
    }


    .capability-visual {
        min-height: 650px;
    }

}


@media (max-width: 767.98px) {

    .capability-inner {
        padding:
            65px 20px;
    }


    .capability-inner > h2 {
        font-size: 42px;

        letter-spacing: -1.8px;
    }


    .capability-visual {
        min-height: 520px;
    }


    .capability-quote {
        left: 30px;
        right: 30px;
        bottom: 35px;
    }


    .capability-quote p {
        font-size: 21px;
    }

}


@media (max-width: 575.98px) {

    .capability-inner {
        padding:
            55px 20px;
    }


    .capability-inner > h2 {
        font-size: 36px;
    }


    .capability-features {
        grid-template-columns: 1fr;
    }


    .capability-feature {
        min-height: auto;

        padding: 18px;
    }


    .capability-visual {
        min-height: 450px;
    }


    .capability-quote {
        left: 22px;
        right: 22px;
        bottom: 25px;
    }


    .capability-quote p {
        font-size: 19px;
    }

}

/* =====================================================
   HOME TECHNOLOGY RESPONSIVE
===================================================== */

@media (max-width: 1199.98px) {

    .technology-visual {
        min-height: 620px;

        padding:
            0 50px 50px 35px;
    }


    .technology-image {
        height: 570px;
    }

}


@media (max-width: 991.98px) {

    .technology-visual {
        max-width: 750px;

        min-height: 650px;

        margin:
            0 auto 65px;

        padding:
            0 55px 55px 0;
    }


    .technology-image {
        height: 600px;
    }


    .technology-content {
        max-width: 700px;
    }


    .technology-side-text {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .technology-visual {
        min-height: 570px;

        padding:
            0 30px 50px 0;
    }


    .technology-image {
        height: 520px;

        border-radius:
            55px 4px 4px 4px;
    }


    .technology-card {
        width: 245px;

        padding: 24px;
    }


    .technology-card p {
        font-size: 15px;
    }

}


@media (max-width: 575.98px) {

    .technology-visual {
        min-height: 475px;

        margin-bottom: 50px;

        padding:
            0 15px 45px 0;
    }


    .technology-image {
        height: 430px;

        border-radius:
            42px 4px 4px 4px;
    }


    .technology-card {
        width: 215px;

        padding: 20px;
    }


    .technology-card-icon {
        width: 37px;
        height: 37px;

        margin-bottom: 15px;
    }


    .technology-card p {
        font-size: 13px;
    }


    .technology-item {
        gap: 14px;
    }

}

/* =====================================================
   FOOTER RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .footer-main {
        padding:
            70px 0 55px;
    }


    .footer-company {
        max-width: 500px;

        margin-bottom: 10px;
    }

}


@media (max-width: 767.98px) {

    .footer-main {
        padding:
            60px 0 45px;
    }


    .footer-logo img {
        width: 155px;
    }


    .footer-widget h3 {
        margin-top: 0;
    }


    .footer-bottom-inner {
        min-height: 90px;
    }

}


@media (max-width: 575.98px) {

    .footer-main {
        padding:
            50px 0 40px;
    }


    .footer-description {
        max-width: 320px;
    }


    .footer-bottom-inner {
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 15px;

        padding: 20px 0;
    }

}

/* =====================================================
   FLOATING CONTACT RESPONSIVE
===================================================== */

@media (max-width: 767.98px) {

    .floating-contact {
        right: 17px;
        bottom: 17px;
    }


    .floating-contact-toggle {
        width: 52px;
        height: 52px;
    }


    .floating-contact-toggle i {
        font-size: 19px;
    }


    .floating-action {
        width: 43px;
        height: 43px;
    }


    .floating-action i {
        font-size: 16px;
    }


    /* No tooltip on touch devices */

    .floating-action::before {
        display: none;
    }

}

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

@media (max-width: 991.98px) {

    .inner-hero {
        min-height: 460px;
    }


    .about-story-visual {
        max-width: 650px;

        margin:
            0 auto 35px;
    }


    .about-story-content {
        max-width: 700px;

        padding-left: 0;
    }


    .about-capability-content {
        max-width: 700px;

        margin-bottom: 25px;
    }


    .about-capability-image {
        height: 550px;
    }

}


@media (max-width: 767.98px) {

    .inner-hero {
        min-height: 420px;
    }


    .inner-hero h1 {
        font-size: 46px;

        letter-spacing: -2px;
    }


    .inner-hero-index {
        right: 20px;
        bottom: 20px;
    }


    .about-story-image {
        height: 520px;
    }


    .about-purpose {
        padding: 75px 0;
    }


    .purpose-card {
        min-height: auto;

        padding: 40px 30px;
    }


    .about-capability-image {
        height: 500px;
    }

}


@media (max-width: 575.98px) {

    .inner-hero {
        min-height: 370px;
    }


    .inner-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5,25,42,0.91),
                rgba(5,25,42,0.58)
            );
    }


    .inner-hero h1 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }


    .inner-hero-index {
        display: none;
    }


    /* Story */

    .about-story-visual {
        padding:
            0 15px 45px 0;
    }


    .about-story-image {
        height: 420px;

        border-radius:
            4px 45px 4px 4px;
    }


    .about-story-experience {
        min-width: 185px;

        padding: 18px;
    }


    .about-story-experience strong {
        font-size: 39px;
    }


    .about-story-outline {
        display: none;
    }


    .about-story-quote {
        padding:
            22px 20px 22px 55px;
    }


    .about-story-quote i {
        left: 18px;
    }


    /* Mission Vision */

    .about-purpose {
        padding: 60px 0;
    }


    .purpose-heading {
        margin-bottom: 35px;
    }


    .purpose-card {
        padding: 32px 25px;
    }


    .purpose-card h3 {
        font-size: 24px;
    }


    /* Capability */

    .about-capability-list {
        grid-template-columns: 1fr;
    }


    .about-capability-image {
        height: 420px;

        border-radius:
            45px 4px 4px 4px;
    }

}

/* =====================================================
   PRODUCT PAGE RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .product-inner-hero {
        min-height: 500px;
    }


    .product-detail-content {
        max-width: 700px;

        margin-bottom: 20px;
    }


    .product-detail-visual {
        height: 540px;
    }

}


@media (max-width: 767.98px) {

    .product-inner-hero {
        min-height: 440px;
    }


    .product-inner-content h1 {
        font-size: 47px;

        letter-spacing: -2px;
    }


    .product-hero-number {
        right: 20px;
        bottom: 20px;
    }


    .product-detail-visual {
        height: 480px;

        border-radius:
            50px 4px 4px 4px;
    }


    .product-features {
        padding: 70px 0;
    }


    .product-cta-inner {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 575.98px) {

    .product-inner-hero {
        min-height: 390px;
    }


    .product-inner-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4,22,37,0.93),
                rgba(4,22,37,0.57)
            );
    }


    .product-inner-content h1 {
        font-size: 39px;

        letter-spacing: -1.5px;
    }


    .product-hero-number {
        display: none;
    }


    .product-detail-visual {
        height: 400px;

        border-radius:
            40px 4px 4px 4px;
    }


    .product-detail-badge {
        right: 18px;
        bottom: 18px;
    }


    .product-features {
        padding: 60px 0;
    }


    .product-feature-card {
        min-height: auto;

        padding: 30px 25px;
    }


    .product-cta-inner h2 {
        font-size: 27px;
    }


    .product-cta-button {
        width: 100%;
    }

}

/* =====================================================
   COLOURS SHADES RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .shade-hero {
        padding:
            75px 0 55px;
    }


    .shade-section {
        padding:
            70px 0 85px;
    }


    .shade-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 767.98px) {

    .shade-hero-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .shade-hero h1 {
        font-size: 54px;

        letter-spacing: -2.5px;
    }


    .shade-item {
        min-height: 325px;

        padding:
            38px 20px 32px;
    }

}


@media (max-width: 575.98px) {

    .shade-hero {
        padding:
            60px 0 45px;
    }


    .shade-hero h1 {
        font-size: 45px;

        letter-spacing: -2px;
    }


    .shade-section {
        padding:
            50px 0 65px;
    }


    .shade-grid {
        grid-template-columns: 1fr;
    }


    .shade-item {
        min-height: 310px;

        padding:
            35px 20px;
    }


    .shade-diamond-wrap {
        height: 115px;

        margin-bottom: 20px;
    }


    .shade-diamond {
        width: 76px;
        height: 76px;
    }


    .shade-info h2 {
        font-size: 17px;
    }

}

/* =====================================================
   ZINCOVIT RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .zincovit-hero {
        min-height: 500px;
    }


    .zincovit-content {
        max-width: 700px;

        margin-bottom: 20px;
    }


    .zincovit-visual {
        height: 550px;
    }

}


@media (max-width: 767.98px) {

    .zincovit-hero {
        min-height: 440px;
    }


    .zincovit-hero-content h1 {
        font-size: 70px;

        letter-spacing: -3px;
    }


    .zincovit-visual {
        height: 480px;

        border-radius:
            50px 4px 4px 4px;
    }

}


@media (max-width: 575.98px) {

    .zincovit-hero {
        min-height: 390px;
    }


    .zincovit-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5,24,39,0.94),
                rgba(5,24,39,0.58)
            );
    }


    .zincovit-hero-content h1 {
        font-size: 55px;

        letter-spacing: -2.5px;
    }


    .zincovit-visual {
        height: 400px;

        border-radius:
            40px 4px 4px 4px;
    }


    .zincovit-visual-tag {
        left: 18px;
        bottom: 18px;

        min-width: 160px;

        padding: 16px 19px;
    }

}

/* =====================================================
   OTHER PRODUCTS RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .others-hero {
        min-height: 500px;
    }


    .other-product-card {
        min-height: 330px;
    }


    .other-products-visual {
        height: 470px;
    }

}


@media (max-width: 767.98px) {

    .others-hero {
        min-height: 440px;
    }


    .others-hero-content h1 {
        font-size: 55px;

        letter-spacing: -2.5px;
    }


    .other-products-visual-section {
        padding-bottom: 75px;
    }


    .other-products-visual {
        height: 430px;
    }


    .other-products-visual-content {
        left: 30px;
        bottom: 30px;
    }


    .other-products-visual-content h2 {
        font-size: 34px;
    }

}


@media (max-width: 575.98px) {

    .others-hero {
        min-height: 390px;
    }


    .others-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 24, 39, 0.94),
                rgba(5, 24, 39, 0.57)
            );
    }


    .others-hero-content h1 {
        font-size: 46px;

        letter-spacing: -2px;
    }


    .other-product-card {
        min-height: 300px;

        padding: 30px 25px;
    }


    .other-product-icon {
        margin-bottom: 55px;
    }


    .other-product-card h3 {
        font-size: 26px;
    }


    .other-products-visual-section {
        padding-bottom: 60px;
    }


    .other-products-visual {
        height: 380px;
    }


    .other-products-visual-content {
        left: 22px;
        right: 22px;
        bottom: 25px;
    }


    .other-products-visual-content h2 {
        font-size: 28px;
    }

}

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

@media (max-width: 991.98px) {

    .contact-hero {
        padding:
            85px 0 65px;
    }


    .contact-hero-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .contact-info {
        max-width: 700px;
    }

    .contact-map {
        padding-bottom: 70px;
    }

    .contact-map-wrap {
        height: 400px;
    }

}


@media (max-width: 767.98px) {

    .contact-hero h1 {
        font-size: 55px;

        letter-spacing: -2.5px;
    }


    .contact-form-wrap {
        padding: 35px 28px;
    }


    .contact-map {
        padding-bottom: 50px;
    }

    .contact-map-wrap {
        height: 340px;
    }

}


@media (max-width: 575.98px) {

    .contact-hero {
        padding:
            65px 0 50px;
    }


    .contact-hero h1 {
        font-size: 43px;

        letter-spacing: -2px;
    }


    .contact-form-wrap {
        padding: 28px 20px;
    }


    .contact-form-heading h3 {
        font-size: 25px;
    }


    .contact-submit-btn {
        width: 100%;
    }


    .contact-form-note {
        display: flex;

        margin:
            12px 0 0;

        justify-content: center;
    }


    .contact-whatsapp-btn {
        width: 100%;

        justify-content: center;
    }


    .contact-map {
        padding-bottom: 60px;
    }


    .contact-map-placeholder {
        min-height: 250px;
    }

}

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

@media (max-width: 991.98px) {

    .video-hero {
        min-height: 760px;
    }


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

        padding:
            150px 0 150px;
    }


    .video-hero-content h1 {
        font-size: 68px;

        letter-spacing: -3px;
    }


    .video-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 20, 33, 0.92),
                rgba(4, 20, 33, 0.60)
            );
    }

}


@media (max-width: 767.98px) {

    .video-hero {
        min-height: 700px;
    }


    .video-hero-content {
        padding:
            125px 0 145px;
    }


    .video-hero-content h1 {
        font-size: 54px;

        letter-spacing: -2.5px;
    }


    .video-hero-content > p {
        max-width: 450px;

        font-size: 13px;
    }


    .video-hero-bottom-inner {
        min-height: 85px;
    }

}


@media (max-width: 575.98px) {

    .video-hero {
        min-height: 670px;
    }


    .video-hero-video {
        object-position: 58% center;
    }


    .video-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 20, 33, 0.92) 0%,
                rgba(4, 20, 33, 0.73) 65%,
                rgba(4, 20, 33, 0.52) 100%
            );
    }


    .video-hero-content {
        padding:
            115px 0 140px;
    }


    .video-hero-eyebrow {
        font-size: 9px;
    }


    .video-hero-content h1 {
        max-width: 390px;

        font-size: 45px;

        line-height: 1.02;

        letter-spacing: -2px;
    }


    .video-hero-content > p {
        max-width: 350px;

        margin-bottom: 28px;

        font-size: 12px;

        line-height: 1.7;
    }


    .video-hero-actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    /* Bottom */

    .video-hero-bottom-inner {
        min-height: 82px;
    }


    .video-hero-experience > strong {
        font-size: 32px;
    }


    .video-hero-experience small {
        display: none;
    }


    .video-hero-scroll {
        font-size: 0;

        gap: 0;
    }


    .video-scroll-line {
        width: 35px;
    }

}