body{
  font-family: "Outfit", sans-serif;
  margin: 0;
  padding: 0;
}

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

.mt-30{
  margin-top: 30px;
}

.mt-90{
  margin-top: 90px !important;
}

.mt-40{
  margin-top: 40px;
}

.mtb-50{
  margin-top: 50px;
  margin-bottom: 50px;
}

.mb-50{
  margin-bottom: 50px;
}

.top{
  background: #ff5500;
  padding: 6px 0px;
}

.bg{
  background: url(../images/bg.jpg) no-repeat top left;
  width: 100%;
  height: 100%;
  background-size: cover;
}

header{
  background: #fff;
  text-align: center;
  margin: 30px 0px;
  padding: 10px 0px;
  position: relative;
}

header img{
  width: 150px;
}

header::after {
  content: '';
  background: url(../images/right-leaf.png) no-repeat bottom right;
  background-size: cover;
  display: inline-block;
  width: 100px;
  height: 80px;
  position: absolute;
  bottom: -60px;
  right: -20px;
}

header::before {
  content: '';
  background: url(../images/left-leaf.png) no-repeat bottom right;
  background-size: cover;
  display: inline-block;
  width: 70px;
  height: 60px;
  position: absolute;
  top: -10px;
  left: -20px;
}


.notification {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 15px;
  margin: 0;
  text-align: center;
  z-index: 1;
  background: var(--yellow);
}

@media (max-width: 700px) {
  .notification {
    display: none;
  }

  .cord-g {
    background: url("../images/pg1.png") no-repeat top left;
    width: 100%;
    background-size: 100% !important;
    height: 100%;
    display: inline-block;
    padding: 100px 50px !important;
}



  .cord-g input{
    margin-bottom: 10px;
    font-size: 30px !important;
  }

  .cord-g h3{
    font-size: 12px;
  }


}





/* IMAGE GRID STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.image-grid figure {
  margin-bottom: 0;
}

.image-grid img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
  opacity: 0;
}

.image-grid a:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}




/* LIGHTBOX STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-modal .modal-content {
  background: var(--lightbox);
}

.lightbox-modal .btn-close {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 1.2rem;
  z-index: 10;
}

.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
  text-align: center;
}

.lightbox-modal img {
  width: auto;
  max-height: 100vh;
  max-width: 100%;
}

.lightbox-modal .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(36, 36, 36, 0.75);
}

.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
}

.lightbox-modal .carousel-control-prev {
  left: 10px;
}

.lightbox-modal .carousel-control-next {
  right: 10px;
}


figure a {
  background: url('../images/frame.png') no-repeat top left;
  background-size: contain;
  position: relative;
}

.image-grid span {
 /* font-size: 35px;
  text-align: center;
  display: inline-block;
  width: 100%;
  color: #000;
  font-weight: 600;*/
  position: absolute;
  top: 0;
}
.carousel-inner {
  animation: fadeInScale 0.4s ease-out;
}


.image-grid{
  margin-bottom: 50px;
}

.modal-backdrop.show {
  opacity: .95 !important;
  background: #000 !important;
}


@media screen and (max-width: 600px) {
  body {
    background: url('../images/bg-mobile.png') no-repeat top left !important;
  }

  figure {
    padding: 0 50px;
  }

  figure a{
    /*padding: 46px;*/
  }

  .lightbox-modal .btn-close {
  z-index: 9999;
}

.image-grid span {
  width: 100%;
  height: 260px !important;
}


}


.image-grid span {
  width: 100%;
  height: 240px;
  display: inline-block;
  background-size: cover;
  overflow: hidden;
  z-index: -1;
}

span.s1{
  background:url("../images/galley-main/1.jpg") no-repeat top left;
}

span.s2{
    background:url("../images/galley-main/2.png") no-repeat top left;
}

span.s3{
    background:url("../images/galley-main/3.png") no-repeat top left;
}

span.s4{
    background:url("../images/galley-main/4.png") no-repeat top left;
}
span.s5{
    background:url("../images/galley-main/5.png") no-repeat top left;
}
span.s6{
    background:url("../images/galley-main/6.png") no-repeat top left;
}
span.s7{
    background:url("../images/galley-main/7.png") no-repeat top left;
}
span.s8{
    background:url("../images/galley-main/8.png") no-repeat top left;
}
span.s9{
    background:url("../images/galley-main/9.png") no-repeat top left;
}
span.s10{
    background:url("../images/galley-main/10.png") no-repeat top left;
}
span.s11{
    background:url("../images/galley-main/11.png") no-repeat top left;
}
span.s12{
    background:url("../images/galley-main/12.png") no-repeat top left;
}
span.s13{
    background:url("../images/galley-main/13.png") no-repeat top left;
}
span.s14{
    background:url("../images/galley-main/14.png") no-repeat top left;
}
span.s15{
    background:url("../images/galley-main/15.png") no-repeat top left;
}
span.s16{
    background:url("../images/galley-main/16.png") no-repeat top left;
}
span.s17{
    background:url("../images/galley-main/17.png") no-repeat top left;
}
span.s18{
    background:url("../images/galley-main/18.png") no-repeat top left;
}
span.s19{
    background:url("../images/galley-main/19.png") no-repeat top left;
}

