/* Import google font family */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap");

/* Apply small screen style */
@import "small-screen_style.css" screen and (max-width: 320px);

/* Apply medium screen style */
@import "medium-screen_style.css" screen and (min-width: 321px) and
  (max-width: 700px);

/* Apply larg screen style */
@media (min-width: 701px) {
  /* Whole body */
  body {
    background-color: #0f2b3d;
    margin: 0;
    font-family: "Merriweather", serif;
  }

  /* Main container */
  .container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "gnb gnb gnb gnb gnb gnb gnb gnb"
      "hd hd hd hd hd hd hd hd"
      "cont cont cont cont cont cont cont cont"
      "fot fot fot fot fot fot fot fot";
    grid-gap: 10px;
  }

  /* Gloabal navbar */
  .global-nav {
    display: flex;
    align-items: center;
    grid-area: gnb;
    background-image: radial-gradient(#33b5e5, #1d8bcf, #33b5e5);
  }

  .ul-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .ul-nav li {
    display: flex;
    justify-content: space-around;
  }

  .ul-nav li:hover {
    background-color: #205d85;
    border-radius: 15px;
  }

  .ul-nav li a {
    color: black;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #1d8bcf;
  }

  .ul-nav i {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #fff5e2;
    margin-bottom: 8px;
  }

  /* Main header */
  .heading {
    grid-area: hd;
    color: #b2cee0;
    text-align: center;
  }

  /* Main Content */
  .content {
    grid-area: cont;
  }

  /* Main content / Cards */
  .cards {
    display: flex;
    justify-content: space-around;
  }

  .card {
    width: 30%;
    background-color: #b2cee0;
    margin-bottom: 20px;
    padding: 15px;
    box-sizing: border-box;
  }

  .card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px #33b5e5;
  }

  .card-img {
    width: 100%;
    height: 200px;
  }

  .crad-content p {
    padding: 10px;
  }

  .btn {
    display: inline-block;
    background-color: #2a77aa;
    color: #e5eff5;
    border: hidden;
    position: relative;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
  }

  .btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 10px #33b5e5 inset;
  }

  a .btn {
    float: right;
  }

  /* Footer */
  .footer {
    grid-area: fot;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #454f58;
    padding: 10px;
  }

  .copyright {
    padding: 10px;
    color: #fff;
  }

  .subscribe {
    background-color: #fff;
    color: #1d8bcf;
    font-weight: bold;
    padding: 10px 30px;
    margin: 8px;
    border: 3px solid #1d8bcf;
    border-radius: 10px;
    cursor: pointer;
  }

  .subscribe:hover {
    background-color: #0f2b3d;
    border-radius: 10px;
  }

  /* Footer / Social links */
  .social img {
    width: 70px;
    height: 70px;
  }

  .social img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 50px #33b5e5 inset;
    border-radius: 40px;
  }
}