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

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 25em) {
    html {
      font-size: 45%; } }

body {
  font-family: 'Lora', serif;
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
}
  .heading-1 {
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.1;
    color: #39311d;
}

.heading-2 {
    font-size: 2rem;
    color: #39311d;
}
.heading-5 {
    margin: 2rem 0;
    font-size: 1.6rem;
    color: #39311d;
}

  /*--------------LOADER--------------------*/
.loader-container {
    position: absolute;
    background-color: white;
    z-index: 999999;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
}

.loader-dot {
    display: inline-block;
    background-color: #fe346e;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}

.loader-dot-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.loader-dot:not(:last-child) {
    margin-right: 1rem;
}

.loader-dot-1 {
    animation: animateDot 1s linear infinite;
}

.loader-dot-2 {
    animation: animateDot 1s linear -.8s infinite;
}

.loader-dot-3 {
    animation: animateDot 1s linear -.6s infinite;
}

.loader-dot-4 {
    animation: animateDot 1s linear -.4s infinite;
}

@keyframes animateDot {

    0%,
    40%,
    60%,
    100% {
        transform: initial;
    }

    20% {
        transform: translateY(-15px);
    }
}


.footer__heading,
.rules__heading,
.staff__heading {
    text-align: center;
    transition: all .2s;
}


.footer__heading::after,
.rules__heading::after,
.staff__heading::after
 {
    content: "";
    border: 1px solid #fe346e;
    background-color: #fe346e;
    display: inline-block;
    height: 0px;
    width: 5vw;
}

@media only screen and (max-width: 75em) {

    .footer__heading::after
    .rules__heading::after
     {
        width: 10vw;
    }
}

.about__heading:hover,
.features__heading:hover,
.testimonial__heading:hover,
.footer__heading:hover {
    transform: translateY(-5px);
}


.container {
    display: grid;
    grid-template-columns: [full-start] minmax(4rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(4rem, 1fr) [full-end];
    grid-template-rows: 10vh minmax(60vh, min-content);
    position: relative;
    background: url("../img/page-top.svg"), url("../img/page-bottom.svg");
    /* background-size: 100%, auto; */
    background-repeat: no-repeat;
    /* background-position: 0 -5vh, 0 235vh; */
    background-position: left top, left bottom;
}

@media only screen and (max-width: 50em) {
    .container {
        background-position: -5vh 0, left bottom;
        background-size: 110%, auto;
    }
}
.header {
    grid-column: full-start / full-end;
    display: grid;
    grid-template-columns: [full-start] minmax(4rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(4rem, 1fr) [full-end];
    padding: .2rem 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 99999; }
.header__div {
    grid-column: center-start / center-end;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
  .header__logo {
    width: 16rem; }
    .header__logo--image {
      width: 100%;
      filter: brightness(150%); }

  .header__btn, .header__btn:link, .header__btn:visited {
    padding: 1.2rem 3.5rem;
    font-size: 1.3rem;
    border-radius: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
  }



.btn, .btn:link, .btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
    border: none;
    cursor: pointer;
    position: relative; }
    .btn span, .btn:link span, .btn:visited span {
      transition: all .4s; }

  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
    .btn:hover::after {
      transform: scaleX(1.4) scaleY(1.6);
      opacity: 0; }
    .btn:hover span {
      margin-left: 2px; }

  .btn:focus, .btn:active {
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

  .btn--white {
    background-color: white;
    color: #b21f66; }
    .btn--white::after {
      background-color: white; }



        .nav-change {
            background-color: white;
            box-shadow: 0 0.1rem 2rem rgba(0, 0, 0, 0.1); }
            .nav-change .navIcon, .nav-change .navIcon::before, .nav-change .navIcon::after {
              background-color: #fe346e; }
              @media screen and (max-width: 50em) {
                .nav-change-main {
                  border: none !important;
                  color: currentColor; } }
            .nav-change .header__nav--item {
              color: #020316; }
            .nav-change .header__btn {
              border: 1px solid #fe346e;
    color: #fe346e;
              background-color: white; }
              .nav-change .header__btn::after {
                background-color: #fe346e;
}

.home-icon {
  height: auto;
  width: 2rem;
}

.main {
    grid-column: center-start / center-end;
    grid-row: 2 / 3;
    background-color: #fff;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    margin: 2rem 0;
    padding: 2rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: .8rem;
}


.doodle__div {
    height: auto;
    width: 30rem;
}
.doodle--image {
    height: auto;
    width: 100%;
}

.rules__heading {
    margin: 4rem 0;
}
.rules__heading::after{
content: "";
}

.rules__div p{

    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    color: rgb(94, 95, 95);
    padding: 1rem;
}

.blog__main {
    padding: 16rem 20rem;
    text-align: center;
}

@media screen and (max-width: 50em) {
    .blog__main{

        padding: 21rem 2rem;
    }
}

.blog__main h3 {
    font-size: 2rem;
    color: #39311d;
}

.blog__main a {
    color: #fe346e;
    font-size: 1.6rem;
}

.staff__main {
    padding: 2rem 26rem;
}

@media screen and (max-width: 50em) {
    .staff__main{
        padding: 2rem 5rem;
    }
}

.staff__type--icon {
    height: auto;
    width: 2rem;
    margin-right: .5rem;
}

.staff__sub-cat{
    display: flex;
    flex-direction: column;
    width: 100%;

}

.staff__sub-cat:not(:first-child) {
    margin: 5rem 0;
}

.staffs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
}

.staff__heading {
    margin: 0 0 4rem;
}

.staff__heading h2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.staff__user {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.staff__image {
    height: auto;
    width: 10rem;
    border-radius: 50%;
}

.staff__name {
font-size: 1.4rem;
}

.staff__tag {
    font-size: 1.2rem;
}

hr {
    width: 100%;
}

.upgrades__main {
    padding: 10rem;
}

@media only screen and (max-width:50em) {
    .upgrades__main {
        padding: 5rem 4rem;
    }
}
table{
    width: 100%;
    border-collapse: collapse;
    background-color: rgb(248, 248, 248);
}
table tr {
    border: 1px solid lightgray;
}
thead tr th {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
}
thead tr th:nth-child(2){
    width: 25%;
}
.thead tr th:nth-child(3){
    width: 55%;
}
tr th, tr td {

    border: 1px solid lightgray;
}
tr td {
    font-family: 'Lora', serif;
    text-align: center;
    font-size: 1.4rem;
    padding: 1rem;
}
.footer {
    padding: 10rem;
    grid-row: 3 / 4;
    grid-column: full-start / full-end;
    background-color: #2C3A47;
    padding: 5rem 0;
    display: grid;
    grid-template-columns: [full-start] minmax(4rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(4rem, 1fr) [full-end];
}

.footer h3 {
    color: white;
}

.footer h3 {
    font-weight: 600;
    font-size: 2rem;
}

@media screen and (max-width: 50em) {
    .footer__details {
        text-align: center;
    }
}

.footer__section {
    grid-column: center-start / center-end;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 43.75em) {
    .footer__section {
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
    }
}

.footer__email {
    color: white;
    font-size: 1.2rem;
}

.footer__copyright {
    color: white;
    font-size: 1.6rem;
    margin: 1rem .5rem 0;
}

.footer__logo {
    width: 10vw;
}

@media only screen and (max-width: 43.75em) {
    .footer__logo {
        width: 40vw;
    }
}

.footer__logo-img {
    width: 100%;
}

@media only screen and (max-width: 43.75em) {
    .footer__social {
        margin: 6vh 0;
    }
}

.footer__social-sec {
    padding-top: 4rem;
}

@media only screen and (max-width: 43.75em) {
    .footer__social-sec {
        padding-top: 2rem;
    }
}

.footer__social-sec a {
    text-decoration: none;
    color: currentColor;
}

.footer__social-sec a:not(:last-child) {
    margin-right: 2rem;
}

.footer__icon {
    height: 2rem;
    width: 2rem;
    fill: rgba(255, 255, 255, 0.85);
    transition: all .2s ease;
}

.footer__icon:hover {
    fill: #fe346e;
    transform: scale(1.1);
}

.footer__contact-us--email {
    color: #fff;
    font-size: 1.6rem;
    padding: 3.5rem 0;
}

@media screen and (max-width: 50em) {
    .footer__contact-us--email {
        padding: 1rem 0;
    }
}

.footer__form {
    display: flex;
    flex-flow: column;
    display: none;
}

.footer__form--label {
    color: white;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

.footer__form--input {
    border: none;
    padding: 1rem 1.5rem;
    border-radius: .5rem;
    background-color: white;
    margin-bottom: 1rem;
}

.footer__form--input::placeholder {
    font-family: 'Open Sans', sans-serif;
}

@media only screen and (max-width: 43.75em) {
    .footer__form--input {
        margin-bottom: 1.5rem;
    }
}

.footer__btn {
    margin: 0 auto;
    border: none;
    display: inline-block;
    padding: .5rem 2rem;
    border-radius: .5rem;
    background-color: #fe346e;
    color: white;
    font-weight: 500;
    font-size: 1.4rem;
}

@media only screen and (max-width: 43.75em) {
    .footer__btn {
        padding: 1.5rem 3rem;
    }
}