@media (max-width: 320px) {
  html {
    font-size: 50%;
  }
  .grid-two-cols {
    grid-template-columns: 1fr;
  }

  .grid-three-cols {
    grid-template-columns: 1fr;
  }

  .grid-four-cols {
    grid-template-columns: 1fr;
  }

  .grid-five-cols {
    grid-template-columns: 1fr;
  }
  .value-brand-box .grid-three-cols {
    grid-template-columns: 1fr;
  }
  .wrapper-heading {
    padding: 4rem 2rem;
  }
  .wrapper {
    padding: 4rem 2rem;
  }
}

@media (max-width: 480px) {
  /* Styles for small mobile devices */
  html {
    font-size: 50%; /* 1rem = 8px */
  }
}

@media (min-width: 320px) and (max-width: 768px) {
  /* Styles for tablets and small screens */
  html {
    font-size: 56.25%; /* 1rem = 9px */
  }
  .grid-two-cols {
    grid-template-columns: 1fr;
  }

  .grid-three-cols {
    grid-template-columns: 1fr;
  }

  .grid-four-cols {
    grid-template-columns: 1fr;
  }

  .grid-five-cols {
    grid-template-columns: 1fr;
  }
  .value-brand-box .grid-three-cols {
    grid-template-columns: 1fr;
  }
  .wrapper-heading {
    padding: 4rem 2rem;
  }
  .wrapper {
    padding: 4rem 2rem;
  }
  p {
    font-size: 1.4rem;
  }
  h5 {
    font-size: 1.8rem;
  }

  /* ======banner====== */

  .banner {
    background-image: url("assets/mobile-banner.png");
    width: 100%;
    background-size: cover;
    background-position: center;
    min-height: 80vh;
  }
  .banner-data {
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    text-align: center;
  }
  .banner .wrapper h1 {
    font-size: 2.8rem;
    line-height: 3rem;
    width: 70%;
    margin: 0 auto;
  }
  .banner .wrapper p {
    width: 90%;
    margin: 0 auto;
    font-size: 1.2rem;
  }
  /* =======right choice========= */
  .right-choice-left {
    width: 100%;
  }
  /* .right-choice-left h3 {
    font-family: "medium", sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 2.1rem;
  } */
  .desktop-rc-h3 {
    display: none;
  }
  .mobile-rc-h3 {
    display: block;
    font-family: "medium", sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 2.1rem;
  }
  .right-choice-right {
    align-items: flex-start;
    flex-direction: column;
  }
  .right-choice-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 4rem;
  }
  .right-choice-item a {
    padding-top: 0rem;
  }
  .right-choice-item h4 {
    font-family: "medium" !important;
    font-weight: 500;
  }
  /* =========overview========= */
  .overview-data h1 {
    font-size: 2.8rem;
    width: 96%;
  }
  .overview-para {
    max-width: 100%;
  }
  .Overview {
    background-size: 185%;
    background-position: 85% 100%;
    overflow: hidden;
    height: 85vh;
  }
  .overview-data {
    position: absolute;
    top: 0;
  }
  /* ======about===== */
  .about {
    min-height: 50vh;
  }
  .about-data {
    text-align: left;
    width: 100%;
    margin: 0 !important;
  }
  .fade-text {
    font-size: 2.1rem;
    width: 100%;
    text-align: justify;
  }
  .journey-text {
    font-size: 1.6rem !important;
    word-wrap: normal;
    width: 100%;
  }
  .fade-text span {
    display: inline !important; /* ✅ ab normal text ki tarah behave karega */
  }
  .journey-section {
    height: 15vh;
  }

  /* =========ethos======== */

  .ethos-data h2 {
    font-size: 2.8rem;
    width: 84%;
  }
  .gallery-content {
    margin-bottom: 0;
  }
  .gallery-category {
    font-size: 1.8rem;
  }
  .gallery-li {
    font-size: 1.4rem;
  }
 
  /* ======our leadership mobile===== */
  .leader-mobile {
    display: block;
  }
  .leader-mobile {
    position: relative;
    width: 100%;
  }
  .leader-heading h2 {
    font-size: 2.8rem;
    text-transform: uppercase;
    color: var(--dark-green);
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }
  .ml-img-box {
    position: relative;
  }
  .ml-img-box img {
    width: 100% !important;
    height: auto !important;
  }
  .mlip {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 3rem;
    color: var(--dark-green);
    background: var(--white);
    border-radius: 0.5rem;
    padding: 0.2rem;
    cursor: pointer;
    font-size: 2.2rem;
  }
  .ml-box h4 {
    font-size: 1.6rem;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    font-family: "medium", sans-serif;
    color: var(--dark-green);
  }
  .ml-box p {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--light-green);
  }
  .owl-theme .owl-dots .owl-dot span {
    width: 33px !important;
    height: 3px !important;
  }
  .owl-theme .owl-dots .owl-dot.active span,
  .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--dark-green) !important;
  }

  /* ======our leadership mobile hide===== */
  .leader-mobile-hide1 {
    display: block;
  }
  .leader-mobile-hide1,
  .leader-mobile-hide2 {
    background-color: #efe5dd;
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: block;
  }
  .lmh-box {
    position: relative;
  }
  .lmh-cross-icon,
  .lmh-cross-icon2 {
    position: absolute;
    top: 0%;
    right: 5%;
    color: var(--white);
    background: var(--dark-brown);
    border-radius: 0.5rem;
    padding: 0.2rem;
    cursor: pointer;
    font-size: 1.8rem;
  }
  .lmh-box h4 {
    color: var(--dark-green);
    padding-bottom: 0.2rem;
    font-size: 2.1rem;
  }
  .lmh-box img {
    padding: 2.5rem 0;
    width: 100%;
    height: auto;
  }
  .lmh-para {
    text-align: justify;
    line-height: 1.6;
    color: var(--dark-green);
  }
  .lmh-para span {
    font-family: "bold";
  }
  /* ======our leadership===== */
  .leadership {
    display: none;
  }
  /* =======our solution======= */
  .solution-data h2 {
    font-size: 2.8rem;
  }
  .card__image-container{
    display: flex;
    align-items: center; 
    gap: 1rem;
    justify-content: space-between;
  }
  .card__image-container img{ 
    display: block;
    width: 12px;
    height: 24px;
  }
  .card .grid-two-cols {
    grid-template-columns: 1fr;
  }
  .solution-data p {
    width: 100%;
    font-size: 1.4rem;
  }
  .card__image-container h3 {
    font-size: 1.8rem;
  }
  .card__inner {
    padding: 3rem;
  }
  .card__content {
    padding: 5px 0px;
  }
  .card-content-right-left img {
    width: 37px;
    height: 37px;
  }
  .card-content-r-r-r h3 {
    font-size: 1.6rem;
  }
  .card-content-r-r-r p {
    font-size: 1.4rem;
  }
  .card {
    top: 3%;
  }
  .card2 {
    top: 5%;
  }
  .card3 {
    top: 7%;
  }
  .card4 {
    top: 9%;
  }
  .card5 {
    top: 11%;
  }
  /* ========ready to make====== */
  .ready-to-make { 
  background-image: url("assets/rtmbus.png"); 
}
  .ready-to-make-box h1 {
    font-size: 2.8rem;
    width: 100%;
  }
  .ready-to-make-box p {
    font-size: 1.4rem;
    width: 100%;
  }
  /* =========future plan====== */
  .future-plan-box h2 {
    font-size: 2.8rem;
  }
  .future-plan {
    background-size: cover;
  }
  .future-plan-box p {
    font-size: 1.4rem;
  }
  .future-plan-data-list h3 {
    font-size: 1.8rem;
  }
  .future-plan-data-list p {
    font-size: 1.4rem;
    width: 100%;
  }
  .future-plan-h4 {
    font-size: 1.4rem;
    text-align: justify;
    line-height: 2.5rem;
  }
  /* =======why choose======= */
  .choose-ziel-box h2 {
    font-size: 2.8rem;
  }
  .choose-ziel-box p {
    font-size: 1.4rem;
  }
  .choose-ziel-box {
    border-radius: 2rem;
  }
  .desktop-cz {
    display: none;
  }
  .mobile-cz {
    display: block;
  }
  .choose-ziel-three-box-data h3 {
    font-size: 1.8rem;
  }
  .cztbd-icon-div p {
    font-size: 1.4rem;
  }
  .choose-ziel-three-box .grid {
    gap: 4rem;
  }
  .cztbd-para {
    height: 260px;
  }
  /* ======contact ========== */
  .contact-left h1 {
    font-size: 2.8rem;
  }

  .contact {
    position: relative;
    background-image: url(assets/contact-mobile.png);
    padding-bottom: 3rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .contact .wrapper {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .form-box {
    flex-direction: column;
    gap: 0rem;
  }
  .custom-select-wrapper {
    margin: 4rem 0 3.5rem 0;
  }
  .form-box input {
    width: 100%;
  }
  .contact-left p {
    font-size: 1.4rem;
    width: 100%;
    text-align: justify;
  }
  .contact-btn-box button {
    margin-top: 5rem;
  }
  .cbot-img,
  .cbbo-img {
    display: none;
  }
  .cbot-img-m2 {
    position: absolute;
    bottom: 5rem;
    width: 100%;
    z-index: 1; /* lower value */
  }

  .cbot-img-m {
    position: absolute;
    bottom: -4rem;
    width: 100%;
    z-index: 2; /* slightly higher */
  }

  .contact-btn {
    position: relative; /* must */
    z-index: 9; /* top-most */
  }
  /* =======faq====== */
  .faq-heading-faq h2 {
    font-size: 2.8rem;
  }
  .faq-heading-text,
  .faq-number {
    font-size: 1.6rem !important;
  }
  .faq-text {
    font-size: 1.4rem;
    margin-right: 0rem;
  }
  /* =========footer====== */
  footer .grid-four-cols {
    grid-template-columns: 1fr;
  }
  .fp-desktop,
  .fl-desktop {
    display: none;
  }
  .fp-mobile,
  .fl-mobile {
    display: block;
    color: #f1fffb;
  }
  .footer-box-2 a {
    color: #f1fffb;
    text-decoration: none;
  }
  .fb-1 {
    display: none;
  }
  .footer-box {
    text-align: center;
  }
  .footer-box h5 {
    font-size: 1.8rem;
  }
  .footer-box p {
    font-size: 1.4rem;
  }
  .footer-box-2 p:nth-child(3) {
    width: 100%;
  }
  .footer-logos {
    justify-content: center;
  }
  .footer-logos img {
    width: 60px;
    height: 60px;
  }
  .fb-4 {
    display: none;
  }
  .fs-data-box {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .fx-data p {
    font-size: 1.4rem;
    text-align: center;
  }
  .progress-bar.active {
    flex: 1;
  }
  .progress-container { 
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
  /* Styles for small laptops */
  html {
    font-size: 58%; /* 1rem = 9.28px */
  }
}

@media (max-width: 1200px) {
}

@media (min-width: 1440px) {
}
/* mobile navbar  */
@media screen and (max-width: 1283px) {
  /* navbar responsive  */
  /* =============navbar======== */
  /* Show hamburger */
  .burger-icon {
    display: flex;
    width: 3rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1001;
    display: block !important;
    display: flex !important;
  }

  .burger-icon div {
    height: 2px;
    background-color: #ba9d83;
    transition: 0.4s;
    border-radius: 4rem;
  }

  /* Hamburger toggle animations */
  #menu-toggle:checked ~ .navbar .burger-icon div:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    background-color: #ba9d83;
  }

  #menu-toggle:checked ~ .navbar .burger-icon div:nth-child(2) {
    opacity: 0;
  }

  #menu-toggle:checked ~ .navbar .burger-icon div:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
    background-color: #ba9d83;
  }

  .btn-mobile {
    display: none;
  }
  /* Slide down/up mobile menu */
  nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: #204d52;
    transform: translateY(-100%);
    transition: transform 0s ease-in-out;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 5rem 2rem;
  }

  #menu-toggle:checked ~ .navbar nav {
    transform: translateY(0);
  }

  nav ul {
    flex-direction: column;
    gap: 35px;
  }

  .deskto-mobile-btn {
    display: none;
  }
  /* Show mobile nav button */
  .mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 2rem 5rem;
    border-radius: 33rem;
    font-size: 1.4rem;
  }

  /* Hide desktop nav button */
  .nav-btn.desktop-btn {
    display: none;
  }

  /* Show social icons in mobile menu */

  .mobile-social-icons img {
    width: 21px;
    height: 21px;
  }

  .mobile-social-icons {
    display: flex;
    align-items: center;
    gap: 2.7rem;
  }
  .fb-mobile {
    margin-top: 0.5rem;
    width: 27px !important;
    height: 27px !important;
  }

  /* Animate menu items on open */
  nav ul li,
  .mobile-btn,
  .mobile-social-icons {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(5) {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(6) {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav ul li:nth-child(7) {
    transition-delay: 0.7s;
    opacity: 1;
    transform: translateY(0);
  }
  #menu-toggle:checked ~ .navbar nav ul li:nth-child(8) {
    transition-delay: 0.8s;
    opacity: 1;
    transform: translateY(0);
  }
  #menu-toggle:checked ~ .navbar nav ul li:nth-child(9) {
    transition-delay: 0.9s;
    opacity: 1;
    transform: translateY(0);
  }
  #menu-toggle:checked ~ .navbar nav ul li:nth-child(10) {
    transition-delay: 1s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav .mobile-btn {
    transition-delay: 0.8s;
    opacity: 1;
    transform: translateY(0);
  }

  #menu-toggle:checked ~ .navbar nav .header-social-iconss {
    transition-delay: 0.9s;
    opacity: 1;
    transform: translateY(0);
  }

  /* Hide desktop menu on mobile */
  nav ul {
    display: flex;
  }

  .logo img {
    height: 4rem;
  }
  /* .navbar {
    padding: 0rem 2rem;
  } */
}

