

 <!-- ATTN: Always work from small to big! If you code big things first it will be harder to do media queries-->

 <!-- Use min with and make your mobile first. min width gives breakpoints for bigger size (everything bigger than your min width is affected)-->

 <!-- Use Containers so mobile doesn't touch the edge! -->
  
 <!-- If you need a div to be 100% and bigger than the containers 95%, use width 100% vpw and make a negative margin left = to half of the margin of the container (i.e = 95% width means margin is 2.5% to the left, so -2.5%)-->

 <!-- Use a typography section in your css to select h1, p, unstyled-list, and other tags/classes. This will help you keep consistency throughout the page and reduce repitition, for anything related to the style of text, use typography section in CSS -->

 <!-- It's okay to use multiple classes, don't be scared to do it. For example, if you have a "title" class with fontsize margin fontweight so on, and you have a section where you want to remove the margin, instead of making it a totally different name, keep the "title" class and ontop of that add a "title-service" class which removes the margin. Add this in your typography section -->

 <!-- To select classes that start with the same name, use [class^=(what you want to select)]. As an example, lets say you have classes like col-1, col-2, col-3. If you want to select all your col classes, use [class^=col-] this will select all classes that start with "col-" To select the first or last of classes that start with the same name, use :first-child or :last-child-->

 <!-- Figure tag helps your image stay related with your text (figcaption tag)  -->

 <!-- Give your image display:block to remove the white space at bottom (spaced used to account for text accents, ex the stick on the letter "p")-->

 <!-- REM is root size, EM is size relative to container. (So id your class's font size is 2rem, .5em means half the size of the class size (1rem). For example if you want a title with 2 different sizes you can do h1 with a span class INSIDE of the h1. Display block the span to put it on its own block ) -->

 <!-- DON'T use buttons, instead give an A tag the class of button, give it a boarder and add padding to increase the area of the button (where the user can press to use it). Use "Display: inline-block" -->

<!-- Put media queries at the end of each section. Example: Home-about media querie at the end of Home about css-->

<!-- Give your hero 100 vph at desktop sizes and give the section. Give it a padding top to center the text, for example "padding top 35vph"-->

<!-- Use outline and outline-offset for boarders you can shrink and grow (- offset for shrink, positive offset for grow)-->

<!-- To put text over a box outline use position absolute on the h1, then put the top until the line intersects the letters in the middle (use em for this) then left 50% and transform: trasnlateX(-50%)-->

<!-- Box-shadow: 0 0 3rem(blur) 0(spread) rgba (0 , 0 , 0, .25(transparency) )(color) -->

<!-- Use :last-of-type to select the last element in a list of elements. For example if you have 3 P tags in a row, you can select the last one and remove the bottom border-->

<!-- How to have a grid that changes sizes at different break points: To make a grid responsive, change the item size to "50%" and use a "float" attribute to have the next image snap next to it. If you want to have 3 items in a row make the width "33.333334%" and do the same-->
 
<!-- After you float, you must clearfix so that your text doesn't wrap around the image. use the .clearfix class if you are having issues-->

<!-- transform: translate lets you move items along an axis. x axis and y axis. Use a percentage there. If you want to hide an element until hover, move it off using the y acis (so transform: translateY(150%), then give the item overflow hidden property. On hover, use the same property but this time make it 0%, so the item comes back on screen upon hover. The transition asset allows you to give it a smooth transition-->

<!-- For bigger screens footer: Use "col-" as a tag for all your columns. Float everything to align it well. Columns should have a higher number the bigger you want them to be. so for example if you want 4 columns, 3 which are a list and 1 which is a bigger text area or input area, you can divide the sections into their appropriate sizes. Example: the 3 list all have the col-1 tag, and are divided into 3 sections each being 16.666% wide. The bigger section has a col-3 tag that can be 50% wide. This will give you 100% width and make each column take up the right amount of space. Use a column section for this as it may become useful later in the page. -->

<!-- Look up parallax effect.-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="/styles/style.css">
    <link rel="icon" type="image/x-icon" href="/assets/Favicon.png">
    <title>Pearl Service Group</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    
    <header>

    <div class="mobile container">
    
        <div class="headerMobile">
      
          <img src="/assets/Logo-text-right.png" alt="Logo">
      
          <div id="mySidepanel" class="sidepanel">
              <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
              <a href="/home" class="nav-link">Home</a>
              <a href="/about" class="nav-link">About</a>
              <a href="/services" class="nav-link">Services</a>
              <a href="/reviews" class="nav-link">Reviews</a>
              <a href="/contact" class="nav-link">Contact</a>
          </div>    
          
          <div id="mySidepanel" class="bar-holder openbtn" onclick="openNav()">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
          </div>
      
        </div>
      
    </div>
  
  
    <div class="desktop">
          <header id="headerDesktop"> 
            <div class="headerTop">
              <div>
                <img src="/assets/Email.png" alt="">
                <span>Info@pearlservicegroup.com</span>
              </div>
              <div>
                <img src="/assets/Location.png" alt="">
                <span>4041 POWDER MILL RD, SUITE 310, <br> BELTSVILLE, MD 20705</span>
              </div>
              <div>
                <img src="/assets/License.png" alt="">
                <span>MHIC: 22-2212-3121</span>
              </div>
            </div>
            <div class="headerBot">
              <img src="/assets/Logo-text.png" alt="Logo">
              <nav id="nav">
                  <ul class="unstyled-list">

                      <li>
                        <a href="/home" class="nav-link">Home</a>
                        <div class="underline">
                          <div class="line"></div>
                        </div>
                      </li>

                      <li>
                        <a href="/about" class="nav-link">About</a>
                        <div class="underline">
                          <div class="line"></div>
                        </div>
                      </li>

                      <li>
                        <a href="/services" class="nav-link">Services</a>
                        <div class="underline">
                          <div class="line"></div>
                        </div>
                      </li>

                      <li>
                        <a href="/reviews" class="nav-link">Reviews</a>
                        <div class="underline">
                          <div class="line"></div>
                        </div>
                      </li>

                      <li>
                        <a href="/contact" class="nav-link">Contact</a>
                        <div class="underline">
                          <div class="line"></div>
                        </div>
                      </li>
                  </ul>
              </nav>
              <div class="headerBot3rd">
                <div class="vertical-line"></div>
                <img src="/assets/Phone.png" alt="Phone-Icon">
                <div class="headerBot3rdBox">
                  <span>24/7 Service</span>
                  <span>(240)-618-7080</span>
                </div>
              </div>
            </div>
          </header>
    </div>
      
</header>

    <main id="content">
        <div class="Header-buffer"></div>
<section class="Services-page">
    <h4>Same day availability</h4>
    <h2>Chose your service</h2>
    <div class="Service-card-holder"> 
        <div class="Service-card">
            <img class="Service-card-icon" src="/assets/Icon-new-addition.png" alt="New addition Icon">
            <h2>New Constructions</h2>
            <ul>
                <li>New Home Construction</li>
                <li>Home Additions</li>
                <li>Garage Construction</li>
                <li>Guest House / ADU (Accessory Dwelling Unit) Construction</li>
            </ul>
            <a href="/new-construction" class="button">Full list</a>
        </div>
        <div class="Service-card">
            <img class="Service-card-icon" src="/assets/Icon-kitchen-2.png" alt="Renovation & Remodeling">
            <h2>Renovation & Remodeling</h2>
            <ul>
                <li>Full Home Renovations</li>
                <li>Kitchen Remodeling</li>
                <li>Bathroom Remodeling</li>
                <li>Basement Finishing</li>
                <li>Attic Conversions</li>
                <li>Open-Concept Layout Conversions</li>
            </ul>
            <a href="/renovation-&-remodeling" class="button">Full list</a>
        </div>
        <div class="Service-card">
            <img class="Service-card-icon" src="/assets/Icon-paint-brush.png" alt="Interior Improvements">
            <h2>Interior Improvements</h2>
            <ul>
                <li>Framing & Drywall Repair</li>
                <li>Painting</li>
                <li>Flooring Installation</li>
                <li>Trim & Molding Work</li>
                <li>Cabinet Installation</li>
                <li>Custom Carpentry</li>
            </ul>
            <a href="/interior-improvements" class="button">Full list</a>
        </div>
        <div class="Service-card">
            <img class="Service-card-icon" src="/assets/Icon-exterior.png" alt="Exterior Improvements">
            <h2>Exterior Improvements</h2>
            <ul>
                <li>Landscaping Services</li>
                <li>Deck & Patio Construction</li>
                <li>Siding Installation & Repair</li>
                <li>Roofing Installation & Repair</li>
                <li>Window & Door Replacement</li>
                <li>Fencing Installation</li>
            </ul>
            <a href="/exterior-improvements" class="button">Full list</a>
        </div>
        <div class="Service-card">
             <img class="Service-card-icon" src="/assets/Icon-utility.png" alt="Specialized Services">
             <h2>Specialized Services</h2>
             <ul>
                <li>Mold Remediation</li>
                <li>Foundation Repair</li>   
                <li>HVAC Services</li>
                <li>Insulation Installation</li>
                <li>Electrical Work</li>
                <li>Plumbing Services</li>
             
            </ul>
             <a href="/specialized-services" class="button">Full list</a>
        </div>

    </div>
    <h2>Don't see the service you need?</h2>
    <a href="/contact" class="button">Contact us</a>
</section>
    </main>

    <footer>
    <div class="footer-top">
        <span class="footer-branding col-3">
            <img src="/assets/Logo-text-right-transparent.png" alt="Logo">
            <div>From vision to reality, we turn your ideas into something lasting and beautiful, <span>just like a pearl.</span></div>
        </span>
        <span class="footer-nav col-1">
            <span>Our Site</span>
            <span><a href="/home">Home</a></span>
            <span><a href="/about">About</a></span>
            <span><a href="/services">Services</a></span> 
            <span><a href="/reviews">Reviews</a></span>
            <span><a href="/contact">Contact</a></span>
        </span>
        <span class="footer-nav col-1">
            <span>Connect with us</span>
            <span>Google</span>
            <span>Facebook</span>
            <span>Instagram</span>
            <span>Thumbtack</span>
            <span>Yelp</span>
        </span>
        <span class="footer-nav col-2">
            <span>Get in touch</span>
            <span><img src="/assets/Phone.png" alt="Phone"> 240-618-7080 </span>
            <span><img src="/assets/Email.png" alt="Email"> Info@pearlservicegroup.com</span>
            <span><img src="/assets/Location.png" alt="Location"> 4041 Powder Mill RD, Suite 310, Beltsville, MD 20705</span>
            <span><img src="/assets/Clock.png" alt="Clock"> Sunday-Saturday: 24 hours</span>
        </span>
    </div>
    <div class="footer-bot">
        <p>Pear Service Group Inc. © 2025</p>
        <p>|</p>
        <p>All Rights Reserved</p>
    </div>
</footer>




<div class="Koi-tag"> Designed and built by <a href="https://www.Koiwebdevelopment.com/"><img class="Koi-logo" src="./assets/Koi-logo.png" alt="Cute Cat logo"><img class="Koi-logo" src="/assets/Koi-text.png" alt=""></a></div>
    
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="script.js"></script>
</body>
</html>