@font-face {
  font-family: 'Kalpurush';
  src: url('../fonts/kalpurush.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* For mobile phones: */
  @media (max-width : 480px)  { /* Smartphones ----------- */ 
  
/*  body::before {
      content: "Phones media query (480) fired";
      font-weight: bold;
      display: block;
      text-align: center;
      background: rgba(255, 255, 0, 0.9); 
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    } */

    [class*="col-"] {
      width: 100%;
    }

    .left_block{
      margin-left: 0%;
    }

  }

  @media only screen and (min-width: 481px) and (max-width: 767px) { /* Low resolution Tablets and iPads */

    /* body::before {
      content: "Low res tablets media query (481 > 767) fired";
      font-weight: bold;
      display: block;
      text-align: center;
      background: rgba(255, 255, 0, 0.9); 
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    } */

    .col-1 {width: 0%;}
    .col-2 {width: 50%;}
    .col-3 {width: 50%;}
    .col-4 {width: 50%;}
    .col-5 {width: 50%;}
    .col-6 {width: 50%;}
    .col-7 {width: 100%;}
    .col-8 {width: 100%;}
    .col-9 {width: 100%;}
    .col-10 {width: 100%;}
    .col-11 {width: 100%;}
    .col-12 {width: 100%;}

    .left_block{
      margin-left: 0%;
    }

  }

  /* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){

    /* body::before {
      content: "Portrait Tables media query (768 > 1024) fired";
      font-weight: bold;
      display: block;
      text-align: center;
      background: rgba(255, 255, 0, 0.9); 
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    } */

    .col-1 {width: 0%;}
    .col-2 {width: 50%;}
    .col-3 {width: 50%;}
    .col-4 {width: 50%;}
    .col-5 {width: 50%;}
    .col-6 {width: 50%;}
    .col-7 {width: 100%;}
    .col-8 {width: 100%;}
    .col-9 {width: 100%;}
    .col-10 {width: 100%;}
    .col-11 {width: 100%;}
    .col-12 {width: 100%;}

    .left_block{
      margin-left: 0%;
    }

}


/* For desktop: */
@media only screen and (min-width: 1025px) and (max-width: 1280px) { 

   /* body::before {
    content: "small desktop/laptop to HD media query (1025 > 1280) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  } */

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .left_block{
      margin-left: 10%;
    }

  }


@media (min-width:1281px) and (max-width: 1920px) { /* Big Screens */ 

    /* body::before {
      content: "HD to Full HD Screens media query ( 1281 > 1920) fired";
      font-weight: bold;
      display: block;
      text-align: center;
      background: rgba(255, 255, 0, 0.9); 
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    } */

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .left_block{
      margin-left: 10%;
    }


}

@media (min-width:1921px) and (max-width: 2048px)  { /* Big Screens */ 

  /* body::before {
    content: "Full HD to 2K media query ( 1921 > 2048) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  } */

  .col-8 {width: 40%;}
  .col-10 {width: 40%;}
  .col-12 {width: 100%;}

  .left_block{
    margin-left: 10%;
  }

}

@media (min-width:2049px) { /* Big Screens */ 

  /* body::before {
    content: "4K / Ultra HD to 8K and 10K media query ( > 2049) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  } */

  .col-8 {width: 40%;}
  .col-10 {width: 40%;}
  .col-12 {width: 100%;}

  .left_block{
    margin-left: 10%;
  }

}




/*Generic */

.midstrip {
  margin-top: 1cm;
}

.vidstrip {
  margin-top: 0.5cm;
}

.bottomstrip {
  margin-bottom: 3cm;
}

.headinglook {
  font-style: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: x-large;
  color: #7A1F65;
  margin-bottom: 1em;
  margin-top: 1.5em;

}

.titlelook {
  font-style: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size:x-large;
  color: #006087;
  margin-bottom: 1em;
}

.questionlook {
  font-family: Arial, Helvetica, sans-serif;
  font-size: larger;
  color: black;
}

.bigquestionlook {
  font-family: Arial, Helvetica, sans-serif;
  font-size:x-large;
  color: #006087;
}

.btn-primary{
  font-style: bold;
  background-color: #006087;
}


.btn-donate{
  color:white;
  background-color: #519fc0;
}

.biotitle{
  text-align:left;
  font-style:italic;
  font-size: large;
}

.biopop{
  font-size: smaller;
  font-style: bold;
}

.biobody{
  text-align:left;
}

.mandatory{
  background-color:rgba(175, 110, 236, 0.096)
}

.consent_button{
  color:white;
  background-color:#006087;
  border-color: #012a3a;
}


.emphasis_text{
  font-weight: bold;
  color: #912576;
}

.vid_emphasis_text{
  font-size:larger;
  color: #912576;
}

.btn_wecare{
  color:white;
  font-weight: bold;
  background-color: #861591;
  border-color: #861591;
}

.btn_wecare:hover {
  color: white;
  background-color: #6b1174; /* Darker purple on hover */
  border-color: #6b1174;
}


.lang-toggle-container {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 15px;
  background-color: #f8f9fa;
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  user-select: none;
}

.lang-option {
  color: #999;
  transition: color 0.3s;
}

.lang-option.active {
  color: #007bff; /* Or your WeCare primary color */
  font-weight: 800;
}

.separator {
  margin: 0 10px;
  color: #ccc;
}

body.lang-bn, body.lang-bn .headinglook, body.lang-bn .questionlook, body.lang-bn .biotitle, body.lang-bn .biobody, body.lang-bn .btn_wecare, body.lang-bn .navbar-text, body.lang-bn .lang-option {
    font-family: 'Kalpurush', Arial, sans-serif !important;
}