.page { display: flex; flex-direction: column; min-height: 89vh; }
.bannerimg { background-image: url("assets/img/banner.jpg"); background-repeat: no-repeat; }

.form { border-radius: 12px; background-color: var(--bg-color); box-shadow: 0px 0px 60px 0px rgba(94, 92, 154, 0.12); margin-left: auto; /* min-height: 500px; */ padding: 35px; width: 85%; position: relative; z-index: 100000; }
.gallery { /*  --s: 190px; /* control the size */ */ /*  --g: 10px;  /* control the gap */ */ display: grid; margin: calc(var(--s) + var(--g)); }
#logo-img { width: 55%; margin-left: 120px; padding: 10px; }
#para-italic { font-size: 15px; padding: 20px; text-align: justify; font-style: italic; }

#UpdatePanel1 { margin-right: 50px; }
.gallery > img { grid-area: 1 / 1; width: 184px; height: 159px; aspect-ratio: 1.15; border: 2px solid #1677cc; border-radius: 50%; object-fit: cover; /* clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%); */ transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1)); cursor: pointer; /* filter: grayscale(80%); */ transition: .2s linear; }

    .gallery > img:hover { filter: grayscale(0); z-index: 1; --_t: 1.2; }

    .gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)) }
    .gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)) }
    .gallery > img:nth-child(3),
    .gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)) }
    .gallery > img:nth-child(4),
    .gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)) }
    .gallery > img:nth-child(3),
    .gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)) }
    .gallery > img:nth-child(5),
    .gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)) }



/*responsive*/

@media (min-width:1920px) {
    #h5-res { margin-top: -132px; font-size: 30px; margin-left: -18px; font-weight: 600; color: #030303; }
    .bannerimg { height: 979px; }
    .gallery { margin-top: 280px; --s: 307px; --g: 113px; display: grid; margin: calc(var(--s) + var(--g)); }
    #UpdatePanel1 { margin-right: 210px; }

    .form { border-radius: 12px; margin-left: 110px; /* min-height: 500px; */ padding: 35px; width: 100%; margin-top: 35px; }
    #para-italic { /* margin-left: -205px; */ }

    #logo-img { width: 60%; margin-left: 170px; padding: 10px; margin-top: 60px; }
}

@media (min-width:2133.33px) {
    #h5-res { margin-top: -132px; font-size: 30px; margin-left: -18px; font-weight: 600; color: #030303; }
    .bannerimg { height: 979px; }
    .gallery { margin-top: 280px; --s: 307px; --g: 113px; display: grid; margin: calc(var(--s) + var(--g)); }
    #UpdatePanel1 { margin-right: 210px; }

    .form { border-radius: 12px; margin-left: 110px; /* min-height: 500px; */ padding: 35px; width: 100%; margin-top: 35px; }
    #para-italic { /* margin-left: -205px; */ }

    #logo-img { width: 60%; margin-left: 170px; padding: 10px; margin-top: 60px; }
}

@media (min-width: 1163.64px) {
    #h5-res { margin-top: -132px; font-size: 30px; margin-left: -18px; font-weight: 600; color: #030303; }

    .gallery { margin-top: 82px; --s: 162px; --g: 59px; display: grid; margin: calc(var(--s) + var(--g)); }
}

@media (min-width:1600px) {
    #h5-res { margin-top: -132px; font-size: 30px; margin-left: -18px; font-weight: 600; color: #030303; }
    .bannerimg { height: 979px; }
    .gallery { margin-top: 280px; --s: 307px; --g: 113px; display: grid; margin: calc(var(--s) + var(--g)); }
    #UpdatePanel1 { margin-right: 210px; }

    .form { border-radius: 12px; margin-left: 110px; /* min-height: 500px; */ padding: 35px; width: 100%; margin-top: 35px; }
    #para-italic { /* margin-left: -205px; */ }

    #logo-img { width: 60%; margin-left: 170px; padding: 10px; margin-top: 60px; }
}

@media (min-width:1745.45px) {
    #h5-res { margin-top: -132px; font-size: 30px; margin-left: -18px; font-weight: 600; color: #030303; }
    .bannerimg { height: 979px; }
    .gallery { margin-top: 280px; --s: 307px; --g: 113px; display: grid; margin: calc(var(--s) + var(--g)); }
    #UpdatePanel1 { margin-right: 210px; }

    .form { border-radius: 12px; margin-left: 110px; /* min-height: 500px; */ padding: 35px; width: 100%; margin-top: 35px; }
    #para-italic { /* margin-left: -205px; */ }

    #logo-img { width: 60%; margin-left: 170px; padding: 10px; margin-top: 60px; }
}

@media (min-width:1041px) and (max-width:1440px) {
    #h5-res { margin-top: -132px; font-size: 30px; margin-left: -18px; font-weight: 600; color: #030303; }
    .gallery { margin-top: 280px; --s: 242px; --g: 78px; display: grid; margin: calc(var(--s) + var(--g)); }
}

@media (min-width:376px) and (max-width:425px) {
    .gallery { --s: 315px; --g: 10px; display: grid; margin: calc(var(--s) + var(--g)); }
}

@media (min-width:1001px) and (max-width:1024px) {
    #h5-res { margin-top: -79px; font-size: 19px; margin-left: 0px; font-weight: 600; color: #030303; }
    .gallery { margin-top: 82px; --s: 220px; --g: 30px; display: grid; margin: calc(var(--s) + var(--g)); }
}

@media (min-width:1025px) and (max-width:1281px) {
    .gallery { margin-top: 82px; --s: 232px; --g: 80px; display: grid; margin: calc(var(--s) + var(--g)); }
}