.sub-head-img{
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(images/at-header2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Generated class from JS below for intersection observer */
/* Generated class from JS below for intersection observer */
/* Generated class from JS below for intersection observer */

.hidden{
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.5s, transform 1s;
}

.show{
  opacity: 1;
  transform: translateY(0);
}

/* AT main section starts here */

.at-sec1{
  width: 100%;
  padding: 10em 3em;
}

.at-sec1 h1{
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 1em;
}

.at-sec1 p{
  max-width: 65ch;
  font-size: 1.1rem;
  font-weight: 400;
}

/* Image callout segment here */

.h-plus{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 12px;
    left: 15%;
    width: 35px;
    height: 35px;
    color: #fff;
    font-size: 20px;
    background: #000;
    border-radius: 50%;
    transition: .3s;
}

.h-wrap:hover .h-plus{
    opacity: 0;
}

.h-wrap{
    position: relative;
    display: flex;
    width: 100%;
    height: 450px;
    gap: 10px;
    margin: 4em 0;

    img{
        width: 20%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        transition: all 0.5s;

        &:hover{
            width: 100%;
        }
    }
    
}

/* All media query for various screens */
/* All media query for various screens */
/* All media query for various screens */

/* Small devices(iPad) - 860px */

@media(max-width: 860px){
  .at-sec1{
  padding: 10em 2em;
}

.h-plus{
    bottom: 10px;
    left: 13%;
}
}

/* Small devices(phones) - 500px */

@media(max-width: 500px){
  .at-sec1{
  padding: 10em 1.2em;
}

.at-sec1 p{
  max-width: 65ch;
  font-size: 1rem;
  font-weight: 400;
}

.h-plus{
    bottom: 10px;
    left: 7%;
    width: 25px;
    height: 25px;
    font-size: 0.7rem;
}
}