<!-- Local Poppins font -->
<style>
  @font-face {
    font-family: 'LocalPoppins';
    src: url('fonts/Poppins-Regular.woff2') format('woff2'),
         url('fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'LocalPoppins';
    src: url('fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }
</style>

<!-- Section -->
<div class="modern-panel">
  <p>
    WP9 Task 2 provides software review services designed to help Gร‰ANT development teams enhance the security, quality, and compliance of their code. Our mission is to make software more robust against threats, improve code maintainability, and ensure adherence to the Gร‰ANT software IPR policy.
  </p>

  <div class="review-container">
    <!-- Card 1 -->
    <div class="review-card review-blue">
      <a href="https://wiki.geant.org/spaces/GSD/pages/1038811294/SonarQube+Setup+Assistance">
        <div class="emoji">๐Ÿง‘โ€๐Ÿ’ป</div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <h4>SonarQube Setup<br>Assistance</h4>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <p>How to configure SonarQube<br>for automated code analysis</p>
        <div class="spacer"></div>
      </a>
    </div>

    <!-- Card 2 -->
    <div class="review-card review-green">
      <a href="https://wiki.geant.org/spaces/GSD/pages/1038811297/Source+Code+Review">
        <div class="emoji">๐Ÿ”</div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <h4>Source Code<br>Review</h4>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <p>In-depth manual code review<br>by experts</p>
        <div class="spacer"></div>
      </a>
    </div>

    <!-- Card 3 -->
    <div class="review-card review-orange">
      <a href="https://wiki.geant.org/spaces/GSD/pages/1038811290/Software+Composition+Analysis">
        <div class="emoji">๐Ÿงฉ</div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <h4>Software Composition<br>Analysis</h4>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <p>Reviewing external software<br>components and their licenses</p>
        <div class="spacer"></div>
      </a>
    </div>

    <!-- Card 4 -->
    <div class="review-card review-purple">
      <a href="https://wiki.geant.org/spaces/GSD/pages/1038811292/Software+Licence+Analysis">
        <div class="emoji">๐Ÿ…</div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <h4>Software Licence<br>Analysis</h4>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <p>Ensuring compliance with<br>software licensing requirements</p>
        <div class="spacer"></div>
      </a>
    </div>
  </div>
</div>

<!-- Styles -->
<style>
  html, body {
    margin: 0;
    padding: 0;
  }

  .modern-panel {
    font-family: 'LocalPoppins', sans-serif;
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 3%;
    width: 100%;
    margin: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    text-align: center;
  }

  .modern-panel h2 {
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 600;
    color: #2C3E50;
    margin: 0 0 20px 0;
  }

  .modern-panel p {
    font-size: clamp(16px, 2.5vw, 18px);
    color: #7F8C8D;
    margin: 0 0 30px 0;
    line-height: 1.6;
  }

  .review-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .review-card {
    flex: 1 1 220px;
    max-width: 260px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }

  .review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  .review-card a {
    text-decoration: none;
    color: #2C3E50;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .review-card .emoji {
    font-size: 48px;
    margin-bottom: 0;
  }

  .spacer {
    height: 20px;
  }

  .review-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    min-height: 48px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .review-card p {
    font-size: 17px;
    margin: 0;
    line-height: 1.5;
    color: #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .review-blue { border-color: rgba(41, 128, 185, 0.7); background-color: #eaf3fa; }
  .review-green { border-color: rgba(39, 174, 96, 0.7); background-color: #e8f6ef; }
  .review-orange { border-color: rgba(243, 156, 18, 0.7); background-color: #fef5e6; }
  .review-purple { border-color: rgba(142, 68, 173, 0.7); background-color: #f5ebfa; }

  @media (max-width: 480px) {
    .review-card {
      flex: 1 1 100%;
      max-width: 100%;
    }

    .modern-panel {
      padding: 30px 16px;
    }

    .review-card h4 {
      font-size: 18px;
    }

    .review-card p {
      font-size: 16px;
    }

    .review-card .emoji {
      font-size: 40px;
    }
  }
</style>
<!-- Local Poppins font -->
<style>
  @font-face {
    font-family: 'LocalPoppins';
    src: url('fonts/Poppins-Regular.woff2') format('woff2'),
         url('fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'LocalPoppins';
    src: url('fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }
</style>

<!-- Section -->
<div class="modern-language-panel">
  <h2>Our team of experts has extensive experience in the following programming languages:</h2>

  <div class="language-grid">
    <div class="language-card">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java">
      <span>Java</span>
    </div>
    <div class="language-card">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" alt="C#">
      <span>C#</span>
    </div>
    <div class="language-card">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="SQL">
      <span>SQL</span>
    </div>
    <div class="language-card">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP">
      <span>PHP</span>
    </div>
    <div class="language-card">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript">
      <span>JavaScript</span>
    </div>
    <div class="language-card">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python">
      <span>Python</span>
    </div>
  </div>

  <div class="language-footer">
    ๐Ÿ“Œ If your project uses a different technology, feel free to reach out. We will assist in finding the best solution for your needs.
ย  </div>
</div>

<!-- Style -->
<style>
  .modern-language-panel {
    font-family: 'LocalPoppins', sans-serif;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 40px 3%;
    width: 100%;
    margin: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    text-align: center;
  }

  .modern-language-panel h2 {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 600;
    color: #2C3E50;
    margin: 0 0 30px 0;
  }

  .language-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .language-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    background: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }

  .language-card:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  }

  .language-card img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    object-fit: contain;
  }

  .language-card span {
    font-size: 17px;
    font-weight: 600;
    color: #2C3E50;
  }

  .language-footer {
    font-family: 'LocalPoppins', sans-serif;
    font-size: clamp(16px, 2.5vw, 18px);
    color: #555;
    margin-top: 30px;
    line-height: 1.6;
  }

  .language-footer a {
    color: #007bff;
    text-decoration: underline;
  }

  @media (max-width: 480px) {
    .modern-language-panel {
      padding: 30px 16px;
    }

    .language-card {
      width: 100px;
      height: 100px;
    }

    .language-card img {
      width: 45px;
      height: 45px;
    }

    .language-card span {
      font-size: 14px;
    }

    .language-footer {
      font-size: 15px;
    }
  }
</style>
<div class="modern-benefits-panel">
  <h2>๐ŸŒŸ What Are the Benefits?</h2>
  <div class="cards-wrapper">
    <div class="cards-grid">
      <div class="card">
        <div class="emoji">๐ŸŽฏ</div>
        <h3>Fit for purpose</h3>
        <p>๐Ÿ”ฅ Optimal solution for your needs is guaranteed</p>
      </div>
      <div class="card">
        <div class="emoji">๐Ÿ”</div>
        <h3>Detailed Inspections</h3>
        <p>๐Ÿ”ฅ Dynamic + Static Analysis + Penetration Testing</p>
      </div>
      <div class="card">
        <div class="emoji">๐Ÿ‘จโ€๐Ÿ’ป</div>
        <h3>Expert Support</h3>
        <p>๐Ÿ”ฅ Direct collaboration with security experts</p>
      </div>
      <div class="card">
        <div class="emoji">๐Ÿ“„</div>
        <h3>Detailed Reports</h3>
        <p>๐Ÿ”ฅ Comprehensive results with concrete recommendations</p>
      </div>
      <div class="card">
        <div class="emoji">๐Ÿ› ๏ธ</div>
        <h3>Advanced Tools</h3>
        <p>๐Ÿ”ฅ We use SQ, Mend, and other tools for issue detection</p>
      </div>
      <div class="card">
        <div class="emoji">๐Ÿ”</div>
        <h3>Enhanced Security</h3>
        <p>๐Ÿ”ฅ Risk reduction and increased software stability</p>
      </div>
    </div>
  </div>
</div>

<style>
  @font-face {
    font-family: 'Poppins';
    src: url('https://yourdomain.com/fonts/Poppins-Regular.woff2') format('woff2'),
         url('https://yourdomain.com/fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Poppins';
    src: url('https://yourdomain.com/fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('https://yourdomain.com/fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }

  .modern-benefits-panel {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    margin: 0;
    padding: 40px 3%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    text-align: center;
  }

  .modern-benefits-panel h2 {
    margin: 0 0 30px 0;
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 600;
    color: #2C3E50;
  }

  .cards-wrapper {
    max-width: 900px;
    margin: 0 auto;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .card {
    background: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
  }

  .card .emoji {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .card h3 {
    font-size: 18px;
    margin: 0;
    color: #2C3E50;
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }

  .card p {
    font-size: 16px;
    color: #555;
    margin-top: 6px;
    line-height: 1.4;
  }

  @media (max-width: 900px) {
    .cards-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .cards-grid {
      grid-template-columns: 1fr;
    }

    .modern-benefits-panel {
      padding: 30px 16px;
    }
  }
</style>
<div class="modern-related-panel">
  <h2>๐Ÿ”— Related Materials</h2>

  <div class="resource-container">
    <div class="resource-item">
      <div class="text">
        <h4>Gร‰ANT eAcademy, Course: Security Testing and Quality Assurance (2024)</h4>
      </div>
      <a href="https://e-academy.geant.org/moodle/course/view.php?id=628" target="_blank">
        <button class="btn">Open Course</button>
      </a>
    </div>

    <div class="resource-item">
      <div class="text">
        <h4>SonarQube Infoshare, recording and slides (2024)</h4>
      </div>
      <a href="https://geant.app.box.com/s/cvm25uhztfmvpc2wnn3kpqqnrw51nz24" target="_blank">
        <button class="btn">View InfoShare</button>
      </a>
    </div>

    <div class="resource-item">
      <div class="text">
        <h4>Webinar: License Analysis with WhiteSource (2022)</h4>
      </div>
      <a href="https://geant.app.box.com/s/a5103pww8hpby60y5vmsk2rwn0qjq347" target="_blank">
        <button class="btn">Watch Webinar</button>
      </a>
    </div>
  </div>
</div>

<style>
  @font-face {
    font-family: 'Poppins';
    src: url('https://yourdomain.com/fonts/Poppins-Regular.woff2') format('woff2'),
         url('https://yourdomain.com/fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Poppins';
    src: url('https://yourdomain.com/fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('https://yourdomain.com/fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }

  .modern-related-panel {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    margin: 0;
    padding: 40px 3%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    text-align: center;
  }

  .modern-related-panel h2 {
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 600;
    color: #2C3E50;
    margin: 0 0 30px 0;
  }

  .resource-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    text-align: left;
    flex-wrap: wrap;
  }

  .resource-item .text {
    flex-grow: 1;
  }

  .resource-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2C3E50;
    margin: 0;
    line-height: 1.4;
  }

  .btn {
    padding: 10px 20px;
    background-color: #2e8b57;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: 180px;
    text-align: center;
    transition: background-color 0.3s ease;
  }

  .btn:hover {
    background-color: #1e6b41;
  }

  @media (max-width: 600px) {
    .resource-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .btn {
      width: 100%;
    }
  }
</style>
<!-- Local font Poppins -->
<style>
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.woff2') format('woff2'),
         url('fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.woff2') format('woff2'),
         url('fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }
</style>

<!-- Section -->
<div class="stats-panel">
  <div class="stats-inner">
    <h2>๐ŸŒŸ Statistics</h2>

    <div class="stats-container">
      <div class="stats-card">
        <div class="stats-icon">๐Ÿ“Š</div>
        <div class="stats-info">
          <h4>Years of Experience</h4>
          <p class="stats-number">+14 years</p>
        </div>
      </div>

      <div class="stats-card">
        <div class="stats-icon">๐Ÿž</div>
        <div class="stats-info">
          <h4>Detected Bugs (Manual)</h4>
          <p class="stats-number">+700</p>
        </div>
      </div>

      <div class="stats-card">
        <div class="stats-icon">
          <img src="https://wiki.geant.org/download/attachments/1045004320/sonarqube.svg?api=v2" alt="SonarQube Logo" class="stats-logo">
        </div>
        <div class="stats-info">
          <h4>Detected Bugs (Automatic)</h4>
          <p class="stats-number">+10,000</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Style -->
<style>
  .stats-panel {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-radius: 0;
    padding: 40px 0;
    box-sizing: border-box;
  }

  .stats-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    box-sizing: border-box;
    text-align: center;
  }

  .stats-inner h2 {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 40px;
  }

  .stats-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap; /* omogucava wrap na manjim ekranima */
  }

  .stats-card {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 25px 20px;
    flex: 1 1 250px; /* fleksibilna ลกirina */
    max-width: 400px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
  }

  .stats-card:hover {
    transform: translateY(-5px);
  }

  .stats-icon {
    font-size: 48px;
    color: #27ae60;
    margin-bottom: 15px;
  }

  .stats-icon img.stats-logo {
    width: 140px;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
  }

  .stats-info h4 {
    font-size: 18px;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 8px;
  }

  .stats-number {
    font-size: 28px;
    font-weight: 700;
    color: #27ae60;
    margin: 0;
  }

  /* Responsive adjustments */
  @media (max-width: 1024px) {
    .stats-container {
      gap: 20px;
    }
  }

  @media (max-width: 768px) {
    .stats-container {
      flex-direction: column;
      gap: 20px;
    }

    .stats-card {
      max-width: 100%;
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .stats-inner h2 {
      font-size: clamp(20px, 5vw, 28px);
      margin-bottom: 30px;
    }

    .stats-number {
      font-size: 24px;
    }

    .stats-info h4 {
      font-size: 16px;
    }
  }
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Section Safe</title>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">

<style>
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2'),
       url('fonts/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.woff2') format('woff2'),
       url('fonts/Poppins-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

/* === Kontakt sekcija === */
.contact-full-panel {
  font-family: 'Poppins', sans-serif;
  width: 100%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  padding: 40px 0;
  box-sizing: border-box;
  color: #2c3e50;
}

.contact-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-heading {
  text-align: center;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.contact-heading span {
  font-size: inherit;
}

.contact-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.contact-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  border: 1px solid #d9dce6;
  flex: 1 1 300px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.contact-icon {
  font-size: 48px;
  color: #277a3c;
  margin: 16px 0;
}

.contact-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #277a3c;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.spacer {
  height: 12px;
}

.contact-description {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 24px;
  line-height: 1.5;
}

.contact-links {
  display: flex;
  flex-direction: column; /* uvek jedan ispod drugog */
  gap: 12px;
  width: 100%;
  align-items: center;
}

.contact-links a {
  text-decoration: none;
  font-weight: 600;
  color: #277a3c;
  background-color: transparent;
  border: 2px solid #277a3c;
  padding: 10px 16px;
  border-radius: 16px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  font-size: 1em;
  white-space: nowrap;
  width: 90%;          /* manja duลพina da ne prelaye */
  max-width: 320px;    /* kontrola maksimalne ลกirine */
  box-sizing: border-box;
}

.contact-links a:hover {
  background-color: #388e3c;
  color: white;
  box-shadow: 0 8px 28px rgba(56, 142, 60, 0.6);
  cursor: pointer;
  transform: scale(1.02);
}

.contact-footer {
  text-align: center;
  margin-top: 40px;
  font-size: 16px;
  color: #2c3e50;
  max-width: 600px;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-card { max-width: 100%; }
  .contact-links a { width: 95%; max-width: 280px; font-size: 0.95em; }
}
</style>
</head>
<body>

<div class="contact-full-panel">
  <div class="contact-inner">
    <div class="contact-heading"> ๐Ÿ“ฉ LET'S CONNECT! <span> CONTACT US</span> </div>
    
    <div class="contact-grid">
      <div class="contact-card">
        <h3>REQUEST A CODE REVIEW</h3>
        <div class="contact-icon"><i class="fas fa-envelope"></i></div>
        <p class="contact-description">All inquiries related to code review requests</p>
        <div class="contact-links">
          <a href="mailto:codereviews@software.geant.org">codereviews@software.geant.org</a>
          <a href="https://jira.software.geant.org/servicedesk/customer/portal/2/group/20">Help Desk</a>
        </div>
      </div>
    </div>

    <p class="contact-footer">
      For further information or inquiries, feel free to contact us via the provided emails.
    </p>
  </div>
</div>

</body>
</html>


ยฉ April 2025 Test and Analysis Team Gร‰ANT