body {
  background-color: rgb(151, 151, 253);
  font-family: 'Noto Sans' !important;
  overflow-x: hidden;
}

h1 {
  font-weight: 400;
  font-size: 148px;
}

.small-text {
  width: 100%; /* Set the default width for larger screens */
  max-width: none; /* Allow the width to be greater than the specified value */
}

/* Media query for screens below 764px width */
@media (max-width: 774px) {
  .small-text {
    width: 256px; /* Set the width to 256px for screens below 764px */
  }
}

.image-container {
  position: relative; /* Ensure proper positioning for absolutely positioned children */
  width: 100%; /* Make the container span the entire width of its parent */
  height: 0; /* Create a block-level container with zero height */
  padding-bottom: 100%; /* Set the aspect ratio (height as a percentage of width) */
  overflow: hidden; /* Hide any content that overflows the container */
}

.image-container img {
  position: absolute; /* Position the image absolutely within the container */
  width: 100%; /* Make the image span the entire width of the container */
  height: 100%; /* Make the image span the entire height of the container */
  object-fit: cover; /* Scale the image to cover the entire container while maintaining its aspect ratio */
}

.make-border {
  border-right: solid 0.5px;
}

.change-text {
  text-align: end;
}

@media only screen and (max-width: 768px) {
  .change-text {
    text-align: start;
  }
}

@media (max-width: 768px) {
  .col-xxl-6.col-xl-6.col-lg-6.col-md-8.ms-auto {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .col-auto img {
    max-width: none;
    max-height: none;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .A_UA-img {
    max-width: 432px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .GxT-img {
    max-width: 432px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .Dbp-img {
    max-width: 292px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .OC-img {
    max-width: 588px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .PBP-img {
    max-width: 1320px;
    max-height: 480px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .Pr-img {
    max-width: 432px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .LG-img {
    max-width: 880px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .PS-img {
    max-width: 1320px;
    max-height: 520px;
    width: 100%;
  }
}

.img-1 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.img-1  {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.5s ease-in-out;
}

.img-1:hover img {
  filter: grayscale(100%);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75); /* Adjust the alpha value for darkness */
  text-align: center;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-in-out;
  cursor: pointer;
}

.img-1:hover .overlay {
  opacity: 1;
}

.changing-shape {
  font-weight: 400;
color: white;

}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .HG-img-sq {
    max-width: 432px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .HG-img-med {
    max-width: 880px;
    max-height: 420px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .OL-img-long {
    max-width: 440px;
    max-height: 610px;
    width: 100%;
  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .PE-img-sq {
    max-width: 432px;
    max-height: 420px;
    width: 100%;
  }
}

.BI-img {
  max-width: 754px;
  max-height: 646px;

}

@media (max-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .border-class{
    border: none;

  }
}

@media (min-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .add-space{
   margin-left: 3rem !important;

  }
}

@media (max-width: 767px) {
  /* Adjust the max-width and max-height as needed for mobile view */
  .add-space{
   margin-top: 0rem !important;
   margin-bottom: 0rem !important;

  }
}
@media (max-width: 767px) {
  .add-space02{
   margin-top: 0rem !important;
   margin-bottom: 0rem !important;

  }
}

@media (min-width: 767px) {
  .add-space02{
   margin-top: 3rem !important;

  }
}


@media (min-width: 767px) {
  .add-space{
   margin-top: 1.5rem !important;

  }
}










