body {
  font-family:"Avenir LT Pro",sans-serif;
  background:black; 
  gap:0px;
 
}
html, body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}


/*Media Queries*/
/* 1. Mobile (Default) */
/* No media query needed. Base styles go here. */

/* 2. Tablets (Portrait) */
@media screen and (min-width: 600px) {
  
  /* Adjust layouts for larger mobile screens or small tablets */
}

/* 3. Tablets (Landscape) / Small Laptops */
@media screen and (min-width: 768px) {
    body {
    max-width: 600px;
    margin: 0 auto;
  }
  /* Multi-column layouts often start here */
}

/* 4. Standard Laptops / Desktops */
@media screen and (min-width: 992px) {
    body {
    max-width: 700px;
    margin: 0 auto;
  }
  /* Sidebar-heavy layouts or large hero sections */
}

/* 5. Large Screens / Ultra-wide Monitors */
@media screen and (min-width: 1200px) {
  body {
    max-width: 800px;
    margin: 0 auto;}
  /* Max-width constraints to prevent content stretching */
}
/*Global Styles*/




    /* Grid Layout for Header, Content, and Footer */
    .header {
      grid-area: hd;
    }
    .footer {
      grid-area: ft;
    }
    .content {
      grid-area: main;
    }
   

  .wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd   hd   hd   hd   hd   hd   hd   hd   hd"
      "main main main main main main main main main"
      "ft   ft   ft   ft   ft   ft   ft   ft   ft";
    width: 100%;
    
  }






/*Header and Content Grid Styles*/




      header { /* Grid and Background styles for header */

        display: grid;
        grid-template-columns: repeat(1fr 1fr 1fr);
        grid-auto-rows: minmax(200px, auto);
        
        background-image: url('../images/foregrounds/block-weathered.png');
        background-color: #403601;
        background-size: cover; /* Ensures image covers the whole area */
        background-position: center;

        
      }

          .header-content { /*font styles for header*/

            z-index: 11; /* Ensures it stays on top of the header background */
            max-width: 50%;
            height: auto;

            
          
          }


         
          nav {
            display: inline-block;
            position:relative;

          }



