<!doctype html>
<html lang="{{ site:short_locale }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TEXT4U</title>
        {{ vite src="resources/js/site.js|resources/css/site.css" }}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" defer></script>
        <style>
            .trapezium-nav-end {
                clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
            }

            .trapezium-nav {
                clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
            }

            .trapezium-hero {
                clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
            }

            .trapezium-hero p{
                font-size: 22px;
            }

            .trapezium {
                clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
            }

            .hero-main-text{
                font-size: 76px;
            }

            .font-50{
                font-size: 50px;
            }

            .font-37{
                font-size: 37px;
            }

            .font-21{
                font-size: 21px;
            }

            .font-18{
                font-size: 18px;
            }

            .font-16{
                font-size: 16px;
            }

            .form-container {
              padding: 20px;
              border-radius: 8px;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
            .form-container h4 {
              margin-bottom: 20px;
              text-align: start;
            }
            .form-group {
              margin-bottom: 15px;
            }
            .form-group label {
              display: block;
              margin-bottom: 5px;
              font-weight: bolder;
            }
            .form-group input {
              width: 100%;
              padding: 10px;
              border: 1px solid #ccc;
              border-radius: 0; /* Perfect rectangle */
              background-color: #f1eddf; /* Lighter version of #DED7C4 */
              font-size: 16px;
              box-sizing: border-box;
            }
            .form-group input:focus {
              border-color: #aaa;
              outline: none;
            }
            .submit-btn {
              width: 100%;
              padding: 10px;
              background-color: #333;
              color: #fff;
              border: none;
              cursor: pointer;
              font-size: 16px;
            }
            .submit-btn:hover {
              background-color: #555;
            }

            .footer-nav ul {
                list-style-type: none; /* Remove bullets */
                padding: 0;
                margin: 0;
            }

            .footer-nav ul li {
                margin-bottom: 18px /* Add some spacing between items */
            }

            .footer-nav ul li a {
                text-decoration: none; /* Remove underline */
                color: #000; /* Default link color */
            }

            .footer-nav ul li a:hover {
                color: #396868; /* Change color on hover */
            }

            .nav-item{
                background-color: white;
            }

            .nav-item.active{
                background-color: rgba(0, 0, 0, 0.2) !important;
            }

            .nav-item a{
                color: #000 !important;
            }

            .nav-item.active a{
                color: #159B9B !important;
                background-color: #fff;
            }




        </style>
    </head>
    <body class="bg-white text-dark">
        <div class="container-fluid p-0">
            {{ template_content }}
        </div>
    </body>
</html>
