@media (max-width: 1199.98px) {
    body {
        font-size: var(--f14);
        line-height: 1.6;
        padding-top: 170px;
    }
    .f16 {
        font-size: var(--f14);
    }
    .logoAbs {
        position: static;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 180px;
    }

    .logoAbs img {
        width: 100%;
    }
    .navBarMain {
        position: fixed;
        top: 138px;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
        gap: var(--gap20);
        padding: var(--gap20);
        display: none;
        background-color: var(--headerBg);
        height: calc(100% - 138px);
    }
    .navBarMain.show {
        display: flex;
    }
    header.twoStepHeader {
        height: auto;
    }
    .bannerTitle {
        font-size: var(--f48);
        line-height: 86px;
    }
    .bannerTitle span {
        font-size: var(--f70);
    }
    .commanTitlepill {
        font-size: var(--f12);
    }
    .commanSectionSubtitle {
        font-size: var(--f16);
    }
    .btn.big {
        font-size: var(--f16);
        ;
        padding: var(--gap12) var(--gap30);
    }
    .gap40 {
        gap: var(--gap25);
    }
    .gap50 {
        gap: var(--gap38);
    }
    .commanSectionTitle {
        font-size: var(--f32);
    }
    .commanSectionTitle.f45 {
        font-size: var(--f36);
    }
    .gap30,
    .twoSection.gap30 {
        gap: var(--gap25);
    }
    .f18 {
        font-size: var(--f16);
    }
    .pb70 {
        padding-bottom: calc(var(--gap50) + var(--gap5));
    }
    .gap60 {
        gap: calc(var(--gap50) - var(--gap5));
    }
    .g5rem {
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 2.5rem;
    }
    main {
        gap: var(--gap70);
    }
    .gap100,
    .twoSection.gap100 {
        gap: var(--gap70);
    }
    .twoSection.gap100.twoSectionRes,
    .twoSection.twoSectionRes {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap25);
    }
    .resCommonTitleWidth {
        width: 75%;
    }
    .absLeftBox,
    .absRightBox {
        display: none !important;
    }
    body.twoHeader {
        padding-top: 180px;
    }
    .gap70 {
        gap: var(--gap50);
    }
    .gap50ResTeb {
        gap: var(--gap50) !important;
    }
    .sectionTopGap0 {
        margin-top: -70px;
    }
    .threeSection {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap40);
    }
    .testimonialCard .testimonialWrtierMain,
    .testimonialCard .testimonialTop,
    .p30 {
        padding: var(--gap20);
    }
    .fourCards {
        grid-template-columns: repeat(4, 1fr);
    }
    .blackSection {
        padding-top: var(--gap50);
        padding-bottom: var(--gap50);
    }
    .h60w60 {
        height: var(--gap50);
        width: var(--gap50);
    }
    .f36 {
        font-size: var(--f26);
    }
    .py20 {
        padding-top: var(--gap15);
        padding-bottom: var(--gap15);
    }
    .p25 {
        padding: var(--gap20);
    }
    .px25 {
        padding-right: var(--gap20);
        padding-left: var(--gap20);
    }
    .accordion-body table tbody tr {
        display: flex;
        flex-wrap: wrap;
    }
    .accordion-body table tbody tr td:first-child {
        width: 100% !important;
    }
    .accordion-body table tbody tr td {
        flex-grow: 1;
        width: auto !important;
    }
    .sectionTopGap-40 {
        margin-top: -10px;
    }
    header.searviceDetailHeader {
        height: auto;
    }
    .regularAutomaticUpdatesItems::after,
    .regularAutomaticUpdatesItems:nth-child(2)::after {
        content: none;
    }
    .py120 {
        padding: var(--gap70) 0;
    }
    .py70py60 {
        padding: var(--gap25) var(--gap30);
    }
    .accordion-white .accordion-white .accordion-item {}
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    .f65 {
        font-size: var(--f45);
    }
    .f30,
    .commanSectionTitle.f30 {
        font-size: var(--f28);
    }
    .twoSection {
        gap: var(--gap50);
    }
    .h140w140 {
        height: var(--gap100);
        width: var(--gap100);
    }
    .gutterRes0,
    .gutter70.gutterRes0 {
        --bs-gutter-y: var(--gap50);
        --bs-gutter-x: var(--gap50);
    }
    .logisticPlanCard .logisticPlanMain {
        padding-left: var(--gap38);
        padding-right: var(--gap38);
        padding-bottom: var(--gap25) !important;
    }
    .testimonialCard .testimonialTop .QuoteImg {
        height: var(--gap40);
        width: var(--gap40);
        right: 20px;
        top: 20px;
    }
    .testimonialCard .testimonialTop .companyLogo {
        height: var(--gap30);
    }
    .regularAutomaticUpdatesImages {
        width: 180px;
        height: 180px;
    }
    .searviceDetailHeader .CipherCrmLogo {
        width: 270px;
    }
    .searviceDetailHeader .logo-page-title {
        left: 90px;
        font-size: var(--f15);
    }
    .contactButton,
    .commonThemButton.btnSm,
    .blackButton.btnSm,
    .commonThemButton {
        padding: var(--gap15) var(--gap30);
        font-size: var(--f18);
    }
    .commonThemButton.btnSm {
        padding: 14px var(--gap30);
        font-size: var(--f16);
    }
    .commonThemButton.px50 {
        padding-left: var(--gap35) !important;
        padding-right: var(--gap35) !important;
    }
    .commanSectionSubtitle.f20,
    .f20 {
        font-size: var(--f18);
    }
    .pt15Res {
        padding-top: var(--gap15);
    }
    .pb15Res {
        padding-bottom: var(--gap15) !important;
    }
    .inputFromMain .formInput input,
    .inputFromMain .formInput textarea {
        padding: var(--gap14) !important;
    }
    .inputFromMain .formInput input {
        padding-left: 44px !important;
    }
    .commonThemButton .h28w28 img {
        width: 100%;
        height: 100%;
    }
    .gap20 {
        gap: var(--gap15);
    }
    .pt120pb70 {
        padding: var(--gap70) 0 var(--gap50) 0;
    }
    .h80w80 {
        height: var(--gap70);
        width: var(--gap70);
    }
    .gap30,
    .gap30.threeSection {
        gap: var(--gap20);
    }
    .gap15 {
        gap: var(--gap12);
    }
    .max-w70 {
        min-width: var(--gap50);
        max-width: var(--gap50);
        padding: 0;
    }
    .h28w28 {
        height: var(--gap25);
        width: var(--gap25);
    }
    .gap5TabRes {
        gap: var(--gap5);
    }
    .logisticPlanCard.bg-white ul li {
        font-size: var(--f16);
    }
    .logisticPlanCard ul li,
    .logisticPlanCard ul p {
        font-size: var(--f15);
    }
    .zigzagDetail ul,
    .zigzagDetail ol {
        gap: var(--gap5);
    }
    .gap25 {
        gap: var(--gap20);
    }
    .accordion-white .accordion-white .accordion-button {
        padding: var(--gap15) var(--gap20);
    }
    .accordion-white .accordion {
        margin-top: -10px;
    }
    .accordion-body.f16 {
        font-size: var(--f15);
    }
    .gap25ResTeb {
        gap: var(--gap25);
    }
    .gap5ResTeb {
        gap: var(--gap5);
    }
    .gap120 {
        gap: var(--gap70);
    }
    .table>:not(caption)>*>*{
        padding-left: var(--gap20);
    }
    #logisticsmagichappen{
        background-size: 100%;
        padding-bottom: 100px;
    }
    .anniversaryLogoMain {
        top: -92px;
        transform: rotate(-8deg) scale(0.7);
    }
}
@media (max-width: 991.98px) {
    body {
        font-size: var(--f14);
        line-height: 1.6;
        padding-top: 130px;
        padding-bottom: 70px;
    }
    .f16 {
        font-size: var(--f14);
    }
    .btn {
        padding: var(--gap8) var(--gap20);
    }
    .navBarMain {
        top: 154px;
        height: calc(100% - 154px);
    }
    .topHeader {
        font-size: var(--f12);
    }
    .gap15 {
        gap: var(--gap10);
    }
    .bannerTitle {
        font-size: var(--f32);
        line-height: 48px;
    }
    .bannerTitle span {
        font-size: var(--f40);
    }
    .commanTitlepill {
        font-size: 10px;
        padding: var(--gap8) var(--gap10);
    }
    .commanSectionSubtitle {
        font-size: var(--f16);
    }
    .btn.big {
        padding: 14px var(--gap30);
        font-size: var(--f16);
    }
    .gap40 {
        gap: var(--gap20);
    }
    .gap50 {
        gap: var(--gap30);
    }
    .commanSectionTitle {
        font-size: var(--f22);
    }
    .commanSectionTitle.f45 {
        font-size: var(--f28);
    }
    .gap30,
    .twoSection.gap30 {
        gap: var(--gap20);
    }
    .f18 {
        font-size: var(--f16);
    }
    .twoSection {
        grid-template-columns: repeat(1, 1fr);
    }
    .pb70 {
        padding-bottom: 42px;
    }
    .gap60 {
        gap: 28px;
    }
    .g5rem {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }
    main {
        gap: var(--gap50);
    }
    body.twoHeader {
        padding-top: 180px;
    }
    .gap10 {
        gap: var(--gap8);
    }
    .gap100 {
        gap: var(--gap40);
    }
    .playVideoButton {
        height: var(--gap100);
        width: var(--gap100);
    }
    .playVideoButton span,
    .playVideoButton span::after,
    .playVideoButton span::before {
        width: var(--gap12);
        height: var(--gap12);
    }
    .gap70 {
        gap: var(--gap30);
    }
    .swiperSection {
        padding-top: var(--gap40);
        padding-bottom: var(--gap25);
        padding-left: var(--gap15);
        padding-right: var(--gap15);
    }
    .py50 {
        padding: var(--gap30) 0;
    }
    .twoSection.gap100.twoSectionRes,
    .gap30.resCommonTitleWidth {
        gap: var(--gap8);
    }
    .resCommonTitleWidth {
        width: 100%;
    }
    .threeSection {
        grid-template-columns: repeat(1, 1fr);
    }
    .sectionTopGap0 {
        margin-top: -50px;
    }
    .py70 {
        padding: var(--gap50) 0;
    }
    .p25 {
        padding: var(--gap20);
    }
    .px25 {
        padding-right: var(--gap20);
        padding-left: var(--gap20);
    }
    .testimonialCard .testimonialWrtierMain,
    .testimonialCard .testimonialTop,
    .p30 {
        padding: var(--gap20);
    }
    .f30,
    .commanSectionTitle.f30 {
        font-size: var(--f22);
    }
    .fourCards {
        grid-template-columns: repeat(1, 1fr);
    }
    .fourCards.fourCardsRes4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .fourCards.fourCardsRes2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .resTwoCards,
    .fourCards.resTwoCards {
        grid-template-columns: repeat(2, 1fr);
    }
    .blackSection {
        padding-top: var(--gap40);
        padding-bottom: var(--gap40);
    }
    .h60w60 {
        height: var(--gap50);
        width: var(--gap50);
    }
    .searviceDetailHeader .CipherCrmLogo {
        width: 160px;
    }
    .searviceDetailHeader .logo-page-title {
        left: 52px;
        bottom: 0px;
        font-size: var(--f9);
    }
    .contactButton {
        padding: var(--gap15) var(--gap20);
        font-size: var(--f18);
        justify-content: center;
    }
    .f65 {
        font-size: var(--f30);
    }
    .f20 {
        font-size: var(--f18);
    }
    .gutterRes0,
    .gutter70.gutterRes0 {
        --bs-gutter-y: 0;
        --bs-gutter-x: 0;
    }
    .inputFromMain .formInput input,
    .inputFromMain .formInput textarea {
        padding: var(--gap14) !important;
    }
    .inputFromMain .formInput input {
        padding-left: 44px !important;
    }
    .f12 {
        font-size: var(--f11);
    }
    .commonThemButton.btnSm {
        padding: var(--gap14) var(--gap30);
        font-size: var(--f16);
    }
    .commonThemButton.px50 {
        padding-left: var(--gap30) !important;
        padding-right: var(--gap30) !important;
    }
    .pt120pb70 {
        padding: var(--gap50) 0 var(--gap50) 0;
    }
    .gapRes0 {
        gap: 0 !important;
    }
    .gapRes10 {
        gap: var(--gap10) !important;
    }
    .twoSection.gap50 {
        gap: var(--gap25);
    }
    .twoSection {
        grid-template-columns: repeat(1, 1fr);
    }
    .gap20 {
        gap: var(--gap10);
    }
    .gapRes20 {
        gap: var(--gap20) !important;
    }
    .py120 {
        padding: var(--gap50) 0;
    }
    .logisticPlanCard.bg-white ul li {
        font-size: var(--f16);
    }
    .logisticPlanCard .logisticPlanMain {
        padding-left: var(--gap20);
        padding-right: var(--gap20);
        padding-bottom: var(--gap5);
        padding-top: var(--gap5);
    }
    .commonThemButton {
        font-size: var(--f18);
    }
    .num1,
    .num2 {
        font-size: 80px;
        left: 0;
        top: -25px;
    }
    .regularAutomaticUpdatesImages {
        width: 180px;
        height: 180px;
        padding: var(--gap8);
    }
    .sectionTopGap0.sectionResTopGap0 {
        margin-top: 0px;
    }
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        gap: 0;
    }
    .whiteShadow {
        height: 35px;
        background: transparent;
        position: static;
    }
    footer .searviceDetailHeader {
        padding-top: var(--gap25);
        padding-bottom: var(--gap25);
    }
    .bannerTitleGradient {
        line-height: 1.3;
    }
    .gap5 {
        gap: var(--gap3);
    }
    .h20w20 {
        height: var(--gap18);
        width: var(--gap18);
    }
    .container {
        padding-right: var(--gap15);
        padding-left: var(--gap15);
    }
    .h80w80 {
        height: calc(var(--gap70) - var(--gap10));
        width: calc(var(--gap70) - var(--gap10));
    }
    .h80w80 img {
        width: 50%;
        height: 50%;
    }
    .twoSection,
    .twoSection.twoSectionRes {
        gap: var(--gap30);
        grid-template-columns: repeat(1, 1fr);
    }
    .accordion-white .accordion-button:not(.collapsed)::after,
    .accordion-white .accordion-button::after {
        background-size: 16px;
        margin-top: 8px;
        margin-bottom: auto;
        top: -8px;
    }
    .accordion-white .accordion-button::after {
        margin-bottom: auto;
        margin-top: var(--gap12);
    }
    .gap12 {
        gap: var(--gap8);
    }
    .pe0Res {
        padding-right: 0 !important;
    }
    .pt0Res {
        padding-top: 0 !important;
    }
    .pb0Res {
        padding-bottom: 0 !important;
    }
    .ps0Res {
        padding-left: 0 !important;
    }
    .mt30Res {
        margin-top: var(--gap30);
    }
    .gap30Res {
        gap: var(--gap30);
    }
    .fullWithSpaceRemove {
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0 !important;
        margin-bottom: -35px;
        border-color: transparent;
    }
    .gutter30X25 {
        --bs-gutter-y: var(--gap25);
        --bs-gutter-x: var(--gap25);
    }
    .pb25.gutter30X25.row {
        padding-top: var(--gap25);
    }
    .inputFromMain .formInput .inputIcon.h20w20 {
        width: var(--gap20);
        height: var(--gap20);
    }
    .commonThemButton .h28w28 img {
        width: 100%;
        height: 100%;
    }
    .f14Res {
        font-size: var(--f14);
    }
    .gap50Res {
        gap: var(--gap50);
    }
    .testimonialCard .testimonialTop .QuoteImg {
        position: absolute;
        top: 20px;
        right: 20px;
        height: var(--gap40);
        width: var(--gap40);
    }
    .gap15Res {
        gap: var(--gap15) !important;
    }
    .gap5Res {
        gap: var(--gap5) !important;
    }
    .h18w18Res {
        height: var(--gap18);
        width: var(--gap18);
    }
    .testimonialCard .testimonialWrtierMain .writerImg {
        height: var(--gap40);
        width: var(--gap40);
    }
    .f14 {
        font-size: var(--f12);
    }
    .testimonialCard .testimonialTop .companyLogo,
    .commanCompanyLogo,
    .logosSwiper .swiper-slide img {
        height: var(--gap30);
        width: auto;
    }
    .zigzagDetail ul,
    .zigzagDetail ol {
        gap: var(--gap5);
        margin-bottom: 0;
    }
    p {
        margin-bottom: var(--gap10);
    }
    .zigzagDetail ul li::after,
    .zigzagDetail ol li::after {
        height: var(--gap12);
    }
    .gap25 {
        gap: var(--gap20);
    }
    .pt15Res {
        padding-top: var(--gap15);
    }
    .pb15Res {
        padding-bottom: var(--gap15) !important;
    }
    .f16Res {
        font-size: var(--f16);
    }
    .f24 {
        font-size: var(--f20);
    }
    .masonryItems {
        display: inline-block;
        margin: 0 0 var(--gap15);
    }
    .py70py60 {
        padding: var(--gap20);
    }
    .accordion-white .accordion {
        margin-top: -10px;
        gap: var(--gap15);
    }
    .w100Res {
        width: 100%;
    }
    .gapRes40 {
        gap: var(--gap40);
    }
    .h150w150.h150w150Res {
        width: 150px;
        height: 150px;
    }
    .headerSectionArrowRight {
        width: 0;
        flex-grow: 1;
        max-width: 160px;
        display: none;
    }
    .gap120 {
        gap: var(--gap50);
    }
    .zigzagSction:nth-child(even) .zigzagImage {
        order: 1;
    }
    .zigzagSction:nth-child(even) .zigzagDetail {
        order: 2;
    }
    .logisticLogoBox {
        border-left: none !important;
        border-bottom: 1px solid var(--logisticcommanborder) !important;
        border-right: 1px solid var(--logisticcommanborder) !important;
    }
    .logisticLogosSwiper {
        border-left: 1px solid var(--logisticcommanborder) !important;
    }
    .fourCards.swiper-wrapper,
    .threeSection.swiper-wrapper {
        grid-template-columns: none;
        display: flex;
        gap: 0 !important;
    }
    .commanCompanyLogo,
    .logosSwiper .swiper-slide img {
        height: var(--gap30);
    }
    .p15Res {
        padding: var(--gap15) !important;
    }
    .mb10Res {
        margin-bottom: var(--gap10);
    }
    .featureCard {
        border: 1px solid var(--logisticcommanborder);
        border-radius: var(--radius10);
        overflow: hidden;
    }
    .featureCard.logositcFeatureCard .featureImage {
        border-radius: 0;
    }
    .vsDiv {
        position: static;
        left: auto;
        top: auto;
        transform: translate(0, 0);
        justify-content: center;
        margin: auto;
    }
    .logisticPlanCard.white8Bg {
        margin-bottom: -40px;
        padding-bottom: var(--gap35);
    }
    .logisticPlanCard.bg-white {
        margin-top: -40px;
        padding-top: var(--gap35);
    }
    .zigzagSction {
        position: relative;
    }
    .zigzagSection:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -46px;
        left: -15px;
        height: 1px;
        width: calc(100% + 30px);
        background-color: var(--logisticcommanborder);
    }
    .gapRes100 {
        gap: var(--gap100) !important;
    }
    .contactNumberButton {
        position: fixed;
        bottom: 0;
        padding: var(--gap15);
        left: 0;
        background: var(--color-white);
        z-index: 3;
    }
    body header.searviceDetailHeader {
        border-bottom: 1px solid var(--logisticcommanborder);
        height: auto;
        padding-top: var(--gap15);
        padding-bottom: var(--gap15);
    }
    .inputFromMain form.needs-validation.logisticbannerform {
        margin-top: var(--gap10);
    }
    .table>:not(caption)>*>*{
        padding-left: var(--gap20);
    }
    #logisticsmagichappen {
        background-size: 100%;
        padding-bottom: 60px;
    }
    .anniversaryLogoMain {
        top: -78px;
        transform: rotate(-8deg) scale(0.7);
    }
    .gutter70{
        --bs-gutter-x: 0;
        --bs-gutter-y: var(--gap30);
    }
    .gutter30 {
        --bs-gutter-y: var(--gap15);
        --bs-gutter-x: 0;
    }
}

@media (max-width: 500.98px) {
    #logisticsmagichappen {
        background-size: 100%;
        padding-bottom: 30px;
    }
}