:root {

/* Fonts sizes start */
      font-size: clamp(14px, 3vw, 24px); /* Base font size scales between 14px and 16px    This means that elements without a specified font size will inherit this value.*/
      box-sizing: border-box;

    --font_size_title_desktop: clamp(2rem, 6vw, 3rem);  /* Title: scales between ~32px and 48px clamp(2rem, 6vw, 3rem);*/
    --font_size_title_iPad: 32px;
    --font_size_title_iPhone: 30px;

    --font_size_subtitle_desktop: calc(clamp(1.5rem, 6vw, 2.2rem)*0.7);      /* Subtitle: scales between ~24px and 32px */
    --font_size_subtitle_iPad: 24px;
    --font_size_subtitle_iPhone: 28px;

    --font_size_heading_desktop: calc(32px + 0.25vw); /* Heading: scales between ~24px and 32px calc(clamp(36px, 3vw, 50px)*1);  */
    --font_size_heading_iPad: 32px;
    --font_size_heading_iPhone: 32px;

    --font_size_subheading_desktop: 28px; /* Subheading: scales between ~16px and 24px clamp(18px, calc(1.2vw + 12px), 36px); */
    --font_size_subheading_iPad: 26px;
    --font_size_subheading_iPhone: 26px;


    --font_size_text_desktop: clamp(20px, calc(20px + 0.1vw),24px) ;   /22px * Body text: scales between ~18px and 24px calc(clamp(18px, calc(1.2vw + 12px), 24px) *1);  */
    --font_size_text_iPad: 20px; /* media 786 */
    --font_size_text_iPhone: 18px; /* media 480 */

    /* Fonts sizes end */


  --border_size: 0px;

  --color_indx_prime: var(--blue_dark5); /* var(--blue_dark5  --blue_prime); */
  --color_accent_strip: var(--color_indx_prime);
  --color_title: var(--color_indx_prime);
  --color_subtitle: var(--grey_medium_3);  /* --color_indx_prime;  #333333, var(--chabd_dark_blue); */
  --color_heading: var(--color_indx_prime);
  --color_subheading: var(--color_indx_prime);

  --font_dci_title:       var(--font_title_1); /* var(--font_Courier); */
  --font_dci_subtitle:    var(--font_Times);
  --font_dci_heading:     var(--font_title_1);  /* var(--font_Noto); */
  --font_dci_subheading:  var(--font_title_1);  /* --font_Poppins */

}

h2 {
  padding:0px;
  margin:0px;
}

.separater_short_line {
  width:120px;
  height:0.8px;
  background-color:darkgrey;
}

.hr-adjusted {
  margin-top: -20px; /* Move the second hr up by 4px */
}

.border_top_separater {
  border-top: 4px solid var(--color_indx_prime);
}

.border_red {
    border: var(--border_size) solid red;
}
.border_blue {
    border: var(--border_size) solid blue;
}
.border_orange {
    border: var(--border_size) solid orange;
}
.border_green {
    border: var(--border_size) solid green;
}


.font_black {
  color: var(--black);
}

.font_white {
  color: white;
}


.bg_prime {
  background-color: var(--color_indx_prime) !important;
}


.bg_blue_button {
  background-color: #006db0; !important;
}



.bg_grey {
    background-color: var(--grey_light_4) !important;;
}

.bg_grey_dark {
    background-color: var(--grey_dark) !important;;
}



.bg_green_dark {
  background-color: var(--green_dark1) !important;
}


.bg_blue_dark {
  background-color: var(--blue_dark5) !important;
}



.bg_blue_medium2 {
  background-color: var(--blue_medium2) !important;
}


.bg_white {
    background-color:white !important;;
}

/* dci titles and headings start */

/* Top of index and location links start */

.top_accent_strip {
  height:100px;
  background-image: linear-gradient(to bottom, var(--darkcyan0), white); /* var(--color_accent_strip) */
  /* background-color: var(--color_accent_strip); */
  width:100%;
  padding-top: 0px;
}

 .container_top {
    display: flex;
    /* font-size: 1.3rem; */
    box-sizing: border-box;
    border: var(--border_size) dashed red;
}

 .sub_container_left_desktop {
  width:70%;
  border: var(--border_size) dotted brown;"
  flex-wrap: wrap;
  padding:0 40px;
}

  .sub_container_right_desktop {
   width:30%;
   justify-content: center;
   text-align: left;
   border: var(--border_size) dotted brown;"
   flex-wrap: wrap;
   overflow: hidden;
   }

  .top_rotated_img {
    max-width: 100%;
    height: auto;
    height: 45vw; /* 500px Adjust height as needed */
    width: 30vw;
  }

  /* Top of index main end */

  .dci_title {
      color: var(--color_title);
      font-family: var(--font_dci_title);
      font-size: calc(var(--font_size_title_desktop) * 1);
      font-weight: 600;
      line-height:3rem;
      margin-bottom: 10px;
  }

  .dci_subtitle {
    color: var(--color_subtitle); /* var(--steel_blue); #40E0D0 #008B8B *var(--blue_prime);*/
    font-family: var(--font_dci_subtitle); /* var(--font_Courier);*/
    font-size: var(--font_size_subtitle_desktop);
    font-weight: 500;
    line-height:2.5rem;
    margin:50px 0px;
    padding-bottom:40px;
  }

  .dci_heading {
      color:var(--color_heading); /* var(--color_subtitle);  var(--steel_blue); #40E0D0 #008B8B *var(--blue_prime);*/
      font-family: var(--font_dci_heading);
      font-size: var(--font_size_heading_desktop);
      font-weight: 600;
      text-align: center;
      border: var(--border_size) solid black;
      margin-bottom: 3px;
  }

  .dci_subheading {
   color: var(--color_subheading); /* var(--steel_blue); #40E0D0 #008B8B *var(--blue_prime);*/
   font-family: var(--font_dci_subheading);
   font-size: calc(var(--font_size_subheading_desktop) * 1);;
   font-weight: 700;
   margin:3px;
  }

  /* dci titles and headings end */

  .incolumn_bg_image  {
    display:flex;
    width:100%;
    height:300px;
      justify-content: center; /* Center the image horizontally */
      align-items: center; /* Center the image vertically */
      border: var(--border_size) solid red;
  }

  .incolumn_title_over_image {
    width:300px;
    text-align:center;
    background-color:var(--steel_blue);"
  }


