@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300&display=swap');

:root {
  --primary-color: #1a5a99;
  --secondary-color: #1c3fa8;
  --dark-color: #002240;
  --light-color: #f4f4f4;
  --success-color: #5cb85c;
  --error-color: #d9534f;
  --faded-color: #8995a0;
  --stripe-color: #98bfdf;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Noto Sans';
  color: #333;
  line-height: 1.6;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}
h1,
h2 {
  font-weight: 300;
  line-height: 1.2;
  margin: 10px 0;
}

p {
  margin: 10px 0;
}

img {
  width: 100%;
}

code,
pre {
  background: #333;
  color: #fff;
  padding: 10px;
}

.hidden {
  visibility: hidden;
  height: 0;
}

/* Link In */
.linkin {
  padding-top: 10px;
  background-color: #fff;
}

.linkin a {
  color: var(--primary-color);
}

/* Navbar */
.navbar {
  background-color: #fff;
  color: var(--primary-color);
  height: 150px;
}

.navbar img {
  width: 100px;
  overflow: visible;
}

.navbar ul {
  display: flex;
}

.navbar a {
  color: var(--primary-color);
  font-weight: 800;
  padding: 15px;
  margin: 0 5px;
}

.navbar ul a:hover {
  border-bottom: 2px var(--primary-color) solid;
}

.navbar .flex {
  justify-content: space-between;
}

/* Showcase */
.showcase {
  height: 400px;
  background-image: url("images/waves.jpg");
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

.showcase h1 {
  font-size: 40px;
  font-weight: 600;
}

.showcase p {
  margin: 20px 0;
  font-weight: 600;
}

.showcase .grid {
  overflow: visible;
  grid-template-columns: 55% auto;
  gap: 30px;
}

.showcase .btn {
  background-color: rgba(2, 15, 92,0.1);
}

.showcase-text {
  animation: slideInFromLeft 1s ease-in;
}

.showcase-pic {
  position: relative;
  top: 20px;
  height: 374px;
  width: 250px;
  padding: 0px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  z-index: 200;
  justify-self: flex-end;
  animation: slideInFromRight 1s ease-in;
}

.showcase-pic img {
  border-radius: 10px;
}

.showcase-form {
  position: relative;
  top: 60px;
  height: 350px;
  width: 400px;
  padding: 40px;
  z-index: 100;
  justify-self: flex-end;
  animation: slideInFromRight 1s ease-in;
}

.showcase-form .form-control {
  margin: 30px 0;
}

.showcase-form input[type='text'],
.showcase-form input[type='email'] {
  border: 0;
  border-bottom: 1px solid #b4becb;
  width: 100%;
  padding: 3px;
  font-size: 16px;
}

.showcase-form input:focus {
  outline: none;
}

.showcase::before,
.showcase::after {
  content: '';
  position: absolute;
  height: 100px;
  bottom: -70px;
  right: 0;
  left: 0;
  background: #fff;
  transform: skewY(-3deg);
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
}

/* Bob's Capabilities */

.bobcapabilities {
  padding-top: 100px;
}

.bobcapabilities h1 {
  color: var(--primary-color);
  font-size: 40px;
  font-weight: 600;
}

.bobcapabilities h3 {
  color: var(--primary-color);
  font-weight: 600;
}

.bobcapabilities .grid-4 {
  align-items: start;
}

.bobcapabilities img {
  width: 40%;
}

/* Stats */
.stats {
  padding-top: 100px;
  animation: slideInFromBottom 1s ease-in;
}

.stats-heading {
  max-width: 500px;
  margin: auto;
}

.stats .grid h3 {
  font-size: 35px;
}

.stats .grid p {
  font-size: 20px;
  font-weight: bold;
}

/* Charts */

.charts .grid .chart-card {
  min-height: 420px;
  border: 1px solid var(--faded-color);
  border-radius: 10px;
}

.charts h1, h2 {
  color: var(--primary-color);
  text-align: center;
}

#aq_chart1_div {
  width: 500px;
  height: 350px;
}

#aq_chart2_div {
  width: 500px;
  height: 350px;
}

#soil_chart1_div, #soil_chart2_div, #soil_chart3_div {
  width: 500px;
  height: 350px;
}

/* Cloud */
.cloud .grid {
  grid-template-columns: 4fr 3fr;
}

/* Interests */

.interests .flex {
  flex-wrap: wrap;
  padding-bottom: 50px;
  justify-content: center;
}

.interests h1 {
  color: var(--primary-color);
  font-size: 40px;
  font-weight: 600;
}

.interests .card {
  min-height: 330px;
  min-width: 400px;
  max-width: 400px;
  color: var(--primary-color);
  background-color: #EAE7DC;
}

.interests .card h2 {
  font-weight: bold;
}

.interests .card ul {
  --card-icon-size: 1em;
  --card-gutter: 1em;
  margin: 10px 0;
}

.interests .card ul li {
  padding-left: var(--card-gutter);
}
 
.interests .card ul li::marker {
  content: "\25A2";
  /* font-size: var(--icon-size); */
}

.interests .card .card-text {
  min-height: 200px;
}

.interests .card .card-bullet {
  padding-left: 10px;
}

.interests .card .btn {
  text-align: center;
  width: 100%;
}

.intcardbtn {
  padding-top: 30px;
  margin-inline: auto;
  width: 50%;
}

/* Profile */

