/* Responsive design

Design System:



-- 01 Typography system:



-FONT SIZE SYSTEM (px):

10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98



-FONT Weights:



-Line Heights:



Primary: Brand color: #c41230;

Tints:





shades:





-- 06 Border Radius --

Default - 9px



-- 08 Letter Spacing --

-0.05 px

-0.75px



SPACING SYSTEM (px)

2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128



*/

/******************************************/

/* Media queries fire at below 1344px  */

/******************************************/

/* Reason being the hero section is 1300 px wide and this suitable for large screens

and for small desktops there is some inconsistency in the padding towards the left */

/* 1350/16 = 84 */

@media (max-width: 84em) {
}

/******************************************/

/* Media queries fire at below 1244px  */

/******************************************/

/* Landscape tablets and  small laptops*/

/* 1244/16 = 77.7 em // In em it is equal to default browser font size that is 16px */

@media (max-width: 78em) {


  #svg_map {
    max-height: 35vh;
  }

}

/******************************************/

/* Media queries fire at below 1044px */

/******************************************/

/* Portrait tablets*/

/* 1044/16 = 65 em // In em it is equal to default browser font size that is 16px */

@media (max-width: 65em) {
  html {
    /* 8px/16px = 0.5 = 50% */

    font-size: 50%;
  }

  .margin-top-lg {
    margin-top: 6.4rem !important;
  }

  #svg_map {
    max-height: 40vh;
  }

}

/******************************************/

/* Media queries fire at below 824px  */

/******************************************/

/* Smaller tablets*/

/* 824/16 = 51 em // In em it is equal to default browser font size that is 16px */

@media (max-width: 51em) {
  html {
    /* 7px/16px = 0.43 = 43% , 45% = 7.2px*/

    font-size: 45%;
  }

  .grid {
    row-gap: 3rem;
  }

  .padding-x-lg {
    padding: 0 3.2rem;
  }

  .margin-lg {
    /*margin: 2rem 3.2rem 13rem 3.2rem;            change7march*/

    margin: 2rem 1.2rem 13rem 1.2rem;
  }

  #svg_map {
    max-height: 40vh;
  }
  /* To scale element when hovered */

  .fa-hover:hover {
    transform: scale(1.2);

    transition: transform 0.3s ease-in-out;
  }

  .radio-check.select > .field-input-label {
    transform: scale(1.3);

    transition: transform 0.3s ease-in-out;
  }

  /* selects elements with class field-input-label that is a direct child of element with

both classes radio-check and select */

  /* Finally selects elements with fa-hover class under field-input-label */

  .radio-check.select > .field-input-label .fa-hover:hover {
    transform: scale(1);

    transition: transform 0.3s ease-in-out;
  }

  .margin-top-lg {
    margin-top: 4.8rem !important;
  }
}

/*********************************************************/

/* Media queries fire at below 644px  (For mobile phones)*/

/********************************************************/

/* 644/16 = 40 em // In em it is equal to default browser font size that is 16px */

