

 <!-- 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">
        <section class="Home-hero" data-aos="fade-up">
    <div class="Home-hero-content">
        <h1>Every detail built with <span>purpose</span>, <br> every space made to <span>last</span>.</h1>
        <a href="/contact" class="button">Contact us</a>
    </div>
</section>

<section class="Home-intro container">
    <div class="Home-intro-large">
        <img data-aos="fade-up" data-aos-duration="500" src="/assets/Michael-1.png" alt="Home">
    </div> 
    <div class="Home-intro-content">
        <h4>Trusted Home Experts</h4>
        <h1>Over 20 years of experience</h1>
        <p>When you work Pearl Service Group, you can expect clear communication, honest timelines, real prices, and work that's done right the first time. We treat your home with the same respect and attention we'd give our own home, because we know that every project we take on isn't just a job, it's part of someone's everyday life.</p>
        <p>With over 20 years of hands-on experience, Pearl Service Group has built a reputation for dependable work and lasting results. From full-scale new home construction to detailed interior upgrades, we offer a wide range of residential services tailored to fit your needs. If it's a kitchen remodel, a roof replacement, or a new addition, you can count on us to deliver a quality service, with work that will last.</p>
    </div>
    <div class="Home-intro-images">
        <img data-aos="fade-left" data-aos-duration="500" src="/assets/Michael-2.png" alt="">
        <img data-aos="fade-left" data-aos-duration="750" src="/assets/Michael-3.png" alt="">
        <img data-aos="fade-left" data-aos-duration="1000" src="/assets/Michael-4.png" alt="">
        <img data-aos="fade-left" data-aos-duration="1250"src="/assets/Michael-5.png" alt="">
    </div>
</section>

<section class="Home-special" >
    <div>
        <h1 data-aos="zoom-out">Need a new roof or siding upgrade? <br> Let's protect your home with style and strength.</h1>
        <h2 data-aos="zoom-out">Ask about our roofing and siding special offers!</h2>
        <a data-aos="zoom-out" href="/contact" class="floating-button">Ask now</a>
    </div>
</section>

<section class="Home-services">
    <div class="Home-services-content">
        <h2>At <span>Pearl Service Group</span>, we offer a full range of residential construction <span>services</span> designed to bring your vision to life. Whether you're building from the ground up or making improvements to your current home, our team delivers trusted craftsmanship every step of the way.</h2>
    </div>
    <div data-aos="flip-up" data-aos-duration="1000" class="Home-services-card">
            <div class="Home-services-card-image-1"></div>
            <div class="Home-services-card-content"> 
                <div>
                    <img src="/assets/Icon-new-addition.png" alt="New addition Icon"><h2>New Construction</h2>
                </div>
                <h4 class="mobile">New Home Construction, Home Additions, Garage Construction & More</h4>
                <p class="desktop">Whether you're building your dream home from the ground up or adding new space for your family, we handle every stage of construction with care and precision. From planning to final walkthrough, we ensure your project is built to last and tailored to your needs.</p>
                <a href="/new-construction" class="button">More info</a>
            </div>
    </div>
    <div data-aos="flip-up" data-aos-duration="1000" class="Home-services-card">
            <div class="Home-services-card-image-2"></div>
            <div class="Home-services-card-content"> 
                <div>
                    <img src="/assets/Icon-kitchen-1.png" alt="Renovation & Remodeling"><h2>Renovation & <br> Remodeling</h2>
                </div>
                <h4 class="mobile">Full Home Renovations, Kitchen & Bathroom Remodeling, Basement Finishing & More</h4>
                <p class="desktop">Transform your existing space into something modern, functional, and beautiful. We specialize in full home renovations, as well as targeted remodels that breathe new life into kitchens, bathrooms, and basements.</p>
                <a href="/renovation-&-remodeling" class="button">More info</a>
            </div>
    </div>
    <div data-aos="flip-up" data-aos-duration="1000" class="Home-services-card">
            <div class="Home-services-card-image-3"></div>
            <div class="Home-services-card-content"> 
                <div>
                    <img src="/assets/Icon-paint-bucket.png" alt="Interior Improvements"><h2>Interior <br> Improvements</h2>
                </div>
                <h4 class="mobile">Painting, Flooring Installation, Cabinet Installation & More</h4>
                <p class="desktop">From flooring to finishes, our interior upgrades enhance both the style and comfort of your home. We handle everything from painting and drywall to custom carpentry and cabinet installation with a focus on quality and detail.</p>
                <a href="/interior-improvements" class="button">More info</a>
            </div>
    </div>
    <div data-aos="flip-up" data-aos-duration="1000" class="Home-services-card">
            <div class="Home-services-card-image-4"></div>
            <div class="Home-services-card-content"> 
                <div>
                    <img src="/assets/Icon-exterior.png" alt="Exterior Improvements"><h2>Exterior <br> Improvements</h2>
                </div>
                <h4 class="mobile">Deck & Patio, Roofing & Siding, Fencing Installation & More</h4>
                <p class="desktop">Whether you're building your dream home from the ground up or adding new space for your family, we handle every stage of construction with care and precision. From planning to final walkthrough, we ensure your project is built to last and tailored to your needs.</p>
                <a href="/exterior-improvements" class="button">More info</a>
            </div>
    </div>
    <div data-aos="flip-up" data-aos-duration="1000" class="Home-services-card">
        <div class="Home-services-card-image-5"></div>
        <div class="Home-services-card-content"> 
            <div>
                <img src="/assets/Icon-utility.png" alt="Specialized Services"><h2>Specialized <br> Services</h2>
            </div>
            <h4 class="mobile">Electric, Plumbing, Mold Removal, HVAC & More</h4>
            <p class="desktop">Behind every beautiful home is solid structural work and efficient utility systems. We offer framing, insulation, and coordination with licensed electricians, plumbers, and HVAC professionals to ensure your project runs smoothly and meets code.</p>
            <a href="/specialized-services" class="button">More info</a>
        </div>
