*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}


h1{
    font-size: 3.4rem !important;
    color: #374151 !important;
    font-weight: 700 !important;
}

.gallery{
    background-color: white;
}

nav{
display: flex;
justify-content: center;
align-content:center ;
}



nav img{
    width: 190px;
    height: 60px;
   
}

nav li{
    font-size: 18px;
}

.hero-text{
   
    margin-top: 30px;
    margin-bottom: 30px;
}

.hero-text h1{
 font-size: 2.6rem;
}

.hero-image img{
    background-size: contain;
    width: 1100px;
    min-height: 400px;
}
body{
    overflow-x: hidden;
}


.cord{
    margin-top: 50px;
}



.gallery-text{
    text-align: center;
margin-top: 50px;
color: #374151;
font-family: sans-serif;
margin-bottom: 50px;}








span{
    color: #6851ff;
}

.one{
width: 280.35px;
height: 200px;
background-color: white;
background-image: url(assets/hm1.png);
background-size: cover;
background-repeat: no-repeat;
grid-column: 2 / 3;
grid-row: 1 / 2;
transform: translateY(40px);
}



.images{
   display: grid;
 grid-template-columns: 300px 400px 400px ;
 width: 100vw;

 justify-content:center ;
 background-color: white;
gap: 20px;
height: 100%;   
  
}


.img{
    background-color: white;
    border-radius: 15px;
    transition: all 0.5s;
    
}

.two{
  width: 339px;
height: 245px;
background-color: white;
background-image: url(assets/hm2.png);
background-size: cover;
background-repeat: no-repeat;  
transform: translateX(-120px);
}




.three{
    width: 309px;
height: 180px;
background-color: white;
background-image: url(assets/hm3.png);
background-size: cover;
background-repeat: no-repeat;
grid-column: 1 / 2;
grid-row: 1 / 2;
transform: translateY(120px);

}


.four{
    width: 390px;
height: 310px;
background-color: white;
background-size: cover;
background-repeat: no-repeat;
background-image: url(assets/hm9.png);
}




.five{
    width: 343px;
height: 215px;
background-position: center;
background-color: white;
background-image: url(assets/hm8.png);
background-repeat: no-repeat;
background-size: cover;
}




.six{
    width: 309px;
height: 250px;
background-color: white;
background-image: url(assets/hm5.png);
background-size: cover;
background-repeat: no-repeat;
grid-column: 1 /2;
 grid-row: 2 /span 4 ;
 transform: translateY(60px);
}




.seven{
    width: 323.35px;
height: 310px;
background-color: white;
background-image: url(assets/hm4.png);
background-size: cover;
background-repeat: no-repeat;
grid-row: 3 / span 4;
transform: translateY(-100px);
}



.eight{
    width: 329.35px;
height: 245px;
background-color: white;
background-image: url(assets/hm7.png);
background-size: cover;
background-repeat: no-repeat;
grid-column: 2 / 3;
grid-row: 3 / 4;
position: relative;
right: 250px;

}



.nine{
    width: 288.35px;
height: 225px;
background-color: white;
background-image: url(assets/hm6.png);
background-size: cover;
background-repeat: no-repeat;
grid-column: 2 / 3;
grid-row: 3 / 4;
position: relative;
left: 100px;
}

.img:hover{
    transform:scale(1.01) ;
}
.images:hover{
    transform: scale(1);
}




 @media (min-width: 800px) and (max-width: 1200px) {
    .images{
       grid-template-columns: 300px 300px;
 transform: translateX(-70px);  
     gap: 20px;
    }
    .hero-image img{
        width: 700px;
        height: 700px;
    }
    .img{
        transform: translate(0px,0px);
        
        grid-column: unset;
        grid-row: unset;
        
    }

    /* .hero-text h1{
font-size: 2.3rem !important;
    } */
    .eight{
        margin-left: 300px;
    }
    .nine{
      margin-left: 200px;
    }
    body h1{
        font-size: 3rem;
        margin-bottom: 20px;
    }
     .img :hover{
        transform: translate(0px,0px);
    }
} 

@media (min-width: 480px) and (max-width: 800px) {
    .images{
       grid-template-columns: 300px ;
 transform: translateX(-70px);  
     
    }
    .hero-image img{
        width: 500px;
        height: 500px;
    }
     .hero-text h1{
font-size: 2.3rem !important;
    }
    .img{
        transform: translate(0px,0px);
        transition: none;
        grid-column: unset;
        grid-row: unset;
      
    }
    .eight{
        margin-left: 250px;
    }
    .nine{
      transform: translateX(-100px);
    }
    body h1{
        font-size: 2rem;
    
    }

    .img :hover{
        transform: scale(0);
    }
}

@media (min-width: 0px) and (max-width: 480px) {
    .images{
       grid-template-columns: 300px ;
 transform: translateX(-70px);  
     
    }
     .hero-text h1{
font-size: 1.7rem !important;
    }
    .hero-image img{
        width: 300px;
        height: 300px;
    }
    .img{
        transform: translate(0px,0px)translateX(40px);
        transition: none;
        grid-column: unset;
        grid-row: unset;
      
    }
    .eight{
        margin-left: 250px;
    }
    .nine{
      transform: translateX(-60px);
    }
    body h1{
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .four{
       
        width: 343px;
       background-size: cover;
    }

    .img :hover{
        transform: scale(0);
    }
}


.footer {
    background: linear-gradient(135deg, #6a11cb, #8e2de2);
    color: #fff;
    padding: 50px 0 20px;
  }
  
  .logo {
    font-weight: bold;
  }
  
  .tagline {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .desc {
    font-size: 14px;
    max-width: 400px;
  }
  
  .social-icons i {
    font-size: 18px;
    margin-right: 15px;
    cursor: pointer;
  }
  
  .footer-bottom hr {
    border-color: rgba(255,255,255,0.3);
  }
  
  .footer-bottom p {
    font-size: 14px;
    margin: 10px 0 0;
  }