.profile-header {
  height: 100px;
  background-image: url("images/profileheader.jpg");
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

.profile-header h1 {
  background-color: var(--primary-color);
  border-radius: 5px;
  width: fit-content;
  margin-top: 35px;
  font-size: 40px;
  font-weight: 600;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.profile-text {
  padding-top: 20px;
  padding-bottom: 50px;
}

.profile-text p {
  font-size: large;
}

.projects hr {
  color: var(--secondary-color);
}

.project-list {
  padding-top: 30px;
}

.project-list h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 30px;
  margin-bottom: 10px;
}

.project-list p {
  font-size: large;
}

.project-list a {
  color: var(--primary-color);
}

.project-list a:hover {
  border-bottom: 1px solid var(--primary-color);
}

/* Services */

.services-header {
  height: 100px;
  background-image: url("images/servicesheader.jpg");
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

.services-header h1 {
  background-color: var(--primary-color);
  border-radius: 5px;
  width: fit-content;
  margin-top: 35px;
  font-size: 40px;
  font-weight: 600;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.services-list {
  padding-top: 20px;
  padding-bottom: 50px;
}

.services-list h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 30px;
  margin-bottom: 10px;
}

.services-list p {
  font-size: large;
}

.services-list ul {
  --svc-icon-size: 1em;
  --svc-gutter: 1em;
}

.services-list ul li {
  padding-left: var(--svc-gutter);
}
 
.services-list ul li::marker {
  color: var(--secondary-color);
  content: "\25A2";
  font-size: var(--scv-icon-size);
}

.services-list ul li b {
  color: var(--secondary-color);
  font-weight: 600;
}

.services-list a {
  color: var(--primary-color);
}

.services-list a:hover {
  border-bottom: 1px solid var(--primary-color);
}

.services-list-item {
  padding-left: 15px;
}

/* LoRaWAN */

.lorawan-header {
  height: 100px;
  background-image: url("images/lorawanheader.jpg");
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

.lorawan-header h1 {
  background-color: var(--primary-color);
  border-radius: 5px;
  width: fit-content;
  margin-top: 35px;
  font-size: 40px;
  font-weight: 600;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.lorawan-overview h1 {
  font-size: 30px;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 30px;
  margin-bottom: 10px;
}

.lorawan-overview p {
  font-size: large;
}


.lorawan-list {
  padding-top: 50px;
}

.lorawan-list .container {
  border-top: 1px solid var(--primary-color);
}

.image-sm {
  max-width: 300px;
  margin: auto;
}

.lorawan-list h1 {
  font-size: 30px;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 30px;
  margin-bottom: 10px;
}

.lorawan-list p {
  font-size: large;
}

.lorawan-data h1 {
  font-weight: 600;
  color: var(-primary-color);
}

.lorawan-data p {
  font-size: large;
}

.lorawan-table {
  overflow-x: auto;
  width: 100%;
  margin: auto;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, .3);

}

.lorawan-table table {
  width: 100%;
}

.lorawan-table table, th, td {
  border-collapse: collapse;
  border: 1px solid gray;
}

.lorawan-table th {
  color: white;
  background-color: var(--primary-color);
}

.lorawan-table th, td {
  padding: 5px;
  text-align: center;
}

.lorawan-table tr:nth-child(odd) {
  background-color: var(--stripe-color);
}

/* IPv6 */

.ipv6-header {
  height: 100px;
  background-image: url("images/blurryclouds.jpg");
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

.ipv6-header h1 {
  background-color: var(--primary-color);
  border-radius: 5px;
  width: fit-content;
  margin-top: 35px;
  font-size: 40px;
  font-weight: 600;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

.ipv6-diagram {
  min-width: 700px;
}

/* IoT */

.iotGuages .flex {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  column-gap: 10px;
}

.iotGuages .card {
  width: 350px;
  text-align: center;
}

/* Footer */
.footer .container {
  border-top: 1px var(--light-color) solid;
  color: var(--faded-color);
}

.footer a {
  color: var(--faded-color);
}

/* Tablets and under */
@media (max-width: 768px) {
  .grid,
  .showcase .grid,
  .stats .grid,
  .cli .grid,
  .cloud .grid,
  .features-main .grid,
  .docs-main .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .bobcapabilities .grid img {
    width: 15%;
  }

  .showcase {
    height: auto;
  }

  .showcase-text {
    text-align: center;
    margin-top: 40px;
    animation: slideInFromTop 1s ease-in;
  }

  .showcase-pic {
    justify-self: center;
  }

  .showcase-form {
    justify-self: center;
    margin: auto;
    animation: slideInFromBottom 1s ease-in;
  }

  .cli .grid > *:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .features-head,
  .features-sub-head,
  .docs-head {
    text-align: center;
  }

  .features-head img,
  .features-sub-head img,
  .docs-head img {
    justify-self: center;
  }

  .features-main .grid > *:first-child,
  .features-main .grid > *:nth-child(2) {
    grid-column: 1;
  }
}




/* Mobile */
@media (max-width: 500px) {
  .navbar {
    height: 200px;
  }

  .navbar .flex {
    flex-direction: column;
  }

  .navbar ul {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .showcase-form {
    width: 300px;
  }

  .lorawan-data .flex-table p {
    font-size: smaller;
  }

  .lorawan-table {
    font-size: x-small;
  }

  .lorawan-table th, td {
    padding: 2px;
  }

  .ipv6-diagram {
    min-width: 350px;
  }

  .charts {
    min-height: 310;
  }

  #aq_chart1_div {
    width: 400px;
    height: 300px;
  }
  
  #aq_chart2_div {
    width: 400px;
    height: 300px;
  }
  
  #soil_chart1_div, #soil_chart2_div, #soil_chart3_div {
    width: 400px;
    height: 300px;
  }  
}