/* 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) {
}

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

/* 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: 30vh !important;
  }
}

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

/* 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: 2rem;
  }

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

  .margin-lg {
    margin: 2rem 3.2rem 12rem 3.2rem;
  }

  /* 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%;
  }

  body {
    margin-top: 14rem;
  }

  .laptop-view {
    display: none;
  }

  .mobile-view {
    display: flex;
  }

  .grid {
    row-gap: 2rem;
  }

  .navbar-logo {
    height: 8rem;
  }

  .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;
    margin-left: 5vw;
  }

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

  .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: 30vh;

    font-size: 1.8rem;
  }

  .flex-card {
    width: 21rem;
  }

  .card {
    height: 25rem;
  }

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

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

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

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

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

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

    margin: 0rem 2.6rem 26rem 2.6rem;
  }

  .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;
    margin-left: 5vw;
  }

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

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

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

    font-weight: 600;
  }

  .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;
  }
}