/* main.css */
      /* main style sheets for turfpro international */ 
      /* Reset default margin and padding */
       body,
       html {
           display:flex;
           flex-direction: column;
           margin: 0;
           padding: 0;
           height: 100vh;
           font-family: Arial, sans-serif;
           background-color: #f4f4f4;
       }

       /* Outer container for the entire page */
       .outer-container {
           display: flex;
           flex-grow: 1;
           overflow-y: auto;
       }

       /* Header styling */
       header {
           width: 100%;
           background-color: #333;
           /* Dark background for the header */
           color: #fff;
           padding: 20px 0;
           height: fit-content;
       }

       /* Navigation menu container */
       .nav-container {
           display: flex;
           justify-content: space-between;
           align-items: baseline;
           padding: 0 10px;
       }

       .logo {
           display: flex;
           justify-items: left;
       }

       .book-cover{
           object-fit: contain;
           aspect-ratio: 2/1;
           align-items: center;
           margin: 20px;
       }

       /* Menu styling */
       .menu {
           display: flex;
           list-style-type: none;
           padding: 0;
           margin: 0;
       }

       .menu li {
           margin: 0 15px;
       }

       .menu li a {
           color: #fff;
           text-decoration: none;
           font-size: 1.2em;
       }

       /* Mobile menu toggle button (hidden by default) */
       .menu-toggle {
           display: none;
           font-size: 2em;
           cursor: pointer;
           color: #fff;
       }

       /* Container with rounded black border */
       .container {
           background-image: url('../imgs/Backone-test.webp');
           background-size: cover;
           background-repeat: repeat;
           justify-content: center;
           width: 100%;
           color: black;
           padding: 20px;
       }

       .content {
           position: relative;
           z-index: 1;
       }

       .cards {
           align-items: stretch;
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(240px, auto));
           grid-gap: 10px;
           margin: 10px auto;
       }

       .card {
           border: 1px solid #0f0f0f;
           border-radius: 8px;
           overflow: hidden;
           text-align: center;
           transition: transform 0.2s;
           margin: 10px;
       }

       p {
        text-align: left;
        margin: 16px; 
       }

       .card-link {
           text-decoration: none;
           color: #333;
       }

       .card-image {
           width: 100%;
           height: auto;
       }

       .card-title {
           margin: 16px 0;
           font-size: 1.2em;
           font-weight: bold;
       }

       .card:hover {
           transform: scale(1.05);
       }

       h1 {
           font-size: 3em;
           margin-bottom: 0.5em;
           align-items: left;
       }

       p {
           font-size: 1.2em;
       }

       footer {
           width: 100%;
           height: 40px;
           text-align: center;
           color:white;
           background-color: #333;
           padding-top: 20px;
           padding-bottom: 10px;
       }

       main {
           flex-grow: 0.9;
           padding-top: 60px;
           padding-bottom: 40px;
           overflow-y: auto;
       }
       section {
           justify-content: center;
           align-items: center;
           text-align: center;
       }

       .logo-img {
            margin: 30px;
       }
       @media (max-width: 768px) {
           .nav-container {
               flex-direction: column;
               align-items: flex-end;
           }

           .menu {
               display: none;
               flex-direction: column;
               width: 100%;
           }

           .menu li {
               margin: 5px 0;
           }

           .menu-toggle {
               display: block;
           }

           .menu.active {
               display: flex;
           }

           .menu li a {
               padding: 20px;
               text-align: left;
               width: 100%;
               display: block;
           }
       }

       @media (max-width: 480px) {
           h1 {
               font-size: 2.5em;
           }

           p {
               font-size: 1em;
           }
       }

       @media (min--mox-device-pixel-ratio: 1.5),
               (-o-min-device-pixel-ratio: 3/2),
               (-webkit-min-device-pixel-ratio: 1.5),
               (min-resolution: 1.5dppx) {
                   html { 
                       background-image: url(../imgs/Backone-test.webp);
                   }
               }