banner

<style>
  .hero-image-as-background-main-container {
    width: 100%;
    height: fit-content;
    margin-top: 30px;
    margin-bottom: -100px;
  }

  .hero-image-as-background-main-container .hero-section {
    width: 100%;
    height: 412px;
    position: relative;
  }

  .hero-image-as-background-main-container .hero-section .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
  }

  .hero-image-as-background-main-container .hero-section .container {
    position: relative;
    z-index: 2;
  }

  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .hero-image-as-background-main-container .hero-section .heading-section {
    position: relative;
    left: 0;
    top: 60px;
  }

  .hero-image-as-background-main-container .hero-section .heading-section .heading {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 6px;
  }

  .hero-image-as-background-main-container .hero-section .heading-section .heading .heading-text {
    font: 400 40px "Fraunces", serif;
    color: #fff;
  }

  .m-0 {
    margin: 0 !important;
  }

  .hero-image-as-background-main-container .hero-section .heading-section .heading .hight-light-section {
    width: fit-content;
    height: fit-content;
    padding: 12px 16px;
    border-radius: 50px;
    background: #ffffff4d;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    column-gap: 6px;
    margin: 0;
  }

  .hero-image-as-background-main-container .hero-section .heading-section .heading .hight-light-section img {
    width: 20px;
    height: 20px;
  }

  .hero-image-as-background-main-container .hero-section .heading-section .heading .hight-light-section span {
    font: 600 14px "Fraunces", serif;
    color: #fff;
  }

  .hero-image-as-background-main-container .hero-section .subheading {
    width: 510px;
    font: 400 20px "Fraunces", serif;
    color: #fff;
    margin: 0;
    line-height: 30px;
  }

  .hero-image-as-background-main-container .images-main-section {
    width: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    top: -160px;
    z-index: 2;
  }

  .justify-content-between {
    -webkit-box-pack: justify !important;
    justify-content: space-between !important;
  }

  header~#maincontent .container a:not(.btn-primary):not(.btn-outline-primary) {
    color: #0070d2;
  }

  .hero-image-as-background-main-container .images-main-section .between {
    width: 49%;
    height: 336px;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    position: relative;
  }

  .hero-image-as-background-main-container .images-main-section .placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-image-as-background-main-container .heroasbackgroundImageText.bottomleft {
    position: absolute;
    bottom: 28px;
    left: 28px;
  }

  .hero-image-as-background-main-container .heroasbackgroundImageText {
    margin: 0;
    width: fit-content;
    height: fit-content;
    font: 400 22px "Fraunces", serif;
    display: flex;
    column-gap: 6px;
    -webkit-box-align: center;
    align-items: center;
  }

  @media (min-width: 1400px) {
    .container {
      max-width: 1320px;
    }
  }

  @media (max-width: 1023.98px) {
    .hero-image-as-background-main-container {
      margin-bottom: 0;
    }

    .hero-image-as-background-main-container .hero-section {
      height: 180px;
    }

    .hero-image-as-background-main-container .hero-section .heading-section {
      top: 24px;
    }

    .hero-image-as-background-main-container .hero-section .heading-section .heading .heading-text {
      font: 400 24px "Fraunces", serif;
    }

    .hero-image-as-background-main-container .hero-section .heading-section .heading .hight-light-section img {
      width: 14px;
      height: 14px;
    }

    .hero-image-as-background-main-container .hero-section .heading-section .heading .hight-light-section span {
      font: 400 12px "Fraunces", serif;
    }

    .hero-image-as-background-main-container .hero-section .subheading {
      width: 80%;
      font: 400 12px "Fraunces", serif;
    }

    .hero-image-as-background-main-container .images-main-section {
      top: -34px;
    }

    .hero-image-as-background-main-container .images-main-section .between {
      height: 215px;
    }

    .hero-image-as-background-main-container .heroasbackgroundImageText {
      font: 400 12px "Fraunces", serif;
    }
  }
</style>

<div class="experience-component experience-commerce_assets-heroImageAsBackground">
  <link rel="stylesheet"
    href="/on/demandware.static/Sites-Tanishq-Site/-/en_IN/v1770071470898/css/heroImageAsBackground.css" as="style"
    media="all" onload="this.media='all'">
  <!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
  <noscript>
    <link rel="stylesheet"
      href="/on/demandware.static/Sites-Tanishq-Site/-/en_IN/v1770071470898/css/heroImageAsBackground.css">
  </noscript>

  <input type="hidden" id="displayimagetextindesktop" value="true">
  <input type="hidden" id="displayimagetextinmobile" value="true">

  <div class="hero-image-as-background-main-container">
    <div class="hero-section">
      <img loading="lazy" class="hero-image"
        src="https://www.tanishq.co.in/dw/image/v2/BKCK_PRD/on/demandware.static/-/Library-Sites-TanishqSharedLibrary/default/dw08083f53/homepage/new-arrivals/new-arrivals-background.jpg"
        alt="image">
      <div class="container">
        <div class="heading-section">
          <div class="heading">
            <p class="heading-text m-0">New Arrivals</p>
            <p class="hight-light-section">
              <img loading="lazy"
                src="https://www.tanishq.co.in/dw/image/v2/BKCK_PRD/on/demandware.static/-/Library-Sites-TanishqSharedLibrary/default/dw631366a1/homepage/diamond-logo.png"
                alt="image">
              <span>500+ New Items</span>
            </p>
          </div>
          <p class="subheading">New Arrivals Dropping Daily, Monday through Friday. Explore the Latest Launches Now!</p>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="images-main-section hero-as-background-mobile-slider false justify-content-between">
        <a href="https://www.tanishq.co.in/shop/silver-idols?lang=en_IN" class="false between">
          <img loading="lazy" class="placeholder-image false"
            src="https://www.tanishq.co.in/dw/image/v2/BKCK_PRD/on/demandware.static/-/Library-Sites-TanishqSharedLibrary/default/dw072cbafb/homepage/new-arrivals/silver-idol.jpg"
            alt="image">
          <p class="heroasbackgroundImageText null null false false false false false bottomleft"
            style="color:#ffffff;">
            Silver Idols
          </p>
        </a>

        <a href="https://www.tanishq.co.in/shop/floral-bloom?lang=en_IN" class="false between">
          <img loading="lazy" class="placeholder-image false"
            src="https://www.tanishq.co.in/dw/image/v2/BKCK_PRD/on/demandware.static/-/Library-Sites-TanishqSharedLibrary/default/dw426e0bef/homepage/new-arrivals/floral-bloom.jpg"
            alt="image">
          <p class="heroasbackgroundImageText false false false false false bottomleft" style="color:#ffffff;">
            Floral Bloom
          </p>
        </a>
      </div>
    </div>

  </div>
</div>