html {
  font-size: 100%;
  font-size-adjust: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  user-select: none;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #252a32;
  background: #ffffff;
} */

a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

@media print {
  html,
  body {
    display: none;
  }
}

/* media query start */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* .desktop-header {
    display: none;
    Hide desktop header on mobile
  }

  .mobile-header {
    display: block;
    Show mobile header on mobile
  } */

  /* .main .scroll .card {
    width: 10rem;
  } */

  .main .scroll2 .card {
    /* width: 16rem;  /* old */
    width: 23rem;
    /* new page width */
  }
}

/* 17-09-2025 new page width added (galaxy s24 & a21s) */
@media only screen and (max-width: 375px) {
  .main .scroll2 .card {
    width: 19rem;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* .desktop-header {
    display: none;
    Hide desktop header on mobile
  }

  .mobile-header {
    display: block;
    Show mobile header on mobile
  } */

  .main .scroll .card {
    width: 15rem;
  }

  .main .scroll2 .card {
    /* width: 16rem;  /* old */
    width: 30rem;
    /* new page width */
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* .desktop-header {
    display: block;
    Hide desktop header on mobile
  }

  .mobile-header {
    display: none;
    Show mobile header on mobile
  } */

  .main .scroll .card {
    width: 16rem;
  }

  .main .scroll2 .card {
    /* width: 16rem;  /* old */
    width: 34rem;
    /* new page width */
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .desktop-header {
    display: block;
    /* Hide desktop header on mobile */
  }

  .mobile-header {
    display: none;
    /* Show mobile header on mobile */
  }

  .main .scroll .card {
    width: 16rem;
  }

  .main .scroll2 .card {
    /* width: 16rem;  /* old */
    width: 40rem;
    /* new page width */
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .desktop-header {
    display: block;
    /* Hide desktop header on mobile */
  }

  .mobile-header {
    display: none;
    /* Show mobile header on mobile */
  }

  .main .scroll .card {
    width: 17rem;
  }

  .main .scroll2 .card {
    /* width: 16rem;  /* old */
    width: 42rem;
    /* new page width */
  }
}

/* media query end  */

/* scroll bar 1 start  */

.container {
  /* max-width: 80rem; */
  /* max-width:2000px; */
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 0 !important;
  margin: 0 auto;
  /* added for ios  2023 july 12*/
  -webkit-overflow-scrolling: auto;
  overflow: auto;
}

.text {
  font-family: inherit;
  font-weight: 700;
  /* line-height: inherit; */
  text-rendering: optimizeLegibility;
}

.text-title {
  font-size: 0.7rem;
  color: #f3f4f6;
  text-size-adjust: auto;
  text-align: center;
  background-color: #689eb8;
}

.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main .scroll {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 1rem 0;
  margin: 2.5rem 0;
  cursor: default;
  overflow: scroll hidden;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scroll-padding: 0px 1.25rem;
  scrollbar-width: none;
}

.main .scroll::-webkit-scrollbar {
  display: none;
}

.main .scroll.active {
  cursor: grab;
  cursor: -webkit-grab;
}

.main .scroll .card {
  /* width: 16rem;  /* old */
  /* width: 12rem; */
  /* old */

  height: auto;
  flex: 0 0 auto;
  margin: 0 0.5rem;
  border: 3px solid;
  outline: none;
  border-radius: 0.25rem;
  color: #252a32;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.main .scroll .card-image {
  position: relative;
  padding-top: 100%;
}

.main .scroll .card-image img.responsive {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.main .scroll .card-inner {
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* padding: 1rem; */
}

/* scroll bar 1 end  */

/* scroll bar 2 start  */

.text {
  font-family: inherit;
  font-weight: 700;
  /* line-height: inherit; */
  text-rendering: optimizeLegibility;
}

.text-title2 {
  font-size: 0.5rem;
  padding: 0.25rem;
  color: #060318;
  text-align: center;
  text-size-adjust: auto;
  background-color: rgba(128, 126, 163, 0.2);
  font-family: "Montserrat", Arial, sans-serif !important;
  border-radius: 0.25rem;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.main .scroll2 {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: auto;
  /* padding: 1rem 0; */
  /* margin: 1.5rem 0; */
  cursor: default;
  overflow: scroll hidden;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scroll-padding: 0px 0.25rem;
  scrollbar-width: none;
}

.main .scroll2::-webkit-scrollbar {
  display: none;
}

.main .scroll2.active {
  cursor: grab;
  cursor: -webkit-grab;
}

.container2 {
  max-width: 80rem;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* added for ios  2023 july 12 */
  -webkit-overflow-scrolling: auto;
  overflow: auto;
}

.main .scroll2 .card {
  /* width: 16rem;  /* old */
  /* width: 80rem; */
  /* new page width */
  /* padding: 0.5rem; */
  height: auto;
  flex: 0 0 auto;
  margin: 0.75rem;
  border: none;
  outline: none;
  border-radius: 0.25rem;
  color: #252a32;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.main .scroll2 .card .card2 {
  /* width: 16rem;  /* old */
  /* width: 80rem; */
  /* new page width */
  /* padding: 0.5rem; */
  height: auto;
  flex: 0 0 auto;
  /* margin: 0.75rem; */
  border: none;
  outline: none;
  border-radius: 0.25rem;
  color: #252a32;
  /* background: #ffffff; */
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
}

.main .scroll2 .card-image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 100%;
}

.main .scroll2 .card-image img.responsive {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.main .scroll2 .card-inner {
  width: 100%;
  height: auto;
  /* padding-left: 2rem; */
}

/* scroll bar 2 end  */

/* animate scroll css - start */

#more-button {
  border-style: none;
  background: none;
  font: 16px Serif;
  color: blue;
  margin: 0 0 10px 0;
}

#thumbnail input:checked {
  color: rgb(255, 255, 255);
}

#more-button:hover {
  color: black;
}

#thumbnail {
  -moz-transition: height 0.5s;
  -ms-transition: height 0.5s;
  -o-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  height: 0;
  overflow: hidden;
}

/* animate scroll css - end */

/* epaper classes gulf start  */
.thumbnail-view {
  right: 0px;
  top: 0px;
  left: 0px;
  border-top: 2px #d90000 solid;
  /*margin: 0px -10px;*/
  margin: 0px;
  position: relative;
  z-index: 1;
}

.thumbnail-button {
  position: absolute;
  top: 0px;
  left: 20px;
  z-index: 1;
}

.thumbnail-button-bar {
  background: #d90000;
  border-radius: 0 0 8px 8px;
  padding: 1px 10px 5px;
  cursor: pointer;
}

/* epaper classes gulf end  */

.container-fluid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 3rem;
}

/* Styles for the watermark */
.watermark {
  position: absolute;
  z-index: 2;
  bottom: 50%;
  right: 50%;
  /* font-size: 16rem; */
  color: rgba(107, 107, 107, 0.3);
  /* Adjust the color and opacity as desired color: rgba(107, 107, 107, 0.15);*/
  pointer-events: none;
  /* This ensures the watermark does not interfere with the image clickability */
  transform: translate(50%, 50%) rotate(300deg);
  /* Rotate the watermark by 300 degrees and position it diagonally */
  transform-origin: center center;
  /* Set the transform origin to the center to make the rotation diagonal */
  white-space: nowrap;
  /* Prevent the watermark from wrapping to multiple lines */
  text-overflow: ellipsis;
}

.watermark1 {
  position: absolute;
  z-index: 2;
  bottom: 50%;
  right: 50%;
  font-size: 3.5rem;
  color: rgba(107, 107, 107, 0.4);
  /* Adjust the color and opacity as desired */
  pointer-events: none;
  /* This ensures the watermark does not interfere with the image clickability */
  transform: translate(50%, 50%) rotate(300deg);
  /* Rotate the watermark by 300 degrees and position it diagonally */
  transform-origin: center center;
  /* Set the transform origin to the center to make the rotation diagonal */
  white-space: nowrap;
  /* Prevent the watermark from wrapping to multiple lines */
}

/* Container for the image and watermark */
.image-container {
  position: relative;
}