@media (max-width: 767px) {
  :root {
    /* --bg-color: #a3c1e9 !important;
    --white-color: #1256bb !important; */
  }
  body {
    /* background-color: rgb(235, 227, 227) !important; */
  }
  html body .pb-50,
  html body .pb-30,
  html body .pb-40 {
    padding-top: 30px !important;
  }

  html body .pb-50,
  html body .pb-30,
  html body .pb-40 {
    padding-bottom: 30px !important;
  }
  .home-hero-section .wpb_column {
    padding-top: 0px !important;
    margin: 0px !important;
    /* border: 2px solid red !important; */
  }

  .why-wrpsolution-cards {
    margin-top: 5px !important;
  }

  /* .home-hero-section .wpb_column .wpb_content_element .animation-design{
  max-width: 100% !important;
} */
  .chooose-up-gap {
    padding: 0px !important;
  }
  .chooose-up-gap .wpb_wrapper .service-card:nth-child(-n + 2) {
    /* background-color: red !important; */
    margin-bottom: 15px !important  ;
  }
  .service-card .wpb_wrapper {
    padding: 15px !important;
  }
  h2 {
    font-size: 23px !important;
  }
  h3 {
    font-size: 23px !important;
  }
  h3 a {
    font-size: 19px !important;
  }
  .what-we-offer .vc_column-inner {
    margin-bottom: 20px !important;
    /* background-color: red; */
  }
  .what-we-offer > div > p:first-child{
    margin-top: 10px !important;
  }

  .case-studies-listing > .vc_col-sm-4:nth-child(-n + 2) .case-study-item {
    margin-bottom: 20px !important;
    padding: 0px !important;
  }

  .case-studies-listing .wpb_column {
    /* margin-bottom: 15px !important; */
    padding: 0px !important;
  }

  .image-shade-with-small-content figure::after {
    display: none !important;
  }
  .we-work-title .wpb_content_element .wpb_wrapper {
    margin: 0px !important;
    padding: 0px !important;
  }
  .challages h2 {
    margin-top: 0px !important;
  }

  .tech-growth h2 {
    /* padding-top: 20px !important; */
    /* border: 5px solid red !important; */
    padding-bottom: -30px !important;
  }
  .business-outcomes
    .we-work-title
    .wpb_column:nth-child(-n + 2)
    .vc_column-inner {
    /* background-color: red !important; */
    margin-bottom: 15px !important;
  }

  .business-outcomes {
  }

  /*common for all 3 mobile pages*/
  .main-services {
    padding-bottom: 0px !important;
  } /* not work*/
  /*not word*/
  /* .tech-growth{ 
  padding-bottom: 0px !important;
}  */

  .process-timeline::before {
    display: none !important;
  }

  .chooose-up-gap .wpb_wrapper {
    display: block !important;
  }
  .process-details {
    margin-top: 15px !important;
  }

  .home-about-section > div:first-child {
    padding-bottom: 30px !important;
  }

  /* .home-about-section{
  padding-top: 40px !important;
  padding-bottom: 30px !important;
} */
  .home-about-section.vc_row {

    /* padding-top: 0px !important; */
    /* padding-bottom: 0px !important; */
  }
     .care-about-img .vc_single_image-wrapper img {
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;   /* equal margin */
        margin-right: 20px !important;  /* equal margin */
        display: block !important;
    }

    /* Optional: keep wrapper centered */
    .care-about-img {
        display: flex !important;
        justify-content: center !important;
    }
  .child-services
    .why-choose-us-list
    .vc_column-inner
    .wpb_wrapper
    .wpb_content_element {
    /* background-color: red !important; */
    width: calc(100% - 31px) !important;
  }
  ✔ .child-services {
    margin-top: 40px !important;
  }
  /*digital and transformation service*/

  .header-section .vc_figure img {
    max-width: 100% !important;
  }
  .process-timeline {
    margin-top: 0px !important;
  }

  .three-column-service .chooose-up-gap .wpb_wrapper {
    /* border: 5px solid red !important; */
    display: block !important;
  }
  .three-column-service .chooose-up-gap .wpb_wrapper:before {
    padding: 0px !important;
  }
  .three-column-service .chooose-up-gap .service-card:nth-child(-n + 1) {
    padding: 0px !important;
    margin-bottom: 15px !important;
  }
  .three-column-service {
    padding-bottom: 0px !important;
  }
  .vc_row.three-column-service .chooose-up-gap.pb-30::after {
    padding-bottom: 0 !important;
  }
  html body .vc_row.main-services.pb-30 {
    padding-bottom: 0 !important;
  }
  .about-header {
    padding-bottom: 0px !important;
  }
  /* div.vc_row.faq-bg-light {
  border: 5px solid red !important;
  margin-top: 0px !important;

} */

  .child-services h2 {
    /* border: 5px solid red !important; */
    /* padding-top: 20px !important; */
  }
  .product-dev-hero {
    padding-top: 8px !important;
  }
  .product-dev-hero .hero-animation {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    /* padding-top: 7px !important; */
    padding: 0 !important;
    text-align: center;
    display: block;
  }

  .header-section .vc_column-inner .hero-animation {
    margin: 0px !important;
  }

  /*ai and automaitorn */
  .why-wrpsolution-cards p {
    /* border: 5px solid red !important; */

    margin-top: 20px !important;
  }
  .ai-automation-hero {
    /* padding-top: 10px !important; */
  }

  .ai-automation-hero img {
    height: 384px !important;
    max-width: 100% !important;
  }

  .hero-animation .icons,
  .animated-image {
    display: none !important;
  }
  .hero-animation img {
    width: 100% !important; /* Full width */
    max-width: 100% !important;
    margin: 0 auto !important; /* Center it */
    padding: 0px !important; /* Small safe padding */
  }

  /* ai autmation and cloud service has one div remove after  */

  /* cloud service*/
  .cloud-services-hero .vc_column-inner .wpb_wrapper .hero-animation {
    width: 100% !important; /* Full width */
    max-width: 100% !important; /* No limit */
    margin: 0 auto !important; /* Center it */
    padding: 0px !important;
  }

  /* manufacturing*/
  .growth-section {
    padding-bottom: 0px !important;
  }

  .growth-section .opportunities-one .wpb_column {
    margin-bottom: 20px !important;
    /* border: 5px solid red !important; */
  }
  .growth-section .opportunities-two .wpb_column:nth-child(1) {
    margin-bottom: 20px !important;
    /* border: 5px solid blue !important; */
  }
  .why-choose-wrp > .wpb_column.vc_column_container:first-child {
    padding-top: 40px !important;
    padding-bottom: 30px !important;
  }
  .why-choose-wrp .care-about-img {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .why-choose-wrp .wpb_column .features-blocks {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .why-choose-wrp .wpb_column .features-blocks .vc_column-inner .wpb_wrapper {
    display: block !important;
    /* border: 5px solid red !important; */
  }
  .why-choose-wrp
    .wpb_column
    .features-blocks
    .vc_column-inner
    .wpb_wrapper
    .wpb_raw_code
    .v-line,
  .horizontal-line {
    /* border: 5px solid blue !important; */
    display: none !important;
  }
  .why-choose-wrp .wpb_column .features-blocks .wpb_text_column,
  .wpb_raw_html {
    margin: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
  }
  .client-testimonials-section .care-about-img {
    margin-top: 40px !important;
    margin-bottom: 0px !important;
  }
  .client-testimonials-section .client-review {
    margin-top: 0px !important;
    padding-bottom: 30px !important;
  }

  .about-wrp-solution .wpb_single_image .wpb_wrapper {
    width: 100% !important; /* Full width */
    max-width: 100% !important; /* No limit */
    margin: 0 auto !important; /* Center it */
    padding: 0px !important; /* Small safe padding */
  }
  .about-wrp-solution
    .vc_column_container
    .vc_column-inner
    .wpb_wrapper
    .counter
    .vc_column-inner {
    /* border: 5px solid red !important; */
    display: flex !important;
    justify-content: space-evenly !important;
    margin-bottom: 20px !important;
    gap: 20px !important;
  }
  .react-out > .wpb_column:nth-child(-n + 2) {
    margin-bottom: 20px !important;
  }

  .career-form-container > div:nth-child(2) {
    /* background-color: red !important; */
    padding: 25px !important;
  }

  .menu-primary-menu-container > ul > li:hover::before {
    /* border: 5px solid red !important; */
    /* border: none !important; */
    height: 0px !important;
  }
  .topnav .navbar-list > li > ul {
    position: static !important;
    top: auto !important;
    left: auto !important;
    background-color: transparent !important;
    color: white !important;
  }
 .menu-item .sub-menu{
  padding-top: 0px !important;
}
  .topnav .navbar-list li li a::before {
    content: "arrow_right_alt" !important;
    font-family: var(--matirial-icons);
    font-size: 15px;
    position: absolute;
    top: 0px;
    margin-left: -20px;
    transition: all 
ease-in .2s;
}
  /* Remove default bullets */
  .navbar-list li {
    list-style: none;
    position: relative;
    padding-right: 20px;
  }

  /* Arrow (ONLY ONE ICON — your existing one) */
  .navbar-list li.menu-item-has-children::after {
    content: "\25B6" !important; /* ► */
    color: white !important;
    position: absolute;
    right: 0;
    top: 12px;
    transform: translateY(-50%);
    transition: transform 0.3s ease; /* rotate smooth */
  }

  /* Smooth submenu animation */
  .navbar-list li ul.sub-menu {
    max-height: 0;
    overflow: hidden;
    padding-left: 15px;
    margin-top: 5px;
    transition: max-height 0.35s ease-in-out; /* smooth open */
  }

  /* Hover = open submenu + rotate arrow */
  .navbar-list li.menu-item-has-children:hover > ul.sub-menu {
    max-height: 500px; /* large enough to expand */
    padding: 0px !important;
  }

  .navbar-list li.menu-item-has-children:hover::after {
    transform: translateY(-50%) rotate(90deg); /* ▼ rotate down */
  }

  /* REMOVE BEFORE ICON (to avoid double icons) */
  .navbar-list li.menu-item-has-children > a::before {
    content: none !important;
  }

  .menu-item-object-custom {
  }

  .topnav .navbar-list > li > input:checked + label + ul {
    max-height: 500px;
    text-align: left !important;
  }

  .topnav .navbar-list > li > ul::after {
    background-color: transparent !important;
  }

  .sub-menu .menu-item a {
    padding-left: 30px !important;
    text-align: left !important;
  }
}