@media (max-width: 40em) {
  html {
    /* 7px/16px = 0.43 = 43% , 45% = 7.2px*/

    font-size: 40%;
  }
   #svg_map {
      max-height: 50vh; /* Reduced height on larger screens */
    }

  body {
    margin-top: 12.8rem;
  }

  .no-border{
     /*  width: 25rem;                   /* change7march */

    width: 100%;
    max-width: 25rem;
    box-sizing: border-box;              /* change7march these 3 lines added new */
  }

  .short_input{
    /*width: 20rem;                        /* change7march */


    width: 100%;
    max-width: 25rem;
    box-sizing: border-box;              /* change7march these 3 lines added new */
  }

  /* change7march this fieldset is added new */
  fieldset {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .laptop-view {
    display: none;
  }

  .mobile-view {
    display: flex;
  }

  .grid {
    row-gap: 0.2rem;
  }

  .navbar-logo {
    height: 3rem;
  }

  .navbar-mainheading,
  .navbar-childheading {
    display: none;
  }

  .navbar-secheading,
  .navbar-secchildheading {
    display: flex;
  }

  .navbar-secheading {
    font-size: 3.4rem;
  }

  .navbar-secchildheading {
    font-size: 1.8rem;

    align-self: center;
  }

  .navbar-exit-btn {
    padding: 0.8rem 1.6rem;
  }

  .padding-x-lg {
    /*padding: 0 1.4rem;           change7march*/
    padding: 0 0.8rem; /* tighter on mobile */
  }

  .flex-container {
    /* flex-wrap: wrap; */

    /* flex-direction: column; */

    margin: 0 3.2rem;
  }

  .flex-card-container {
    /* flex-wrap: wrap; */

    flex-direction: column;

    margin: 0 3.2rem;
  }

  .field-input-label {
    font-size: 6rem;
  }

  .field-input-tooltip {
    font-size: 2.5rem;

    font-weight: 600;
  }

  /* For mobile layout vertical without boundaries */

  .flex-item.select > .field-input-label {
    transform: scale(1.3);

    transition: transform 0.3s ease-in-out;
  }

  .flex-item.select > .field-input-label .fa-hover:hover {
    transform: scale(1.15);

    transition: transform 0.3s ease-in-out;
  }

  .flex-tooltip {
    font-size: 2rem;

    font-weight: 600;

    visibility: hidden;

    opacity: 0;
  }

  .fa-hover:hover {
    transform: scale(1.3);

    transition: transform 0.3s ease-in-out;
  }

  .margin-top-md {
    margin-top: 1.6rem !important;
  }

  /* Survey cards layout */

  #survey-cards {
    margin-top: 2rem;

    font-size: 1.8rem;
  }

  .flex-card {
    width: 21rem;
  }

  .card {
    height: 17rem;
  }

  .fcc-btn {
    font-size: 1.8rem;
  }

  .card-header {
    font-size: 2.4rem;
  }

  .card-img-top {
    height: 10rem;
  }

  .fa-5x {
    font-size: 7rem !important;
  }

  .margin-top-lg {
    margin-top: 16.8rem !important;
  }

  .margin-lg {
    /* margin: 0rem 3.6rem 29rem 3.6rem; */

    /*margin: -9rem 2.6rem rem 2.6rem;           change7march*/

    margin: 2rem 1.6rem 13rem 1.6rem; /* ✅ smaller side margins */
  }

  .navbar {
    margin: 0 1.4rem !important;
  }
}

/*********************************************************/

/* Media queries fire at below 444px  (For smaller mobile phones)*/

/********************************************************/

/* 444/16 = 28 em // In em it is equal to default browser font size that is 16px */

@media (max-width: 28em) {
  /* body {

    margin-top: 13.8rem;

  } */

  /* .navbar-logo {
    height: 6.4rem;
  } */

  .navbar-exit-btn {
    padding: 0.4rem 0.8rem;
  }

  .navbar-exit-btn:hover {
    padding: 0.4rem 0.8rem;
  }

  .navbar-secheading {
    font-size: 2.8rem;
    margin-right: 6rem;
  }

  .no-border{
    /* width: 25rem;  */

    width: 100%;          /* was 25rem — this was breaking small screens */
    max-width: 20rem;     /* slightly tighter cap for very small phones */

  }



  .short_input{
    width: 20rem;
  }

  .navbar-secchildheading {
    font-size: 1.6rem;

    font-weight: 600;

    margin-right: 6rem;
  }

  .radio-check.flex-column {
    gap: 1.2rem;
  }

  /*

  .fs-section {

    font-size: 3rem;

  } */

  /* .fs-declaration {

    font-size: 3.2rem;

  } */

  .fieldlabel {
    padding: 0 1.2rem;

    line-height: 1.3;
  }

  .margin-top-sm {
    /* Made big to accomodate mobile device heights*/

    margin-top: 6rem;
  }

  /* text-area */

  .note-text {
    font-size: 2rem;
  }

  /* Model container */

  .open-popup {
    top: 50%;
  }

  .model-container .model button {
    width: 15rem;

    font-size: 2.5rem;
  }

  .model-container .model p {
    font-size: 2.5rem;
  }

  /* success page */

  .subnote {
    font-size: 2.8rem;
  }

  .greeting-text {
    font-size: 3.2rem;
  }
}