@media (min-width: 800px) and (max-width: 1280px) {
  h1,
  h2 {
    font-size: 2.8rem;
  }
  .fade-text {
    font-size: 3.2rem;
    width: 85%;
  }

  .about {
    min-height: 80vh;
  }
  .contact-two-bottom-overlay .cbot-img {
    bottom: 1rem;
  }
  .contact-two-bottom-overlay .cbbo-img {
    bottom: -4rem;
  }
  .journey-text {
    font-size: 3.2rem;
  }
}
@media (min-width: 900px) and (max-width: 1440px) {
  .banner .wrapper h1 {
    /* width: 50%; */
    font-size: 5rem;
  }
  .banner {
    min-height: 80vh;
  }
  /* =======over view======= */
  .overview-para {
    max-width: 45%;
    text-align: justify;
  }
  .Overview {
    background-position: initial;
    background-size: 100% 100%;
  }
  /* ======about======= */
  .fade-text {
    width: 86%;
  }
  /* =====future plan===== */
  .future-plan-data-list {
    width: 85%;
  }
  .future-plan-data-list p {
    line-height: 1.6;
    text-align: justify;
    width: 100%;
  }
  /* ========why choose ziel mobility====== */
  .choose-ziel-three-box .grid {
    gap: 5rem;
  }
}
 @media (min-width: 390px) and (max-width: 844px){
  .journey-text { 
    transform: translate(0%, -50%); 
}
 }