/* ==================== [ 1700px Start ] ==================== */
@media (max-width: 1700px) {

    /* ==================== [ Space Armour Start ] ==================== */
    .space-armour .space-container {
        margin-left: 0;
        max-width: calc(100% - 100px);
    }

    .space-armour .space-container .image {
        width: 600px;
        height: 390px;
    }

    /* ==================== [ Space Armour End ] ==================== */
}

/* ==================== [ 1700px End ] ==================== */

/* ==================== [ 1600px Start ] ==================== */
@media (min-width: 1600px) {

    /* ==================== [ Common Start ] ==================== */
    .container-fluid,
    .container {
        max-width: calc(1520px + 40px);
    }

    /* ==================== [ Common End ] ==================== */
}

/* ==================== [ 1600px End ] ==================== */

/* ==================== [ 1599px Start ] ==================== */
@media (max-width: 1599px) {

    /* ==================== [ Space Armour Start ] ==================== */
    .space-armour .space-container {
        max-width: calc(100% - 100px);
    }

    .space-armour .space-container .image {
        width: 520px;
        height: 320px;
    }

    .space-armour .space-container .title * {
        margin-bottom: 60px;
    }

    .space-armour .space-container .title * {
        font-size: 40px;
    }

    /* ==================== [ Space Armour End ] ==================== */


    /* ==================== [ Working Together Start ] ==================== */
    .working-together .card {
        padding: 40px 20px;
    }

    .working-together .card .partner-logo {
        width: 90%;
        margin: 0 auto;
    }

    /* ==================== [ Working Together End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer .w-1720 {
        max-width: 1400px;
        width: 100%;
    }

    .footer .container {
        padding-inline: 80px;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 1599px End ] ==================== */

/* ==================== [ 1499px Start ] ==================== */
@media (max-width: 1499px) {

    /* ==================== [ Briefing Center Start ] ==================== */
    .briefing-center .briefing-rocket {
        transform: translateY(calc(-50% + 23px));
    }

    /* ==================== [ Briefing Center End ] ==================== */
}

/* ==================== [ 1499px End ] ==================== */

/* ==================== [ 1399px Start ] ==================== */
@media (max-width: 1399px) {

    /* ==================== [ Extra Common Start ] ==================== */
    .section-spacing-150 {
        padding: 120px 0;
    }

    .section-spacing-150-75 {
        padding: 120px 0 60px;
    }

    .section-spacing-75-150 {
        padding: 60px 0 120px;
    }

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Error 404 Start ] ==================== */
    .error-404 {
        margin-top: 83px;
        padding: 120px 0;
    }

    /* ==================== [ Error 404 End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header .navbar-expand-lg .navbar-nav .nav-link {
        padding: 28px 0;
    }

    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner {
        padding-top: 83px;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ Space Armour Start ] ==================== */
    .space-armour {
        position: relative;
        padding: 120px 0;
    }

    .space-armour .space-container {
        max-width: calc(100% - 100px);
    }

    .space-armour .space-container .image {
        width: 450px;
        height: 320px;
    }

    .space-armour .space-container .title * {
        margin-bottom: 50px;
    }

    /* ==================== [ Space Armour End ] ==================== */

    /* ==================== [ The Three Pillars Start ] ==================== */
    .three-pillars .pillars-container .ring * {
        object-fit: contain;
    }

    /* ==================== [ The Three Pillars End ] ==================== */

    /* ==================== [ Enterprise Grade Start ] ==================== */
    .enterprise-grade .enterprise-container {
        padding-top: 120px;
    }

    /* ==================== [ Enterprise Grade End ] ==================== */

    /* ==================== [ Powered by Start ] ==================== */
    .powered-by {
        padding-top: 120px;
    }

    .powered-by .content .disc * {
        font-size: 24px;
    }

    /* ==================== [ Powered by End ] ==================== */

    /* ==================== [ The Edge of Space Start ] ==================== */
    .edge-space {
        padding-block: 120px;
    }

    .edge-space .card-container {
        margin: 0 auto 70px;
    }

    /* ==================== [ The Edge of Space End ] ==================== */

    /* ==================== [ Use Cases Start ] ==================== */
    .use-cases {
        margin-bottom: 100px;
    }

    /* ==================== [ Use Cases End ] ==================== */

    /* ==================== [ Briefing Center Start ] ==================== */
    .briefing-center .briefing-rocket {
        transform: translateY(calc(-50% + 18px));
    }

    .briefing-center .briefing-main {
        padding: 150px 0;
    }

    /* ==================== [ Briefing Center End ] ==================== */

    /* ==================== [ Working Together Start ] ==================== */
    .working-together .card {
        padding: 34px 20px;
    }

    /* ==================== [ Working Together End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer {
        padding-inline: 30px;
    }

    .footer .w-1720 {
        max-width: 1230px;
        width: 100%;
    }

    .footer .f-info-block {
        max-width: 400px;
        width: 100%;
        padding: 50px 0;
    }

    .footer .container {
        padding-inline: 60px;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 1399px End ] ==================== */

/* ==================== [ 1299px Start ] ==================== */
@media (max-width: 1299px) {

    /* ==================== [ Typography Start ] ==================== */
    h1 {
        font-size: 50px !important;
    }

    h2 {
        font-size: 40px !important;
    }

    h3 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 26px;
    }

    h5 {
        font-size: 20px;
    }

    h6 {
        font-size: 18px;
    }

    /* ==================== [ Typography End ] ==================== */

    /* ==================== [ Common Heading Start ] ==================== */
    .heading .title * {
        font-size: 40px !important;
    }

    .heading .disc * {
        font-size: 20px;
    }

    .heading .subtitle * {
        font-size: 26px;
    }

    /* ==================== [ Common Heading End ] ==================== */
}

