.gallery h1 {
 text-align: center;
 color:var(--red);
 font-weight: bold;
 margin-bottom:30px;

}
body{
    font-family: "Urbanist", sans-serif;
    }
.gallery{
    padding: 50px 0px 50px;
}
.gallery .row{
row-gap: 18px;
column-gap: 0px;
justify-content: start;
}
.gal-img img:hover{
    transform: scale(1.1);
    overflow: hidden;
    transition: all 0.5s linear;
}
.gal-img img{
    transition: all 0.5s linear;
    overflow: hidden;
    position: relative;
    z-index:1;
    
}
.gal-img{
 
    padding: 0;
   
    overflow: hidden;
    width: 92%;
}

.gallery-text{
    position: relative;
}
.gallery-text::after{

    position: absolute;
    content: '';
    top: -100px;
    background: var(--red);
    height: 140px;
    width: 92%;
    left: -20px;
    z-index: -1;
   
}

   


.gallery-text h6{
    padding:10px 0px;
    font-size: 16px;
    color:white;
 
}
.gallery-text p i{
    color: white;
    right: 0;
    left: 20rem;
    position: absolute;
    top: 10px;
}
.gallery a {
    text-decoration: none;
}

.gal-head:hover .gallery-text::after{
     background-color: var(--header-btn);
    width:96.5%;
    transition:all 1s ease-in-out;

}
.gal-head:hover i{
    left:21rem;
}

@media (max-width: 1280px) {
    .gallery-text p i{
        left:16rem;
    }
    .gal-head:hover i {
        left: 17rem;
    }
}
@media (max-width: 1024px) {
.gallery {
    padding: 50px 25px 0px;
}
.gallery-text p i {
    left: 14rem;
}
.gal-head:hover i{
    left:15rem;
}
.gal-head:hover .gallery-text::after {
    background-color:var(--header-btn);
    width: 98.5%;
    transition: all 0.5s ease;
}
}
@media (max-width: 991px) {
.gallery-text p i {
    left: 18rem;
}
.gal-head:hover i{
    left:19rem;
}
.gal-head:hover .gallery-text::after{
     background-color: var(--header-btn);
    width:97%;
    transition:all 0.5s ease;

}
}
@media (max-width:768px) {

.gal-head:hover i {
    left: 17rem;
}
.gallery-text  p i{
    left:15rem;
}
}
@media (max-width:767px) {
    .gal-head:hover i {
        left: 31rem;
    }
    .gal-head:hover .gallery-text::after {
        background-color:var(--header-btn);
        width: 95.4%;
        transition: all 0.5s ease;
    }   
    .gallery-text p i {
        left: 29rem;
    }
}
@media (max-width:600px) {


.gallery-text p i {
    left: 29rem;
}
.gal-img {
    padding: 0;
    overflow: hidden;
    width: 99%;
}
.gal-head:hover .gallery-text::after {
    background-color: var(--header-btn);
    width: 102.5%;
    transition: all 0.5s ease;
} 
.gallery-text::after{
    width:99%;
}
}
@media (max-width:576px) {
    .gallery-text p i {
        left: 28rem;
    }
    .gal-head:hover i {
        left: 29rem;
    }
}
@media (max-width:540px) {
.gallery-text p i {
    left: 26rem;
}
.gal-head:hover i {
    left: 27rem;
}
}
@media (max-width:492px) {
.gal-head:hover i {
    left: 23rem;
}
.gallery-text p i {
    left: 23rem;
}
.gal-head:hover .gallery-text::after {
    background-color: var(--header-btn);
    width: 103.5%;
    transition: all 0.5s ease;
} 
}
@media (max-width:432px) {
    .gallery-text p i {
        left: 19rem;
    }
    .gal-head:hover i {
        left: 20rem;
    }
}
@media (max-width:414px) {
    .gallery-text p i {
        left: 18rem;
    }
    .gal-head:hover i{
        left:19rem;
    }
    .gal-head:hover .gallery-text::after {
        background-color: var(--header-btn);
        width: 104.5%;
        transition: all 0.5s ease;
    } 
}
@media (max-width:400px) {
    .gallery-text p i{
        left:17rem;
    }
    .gal-head:hover i{
        left:18rem;
    }
}
@media (max-width:385px) {
    .gallery-text p i {
        left: 16rem;
    }
    .gal-head:hover i{
        left:17rem;
    }
}
@media (max-width:360px) {
    .gallery-text p i {
        left: 14rem;
    }
    .gal-head:hover i{
        left:15rem;
    }
    .gal-head:hover .gallery-text::after {
       
        width: 105.5%;
       
    } 
}
@media (max-width:320px) {
    .gallery-text p i{
        left:12rem;
    }
    .gal-head:hover i{
        left:13rem;
    }
}