/* rem and em do NOT dependend on html font-size in media queres */
/* Instead 1rem = 1em = 10px */
/* You should use ems in media queires not rem */
/* checking where our design breaks */

/* @media (min-width: 768px) {
    .container {
        width: 750px;
    }
} */

/* Instead 1rem = 1em = 10px */
/* 1350 px / 16px = 84,375 rounded would be 84em  */
/*  */
/*  */

@media(max-width:90em){
html{
    font-size:58%;
}
}



/* Our code seems to break at 1241 px */

/****************************************************************************************/
/* BELOW  1241px ( Landscape Tablets)*/
/************************************************************************************* */
/* So 1241 / 16px = 77.56em */
@media (max-width: 77.56em) {
  html {
    /* don't set in px set in percentage  */
    /* so if you want 9px do 9px divided by 16px and it gives you 56.25% */
    /*  origonally was html {font-size: 10px; font-size: 62.5%;} */
    font-size: 56.25%;
  }

  /* *********************HEADER NAVIGATION*************************************** */
  /* .header{
    padding-right: 1rem;
    padding-left: 1rem;
    justify-content: space-around;
  } */
  .logo {
    padding-left: 0px;
    padding-right: 5rem;
    min-width: 5.8rem;
    /* position: absolute; */
  }

  /* .main-nav{
    width: 100%;
  } */
  .main-nav-list {
    gap: 2rem;
    margin-right: 0rem;
    justify-content: space-around;
    padding-left: 10rem;
    max-width: 93rem;
  }
  .btn--rounded {
    /* margin-right:0.2rem!important;
    padding-left:0rem; */
    margin-right: 3rem;
    margin-left: 0rem;
  }
  .main-nav-list :nth-child(5) a {
    margin-right: 0rem;
    margin-left: 6rem;
  }

  .main-nav-list :nth-child(4) {
    padding-right: 0rem;
  }

  .main-nav-list :nth-child(5) {
    padding-left: 26rem;
  }

  /* ********************* HEADER NAVIGATION*************************************** */
  .container {
    padding: 0px 0rem;
  }
  /* *********************HERO*************************************** */
  /* .hero-left {
    max-width: 57em;
  } */
  .hero-text-box {
    margin-left: 0rem;
    /* margin-right: 0; */
    height: 38rem;
    /* padding-right: 9rem; */
    max-width: none;
    padding-left: 4rem;
    margin-top: 1.5rem;
  }

  .overlap-image1-vector {
    width: 32rem;
    height: 3rem;
  }
  .hero-description {
    margin-top: 1rem;
  }

  .hero-right {
    max-width: 55em;
    /* old width */
    /* width: 50em; */
    padding-right: 2rem;
  }

  .heading-primary {
    font-size: 6.2rem;
    width: auto;
  }
  .hero-img-box {
    padding: auto;
    min-width: 50em;
    /* TRY SEEING IF REMOVING THE MIN-WIDTH IN HERO IMG BOX */
  }

  .hero-img {
    width: 65em;
    min-width: 159%;
    height: 100%;
    object-fit: cover;
    object-position: right 3rem top -1rem;
  }
  /* *********************HERO*************************************** */
  .row {
    flex-wrap: nowrap;
  }

  /* **********************ONLINE DATA ************************* */
  .media-row {
    /* max-width: 84rem; */
    padding: 0px 2rem;
  }
  .online-data-column {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .online-data-img {
    /* display: flex;
    align-content: center;
    justify-content: center; */
    position: relative;
    width: 90%;
    margin-top: 4rem;
    margin-right: 14rem;
  }

  .online-data-img--left {
    height: 100%;
    width: 100%;
    min-width: 20rem;
    min-height: 20rem;
    max-height: 50rem;
    max-width: 50rem;
    margin-top: 3rem;
    margin-left: auto;
  }
  .online-data-text-box-left {
    align-items: none;
    justify-content: center;
    margin-left: 0;
    padding-right: 3rem;
  }
  .online-data-text-box-right {
    display: flex;
    flex-direction: column;
    align-items: none;
    justify-content: center;
    max-width: 50rem;
    margin-top: 17rem;
  }

  .online-data-title {
    display: flex;
    align-items: center;
    justify-content: none;
  }
  /* ******************ONLINE DATA *********************************/
  /* going to change the last grid over to flexbox vs using grid to keep it consistent */
  /* .grid{
        gap: 4.8rem;
    } */

  .grid {
    gap: 1.6rem;

    /*************************SERVICES*************************************** */
  }
  .services {
    background-image: url();
    background-color: #5c5fef;
    min-height: 0rem;
    padding-bottom: 7rem;
  }
  .column--services {
    min-width: 27rem;
  }

  /*************************SERVICES*************************************** */

  /*************************REAL TIME DATA SOLUTIONS *************************************** */

  /*************************REAL TIME DATA SOLUTIONS *************************************** */

  .rtd-solutions-imgs {
    position: relative;
    width: 100%;
    margin-top: 4.7rem;
    margin-right: 6rem;
  }

  .rtd-solutions-text-box {
    /* margin-left: 4rem; */
    padding-left: 2rem;
  }
  /************************FOOTER*************************************** */

  .footer {
    padding-right: 3rem;
  }
  .footer-heading {
    display: flex;
    flex-direction: column;
    margin-right: 9rem;
  }
  .footer-bottom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /************************FOOTER*************************************** */
}

/* ********************************* ************************************************************************************************/
/* BELOW 980px - 16px = 61.25em (Tablets)*/
/*************************************************************************************************************************************/

@media (max-width: 61.25em) {
  html {
    /* 8px target / 16px = 0.5 = 50% */
    font-size: 50%;
  }
  .inside-content-container {
    border: 20rem;
  }

  /****************** HEADER START******************************** */

  /* .header{
    align-items: unset;
  } */

  .header-button {
    display: none;
  }

  /***************MOBILE NAV BUTTON****************/
  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgb(255, 255, 255);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    /* the z index lets it be layered on top */
    /* z-index: 9999; */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 118rem;
    /* overflow: scroll; */

    transform: translateX(100%);

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows NO transitions at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .main-nav-list {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    flex-direction: column;
    padding-left: 0px;
    gap: 6rem;
  }
  .main-nav-list :nth-child(5) {
    padding-left: 0px;
    margin-left: 0px;
  }

  .main-nav-list :nth-child(5) a {
    margin-left: 0px;
  }
  .btn--outline:link,
  .btn--outline:visited {
    font-size: 3rem;
  }

  .btn--rounded:link,
  .btn--rounded:visited {
    font-size: 3rem;

    position: relative;
    border-radius: 1.2rem;
    height: 7rem;
    max-width: 27.36rem;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  /* The close icon will only apply when class= "nav-open" exists in our html */
  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  /***************MOBILE NAV BUTTON END****************/
  /* ******************HEADER END *************************/

  /* ************************HERO Start*****************************/

  .section-hero {
    margin-left: 3.8rem;
    margin-right: 2rem;
  }

  .row-demo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 6rem;
  }
  /* LEFT SIDE */
  .hero-left {
    margin-top: 4rem;
  }
  .hero-text-box,
  .hero-img-box {
    text-align: center;
    padding: 0;
  }
  .hero-text-box {
    margin-top: 8.4rem;
    /* Centering the text in the middle of the screen. */
    /* display: flex;
    align-items: center;
    justify-content: center; */
    min-width: 104%;
    align-items: center;
    margin-right: 2rem;
    margin-top: 6rem;
  }
  .overlap-image1-vector {
    width: 32rem;
    height: 3rem;
  }
  .heading-primary {
    font-size: 7.2rem;
    /* display: flex;
    align-items:center;
    justify-content: center; */
    width: auto;
  }
  .overlap-image1 {
    width: 53em;
    height: auto;
  }
  .overlap-image1-vector {
    height: 4rem;
    left: 18rem;
    position: absolute;
    top: 12.8rem;
    width: 35.8rem;
  }
  h1 span:last-of-type {
    display: inline-block;
  }
  .hero-description {
    margin-top: 2.28rem;
    width: 100%;
    font-size: 2rem;
    line-height: 3rem;
  }
  /* RIGHT SIDE WITH HERO IMG */
  .hero-right {
    max-width: none;

    margin-right: 13rem;
    padding: auto;

    padding-right: 0;
    padding-top: 2rem;
  }

  .hero-img-box {
    padding: 0;
    /* display: flex;
    align-items: center;
    justify-content: center; */
  }
  .hero-img {
    /* min-width: 150%;  */
    /* width: 50em; */
    /* width: 65em;
    min-width: 158%;
    height: 100%;
    object-fit: contain;
    object-position: right 4rem top 2rem; */
    min-width: 202%;
    height: 60rem;
    object-fit: cover;
    object-position: right 2rem top -8.6rem;
  }

  /*******************HERO End *************************/

  /* ****************FEATURES SECTION *******************/

  .features-title {
    margin-right: 0rem;
  }

  .grid {
    gap: 1rem;
  }

  /* .grid--3cols{
    grid-template-columns: ( 3, .5fr);
  
  } */

  .raw-data-content {
    padding: 3.2rem 1.8rem 4.8rem 1.8rem;
  }
  /* ****************FEATURES SECTION*********************** */
  .online-data-img {
    position: relative;
    width: 90%;
    margin-top: 6rem;
  }

  /***********************SERVICES SECTION***************************/

  .column--services {
    min-width: 27rem;
    max-width: 34rem;
  }

  .services-title {
    margin-right: 5rem;
  }

  /***********************SERVICES SECTION***************************/

  /* SERVICES SECTION and SOLUTIONS SECTION */

  /* Real-time data solutions */
  /* But also applies to online-data-analytics */

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 99%;
    /* width: 85rem;    */
  }

  .column {
    min-width: 31rem;
  }

  /* ONLINE DATA SECTION */
  .online-data-column {
    padding-right: 0px;
  }

  /* ONLINE DATA SECTION END */

  /* Real-time data solutions*/

  /* Solutions Section */

  .rtd-solutions-img-left {
    min-width: 10rem;
    min-height: 15rem;
  }
  .rtd-solutions-img-right {
    min-width: 10rem;
    min-height: 15rem;
  }
  /* Solutions Section */
  /***************************TESTIMONIALS SECTION *****************************/
  .testimonials-title {
    margin-right: 0rem;
  }
  /**************************TESTIMONIALS SECTION  END*************************/
}

