.logo{
    height: 100px;
}

.nav-link{
    margin-left: 3px;
    color: mediumblue;
}

.nav-active , .nav-link:hover {
    background-color: blue;
    color: white;
}

  /* .pattern {
    --mask:
    radial-gradient(144.22px at 50% calc(100% - 200.00px),#000 99%,#0000 101%) calc(50% - 160px) 0/320px 100%,
    radial-gradient(144.22px at 50% calc(100% + 120.00px),#0000 99%,#000 101%) 50% calc(100% - 80px)/320px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
      background: rgb(76,142,207);
      background: linear-gradient(90deg, rgba(76,142,207,1) 9%, rgba(41,80,152,1) 100%);
      height: 100%;
  } */

.pattern {
    position: relative;
    background-color: #3246a8;
    background-image: linear-gradient(315deg,
            #3246a8 0%, #8ebcf5 74%);
}

.pattern:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: url(
https://media.geeksforgeeks.org/wp-content/uploads/20200326181026/wave3.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.box {
    --mask:
      radial-gradient(34.99px at 50% 48.00px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
      radial-gradient(34.99px at 50% -18px,#0000 99%,#000 101%) 50% 30px/120px 100% repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
    background-color: rgb(76,142,207);
  }

li:hover{
    background-color: maroon;
    color: white;
}

.box2 {
    --mask:
      radial-gradient(34.99px at 50% 48.00px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
      radial-gradient(34.99px at 50% -18px,#0000 99%,#000 101%) 50% 30px/120px 100% repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);
    background-color: #8ebcf5;
}

a{
  text-decoration: none;
}

.header{
  background: maroon;
  color: white;
}