* {
          --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);
}

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);

}

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

}

.logo span {
          color: var(--yellow);

}

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

}

nav #bigscreenmenu li {
          position: relative;

}

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

}

nav #bigscreenmenu a:hover {
          color: var(--primary);

}

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

nav #bigscreenmenu li:hover::after {
          width: 100%;

}

.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%;
}

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

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

}



#mobilemenu ul 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 {
          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);

}
.material-symbols-outlined {
          font-variation-settings:
                    'FILL' 0,
                    'wght' 400,
                    'GRAD' 0,
                    'opsz' 24
}



@media(max-width:900px) {
          .page1 {
                    padding: 90px 8%;


          }



          .icons {
                    visibility: visible;
          }

          nav #bigscreenmenu {

                    display: none;

          }

          .grid {

                    display: grid;
                    grid-template-columns: repeat(2, minmax(23px, 1fr));
                    gap: 10px;

          }

          .card {

                    padding: 10px;

          }

}