/*Footer media quiery */
@media screen and (max-width: 61.25em) {
  .footer-3 {
    display: none;
  }
  /* .footer-email-form{
    margin-top:2rem;
  } */
}
/* **********************************************************/
/* BELOW 760px / 16px = 47.18em (Smaller Tablets) */

/* ************************************************************/
/* Below 760px */
@media (max-width: 47.5em) {
  /* Features section */

  html {
    /* 8px target / 16px = 0.5 = 50% */
    font-size: 48%;
  }

  /* .inside-content-container {
     padding: 2rem;
    border: 1px solid #ff0000; 
  } */

  /* ======================HERO SECTION =====================*/

  .section-hero {
    margin-left: 0rem;
  }
  .hero-text-box {
    margin-right: 4rem;
  }

  /* ======================HERO SECTION  End=====================*/

  /* ======================HERO SECTION =====================*/

  /* ======================FEATURES SECTION =====================*/
  .features {
    height: 65rem !important;
  }
  .grid--3cols {
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: repeat(auto-fit, minmax(3, 1fr)); */
    /* height: 60rem; */
  }
  /* .grid {
    gap: 4rem;

  } */

  .raw-data-content {
    padding: 3.2rem 4.8rem 4.8rem 4.8rem;
  }
  /* Target the 3rd card and center */
  /* .raw-data-card3 {
    grid-template-columns: 1/ -1;
    justify-self: center;
    grid-column: 1/ -1;
  } */
  .features {
    height: 85rem;
  }
  /* .features-title {
    margin-right: 0rem;
    margin-top: 0rem;
    margin-bottom: 6rem;
  }  */

  .raw-data-card1,
  .raw-data-card2,
  .raw-data-card3 {
    max-height: 100%;
    justify-content: flex-start;
    min-width: 20rem;
  }

  .raw-data-title {
    font-size: 1.8rem;
  }
  /* ======================FEATURES SECTION END=====================*/

  /* ======================ONLINE DATA ANALYTICS=====================*/
  .online-data-text-box-left {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0px;
    padding-left: 2rem;
  }
  .online-data-column {
    padding-left: 0px;
    padding-right: 0px;
  }
  .row {
    width: 100%;
  }
  .media-row {
    padding: 0px 0rem;
  }
  .online-data-img {
    margin: auto;
  }
  .online-data-text-box-right {
    width: 100%;
    margin-top: 8.5rem;
  }

  .online-data-text-right {
    min-width: 42rem;
    text-align: center;
  }
  .online-data-title {
    width: 100%;
  }

  .online-data-text-right {
    min-width: 33rem;
    max-width: 34rem;
    text-align: left;
  }
  /* ======================ONLINE DATA ANALYTICS END=====================*/

  /* ======================SERVICES===========================*/
  .column--services {
    min-width: 33%;
    padding-left: 0px;
  }
  .services-card {
    width: auto;
    height: 30rem;
  }

  .services-card-content {
    width: 22.1rem;
  }

  .services-card-icon {
    /* width: 100%; */
    margin-right: 16.5rem;
    margin-bottom: 4rem;
  }
  /**************** SERVICES END************* */

  /* *************NEED MORE INFO Start*****************/
  .need-more-information {
    min-height: 43.1rem;
  }

  .nmi-text-box {
    /* max-width: 44%; */
    margin: auto 2rem;
  }
  .nmi-title {
    font-size: 3.1rem !important;
    margin-bottom: 1rem;
    width: 35.6rem;
  }
  .nmi-paragraph {
    opacity: 0.8;
    width: 81%;
    margin-bottom: 4rem;
  }
  /******** NEED MORE INFO End ****************/
  .footer-2 {
    display: flex;
    flex-direction: column;
    margin-right: 0rem;
  }
}

