/* khaakaa.css   (c) Akhilesh Gupta

   Mainly contains classes for div-s only
   
   This will only contain classes that can be
   used with either 'Pure' framework or 
   our non responsive page layout like
   kar-tal-600px.css
*/

/* The following container small-to-mid-size is
   used only in hindi.co/t/index.html !
   So it can be removed in the future if not required */


div#small-to-mid-size {
  text-align: left;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0.08in;
  padding-right: 0.15in;
  padding-bottom: 0.1in;
  padding-left: 0.15in;
  max-width: 5.5in;
  background-color: #f4ecec;
}


/* Columns within Row/s */


/* Styles for the outer container called row-flex */

.row-flex {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  align-items: stretch; /* Align items to have the same height */
}

.row-flex .right-container {
  margin-left: auto; /* pushes this and anything after it to the right */
}

/* use just two or three columns because widths of mobile phones are limiting */

/* classes with percentages of parent's (row-flex) width*/

/* A column that can niether grow nor shrik, and its width is 45% of the available width */
.column-60 {
  flex: 0 0 60%;	/* calc(60% - 2px) */
  margin: 0;		/* A 0 px margin on all sides of the column */
}

/* A 60% wide column that can grow and take remaining space */
.column-60-grow {
  flex: 1 0 60%;
  margin: 0;
}

/* A 60% wide column that can shrink if space of 60% width is not available */
.column-60-shrink {
  flex: 0 1 60%;
  margin: 0;
}

/* A column that can ether grow nor shrik, but its base width is 45% of the available width */
.column-60-grow-shrink {
  flex: 1 1 60%;
  margin: 0;
}

.column-45 {
  flex: 0 0 45%;
  margin: 0;
}

.column-45-grow {
  flex: 1 0 45%;
  margin: 0;
}

.column-45-shrink {
  flex: 0 1 45%;
  margin: 0;
}

.column-45-grow-shrink {
  flex: 1 1 45%;
  margin: 0;
}

.column-30 {
  flex: 0 0 30%;
  margin: 0;
}

.column-30-grow {
  flex: 1 0 30%;
  margin: 0;
}

.column-30-shrink {
  flex: 0 1 30%;
  margin: 0;
}

.column-30-grow-shrink {
  flex: 1 1 30%;
  margin: 0;
}

.column-20 {
  flex: 0 0 20%;
  margin: 0;
}

.column-20-grow {
  flex: 1 0 20%;
  margin: 0;
}

.column-20-shrink {
  flex: 0 1 20%;
  margin: 0;
}

.column-20-grow-shrink {
  flex: 1 1 20%;
  margin: 0;
}

.column-10 {
  flex: 0 0 10%;
  margin: 0;
}

.column-10-grow {
  flex: 1 0 10%;
  margin: 0;
}

.column-10-shrink {
  flex: 0 1 10%;
  margin: 0;
}

.column-10-grow-shrink {
  flex: 1 1 10%;
  margin: 0;
}

.column-5 {
  flex: 0 0 5%;
  margin: 0;
}

.column-5-grow {
  flex: 1 0 5%;
  margin: 0;
}

.column-5-shrink {
  flex: 0 1 5%;
  margin: 0;
}

.column-5-grow-shrink {
  flex: 1 1 5%;
  margin: 0;
}

/* Clear floats after the columns, is it required for flex 
.row-flex::after {
  content: "";
  display: table;
  clear: both;
}
*/

/* classes with fixed width -- some or all of these are tobe deleted! */

.column-200px {
  width: 200px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-160px {
  width: 160px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-120px {
  width: 120px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-100px {
  width: 100px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-80px {
  width: 80px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-60px {
  width: 60px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-40px {
  width: 40px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-20px {
  width: 20px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column-10px {
  width: 10px;
  margin: 0;
  padding: 0;
}


/* header already defined in 'pure' adding margin to it */

.header {
  margin-top: 0.5rem; /* was 2 or 10px */
}


/* Styles for larger screens */

.paatra {
    display: flex;
    justify-content: space-between;
}

.stambh {
    width: 48%; /* Adjust as needed */
}

.stambh-66 {
    width: 66%; /* Adjust as needed */
}

.stambh-34 {
    width: 34%; /* Adjust as needed */
}

/* Media query for screens below 512 pixels */
@media screen and (max-width: 512px) {
    .paatra {
        flex-direction: column; /* Switch to a single column layout */
    }

    .stambh {
        width: 100%; /* Take full width in the single column layout */
    }

    .stambh-66 {
        width: 100%; /* Take full width in the single column layout */
    }

    .stambh-34 {
        width: 100%; /* Take full width in the single column layout */
    }
}



/* to be deleted in 2026 */

.column200px {
  width: 200px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column160px {
  width: 160px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column120px {
  width: 120px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.column10px {
  width: 10px;
  margin: 0;
  padding: 0;
}