:root {
 --vp-width: 100vw;  /* View point width DO NOT CHANGE THIS VALUE*/
  --current-window-width-px: 1000;
  --bg-color-slide: #3e526a;
  --bg-color-blue: #1e90ff;
  --header-menu-bg-color: #04AA6D;
  --header-menu-item-color: lightblue;
  --color: #ffffff; 
  --header-height: 75px; 
  --header-max-height: 75px; 
  --slide-height: 60vw; 
  --slide-width: 80vw; 
  --slide-item-border-radius: 15px;
 /* --gallery-height:30vw; /* This element will be 30% of the viewport width */
  --gallery-heightper:25; 
  --gallery-widthper:25; /* Number of boxes per row is decided by this value, samples , */
  --theme-bg-color-dark-blue: #00ADB3 !important;
  --theme-bg-color-light-blue: #C6FDFF;
  /* below is not working properly */
  /*
  --gallery-height:calc(var(--current-window-width-px)* var(--gallery-heightper, 30)/100); 
   --gallery-width:calc(var(--current-window-width-px) * var(--gallery-widthper, 30)/100); 
   */
}

  /* Mobile */

@media screen and (max-width: 768px) {
      :root {
        --gallery-height: 30vw; 
        --gallery-width: 30vw; 
		--gallery-slide-border-radius: 15px;
		--gallery-item-border-radius: 15px;
		--gallery-card-height: 50vw; 
        --gallery-card-width: 40vw; 
      }
    }

  /* Desktop */

    @media screen and (min-width: 620px) {
      :root {
        --gallery-height: 25vw; 
        --gallery-width: 25vw; 
		--gallery-slide-border-radius: 25px;
		--gallery-item-border-radius: 25px;
		--gallery-card-height: 40vw; 
        --gallery-card-width: 30vw;
      }
    }