

<style>


@media (max-width: 768px) {
  .column33 {
    width: 100% !important;
  }
  .spacer{
    height: 220px;
  }
}

.column33 {
  float: left; width: 25%; padding: 10px; box-sizing: border-box; justify-content: center; display: flex;
}

.row33::after {
  content: ""; clear: both; display: table;
}

.row33 {
  background-color: #313131; padding-bottom: 30px;
}

.column33 a {
  cursor: pointer; color: white; text-decoration: none !important;
}

.column33 a:hover {
  color: #7a7a7a;
}
  /* //////////  Dealer.com CSS  ///////////////// */
  .container-max-md {
      max-width: unset !important;
  }

  @media(max-width:1200px) {
      .px-xl-8 {
          padding-left: 0% !important;
          padding-right: 0% !important;
      }
  }

  @media(max-width:992px) {
      .px-xl-8 {
          padding-left: 0% !important;
          padding-right: 0% !important;
      }
  }

  @media(max-width:768px) {
      .p-md-5 {
          padding: 0% !important;
      }
  }

  .p-4 {
      padding: 0% !important;
  }

  /* ////////// Start Collapsible ///////////////// */

  summary {
      display: block;
  }

  summary::-webkit-details-marker {
      display: none;
  }

  .p-section-faq__item:nth-of-type(n+2) {
      margin-top: 10px;
  }

  .p-faq__question {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 8px 16px;
      color: rgb(0, 0, 0);
      background-color: #f2f2f2;
      cursor: pointer;
      font-size: 26px;
      font-weight: 600;

  }

  @media (max-width: 1440px) {
      .p-faq__question {
          font-size: 24px;
      }
  }

  @media (max-width: 768px) {
      .p-faq__question {
          font-size: 20px;
      }
  }

  @media (max-width: 425px) {
      .p-faq__question {
          font-size: 18px;
      }
  }


  .p-faq__icon {
      display: block;
      flex-shrink: 0;
      position: relative;
      width: 40px;
      transform-origin: center;
      padding: 24px;
      border-radius: 50%;
      background-color: rgb(0, 0, 0);
  }

  .p-faq__icon::after {
      right: 15px;
      content: "";
      position: absolute;
      display: block;
      width: 16px;
      height: 16px;
      transition: transform .3s;
      transform: translateY(-80%) rotate(45deg);
      border-right: 2px solid rgb(255, 255, 255);
      border-bottom: 2px solid rgb(255, 255, 255);
  }

  .is-opened .p-faq__icon::after {
      transform: translateY(-25%) rotate(-135deg);
  }

  .p-faq__answer {
      overflow: hidden;
  }

  .p-faq__answer-inner {
      padding: 16px 32px;
      color: rgba(173, 183, 186, 1);
      /* border: 2px solid #4B7CB6; */
      border-top: none;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
      font-size: 16px;
      font-weight: 700;
  }

  .l-inner {
      margin: 0 auto;
      /* max-width: 648px; */
      width: 100%;
      /* padding: 24px; */
  }

  /* ////////// End Collapsible ///////////////// */


  /* ////////// START IMG-HOVER-ZOOM CSS ///////////////// */

  .img-hover-zoom {
      height: inherit;
      /* [1.1] Set it as per your need */
      overflow: hidden;
      /* [1.2] Hide the overflowing of child elements */
  }

  /* [2] Transition property for smooth transformation of images */

  .img-hover-zoom img {
      transition: transform .5s ease;
  }

  /* [2] Transition property for smooth transformation of images */

  .img-hover-zoom>.img {
      transition: transform .5s ease;
  }

  /* [3] Finally, transforming the image when container gets hovered */

  .img-hover-zoom:hover img {
      transform: scale(1.1);
  }

  /* [3] Finally, transforming the image when container gets hovered */

  .img-hover-zoom:hover>.img {
      transform: scale(1.1);
  }

  /* ////////// END IMG-HOVER-ZOOM CSS ///////////////// */


  .container {
      width: 100%;
      padding-right: 0px !important;
      padding-left: 0px !important;
      margin-right: auto;
      margin-left: auto;
  }

  .container-fluid {
      padding-right: 10px !important;
      padding-left: 10px !important;
      margin-right: auto;
      margin-left: auto;
  }

  .row {
      margin-right: 0px;
      margin-left: 0px;
  }

  .container.con1 {
      width: 70%;
  }

  @media (max-width: 769px) {
      .container.con1 {
          width: 90%;
      }
  }

  .Main-Banner-IMG {
      background-size: cover;
      background-position: center center;
      background-image: url(https://irp.cdn-website.com/88820a16/dms3rep/multi/BMW-MY23-iX-Overview-FMA-Desktop.webp);
      background-repeat: no-repeat;
      width: 100%;
      display: flex;
      align-items: flex-end;
      height: 650px;
  }

  @media(max-width: 1024px) {
      .Main-Banner-IMG {
          height: 341px;
      }

  }

  @media(max-width: 500px) {
      .Main-Banner-IMG {
          height: 341px;
      }

  }

  @media(max-width: 425px) {
      .Main-Banner-IMG {
          height: 170px;
          width: 100%;
          background-image: url(https://irp.cdn-website.com/88820a16/dms3rep/multi/BMW-MY23-iX-Overview-FMA-Desktop.webp);
      }

  }

  .container2-banner {
      display: flex;
      align-items: flex-end;
      width: 100%;
      height: 650px;
      background-color: #0000002e;
  }

  .button1 {

      height: 50px;
      width: 50%;
      background-color: rgb(0, 0, 0) !important;
      color: #eee !important;
      line-height: 34px;
      border: #fff 2px solid;
      transition: .25s;
      font-size: 14px;
  }

  @media(max-width: 425px) {
      .button1 {
          padding-top: -3px;
          margin-bottom: 21px;
          width: 100%;
      }

  }



  .button1:hover {
      height: 50px;
      width: 50% !important;
      background-color: #333333 !important;
      color: rgb(255, 255, 255) !important;
      line-height: 34px;
  }
  @media(max-width: 425px) {
      .button1:hover {
      height: 50px;
      width: 100% !important;
      background-color: #333333 !important;
      color: rgb(255, 255, 255) !important;
      line-height: 34px;

  }}

  .button2 {

      height: 50px;
      width: 100% !important;
      background-color: rgb(0, 0, 0) !important;
      color: #eee !important;
      line-height: 34px;
      border: #ebebeb 2px solid;
      transition: .25s;
      font-size: 14px;

  }

  .button2:hover {
      height: 50px;
      width: 100% !important;
      background-color: #000000af !important;
      color: rgb(255, 255, 255) !important;
      line-height: 34px;
  }


  @media (max-width: 767px) {
      .button3 {
          width: 100% !important;
          margin-bottom: 10px;
          padding-top: 0px;
          padding-bottom: 5px;
      }
  }

  @media (max-width: 500px) {
      .button3 {
          width: 100% !important;
          margin-bottom: 10px;
      }
  }

  @media (max-width: 425px) {
      .button3 {
          width: 100% !important;
          padding-top: 3px;
      }
  }



  .title-48-38 {
      font-size: 48px !important;
      font-weight: 700 !important;
      padding-left: 50px;
  }

  @media(max-width: 1024px) {
      .title-48-38 {
          font-size: 30px !important;
      }
  }

  @media(max-width: 768px) {
      .title-48-38 {
          font-size: 24px !important;
      }
  }

  @media(max-width: 425px) {
      .title-48-38 {
          font-size: 34px !important;
          padding-left: 1px;
      }
  }

  @media(max-width: 320px) {
      .title-48-38 {
          font-size: 35px !important;
      }
  }


  .title-30-24 {
      font-size: 24px !important;
      font-weight: 700 !important;
  }

  @media(max-width: 2560px) {
      .title-30-24 {
          font-size: 25px !important;
      }
  }

  @media(max-width: 1024px) {
      .title-30-24 {
          font-size: 22px !important;
      }
  }

  @media (max-width: 768px) {
      .title-30-24 {
          font-size: 18px !important;
      }
  }

  @media (max-width: 425px) {
      .title-30-24 {
          font-size: 18px !important;
      }
  }

  @media (max-width: 500px) {
      #btn-hover-effects {
          width: 100% !important;
      }
  }


  .spacer {
      height: 600px;
  }

  @media (max-width: 1024px) {
      .spacer {
          height: 300px;
      }
  }

  @media (max-width: 768px) {
      .spacer {
          height: 300px;
      }
  }

  @media (max-width: 500px) {
      .spacer {
          height: 50px;
      }
  }

  @media (max-width: 578px) {
      .spacer {
          height: 50px;
      }
  }

  @media (max-width: 320px) {
      .spacer {
          height: 15px;
      }
  }

  .title-36-29 {
      font-size: 36px !important;
      font-weight: 600 !important;
  }

  @media (max-width: 1024px) {
      .title-36-29 {
          font-size: 30px !important;

      }
  }

  @media (max-width: 768px) {
      .title-36-29 {
          font-size: 22px !important;

      }
  }

  .paragraph {
      font-size: 22px !important;

  }

  @media (max-width: 2560px) {
      .paragraph {
          font-size: 24px !important;
      }
  }

  @media (max-width: 1440px) {
      .paragraph {
          font-size: 19px !important;
      }
  }

  @media (max-width: 1024px) {
      .paragraph {
          font-size: 16px !important;
      }
  }

  @media (max-width: 768px) {
      .paragraph {
          font-size: 14px !important;
      }
  }

  @media (max-width: 425px) {
      .paragraph {
          font-size: 18px !important;
      }
  }

  @media (max-width: 1600px) {
      #IMG_BOT_RES {
          padding-top: 142px;
      }
  }

  @media (max-width: 1079px) {
      #IMG_BOT_RES {
          padding-top: 187px;
      }
  }

  @media (max-width: 767px) {
      #IMG_BOT_RES {
          padding-top: 187px;

      }
  }

  .picture {

      object-fit: cover;
      width: 100%;
      height: 535px;
  }

  @media (max-width: 2560px) {
      .picture {
          height: 650px;
          object-fit: cover;
      }
  }
  @media (max-width: 768px) {
      .picture {
          height: 300px;
          object-fit: cover;
      }
  }

  @media (max-width: 425px) {
      .picture {
          height: 289px;
          object-fit: cover;
      }
  }

  @media (max-width: 320px) {
      .picture {
          height: 257px;
          object-fit: cover;

      }
  }

  @media (max-width: 375px) {
      .picture {
          height: 200px;
          object-fit: cover;

      }
  }

  #IMG_BOT_RES {
      height: 600px;
  }

  @media (max-width: 2560px) {
      #IMG_BOT_RES {
          height: 600px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 1px;
      }
  }

  @media (max-width: 1440px) {
      #IMG_BOT_RES {
          height: 565px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 1px;
      }
  }

  @media (max-width: 1024px) {
      #IMG_BOT_RES {
          height: 572px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 1px;
      }
  }

  @media (max-width: 768px) {
      #IMG_BOT_RES {
          height: 500px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 1px;
      }
  }

  @media (max-width: 425px) {
      #IMG_BOT_RES {
          height: 450px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 1px;
      }
  }

  @media (max-width: 375px) {
      #IMG_BOT_RES {
          height: 420px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 4px;
      }
  }

  @media (max-width: 320px) {
      #IMG_BOT_RES {
          height: 350px;
          object-fit: cover;
          padding-bottom: 80px;
          padding-top: 4px;
      }
  }

  .pic {
      height: 350px;
      width: 100%;
      object-fit: cover;
  }

  @media (max-width: 1024px) {
      .pic {
          height: 250px;
      }
  }

  @media (max-width: 768px) {
      .pic {
          height: 200px;
      }
  }

  @media (max-width: 320px) {
      .pic {
          height: 150px;
      }
  }

  #overpic {
      padding: 3% 2%;
      background-color: rgba(246, 246, 246, 1) !important;
      color: #ffffff;
      background-repeat: no-repeat;
      background-size: cover;
      height: 850px;
  }
  @media (max-width: 1440px) {
      #overpic {
          height: 720px;
      }
  }
  @media (max-width: 1024px) {
      #overpic {
          height: 515px;
      }
  }
  @media (max-width: 768px) {
      #overpic {
          height: 387px;
      }
  }
  @media (max-width: 425px) {
      #overpic {
          height: 410px;
      }
  }



  .small {
      height: 400px;
      width: 100%;
      object-fit: cover;
  }

  @media (max-width: 1440px) {
      .small {
          height: 335px;
      }
  }

  @media (max-width: 1024px) {
      .small {
          height: 245px;
      }
  }

  @media (max-width: 768px) {
      .small {
          height: 225px;
      }
  }
  @media (max-width: 425px) {
      .small {
          height: 370px;
      }
  }

  .collage {
      height: 550px;
      width: 100%;
      object-fit: cover;
  }
  @media (max-width: 768px) {
      .collage {
          height: 457px;
      }
  }
  @media (max-width: 425px) {
      .collage {
          height: 220px;
      }
  }
  /* <a class="btn" href="" id="btn-hover-effects" onclick="ggFramework.stopPropagation(); return ggToolbar.apps.chat.goMobile(); return false;">Pre-Order Yours</a> */
</style>