/* survey part start */
  .button_survey {
    border: var(--border_size) solid #999;
    font-size: 40px;
    font-size: 1.2rem;
    color: white; /* #1c87c9; */
    font-weight: 500;
    background-color:var(--button_red); /* color-bgr-submit-btn #80ff00; #eee;*/
    border-radius: 25px;
    box-shadow: 2px 2px var(--blue_prime);
    padding:10px 20px;
  }

  .button_survey:hover {
    background-color: var(--blue_prime);
  }


  .about_survey {
      display: flex;
      align-items: flex-start; /* Align the icon to the top of the text */
  }

  .about_survey_icon {
    width:30px; /* Adjust the width of the icons */
    height: 30px; /* Adjust the height of the icons */
      margin-right: 8px; /* Space between the icon and the text */
}

  .about_survey_text {
      margin: 0; /* Remove any default margin on the paragraph */
      display: inline-block; /* Ensures the text respects the icon alignment */
      text-align: left;
      font-size: var(--font_size_text_desktop);
  }

/* Survey part end */


/* Key features main start */
    .features {
        text-align: center;
        padding: 50px 0px;
        background-color: white;
    }

    .feature-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .feature-grid .feature-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        width: 300px;
        height: 310px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: black; /* Text color to stand out on gradient background */
        background-color:white;
        padding: 20px;
        margin:60px 0px;
      }

    .feature-card .icon {
        padding-top:20px;
        margin-bottom: 2vw; /* space between the icon and heading */
    }

    .feature-card .icon img {
        width: 70px;
        height: 70px;
    }

    .feature-card  .description {
        font-size: calc(var(--font_size_text_desktop)* 1); /* 1em; calc(var(--font_size_text) * 1); */
        color: black; /* Ensure text is readable on gradient background */
        text-align: justify;
        text-justify: inter-word;
        border: var(--border_size) solid yellow;
        box-sizing: border-box;
        padding:20px;
        margin-top: 0vw; /* distance between a Heading and a description */
    }


  .check-mark {
      font-size: 1.2em;
      margin: 20px 0;
  }

  /* move circle_border in one css from profile and list_grid */


  .circle-border {
      display: inline-block;
      border-radius: 50%;
      overflow: hidden;
      border: 8px solid; /* You can change the border thickness and color */
      border-color: var(--photo_border_color);
    }

  .circle-border img {
      display: block;
      width: 200px;
      height: auto;
    }


@media (max-width: 768px) {

  /* Responsive styles 768px - Top of index and loc links */

  .top_accent_strip {
    height:50px;
    padding-top: 40px;

  }


  .hr-adjusted {
    margin-top: -12px; /* Move the second hr up by 4px */
  }

  .dci_title {
      color:white;
      font-size: var(--font_size_title_iPad);
  }


  .dci_subtitle {
        color:var(--blue_dark5);
        font-size: var(--font_size_subtitle_iPad);
        text-align:center;
        font-weight: 400;
        margin:0px 0px;
        padding-bottom:0px;
        line-height:36px;
        margin:24px 0px;
        padding-bottom:0px;
  }

    #top_image {
        order: -1;
    }


    /* Top of index and location links with 786 media end */


    /* Responsive styles 768px - features start */
    .dci_heading {
        font-size: var(--font_size_heading_iPad);
     }


    .dci_subheading {
     font-size: var(--font_size_subheading_iPad);
   }

  .feature-card  .description {
            font-size: var(--font_size_text_iPad);
  }


    .about_survey_text {
          font-size: var(--font_size_text_iPad);
    }


} /* media-width 786  end */

/* media-width 480  start */


@media (max-width: 480px) {

  /* Responsive styles 480px - Top of index and loc links */

  .image_header {
    width:0px;
  }

  .top_accent_strip {
      height:2px;
      background-color:var(--blue_medium2);
      padding-top: 0px;
    }


  .dci_title {
      font-size: var(--font_size_title_iPhone);
  }


  .dci_subtitle {
      font-size: var(--font_size_subtitle_iPhone);
  }


    /* Responsive styles 768px - features start */
  .dci_heading {
        font-size: var(--font_size_heading_iPhone);
   }

    .dci_subheading {
        font-size: var(--font_size_subheading_iPhone);
     }


    /* Top of index and location links with 480 media end */

    .feature-card  .description {
        font-size: var(--font_size_text_iPhone);
      }

    .feature-grid .feature-card {
      margin-bottom: 0px; /* Adjust the   value as needed */
    }

    .feature-card {
      height: 250px;
    }
    /* Key features main no media end */


    .about_survey_text {
        font-size:var(--font_size_text_iPhone);
    }

}       /* media-width 480  end */