/* ==================== [ 1299px Start ] ==================== */

/* ==================== [ 1199px Start ] ==================== */
@media (max-width: 1199px) {

    /* ==================== [ Extra Common Start ] ==================== */
    .section-spacing-150 {
        padding: 100px 0;
    }

    .section-spacing-150-75 {
        padding: 100px 0 50px;
    }

    .section-spacing-75-150 {
        padding: 50px 0 100px;
    }

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Error 404 Start ] ==================== */
    .error-404 {
        margin-top: 83px;
        padding: 100px 0;
    }

    /* ==================== [ Error 404 End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header .navbar {
        padding: 0px 0;
    }

    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Space Armour Start ] ==================== */
    .space-armour {
        position: relative;
        padding: 100px 0;
    }

    .space-armour .space-container {
        flex-direction: column-reverse;
        gap: 10px;
        align-items: flex-start;
    }

    .space-armour .space-container .image {
        width: 450px;
        height: 280px;
    }

    .space-armour .space-container .title * {
        margin-bottom: 40px;
    }

    .space-armour .space-container .heading {
        text-align: start;
    }

    .space-armour .space-container .disc * {
        max-width: 100%;
        padding-left: 0px;
    }

    /* ==================== [ Space Armour End ] ==================== */

    /* ==================== [ The Three Pillars Start ] ==================== */
    .three-pillars .card .card-title * {
        margin-bottom: 35px;
    }

    /* ==================== [ The Three Pillars End ] ==================== */

    /* ==================== [ Enterprise Grade Start ] ==================== */
    .enterprise-grade .enterprise-container {
        padding-top: 100px;
    }

    .enterprise-grade .card-container:nth-child(2) {
        max-width: 80%;
    }

    /* ==================== [ Enterprise Grade End ] ==================== */

    /* ==================== [ Powered by Start ] ==================== */
    .powered-by {
        padding-top: 100px;
    }

    /* ==================== [ Powered by End ] ==================== */

    /* ==================== [ The Edge of Space Start ] ==================== */
    .edge-space {
        padding-block: 100px 50px;
        margin-bottom: 40px;
    }

    .edge-space .card-container {
        margin: 0 auto 20px;
    }

    .edge-space .card-container:last-child {
        max-width: 100%;
    }

    /* ==================== [ The Edge of Space End ] ==================== */

    /* ==================== [ Use Cases Start ] ==================== */
    .use-cases {
        margin-bottom: 100px;
    }

    /* ==================== [ Use Cases End ] ==================== */

    /* ==================== [ Briefing Center Start ] ==================== */
    .briefing-center .briefing-container {
        max-width: 460px;
    }

    .briefing-center .briefing-main {
        padding: 100px 0;
    }

    /* ==================== [ Briefing Center End ] ==================== */


    /* ==================== [ Footer Start ] ==================== */
    .footer .f-top {
        flex-wrap: wrap;
    }

    .footer .container {
        padding-inline: 40px;
    }

    .footer .w-1720 {
        max-width: 1060px;
        width: 100%;
    }

    .footer .f-info-block {
        max-width: 100%;
        width: 100%;
    }

    .footer .f-location-block,
    .footer .f-link-block {
        max-width: calc(50% - 20px);
        width: 100%;
    }

    .footer .f-link-block {
        padding: 30px 0;
    }

    .footer .f-location-inner {
        max-width: 100%;
        width: 100%;
    }

    .footer .f-location-inner>* {
        padding-inline: 20px;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 1199px End ] ==================== */


