/* section_feature */
section {
  width: 100%;
  background-color: var(--be);
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.section_animate_feature {
  opacity: 0;
  transform: translateY(100%);
  transition: 0.8s cubic-bezier(0.7, 0, 0.33, 1);
}

.section_feature {
  padding-top: 130px;
  margin-left: 13.2%;
  line-height: var(--projectHeight);
  /* transition-delay: 0.2s; */
  position: relative;
  z-index: 1;
}

.featured {
  color: var(--ff);
  font-family: var(--libre);
  font-style: italic;
  font-size: var(--thirtySix);
}

.collection {
  color: var(--7b);
  font-weight: var(--xl);
  margin-left: 20px;
  font-size: var(--thirtySix);
  font-family: var(--barlow);
}

.load {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.whole_container {
  display: grid;
  grid-template-columns: 8fr 1fr 240px;
  align-items: start;
  max-width: 1500px;
  /* height: 110vh; */
  height: 800px;
  margin: 90px 6% 0px 11%;
  gap: 10px;
  position: relative;
  overflow: clip;
}

@media screen and (max-width: 1250px) {
  .whole_container {
    grid-template-columns: 8fr !important;
    z-index: 1;
  }
}

/* grid updated */
.section_grid_container {
  grid-column: 1;
  max-width: 880px;
  display: grid;
  gap: 20px 55px;
  opacity: 0;
  transform: translateY(30%);
  z-index: 2;
  grid-template-columns: 10px;
  grid-auto-rows: 10px;
  /* height: 100vh; */
  height: 800px;
  padding-top: 10px;
}

.section_grid_container img {
  width: 100%;
  height: 100%;
  position: relative;
}

.fade {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.section_grid_container div {
  cursor: pointer;
}

.empty {
  grid-column: 1/3;
  grid-row: 1/3;
}

.section_grid_first img,
.section_grid_second img,
.section_grid_third img,
.section_grid_fourth img,
.section_grid_fifth img,
.section_grid_sixth img,
.section_grid_seventh img {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
}

.section_grid_first {
  position: relative;
  grid-column: 4/6;
  grid-row: 1;
  max-width: 250px;
  height: 250px;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2013_abc01_00460.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 71%;
}

.empty2 {
  grid-column: 7/10;
  grid-row: 4/5;
}

.section_grid_second {
  grid-column: 6;
  grid-row: 2;
  max-width: 210px;
  height: 158px;
  margin-left: -120px;
  position: relative;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2018_sb03_00018.jpg");
  background-size: 77%;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 20px;
}

.section_grid_empty2 {
  grid-column: 9/13;
}

.section_grid_third {
  grid-column: 1/5;
  grid-row: 11;
  height: 165px;
  width: 240px;
  position: relative;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2013_ks01_00080.jpg");
  background-size: 77%;
  background-position: center;
  background-repeat: no-repeat;
}

/*  */
/*  */

.grid_box_total {
  grid-column: 3;
}

.grid_box1,
.grid_box2,
.grid_box3,
.grid_box4,
.grid_box5,
.grid_box6,
.grid_box7 {
  position: absolute;
  padding: 8px 15px 15px 15px;
  height: auto;
  width: 240px;
  background-color: #dfded2;
  transform: translateY(35%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease-in-out;
}

.grid_box1.gridBox,
.grid_box2.gridBox,
.grid_box3.gridBox,
.grid_box4.gridBox,
.grid_box5.gridBox,
.grid_box6.gridBox,
.grid_box7.gridBox {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: 0.4s ease-in-out;
}

.grid_box1 {
  top: 2px;
}

.grid_box2 {
  top: 33px;
}

.grid_box3 {
  top: 285px;
}

.grid_box4 {
  top: 467px;
}

.grid_box5 {
  top: 308px;
}

.grid_box6 {
  top: 226px;
}

.grid_box7 {
  top: 433px;
}
/*  */
/*  */
.section_grid_fourth {
  height: 130px;
  width: 130px;
  grid-column: 3/6;
  grid-row: 17;
  margin-left: -15px;
  margin-top: 10px;
  position: relative;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2013_ss02_00096.jpg");
  background-size: 65%;
  background-position: center;
  background-repeat: no-repeat;
}

.section_grid_fifth {
  grid-column: 5;
  grid-row: 10;
  height: 430px;
  width: 287px;
  position: relative;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2018_sr03_00013.jpg");
  background-size: 81%;
  background-position: center;
  background-repeat: no-repeat;
}

.section_grid_sixth {
  grid-column: 6/10;
  grid-row: 9;
  height: 170px;
  width: 245px;
  position: relative;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2015_bw01_00417.jpg");
  background-size: 77%;
  background-position: center;
  background-repeat: no-repeat;
}

.section_grid_seventh {
  grid-row: 15;
  grid-column: 6;
  height: 210px;
  width: 158px;
  margin-top: 20px;
  margin-left: -20px;
  position: relative;
  background-image: url("./assets/images/homepage/npl-images/npl\ frame\ photo/npl_2014_br01_00571.jpg");
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}

.line_grid1 {
  width: 1000%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 0;
  display: none;
  background-color: var(--gray2);
  z-index: -1;
  animation: 1.5s lineGrid1 linear;
}

.lineDelay {
  display: block;
}

.section_grid_first:hover .line_grid1 {
  display: block;
}

@keyframes lineGrid1 {
  from {
    width: 0px;
  }
  to {
    width: 1000%;
  }
}

.line_grid2 {
  width: 1000%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 100%;
  display: none;
  background-color: #bbb7b2;
  animation: 2s lineGrid2 linear;
  z-index: 1;
}

@keyframes lineGrid2 {
  0%,
  10% {
    width: 0px;
  }

  100% {
    width: 1000%;
  }
}

.line_grid3 {
  width: 1000%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 100%;
  display: none;
  z-index: -1;
  background-color: #bbb7b2;
  animation: 1.5s lineGrid3 linear;
}

.section_grid_third:hover .line_grid3 {
  display: block;
}

@keyframes lineGrid3 {
  0%,
  10% {
    width: 0px;
  }

  100% {
    width: 1000%;
  }
}

.line_grid4 {
  width: 2000%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 100%;
  z-index: -1;
  display: none;
  background-color: #bbb7b2;
  animation: 1.5s lineGrid4 linear;
}

.section_grid_fourth:hover .line_grid4 {
  display: block;
}

@keyframes lineGrid4 {
  0%,
  10% {
    width: 0px;
  }

  100% {
    width: 2000%;
  }
}

.line_grid5 {
  width: 1000%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 100%;
  display: none;
  z-index: -1;
  background-color: #bbb7b2;
  animation: 2s lineGrid5 linear;
}

.section_grid_fifth:hover .line_grid5 {
  display: block;
}

@keyframes lineGrid5 {
  0%,
  15% {
    width: 0px;
  }

  100% {
    width: 1000%;
  }
}

.line_grid6 {
  width: 800%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 100%;
  display: none;
  background-color: #bbb7b2;
  animation: 1.5s lineGrid6 linear;
}

.section_grid_sixth:hover .line_grid6 {
  display: block;
}

@keyframes lineGrid6 {
  0%,
  20% {
    width: 0px;
  }

  100% {
    width: 800%;
  }
}

.line_grid7 {
  width: 1000%;
  position: absolute;
  height: 1px;
  top: 20%;
  left: 100%;
  display: none;
  background-color: #bbb7b2;
  animation: 1.5s lineGrid7 linear;
}

.section_grid_seventh:hover .line_grid7 {
  display: block;
}

@keyframes lineGrid7 {
  0%,
  20% {
    width: 0px;
  }

  100% {
    width: 1000%;
  }
}

@media screen and (max-width: 1050px) {
  .whole_container {
    margin: 90px 20px 0;
    width: 100%;
    /* height: 90vh; */
    height: 650px;
  }

  .section_grid_container {
    width: 880px;
    z-index: 1;
    height: 650px;
  }
  .section_grid_first {
    width: 200px;
    height: 200px;
  }
  .section_grid_second {
    width: 200px;
    height: 133px;
    margin-left: -110px;
    margin-top: -10px;
  }

  .section_grid_third {
    width: 215px;
    height: 143px;
    grid-row: 10;
  }
  .section_grid_fourth {
    width: 100px;
    height: 100px;
    grid-column: 3/5;
    grid-row: 16;
    margin-left: 5px;
    margin-top: -10px;
  }
  .section_grid_fifth {
    width: 233px;
    height: 350px;
    grid-column: 5;
    grid-row: 8;
    margin-top: 10px;
    margin-left: -60px;
  }
  .section_grid_sixth {
    width: 215px;
    height: 143px;
    grid-column: 6/10;
    grid-row: 7;
    margin-left: -30px;
  }
  .section_grid_seventh {
    width: 100px;
    height: 150px;
    margin-left: -40px;
    grid-column: 6;
    grid-row: 13;
    margin-top: -5px;
  }
}

@media screen and (max-width: 1300px) {
  .whole_container {
    grid-template-columns: 8fr 1fr 240px;
  }
}

@media screen and (max-width: 1250px) {
  .section_grid_container {
    .grid_box_total {
      display: none;
    }

    .line_grid1,
    .line_grid2,
    .line_grid3,
    .line_grid4,
    .line_grid5,
    .line_grid6,
    .line_grid7 {
      display: none !important;
    }
  }
}

@media screen and (max-width: 768px) {
  #skip_feature {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .whole_container {
    margin: 0 10px !important;
  }
}

/* end of grid updated */

.input_field {
  width: 100%;
}

/* section input field */
.input_field form {
  margin-left: 13.2%;
  max-width: 740px;
  padding: 10px 0 10px 10px;
  display: flex;
  justify-content: end;
  align-items: end;
}

.input_field form input {
  background-color: transparent;
  padding: 5px;
  outline: none;
  border: none;
  border-bottom: 1px solid var(--gray2);
  width: 30%;
  min-width: 300px;
  color: var(--df);
  font-size: var(--sixteen);
  font-family: var(--libre);
  font-style: italic;
}

@media screen and (max-width: 500px) {
  .input_field form input {
    min-width: 50%;
  }
}

.input_field form input::placeholder {
  font-size: var(--sixteen);
  font-family: var(--libre);
  color: var(--df);
  font-style: italic;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.input_field form input:focus::placeholder {
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

.input_field form button {
  margin-left: 10px;
  width: var(--xlButton);
  height: var(--xlButton);
  outline: none;
  border: none;
  border-radius: 50%;
  background-color: transparent;
}

.input_field form button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bx {
  font-size: 2rem;
  color: var(--icon_color);
}

.go_to {
  width: 100%;
  gap: 5px;
  margin-top: 20px;
  padding-bottom: 130px;
}

.go_to_container {
  margin-left: 13.2%;
  max-width: 740px;
  display: flex;
  gap: 5px;
  justify-content: end;
  align-items: end;
}

.go_to_container a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 5px;
}


@media screen and (max-width: 500px) {
  .go_to {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.go_to h2 {
  text-transform: lowercase;
  color: var(--71);
  font-size: var(--eighteen);
  font-weight: var(--xl);
}

.go_to button {
  width: var(--smButton);
  height: var(--smButton);
  outline: none;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.go_to button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-top: 1px;
}

@keyframes linearWidth1 {
  from {
    width: 0px;
  }

  to {
    width: 750px;
  }
}

@keyframes linearWidth2 {
  from {
    width: 0px;
  }

  to {
    width: 500px;
  }
}

.section_second:hover .line_four,
.section_second:hover .line_five {
  display: block;
}

.grid_box_top1 {
  width: 100%;
}

.grid_box_top1 p {
  color: black;
  font-size: var(--eighteen);
  font-weight: var(--normalWeight);
  line-height: var(--barlowHeight);
  font-family: var(--barlow);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: clip;
}

.grid_box_p1 {
  padding-top: 15px;
  color: var(--7b);
  font-size: var(--fourteen);
  line-height: var(--libreHeight);
  font-family: var(--libre);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: clip;
}

@media screen and (max-width: 1245px) {
  .section_grid_container {
    max-width: 900px;
  }

  .grid_box1,
  .grid_box2,
  .grid_box3,
  .grid_box4,
  .grid_box5,
  .grid_box6,
  .grid_box7 {
    display: none !important;
  }

  .line_grid,
  .line_grid2,
  .line_grid3,
  .line_grid4,
  .line_grid5,
  .line_grid6,
  .line_grid7 {
    display: none !important;
  }
}

/* /end of feature */