@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
  background: #fff;
  width: 100%;
  overflow-x: hidden;
}
 html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
html {
  scroll-behavior: smooth;
}

/* NAVBAR-DESKTOP */
nav,
.nav-links {
  display: flex;
}

#navbar{
  justify-content: space-around;
  align-items: center;
  height: 10vh;
  background-color: rgb(250, 240, 255);
  transition: background-color 0.3s ease;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.1); /* semi-transparent */
  backdrop-filter: blur(10px); /* blur effect */
  -webkit-backdrop-filter: blur(10px); /*safari support*/
  position: fixed;
  width: 100%;
}

.nav-links {
  gap: 2rem;
  list-style: none;
  font-size: 1.25rem;
}

a {
  color: black;
  text-decoration: none;
  text-decoration-color: white;
}

.nav-links a:hover {
  color: #3b2752;
  text-decoration: underline;
  text-underline-offset: 0.75rem;
  text-decoration-color: #3b2752;
}

.title {
  font-size: 1.5rem;
  cursor: default;
}
.title span {
  font-weight: bold;
  font-size: 1.8rem;
  background: linear-gradient(90deg, rgb(121, 78, 173), #40406d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* HAMBURGER NAV */
.title2
{
   font-weight: bold;
  font-size: 1.8rem;
  background: linear-gradient(90deg, rgb(121, 78, 173), #40406d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: none;
}

.hamburger {
  display: none;
}

/* ABOUT */
.container {
      display: flex;
      height: 100vh; /* Full viewport height */
      /* margin-top: 12vh; */
    }

    .left, .right {
      flex: 1; /* Each takes 50% width */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .left {
      background-color: #f0f0f0;
      .greet {
        font-size: 1.5rem;
        /* text-align: left; */
        font-weight: 500;
        span{
          font-size: 2rem;
          font-weight: 600;
          background: linear-gradient(90deg, #3b2752, #40406d);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        h5{
          font-size: 1.25rem;
          letter-spacing: 8px;
        }
      }

      .btn-container{
        display: flex;
        gap: 10px;
        margin-top: 2rem;
      }
      .btn1 {
          display: inline-flex;
          color: #ffffff;
          align-items: center;
          padding: 8px;
          gap: 2px;
          border-radius: 25px;
          font-weight: 600 ;
          border: solid 2px #3b2752;
          font-size: 12px;
          background: linear-gradient(45deg, #3b2752,  rgb(88, 56, 128));
          justify-content: center;
          cursor: pointer;
        }

        .btn2{
          display: inline-flex;
          color: #3b2752;
          align-items: center;
          padding: 8px;
          gap: 2px;
          border-radius: 25px;
          font-weight: 600 ;
          border: solid 2px #3b2752;
          font-size: 12px;
          background: #fff;
          justify-content: center;
          cursor: pointer;
        }

        .btn1:hover{
         background: linear-gradient(45deg, rgb(88, 56, 128),  #3b2752);
         }

         .btn2:hover{
         background: linear-gradient(60deg, rgb(88, 56, 128),  #3b2752);
         color: #fff;
         }

    }

    .right {
      background-color: #d0e0f0;
    }

    h1 {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 24px;
    }

.split-container {
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: row;
}

.left-section,
.right-section {
  width: 50%;
  padding: 40px;
  color: black;
}

.left-section {
  background-color: #d0d0d0;
}

.right-section {
  background-color: #f0f0f0;
}