/* ==================== [ 991px Start ] ==================== */
@media (max-width: 991px) {

    /* ==================== [ Root CSS Start ] ==================== */
    body {
        font-size: 18px;
    }

    /* ==================== [ Root CSS End ] ==================== */

    /* ==================== [ Typography Start ] ==================== */
    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 30px;
    }

    h4 {
        font-size: 26px;
    }

    h5 {
        font-size: 20px;
    }

    h6 {
        font-size: 18px;
    }

    /* ==================== [ Typography End ] ==================== */

    /* ==================== [ Common Heading Start ] ==================== */
    .heading .title * {
        font-size: 40px;
    }

    .heading .disc * {
        font-size: 20px;
    }

    .heading .subtitle * {
        font-size: 26px;
    }

    /* ==================== [ Common Heading End ] ==================== */

    /* ==================== [ Error 404 Start ] ==================== */
    .error-404 {
        margin-top: 60px;
        padding: 80px 0;
    }

    /* ==================== [ Error 404 End ] ==================== */

    /* ==================== [ Extra Common Start ] ==================== */
    .card .card-icon {
        width: 58px;
        height: 58px;
    }

    .card .card-icon .icon-inner * {
        max-width: 34px;
    }

    .section-spacing-150 {
        padding: 80px 0;
    }

    .section-spacing-150-75 {
        padding: 80px 0 40px;
    }

    .section-spacing-75-150 {
        padding: 40px 0 80px;
    }

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    body:has(.navbar-collapse.show) {
        overflow: hidden;
    }

    .header .navbar {
        padding: 12px 0;
    }

    /* .header .navbar::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        right: 48px;
        top: 0;
        background-color: var(--white-20);
    } */

    .header.move .navbar::before,
    .header .navbar:has(.navbar-collapse.show)::before {
        opacity: 0 !important;
    }

    .header .navbar-main {
        position: relative;
        z-index: 2;
    }

    .header .navbar-nav {
        position: relative;
        z-index: 5;
        margin-right: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;
        /* padding-top: 0; */
    }

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

    .header .navbar-brand {
        max-width: 176px;
    }

    .header .nav-item {
        margin-inline: 10px;
        text-align: center;
    }

    /* Hidden state */
    .header .navbar-collapse {
        position: fixed;
        inset: 0;
        height: 100vh;
        /* avoid dvh for animation */
        transform: translateY(-100%);
        transition: transform 0.4s ease-in-out;
        text-align: center;
        background: url(../images/thumb/home-banner.jpg) no-repeat 40% bottom #020305;
        background-size: cover;
        display: block !important;
        overflow: auto;
        overflow-x: clip;
        will-change: transform;
        backface-visibility: hidden;
        background-attachment: scroll;
        contain: layout paint;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Visible state */
    .header .navbar-collapse.show {
        transform: translateY(0);
        padding-top: 58px;
    }

    /* Lock body scroll when menu is open */
    .body-lock {
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    .header .navbar-collapse::after {
        position: absolute;
        content: "";
        top: 0px;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--white-15);
        z-index: 9;
    }

    .header .navbar-collapse::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32%;
        background: linear-gradient(180deg, rgba(2, 3, 5, 0.00) 10.82%, #020305 100%);
        z-index: 1;
        user-select: none;
        pointer-events: none;
    }

    .header .moon * {
        width: 100%;
        height: auto;
    }

    .header .navbar-expand-lg .navbar-nav .nav-link {
        display: block;
        padding: 18px 0 10px;
        margin-bottom: 8px;
        width: fit-content;
        margin: 0 auto 8px;
    }

    .header .nav-item:last-child {
        margin-right: 0px;
    }

    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner {
        padding-top: 60px;
    }

    .home-banner .banner-content {
        padding: 156px 0 320px;
        width: calc(100% - 48px);
        padding-right: 0px;
        margin-right: 48px;
    }

    .home-banner .banner-content .heading {
        max-width: 920px;
        margin-bottom: 50px;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ Space Armour Start ] ==================== */
    .space-armour {
        padding: 80px 0;
    }

    .space-armour .space-container {
        max-width: 100%;
    }

    .space-armour .space-container .image {
        width: 100%;
        height: auto;
        aspect-ratio: 388 / 272;
    }

    .space-armour .space-container .title * {
        margin-bottom: 40px;
    }

    /* ==================== [ Space Armour End ] ==================== */

    /* ==================== [ The Three Pillars Start ] ==================== */
    .three-pillars {
        padding-bottom: 331px;
    }

    .three-pillars .heading {
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .three-pillars .pillars-container .rocket {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        margin: 0 auto;
    }

    .three-pillars .pillars-container .ring {
        width: calc(100% + 40px);
        margin-left: -20px;
        height: auto;
        top: 50px;
    }

    .three-pillars .pillars-container .ring * {
        transform: scale(1.4) rotate(-15deg);
    }

    .three-pillars .card:first-child {
        margin-top: -30px;
        left: calc(100% - 300px);
        margin-bottom: 30px;
    }

    .three-pillars .card:last-child {
        left: calc(100% - 300px);
        margin-top: 30px;
    }

    .three-pillars .card .card-title * {
        margin-bottom: 30px;
    }

    /* ==================== [ The Three Pillars End ] ==================== */

    /* ==================== [ The Three Pillars Start ] ==================== */
    .technology {
        margin-top: -257px;
    }

    .technology .technology-container {
        border-radius: 30px;
        padding-block: 50px;
    }

    .technology .technology-inner-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .technology .contnent .title * {
        font-size: 20px;
    }

    .technology .contnent {
        max-width: 100%;
    }

    /* ==================== [ The Three Pillars End ] ==================== */

    /* ==================== [ Enterprise Grade Start ] ==================== */
    .enterprise-grade .enterprise-container {
        padding-top: 80px;
    }

    .enterprise-grade .card-group {
        display: none;
    }

    .enterprise-grade .card {
        max-width: 100%;
    }

    /* ==================== [ Enterprise Grade End ] ==================== */

    /* ==================== [ Powered by Start ] ==================== */
    .powered-by {
        padding-top: 80px;
    }

    .powered-by .powered-container {
        padding-block: 50px;
    }

    .powered-by .content {
        flex-direction: column;
        gap: 30px;
    }

    .powered-by .heading .title>* {
        text-align: center;
        margin-bottom: 20px;
    }

    .powered-by .heading .title br {
        display: block;
    }

    .powered-by .content .image-container .image-card * {
        max-width: 200px;
    }


    .powered-by .content .image-container .image-card {
        height: 130px;
    }

    .powered-by .content .disc * {
        font-size: 20px;
        text-align: center;
    }

    /* ==================== [ Powered by End ] ==================== */

    /* ==================== [ The Edge of Space Start ] ==================== */
    .edge-space {
        padding-block: 80px 40px;
        margin-bottom: 40px;
    }

    .edge-space .heading .title>* {
        margin-bottom: 26px;
    }

    .edge-space .space-image {
        width: 100%;
        height: auto;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .edge-space .space-image * {
        margin-top: -50px;
        width: 1418px;
        height: auto;
        object-fit: contain;
    }

    .edge-space .space-rocket {
        position: relative;
        top: unset;
        left: unset;
        bottom: unset;
        transform: unset;
        margin-top: -70px;
        margin-bottom: -50px;
        margin-inline: auto;
    }

    .edge-space .heading .disc>* {
        margin-bottom: 0;
    }

    /* ==================== [ The Edge of Space End ] ==================== */

    /* ==================== [ Use Cases Start ] ==================== */
    .use-cases {
        margin-bottom: 80px;
        overflow-x: clip;
    }

    /* ==================== [ Use Cases End ] ==================== */

    /* ==================== [ The Briefing Center Start ] ==================== */
    .briefing-center {
        overflow-x: clip;
    }

    .briefing-center .briefing-main {
        padding: 0px 0;
    }

    .briefing-center .briefing-rocket {
        position: relative;
        top: unset;
        transform: unset;
        left: unset;
        width: 100%;
        max-width: 991px;
        aspect-ratio: 991 / 784;
        height: auto;
        z-index: 1;
    }

    .briefing-center .heading .title * {
        margin-bottom: clamp(340px, 294.39px + 10.66vw, 400px);
        /* 340px, viewport: 428px -> 400px, viewport: 991px */
        text-align: center;
    }

    .briefing-center .briefing-container {
        max-width: 100%;
    }

    .briefing-center .briefing-bg * {
        object-position: center 40px;
    }

    .briefing-center .briefing-rocket {
        top: 50px;
    }

    .briefing-center .briefing-rocket * {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    /* ==================== [ The Briefing Center End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer .w-1720 {
        max-width: 840px;
        width: 100%;
    }

    .footer .f-info-block {
        padding: 40px 0 20px;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 991px End ] ==================== */


/* ==================== [ 767px Start ] ==================== */
@media (max-width: 767px) {

    /* ==================== [ Typography Start ] ==================== */
    p {
        font-size: 18px;
    }

    h1 {
        font-size: 40px !important;
    }

    h2 {
        font-size: 30px !important;
    }

    h3 {
        font-size: 26px !important;
    }

    h4 {
        font-size: 20px !important;
    }

    h5 {
        font-size: 20px !important;
    }

    h6 {
        font-size: 18px !important;
    }

    /* ==================== [ Typography End ] ==================== */

    /* ==================== [ Common Heading Start ] ==================== */
    .heading .title * {
        font-size: 30px !important;
    }

    .heading .disc * {
        font-size: 18px !important;
    }

    .heading .subtitle * {
        font-size: 20px !important;
    }

    /* ==================== [ Common Heading End ] ==================== */

    /* ==================== [ Extra Common Start ] ==================== */
    .section-spacing-150 {
        padding: 70px 0;
    }

    .section-spacing-150-75 {
        padding: 70px 0 35px;
    }

    .section-spacing-75-150 {
        padding: 35px 0 70px;
    }

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Space Armour Start ] ==================== */
    .space-armour {
        padding: 70px 0;
    }

    .space-armour .space-container .title * {
        margin-bottom: 20px;
    }

    /* ==================== [ Space Armour End ] ==================== */

    /* ==================== [ The Three Pillars Start ] ==================== */
    .technology .technology-container {
        border-radius: 30px;
        padding-block: 30px;
    }

    .technology .heading .title>* {
        margin-bottom: 55px;
    }

    /* ==================== [ The Three Pillars End ] ==================== */

    /* ==================== [ Enterprise Grade Start ] ==================== */
    .enterprise-grade .enterprise-container {
        padding-top: 70px;
    }

    /* ==================== [ Enterprise Grade End ] ==================== */

    /* ==================== [ Powered by Start ] ==================== */
    .powered-by {
        padding-top: 70px;
    }

    .powered-by .powered-container {
        padding-block: 30px;
    }

    .powered-by .content .disc * {
        font-size: 18px;
    }

    .powered-by .powered-container .moon {
        transform: rotate(161deg);
        top: 80px;
    }

    /* ==================== [ Powered by End ] ==================== */

    /* ==================== [ The Edge of Space Start ] ==================== */
    .edge-space {
        padding-block: 70px 40px;
        margin-bottom: 40px;
    }

    .edge-space .heading .title>* {
        margin-bottom: 20px;
    }

    .edge-space .card-container {
        flex-direction: column;
    }

    /* 
    .edge-space .space-rocket {
        position: absolute;
        top: 10.93%;
        left: 50%;
        bottom: auto;
    } */

    .edge-space .card {
        max-width: 100%;
        width: 100%;
    }

    /* ==================== [ The Edge of Space End ] ==================== */

    /* ==================== [ Use Cases Start ] ==================== */
    .use-cases {
        margin-bottom: 80px;
    }

    /* ==================== [ Use Cases End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer {
        padding-inline: 20px;
    }

    .footer .container {
        padding-inline: 20px;
    }

    .footer .f-location-block {
        max-width: calc(65% - 20px);
        width: 100%;
    }

    .footer .f-link-block {
        max-width: calc(35% - 20px);
        width: 100%;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 767px End ] ==================== */


/* ==================== [ 575px Start ] ==================== */
@media (max-width: 575px) {

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner {
        background: url(../images/thumb/home-banner.jpg) no-repeat 40% bottom;
        background-size: cover;
    }

    .home-banner .rocket {
        left: 12.3%;
        /* transform: rotate(0); */
    }


    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ Home Banner End ] ==================== */
    .space-armour .moon {
        right: -80px;
    }

    /* ==================== [ The Three Pillars Start ] ==================== */
    .three-pillars .pillars-container .ring {
        top: 50px;
    }

    .three-pillars .card {
        max-width: 100%;
    }

    .three-pillars .card:first-child {
        margin-top: -30px;
        left: 0;
        margin-bottom: 30px;
    }

    .three-pillars .card:last-child {
        left: 0;
        margin-top: 30px;
    }

    .three-pillars .card .card-title * {
        margin-bottom: 20px;
    }

    /* ==================== [ The Three Pillars End ] ==================== */

    /* ==================== [ Use Cases Start ] ==================== */
    .use-cases .card .card-icon {
        margin-bottom: 50px;
    }

    .use-cases .heading .title * {
        margin-bottom: 30px;
    }

    /* ==================== [ Use Cases End ] ==================== */

    /* ==================== [ Working Together Start ] ==================== */
    .working-together .swiper-slide-active {
        margin-top: -40px;
    }

    .working-together .swiper {
        padding-top: 40px;
    }

    .working-together .slider-btn-container {
        margin-top: -10px;
    }

    .working-together .heading .title * {
        margin-bottom: 30px;
    }

    /* ==================== [ Working Together End ] ==================== */

    /* ==================== [ Briefing Center Start ] ==================== */
    .briefing-center .card .card-icon {
        margin-bottom: 24px;
    }

    /* ==================== [ Briefing Center End ] ==================== */

    .enterprise-grade .heading .title * {
        max-width: 380px;
        width: 100%;
        margin-inline: auto;
        margin-bottom: 20px;
    }

    .enterprise-grade .moon {
        width: 120%;
        margin-left: -15%;
    }

    .enterprise-grade .rocket {
        left: unset;
        top: 30px;
        right: 10px;
    }

    /* ==================== [ Footer Start ] ==================== */
    .footer .f-top {
        flex-direction: column;
    }

    .footer .container {
        padding-inline: 0;
    }

    .footer .w-1720 {
        background-color: var(--dark);
    }

    .footer .f-location-block {
        max-width: calc(100% - 72px);
        width: 100%;
        margin: 0 auto;
    }

    .footer .f-link-block {
        max-width: 100%;
        width: 100%;
        padding: 0 0 40px 0;
    }

    .footer .f-info-block {
        align-items: center;
        padding: 40px 10px 0 10px;
        gap: 10px;
    }

    .footer .f-info-block .f-text {
        margin-bottom: 20px;
    }

    .footer .f-info-block .f-text * {
        text-align: center;
    }

    .footer .f-location-block .title * {
        font-size: 18px;
    }

    .footer .f-location-inner>* {
        padding-inline: 12px;
    }

    .footer .f-info-block .f-logo * {
        max-width: 200px;
        width: 100%;
    }

    .footer .f-bottom * {
        font-size: 18px;
        line-height: 130%;
    }

    .footer .f-bottom {
        padding: 30px 30px 40px;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 575px End ] ==================== */

/* ==================== [ 427px Start ] ==================== */
@media (max-width: 427px) {


    /* ==================== [ The Briefing Center Start ] ==================== */
    .briefing-center .heading .title * {
        margin-bottom: clamp(250px, -19.16px + 84.11vw, 340px);
        /* 250px, viewport: 320px -> 340px, viewport: 427px */
        text-align: center;
    }

    .briefing-center .briefing-bg * {
        object-position: center 70px;
    }

    .briefing-center .briefing-rocket {
        top: 70px;
    }

    .briefing-center .card .card-content {
        padding: 20px;
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
    }

    .briefing-center .card .card-content:nth-child(1),
    .briefing-center .card .card-content:nth-child(2),
    .briefing-center .card .card-content:nth-child(3),
    .briefing-center .card .card-content:nth-child(4) {
        padding: 20px;
        align-items: flex-start;
        text-align: start;
        border-right: 0;
        border-bottom: 1px solid var(--white-10);
    }

    .briefing-center .card .card-content:nth-child(4) {
        border-bottom: 0;
    }

    .briefing-center .briefing-container {
        padding: 10px;
    }

    /* ==================== [ The Briefing Center End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer .f-location-block {
        max-width: calc(100% - 40px);
    }

    .footer .f-link-block ul li *,
    .footer .f-info-block .f-text *,
    .footer .f-location-block .detail * {
        font-size: 18px;
    }

    .footer .f-bottom {
        padding: 20px;
    }

    .footer .f-link-block ul {
        gap: 20px;
    }

    /* ==================== [ Footer End ] ==================== */
}

/* ==================== [ 427px End ] ==================== */

/* ==================== [ Height - 550px Start ] ==================== */
@media (max-height: 450px) {
    .header .navbar-nav {
        justify-content: flex-start;
    }
}

/* ==================== [ Height - 550px End ] ==================== */