@media screen and (max-width: 768px) {
  .nav {
    display: none !important; /* Hide the current navbar */
  }

  .medianav {
    display: flex !important; /* Show the mobile navbar */
  }
  body{
    overflow-x: hidden;
  }
  .main {
    display: block;
  }
  .main .left {
    width: 100% !important;
    padding-left: 10px !important;
    text-align: center;
  }
  .main .left h1 {
    width: 100% !important;
    font-size: 20px;
  }
  .main .left h2 {
    margin-left: 2px;
    font-size: 45px !important;
  }
  .main .left h2 b {
    padding-left: 3px;
  }
  .main .right {
    display: none;
  }
  .bar h3 {
    font-size: 16px !important;
    /* background-color: aqua; */
  }
  .bar p {
    font-size: 13px !important;
  }
  .value {
    display: block !important;
    padding-bottom: 0px !important;
  }
  .value .card {
    margin: auto !important;
    margin-bottom: 90px !important;
    height: 250px !important;
    width: 320px !important;
  }
  .start {
    display: block;
    width: 100%;
  }
  .start .left {
    display: none !important;
  }
  .start .right {
    width: 100%;
    display: block !important;
  }
  .start .right h1 {
    font-size: 28px !important;
    font-weight: 400;
    width: 100% !important;
  }
  .start .right ul {
    margin-left: 20px !important;
  }
  .start .right .btn {
    margin-bottom: 20px !important;
    margin-left: 5px !important;
    gap: 10px !important;
  }
  .buy span {
    font-size: 13px;
  }
  .buy h1 {
    display: block;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 20px;
    margin-left: 10px;
  }
  .buy .cards {
    display: block !important;
    margin: auto !important;
    margin-bottom: 10px !important;
  }
  .buy .cards .card {
    margin-bottom: 20px;
    width: 320px !important; 
    margin: auto !important;
    margin-bottom: 10px !important;
  }
  .choose{
    margin: auto !important;
    margin-bottom: 10px !important;
    margin-left: 11px !important;
  }
  .choose .top {
    display: block !important;
  }
  .choose .top .left {
    width: 100% !important;
   
  }
  .choose .top .left span {
    font-size: 15px !important;
    margin-left: 24px;
  }
  .choose .top .left h1 {
    font-size: 30px !important;

    margin-left: -20px !important;
  }
  .choose .top .right {
    width: 100% !important;
    margin-left: 15px;
  }
  .choose .top .right p {
    margin-top: -40px !important;
    margin-left: 20px !important;
  }
  .choose .bottom {
    display: block !important;
  }
  .choose .bottom .card {

    margin: auto !important;
    margin-bottom: 10px !important;
  }
  .packages .cards {
    display: block !important;
    
  }
  .packages h1 {
    text-align: center;
    font-size: 30px !important;
  }
  .packages .cards .card {
    /* margin-left: 40px; */
    justify-content: center;
    align-self:center ;
    margin-bottom: 10px;
    margin: auto !important;
    margin-bottom: 10px !important;

  }
  .contactcontainer {
    padding-left: 1rem;
  height: 100vh !important;


  }
  .input{
    width: 350px !important;
    height: 50px;
  }
  .contact-inputs {
    width: 250px !important;
    height: 50px;
  }
.contact-right img {
   display: none !important;
}
  .footer {
    padding-top: -20px !important;
  }
  .footer img {
    height: 40px;
    width: 100px;
    margin-top: -20px !important;
  }
  .footer h1 {
    font-size: 20px !important;
    margin-top: 20px;
  }
  .footer p{
    margin-top: 20px;
    font-size: 10px !important;
    line-height: 13px;
  }
}