:root{

    --gap: 22px;

    --radius: 14px;

  }



  .gallery-container{

    width:100%;

    max-width:1260px;

    margin:0 auto;

    padding: 5% 0% 10% 0%;

  }

  .gallery-heading{

    display: flex;

    justify-content: center;

    margin-bottom: 5%;

  }

  /* Gallery wrapper (flex-based "masonry-like" layout) */

  .it-gallery-thumb-wrap{

    display:flex;

    gap:var(--gap);

    align-items:flex-start;

    justify-content:center;

    flex-wrap:wrap;

  }



  /* Each column box - contains two thumbnails stacked */

  .it-gallery-thumb-box{

    display:flex;

    flex-direction:column;

    gap:var(--gap);

    /* default 1 column on very small screens -> full width */

    flex: 0 0 100%;

  }



  /* Different box shapes/sizes to create the staggered look */

  .box-style-1 { flex-basis: 14%; }  /* narrow tall */

  .box-style-2 { flex-basis: 22%; }  /* medium */

  .box-style-3 { flex-basis: 18%; }  /* medium narrow */

  .box-style-4 { flex-basis: 28%; }  /* wide tall */

  .box-style-5 { flex-basis: 16%; }  /* narrow */



  /* Make boxes shrink/grow nicely while keeping the layout */

  .it-gallery-thumb-box { min-width:120px; }



  /* Each thumb container (controls height, overflow and radius) */

  .it-gallery-thumb{

    position:relative;

    overflow:hidden;

    border-radius: var(--radius);

    background: #f0f6f5;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);

    border: 5px solid #ffffff;

  }

   /* .it-gallery-thumb::after{

    content: "";

    width: 100%;

    height: 100%;

    background: #01423b59;

    position: absolute;

    right: 0px;

    bottom: 0px;



 } */



  /* Two thumb variants (top/ bottom) — change heights to produce variety */

  .it-gallery-thumb.style-1{ height: 260px; } /* larger card */

  .it-gallery-thumb.style-2{ height: 150px; } /* smaller card */



  /* Image rules */

  .it-gallery-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition: transform .6s ease;

  }

  .it-gallery-thumb:hover img{

    transform:scale(1.06);

  }



  /* Responsive breakpoints - adjust how many columns and heights */

  @media (max-width: 1200px){

    .box-style-1 { flex-basis: 16%; }

    .box-style-2 { flex-basis: 24%; }

    .box-style-3 { flex-basis: 20%; }

    .box-style-4 { flex-basis: 30%; }

    .box-style-5 { flex-basis: 18%; }



    /* slightly reduce heights */

    .it-gallery-thumb.style-1{ height:220px; }

    .it-gallery-thumb.style-2{ height:140px; }

  }



  @media (max-width: 900px){

    /* Simpler layout: 2-3 columns-ish */

    .box-style-1,

    .box-style-2,

    .box-style-3,

    .box-style-4,

    .box-style-5 { flex-basis: 48%; }

    .it-gallery-thumb.style-1{ height:200px; }

    .it-gallery-thumb.style-2{ height:120px; }

  }



  @media (max-width: 600px){

    /* single column on small devices */

    .it-gallery-thumb-wrap { gap:18px; }

    .it-gallery-thumb-box { flex-basis: 100% !important; width:100%; }

    .it-gallery-thumb.style-1{ height:220px; }

    .it-gallery-thumb.style-2{ height:180px; }

  }



  /* optional decorative dots (like your original design had) */

  .decor-dots{

    position:absolute;

    pointer-events:none;

    width:80px; height:80px;

    background:

      radial-gradient(circle at 10% 20%, rgba(0,150,120,.12) 6px, transparent 7px),

      radial-gradient(circle at 70% 60%, rgba(0,150,120,.12) 6px, transparent 7px);

    border-radius:10px;

    opacity:.9;

  }