/*Hero Section Styles*/

      .hero-body { 
        position: relative;
        background: 
            url('../images/foregrounds/block-rabbit.png') center,
            linear-gradient(to right, #1b2128 90%, #cccccc);
        background-size: cover; /* Ensures image covers the whole area */
        border: #bfbe53 3px solid;
        height: auto; /* Required if the header has no content */
        min-height: fit-content; /* Allows it to grow if needed */
        
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
        gap: 0; /* Remove default gap */
      
        display: grid;
        grid-template-columns: repeat(1fr 1fr 1fr);
      }
        


      .hero-body img {
      
        position: absolute;     /* Required: Allows movement over the image */
        bottom: 0%;               /* Vertical position (% from top) */
        right: -10% ;            /* Horizontal position (% from left) */
        max-width:70%; 
        height:auto; 
        /* Cosmetic Styling */
        padding:0; 
        margin:0;
        border: none;
        z-index: 10;            /* Ensures it stays on top */

      }




a {
  font-family: "avenir-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*Button Styles*/



    /*Dropdown Menu Styles*/

          .dropdown {
            position: relative;
            top: 5%;               /* Vertical position (5% from top) */
            right: 0% ;            /* Horizontal position (0% from left) */
            z-index: 11;            /* Ensures it stays on top */
          }

          /* Style the dropdown button */
          .dropbtn {
            background-color: transparent;
            border: none;
            cursor: pointer;
            position: absolute;     /* Required: Allows movement over the image */
            top: 5%;               /* Vertical position (5% from top) */
            right: 0% ;            /* Horizontal position (0% from left) */
          }

          /* Dropdown content */
          .dropdown-content {
            display: none;
            position: absolute;
            background-color: #403601;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            right: 0; /* Aligns dropdown to the right of the button */
          }

          /* Links inside dropdown content */
          .dropdown-content a {
            color: #fbfaec;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
          
          }

          /* Change color of dropdown links on hover */
         
              .dropdown-content a:hover {
              background-color: #bfbe53;
              color: #61201a;
              }
           

           /* Show the dropdown content on hover */
          
              .dropdown:hover .dropdown-content {
              display: block;
              }
           
           
          /* Change background color of dropdown button on hover */
          
              .dropdown:hover .dropbtn {
              background-color: #403601;
             }
           

      /*nav button styles*/

            .home-button {
              position: absolute;     /* Required: Allows movement over the image */
              top: 0%;               /* Vertical position (5% from top) */
              left: 0% ;            /* Horizontal position (0% from left) */
              /* Cosmetic Styling */
              padding: 0px 0px;
              border: none;
              cursor: pointer;
              z-index: 10;            /* Ensures it stays on top */
            }

            .nav-button-left {
              position: absolute;     /* Required: Allows movement over the image */
              top: 0%;               /* Vertical position (5% from top) */
              left: 0% ;            /* Horizontal position (0% from left) */
              /* Cosmetic Styling */
              
              padding: 10px 20px;
              border: none;
              cursor: pointer;
              z-index: 10;            /* Ensures it stays on top */
            }


            .nav-button-right {
              position: relative;     /* Required: Allows movement over the image */
              max-width:25%; 
              height:auto; 
              /* Cosmetic Styling */
              padding: 10px 20px;
              border: none;
              cursor: pointer;
              z-index: 10;            /* Ensures it stays on top */
            }

            .contact-button {
              width: 100%;
              
            }

            .highlight { 
              background: hsl(205, 90%, 60%); }



/*Containers and Overlays*/

          .container {
          position: relative; /* Anchor for the absolute button */
          width: 100%;        /* Match image width */
          height: auto;       /* Match image height */
          margin: -50px 0px -50px 0px; /* Adjusts spacing between banner and content */
          
        }

        .overlay-btn-right {
          width: 30%;
          position: absolute;
          top: 15%;           /* Distance from top */
          right: 5%;          /* Distance from left */
          z-index: 10;        /* Ensures button stays on top */
        }

        .overlay-btn-left {
          width: 30%;
          position: absolute;
          top: 15%;           /* Distance from top */
          left: 5%;          /* Distance from left */
          z-index: 10;        /* Ensures button stays on top */
        }
        
        
      
      

 


/*Image Styles*/

        img.responsive {
          max-width:100%; 
          height:auto; 

        }

        img.responsive2 {
          max-width:50%; 
          height:auto;
        
        }


        img.full-size {
          display: flex;
          flex-direction: column;
          padding-top: 5px;
          padding-bottom: 5px; /* Adds space below the image */
          margin: 0px auto;
          width: 75%;
          height: auto; 
        }


        img.reduced-size {
          display: flex;
          flex-direction: column;
          padding-top: 0px;
          padding-bottom: 20px; /* Adds space below the image */
          margin: 0px auto;
          height: auto; /* Replaces any fixed pixel values */
          width: 100px;
          min-height: fit-content; /* Allows it to grow if needed */
          
          z-index: 11; /* Ensures it stays on top of the card background */
        }


        .image-container {
          position: relative;     /* Required: Parent must be relative */
          display: grid;  /* Keeps container the same size as the image */
        }

        .image-container img {
          display: grid;         /* Removes extra bottom spacing */
          width: 100%;            /* Makes it responsive */
          height: auto;
        }


/*Overlay Elements*/



        .overlay-image-right {
          position: absolute;     /* Required: Allows movement over the image */
          bottom: -2%;               /* Vertical position (% from top) */
          right: -10% ;            /* Horizontal position (% from left) */
          max-width:70%; 
          height:auto; 
          /* Cosmetic Styling */
          padding: 10px 20px;
          border: none;
          z-index: 10;            /* Ensures it stays on top */
        }











  



     
/*Headings*/


      h1 {
            padding: 25px 100px 25px 25px; 

            color: #fbfaec;
            text-align: center;
            font-family: "powell", sans-serif;
            font-weight: 400;
            font-style: regular;
            font-size: 2em;
            -webkit-text-stroke: .4px black; /* width and color */
                }

      h2 {
        font-size: 1.5em;      
        
        margin-top:0;
            }

            .h-cream {
              padding: 25px 100px 25px 25px; 
              margin-top:0;
              fill:#fbfaec;
              -webkit-text-stroke: .2px black; /* width and color */
            }

            .h-black {
              padding: 25px 100px 25px 25px; 
              margin-top:0;
              color:#1b2128;
            }




/*Articles*/
      article {
  
            background:#fbfaec; 
            margin:0px;
            padding:0px;
            gap:0px;

            font-family: "avenir-lt-pro", sans-serif;
            font-weight: 400;
            font-style: normal;
          }



          /*Card Styles*/

                          .card-cream {
                            position: relative;
                            display:flex;
                            flex-direction: column;
                            background:#fbfaec; 
                        
                            margin:0px 0px;
                            padding:50px 0px; 
                            height: auto; /* Replaces any fixed pixel values */
                            min-height: fit-content; /* Allows it to grow if needed */
                            
                          } 

                          .card-blue {
                            position: relative;
                            display:flex;
                            flex-direction: column;
                            background:linear-gradient(to right, #231f20, #3c4959);
                            margin:0px 0px 0px 0px;
                            padding:50px 0px; 
                            height: auto; /* Replaces any fixed pixel values */
                            min-height: fit-content; /* Allows it to grow if needed */
                            
                          } 

                          .card-red {
                            position: relative;
                            display:flex;
                            flex-direction: column;
                            background:linear-gradient(to right, #231f20, #61201a);
                            margin:-25px 0px ;
                            padding:50px 0px; 
                            height: auto; /* Replaces any fixed pixel values */
                            min-height: fit-content; /* Allows it to grow if needed */
                            
                          } 

                          .card-green {
                            position: relative;
                            display:flex;
                            flex-direction: column;
                            background:linear-gradient(to right, #403601,#231f20);
                            border:#bfbe53 3px solid;
                            margin:0px 0px ;
                            padding:100px 0px; 
                            height: auto; /* Replaces any fixed pixel values */
                            min-height: fit-content; /* Allows it to grow if needed */
                            
                          } 

                          .card-yellow {
                            position: relative;
                            display:flex;
                            flex-direction: column;
                            background: #bfbe53;
                            border:#61201a 4px solid;
                            margin:0px;
                            padding:0px; 
                            width: 100%;
                            height: auto; /* Replaces any fixed pixel values */
                            min-height: fit-content; /* Allows it to grow if needed */
                          }

                          .card-banner-blue {
                            
                            display: flex;
                            flex: 0  0 auto; /* Prevents the banner from growing or shrinking */
                            width: 100%; /* Makes it full width of the card */
                            height: auto; /* Replaces any fixed pixel values */
                            padding: 0rem; /* Keeps padding so text doesn't touch the borders */
                            background:#fbfaec;  
                            margin-top: 30px; /* Adjusts spacing between banner and content */
                            margin-bottom: 50px; /* Adjusts spacing between banner and content */
                            gap: 0; /* Remove default gap */
                            background: #fbfaec;
                            z-index: 10; /* Ensures it stays on top of the card background */
                          }
                          .card-banner-red {
                            display: flex;
                            flex: 0  0 auto; /* Prevents the banner from growing or shrinking */
                            width: 100%; /* Makes it full width of the card */
                            height: auto; /* Replaces any fixed pixel values */
                            padding: 0rem; /* Keeps padding so text doesn't touch the borders */
                            background:#fbfaec;  
                            margin-top: 30px; /* Adjusts spacing between banner and content */
                            margin-bottom: 50px; /* Adjusts spacing between banner and content */
                            gap: 0; /* Remove default gap */
                            background:linear-gradient(to right, #403601,#231f20);
                            z-index: 10; /* Ensures it stays on top of the card background */
                          }
                          .card-banner-green {
                            display: flex;
                            flex: 0  0 auto; /* Prevents the banner from growing or shrinking */
                            position: relative;
                            width: 100%; /* Makes it full width of the card */
                            height: auto; /* Replaces any fixed pixel values */
                            padding: 0rem; /* Keeps padding so text doesn't touch the borders */ 
                            margin-top: 30px; /* Adjusts spacing between banner and content */
                            margin-bottom: -100px; /* Adjusts spacing between banner and content */
                            gap: 0; /* Remove default gap */

                            background:linear-gradient(to bottom, #fbfaec, #403601);
                            z-index: 10; /* Ensures it stays on top of the card background */
                          }







/*Paragraphs*/

      p {
      
        font-family: "avenir-lt-pro", sans-serif;
        font-weight: 400;
        font-style: normal;

        text-align: center;
      }

              p.motto {
                padding: 25px 100px 25px 25px; 
                color: #fbfaec;
                text-align: center;
                font-family: "powell", sans-serif;
                font-weight: 400;
                font-style: italic;
                font-size: 1.5em;
                -webkit-text-stroke: .4px black; /* width and color */
                
              }
              .p-black {
                padding: 50px 100px 50px 100px;      
                margin-left: 5px;
                margin-top: 0; /* Removes default top margin */
                height: auto; /* Replaces any fixed pixel values */
              
              }

              .p-cream {
                padding: 50px 100px 50px 100px;   
                margin-left: 5px;
                margin-top: 0; /* Removes default top margin */
                flex: 1; /* Allows it to grow and shrink */
                height: auto; /* Replaces any fixed pixel values */
                color:#fbfaec
                

              }

/*Lists*/

        ul {
          list-style-type: none; /* Removes default bullet points */
          padding: 50px 100px 50px 25px; 
          
          margin-left: 5px;
          margin-top: 0; /* Removes default top margin */  
        }


            .services-list {
              margin-top: 20px; /* Adds space above the list */
              z-index: 10; /* Ensures it stays on top of the image */
            }


            li {
              padding: 5px 0; /* Adds vertical padding to list items */
              font-family: "powell", sans-serif;
              font-weight: 400;
              font-style: normal;
              font-size: 1em;
              color: #fbfaec;
              -webkit-text-stroke: .2px black; /* width and color */
              width: 40%;
            }




/*Footer Styles*/

         .contact-button {
              display: grid;       
              position: relative;    
              margin: 0 auto;        /* Centers the button horizontally */
              padding: 100px 0px; /* Adds space above and below the button */
              
              width: 30%;
              z-index: 11;        /* Ensures button stays on top */
          }

        footer {
          display: grid;

          width: 100%;
        
          grid-auto-rows: minmax(200px, auto);
          box-sizing: border-box;

          background: linear-gradient(to bottom, #403601, #231f20 75%);
          color: #fbfaec;
          
          }

         /* footer .footer-content { font styles for footer
                
                justify-content: space-between;
                align-items: center;
                
                margin: 0 auto;
                padding: 50px 0px 0px 0px;
               
          }*/
          footer .copyright {
                font-family: "avenir-lt-pro", sans-serif;
                font-weight: 400;
                font-style: regular;
                font-size: 1em;
                padding: 0 25px;
                 color: #403601;
              }

                    .social-icons {
                        display: flex;
                        gap: 20px; /* Adjust spacing between icons */
                        padding: 25px;
                    }

                    .social-icons a {
                        color: #333; /* Icon Color */
                        font-size: 24px; /* Icon Size */
                        transition: color 0.3s ease;
                    }

                    .social-icons a:hover {
                        color: #007bff; /* Accent color on hover */
                    }