@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

:root {
  font-family: "Roboto", sans-serif;
  --clr-light: hsl(0, 0%, 90%); /* Light grey */
  --clr-medium: hsl(0, 0%, 67%); /* Medium grey */
  --clr-dark: hsl(0, 0%, 34%); /* Dark grey */
  --clr-accent: hsl(20, 76%, 56%); /* Lynx orange */
  margin: 0 10%;
}
#corner-logo {
  max-width: 100%;
}
.image-caption {
  font-style: italic;
  text-align: center;
}
body h1,
h2 {
  text-align: center;
  padding-top: 1em;
}
body h3 {
  padding-top: 1em;
}
body h1 {
  color: var(--clr-accent);
}
body .h2-orange {
  color: var(--clr-accent);
}
body p {
  padding-top: 1em;
  color: black;
}
header {
  /* display: flex; */
  margin-top: 0.5em;
}
header img {
  width: 15em;
}
header ul {
  display: flex;
  border: 2px solid pink;
}
header li {
  border: 2px solid var(--clr-dark);
}
.header-divider h1 {
  background: var(--clr-light);
}
.product-banner img,
h1,
h2,
h3,
h4,
h5,
p {
  max-width: 100%;
  color: var(--clr-dark);
}

.captioned-image {
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 2px solid var(--clr-light);
    border-radius: 15px; */
  /* box-shadow: 5px 5px 15px rgba(0% , 0%, 0%, 0.3); */
}
.captioned-image img {
  max-width: 33%;
  margin: 0.5em;
  box-shadow: 5px 5px 15px rgba(0%, 0%, 0%, 0.3);
  border-radius: 15px;
}
.captioned-image p {
  padding: 0.5em;
}

li {
  margin-left: 2em;
}
footer {
  background-color: var(--clr-light);
  padding: 0.5em;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
body {
  justify-content: space-between;
  align-items: baseline;
  /* editing here */
  /* background: linear-gradient( white, var(--clr-light), white); */
  background-color: white;
  min-height: 100vh;
}

.topnav {
  background-color: var(--clr-light);
  overflow: hidden;
}
.topnav a {
  float: left;
  display: block;
  color: var(--clr-accent);
  text-align: center;
  padding: 0.5em 0.6em;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: var(--clr-medium);
}
.topnav a.active {
  background-color: var(--clr-dark);
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Responsive cards created by Code With Bishal - www.codewithbishal.com */
.column-content a {
  display: flex;
  margin-top: 20px;
  padding: 10px 15px;
  color: black;
  opacity: 0.8;
  background: var(--clr-light);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
}
.container {
  /* width: 1000vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.container .column-cards {
  position: relative;
  width: 290px;
  height: 350px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25px;
  box-shadow: 5px 5px 15px rgba(0%, 0%, 0%, 0.3);
  border-radius: 15px;
}
.container .column-cards .column-content {
  padding: 40px;
  align-items: center;
  justify-content: center;
}
.container .column-content img {
  max-width: 265px;
  max-height: 110px;
}
.container .column-cards .column-content h2 {
  position: absolute;
  right: 30px;
  font-size: 4em;
  font-weight: 700;
  color: var(--clr-accent);
  z-index: 1;
  opacity: 0.1;
  transition: 500ms;
}
.container .column-cards:hover .column-content h2 {
  opacity: 0.3;
  /* transform: translateY(-70px); */
}
.container .column-cards .column-content h3 {
  position: relative;
  font-size: 1em;
  color: var(--clr-accent);
  z-index: 2;
  letter-spacing: 1px;
  transition: 500ms;
}
.container .column-cards .column-content p {
  position: relative;
  justify-content: center;
  align-self: center;
  font-size: 0.8em;
  color: var(--clr-dark);
  z-index: 2;
  font-weight: 200;
  transition: 500ms;
}
.container .column-cards:hover .column-content h3,
.container .column-cards:hover .column-content p {
  opacity: 1;
}
.container .column-cards:hover a {
  opacity: 1;
  letter-spacing: 2px;
  transition: 1000ms;
  background: var(--clr-medium);
  color: black;
}
/* End responsive cards */

tr:nth-child(even) {
  background-color: var(--clr-medium);
}
th:nth-child(odd) {
  background-color: var(--clr-dark);
  text-transform: capitalize;
}

thead,
tfoot {
  background-color: var(--clr-dark);
  color: white;
}
tbody {
  background-color: var(--clr-light);
}
caption {
  padding: 1em;
  caption-side: top;
  line-height: 0;
}
table {
  border-collapse: collapse;
  letter-spacing: 1px;
  font-size: 0.8rem;
  align-self: center;
}
td,
th {
  border: 1px solid white;
  padding: 5px 10px;
  text-align: left;
}
tr :nth-child(2),
tr :nth-child(3) {
  text-align: center;
}
table {
  margin: auto;
}

/* .contacts-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;;

} */
.contacts-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contacts-item {
  padding: 1rem;
  gap: 1rem;
  margin: 1rem;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}
.even-columns {
  display: grid;
  grid-auto-flow: column;
  text-align: center;
}
.page-title {
  font-size: 20vw;
  color: var(--clr-medium);
  padding-top: 0;
}
.container-container {
  display: inline-flex;
  /* border: 2px dashed hotpink; */
}
.image-with-text img {
  float: left;
  max-width: 30%;
  margin: 0.5em;
  box-shadow: 5px 5px 5px rgba(0%, 0%, 0%, 0.3);
  border-radius: 15px;
}
.image-with-text p {
  padding: 2em;
}

/* ----------------------------------------------------------------------- */
/* Modal start https://www.w3schools.com/howto/howto_css_modal_images.asp */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  background-color: white;
  display: block;
  width: 33%;
  max-width: 300px;
}

#myImg:hover {
  opacity: 0.7;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  /* max-width: 700px; */
  background-color: white;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}