#banner-image {
    width: 100%;
    
    /*.....*/
    height: auto;

    position: absolute;
    background-repeat: no-repeat;
    flex-direction: column;
      
  
}

.banner {
    background-color: #fffff7;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: center;
    justify-content: center; 
    background-image: url("../images/ancient-way-2.jpg");
    background-position:center center;
    background-repeat: no-repeat;

    /*change*/
    background-size:contain;
    height: 741px;
    padding-bottom: 6rem;
    
 
}

.banner-content{
    padding-left: 2rem;
}


.banner-tagline {
    font-family: "Babylonica", cursive;

     /*change*/
    font-size: 12rem;
    font-weight: 400;
    text-transform: none;
    color: #b48811;
    text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 3);

     /*change*/
    height: 8rem;
    opacity: 0;
    visibility: hidden;
    animation: fadeAnimation 3s 1.5s forwards;
  
}

.banner-heading {

      /*change*/
    height: 30rem;
   
    perspective: 50rem;
    overflow: hidden;
    text-align-last: center;
    display: flex;
    align-items: center;

    
}

.banner-heading span {
    font-family: "Alegreya Sans", sans-serif;

      /*change*/
    font-size: 3.5rem;

    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #fffff7;
    text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 1);
    overflow: hidden;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    transform: translateZ(8rem);
    opacity: 0;
  

      /*change
      padding-top: 4rem;
      padding-bottom: 6rem;
     */
    
}

.heading-1 {
    animation: animateHeading 12s 3s infinite;
}

.heading-2 {
    animation: animateHeading 12s 6s infinite;
}

.heading-3 {
    animation: animateHeading 12s 9s infinite;
}

.heading-4 {
    animation: animateHeading 12s 12s infinite;
}

@keyframes animateHeading {
    0% {
        transform: translateZ(8rem);
        opacity: 0;
        letter-spacing: 3rem;
    }

    3% {
        transform: translateZ(0);
        opacity: 1;
        letter-spacing: 1.5rem;
    }

    25% {
        transform: translateZ(0);
        opacity: 1;
        letter-spacing: 1.5rem;
    }

    28% {
        transform: translateZ(8rem);
        opacity: 0;
        letter-spacing: 3rem;
    }

    100% {
        transform: translateZ(8rem);
        opacity: 0;
        letter-spacing: 3rem;
    }
}

.banner-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10rem;
   
   
}

.banner-btn {
    font-weight: 400;
    width: 16rem;
    height: 6rem;
    background: linear-gradient(to right, #ebd197, #b48811, #a2790d);
    color: #fffff7;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: inherit;
    border-radius: 3rem;
    border: none;
    box-shadow: 1rem 2rem 3rem rgb(0, 0, 0, 5);
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(0, 0, 0, 4);
    cursor: pointer;
    margin: auto auto auto auto;
    opacity: 0;
    visibility: hidden;
    animation: fadeAnimation 3s 2.5s forwards;
    position: relative;
    overflow: hidden;
}

.banner-btn::before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, #fffff7, transparent);
    position: absolute;
    top: 0;
    left: -100%;
    transform: skewX(-30deg);
    transition: left 0.5s;
}

.banner-btn:hover::before {
    left: 100%;
}

@keyframes fadeAnimation {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/*responsive*/

@media (max-width: 1024px){

    .section-1{
        height: 120vh;
        flex-direction: column;

    }
    

    .banner-tagline {
        font-size: 12rem;
        padding-top: 4rem;
    }

    .banner-heading span{
        font-size:3.4rem;
    }

   
    }

    @media (max-width: 820px){

        .section-1{
            width: 100%;
            height: auto;
        
        }
        .banner{
            top:25%;
        }
    }
    
    

    @media (max-width:768px) {
    .section-1{
        width: 100%;
        height: auto;
    }

    .banner{
        padding-top: 2rem;
    }
}


@media (max-width: 600px){
    .banner-tagline{
        font-size: 10rem;
    }
    .banner-content {
        font-size: 2.8rem;
        font-weight:400;
       

}
    .banner-button {
        top:42%;
        position: relative;
        margin-top: 0;
        padding-top: 0;
}
    .banner-heading {
        font-size: 2.5rem;
          
} 
  
    }

@media (max-width: 500px){
    
    .banner-tagline{
        position: relative;
        top:15%;
        font-size: 8rem;
    }
    .banner-button {
        top:42%;
        position: relative;
        margin-top: 0;
        padding-top: 0;
    }
    .banner-heading {
        position: relative;
        top:15%;
        
    } 
    .banner-heading span{
        font-size:2.8rem;
    }
      
        }

        @media (max-width: 500px){
    
    .banner-tagline{
        position: relative;
        top:15%;
        font-size: 8rem;
    }
    .banner-button {
        top:42%;
        position: relative;
        margin-top: 0;
        padding-top: 0;
    }
    .banner-heading {
        position: relative;
        top:15%;
        
    } 
    .banner-heading span{
        font-size:2.8rem;
    }
      
        }
@media (max-width: 500px){
    
    .banner-tagline{
        position: relative;
        top:15%;
        font-size: 8rem;
    }
    .banner-button {
        top:42%;
        position: relative;
        margin-top: 0;
        padding-top: 0;
    }
    .banner-heading {
        position: relative;
        top:15%;
        
    } 
    .banner-heading span{
        font-size:2.8rem;
    }
      
        }

@media (max-width: 400px){
    
    .banner-tagline{
        position: relative;
        top:15%;
        font-size: 7rem;
     }

    .banner-button {
        top:40%;
        position: relative;
        margin:0;
        padding:0;
    }

    .banner-heading {
        position: relative;
        top:12%;
                
    } 
    
    .banner-heading span{
        font-size:2.5rem;

    }
              
}

@media (max-width: 360px) {
    .banner-tagline{
        position: relative;
        top:20%;
        font-size: 6rem;
     }

    .banner-button {
        top:40%;
        position: relative;
        margin:0;
        padding:0;
    }

    .banner-heading {
        position: relative;
        top:12%;
                
    } 
    
    .banner-heading span{
        font-size:2.4rem;

    }
   

}
  

/*end of responsive*/