@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz@9..144&family=Montserrat:wght@400&display=swap');

  body {
      background-color: #ECF3F3;
      font-family: 'Fraunces', serif;
      font-family: 'Montserrat', sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: 'Fraunces', serif;
  }

  p {
      font-family: 'Montserrat', sans-serif;
  }

  a {
      text-decoration: none;
  }

  li {
      list-style: none;
  }

  .navbar {
      background-color: #ECF3F3 !important;

  }

  .nav-item {
      padding: 0 20px;
  }

  .main-logo {
      width: 200px;
  }

  .ic-clr {
      padding: 0 7px;
      color: black;
      font-size: 15px;
  }

  /* =================================== */
  /* Hero section Start */

  .hero-section,
  .about-section {

      background-position: center;
      background-repeat: no-repeat;
  }

  .hero-title-name {
      font-size: 50px;
      font-weight: bolder;
  }

  .slider {
      text-align: -webkit-center !important;
  }

  /* Hero section END */
  /* =================================== */

  /* =================================== */
  /*About section Start */

  .about-section {
      padding: 0 50px;
  }

  .about-para {
      text-align: justify;
  }

  /* About section END */
  /* =================================== */

  /* =================================== */
  /* Contact section Start */
  .contact-box {
      padding: 20px 40px;
      background-color: #f8f7f7;
      box-shadow: 0 0 20px 0 #f6e3e3;
  }

  .custom-btn {
      width: 130px;
      height: 40px;
      color: #fff;
      border-radius: 5px;
      padding: 10px 25px;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
      box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
          7px 7px 20px 0px rgba(0, 0, 0, .1),
          4px 4px 5px 0px rgba(0, 0, 0, .1);
      outline: none;
  }

  .btn-16 {
      border: none;
      color: #000;
  }

  .btn-16:after {
      position: absolute;
      content: "";
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      direction: rtl;
      z-index: -1;
      box-shadow:
          -7px -7px 20px 0px #fff9,
          -4px -4px 5px 0px #fff9,
          7px 7px 20px 0px #0002,
          4px 4px 5px 0px #0001;
      transition: all 0.3s ease;
  }

  .btn-16:hover {
      color: #000;
  }

  .btn-16:hover:after {
      left: auto;
      right: 0;
      width: 100%;
  }

  .btn-16:active {
      top: 2px;
  }


  /* Contact section END */
  /* =================================== */
  /* Awards section Start */


  .page-content {
      display: grid;
      grid-gap: 1rem;
      padding: 1rem;
      max-width: 1024px;
      margin: 0 auto;
      font-family: var(--font-sans);
  }

  @media (min-width: 600px) {
      .page-content {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (min-width: 800px) {
      .page-content {
          grid-template-columns: repeat(4, 1fr);
      }
  }

  .card {
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding: 1rem;
      width: 100%;
      text-align: center;
      color: whitesmoke;
      background-color: whitesmoke;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
  }

  @media (min-width: 600px) {
      .card {
          height: 350px;
      }
  }

  .card:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 110%;
      background-size: cover;
      background-position: 0 0;
      transition: transform calc(var(--d) * 1.5) var(--e);
      pointer-events: none;
  }

  .card:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%;
      pointer-events: none;
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
      transform: translateY(-50%);
      transition: transform calc(var(--d) * 2) var(--e);
  }

  .card:nth-child(1):before {
      background-image: url(https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  }

  .card:nth-child(2):before {
      background-image: url(https://images.unsplash.com/photo-1533903345306-15d1c30952de?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  }

  .card:nth-child(3):before {
      background-image: url(https://images.unsplash.com/photo-1545243424-0ce743321e11?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  }

  .card:nth-child(4):before {
      background-image: url(https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  }

  .content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 1rem;
      transition: transform var(--d) var(--e);
      z-index: 1;
  }

  .content>*+* {
      margin-top: 1rem;
  }

  .title {
      font-size: 1.3rem;
      font-weight: bold;
      line-height: 1.2;
  }

  .copy {
      font-family: var(--font-serif);
      font-size: 1.125rem;
      font-style: italic;
      line-height: 1.35;
  }

  .btn {
      cursor: pointer;
      margin-top: 1.5rem;
      padding: 0.75rem 1.5rem;
      font-size: 0.65rem;
      font-weight: bold;
      letter-spacing: 0.025rem;
      text-transform: uppercase;
      color: white;
      background-color: black;
      border: none;
  }

  .btn:hover {
      background-color: #0d0d0d;
  }

  .btn:focus {
      outline: 1px dashed yellow;
      outline-offset: 3px;
  }

  @media (hover: hover) and (min-width: 600px) {
      .card:after {
          transform: translateY(0);
      }

      .content {
          transform: translateY(calc(100% - 4.5rem));
      }

      .content>*:not(.title) {
          opacity: 0;
          transform: translateY(1rem);
          transition: transform var(--d) var(--e), opacity var(--d) var(--e);
      }

      .card:hover,
      .card:focus-within {
          align-items: center;
      }

      .card:hover:before,
      .card:focus-within:before {
          transform: translateY(-4%);
      }

      .card:hover:after,
      .card:focus-within:after {
          transform: translateY(-50%);
      }

      .card:hover .content,
      .card:focus-within .content {
          transform: translateY(0);
      }

      .card:hover .content>*:not(.title),
      .card:focus-within .content>*:not(.title) {
          opacity: 1;
          transform: translateY(0);
          transition-delay: calc(var(--d) / 8);
      }

      .card:focus-within:before,
      .card:focus-within:after,
      .card:focus-within .content,
      .card:focus-within .content>*:not(.title) {
          transition-duration: 0s;
      }
  }



  /* Awards section END */
  /* =================================== */
  /* Artwork section Start */

  .artwork-section {
      /* display: none; */
      padding: 2rem;

  }

  @media screen and (min-width: 768px) {
      .section {
          padding: 4rem;
      }
  }

  @supports (display: grid) {
      .section {
          display: block;
      }
  }



  .grid {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-auto-rows: 150px;
      grid-auto-flow: row dense;
  }

  .item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      box-sizing: border-box;
      background: #0c9a9a;
      color: #fff;
      grid-column-start: auto;
      grid-row-start: auto;
      color: #fff;
      background: url("https://images.unsplash.com/photo-1470124182917-cc6e71b22ecc?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
      background-size: cover;
      background-position: center;
      box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
      transition: transform 0.3s ease-in-out;
      cursor: pointer;
      counter-increment: item-counter;
  }

  .item:nth-of-type(3n) {
      background-image: url("https://images.unsplash.com/photo-1422255198496-21531f12a6e8?dpr=2&auto=format&fit=crop&w=1500&h=996&q=80&cs=tinysrgb&crop=");
  }

  .item:nth-of-type(4n) {
      background-image: url("https://images.unsplash.com/photo-1490914327627-9fe8d52f4d90?dpr=2&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=");
  }

  .item:nth-of-type(5n) {
      background-image: url("https://images.unsplash.com/photo-1476097297040-79e9e1603142?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
  }

  .item:nth-of-type(6n) {
      background-image: url("https://images.unsplash.com/photo-1464652149449-f3b8538144aa?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
  }

  .item:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.3;
      transition: opacity 0.3s ease-in-out;
  }

  .item:hover {
      transform: scale(1.05);
  }

  .item:hover:after {
      opacity: 0;
  }

  .item--medium {
      grid-row-end: span 2;
  }

  .item--large {
      grid-row-end: span 3;
  }

  .item--full {
      grid-column-end: auto;
  }

  @media screen and (min-width: 768px) {
      .item--full {
          grid-column: 1/-1;
          grid-row-end: span 2;
      }
  }

  .item__details {
      position: relative;
      z-index: 1;
      padding: 15px;
      color: #444;
      background: #fff;
      text-transform: lowercase;
      letter-spacing: 1px;
      color: #828282;
  }

  .item__details:before {
      content: counter(item-counter);
      font-weight: bold;
      font-size: 1.1rem;
      padding-right: 0.5em;
      color: #444;
  }


  /* ArtWork section END */
  /* =================================== */

  /* Hero section Start */





  /* Hero section END */
  /* =================================== */