@media (max-width: 768px) {
    .rdv {
      width: 95%;
    }
  
    [class^="tag-"] {
      font-size: 11px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hero-title {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .header-container-lg {
      display: none;
    }
    .header-container-mobile {
      display: block;
      display: flex;
    }
    .logo {
      width: 104px;
    }
    .menu {
      width: 30px;
    }
    .header-container {
      padding-left: 26px;
      padding-right: 26px;
      padding-top: 17px;
    }
    .cum {
      flex-direction: column;
      gap: 23px;
    }
    .hero {
      padding-top: 58px !important;
      padding: 0px 220px;
      padding-bottom: 35px !important;
    }
    .hero-container {
      flex-direction: column !important;
      gap: 20px;
    }
  
    .hero-container h4 {
      font-size: 23px !important;
      font-weight: bold;
    }
    .hero-container p {
      font-size: 12px;
      max-width: 98%;
    }
    .hero-container p > br {
      display: none;
    }
    img,
    video {
      max-width: 181px;
      height: auto;
    }
    .hero {
      padding: 0;
      text-align: center;
    }
    h4 > br {
      display: none;
    }
  
    .gradient button {
      padding-right: 18px;
      margin-top: 0;
      margin-top: 10px;
    }
    .header-container .btn-pro {
      display: flex;
      font-size: 12px;
      padding-right: 10px;
      border-radius: 100px;
      width: 200px;
      height: 35px;
      color: white;
      font-weight: bold;
    }
    .gradient button {
      display: flex;
      font-size: 12px;
      border-radius: 100px;
      width: 150px;
      height: 35px;
    }
  
    .menu-icon {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 12px;
    }
  
    .menu-container {
      font-family: "poppins_med";
      text-align: center;
      position: absolute;
      top: 70px;
      right: 20px;
      background-color: #f9fbfc;
      padding: 20px;
      padding-top: 30px;
  
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s, opacity 0.3s linear;
    }
  
    .menu-container.active {
      visibility: visible;
      opacity: 1;
    }
  
    .menu-items {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
  
    .menu-items li {
      margin-bottom: 10px;
    }
  
    .menu-items li a {
      color: #555;
      text-decoration: none;
      transition: color 0.3s;
      padding-left: 15px;
    }
  
    .menu-items li a:hover {
      color: #1678f2;
    }
    .keyword-container {
      margin-left: 8px;
      gap: 5px;
    }
    .keyword-container,
    .city-container {
      gap: 5px;
    }
    .search-tags {
      padding-top: 35px;
      padding-bottom: 0px;
      display: flex !important;
      align-items: center;
      justify-content: start;
      padding-left: 19px;
      gap: 25px;
    }
  
    .search {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 25px;
      position: relative;
      height: 40px;
      display: flex !important;
      align-items: center;
      gap: 8px;
      margin-left: 10px;
      margin-right: 10px;
    }
  
    .search input {
      background: none !important;
      border: none !important;
      font-size: 12px;
      width: 90px;
    }
  
    .btn-search {
      right: 5px;
      font-size: 12px;
      border-radius: 47px;
      padding: 8px 16px !important;
      padding: 10px;
    }
    .tabs-container ul {
      background-color: rgba(64, 228, 173, 1);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .tabs-container a {
      font-family: "poppins";
      gap: 10px;
      justify-content: center;
      height: 160px;
      padding-top: 33px;
    }
    .tab-icon {
      width: 70px;
    }
    .nav-tabs .nav-link {
      font-size: 12px;
      text-align: center;
    }
    .nav-link {
      padding: 0 !important;
    }
  
    .rdv h2 {
      text-align: center !important;
      font-size: 25px;
      padding-top: 51px;
    }
    .rdv h2 > br {
      display: none;
    }
    .info h2,
    .cum h2 {
      max-width: 330px;
      font-size: 25px;
      text-decoration: none;
      color: black;
      padding-top: 50px;
      text-align: center !important;
    }
  
    .cum {
      padding-top: 20px;
      display: block;
      justify-content: center;
      gap: 137px;
      flex-direction: row-reverse;
    }
    [class^="cum-section-"] {
      justify-content: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cum p {
      font-size: 14px;
      max-width: 400px;
      text-align: center;
      padding-top: 18px !important;
      margin: 0 !important;
    }
  
    .cum button {
      gap: 10px;
      font-size: 15px;
      width: 160px;
      height: 35px;
      padding-right: 15px;
      margin-top: 22px;
      margin-bottom: 22px;
    }
    [class^="cum-section-"] > img {
      width: 265px;
      max-width: 100%;
      margin-right: 15px;
      margin-top: 10px;
    }
  
    .info-img-lg {
      display: none;
    }
    .info-img-mobil {
      display: block;
    }
    .gradient {
      width: 100% !important;
      padding: 3px !important;
      height: 250px !important;
    }
    .gradient h2 > br {
      display: none;
    }
    .gradient h2 {
      font-weight: bold;
      font-size: 20px !important;
      width: 90%;
      text-decoration: none;
    }
    .gradient p {
      width: 90%;
      font-size: 12px;
      text-align: center;
    }
    .footer {
      text-align: center;
      width: 100%;
      margin-top: 100px;
      padding-top: 36px;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      padding-left: 10px;
    }
    .footer-section-01 {
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 25px;
    }
  
    .footer-section-01 p {
      font-family: "poppins";
      font-size: 10px;
      margin-top: 16px;
    }
    .footer-section-01 a {
      text-decoration: none !important;
      color: white;
      font-size: 10px;
      font-family: "poppins";
    }
    .footer-section-01 h4 {
      font-size: 12px;
      font-family: "poppins_bold";
    }
    .svn-icon {
      display: flex;
      justify-content: end;
      gap: 5px;
      padding-right: 35px;
    }
    .svn h3 {
      display: none;
    }
  
    .footer-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
    }
    .footer-icon > p > br {
      display: none;
    }
    .footer-icon > p > br {
      display: none;
    }
    /* version 2 additional code */
    .cum p > br {
      display: none;
    }
    .cum h2 > br {
      display: none;
    }
    p{
        margin-bottom:0 !important ;
    }
    .pricing {
      margin-top: 150px !important;
      gap: 30px !important;
    }
    .pracing-img {
      width: 39px;
    }
    .pricing p {
      font-size: 18px !important;
      text-align: start;
    }
    .parallelogram-container {
      display: flex;
      justify-content: center;
    }
    .parallelogram-container h2 {
      text-align: center !important;
      font-family: "poppins";
      font-size: 56px;
      color: black;
      padding-top: 54px;
      text-decoration: none;
    }
    .parallelogram-container h4 {
      padding-bottom: 15px;
      font-size: 24px;
    }
    .parallelogram {
      height: 478px;
      width: 80%;
      aspect-ratio: 2/3;
      clip-path: polygon(0 30px, 0 100%, 100% calc(100% - 30px), 100% 0);
      background: rgba(255, 254, 254, 1);
    }
    .parallelogram-container button {
      margin-left: 0 !important;
      font-size: 16px;
      width: 216px;
      height: 56px;
      margin-top: 29px;
    }
    .section-01 {
      padding-left: 55px;
    }
    .section-01 p,
    .cum p {
      max-width: 90%;
      padding-top: 8px;
      font-size: 14px;
    }
  
    .section-01 h4 {
      font-size: 17px;
      max-width: 280px;
    }
    .rdvc {
      min-width: 80% !important;
      margin-top: 80px;
      position: relative;
    }
    #CardContainer {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      display: grid;
      gap: 10px !important;
    }
    .cardElement {
      padding: 15px !important;
      width: 95% !important;
      height: 100% !important;
    }
    .cardElement p{
      font-size:10px !important ;
      padding: 0 !important;
      max-width: 100% !important;
    }
    .cardElement h4{
      font-size:15px !important ;
      margin-bottom: 1px !important;
    }
    .cardElement img{
     
      max-width: 130px !important;
      right: 50% !important;
      
  
    }
    .cardElement >.overflow-hidden{
      width: 100% !important;
  
    }
    .parallelogram-container img {
        max-width: 100%;
    }
  }