/*MEDIA QUERIES */

  @media (min-width:1441px) {
    .toggle-btn {
      display: none;
    }

    .outreach-left {
      position: relative;
      min-width: 400px;
    }

    .byc-cards {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      position: relative;
      top: 30px;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-between;
    }

    .about-carousel {
      /* width: 440px; */
      height: 540px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .carousel-impact {
      overflow-x: auto;
      overflow-y: hidden;
      /* height: 72vh; */
    }

    .outreach-content p {
      font-size: 16px;
      line-height: 1.8;
      color: #000000;
      position: relative;
    }

    .coe-title {
      color: #030027;
      font-size: 20px;
      position: relative;
      top: -40px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -121px;
      top: 50px;
    }
  }

  @media (min-width:1323px) and (max-width : 1440px) {
    .toggle-btn {
      display: none;
    }

    .outreach-left {
      position: relative;
      min-width: 400px;
    }

    .footer-address p {
      margin-top: 10px;
      line-height: 1.6;
      font-size: 14px;
    }

    .foooter-address h2 {
      font-size: 14px;
    }

    .hero {
      height: 92vh;
      top: 31px;
      width: 1440px;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 60px 80px 0 80px;
      position: relative;
      height: 667px;
    }

    /* IMPACT SECTION */
    .impact-section {
      text-align: center;
      background: #fff;
      color: #000;
      position: relative;
      top: 18px;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .about-carousel {
      /* width: 440px; */
      height: 540px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .outreach-content {
      flex: 2;
      max-width: 500px;
    }

    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }


    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      top: -48px;
      left: -300px;
    }

    .outreach-content p {
      font-size: 16px;
      line-height: 1.8;
      color: #000001;
      position: relative;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 370px !important;
      text-align: center;
      height: 462px;
      position: relative;
      top: 0px;
    }

    .outreach-card h3 {
      color: black;
      font-weight: 600;
      position: relative;
      left: 0px;
      font-size: 24px;
      line-height: 1.5;
      text-align: left;
    }

    .byc-left h2 {
      font-weight: 700;
      font-size: 30px;
      color: #1d1d1d;
    }

    .svg-map {
      width: 338% !important;
      height: auto;
      max-width: 450px;
      display: block;
      position: relative;
    }

    .carousel-impact {
      overflow-x: auto;
      overflow-y: hidden;
      /* height: 59vh; */
    }

    .coe-title {
      color: #030027;
      font-size: 16px;
      position: relative;
      /* top: -72px; */
    }

    .map-pin {
      color: white;
      width: 258px;
      height: 28px;
      text-align: center;
      padding-top: 8px;
      position: absolute;
      left: -504.272px;
      top: 197.87px;
      z-index: 1;
    }


    .event-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      right: 0px;
      top: 0px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: 0px;
      top: 0px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: 0px;
      width: 440px;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
    }

    .event-showcase {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      position: relative;
    }

    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      /* left: -120px;
      top: 26px; */
    }

    .irregular-bg.inverted {
      background: url(../images/byc-bg.png) no-repeat center center / cover;
      clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 100%);
      padding: 100px 4vw;
      position: relative;
      z-index: 0;
    }

    .byc-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 900px;
    }

    .byc-right {
      flex: 1;
      min-width: 260px;
      position: relative;
      /* left: 22px; */
    }

    .byc-subtag {
      color: #000000;
      font-size: 18px;
      font-weight: 600;
      position: relative;
      left: 90px;
      width: 361px;
      /* top: -24px; */
    }

    .byc-right h3 {
      font-size: 32px;
      font-weight: 500;
      color: #604652;
      position: relative;
      left: 164px;
      width: 283px;
      /* top: -37px; */
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      /* WIDTH: fit-content; */
      justify-content: space-around;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

    .footer-contact {
      position: relative;
    }

    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
      color: #515050;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -113px;
      top: 50px;
    }
  }

  @media (min-width: 1281px) and (max-width: 1322px) {
    .toggle-btn {
      display: none;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 20px;
    }

    .hero {
      height: 92vh;
      top: 31px;
      width: 1322px;
    }

    .navigation-bar {
      background-color: rgba(89, 86, 86, 0.93);
      height: 95px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      width: 101%;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 60px 80px 0 80px;
      position: relative;
      height: 667px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      position: relative;
      top: 20px;
    }

    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .nav-links {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
      text-align: center;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
    }

    .hero-text h1 {
      font-size: 40px;
    }

    .hero-text .highlight {
      font-size: 40px;

    }

    .hero-text h2 {
      font-size: 40px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 22%;
      top: 161%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-section {
      text-align: center;
      background: #fff;
      color: #000;
      position: relative;
      top: 40px;
      width: 1280px;

    }

    .carousel-impact {
      overflow-x: auto;
      overflow-y: hidden;
      /* height: 50vh; */
    }

    .impact-title {
      font-size: 28px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      position: relative;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      /* gap: 27px; */
      position: relative;
      top: 30px;
      padding: 40px;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 320px;
      height: 466px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .mini-text {
      font-style: italic;
      font-size: 18px;
      position: relative;
      left: 0px;
    }

    .impact-image img {
      width: 320px;
      position: relative;
      left: -25px;
      top: 8px;
    }

    .location {
      font-size: 16px;
      color: #000000;
      display: flex;
      gap: 15px;
      font-weight: 600;
      padding: 20px;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 200px;
      width: 200px;
      position: relative;
      left: 32px;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-list1 li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .impact-list li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 320px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .bar-graph {
      display: flex;
      gap: 45px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 18px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 204px;
      top: -38px;
    }

    .bold-text {
      font-size: 24px;
      font-weight: 600;
    }

    .small-text {
      font-size: 16px;
      font-weight: 400;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
      padding: 84px 4vw;
      position: relative;
      width: 1322px;
    }

    /* ABOUT SECTION */
    .about-carousel {
      /* width: 440px; */
      height: 540px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;

    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 26px;
      color: #030027;
    }

    .founder-info h3 {
      font-size: 20px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .about-left p {
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }

    .about-caption {
      font-weight: 800;
      font-size: 16px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      left: 10px;
      /* top: -72px; */
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 400px;
      display: block;
      position: relative;
      /* left: -29px; */
      /* top: 38px; */
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .outreach-left {
      position: relative;
      flex: 1;
      max-width: 320px;
    }


    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    .outreach-content {
      flex: 2;
      max-width: 320px;
    }

    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      left: -300px;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      /* width: 370px !important; */
      text-align: center;
      height: 400px;
      position: relative;
      max-width: 294px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -73px;
      top: 30px;
    }

    .picture-buttons {
      display: flex;
      justify-content: center;
      gap: 23px;
      position: relative;
      top: 20px;
      /* width: 154px; */
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -82px;
      top: 28px;
    }

    .outreach-content p {
      font-size: 14px;
      line-height: 1.8;
      color: #000000;
      position: relative;
    }

    /* BYC SECTION */
    .byc-left h2 {
      font-weight: 700;
      font-size: 23px;
      color: #1d1d1d;
    }

    .event-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      right: 27px;
      top: 15px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 19px;
      top: 50px;
      width: 312px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .carousel-wrapper {
      max-width: 420px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 30px;
      background: white;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
      top: 25px;
      left: -43px;

    }

    .outreach-card img {
      width: 116%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      top: 30px;
      left: -50px;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
    }

    .irregular-bg.inverted {
      background: url(../images/byc-bg.png) no-repeat center center / cover;
      clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 100%);
      /* padding: 67px 16vw; */
      position: relative;
      z-index: 0;
    }

    .event-showcase {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      position: relative;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
    }

    .footer-contact {
      position: relative;
    }

    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .footer-middle {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0;
      gap: 527px;
    }

    .connect-text {
      color: #604652;
      font-weight: bold;
      font-size: 14px;
      position: relative;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      /* left: -89px;
      top: 26px; */
    }

    .byc-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 900px;
    }

    .byc-right {
      flex: 1;
      min-width: 320PX;
      position: relative;
    }

    .byc-left p {
      font-size: 14px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .byc-card {
      background: #604652;
      color: white;
      border-radius: 12px;
      padding: 15px;
      width: 160px;
      text-align: center;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .byc-right h3 {
      font-size: 24px;
      font-weight: 500;
      color: #604652;
      position: relative;
      width: 283px;
      left: 100px;
      top: -23px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 27px 26px;
      width: 286px;
      height: 200px;
      POSITION: relative;
      /* top: 9px; */
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 20px;
    }

    .byc-left h4 {
      font-weight: 600;
      color: #ffffff;
      font-size: 16px;
    }

    .byc-subtag {
      color: #000000;
      font-size: 16px;
      font-weight: 600;
      position: relative;
      left: 5px;
      width: 361px;
      top: -7px;
    }

    .event-right h2 {
      font-weight: 800;
      font-size: 20px;
      color: #2F2F5F;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
      color: #515050;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
    }

  }

  @media (min-width: 1025px) and (max-width: 1280px) {
    .toggle-btn {
      display: none;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 20px;
    }

    .hero {
      height: 92vh;
      top: 31px;
      width: 1280px;
    }

    .navigation-bar {
      background-color: rgba(89, 86, 86, 0.93);
      height: 95px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      width: 101%;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 60px 80px 0 80px;
      position: relative;
      height: 667px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      font-size: 14px;
      position: relative;
      top: 20px;
    }

    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .nav-links {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
      text-align: center;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
    }

    .hero-text h1 {
      font-size: 40px;
    }

    .hero-text .highlight {
      font-size: 40px;

    }

    .hero-text h2 {
      font-size: 40px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 22%;
      top: 161%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-section {
      text-align: center;
      background: #fff;
      color: #000;
      position: relative;
      /* top: 40px; */
      width: 100%;
      overflow: visible;

    }

    .carousel-impact {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      /* height: 51vh; */
    }

    .impact-title {
      font-size: 28px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .carousel-impact {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      position: relative;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 27px;
      position: relative;
      /* top: 30px; */
      padding: 5px;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 320px;
      height: 466px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .mini-text {
      font-style: italic;
      font-size: 18px;
      position: relative;
      left: 0px;
    }

    .impact-image img {
      width: 320px;
      position: relative;
      left: -25px;
      top: 8px;
    }

    .about-section {
      display: flex;
      gap: 6px;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
      align-items: center;
    }

    .location {
      font-size: 16px;
      color: #000000;
      display: flex;
      gap: 15px;
      font-weight: 600;
      padding: 20px;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 200px;
      width: 200px;
      position: relative;
      left: 32px;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-list1 li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .impact-list li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 320px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .bar-graph {
      display: flex;
      gap: 45px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 18px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 204px;
      top: -38px;
    }

    .bold-text {
      font-size: 24px;
      font-weight: 600;
    }

    .small-text {
      font-size: 16px;
      font-weight: 400;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
      padding: 84px 4vw;
      position: relative;
    }

    /* ABOUT SECTION */
    .about-carousel {
      width: 335px;
      height: 400px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;

    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 26px;
      color: #030027;
    }

    .founder-info h3 {
      font-size: 20px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .about-left p {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
    }

    .about-caption {
      font-weight: 800;
      font-size: 12px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      left: 10px;
      /* top: -72px; */
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 400px;
      display: block;
      position: relative;
      left: -29px;
      /* top: 38px; */
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .outreach-left {
      position: relative;
      flex: 1;
      max-width: 320px;
    }


    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    .outreach-content {
      flex: 2;
      max-width: 320px;
    }

    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      left: -300px;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      /* width: 370px !important; */
      text-align: center;
      height: 400px;
      position: relative;
      max-width: 294px;
      left: 35px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -83px;
      top: 28px;
    }

    .picture-buttons {
      display: flex;
      justify-content: center;
      gap: 23px;
      position: relative;
      top: 20px;
      /* width: 154px; */
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
      left: 35px;
      top: -20px;
    }

    /* BYC SECTION */
    .byc-left h2 {
      font-weight: 700;
      font-size: 23px;
      color: #1d1d1d;
    }

    .event-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      right: 0px;
      top: 0px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: 0px;
      width: 312px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .carousel-wrapper {
      max-width: 420px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 30px;
      background: white;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
      top: 0px;
      left: 0px;

    }

    .outreach-card img {
      width: 116%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      top: 0px;
      left: 0px;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      top: 0px;
      left: 0px;
    }

    .irregular-bg.inverted {
      background: url(../images/byc-bg.png) no-repeat center center / cover;
      clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 100%);
      padding: 84px 4vw;
      position: relative;
      z-index: 0;
    }

    .event-showcase {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      /* gap: 0px; */
      position: relative;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
    }

    .footer-contact {
      position: relative;
    }

    .footer-middle {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0;
      gap: 482px;
    }

    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .connect-text {
      color: #604652;
      font-weight: bold;
      font-size: 14px;
      position: relative;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
      color: #515050;
    }


    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      /* left: -89px;
      top: 26px; */
    }

    .byc-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 900px;
    }

    .byc-right {
      flex: 1;
      min-width: 260px;
      position: relative;
      left: 34px;
    }

    .byc-left p {
      font-size: 14px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .byc-card {
      background: #604652;
      color: white;
      border-radius: 12px;
      padding: 15px;
      width: 160px;
      text-align: center;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .byc-right h3 {
      font-size: 24px;
      font-weight: 500;
      color: #604652;
      position: relative;
      width: 283px;
      left: 100px;
      top: -23px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 27px 26px;
      width: 286px;
      height: 200px;
      POSITION: relative;
      /* top: 9px; */
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 20px;
    }

    .byc-left h4 {
      font-weight: 600;
      color: #ffffff;
      font-size: 16px;
    }

    .byc-subtag {
      color: #000000;
      font-size: 16px;
      font-weight: 600;
      position: relative;
      left: 5px;
      width: 361px;
      top: -7px;
    }

    .event-right h2 {
      font-weight: 800;
      font-size: 20px;
      color: #2F2F5F;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    .footer-middle {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0;
      gap: 482px;
    }
  }

  /*769 to 1028 */
  @media (min-width: 901px) and (max-width: 1024px) {
    .toggle-btn {
      display: none;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 20px;
    }

    .hero {
      height: 92vh;
      top: 31px;
      width: 1024px;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 60px 80px 0 80px;
      position: relative;
      height: 667px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      position: relative;
      top: 20px;
    }

    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .nav-links {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 13px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
      text-align: center;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
    }

    .hero-text h1 {
      font-size: 40px;
    }

    .hero-text .highlight {
      font-size: 40px;

    }

    .hero-text h2 {
      font-size: 40px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 22%;
      top: 161%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-section {
      text-align: center;
      background: #fff;
      color: #000;
      position: relative;
      top: 18px;
      width: fit-content;
      height: auto;
      overflow: scroll;
    }

    .impact-title {
      font-size: 28px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      position: relative;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
      top: 3px;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 27px;
      position: relative;
      top: 30px;
      padding: 5px;
    }

    .carousel-impact {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

    }

    .impact-cards {
      flex-direction: row;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 319px;
      height: 466px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .mini-text {
      font-style: italic;
      font-size: 18px;
      position: relative;
      left: 0px;
    }

    .impact-image img {
      width: 320px;
      position: relative;
      left: -25px;
      top: 8px;
    }

    .location {
      font-size: 16px;
      color: #000000;
      display: flex;
      gap: 15px;
      font-weight: 600;
      padding: 20px;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 200px;
      width: 200px;
      position: relative;
      left: 32px;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-list1 li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .impact-list li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 320px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .bar-graph {
      display: flex;
      gap: 45px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 18px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 204px;
      top: -38px;
    }

    .bold-text {
      font-size: 24px;
      font-weight: 600;
    }

    .small-text {
      font-size: 16px;
      font-weight: 400;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
      padding: 84px 4vw;
      position: relative;
    }

    /* ABOUT SECTION */
    .about-carousel {
      width: 335px;
      height: 400px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
      top: 65px;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;

    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 26px;
      color: #030027;
    }

    .founder-info h3 {
      font-size: 20px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .about-left p {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
    }

    .about-caption {
      font-weight: 800;
      font-size: 14px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
      top: 63px;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      /* left: 10px; */
      /* top: -72px; */
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 320px;
      display: block;
      position: relative;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .outreach-left {
      position: relative;
      flex: 1;
      min-width: 320px;
    }


    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    .outreach-content {
      flex: 2;
      min-width: 250px;
    }

    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      left: -300px;
    }

    .outreach-card img {
      width: 115.8%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      /* width: 370px !important; */
      text-align: center;
      height: 400px;
      position: relative;
      max-width: 294px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -73px;
      top: 30px;
    }

    .picture-buttons {
      display: flex;
      justify-content: center;
      gap: 23px;
      position: relative;
      top: 20px;
      /* width: 154px; */
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
    }

    /* BYC SECTION */
    .byc-left h2 {
      font-weight: 700;
      font-size: 23px;
      color: #1d1d1d;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: 0px;
      left: 0px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
      align-items: center;
    }


    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .carousel-wrapper {
      max-width: 420px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 30px;
      background: white;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: 0px;
      top: 0px;
    }

    .event-showcase {
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
    }

    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .connect-text {
      color: #604652;
      font-weight: bold;
      font-size: 14px;
      position: relative;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
      color: #515050;
    }

    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      left: 0px;
      top: 0px;
    }

    .byc-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 400px;
    }

    .byc-right {
      flex: 1;
      min-width: 320PX;
      position: relative;
    }

    .byc-left p {
      font-size: 14px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .byc-card {
      background: #604652;
      color: white;
      border-radius: 12px;
      padding: 15px;
      width: 160px;
      text-align: center;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .byc-right h3 {
      font-size: 24px;
      font-weight: 500;
      color: #604652;
      position: relative;
      width: 283px;
      left: 100px;
      top: -23px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 27px 26px;
      width: 286px;
      height: 200px;
      POSITION: relative;
      /* top: 9px; */
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 20px;
    }

    .byc-left h4 {
      font-weight: 600;
      color: #ffffff;
      font-size: 16px;
    }

    .byc-subtag {
      color: #000000;
      font-size: 16px;
      font-weight: 600;
      position: relative;
      left: 5px;
      width: 361px;
      top: -7px;
    }

    .event-right h2 {
      font-weight: 800;
      font-size: 20px;
      color: #2F2F5F;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }
  }

  @media (min-width: 769px) and (max-width: 900px) {
    .toggle-btn {
      display: none;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 20px;
    }

    .hero {
      height: 92vh;
      top: 31px;
      width: 1024px;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 60px 80px 0 80px;
      position: relative;
      height: 667px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      position: relative;
      top: 20px;
    }

    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .nav-links {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 12px;
      padding: 8px 7px;
      transition: background 0.3s ease, color 0.3s ease;
      text-align: center;
    }

    .navigation-bar {
      background-color: rgba(89, 86, 86, 0.93);
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
    }

    .hero-text h1 {
      font-size: 40px;
    }

    .hero-text .highlight {
      font-size: 40px;

    }

    .hero-text h2 {
      font-size: 40px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 22%;
      top: 161%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-section {
      text-align: center;
      background: #fff;
      color: #000;
      position: relative;
      top: 18px;
      width: fit-content;
      height: auto;
      overflow: scroll;
    }

    .impact-title {
      font-size: 28px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      position: relative;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 27px;
      position: relative;
      top: 30px;
      padding: 5px;
    }

    .carousel-impact {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .impact-cards {
      flex-direction: row;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 319px;
      height: 466px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .mini-text {
      font-style: italic;
      font-size: 18px;
      position: relative;
      left: 0px;
    }

    .impact-image img {
      width: 320px;
      position: relative;
      left: -25px;
      top: 8px;
    }

    .location {
      font-size: 16px;
      color: #000000;
      display: flex;
      gap: 15px;
      font-weight: 600;
      padding: 20px;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 200px;
      width: 200px;
      position: relative;
      left: 32px;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-list1 li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .impact-list li {
      display: flex;
      align-items: center;
      gap: 10px;

    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 320px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .bar-graph {
      display: flex;
      gap: 45px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 18px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 204px;
      top: -38px;
    }

    .bold-text {
      font-size: 24px;
      font-weight: 600;
    }

    .small-text {
      font-size: 16px;
      font-weight: 400;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 8%, 100% 100%, 0% 100%);
      padding: 84px 4vw;
      position: relative;
    }

    /* ABOUT SECTION */
    .about-left .highlight {
      font-weight: 900;
      font-size: 20px;
      color: #030027;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;
    }

    .founder-info h3 {
      font-size: 19px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .founder-info img {
      width: 66px;
      height: 66px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e35f6d;
    }

    .about-left p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }


    .about-caption {
      font-weight: 800;
      font-size: 12px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;

    }

    .about-section {
      display: flex;
      /* gap: 20px; */
      background-color: #F6F5F2;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    /* ABOUT SECTION */

    .about-carousel {
      width: 300px;
      height: 367px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      left: 10px;
      top: -33px;
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 400px;
      display: block;
      position: relative;
      left: -48px;
      top: -4px;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .outreach-card img {
      width: 116%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .outreach-left {
      position: relative;
      flex: 1;
      max-width: 320px;
    }


    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }

    .outreach-content {
      flex: 2;
      max-width: 320px;
    }

    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      left: -300px;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      /* width: 370px !important; */
      text-align: center;
      height: 400px;
      position: relative;
      max-width: 294px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -73px;
      top: 28px;
    }

    .picture-buttons {
      display: flex;
      justify-content: center;
      gap: 23px;
      position: relative;
      top: 20px;
      /* width: 154px; */
    }

    .outreach-content p {

      display: none;
    }

    /* BYC SECTION */
    .byc-left h2 {
      font-weight: 700;
      font-size: 23px;
      color: #1d1d1d;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: 0px;
      top: 0px;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: 0px;
      left: 0px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .carousel-wrapper {
      max-width: 420px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 30px;
      background: white;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;

    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
    }

    .event-showcase {
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      align-items: center;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;
    }


    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .connect-text {
      color: #604652;
      font-weight: bold;
      font-size: 14px;
      position: relative;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
      color: #515050;
    }

    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      left: 0px;
      top: 0px;
    }

    .byc-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: 900px;
    }

    .byc-right {
      flex: 1;
      min-width: 320PX;
      position: relative;
    }

    .byc-left p {
      font-size: 12px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .byc-card {
      background: #604652;
      color: white;
      border-radius: 12px;
      padding: 15px;
      width: 160px;
      text-align: center;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .byc-right h3 {
      font-size: 24px;
      font-weight: 500;
      color: #604652;
      position: relative;
      width: 283px;
      left: 0px;
      top: 0px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 27px 26px;
      width: 286px;
      height: 200px;
      POSITION: relative;
      /* top: 9px; */
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 20px;
    }

    .byc-left h4 {
      font-weight: 600;
      color: #ffffff;
      font-size: 16px;
    }

    .byc-subtag {
      color: #000000;
      font-size: 16px;
      font-weight: 600;
      position: relative;
      left: 0px;
      width: 361px;
      top: 0px;
    }

    .event-right h2 {
      font-weight: 800;
      font-size: 20px;
      color: #2F2F5F;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }

    .carousel-impact {
      overflow: scroll;
    }

    .byc-section {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      /* height: 90vh; */
      flex-direction: column;
    }

    .byc-event-cards {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: 777px;
    }
  }

  @media (max-width : 768px) and (min-width:601px) {

    /* HERO SECTION */
    .hero {
      height: 92vh;
      top: 31px;
      width: 1602px;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 24px;
      left: 0px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 0px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 600;
      font-size: 12px;
      position: relative;
      top: 20px;
    }

    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .navigation-bar {
      background-color: transparent;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      background-color: rgba(89, 86, 86, 0.93);
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 10px;
      border-radius: 4px;
    }

    .nav-links.active {
      display: flex;
    }

    .toggle-btn {
      display: block;
      font-size: 29px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 26px;
      color: white;
    }


    .hero-text {
      max-width: 600px;
      position: relative;
      top: 186px;
    }

    .hero-text h1 {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
    }

    .hero-text h2 {
      font-size: 22px;
      position: relative;
      color: #fff;
      position: relative;
      top: 17px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 35%;
      top: 170%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-title {
      font-size: 24px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      /* width: 780px; */
      position: relative;
      /* left: -5px; */
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 244px;
      height: 400px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      top: -8px;
      position: relative;
    }

    .impact-card h3 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #604652;
      position: relative;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 147px;
      top: -60px;
      width: 67px;
      height: -13px;
    }

    .impact-card h2 {
      font-size: 16px;
      position: relative;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-image img {
      width: 244px;
      position: relative;
      left: -25px;
      top: 10px;
    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 244px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .location {
      font-size: 12px;
      color: #000000;
      display: flex;
      gap: 7px;
      font-weight: 600;
      padding: 20px;
    }

    .location i {
      font-size: 24px;
      position: relative;
      top: -4px;
      color: black;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
      top: -25px;
      left: -20px;
    }

    .bold-text {
      font-size: 17px;
      font-weight: 600;
    }

    .small-text {
      font-size: 14px;
      font-weight: 400;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 150px;
      width: 150px;
      position: relative;
      left: 17px;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 2%, 100% 104%, 0% 108%);
      padding: 148px 13vw;
      position: relative;
    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 20px;
      color: #030027;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;
    }

    .founder-info h3 {
      font-size: 19px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .founder-info img {
      width: 66px;
      height: 66px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e35f6d;
    }

    .about-left p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }

    .about-caption {
      font-weight: 800;
      font-size: 14px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .about-section {
      display: flex;
      gap: 20px;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* ABOUT SECTION */
    .about-carousel {
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .card-main-title {
      font-size: 28px;
      font-weight: 900;
      color: #604652;
      line-height: 1;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      text-align: center;
      height: 380px;
      position: relative;
      max-width: 280px;
    }

    .card-subtitle {
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      display: inline-block;
      position: relative;
      top: -21px;
    }


    .bar-graph {
      display: flex;
      gap: 30px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }


    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      top: -48px;
      left: -300px;
    }

    .outreach-content p {
      display: none;
    }


    .outreach-card h3 {
      color: black;
      font-weight: 600;
      position: relative;
      left: -10px;
      font-size: 24px;
      line-height: 1.5;
      text-align: left;
      top: -6px;
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 320px;
      display: block;
      position: relative;
      /* left: -29px; */
      /* top: 38px; */
    }

    .outreach-card img {
      width: 117%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      left: -12px;
      top: -51px;
    }

    .picture-buttons button {
      border: 1px solid #aaa;
      background: transparent;
      padding: 5px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -78px;
      top: 50px;
    }

    .outreach-content {
      width: 0%;
      flex: 0;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .map-pin {
      color: white;
      width: 258px;
      height: 28px;
      text-align: center;
      padding-top: 8px;
      position: absolute;
      left: -481.048px;
      top: 236.677px;
      z-index: 1;
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
      left: 50px;
    }

    .byc-left h2 {
      font-weight: 700;
      font-size: 16px;
      color: #1d1d1d;
    }

    .byc-left p {
      font-size: 12px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: -9px;
      top: -24px;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: -48px;
      left: 10px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 16px;
    }

    .byc-right h3 {
      font-size: 20px;
      font-weight: 500;
      color: #604652;
      position: relative;
      left: 0px;
      width: 283px;
      top: 0px;
    }


    .social-icons i {
      color: #515050;
      font-size: 20px;
      transition: color 0.3s ease;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
    }


    .connect-text {
      color: #604652;
      font-weight: bold;
      font-size: 14px;
      position: relative;
    }

    .footer-icon {
      display: flex;
      gap: 31px;
      position: relative;
      color: #515050;
    }

    .footer-contact a {
      color: #3C3C43;
      text-decoration: none;
      font-weight: 500;
      font-size: 12px;
    }

    .byc-right {
      flex: 1;
      min-width: 260px;
      position: relative;
      left: 0px;
    }

    /* .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      left: -45px;
    } */

    .byc-subtag {
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      left: 0px;
      width: 361px;
      top: 0px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 30px 48px;
      width: 315px;
      height: 205px;
      position: relative;
      left: 0px;
      top: 0px;
    }

    .byc-cards {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      position: relative;
      /* top: 30px; */
      justify-content: center;
    }

    .byc-cards {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      position: relative;
      top: 30px;
    }

    .byc-section {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      /* height: 90vh; */
      flex-direction: column;
    }

    .footer-address p {
      margin-top: 10px;
      line-height: 1.6;
      font-size: 14px;
    }

    .foooter-address h2 {
      font-size: 14px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }

    .impact-card:hover {
      transform: none;
    }

  }

  @media (max-width : 600px) and (min-width: 481px) {

    /* HERO SECTION */
    .hero {
      height: 92vh;
      top: 31px;
      width: 1602px;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 24px;
      left: 0px;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 24px 77px 0 84px;
      position: relative;
      height: auto;
      flex-direction: column;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 0px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: none;
    }

    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .navigation-bar {
      background-color: transparent;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      background-color: rgba(89, 86, 86, 0.93);
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 10px;
      border-radius: 4px;
    }

    .nav-links.active {
      display: flex;
    }

    .toggle-btn {
      display: block;
      font-size: 29px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 26px;
      color: white;
    }


    .hero-text {
      max-width: 600px;
      position: relative;
      top: 353px;
      left: -50px;
    }

    .hero-text h1 {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
    }

    .hero-text h2 {
      font-size: 22px;
      position: relative;
      color: #fff;
      position: relative;
      top: 17px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 35%;
      top: 170%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-title {
      font-size: 24px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      width: 780px;
      position: relative;
      left: -5px;
      /* top:56px; */
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 244px;
      height: 400px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      top: -8px;
      position: relative;
    }

    .impact-card h3 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #604652;
      position: relative;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 147px;
      top: -60px;
      width: 67px;
      height: -13px;
    }

    .impact-card h2 {
      font-size: 16px;
      position: relative;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-image img {
      width: 244px;
      position: relative;
      left: -25px;
      top: 10px;
    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 244px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .location {
      font-size: 12px;
      color: #000000;
      display: flex;
      gap: 7px;
      font-weight: 600;
      padding: 20px;
    }

    .location i {
      font-size: 24px;
      position: relative;
      top: -4px;
      color: black;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
      top: -25px;
      left: -20px;
    }

    .bold-text {
      font-size: 17px;
      font-weight: 600;
    }

    .small-text {
      font-size: 14px;
      font-weight: 400;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 150px;
      width: 150px;
      position: relative;
      left: 17px;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 2%, 100% 104%, 0% 108%);
      padding: 90px 4vw;
      position: relative;
    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 20px;
      color: #030027;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;
    }

    .founder-info h3 {
      font-size: 19px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .founder-info img {
      width: 66px;
      height: 66px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e35f6d;
    }

    .about-left p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }

    .about-caption {
      font-weight: 800;
      font-size: 14px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .about-section {
      display: flex;
      gap: 20px;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* ABOUT SECTION */
    .about-carousel {
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .card-main-title {
      font-size: 28px;
      font-weight: 900;
      color: #604652;
      line-height: 1;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      text-align: center;
      height: 380px;
      position: relative;
      max-width: 280px;
    }

    .card-subtitle {
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      display: inline-block;
      position: relative;
      top: -21px;
    }


    .bar-graph {
      display: flex;
      gap: 30px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }


    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      top: -48px;
      left: -300px;
    }

    .outreach-content p {
      display: none;
    }

    .carousel-impact {
      overflow-x: scroll;
      overflow-y: clip;
      /* height: 40vh; */
    }

    .outreach-card h3 {
      color: black;
      font-weight: 600;
      position: relative;
      left: -10px;
      font-size: 24px;
      line-height: 1.5;
      text-align: left;
      top: -6px;
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 380px;
      display: block;
      position: relative;
      /* left: -29px; */
      /* top: 38px; */
    }

    .outreach-content {
      flex: 0;
      max-width: 0px;
    }

    .outreach-card img {
      width: 117%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      left: -12px;
      top: -51px;
    }

    .picture-buttons button {
      border: 1px solid #aaa;
      background: transparent;
      padding: 5px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -78px;
      top: 28px;
    }

    /* .outreach-left {
      position: relative;
      width: 400px;
  } */
    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .map-pin {
      color: white;
      width: 258px;
      height: 28px;
      text-align: center;
      padding-top: 8px;
      position: absolute;
      left: -481.048px;
      top: 236.677px;
      z-index: 1;
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
      left: 50px;
    }

    .byc-left h2 {
      font-weight: 700;
      font-size: 16px;
      color: #1d1d1d;
    }

    .byc-left p {
      font-size: 12px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: -9px;
      top: -24px;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: -48px;
      left: 10px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 16px;
    }

    .byc-right h3 {
      font-size: 20px;
      font-weight: 500;
      color: #604652;
      position: relative;
      left: 0px;
      width: 283px;
      top: 0px;
    }


    .social-icons i {
      color: #515050;
      font-size: 20px;
      transition: color 0.3s ease;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
    }

    .footer-contact {
      position: relative;
      top: 0px;
    }

    .connect-text {
      color: #604652;
      font-weight: bold;
      font-size: 14px;
      position: relative;
    }

    .footer-icon {
      display: none;
    }

    .footer-contact a {
      color: #3C3C43;
      text-decoration: none;
      font-weight: 500;
      font-size: 12px;
    }

    .footer-contact {
      position: relative;
    }

    .byc-right {
      flex: 1;
      min-width: 260px;
      position: relative;
      /* left: -100px; */
    }

    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      /* left: -45px; */
    }

    .byc-subtag {
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      left: 0px;
      width: 361px;
      top: 0px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 30px 48px;
      width: 315px;
      height: 205px;
      position: relative;
      left: 0px;
      top: 0px;
    }

    .byc-card {
      background: #604652;
      color: white;
      border-radius: 12px;
      padding: 15px;
      width: 200px;
      text-align: center;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .byc-cards {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
      top: 30px;
    }

    .byc-section {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      /* height: 90vh; */
    }

    .footer-address p {
      margin-top: 10px;
      line-height: 1.6;
      font-size: 14px;
    }

    .foooter-address h2 {
      font-size: 14px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 12px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }

    .impact-card:hover {
      transform: none;
    }

    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }
  }

  @media (max-width : 480px) and (min-width: 426px) {

    /* HERO SECTION */
    .hero {
      height: 92vh;
      top: 31px;
      width: 1602px;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 24px;
      left: 0px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 0px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: none;
    }


    .social-icons {
      display: flex;
      gap: 31px;
      position: relative;
    }

    .navigation-bar {
      background-color: transparent;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      background-color: rgba(89, 86, 86, 0.93);
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 10px;
      border-radius: 4px;
    }

    .nav-links.active {
      display: flex;
    }

    .toggle-btn {
      display: block;
      font-size: 29px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 26px;
      color: white;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
      top: 353px;
      left: -50px;
    }

    .hero-text h1 {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
    }

    .hero-text h2 {
      font-size: 22px;
      position: relative;
      color: #fff;
      position: relative;
      top: 17px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 35%;
      top: 170%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-title {
      font-size: 24px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      position: relative;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 244px;
      height: 400px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .impact-subtitle {
      font-size: 18px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      top: -8px;
      position: relative;
    }

    .impact-card h3 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #604652;
      position: relative;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 147px;
      top: -60px;
      width: 67px;
      height: -13px;
    }

    .impact-card h2 {
      font-size: 16px;
      position: relative;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-image img {
      width: 244px;
      position: relative;
      left: -25px;
      top: 10px;
    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 244px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .location {
      font-size: 12px;
      color: #000000;
      display: flex;
      gap: 7px;
      font-weight: 600;
      padding: 20px;
    }

    .location i {
      font-size: 24px;
      position: relative;
      top: -4px;
      color: black;
    }

    .impact-endline {
      font-size: 18px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
      top: -25px;
      left: -20px;
    }

    .bold-text {
      font-size: 17px;
      font-weight: 600;
    }

    .small-text {
      font-size: 14px;
      font-weight: 400;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 150px;
      width: 150px;
      position: relative;
      left: 17px;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 2%, 100% 104%, 0% 108%);
      padding: 90px 4vw;
      position: relative;
    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 20px;
      color: #030027;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;
    }

    .founder-info h3 {
      font-size: 19px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .founder-info img {
      width: 66px;
      height: 66px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e35f6d;
    }

    .about-left p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }

    .about-caption {
      font-weight: 800;
      font-size: 14px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .about-section {
      display: flex;
      gap: 20px;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* ABOUT SECTION */
    .about-carousel {
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .card-main-title {
      font-size: 28px;
      font-weight: 900;
      color: #604652;
      line-height: 1;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      text-align: center;
      height: 380px;
      position: relative;
      max-width: 320px;
    }

    .card-subtitle {
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      display: inline-block;
      position: relative;
      top: -21px;
    }


    .bar-graph {
      display: flex;
      gap: 30px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }


    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      top: -48px;
      left: -300px;
    }

    .outreach-content p {
      display: none;
    }


    .outreach-card h3 {
      color: black;
      font-weight: 600;
      position: relative;
      left: -10px;
      font-size: 24px;
      line-height: 1.5;
      text-align: left;
      top: -6px;
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 380px;
      display: block;
      position: relative;
      /* left: -29px; */
      /* top: 38px; */
    }

    .outreach-card img {
      width: 114.5%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
    }

    .picture-buttons button {
      border: 1px solid #aaa;
      background: transparent;
      padding: 5px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -78px;
      top: 30px;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .map-pin {
      color: white;
      width: 258px;
      height: 28px;
      text-align: center;
      padding-top: 8px;
      position: absolute;
      left: -481.048px;
      top: 236.677px;
      z-index: 1;
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
      left: 50px;
    }

    .byc-left h2 {
      font-weight: 700;
      font-size: 16px;
      color: #1d1d1d;
    }

    .byc-left p {
      font-size: 12px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
      top: 25px;
      left: -43px;

    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      top: 30px;
      left: -50px;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: -9px;
      top: -24px;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: -48px;
      left: 10px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 16px;
    }

    .byc-right h3 {
      font-size: 20px;
      font-weight: 500;
      color: #604652;
      position: relative;
      left: 260px;
      width: 283px;
      top: -13px;
    }


    .social-icons-footer i {
      color: #515050;
      font-size: 18px;
      transition: color 0.3s ease;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
    }

    .connect-text {
      display: none;
    }

    .footer-icon {
      display: flex;
      gap: 10px;
      position: relative;
      color: #515050;
      font-size: 16px;
      transition: color 0.3s ease;
    }


    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 50px;
    }

    .footer-contact a {
      color: #3C3C43;
      text-decoration: none;
      font-weight: 500;
      font-size: 12px;
    }

    .byc-right {
      flex: 1;
      min-width: 260px;
      position: relative;
      left: -100px;
    }

    .byc-left {
      flex: 2;
      min-width: 300px;
      position: relative;
      left: -45px;
    }

    .byc-subtag {
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      left: 144px;
      width: 361px;
      top: -3px;
    }

    .byc-event-card {
      background: url(../images/assets/offline-card.png) no-repeat center center / cover;
      color: white;
      padding: 30px 48px;
      width: 315px;
      height: 205px;
      position: relative;
      left: 95px;
      top: 2px;
    }

    .byc-card {
      background: #604652;
      color: white;
      border-radius: 12px;
      padding: 15px;
      width: 200px;
      text-align: center;
      height: 220px;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
      width: calc(50% - 20px);
    }

    .byc-cards {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      position: relative;
      top: 30px;
    }

    .byc-section {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      height: 90vh;
    }

    .footer-address p {
      margin-top: 10px;
      line-height: 1.6;
      font-size: 14px;
    }

    .foooter-address h2 {
      font-size: 14px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }

    .impact-card:hover {
      transform: none;
    }

    .irregular-bg.inverted {
      display: none;
    }

    .irregular-bg.event {
      display: none;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0px 22px 0 76px;
      position: relative;
      height: auto;
      flex-direction: column;
    }
  }

  @media (max-width : 425px) and (min-width: 326px) {

    /* HERO SECTION */
    .hero {
      height: 92vh;
      top: 31px;
      width: 1602px;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 24px;
      left: 0px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 0px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: none;
    }


    .social-icons {
      display: none;
    }

    .navigation-bar {
      background-color: transparent;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      background-color: rgba(89, 86, 86, 0.93);
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 10px;
      border-radius: 4px;
    }

    .nav-links.active {
      display: flex;
    }

    .toggle-btn {
      display: block;
      font-size: 29px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 26px;
      color: white;
    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
      top: 339px;
      /* left: -20px; */
    }

    .hero-text h1 {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }

    .hero-text h2 {
      font-size: 18px;
      position: relative;
      color: #fff;
      position: relative;
      top: 17px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 190%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-title {
      font-size: 14px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      position: relative;
      left: -5px;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 244px;
      height: 400px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .impact-subtitle {
      font-size: 14px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      top: 0px;
      position: relative;
    }

    .impact-title span {
      color: #030027;
      font-size: 16px;
    }

    .impact-card h3 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #604652;
      position: relative;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 147px;
      top: -60px;
      width: 67px;
      height: -13px;
    }

    .impact-card h2 {
      font-size: 16px;
      position: relative;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-image img {
      width: 244px;
      position: relative;
      left: -25px;
      top: 10px;
    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 244px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .location {
      font-size: 12px;
      color: #000000;
      display: flex;
      gap: 7px;
      font-weight: 600;
      padding: 20px;
    }

    .location i {
      font-size: 24px;
      position: relative;
      top: -4px;
      color: black;
    }

    .impact-endline {
      font-size: 14px;
      color: #030027;
      font-weight: 600;
      position: relative;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
      top: -25px;
      left: -20px;
    }

    .bold-text {
      font-size: 17px;
      font-weight: 600;
    }

    .small-text {
      font-size: 14px;
      font-weight: 400;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 150px;
      width: 150px;
      position: relative;
      left: 17px;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 2%, 100% 104%, 0% 108%);
      padding: 90px 4vw;
      position: relative;
    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 20px;
      color: #030027;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;
    }

    .founder-info h3 {
      font-size: 19px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .founder-info img {
      width: 66px;
      height: 66px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e35f6d;
    }

    .about-left p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }

    .about-caption {
      font-weight: 800;
      font-size: 14px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .about-section {
      display: flex;
      gap: 20px;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* ABOUT SECTION */
    .about-carousel {
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .card-main-title {
      font-size: 28px;
      font-weight: 900;
      color: #604652;
      line-height: 1;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      text-align: center;
      height: 380px;
      position: relative;
      max-width: 320px;
    }

    .card-subtitle {
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      display: inline-block;
      position: relative;
      top: -21px;
    }

    .bar-graph {
      display: flex;
      gap: 30px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }

    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }


    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      top: -48px;
      left: -300px;
    }

    .outreach-content p {
      display: none;
    }


    .outreach-card h3 {
      color: black;
      font-weight: 600;
      position: relative;
      left: -10px;
      font-size: 24px;
      line-height: 1.5;
      text-align: left;
      top: -6px;
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 320px;
      display: block;
      position: relative;
      /* top: 38px; */
    }

    .outreach-card img {
      width: 114.5%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .coe-title {
      color: #030027;
      font-size: 12px;
      position: relative;
      left: -12px;
      top: -51px;
    }

    .picture-buttons button {
      border: 1px solid #aaa;
      background: transparent;
      padding: 5px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -78px;
      top: 30px;
    }

    .community-outreach {
      display: flex;
      /* gap: 70px; */
      align-items: center;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: space-evenly;
    }

    .map-pin {
      color: white;
      width: 258px;
      height: 28px;
      text-align: center;
      padding-top: 8px;
      position: absolute;
      left: -481.048px;
      top: 236.677px;
      z-index: 1;
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
      left: 50px;
    }

    .byc-left h2 {
      font-weight: 700;
      font-size: 16px;
      color: #1d1d1d;
    }

    .byc-left p {
      font-size: 12px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
      top: 25px;
      left: -43px;

    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      top: 30px;
      left: -50px;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: -9px;
      top: -24px;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: -48px;
      left: 10px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 16px;
    }

    .byc-right h3 {
      font-size: 20px;
      font-weight: 500;
      color: #604652;
      position: relative;
      left: 260px;
      width: 283px;
      top: -13px;
    }


    .social-icons-footer i {
      color: #515050;
      font-size: 16px;
      transition: color 0.3s ease;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
    }

    .footer-contact {
      position: relative;
      top: 0px;
      left: 0px;
    }

    .connect-text {
      display: none;
    }

    .footer-icon {
      display: flex;
      gap: 16px;
      position: relative;
    }

    .footer-contact a {
      color: #3C3C43;
      text-decoration: none;
      font-weight: 500;
      font-size: 12px;
    }

    .irregular-bg.inverted {
      display: none;
    }

    .irregular-bg.event {
      display: none;
    }

    .footer-address p {
      margin-top: 10px;
      line-height: 1.6;
      font-size: 14px;
    }

    .foooter-address h2 {
      font-size: 14px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }

    .impact-card:hover {
      transform: none;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0px 60px 0 31px;
      position: relative;
      height: auto;
      flex-direction: column;
    }

  }

  @media (max-width: 325px) {

    /* HERO SECTION */
    .hero {
      height: 92vh;
      top: 31px;
      width: 1602px;
    }

    .logo {
      position: relative;
      height: 25px;
      width: 130px;
      top: 24px;
      left: 0px;
    }

    /* EXTERNAL LINKS */
    .top-right {
      display: flex;
      align-items: center;
      gap: 0px;
      margin-left: auto;
      padding-right: 20px;
    }

    .top-labels {
      display: none;
    }


    .social-icons {
      display: none;
    }

    .navigation-bar {
      background-color: transparent;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
    }

    .nav-links {
      display: none;
      flex-direction: column;
      background-color: rgba(89, 86, 86, 0.93);
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 10px;
      border-radius: 4px;
    }

    .nav-links.active {
      display: flex;
    }

    .overlay {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0px 60px 0 31px;
      position: relative;
      height: auto;
      flex-direction: column;
    }

    .toggle-btn {
      display: block;
      font-size: 29px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 26px;
      color: white;

    }

    .nav-links li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px;
      padding: 8px 12px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .hero-text {
      max-width: 600px;
      position: relative;
      top: 339px;
      /* left: -20px; */
    }

    .hero-text h1 {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }

    .hero-text h2 {
      font-size: 18px;
      position: relative;
      color: #fff;
      position: relative;
      top: 17px;
    }

    .container {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 190%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* IMPACT SECTION */
    .impact-title {
      font-size: 14px;
      font-weight: 800;
      color: #030027;
      position: relative;
    }

    .impact-title span {
      color: #030027;
      font-size: 15px;
    }

    .impact-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      /* width: 780px; */
      position: relative;
    }

    .impact-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 20px 25px;
      width: 244px;
      height: 400px;
      text-align: left;
      transition: transform 0.3s ease;
    }

    .impact-card:hover {
      transform: none;
    }

    .impact-subtitle {
      font-size: 14px;
      color: #030027;
      font-style: italic;
      font-weight: 500;
      position: relative;
      top: 0px;
      position: relative;
      padding: 4px;
    }

    .impact-card h3 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #604652;
      position: relative;
    }

    .next-btn {
      background: transparent;
      border: 1px solid #000;
      color: #000;
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 10px;
      transition: 0.3s ease;
      position: relative;
      left: 147px;
      top: -60px;
      width: 67px;
      height: -13px;
    }

    .impact-card h2 {
      font-size: 16px;
      position: relative;
    }

    .impact-list1 {
      list-style: none;
      padding: 0;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      line-height: 2.5;
    }

    .impact-image img {
      width: 244px;
      position: relative;
      left: -25px;
      top: 10px;
    }

    .loc {
      display: flex;
      background-color: #F5F5F5;
      width: 244px;
      height: 15%;
      position: relative;
      top: -4px;
      left: -25px;
    }

    .location {
      font-size: 12px;
      color: #000000;
      display: flex;
      gap: 7px;
      font-weight: 600;
      padding: 20px;
    }

    .location i {
      font-size: 24px;
      position: relative;
      top: -4px;
      color: black;
    }

    .impact-endline {
      font-size: 14px;
      color: #030027;
      font-weight: 600;
      position: relative;
      top: 20px;
    }

    .impact-list {
      list-style: none;
      padding: 0;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      line-height: 1.5;
      top: -25px;
      left: -20px;
    }

    .bold-text {
      font-size: 17px;
      font-weight: 600;
    }

    .small-text {
      font-size: 14px;
      font-weight: 400;
    }

    #circle-img {
      border-radius: 50%;
      object-fit: cover;
      height: 150px;
      width: 150px;
      position: relative;
      left: 17px;
    }

    /* IRREGULAR BG */
    .irregular-bg {
      background-color: #F6F5F2;
      clip-path: polygon(0 0, 100% 2%, 100% 104%, 0% 108%);
      padding: 90px 4vw;
      position: relative;
    }

    .about-left .highlight {
      font-weight: 900;
      font-size: 20px;
      color: #030027;
    }

    .about-left h2 {
      font-size: 16px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 20px;
    }

    .founder-info h3 {
      font-size: 19px;
      font-weight: 800;
      color: #604652;
      text-transform: uppercase;
    }

    .founder-info img {
      width: 77px;
      height: 66px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid #e35f6d;
    }

    .about-left p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 16px;
      color: #2f2f2f;
      font-weight: 600;
      width: fit-content;
    }

    .about-caption {
      font-weight: 800;
      font-size: 14px;
      color: #030027;
      margin-bottom: 16px;
      position: relative;
    }

    .about-section {
      display: flex;
      gap: 20px;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    /* ABOUT SECTION */
    .about-carousel {
      width: 300px;
      height: 367px;
      overflow: hidden;
      border: 8px solid #ec6f94;
      position: relative;
    }

    .coe-section {
      display: flex;
      padding: 60px 10vw;
      background-color: #F6F5F2;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .card-main-title {
      font-size: 28px;
      font-weight: 900;
      color: #604652;
      line-height: 1;
    }

    .outreach-card {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
      padding: 20px;
      text-align: center;
      height: 380px;
      position: relative;
    }

    .card-subtitle {
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      display: inline-block;
      position: relative;
      top: -21px;
    }


    .bar-graph {
      display: flex;
      gap: 30px;
      height: 222px;
      align-items: center;
      justify-content: center;
    }



    .map-label {
      position: absolute;
      top: 20%;
      left: 15%;
      background: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }


    .outreach-content h2 {
      font-weight: 800;
      font-size: 28px;
      color: #231942;
      position: relative;
      top: -48px;
      left: -300px;
    }

    .outreach-content p {
      display: none;
    }


    .outreach-card h3 {
      color: black;
      font-weight: 600;
      position: relative;
      left: -10px;
      font-size: 24px;
      line-height: 1.5;
      text-align: left;
      top: -6px;
    }

    .svg-map {
      width: 1500% !important;
      height: auto;
      max-width: 320px;
      display: block;
      position: relative;
      left: -29px;
      /* top: 38px; */
    }

    .outreach-card img {
      width: 115.5%;
      height: 50%;
      position: relative;
      left: -20px;
      top: -20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 11px;
    }

    .coe-title {
      color: #030027;
      font-size: 10px;
      position: relative;
      /* left: -12px; */
      /* top: -51px; */
    }

    .picture-buttons button {
      border: 1px solid #aaa;
      background: transparent;
      padding: 5px 10px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
    }

    #view-next {
      background: #231942;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      position: relative;
      left: -89px;
      top: 26px;
    }

    .community-outreach {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      flex-wrap: wrap;
      background-color: #F6F5F2;
      justify-content: center;
    }

    .map-pin {
      color: white;
      width: 258px;
      height: 28px;
      text-align: center;
      padding-top: 8px;
      position: absolute;
      left: -481.048px;
      top: 236.677px;
      z-index: 1;
    }

    .outreach-content p {
      font-size: 12px;
      line-height: 1.8;
      color: #000000;
      position: relative;
      left: 50px;
    }

    .byc-left h2 {
      font-weight: 700;
      font-size: 16px;
      color: #1d1d1d;
    }

    .byc-left p {
      font-size: 12px;
      color: #ffffff;
      margin: 10px 0 30px;
      font-style: italic;
      font-weight: 500;
      position: relative;
    }

    .event-years {
      grid-column: 1 / -1;
      text-align: center;
      position: relative;
      top: 25px;
      left: -43px;

    }

    .more-reports {
      text-align: center;
      grid-column: 1 / -1;
      position: relative;
      top: 30px;
      left: -50px;
      font-size: 14px;
    }

    .event-years a {
      margin: 0 10px;
      color: #222;
      text-decoration: none;
      font-size: 12px;
    }

    .event-center {
      position: relative;
      text-align: center;
      left: -9px;
      top: -24px;
    }

    .event-left {
      display: flex;
      flex-direction: row;
      gap: 20px;
      position: relative;
      top: -48px;
      left: 10px;
    }

    .event-showcase {
      display: flex;
      gap: 10px;
      position: relative;
      flex-direction: column;
    }

    #event-desc {
      color: black;
      font-weight: 500;
      font-size: 12px;
    }

    #Opportunities {
      font-weight: 600;
      color: black;
      font-size: 16px;
    }

    .byc-right h3 {
      font-size: 20px;
      font-weight: 500;
      color: #604652;
      position: relative;
      left: 260px;
      width: 283px;
      top: -13px;
    }


    .social-icons-footer i {
      color: #515050;
      font-size: 14px;
      transition: color 0.3s ease;
    }

    .footer {
      background-color: #f3f1ec;
      padding: 30px 2vw;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      color: #604652;
      position: relative;
      border-top-right-radius: 32px;
      border-top-left-radius: 32px;
      WIDTH: fit-content;
    }

    .footer-contact {
      position: relative;
      top: 0px;
      left: 1142px;
    }

    .connect-text {
      display: none;
    }

    .footer-icon {
      display: flex;
      gap: 15px;
      position: relative;
    }

    .footer-contact a {
      color: #3C3C43;
      text-decoration: none;
      font-weight: 500;
      font-size: 12px;
    }

    .footer-contact {
      position: relative;
      top: 0px;
      left: 0px;
    }

    .irregular-bg.inverted {
      display: none;
    }

    .irregular-bg.event {
      display: none;
    }

    .footer-address p {
      margin-top: 10px;
      line-height: 1.6;
      font-size: 14px;
    }

    .foooter-address h2 {
      font-size: 14px;
    }

    .event-btn {
      background-color: #B790A2;
      color: white;
      padding: 15px 20px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s ease;
      font-style: italic;
      width: 200px;
      height: 115px;
      font-size: 14px;
    }

    .event-right {
      text-align: left;
      position: relative;
      left: 0px;
      top: -10px;
    }

    .footer-top {
      display: flex;
      flex-wrap: nowrap;
      padding: 20px 4px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .map-pin i {
      font-size: 70px;
      color: red;
    }

    .pin-text {
      background-color: white;
      padding: 10px 12px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      font-size: 16px;
      max-width: 200px;
      white-space: normal;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      top: -30px;
    }


  }


  /* LANDSCAPE */
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}