* {
          --primary: #8f1537;
          --primary-dark: #6f102a;
          --yellow: #f9c51a;
          --white: #fff;
          --black: #111;
          --gray: #222;
          --light: #f4f4f4;
          --shadow: 0 12px 35px rgba(0, 0, 0, .08);
          --radius: 18px;
          --transition: .35s ease;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins', sans-serif;
}

html {
          scroll-behavior: smooth;
}

body {
          background: var(--white);
          color: var(--gray);
          overflow-x: hidden;
}

nav {
          width: 100%;
          background: var(--white);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 18px 8%;
          z-index: 1000;
          box-shadow: var(--shadow);

          #bigscreenmenu {
                    display: flex;
                    list-style: none;
                    gap: 38px;



                    a {
                              color: var(--black);
                              font-weight: 500;
                              text-decoration: none;
                              transition: .3s;
                              font-size: 20px;

                    }

                    a:hover {
                              color: var(--primary);

                    }

                    li {
                              position: relative;

                    }

                    li::after {
                              content: "";
                              position: absolute;
                              left: 0;
                              bottom: -8px;
                              width: 0;
                              height: 2px;
                              background: var(--primary);
                              transition: .3s;
                    }

                    li::after {
                              content: "";
                              position: absolute;
                              left: 0;
                              bottom: -8px;
                              width: 0;
                              height: 2px;
                              background: var(--primary);
                              transition: .3s;
                    }

                    li:hover::after {
                              width: 100%;

                    }
          }


}

.logo {
          font-size: 32px;
          font-weight: 700;
          color: var(--primary);

          span {
                    color: var(--yellow);

          }
}


.icons {
          visibility: hidden;
          display: flex;
          gap: 20px;
          font-size: 20px;
          color: var(--primary);

}

#mobilemenu {
          display: none;
          text-align: right;
          padding: 40px 8%;
          z-index: 9999;
          top: 0;
          right: 0;
          position: absolute;
          background: var(--white);
          width: 100%;
          height: 100%;

          i {
                    justify-self: end;
                    align-self: flex-end;
          }

          ul {
                    text-align: left;
                    padding: 80px 8%;
                    display: flex;
                    flex-direction: column;
                    list-style: none;
                    gap: 38px;

                    a {
                              border-radius: 5px;
                              height: 40px;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              font-size: large;
                              text-decoration: none;
                              background: var(--primary);

                              color: var(--white);

                    }
          }
}

.page1 {
          gap: 30px;
          height: 92dvh;
          background: var(--primary);
          background-size: cover;
          background-position: center;
          display: grid;
          grid-template-columns: 1fr 1fr;
          overflow: hidden;
          padding-left: 8%;
          padding-left: 8%;

          img {
                    transform: translateX(240px);
                    opacity: 0;
                    transition: 2s;
                    width: 55dvw;
                    transition: 1s;
          }

          h1 {

                    font-size: 70px;
                    line-height: 1.1;
                    margin-bottom: 20px;

                    span {
                              color: var(--yellow);

                    }
          }
}

.page1>div:nth-child(1) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 400px;
          max-width: 700px;
          color: var(--white);
          place-items: center;

}

.page1>div:nth-child(2) {

          display: grid;
          place-items: center right;
          position: relative;

}





.page1 p {

          font-size: 15px;
          line-height: 1.8;
          margin-bottom: 40px;
          opacity: 0.8;

}



.page2 {
          padding: 90px 8%;
          box-sizing: border-box
}

.title {

          font-size: 42px;
          margin-bottom: 50px;
          color: var(--primary);

}

.grid {

          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
          gap: 30px;

}

.card {

          background: var(--white);
          padding: 35px;
          border-radius: 18px;
          text-align: center;
          box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
          transition: .3s;

}

.card:hover {

          transform: translateY(-10px);

}

.card i {

          font-size: 45px;
          color: var(--primary);
          margin-bottom: 20px;

}

.card h3 {

          margin-bottom: 10px;

}

.card p {

          font-size: 14px;
          color: var(--gray);

}

.page3 {

          background: #8C1538;
          color: var(--white);
          padding: 80px 8%;

}

.notice {

          background: white;
          color: var(--black);
          padding: 20px;
          border-radius: 12px;
          margin-top: 20px;

}

.page4 {
          height: auto;
          padding: 80px 8%;
}

footer {

          background: #222;
          color: var(--white);
          padding: 50px 8%;
          display: flex;
          justify-content: space-between;
          align-items: center;

}

footer h2 {

          font-size: 30px;

}

footer p {

          opacity: .7;

}

@media(max-width:900px) {
          .page1 {
                    padding: 0px;
                    display: grid;
                    grid-template-columns: 1fr;

          }

          .page1 h1 {

                    font-size: 42px;

          }

          .page1>div:nth-child(1) {
                    padding: 90px 8%;
          }

          .page1 img {
                    width: 100dvw;
          }

          .icons {
                    visibility: visible;
          }

          nav #bigscreenmenu {

                    display: none;

          }

}