  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
    font-family: 'Inter';
  }

  h1, h2, h3, h4, h5, h6 { font-family: 'Urbanist'; }

  p, span {
    font-family: 'Inter';
  }
  /* Common css */
  img { max-width: 100%; }
  .section_padding { padding: 80px 0; }
  .main_container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
  .section-header { color: #F5821F; font-size: 18px; font-weight: 600; padding-bottom: 12px; text-transform: uppercase; font-family: 'Inter';}
  .section-title { font-size: 36px; line-height: 44px; font-weight: 700; padding-bottom: 50px; }

  /* Topbar Styles */
  .top-bar { padding: 15px 0; background-color: #FFFDFB; }
  .top-bar .inner-topbar { font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
  .top-bar .welcome { display: flex; align-items: center; gap: 10px; }
  .top-bar .welcome .topbar-title { font-weight: 500; color: #0C0708; }
  .top-bar .join-btn { background-color: #0C0708; color: white; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 12px; display: flex; align-items: center; gap: 5px; }
  .top-bar .contact-info { display: flex; gap: 40px; align-items: center; }
  .top-bar .contact-info .details { display: flex; align-items: center; gap: 10px; color: #0C0708; font-size: 13px; line-height: 18px; font-weight: 400; }

  /* Header */
  .header { padding: 15px 0; border-top: 1px solid #F0F0F0; }
  .header .header_container { display: flex; align-items: center; justify-content: space-between; }
  .header .logo { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 24px; }
  .header .logo-icon { width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
  .header .nav-menu { display: flex; list-style: none; gap: 30px; }
  .header .nav-menu li .link { text-decoration: none; transition: color 0.3s; font-size: 18px; line-height: 26px; font-weight: 500; color: #0c0708; font-family: 'Urbanist'; }
  .header .nav-menu li .link:hover, .nav-menu li .link.active { color: #ff6b35; }
  .header .nav-toggle, .header .close_side_bar { display: none; } 

  /* Hero Section */
  .hero-section { background-image: url('../../images/hero-sec-bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center 35%; height: 600px; position: relative; color: #ffffff; }
  .hero-section .outer-content { position: absolute; top: 42%; left: 0px; width: 100%; transform: translateY(-50%); }
  .hero-section .main_container { margin-left: 135px; }
  .hero-section .inner-content { max-width: 550px; background: rgba(12, 7, 8, 0.65); padding: 35px; border-radius: 12px; backdrop-filter: blur(4px); }
  .hero-section .hero-section-title { padding-bottom: 15px; }
  .hero-section .hero-section-text { font-size: 16px; line-height: 23px; margin-bottom: 30px; opacity: 0.9; }
  .hero-section .hero-section-cta { background-color: #F5821F; color: #ffffff; padding: 12px 15px; border: none; border-radius: 7px; font-size: 17px; font-weight: 500; text-decoration: none; transition: background-color 0.3s; display: block; max-width: 150px; }
  .hero-section .hero-section-cta:hover { background-color: #e55a2b; }


  /* About Section */
  .about-section .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .about-section .about-section-title { color: #0C0708; }
  .about-section .about-section-text { font-size: 19px; margin-bottom: 40px; color: #0C0708; font-weight: 400; line-height: 31px; }
  .about-section .mission-item { display: flex; gap: 20px; background: rgba(255, 255, 255, 1); padding: 20px 23px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15); }
  .about-section .mission-item:first-child { margin-bottom: 20px; }
  .about-section .mission-icon { width: 50px; height: 50px; background-color: #FFF8ED; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; flex-shrink: 0; }
  .about-section .mission-content h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: 10px; color: #0C0708; }
  .about-section .mission-content p { font-size: 15px; color: #0C0708; line-height: 1.6; margin-bottom: 0; }
  .about-image-container { display: flex; justify-content: end; align-items: center; }


  /* Objectives Section */
  .objectives-section { background-image: url('../../images/objective-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: center; height: 600px; }
  .objectives-section .objectives-title { color: #ffffff; }
  .objectives-section .objectives-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
  .objectives-section .objective-item { display: flex; align-items: flex-start; gap: 15px; border-bottom: 0.88px solid rgba(255, 255, 255, 0.3); padding-bottom: 25px; }
  .objectives-section .objective-item:nth-child(7), .objectives-section .objective-item:nth-child(8) { border-bottom: none; }
  .objectives-section .objective-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .objectives-section .objective-text { font-size: 20px; line-height: 28px; color: #ffffff; font-weight: 500; font-family: 'Urbanist'; }


  /* Core Values Section */
  .core-values-section .values-header { text-align: center;}
  .core-values-section .values-title { max-width: 445px; margin: 0 auto; }
  .core-values-section .values-grid { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 20px; }
  .core-values-section .value-item { display: flex; align-items: flex-start; gap: 20px; background-color: #FEFEFE; border: 1px solid rgba(0, 0, 0, 7%); border-radius: 12px; padding: 20px 23px; }
  .core-values-section .value-icon { width: 50px; height: 50px; background-color: #FFF8ED; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 12px; }
  .core-values-section .value-content .heading { font-size: 18px; font-weight: 600; color: #0c0708; padding-bottom: 8px; }
  .core-values-section .value-content .text { font-size: 15px; color: #0c0708; line-height: 20px; font-weight: 400; }

  /* Footer */
  .footer { background-color: #F5F5F5; padding: 50px 0; }
  .footer .footer-logo { padding-bottom: 30px; text-align: center; }
  .footer .footer-nav { display: flex; justify-content: center; gap: 50px; padding-bottom: 35px; max-width: 700px; margin: 0 auto; border-bottom: 1px solid rgba(0, 0, 0, 10%); margin-bottom: 45px; }
  .footer .footer-nav .link { text-decoration: none; font-size: 18px; transition: color 0.3s; font-weight: 500; line-height: 26px; color: #0C0708; }
  .footer .footer-nav a:hover { color: #ff6b35; }
  .footer .social-links { display: flex; justify-content: center; gap: 50px; }
  .footer .social-links a:hover { background-color: #ff6b35; }
  .footer .footer_bottom { padding-top: 15px; text-align: center; }
  .footer .footer_bottom .text { font-size: 15px; line-height: 22px; opacity: 0.7; }
  .footer a { text-decoration: none; color: #0c0708; }
  .footer .address { text-align: center; padding-top: 15px; font-size: 15px; line-height: 22px; }

  
  /* Responsive Design */
@media screen and (max-width: 767px) {
.section_padding { padding: 35px 0; }
.section-title { font-size: 22px; line-height: 30px; padding-bottom: 20px; }
.section-header { font-size: 16px; padding-bottom: 8px; }



.top-bar { padding: 8px 0; }
.top-bar .inner-topbar { flex-direction: column; gap: 10px; }
.top-bar .contact-info { gap: 20px; }


.header { padding: 8px 0; }
.header .nav-toggle { display: block; }
.header .nav-toggle img { width: 25px; }
.header .nav-menu { flex-direction: column; gap: 15px; }
.header .close_side_bar { display: block; position: absolute; right: 20px; top: 20px; }


.hero-section .main_container { margin-left: auto; }
.hero-section .inner-content { padding: 15px; }
.hero-section .hero-section-title { padding-bottom: 10px; }
.hero-section .hero-section-text { font-size: 14px; line-height: 20px; margin-bottom: 15px; }
.hero-section .hero-section-cta { padding: 8px 12px; font-size: 14px; max-width: 125px; }

.about-section .about-content { grid-template-columns: 1fr; gap: 25px; }
.about-section .about-section-text { font-size: 14px; margin-bottom: 20px; line-height: 26px; }
.about-section .mission-item:first-child { margin-bottom: 10px; }
.about-section .mission-item { display: flex; gap: 10px; padding: 10px 13px; }
.about-section .mission-icon { width: 35px; height: 35px; }
.about-section .mission-content h3 { font-size: 16px; }
.about-section .mission-content p { font-size: 14px; }


.objectives-section { height: auto; }
.objectives-section .objectives-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 15px; }
.objectives-section .objective-item { gap: 10px; padding-bottom: 10px; }
.objectives-section .objective-text { font-size: 14px; line-height: 22px; }
.objectives-section .objective-item:nth-child(7) { border-bottom: 0.88px solid rgba(255, 255, 255, 0.3); }
.objectives-section .objective-item:last-child { border-bottom: none }


.core-values-section .values-grid { grid-template-columns: repeat(1, minmax(250px, 1fr)); gap: 12px; }
.core-values-section .value-item { gap: 10px; padding: 10px 13px; }
.core-values-section .value-icon { height: 30px; padding: 8px; }
.core-values-section .value-content .heading { font-size: 15px; padding-bottom: 5px; }
.core-values-section .value-content .heading { font-size: 15px; padding-bottom: 5px; }
.core-values-section .values-title { max-width: 250px; }

.footer { padding: 30px 0; }
.footer .footer-nav { flex-direction: column; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; }
.footer .social-links { gap: 25px; }
.footer .footer_bottom { padding-top: 20px; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .section-title { font-size: 28px; line-height: 36px; padding-bottom: 25px;}
    .section-header { font-size: 16px; padding-bottom: 10px; }
    .section_padding { padding: 60px 0; }

    .header .nav-toggle { display: block; }
    .header .nav-menu { flex-direction: column; gap: 20px; }
    .header .close_side_bar { display: block; position: absolute; right: 20px; top: 20px; }


    .hero-section .hero-section-text { margin-bottom: 20px; }
    .hero-section .main_container { margin-left: auto; }


    .about-section .about-section-text { font-size: 17px; margin-bottom: 25px; line-height: 25px; }
    .about-section .mission-item:first-child { margin-bottom: 15px; }
    .about-section .mission-item { gap: 15px; padding: 15px; }
    .about-section .mission-content h3 { font-size: 17px; line-height: 24px; }


    .objectives-section .objectives-grid { gap: 18px; }
    .objectives-section .objective-item { padding-bottom: 18px; }
    .objectives-section .objective-text { font-size: 17px; line-height: 24px; }
    .core-values-section .values-title { max-width: 350px; }


    .footer .footer-nav { gap: 35px; padding-bottom: 30px; margin-bottom: 30px; }
    .footer .footer-logo { padding-bottom: 25px; }
    .footer .social-links { gap: 35px; }
}