/* OUR NEXT BREAKPOINT WILL BE AT 600PX */
/* **********************************************************/
/* BELOW 580px / 16px = 36.25em (Phones) */

/* ************************************************************/
/* Below 580px */

@media (max-width: 36.25em) {
  /* ======================HERO SECTION =====================*/

  .row-demo {
    flex-flow: column nowrap;
  }

  .section-hero {
    margin-left: 0rem;
    margin-right: 0rem;
  }

  .hero-text-box {
    min-width: auto;
    margin-top: 0rem;
    margin-right: 0rem;
  }
  .hero-left {
    width: 100%;
  }

  .heading-primary {
    font-size: 4.8rem;
    margin-bottom: 1rem;
    width: 100%;
  }

  .overlap-image1 {
    width: 38rem;
  }
  .overlap-image1-vector {
    height: 4rem;
    left: 12rem;
    position: absolute;
    top: 11.3rem;
    width: 24.8rem;
  }

  .hero-description {
    /* width: 70%; */
    width: 36rem;
    min-height: auto;
    font-size: 2.4rem;
  }

  .btn:link,
  .btn:visited {
    max-width: 100%;
    width: 30rem;
    min-height: 5.5rem !important;
    font-size: 1.8rem;
  }

  .hero-right {
    /* width: 100%; */
    margin-right: 0rem;
    /* width: 55rem; */
  }
  .hero-img-box {
    width: 100%;
    /* justify-content: center;
    align-items: center;
    display: flex; */
  }
  .hero-img {
    min-width: 140%;
    width: 100%;
    height: 100%;
    /* height: 50rem; */
    object-position: left 3.5rem top 0rem;
  }

  /* ======================HERO SECTION =====================*/

  /* ======================FEATURES SECTION START =====================*/
  .features {
    min-height: 110rem;
  }
  .grid {
    row-gap: 3rem;
  }

  .grid--3cols {
    /* Setting up a 3X3 grid */
    /* so 3 pillars in front of bldg in this ex */
    grid-template-columns: 1fr;
  }

  /* ======================FEATURES SECTION END =====================*/

  /* ======================ONLINE-DATA-ANALYTICS=====================*/

  .row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .column {
    min-width: auto;
  }
  .online-data-img {
    width: 100%;
  }

  .online-data-img--left {
    width: 100%;
    height: 100%;
    object-position: center;
    margin-left: 3rem;
  }

  .online-data-text-box-left {
    margin-right: 0px;
    padding-left: 0rem;
    margin-left: 0px;
    margin-top: 6rem;
    max-width: auto;
    width: auto;
  }

  .online-data-text-box-right {
    max-width: auto;
    width: auto;
    margin-left: 0rem;

    padding-left: 0rem;

    margin-top: 6rem;
  }
  .online-data-title {
    justify-content: center;
    font-size: 3.4rem;
  }

  .online-data-text-right {
    text-align: left;
  }
  .online-data-img--right {
    /* width: 100%;
    height: 100%;
    object-position: center;
    margin-right: 3rem; */
    margin-left: 0rem;
  }
  /* ======================ONLINE-DATA-ANALYTICS END=====================*/

  /* ======================SERVICES===========================*/

  .services-card {
    height: 24rem;
    margin-top: 2rem;
  }
  .services-title {
    font-size: 3.4rem;
    margin-right: 0rem;
  }

  .services-card-icon {
    max-width: 6.3rem;
    max-height: 6.3rem;
    margin-right: 1rem;
    margin-bottom: 2rem;
  }
  .services-card-title {
    font-size: 2rem;
    width: auto;
    font-weight: 800;
  }
  .services-card-content {
    width: 30rem;
    align-items: center;
    text-align: center;
  }

  /* ======================SERVICES END===========================*/
  /* ======================REAL TIME DATA SOLUTIONS===========================*/

  .row {
    flex-wrap: nowrap;
  }

  /* If you want the images stacked on top of each other you can do rtd-solutions-imgs{display:block} */
  .rtd-solutions-imgs {
    margin-top: 1rem;
    margin-right: 2rem;
    width: 80%;
  }

  .rtd-solutions-img-left {
    height: 100%;
    width: 90%;
    min-width: 15rem;
    margin-top: 2rem;
    margin-left: 0rem;
  }

  .rtd-solutions-img-right {
    margin-left: 2rem;
    min-width: 15rem;
    margin-top: 4rem;
  }

  .rtd-solutions-text-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding-left: 0rem;
  }
  .rtd-solutions-text {
    max-width: 100%;
  }

  /* =================REAL TIME DATA SOLUTIONS END===========================*/

  /* =================TESTIMONIALS ===========================*/
  /* flex-basis of 26rem or (260px) and the ability to grow and shrink. 
  Once the first row gets to a point where there is 
  not enough space to place another 160 pixel item,
   a new flex line is created for the items and so on until 
   all of the items are placed. */
  .testimonials-row > * {
    flex: 1 1 26rem;
  }

  /* =================TESTIMONIALS END===========================*/

  /* =================NEED MORE INFORMATION===========================*/
  .need-more-information {
    background-image: linear-gradient(rgba(0, 0, 0, 0.261), rgba(0, 0, 0, 0.324)),
      url(../css/img/needmoreinformationbg2.png);
    justify-content: center;
  }
  .nmi-text-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  /* =================NEED MORE INFORMATION===========================*/
.footer{
  flex-wrap:wrap;
  padding-right:0rem;
  justify-content: center;
}

.footer-heading{
  margin-right:0rem;
  text-align: left;
}

.footer-features-title{
      width: 100%;
    text-align: left;
    padding-top: 2rem;
}

.footer-bottom{
  flex-wrap:nowrap;
}
  /* =================FOOTER===========================*/


    /* =================FOOTER END===========================*/
  /* **********************************************************/
  /* BELOW 580px / 16px = 36.25em (Phones) END */
  /* ************************************************************/
}