.hero-main{

    /* background: url('../images/land-expedition/7N1A3064.jpg'); */
    background: url('../../images/wilderness-retreats/latitude57-4559.jpg');
    /* background: url('../images/land-expedition/SITKADAY1-53.jpg'); */
    
    
    
    
    /* height: 653px; */
    position: relative;
    min-height: 400px;
    /* min-height: 700px; */
    border-radius: 1.8rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* margin-top: 5rem; */
    /* position: relative; */
    width: 100%;
    /* top: 5rem; */
    left: 0;
    z-index: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    animation: fade-In 1s ease-in;
  -webkit-animation: fade-In 1s ease-in;
  -moz-animation: fade-In 1s ease-in;
  -o-animation: fade-In 1s ease-in;
  -ms-animation: fade-In 1s ease-in;
}


.hero-main::before,
.hero-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50%; /* Adjust this value to control the gradient height */
  z-index: 0;
}

.hero-main::before {
    top: 0;
    border-radius: 1.25rem 1.25rem 0rem 0rem;
    /* background: linear-gradient(174deg, #18214B 0%, rgba(24, 33, 75, 0.10) 50.69%, rgba(24, 33, 75, 0.00) 100%); */

    /* background: linear-gradient(174deg, #18214B 0%, rgba(24, 33, 75, 0.10) 50.69%, rgba(24, 33, 75, 0.00) 100%); */
    /* background-image: linear-gradient(180deg, #18214B 0%, rgba(24, 33, 75, 0.10) 50.69%, rgba(24, 33, 75, 0.00) 100%); */
  }
  
  .hero-main::after {
    bottom: 0;
    border-radius: 0rem 0rem 1.25rem 1.25rem;
    /* background: linear-gradient(0deg, rgba(24, 33, 75, 0.43) 0%, rgba(24, 33, 75, 0.00) 68.70%, rgba(24, 33, 75, 0.00) 100%); */
    /* background: linear-gradient(0deg, #18214B 0%, rgba(24, 33, 75, 0.00) 68.70%, rgba(24, 33, 75, 0.00) 100%); */

    /* background: linear-gradient(0deg, #18214B 0%, rgba(24, 33, 75, 0.00) 68.70%, rgba(24, 33, 75, 0.00) 100%); */

    /* background-image: linear-gradient(180deg, #18214B 0%, rgba(24, 33, 75, 0.10) 50.69%, rgba(24, 33, 75, 0.00) 100%); */
  }
  .hero-main::before,
  .hero-main::after {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }