/*
    chitra.css				version 1
	
    Styles for images

	I M A G E s   A S   B L O C K s 

    Organized for readability and easy maintenance

	Main difference with earlier version is 
	that now an img is treated as a "block"			   */

/* 1. Default image reset */

img {
    display: block;
	max-width: 100%;
	height: auto;
    margin: 0;
    padding: 0; /* let container handle alignment unless we override below */
}


/* an image inside #menu will get its padding-left and padding-right from */
#menu img {
    padding-left: inherit;
    padding-right: inherit;
}

/* Match paragraph alignment in #menu and .content 
#menu img,
.content img {
    padding-left: inherit;
    padding-right: inherit;
}*/

img.inline {
  display: inline;             
  vertical-align: middle;      /* align image with text middle */
}

/* deprecated and to be removed in mid 2026; avoid using it */

img.inline-with-text {
  display: inline;				/* keep it inline with text */
  position: relative;
  top: 0.11em;					/* adjust up/down */
}

/* I need to experiment with following before using them
img.inline-block {
  display: inline-block;
}
*/

/* Make images with the 'right' class display as block-level elements,
   removing float so they no longer wrap text.
   Right-aligns image within its parent container,
   preserving full block display and preventing inline behavior. */

img.right {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: 0; /* still right-aligns image */
}

img.centered {
  margin: 0 auto;
}

/*  2. Floating behavior * /

img.right {
    float: right;      /* Right-aligned image * /
}

img:not(.right) {
    clear: both;       /* Force left/non-floated images below previous float * /
}

*/

/*  3. Common utility sizes */

img.max-width-200px { max-width: 200px; }

img.width-30pc  { width: 30%; }
img.width-40pc  { width: 40%; }
img.width-50pc  { width: 50%; }
img.width-60pc  { width: 60%; }
img.width-70pc  { width: 70%; }
img.width-80pc  { width: 80%; }
img.width-90pc  { width: 90%; }
img.width-100pc { width: 100%; }
img.100pratishat { width: 100%; } /* Alternate naming */

/* 4. Width with max constraints
   (384px, 512px, 770px, 256px)  */

/* Max 770px */

img.width-30pc-max-770px { width: 30%; max-width: 770px; }
img.width-40pc-max-770px { width: 40%; max-width: 770px; }
img.width-50pc-max-770px { width: 50%; max-width: 770px; }
img.width-60pc-max-770px { width: 60%; max-width: 770px; }
img.width-70pc-max-770px { width: 70%; max-width: 770px; }
img.width-80pc-max-770px { width: 80%; max-width: 770px; }
img.width-90pc-max-770px { width: 90%; max-width: 770px; }
img.width-100pc-max-770px { width: 100%; max-width: 770px; }

/* Max 512px */

img.width-30pc-max-512px { width: 30%; max-width: 512px; }
img.width-40pc-max-512px { width: 40%; max-width: 512px; }
img.width-50pc-max-512px { width: 50%; max-width: 512px; }
img.width-60pc-max-512px { width: 60%; max-width: 512px; }
img.width-70pc-max-512px { width: 70%; max-width: 512px; }
img.width-80pc-max-512px { width: 80%; max-width: 512px; }
img.width-90pc-max-512px { width: 90%; max-width: 512px; }
img.width-100pc-max-512px { width: 100%; max-width: 512px; }

/* Max 384px */

img.width-30pc-max-384px { width: 30%; max-width: 384px; }
img.width-40pc-max-384px { width: 40%; max-width: 384px; }
img.width-50pc-max-384px { width: 50%; max-width: 384px; }
img.width-60pc-max-384px { width: 60%; max-width: 384px; }
img.width-70pc-max-384px { width: 70%; max-width: 384px; }
img.width-80pc-max-384px { width: 80%; max-width: 384px; }
img.width-90pc-max-384px { width: 90%; max-width: 384px; }
img.width-100pc-max-384px { width: 100%; max-width: 384px; }

/* Max 256px */

img.width-30pc-max-256px { width: 30%; max-width: 256px; }
img.width-40pc-max-256px { width: 40%; max-width: 256px; }
img.width-50pc-max-256px { width: 50%; max-width: 256px; }
img.width-60pc-max-256px { width: 60%; max-width: 256px; }
img.width-70pc-max-256px { width: 70%; max-width: 256px; }
img.width-80pc-max-256px { width: 80%; max-width: 256px; }
img.width-90pc-max-256px { width: 90%; max-width: 256px; }
img.width-100pc-max-256px { width: 100%; max-width: 256px; }

/* Max 192px */

img.width-30pc-max-192px { width: 30%; max-width: 192px; }
img.width-40pc-max-192px { width: 40%; max-width: 192px; }
img.width-50pc-max-192px { width: 50%; max-width: 192px; }
img.width-60pc-max-192px { width: 60%; max-width: 192px; }
img.width-70pc-max-192px { width: 70%; max-width: 192px; }
img.width-80pc-max-192px { width: 80%; max-width: 192px; }
img.width-90pc-max-192px { width: 90%; max-width: 192px; }
img.width-100pc-max-192px { width: 100%; max-width: 192px; }

/*  5. Almost full-width */

img.width-100pc-minus-2px   { width: calc(100% - 2px);   height: calc(100% - 2px); }
img.width-100pc-minus-6px   { width: calc(100% - 6px);   height: calc(100% - 6px); }
img.width-100pc-minus-20px  { width: calc(100% - 20px);  height: calc(100% - 20px); }

/*  6. Margins utilities */

img.2px-left-margin  { margin-left: 2px; }
img.20px-right-margin { margin-right: 20px; }

/*  7. Miscellaneous */

.cool-heading {
  background: linear-gradient(120deg, #dd7777, #ff7f32 40%, #e2721d);
  color: white;
/*  padding: 0.5rem; */
}

.faded-sky-blue {
  background: linear-gradient(120deg, #8a9cab, #acbdc9 40%, #7a8c9a);
  color: white;
/*  padding: 0.5rem; */
}

.light-steel-mist {
  background: linear-gradient(120deg, #6b7d8f, #8ea0af 40%, #5a6b7a);
  color: white;
/*  padding: 0.5rem; */
}

/* PayUMoney button reset */

.pm-button {
    margin: 0;
    padding: 0;
}

/* Stylish HR */

hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, #aa6b6b, #5f27cd, #56ab2f);
    margin: 20px 0;
}