span.s20{
    background:url("../images/galley-main/20.png") no-repeat top left;
}


span.s21{
    background:url("../images/galley-main/21.png") no-repeat top left;
}


span.s22{
    background:url("../images/galley-main/22.png") no-repeat top left;
}


span.s23{
    background:url("../images/galley-main/23.png") no-repeat top left;
}


span.s24{
    background:url("../images/galley-main/24.png") no-repeat top left;
}


span.s25{
    background:url("../images/galley-main/25.png") no-repeat top left;
}


span.s26{
    background:url("../images/galley-main/26.png") no-repeat top left;
}


span.s27{
    background:url("../images/galley-main/27.png") no-repeat top left;
}

span.s28{
    background:url("../images/galley-main/28.png") no-repeat top left;
}



span.s29{
    background:url("../images/galley-main/29.png") no-repeat top left;
}


span.s30{
    background:url("../images/galley-main/30.png") no-repeat top left;
}

span.s31{
    background:url("../images/galley-main/31.png") no-repeat top left;
}


span.s32{
    background:url("../images/galley-main/32.png") no-repeat top left;
}


span.s33{
    background:url("../images/galley-main/33.png") no-repeat top left;
}


span.s34{
    background:url("../images/galley-main/34.png") no-repeat top left;
}


span.s35{
    background:url("../images/galley-main/35.png") no-repeat top left;
}


span.s36{
    background:url("../images/galley-main/36.png") no-repeat top left;
}


span.s37{
    background:url("../images/galley-main/37.png") no-repeat top left;
}


span.s38{
    background:url("../images/galley-main/38.png") no-repeat top left;
}


span.s39{
    background:url("../images/galley-main/39.png") no-repeat top left;
}

span.s40{
    background:url("../images/galley-main/40.png") no-repeat top left;
}

span.s41{
    background:url("../images/galley-main/41.png") no-repeat top left;
}
span.s42{
    background:url("../images/galley-main/42.png") no-repeat top left;
}
span.s43{
    background:url("../images/galley-main/43.png") no-repeat top left;
}
span.s44{
    background:url("../images/galley-main/44.png") no-repeat top left;
}
span.s45{
    background:url("../images/galley-main/45.png") no-repeat top left;
}



body {
      font-family: Arial, sans-serif;
      padding: 20px;
      margin: 0;
    }

    h2 {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }

    input#imageNumber {
      padding:80px 50px;
      font-size: 120px;
      color: #fff;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: center;
    }

    #hidden-gallery a {
      display: none;
    }

    .lb-prev, .lb-next {
      opacity: 1 !important;
      display: block !important;
      visibility: visible !important;
      position: fixed !important;
      top: 50% !important;
      transform: translateY(-50%);
      width: 50px;
      height: 80px;
      background-size: 20px 20px;
      z-index: 9999;
      cursor: pointer;
    }

    .lb-prev { left: 0 !important; }
    .lb-next { right: 0 !important; }

    .lb-prev::before, .lb-next::before {
      filter: drop-shadow(0 0 3px black);
    }

    .lb-close {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      position: fixed !important;
      top: 20px !important;
      right: 20px !important;
      width: 40px;
      height: 40px;
      background-size: 30px 30px;
      z-index: 9999;
      filter: drop-shadow(0 0 3px black);
      cursor: pointer;
    }

    #customAlert {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #f44336;
      color: white;
      padding: 12px 20px;
      border-radius: 6px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      z-index: 10000;
      font-size: 0.9rem;
      min-width: 240px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      animation: slideDown 0.3s ease;
      display: none;
    }

    #customAlert button {
      background: transparent;
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
      padding: 0 5px;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translate(-50%, -30px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @media (max-width: 600px) {
      h3 {
        font-size: 1rem !important;
      }
      input#imageNumber {
        font-size: 1rem;
        padding: 8px;
        width: 100%;
      }
      #customAlert {
        font-size: 0.85rem;
        padding: 10px 15px;
        min-width: 200px;
      }
    }

    .cord-g{
        background: url("../images/pg1.png") no-repeat top left;
        width: 100%;
       background-size: contain;
        height: 100%;
        display: inline-block;
        padding: 180px 100px;
    }

    .cord-g input{
          font-family: "Outfit", sans-serif;
        width: 100%;
        height: 100px;
        background: #ae9675;

    }

@media  screen and (max-width: 1366px) {
.cord-g {
    padding: 130px 100px;
}

.cord-g  h3{
    font-size: 23px;
}

}