body {
  background: #f2f2f2;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(150px, auto) auto minmax(150px, auto);
}

.logo {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}
.logo img {
  object-fit: contain;
}

nav {
  grid-row: 1/2;
  grid-column: 8/12;
  justify-self: end;
  display: none;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
  text-align: center;
}
nav ul li:first-child a {
  background: #f2f2f2;
  width: 20px;
  padding: 15px 0;
}
nav ul li:last-child {
  margin: 0;
}
nav ul li a {
  display: block;
  background: #f2f2f2;
  padding: 15px 5px;
  color: #000000;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s linear;
}
nav ul li a:hover {
  background: #f2f2f2;
}
nav ul li a .li-txt {
  color: #000000;
}
nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  border-bottom: 4px solid #f2f2f2;
}
nav ul li ul li {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
}
nav ul li ul li a {
  display: block;
  background: #f2f2f2;
  padding: 10px 15px;
}
nav ul li ul li a:first-child {
  background: #f2f2f2;
  width: auto;
  border-left: 4px solid transparent;
  padding: 10px 15px;
  font-size: 14px;
}
nav ul li ul li a:hover {
  background: #f3f3f3;
  border-left: 4px solid #48cfad;
}

main {
  grid-row: 2/3;
  grid-column: 3/11;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, auto);
}
main .top {
  grid-column: 6/9;
  grid-row: 1/2;
}
main .top h1 {
  font-family: "Noto Serif";
  font-weight: normal;
  text-align: right;
  margin-block: unset;
}
main .top h2 {
  font-family: "Oswald";
  font-weight: normal;
  text-align: right;
  margin-block: unset;
}
main .main-txt1 {
  grid-column: 1/5;
  grid-row: 2/3;
}
main .main-txt1 .first-p {
  font-family: "Open Sans", Arial, sans-serif;
  color: #17345e;
}
main .main-txt2 {
  grid-column: 6/9;
  grid-row: 3/4;
}
main .bottom {
  grid-row: 4/5;
  grid-column: 3/7;
}

footer {
  grid-row-start: 3;
  grid-row-end: 4;
}

/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
  .logo {
    grid-column-start: 2;
    grid-column-end: 4;
  }
  main {
    grid-row: 2/3;
    grid-column: 2/12;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, auto);
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px and up) */

/*# sourceMappingURL=main.css.map */