*,
  *::before,
  *::after 
  {
    box-sizing: border-box;
  }



  /* Layout */
  body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    font-family: var(--font-used);
    font-weight: 400;
    background: var(--white);
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    max-width: 1300px;

    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

    padding-right: 1.6rem;
    padding-left: 1.6rem;
    padding-bottom: 0px;
  }

  .padding-section{
    margin-top: 2rem;
    padding-top: 4.5rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2rem;
  }

   .padding-section-small{
    margin-top: 2rem;
    padding-top: 0.5rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0rem;
  }



  /* Beta Banner =========================== */
  .beta-banner {
    background: var(--main_primary);   
    padding: 0.75rem 1rem;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    align-items: center;
    justify-content: center;
    position: relative;     
    gap: 0.85rem;
    z-index: 20;
    
  }

  .beta-banner-btn {
      background: var(--background-primary);
      color: var(--white);
      padding: 0.45rem 0.9rem;
      border-radius: var(--radius-md);
      text-decoration: none;
      font-weight: 500;
      white-space: nowrap;
      transition: transform 0.25s ease; 
  }

  .beta-banner-btn:hover {
      background: var(--white);
      color: var(--text);
      transform: translateY(-4px);   
  }



  /* Hero ================================*/
  .hero {
    padding: 5.5rem 0 4.5rem;
  }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }

  #hero-section{
    margin-top: -4rem;
  }

  .upper-headling-wrapper{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: -0.9rem;
  }

  .upper-headline {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--main_primary);
  }

  .flag-placed {
    right: 20px;
    background: var(--main_primary);
    bottom: 20px;
    color: var(--text);
    padding-top: 6px;
    padding-right: 20px;
    padding-bottom: 6px;
    padding-left: 20px;
    font-size: 0.7rem;  
    font-weight: 800;
    border-radius: 5px;
    transition: transform 0.25s ease; 
  }

  .flag-placed:hover {
    transform: translateY(-4px);    
  }

  #text-slide{
    transition: opacity 0.9s ease-in-out;
    opacity: 1;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 3.4vw, 3rem);
    line-height: 1.1;
    margin: 0 0 1rem;
  }

  .hero-subtitle {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text);
    max-width: 32rem;
    margin-bottom: 1.75rem;    
  }

  .hero-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
  }

  .hero-meta {
    display: flex;
    font-size: 0.8rem;
    color: var(--text);
    gap: 1rem;
  }


  .hero-picture-wrapper {
    position: block;
  }
  .hero-picture-wrapper .initial{
    max-width: 100%;
    height: auto;      
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    transform: scale(1.2);
    transition: transform 0.25s ease;   
  }

  .hero-picture-wrapper .initial:hover{
    transform: translateY(-15px);
    transform: scale(1.3);
  }

  





  /* Buttons */
  .btn {
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding-top: 0.75rem;
    padding-left: 1rem;
    padding-bottom: 0.75rem;    
    padding-right: 1rem;
    border-radius: 10px;
    white-space: nowrap;    
    border: 2px solid var(--main_primary);
    text-decoration: none;
    cursor: pointer;
  }

  .btn.primary {
    background: var(--main_primary);
    color: var(--text);
    transform: translateY(0);          
    transition: transform 0.25s ease;    
  }

  .btn.primary:hover {
    box-shadow: 0 8px 16px var(--button-border);
    transform: translateY(-4px);    
  }

  .btn.secondary {
    background: transparent;
    border: 2px solid var(--main_primary);   
    transform: translateY(0);          
    transition: transform 0.25s ease;    
    color: var(--text);
  }

  .btn.secondary:hover {
    transform: translateY(-4px);
    background: var(--main_primary);
  }

  .btn.full-width {
    width: 100%;
  }
  
  /* Sections =======================================*/

  .full-screen-section {
    min-height: 100vh;
    display: flex;
    
  }

  .section {
    padding: 4.5rem 0;
  }

  .section-header {
    max-width: 36rem;
    margin: 0 auto 2.5rem;
    text-align: center;
  }

  .section-header h2 {    
    margin-bottom: 0.6rem;
    font-size: 1.6rem;
  }

  .section-header p {    
    color: var(--text);
    font-size: 0.98rem;

  }


  /* Benefits  ================================================*/
  .logo-wrapper {
    display: flex;    
    margin: 0, auto;  
    justify-content: center; 
    width: 100%;
    align-items: center; 
    margin-top: 2rem;   

    }

  .logo-wrapper img {
    max-width: 40%;
    height: auto;      
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .benefits-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 2rem;
    
  }

  .benefits-card {
    padding-right: 2rem;
    padding-top: 1.6rem;   
    border-radius: 25px; 
    border: 2px solid var(--text);
    padding-bottom: 1.6rem;
    padding-left: 2rem;    
    min-height: 300px;
    background: var(--white);    
    color: var(--text);
    box-shadow: var(--shadow);
    text-align: center;
    transform: translateY(0);          
    transition: transform 0.25s ease;   
  }
  .benefits-card:hover{
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
  }

  .small-image-wrapper{
    display: flex;    
    margin: 0, auto;  
    justify-content: center; 
    width: 100%;
    align-items: center;  
    margin-bottom: 1.5rem;
    font-size: 30px;
  }

  .small-image-wrapper img{
    max-width: 40%;
    height: auto;      
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .benefits-card h3 {
    margin: 0 0 0.7rem;
    justify-content: center;
    align-items: center; 
    display: flex;
    font-weight: 700;
    font-size: 1.5rem;
    padding-bottom: 0.8rem;
     
  }

  .benefits-card p {
    margin: 0;
    font-size: 1rem;
    color: var(--text);

  }

  .benefits-btn-cta-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 5rem
  }

  .btn.benefits-btn-cta {    
    background: transparent;
    border: 2px solid var(--main_secondary);   
    transform: translateY(0);          
    transition: transform 0.25s ease;    
    color: var(--white);
    text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.85); 
    width: 30%;
    justify-content: center;
    display: flex; 
    overflow: hidden;
    font-weight: 700;
    align-items: center;
    background: var(--main_secondary); 

      
    

  }

  .btn.benefits-btn-cta:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    color: var(--white);

  }

  .btn.benefits-btn-cta::before{
    left: -40px;
    width: 0%;
    content: "";
    position: absolute;
    height: 100%;
    top:0;
    z-index: -1;
    background-color: var(--background-primary);
    transition: all 1s;
  }

  .btn.benefits-btn-cta:hover::before{
    width: 130%;
  }


  /* How it works ================== */

  .line-section{
    height: 150px; 
    width: auto;
  }

  .line-svg{
    height: 100%;
    width: 100%;
  }

  .bricks-section {
    display: flex;
    gap: 30px;    
    min-height: 300px;
    width: auto;
    flex-wrap: wrap;
    flex-direction: row;  
  }

  .brick {
    flex: 1;
    border-radius: 20px;
    background: var(--white);
    display: flex;
    min-width: 260px;
    flex-direction: column;  
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: var(--shadow);
    transform: translateY(0);          
    transition: transform 0.25s ease;  
  }

  .brick:hover{
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
  }

  .brick.special-offset-block_1 {
    margin-top: -4rem;
  }

  .brick.special-offset-block_2 {
    margin-top: -8rem;
  }

  .brick.special-offset-block_3 {
    margin-top: -5rem;
  }

  .brick.special-offset-block_4 {
    margin-top: -8rem;
  }

  .step-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--main_secondary);
    background: var(--main_secondary);
    color: var(--text);
    margin-top: 2rem;
    font-size: 5rem; 
    font-weight: bold;
    box-shadow: 0 0 20px var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px; 
  }

  .headline-wrapper{
    display: flex; 
    flex-direction: column;  
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1rem;
    padding-left: 1rem; 
    padding-right: 1rem;
  }
  
  .brick-text-headline{
    font-size: 2rem; 
    font-weight: 600;
    
  }

  .brick-text-below-headline{
    font-size: 1.2rem; 
    font-weight: 400;    
    color: var(--text);
  }

  .htw-div-line{
    background: var(--main_secondary);
    width: 100%;
    height: 3px;
    border: none;    
  }


  .description-wrapper{
    display: flex; 
    flex-direction: column;  
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1rem;
        padding-left: 1rem; 
    padding-right: 1rem;
    
  }
  .brick-description {
    display: inline-block;
    align-items: flex-start;
    justify-content: flex-start;

    font-size: 1rem; 
    font-weight: 400;    
    color: var(--text);

  }

    /* Supported shops ================== */

    .section-supported-shops{
      position: absolute;
      height: 500px;
      width: 1200px;
      margin-left: 3rem;
      display: flex;
      flex-direction: row;
      border-radius: 20px;  
      background: var(--main_primary);
      justify-content: center; 
      box-shadow: 0 4px 17px rgba(0, 0, 0, 0.45);
      align-items: center; 
    }

    .mavabit_function_img_mobile{
      display: none;
    }

    .link-lines{
      top: 0;
      position: absolute;
      left: 0; 
      height: 100%;
      width: 100%;
      z-index: 1;
    }

    .link-lines line {
      stroke: url(#lineGrad);
      stroke-width: 7;      
      stroke-dasharray: 5 4;
      animation: line-move 15s linear infinite;
    }

    @keyframes line-move {
      0%   { stroke-dashoffset: 0; }
        50%  { stroke-dashoffset: 350; }
        100% { stroke-dashoffset: 0; }
    }
    

    .shop-circle{
      z-index: 2;
      width: 50rem;
      height: 10rem;
      border-radius: 15px;
      overflow: hidden;
      position: absolute;
      border: 3px solid rgba(255, 255, 255, 0.15);
      box-shadow:
        0 0 10px rgba(239, 181, 9, 0.6),
        inset 0 0 12px rgba(0, 0, 0, 0.3);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .shop-circle:hover{
      transform: scale(1.05);
    }

    .shop-circle img{
      height: 100%;
      width: 100%;
      padding: 15px;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    .shop-circle-left {
      width: 160px;
      height: 140px;
      top: 50%;
      left: 40px;
      transform: translateY(-50%);
      background: var(--white);
    }


    .shop-circle-center {
      width: 190px;
      height: 190px;
      min-height: 21px;
      min-width: 21px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--background-primary);
      box-shadow:
        0 0 20px rgba(239, 181, 9, 1),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .shop-circle-right-top {
      width: 160px;
      height: 140px;
      object-fit: cover;
      top: 30px;
      right: 60px;
      background: var(--white);
    }

    .shop-circle-right-middle {
      width: 160px;
      height: 140px;
      object-fit: contain;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);
      background: var(--white);
    }


    .shop-circle-right-bottom {
      width: 160px;
      height: 140px;
      bottom: 30px;
      right: 60px;
      background: var(--white);
    }

    .shop-circle-content {
      width: 100%;      
      justify-content: center;
      padding: 15px;
      display: flex;
      font-weight: bold;
      align-items: center;   
      height: 100%;
      text-align: center;
    }

    .shop-circle-left:hover {
      transform: translateY(-50%) scale(1.05);
    }

    .shop-circle-center:hover {
      transform: translate(-50%, -50%) scale(1.05);
    }

    .shop-circle-right-middle:hover {
      transform: translateY(-50%) scale(1.05);
    }

    .shop-circle-right-top:hover,
    .shop-circle-right-bottom:hover {
      transform: scale(1.05);
    }
    
    .function-cta-btn-wrapper {
      display: flex;
      margin-top: 2rem; 
      align-items: center;
      margin-top: 600px;
      width: auto;
      flex-direction: column;
    }

    .cta-function-text{
      text-align: center;
      font-size: 1rem;
      font-weight: 500;
      color: var(--text);
     
    }

    .btn.function-cta-btn{
      cursor: pointer;
      width: 15rem;
      min-width: auto;
      display: inline-block;
      text-align: center;
      margin-top: 1rem;
      background: var(--main_primary);
      transform: translateY(0);          
      transition: transform 0.25s ease;  
      color: var(--text);
      font-weight: 700;
    }
    .btn.function-cta-btn:hover{
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
    }





    

  



  



  /* Social Proof ================== */

  .profile-card-section {
    justify-content: center;
    display: flex;
    gap: 5rem;
    width: 100%;
    margin-top: 80px;
    flex-wrap: wrap;
  }

  .profile-card {
    background: var(--white);
    position: relative;
    width: 100%;   
    border-radius: 15px;
    text-align: center;
    max-width: 320px;
    padding-bottom: 30px;
    padding-top: 50px;
    flex: 1 1 280px; 
    transform: translateY(0);          
    transition: transform 0.25s ease; 
    
  }

  .profile-card .profile-picture{
    top: -60px;
    position: fixed;
    left: 50%;
    width: 130px;
    height: 130px;
    background: var(--main_primary);
    border-radius: 50%;
    transform: translateX(-50%) translateY(0) ;          
    transition: transform 0.25s ease;  
  }

  .profile-card:hover{
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
  }

  .profile-picture:hover{
    box-shadow: var(--shadow-hover);
    transform: translateX(-50%) translateY(-4px);
  }

  .profile-picture img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 9px solid var(--main_primary);
  }

  .profile-card-body{
    color: var(--text);
    padding-top: 25px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 20px;
  }
  .profile-div-line{
    background: var(--main_primary);
    width: 80%;
    display: block;
    justify-content: center;
    height: 3px;
    border: none;    
    margin-top: -5px;
  }

  .profile-card-body .profile-name{
    font-weight: 800;
    font-size: 1.1rem;
    
  }

  /* Prices ================== */

  .pricing-section{
    margin-top: 60px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
    padding-right: 16px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 16px;
    max-width: 1300px;
    align-items: stretch;
    flex-wrap: wrap;
    align-items: stretch;
    display: flex;
    gap: 50px;
    justify-content: center;

  }

  .price-card{
    max-width: 500px;
    background: radial-gradient(circle at top right, #ffffff, var(--main_primary) 35%, var(--main_secondary));
    border-radius: 15px;  
    flex-basis: 260px;
    padding-right: 24px;
    padding-bottom: 20px;
    flex-shrink: 1;
    flex-grow: 1;
    padding-top: 24px;
    padding-left: 24px;

    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text);
    min-height: auto;
    border: 2px solid var(--text);
    transform: translateY(0);          
    transition: transform 0.25s ease;  
  }

  .price-card:hover{
    transform: translateY(-4px);    
    box-shadow: var(--shadow-hover);
  }

  .price-card.option2--highlight{
      box-shadow: 0 0 15px 10px var(--main_primary);
      height: auto;
      transform: translateY(-10px) scale(1.04);
      
  }

  .price-card.option2--highlight:hover{
      box-shadow: 0 0 15px 10px var(--main_primary);
      height: auto;
      transform: translateY(-15px) scale(1.05);    
  }


  .price-badge {    
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background: #a90939;
    color: white;
    padding: 8px 14px;
    border-radius: 12px 12px 0 0;
    font-size: 0.87rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .small-bottom-margin-added{
    margin-bottom: 0.7rem;
  }


  .price-card-title{
    font-size: 2.5rem;
    color: var(--text);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    margin: 0;
    
  } 
  .price-div-line{
    background: var(--text);
    width: 100%;
    height: 1px;
    border: none;
    margin: 0;
  }
  
  .price-value{
    margin-left: 0;
    font-size: 2rem;
    margin-top: 4px;
    margin-right: 0;
    font-weight: 400;
    display: flex;
    justify-content: center;
  }

  .price-value span{
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);

  }

  .price-value.on-demand{
    font-weight: 400;
    font-size: 1rem;
    margin-top: -2rem;
  }

  .headline-package{
    font-weight: 600;
    font-size: 1.05rem;
    justify-content: left;
    display: flex;
    margin: 0px;
    padding-left: 20px;
  }

  /*.feature-div-line{
    background: var(--text);
    width: 80%;
    height: 2px;
    border: none;
    margin: 0 auto;
  } */

  .price-card-features{
    margin-top: 0;
    margin-right: 0;    
    margin-left: 0;
    margin-bottom: 20px;
    font-weight: 400;
    flex-direction: column;
    gap: 7px;
    color: var(--text);
    font-size: 1rem;
    flex: 1;
    list-style: circle;
    display: flex;
    list-style: none;
    padding-left: 0;
    padding-left: 1.5em;

  }

  .price-card-features li::before{
    content: "\01F5F8";
    color: green !important;
    font-weight: bold;
    padding-right: 0.8em;
  }
  

  .btn.price-cta {
    background: var(--main_secondary);
    border: 2px solid var(--text);   
    transform: translateY(0);          
    transition: transform 0.25s ease;   
    font-weight: 700;
    color: var(--text);
    text-align: center;
  }

  .btn.price-cta:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);

  }
  
  /* Question & Answer part ================== */

  .faq-section {
    max-width: 1000px;    
    padding-inline: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .faq-section-item {
    border-radius: 10px;
    border: 2px solid var(--main_primary);
    padding-top: 0.60rem;
    padding-right:1rem;
    padding-bottom:0.75rem;
    padding-left:1rem;
    margin-top: 0.3rem;
  }

  .faq-section-item summary {
    list-style: none;  
    cursor: pointer;               
    font-weight: 600;
  }

  .faq-section-item summary ::-webkit-details-marker {
    display:none;
  }

  .faq-section-item summary::after {
    transition:transform 0.38s ease;
    float: right;
    content: "+";
    font-weight: 900;
    
  }

  .faq-section-item[open]  summary::after {
    transform: rotate(360deg);
    content: "-";
  }

  .text-middle{
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .more-questions-wrapper{
    padding-top: 1rem;
    flex-direction: column;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .more-questions-wrapper article{
    display: flex;
    justify-content: center;
    font-size: 1rem;
    padding-top: 1rem;
    font-weight: 700;
  }

  .btn.btn-more-questions {
    width: auto;
    display: inline-block;
    margin-top: 1rem;
    text-align: center; 
    width: 15rem;
    min-width: auto;
    background: var(--main_primary);
    transform: translateY(0);          
    transition: transform 0.25s ease;  
    color: var(--text);
    font-weight: 700;
  }

  .btn.btn-more-questions:hover{
    transform: translateY(-4px);    
    box-shadow: var(--shadow-hover);
  }

  .show-more-questions {
    text-decoration: none;
    font-family: var(--font-used);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
  }

  .show-more-questions:hover {
    color: var(--main_primary);
  }




  /* END CTA ===================================== */

  .full-screen-section.section-end-cta{
    background-image: url("/static/media/img/mavabit_cta.webp");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }

  .btn-end-cta-wrapper{
    display: flex;
    justify-content: center;
  }

  .btn.end-of-cta {
    background: var(--main_primary); 
    transform: translateY(0);          
    transition: transform 0.25s ease;  
    width: 30%;
    justify-content: center;
    align-items: center;
    display: flex; 
    font-weight: 700;
    color: var(--white);
    overflow: hidden;
  }



  .btn.end-of-cta:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    color: var(--white);

  }

  .btn.end-of-cta::before{
    left: -40px;
    width: 0%;
    content: "";
    position: absolute;
    height: 100%;
    top:0;
    z-index: -1;
    background-color: var(--background-primary);
    transition: all 1s;
  }

  .btn.end-of-cta:hover::before{
    width: 130%;
  }

  /* compare service ====================== */

  .section-compare-service{
    background: var(--white);
    max-width: 100%;
    border-radius: 20px;
    padding-top: 100px;   
    padding-left: 50px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    gap: 20px;
    box-shadow: var(--shadow-hover);
  }

  .switcher-wrapper{
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 3rem;
    justify-content: center;
    overflow-x: hidden;
  }

  .button-group input[type="radio"]{    
    opacity: 0;
    position: absolute;
    
  }

  .button-group {
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    border-radius: 12px;
    background: var(--main_primary);
    display: flex;
    box-sizing: border-box;
    gap: 4rem;    
    
  }


  .button-group .btn {
    border-radius: 15px;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 600;
    padding: 6px 16px;
    max-width: 100%;
    padding-right: 80px;
    padding-left: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--text);    
    font-size: 1rem;

  }

   .button-group .btn:hover {
    border: 2px solid var(--white);
   }


  #plan-starter:checked + label,
  #plan-business:checked + label,
  #plan-premium:checked + label {
    background: var(--white);
    color: var(--text);
    font-weight:800;
    box-shadow: var(--shadow-hover);
  }







  .two-boxes-compare-service{  
    display: flex;         

  }
  .two-boxes-compare-service.left {
    flex: 0 0 60%;
    flex-direction: column;
    padding-bottom: 40px;
    padding-left: 60px;
    padding-top: 20px;
    padding-right: 60px;
    justify-content: left;
    display: flex;
    align-items: left;
    text-align: left;
  }

  .left-boxes-compare-service-wrapper{
    display: flex;
    align-items: left;
    flex-direction: column;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
  }

  .compare-service-left-headers-wrapper{
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .slider-wrapper{
    width: 100%;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    background: transparent;
    border: none;
    
  }
  #myslider:focus{
    outline: none;               
    border: none;
  }
  .slider-text{
    font-size: 1.5rem;
  }

  #myslider{
    margin-top: 2rem;
    appearance: none;
    width: 100%;
    border: none;
  }

  #myslider::-webkit-slider-runnable-track{
    height: 0.2rem;
    border-radius: 999px;
    background: var(--main_primary);
    border: none;
  }

  #myslider::-moz-range-track{
    height: 0.2rem;
    border-radius: 999px;
    background: var(--main_primary);
    border: none;
  }

  #myslider::-webkit-slider-thumb{
    width: 40px;
    height: 40px;
    appearance: none;
    border-radius: 50%;
    cursor: pointer; 
    background: var(--main_secondary);
    margin-top: -18px;
  }

  #myslider::-moz-range-thumb{
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--main_secondary);
    border: none;
  }

  .two-boxes-compare-service.right{
    flex: 1;
    padding-left: 90px;
    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 30px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-hover);
    transform: translateY(0);          
    transition: transform 0.25s ease;     
  }
  .two-boxes-compare-service.right:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }

  .right-boxes-compare-service-wrapper{    
    flex-direction: column;
    font-size: 1.2rem;
    font-weight: 400;    
    display: flex;
    flex-direction: column;
  }

  .move-text-middle{
    text-align: center; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 1.5rem; 
  }

  .saving-title{
    margin: 0;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 800;
    
  }



  .saving-amount {
    position: relative;
    display: inline-block;
    margin: 0.5rem 0 0;
    font-size: 2rem;
    font-weight: bold;
    
  }
  .saving-amount::after{
    content: "";
    z-index: -1;
    position: absolute;
    background: green;
    right: 0;
    bottom: -5px;
    height: 5px;
    left: 0;
    border-radius: 15px;    
    opacity: 0.9;
    
  }

  
  /* Contact form ============================== */
  
  .contact-section{
    background: var(--white);
    max-width: 100%;
    border-radius: 20px;
    padding: 15px;
    display: flex;  
    justify-content: center;
    gap: 20px;
    box-shadow: var(--shadow-hover);
    
  }

  .contact-section-box{
    flex: 1;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;

  }

  .contact-section-box.left{
    flex-direction: column;
    padding-bottom: 40px;
    padding-left: 60px;
    padding-top: 20px;
    padding-right: 60px;
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
  }

  .contect-left-headers-wrapper{
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .contact-image{
    display: block;
    margin-bottom: 1rem;
    width: 60%;
    height: auto;
  

    border-radius: 22px;    
    box-shadow: 0 0 20px rgba(0,0,0,0.35); 
  }

  .contect-left-title{
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    

  }

  .contect-left-subtitle{
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
    margin-top: 3rem;
    padding-right: 3rem;
    padding-left: 3rem;
    
  }
  .contact-section-box.right{
    padding-left: 30px;
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 20px;
    background: var(--main_primary);
    border-radius: 20px;
    
  }

  .contact-form{
    flex-direction: column;
    gap: 5px;
    display: flex;
  }

  label{
    font-size: 1rem;
    color: var(--text);
  }

  .form-group{
    flex-direction: column;
    gap: 5px;
    display: flex;

  }

  input, textarea{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border: 1px solid var(--main_primary);
    border-radius: 4px;
    font-family: var(--font-used);
    resize: none;
  }

  input:focus, textarea:focus{
    border-color: var(--text);
    outline: none;
    max-width: 100%;
    width: 100%
  }

  .inline-form-group{
    gap: 5px;
    align-items: flex-start;  
    display: flex;
  }

  .inline-form-group label{
    margin: 0;
  }

  .inline-form-group input[type="checkbox"]{
    margin: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    
  }

  .inline-form-group input[type="checkbox"]:hover{
    outline: 2px solid var(--main_primary);
  }

  button[type="submit"]{
    padding-top: 10px;
    padding-left: 16px;
    padding-bottom: 10px;
    margin-top: 8px;
    border-radius: 5px;
    border: none;
    background: var(--white);
    color: var(--text);
    padding-right: 16px;
    font-weight: bold;
    cursor: pointer;
    transform: translateY(0);          
    transition: transform 0.25s ease; 

  }

  button[type="submit"]:hover {
    transform: translateY(-4px);    
    box-shadow: var(--shadow-hover);
    
  }

  /* Excluded due to security */
  /* Benefits Section */
  .benefit_section_inline{
    background-color: var(--main_primary);
  }
  .benefit_section_section_header_inline{
    font-weight: 400;
    font-size: 1.2rem !important;
  }
  
  /*How it works*/
  .how_it_works_section_inline{
    background-color: var(--background-primary);
  }

  .h2_how_it_works_text_inline{
    color: var(--main_primary)
  }
  .p_how_it_workstext_inline{
    color: var(--white)!important; 
    font-weight: 500;
  }

  .svg_linie_section{
    margin-top: -5rem;
  }

  /*Supported shops  */
  .section_supported_inline{
    background-color: var(--white);
  }

  .h2_supported_text_inline{
    color: var(--text);
  }
  .p_supported_text_inline{
    color: var(--text)!important; 
    font-weight: 400; 
  }

  .shop-circle-right-middle_inline{
    transform: scale(1.3);
  }

  .section_price_inline{
    background-color: var(--background-primary);
  }

  .h2_price_text_inline{
    color: var(--white);
  }
  .p_price_text_inline{
    color: var(--white) !important; 
    font-weight: 500; 
    margin-bottom: 5rem;
  }

  .price-card-title_inline{
    display: flex; 
    justify-content: center; 
    text-align: center; 
    font-size: 0.9rem; 
    font-weight: 500;
  }

  .compare_section_inline{
    background-color: var(--main_primary);
  }

  .slider-text_inline{
    font-weight: 600;
  }

  .saving-title_inline{
    text-decoration: underline;
  }

  .cost-overview-compare-section_500_inline{
    font-weight: 500;
  }

  .cost-overview-compare-section_300_inline{
    font-weight: 300;
  }

  .cost-overview-compare-section_500_more_inline{
    font-weight: 500; 
    font-size: 1.2rem; 
    color: red;
  }

  .cost-overview-compare-section_500_more_more_inline{
    font-weight: 500;  
    font-size: 1.2rem; 
    color: green;
  }

  .contact_us_inline{
    background-color: var(--background-secondary);
  }

  .more_insides_inline{
    background-color: var(--main_primary);
  }

  .h2_more_insides_text_inline{
    color: var(--text);
  }
  .p_more_insides_text_inline{
    color: var(--text) !important; 
  }

  .h2_contact_us_text_inline{
    color: var(--main_primary);
  }
  .p_contact_us_text_inline{
    color: var(--white) !important; 
  }

  .contact-section-box_inline{
    display: flex; 
    justify-content: center; 
    color: var(--text); 
    font-weight: 400;
  }

  .form-group_a_inline{
    text-decoration: none; 
    color: var(--text); 
    font-weight: 500;
  }

  .checkbox_inline_{
    display:none;
  }

  .end-cta_section_inline{
    align-items: center;
  }

  .h2_end-cta_text_inline{
    color: var(--main_primary);
  }
  .p_end-cta_text_inline{
    color: var(--white) !important; 
  }



  /* more_insides ========================== */
  .more_insides-section{
    margin-top: 60px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 60px;
    padding-right: 16px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 16px;
    max-width: 1300px;
    align-items: stretch;
    flex-wrap: wrap;
    align-items: stretch;
    display: flex;
    gap: 20px;
    justify-content: center;

  }

  .more_insides-card{
    max-width: 300px;
    min-height: 400px;
    background: var(--white);
    border-radius: 10px;  
    flex-basis: 260px;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text);
    cursor: pointer;
    border: 1px solid var(--text);
    transform: translateY(0);          
    transition: transform 0.25s ease; 
    text-decoration: none; 
  }

  .more_insides-card:hover{
    transform: translateY(-4px);    
    box-shadow: var(--shadow-hover);
  }

  .more_insides-card img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left center;
  } 

  .more-insides-pic-holder-logo{
    width: 120px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    padding-bottom: 0.5rem;

  }

  .more-insides-pic-holder-logo-eBay{
    width: 120px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    margin-top: -2.5rem;
    margin-bottom: -2.7rem;
    padding-bottom: 0.5rem;

  }

  

  .more_insides-card-title_inline{
    display: flex; 
    justify-content: center; 
    text-align: center; 
    font-size: 0.9rem; 
    font-weight: 500;
  }



  .more_insides-card-title{
    font-size: 1rem;
    padding-top: 0.3rem;
    color: var(--main_primary);
    display: flex;
    justify-content: center;
    margin: 0;
    align-items: center;
    
  } 
  .more_insides-div-line{
    background: var(--text);
    width: 100%;
    height: 1px;
    border: none;
    margin: 0;
  }


  .more-insides-pic-holder{
    max-width: 100%;
    height: auto;      
    object-fit: cover;
    object-position: center;
    display: block;

    /*filter: blur(1px);*/


  }


  .logo-small-version{
    width: auto !important;
    max-width: 50% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }



  

  




  
  /* Responsive  ============================*/
  @media (max-width: 1259px) {   /*Tablet */
    .hero-inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }

    .hero-media {
      justify-content: flex-start;
    }

    .hero-picture-wrapper{
      display: flex;
      align-items: center;
      justify-content: center;


      width: 100%;
    }


    
    #hero-section{
      margin-top: 0;
    }
 

    /* Benefits =========0 */

    .benefits-grid {
      grid-template-columns: minmax(0, 1fr);
      padding-left: 2rem;
      padding-right: 2rem;
    }
    

     /* How it works ========= */
    .linie-svg{
      padding-top: 1rem;
      margin-top: -5rem;
    }
    .bricks-section{
      flex-direction: column;
      flex-wrap: nowrap;
    }
    .brick.special-offset-block_1 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }
    .brick.special-offset-block_2 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }
    .brick.special-offset-block_3 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }
    .brick.special-offset-block_4 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }

     /* Reference ======= */
    .profile-card-section {
      padding-left: 2rem;
      padding-right: 2rem;
      flex-wrap: wrap;
    }

    .profile-card {
      max-width: 100%;
      flex: 1 1 100%;       
    }

    /* Function of Mavabit =============== */


    .section-supported-shops{
      max-width: 1200px;          
      width: calc(100% - 4rem);   
      max-height: 500px;           
      margin: 0 2rem; 
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      background: var(--main_primary);
      padding: 1rem;
      box-sizing: border-box;
    }
    .mavabit_function_img_mobile{
      display: block;
      z-index: 999;
      max-height: 450px;
      height: auto;
      width: auto;
    }
    .link-lines{
      display: none;
    }
    .shop-circle{
      display: none;
    }
    .shop-circle-left{
      display: none;
    }
    .shop-circle-center{
      display: none;
    }
    .shop-circle-right-top{
      display: none;
    }
    .shop-circle-right-middle{
      display: none;
    }

    .shop-circle-right-bottom{
      display: none;
    }
    .shop-circle-content{
      display: none;
    }

    /* Compare Section =========== */
    .section-compare-service{
      flex-direction: column;
      padding-left: 0.8rem;
      padding-right: 0.8rem;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      
    }
    

    .switcher-wrapper{
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow-x: hidden;
    }

    .button-group{
      display: flex;
      gap: 1rem;
      flex-direction: column;
      box-shadow: 0;
      flex-wrap: wrap;
    }
    .button-group .btn:focus,
    .button-group .btn:active {
      outline: none;
      box-shadow: none !important;
    }

    

    #plan-starter:checked + label,
    #plan-business:checked + label,
    #plan-premium:checked + label {
      box-shadow: none;
    }


    .slider-wrapper{
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .slider-text{
      font-size: 0.1rem;
      
    }



    .two-boxes-compare-service{
      flex-direction: column;
      display: flex;
      
    }
    .two-boxes-compare-service.left{
      flex-direction: column;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .left-boxes-compare-service-wrapper{
      flex-direction: column;
      flex-wrap: nowrap;      
      font-size: 2rem;
   
    }
    .two-boxes-compare-service.right{
      width: 100%;
          
      text-align: center;
      padding: 20px;
    }
    .right-boxes-compare-service-wrapper{
      display: flex;
      flex-direction: column;  
      justify-content: center; 
      align-items: center;     
    }

    .saving-title{
      font-size: 1.2rem;
      font-weight: 400;
    }

    .saving-amount{
      font-size: 1.8rem;      
    }

    .cost-overview-compare-section{
      font-size: 1rem;
      
    }

    /* FAQ ========== */
    .show-more-questions {
      text-decoration: none;
      font-family: var(--font-used);
      font-size: 1rem;
      font-weight: 700;
      color: var(--main_primary);
    }

    .show-more-questions:hover {
      color: var(--text);
    }

    /* Contact Form ========== */

    .contact-section{
      flex-direction: column;
      margin-right: 2rem;
      margin-left: 2rem;
    }

    .contact-section-box.left{
      padding: 0;

    }

    .contact-section-box.right{
      
    }
    

    .nav-inside {
      gap: 1rem;
    }
  }

  
  
  @media (max-width: 785px) {  /*Smartphone */

    html,
    body {
      overflow-x: hidden !important;
      
    }

    .nav{
      padding-right: 1rem;
      padding-left: 1rem;
    }


    .section-header{
      padding-right: 1rem;
      padding-left: 1rem;
      font-size: 0.80rem;
      
      
    }
    .section-header h2{
      padding-right: 1.5rem;
      padding-left: 1.5rem;
      font-size: 1.8rem;
      font-weight: 600;      
    }
    .section-header p{
      padding-right: 1.5rem;
      padding-left: 1.5rem;
      font-size: 0.85rem;
      font-weight: 400;
      
    }

    .beta-banner{
      flex-direction: row;
    }

    .beta-banner-btn{
      display: inline-block;
      white-space: normal;  
      word-wrap: break-word;
      text-align: center;
    }

    .hero-content h1{
      font-size: 1.9rem;
      flex-wrap: wrap; 
      flex-direction: column;
    }

    #hero-section{
      margin-top: 0;
      margin-right: 1.5rem;
      margin-left: 1.5rem;
    }

    .flag-placed{
      white-space: nowrap;
    }

    #text-slide {
      font-size: 28px;
    }




    .hero-picture-wrapper, .hero-picture-wrapper img{
      transform: none !important;
      filter: none !important;
      transition: none !important;
      margin-top: -1rem;
      margin-bottom: 1rem;
    }

    .hero-picture-wrapper:hover,
    .hero-picture-wrapper img:hover{
      transform: none;
      filter: none;
    }

    .hero {
      padding-top: 4rem;
    }

    .hero-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.3rem;
    }


    /* BTN ======== */ 
    .padding-section{
      margin-top: 0;
      padding-top: 1.5rem;
      padding-right: 0;
      padding-left: 0;
      padding-bottom: 2rem;
    }

    .btn {
      white-space: normal;
      width: 100%;          
      text-align: center;
    }

    .btn.benefits-btn-cta{
      white-space: normal;
      width: 80%;          
      text-align: center;
    }

    .btn.end-of-cta {
      white-space: normal;
      width: 80%;          
      text-align: center;
    }

    /* Benefits =========0 */

    .benefits-grid {
      grid-template-columns: minmax(0, 1fr);
      margin-left: 1rem;
      margin-right: 1rem;
    }

    .benefit_section_section_header_inline{
      font-weight: 400!important;
      font-size: 1rem !important;
    }

    .logo-wrapper img{
      max-width: 60%;
      height: auto;      
      object-fit: cover;
      object-position: center;
      display: block;

    }

    .benefits-card {
      padding-right: 1rem;
      padding-top: 1.5rem;   
      border-radius: 18px; 
      border: 2px solid var(--text);
      padding-bottom: 1.5rem;
      padding-left: 1rem;    
      min-height: 250px;
      background: var(--white);    
      color: var(--text);
      box-shadow: var(--shadow);
      text-align: center;
      transform: translateY(0);          
      transition: transform 0.25s ease;   
    }

    .benefits-card h3 {
      text-align: center;
      display: flex;
      font-weight: 700;
      font-size: 1.1rem;
      
    }

    .benefits-card p {
      margin: 0;
      font-size: 0.85rem;
      color: var(--text);

    }

    /* How it works ========= */
    .linie-svg{
      padding-top: 1rem;
      margin-top: -5rem;
    }
    .bricks-section{
      flex-direction: column;
      flex-wrap: nowrap;
    }
    .svg_linie_section{
      margin-top: -3rem;
    }

      
    .brick-text-headline{
      font-size: 1.5rem; 
      font-weight: 500;
      
    }

    .brick-text-below-headline{
      font-size: 1rem; 
      font-weight: 400;    
      color: var(--text);
    }

    .brick-description {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      font-size: 0.85rem; 
      font-weight: 400;    
      color: var(--text);
    }


    .step-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step {
      width: 70px;
      height: 70px;
      padding-top:0.5rem;
      border-radius: var(--radius-xl);
      border: 1px solid var(--main_secondary);
      background: var(--main_secondary);
      color: var(--text);
      margin-top: 2rem;
      font-size: 3rem; 
      font-weight: bold;
      box-shadow: 0 0 20px var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      
    }

    .brick.special-offset-block_1 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }
    .brick.special-offset-block_2 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }
    .brick.special-offset-block_3 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }
    .brick.special-offset-block_4 {
      margin-top: 0;
      margin-left: 2rem;
      margin-right: 2rem;
      padding-bottom: 2rem;
    }

    /* Function of Mavabit =============== */


    .section-supported-shops{
      max-width: 1200px;          
      width: calc(100% - 4rem);   
      max-height: 300px;           
      margin: 0 2rem;    
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      background: var(--main_primary);
      padding: 0.5rem;
      box-sizing: border-box;
    }


    .cta-function-text{
      text-align: center;
      font-size: 1rem;
      font-weight: 400;
      color: var(--text);
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }



    .mavabit_function_img_mobile{
      display: block;
      z-index: 999;
      max-height: 280px;
      height: auto;
      width: auto;
    }
    .link-lines{
      display: none;
    }
    .shop-circle{
      display: none;
    }
    .shop-circle-left{
      display: none;
    }
    .shop-circle-center{
      display: none;
    }
    .shop-circle-right-top{
      display: none;
    }
    .shop-circle-right-middle{
      display: none;
    }

    .shop-circle-right-bottom{
      display: none;
    }
    .shop-circle-content{
      display: none;
    }

    .function-cta-btn-wrapper{
      margin-top: 400px
   
    }

    /* FAQ ========== */
    .show-more-questions {
      text-decoration: none;
      font-family: var(--font-used);
      font-size: 1rem;
      font-weight: 700;
      color: var(--main_primary);
    }

    .show-more-questions:hover {
      color: var(--text);
    }
    

    /* Reference ======= */
    .profile-card-section {
      padding-left: 2rem;
      padding-right: 2rem;
      flex-wrap: wrap;
    }

    .profile-card {
      max-width: 100%;
      flex: 1 1 100%;       
    }

    /* Prices =============== */ 
    .pricing-section{
      flex-direction: column;
      padding-right: 2rem;
      padding-left: 2rem;
      margin-top: -2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .price-card{
      max-width: 100%;
    }

    .price-card-features{
      font-size: 0.64rem;
    }

    .price-card-features li::before{
      content: "\2714";
      color: green !important;
      font-weight: bold;
      padding-right: 0.8em;
    }

    .price-card-title{
      font-size: 2rem;
      margin-top: -1rem;
    }

    .price-value{
      font-size: 1.2rem;
      margin-bottom: 1.8rem;
    }

    .price-value.on-demand{
      font-size: 0.7rem;
    }

    .headline-package{
      margin: 0;
      margin-top: -1.8rem;
      font-size: 1rem;
    }

    .price-badge{
      font-size: 0.7rem;
    }

    .small-bottom-margin-added{
      margin-bottom: 0;
      padding: 0;
    }


    .btn.price-cta{
      font-size: 0.7rem;
    }

    .small-bottom-margin-added{
      margin-bottom: 2rem;
    }
    

    /* Q & A ================ */
    .faq-section-item{
      padding-right: 1rem;
      padding-left: 1rem;
      font-size: 0.9rem;
    }
    .more-questions-wrapper article{
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 1rem;
      padding-top: 1rem;
      font-weight: 700;
    }

    /* Compare Section =========== */
    .section-compare-service{
      flex-direction: column;
      padding-left: 0.8rem;
      padding-right: 0.8rem;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      
    }
    

    .switcher-wrapper{
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow-x: hidden;
    }

    .button-group{
      display: flex;
      gap: 1rem;
      flex-direction: column;
      box-shadow: 0;
      flex-wrap: wrap;
    }
    .button-group .btn:focus,
    .button-group .btn:active {
      outline: none;
      box-shadow: none !important;
    }

    

    #plan-starter:checked + label,
    #plan-business:checked + label,
    #plan-premium:checked + label {
      box-shadow: none;
    }


    .slider-wrapper{
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 300px;
    }

    .slider-text{
      font-size: 0.1rem;
      flex-wrap: wrap;   
     
    }



    .two-boxes-compare-service{
      flex-direction: column;
      display: flex;
      
    }
    .two-boxes-compare-service.left{
      flex-direction: column;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .left-boxes-compare-service-wrapper{
      flex-direction: column;
      flex-wrap: nowrap;      
      font-size: 1.9rem;
   
    }
    #slider-text{
      font-size: 1.2rem;
    }
    .two-boxes-compare-service.right{
      width: 100%;
          
      text-align: center;
      padding: 20px;
    }
    .right-boxes-compare-service-wrapper{
      display: flex;
      flex-direction: column;  
      justify-content: center; 
      align-items: center;     
    }

    .saving-title{
      font-size: 1.2rem;
      font-weight: 400;
    }

    .saving-amount{
      font-size: 1.8rem;      
    }

    .cost-overview-compare-section{
      font-size: 1rem;
      
    }

    /* Contact Form ========== */

    .contact-section{
      flex-direction: column;
      margin-right: 1rem;
      margin-left: 1rem;

    }

    .contact-section-box.left{
      padding: 0;

    }

    .contect-left-title{
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--text);
      

    }
    .contect-left-subtitle{
      padding: 0;
      margin-top: 1rem;
      font-size: 0.85rem;
    }

    .contact-section-box.right{
      padding: 1rem;
      margin: 0;
    }

    .contact-section-box.right h1{
      font-size: 1.2rem;
      font-weight: 800;
    }

    .form-group label{
      font-size: 0.85rem;
    }
      
    .form-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .section {
      padding: 3.5rem 0;
    }
  }