</div>
</section>

<section class="Home-about">
    <div></div>
</section>

<img src="/assets/Koi-logo.png" alt="">

<section class="Home-contact">

    <h4>Contact us</h4>
    <h2>Get in touch!</h2>
  
    <div class="contact-form-holder">
    <div class="contact-info">
        <h2>Contact Information</h2> 
        <div class="contact-info-box">
            <img src="/assets/Phone.png" alt="Phone Icon">
            <a href="tel:+1240-618-7080" class="bold"> 240-618-7080 </a>
        </div>
        <div class="contact-info-box">
            <img src="/assets/Email.png" alt="Phone Icon">
            <a href="mailto:KoiWebDevelopment@gmail.com" class="bold contact-email">Info@pearlservicegroup.com</a>
        </div>  
        <div class="contact-info-box">
            <img src="/assets/Clock.png" alt="Clock"> 
            <span>Sunday - Saturday <br> 24 Hours</span>
        </div>  
        <div class="contact-info-box">
            <img src="/assets/Location.png" alt="Location">
            <span>4041 Powder Mill RD, Suite 310,<br> Beltsville, MD 20705</span>
        </div>
    </div>
  
  
  
    <form action="https://api.web3forms.com/submit" method="POST" class="contact-form" id="form">
        
        <input type="hidden" name="access_key" value="16e60020-8e82-4dc7-b0c4-0c38d88f01c6">
        <div class="contact-title">
            <div>
                <h2>Reach out to us!</h2>
                <hr>
            </div>
            
        </div>
        <input type="text" name="name" placeholder="Your Name" class="contact-inputs" required>
        <input type="email" name="email" placeholder="Your Email" class="contact-inputs" required>
        <input type="tel" name="phone" placeholder="Your Number" class="contact-inputs" required>
        <textarea name="message" placeholder="Your Message" class="contact-inputs contact-message"></textarea>
        <input type="hidden" name="redirect" value="https://web3forms.com/success">
        <div class="button-holder"><button class="submit" type="submit">Submit <img class="submit-img" src="/assets/Arrow-white.png"></button> <img src="/assets/Logo-text.png" class="form-branding" alt="Logo"> </div>
    </form>
    </div>
    
</section>

<img src="/assets/Koi-logo.png" alt="">
    </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>