/* =========================================================
   Responsive scaling: 768px (tablet layout reference) up to 1920px
   ========================================================= */

    @media (min-width: 768px) {


        .container{
            width: 768px;
            margin: 0 auto;
        }

        .site-header .logo {
            width: 156px;
        }

        /* ---- Hero becomes a two-column row ---- */
        .hero-inner {
            display: flex;
            align-items: center;
            gap: 3.5rem;
            max-width: var(--container);
            margin: 0 auto;
            padding: 5rem 10rem 5rem 10rem;
        }

        .hero-media,
        .hero-content {
            flex: 1 1 50%;
            padding: 0;
        }
    .hero-image-mobile {
        width: 100%;
        border-radius: 4px;
        display: none;
    }

    .hero-image-desktop {
        width: 100%;
        border-radius: 4px;
        display: block;
    }

    .hero-badge {
        position: absolute;
        top: 1rem;
        left: -2.5rem;
        width: 60px;
        z-index: 2;
    }

        .hero-content {
            order: -1;
        }


        .hero-content{
            font-size: 1rem;
            max-width: 232px;
        }

        .eyebrow {
        font-size: .72rem;
        font-weight: 500;
        margin-bottom: 1.2rem;
    }

    .hero-header {
        font-size: 2.2rem;
        margin-bottom: 1.2rem;
    }

    .lead {
        font-size: .6rem;
        margin-bottom: 1rem;
    }

    .btn.btn-navy.btn-hero {
        font-size: .6rem;
        width: 12rem;
        padding: 1rem .5rem;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1;
    }


        /* ---- Projects intro ---- */
        .projects-intro {
            padding: 4rem 2.5rem 0rem 3rem;
        }

        .section-title {
            font-size: 2.4rem;
            margin-bottom: 1rem;
        }

        .second{
            order: 2;
        }

        .eyebrowproject , .eyebrow-light{
            font-size: .7rem;
            font-weight: 900;
            margin-bottom: 1rem;
        }

        .section-title.left , .section-title.left.eyebrow-light{
            font-size: 1.8rem;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .note , .note.eyebrow-light {
            font-size: .6rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .project-note {
            font-size: .6rem;
            line-height: 1.5;
            margin-bottom: 0rem;
        }

    

        /* ---- Project cards: alternating two-column rows ---- */
        .project {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 2.5rem 4.5rem;
            display: flex;
            align-items: center;
            gap: 4rem;
            justify-content: center;
        }

        .project-media {
            width: 288px;
            margin-bottom: 0;
            padding: 0;
        
        }
        .project-content , .logo-content, .feature-content , .about-content{
            width: 253.5px;
            margin-bottom: 0;
            padding: 0;
        }

        .note, .project-note {
            width: 233px;
        }

        .project:nth-of-type(2) {
            flex-direction: row-reverse;
        }

        .project-content .btn-block {
            display: inline-block;
            width: auto;
        }

        /* ---- Websites grid: single row of four ---- */
        .websites {
            padding: 4.5rem 2.5rem;
        }

        .websites .section-title,
        .websites .btn {
            max-width: var(--container);
            margin-left: auto;
            margin-right: auto;
        }

        .websites .btn {
            display: inline-block;
            width: auto;
        }

               .websites-grid {
    display: grid   ;
    grid-template-columns: repeat(4, 1fr);
     width: 57.6rem;
    justify-content: center;
    margin: 0rem auto 2rem auto;
}

        
        .websites-grid img {
   width: 100%;
    gap: 1rem;

}
   


        .websites-grid .websites-extra {
            display: block;
        }

        /* ---- Feature sections: side-by-side ---- */


        .feature-graphic,
        .feature-events {
            display: grid;
            grid-template-columns: 1.8fr 1.2fr;
            gap: 0rem;
            align-items: center;
        }

        .feature-media > img:first-child {
        width: 388px;
        }

        .btn.btn-white.btn-hero {
        font-size: .6rem;
        width: 12rem;
        padding: 1rem .5rem;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1;
          }

        .feature-badge {
        position: absolute;
        bottom: 1rem;
        left: 65rem;
        width: 60px;
        z-index: 2;
          }


        .feature-logo{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0rem;
            align-items: center;
            justify-self: center;   

        }

       .logo-media{
        order: 2;
        width: 288px;
        
    
       }

        .feature-badge.logo-badge {
        position: absolute;
        bottom: 0rem;
        left: -10rem;
        width: 60px;
        z-index: 2;
          }

          .feature-content.logo-content {
            padding: 0rem;
          }

        /* ---- About: two columns ---- */
        .about {
            margin: 0 auto;
            padding: 3.5rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rem;
        }


        .about-media{
            order: 2;
            width: 288px;
            margin-left: 2rem;
         
        }

        .about-media img {
            margin-bottom: 0rem;
        }

        .about-badge {
            position: absolute;
            top: 2.5rem;
            right: -3.5rem;
            width: 60px;
            z-index: 2;
        }



        /* ---- Testimonials: three columns ---- */
        .testimonials {
            padding: 5rem 2.5rem;
        }

        .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
            width: 57.4rem;
            margin: 0 auto;
          
              display: grid;
    gap: 1rem;
    justify-content: center;
        }

        .testimonial-container{
        width: 182px;
        height: 201px;
        padding: 2.4rem .5rem;
        }

        .testimonials .section-title {
    margin-bottom: 2.8rem;
}

.testimonial-avatar {
    width: 62px;
    height: 62px;
    margin: -6.6rem auto 1.2rem;
   

}

.stars {
    font-size: 1.5rem;
}

.testimonial h3 {
    font-size: 1.2rem;

}

.testimonial p {
    font-size: .67rem;
    
}

.testimonial-name {

    font-size: 0.56rem;
 
}


        /* ---- Footer ---- */
        .site-footer {
            padding: 5rem 2.5rem;
        }

       

        .footer-contacts {
            display: flex;
            justify-content: center;
            gap: 0rem;
            font-size: .8rem;
        }

        .site-footer .btn {
            display: inline-block;
            width: auto;
            padding: 1rem 3rem;
        }

         .site-footer h2 {
            font-size: 2.7rem;
        }

        .site-footer > p {
            font-size: 1.2rem;
            width: 100%;
            }

            .footer-p{
              font-size: 1.2rem;
                }

        .contact-row{
            font-size: 1rem;
            gap: .5rem;
        }

        .contact-row img {
         width: 12px;
        height: 12px;
        }

     
.footer-p{
    margin: 0 auto 1.6rem auto;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 400;

}
        
    }


    

    /* ---- Wider desktops: scale spacing & type a little further ---- */
    @media (min-width: 1024px) {
    
        .container{
            width: 1024px;
            margin: 0 auto;
        }
        

        .site-header .logo {
            width: 208px;
        }
    .hero-inner {
            display: flex;
            align-items: center;
            gap: 4.5rem;
            max-width: var(--container);
            margin: 0 auto;
            padding: 8rem 13rem 8rem 13rem;
        }

        .hero-media,
        .hero-content {
            flex: 1 1 50%;
            padding: 0;
        }
    .hero-image-mobile {
        width: 100%;
        border-radius: 4px;
        display: none;
    }

    .hero-image-desktop {
        width: 100%;
        border-radius: 4px;
        display: block;
    }

    .hero-badge {
        position: absolute;
        top: 1.5rem;
        left: -rem;
        width: 81px;
        z-index: 2;
    }

        .hero-content {
            order: -1;
        }


        .hero-content{
            font-size: 1rem;
            max-width: 309px;
        }

        .eyebrow {
        font-size: .96rem;
        font-weight: 500;
        margin-bottom: 1.2rem;
    }

    .hero-header {
        font-size: 2.9rem;
        margin-bottom: 1.2rem;
    }

    .lead {
        font-size: .8rem;
        margin-bottom: 1rem;
    }

    .btn.btn-navy.btn-hero, .btn.btn-white.btn-hero {
        font-size: .8rem;
        width: 15rem;
        padding: 1rem .5rem;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1;
    }

        .projects-intro {
            padding: 4rem 2.5rem 0rem 3rem;
        }

        .section-title {
            font-size: 3.2rem;
            margin-bottom: 2.4rem;
        }

        .second{
            order: 2;
        }

        .eyebrowproject, .eyebrow-light{
            font-size: .8rem;
            font-weight: 900;
            margin-bottom: 1.2rem;
        }

        .section-title.left , .section-title.left.eyebrow-light{
            font-size: 2.4rem;
            line-height: 1.2;
        }

        .note , .note.eyebrow-light { 
            font-size: .8rem;
            line-height: 1.5;
            margin-bottom: 1.2rem;
        }

        .project-note {
            font-size: .8rem;
            line-height: 1.5;
            margin-bottom: .2rem;
        }

    

        /* ---- Project cards: alternating two-column rows ---- */
        .project {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 2.5rem 4.5rem;
            display: flex;
            align-items: center;
            gap: 4rem;
            justify-content: center;
        }

        .project-media {
            width: 384px;
            margin-bottom: 0;
            padding: 0;
        
        }
        .project-content , .logo-content , .feature-content , .about-content{
            width: 338px;
            margin-bottom: 0;
            padding: 0;
        }

        .note, .project-note {
            width: 311px;
        }

        
        .feature-media > img:first-child {
        width: 512px;
        }

           .feature-badge {
        position: absolute;
        bottom: 2rem;
        left: 85rem;
        width: 81px;
        z-index: 2;
          }


        
        .feature-logo{
            align-items: center;
            justify-self: center;   

        }

       .logo-media{
        order: 2;
        width: 384px;
        
    
       }

        .feature-badge.logo-badge {
        position: absolute;
        bottom: 0rem;
        left: -14rem;
        width: 81px;
        z-index: 2;
          }

        .feature-content.logo-content {
            padding: 0rem;
          }


         .about-media{
            order: 2;
            width: 384px;
            margin-left: 3rem;
            
        }

        
        .about-badge {
            position: absolute;
            top: 4rem;
            right: -3.5rem;
            width: 81px;
            z-index: 2;
        }

    

                    .websites-grid {
     width: 76.8rem;
}

        
        .websites-grid img {
   width: 100%;
    gap: 1rem;

}

    .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
            width: 76.5rem;
            margin: 0 auto;
          
              display: grid;
    gap: 1rem;
    justify-content: center;
        }

        .testimonial-container{
        width: 242px;
        height: 268px;
        padding: 2.4rem .5rem;
        }

        .testimonials .section-title {
    margin-bottom: 2.8rem;
}

.testimonial-avatar {
    width: 82.8px;
    height: 82.8px;
    margin: -6.6rem auto 1.2rem;
   

}

.stars {
    font-size: 2rem;
}

.testimonial h3 {
    font-size: 1.7rem;

}

.testimonial p {
    font-size: .9rem;
    
}

.testimonial-name {

    font-size: 0.7rem;
 
}
   


   .site-footer h2 {
            font-size: 3.6rem;
        }

        .site-footer > p {
            font-size: 1.6rem;
            width: 100%;
            }

            .footer-p{
              font-size: 1.6rem;
                }

        .contact-row{
            font-size: 1rem;
            gap: .5rem;
        }

        .contact-row img {
         width: 12px;
        height: 12px;
        }




    }

    @media (min-width: 1200px) {
    
        .container{
            width: 1200px;
            margin: 0 auto;
        }
        

        .site-header .logo {
            width: 244px;
        }

    .hero-inner {
            display: flex;
            align-items: center;
            gap: 7.5rem;
            max-width: var(--container);
            margin: 0 auto;
            padding: 9rem 15rem 9rem 15rem;
        }

        .hero-media,
        .hero-content {
            flex: 1 1 50%;
            padding: 0;
        }

    .hero-badge {
        position: absolute;
        top: 2rem;
        left: -3.5rem;
        width: 95px;
        z-index: 2;
    }

        .hero-content {
            order: -1;
        }

        


        .hero-content{
            font-size: 1rem;
            max-width: 363px;
            padding-left: 3rem;
        }

        .eyebrow {
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 1.2rem;
    }

    .hero-header {
        font-size: 3.4rem;
        margin-bottom: 1.2rem;
    }

    .lead {
        font-size: .93rem;
        margin-bottom: 1rem;
    }

    .btn.btn-navy.btn-hero, .btn.btn-white.btn-hero {
        font-size: .93rem;
        width: 15rem;
        padding: 1rem .5rem;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1;
    }

    .projects-intro {
            padding: 4rem 2.5rem 0rem 3rem;
        }

        .section-title {
            font-size: 3.75rem;
            margin-bottom: 2.6rem;
        }

        .second{
            order: 2;
        }

        .eyebrowproject, .eyebrow-light{
            font-size: .9rem;
            font-weight: 900;
            margin-bottom: 1.4rem;
        }

        .section-title.left, .section-title.left.eyebrow-light{
            font-size: 2.8rem;
            line-height: 1.2;
            margin-bottom: 1.4rem;
        }

        .note , .note.eyebrow-light {
            font-size: .9rem;
            line-height: 1.5;
            margin-bottom: 1.4rem;
        }

        .project-note {
            font-size: .9rem;
            line-height: 1.5;
            margin-bottom: .4rem;
        }

    

        /* ---- Project cards: alternating two-column rows ---- */
        .project {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 2.5rem 4.5rem;
            display: flex;
            align-items: center;
            gap: 4rem;
            justify-content: center;
        }

        .project-media {
            width: 450px;
            margin-bottom: 0;
            padding: 0;
        
        }
        .project-content , .logo-content .feature-content, .about-content{
            width: 396px;
            margin-bottom: 0;
            padding: 0;
        }

        .note, .project-note {
            width: 354px;
        }

          .feature-media > img:first-child {
        width: 600px;
        }

        .feature-badge {
        position: absolute;
        bottom: 2.5rem;
        left: 98rem;
        width: 95px;
        z-index: 2;
          }

        
        
        .feature-logo{
        align-items: center;
        justify-self: center;   

        }

       .logo-media{
        order: 2;
        width: 450px;
        
    
       }

        .feature-badge.logo-badge {
        position: absolute;
        bottom: 1rem;
        left: -18rem;
        width: 95px;
        z-index: 2;
          }

        .feature-content.logo-content {
            padding: 0rem;
          }


            .about-media{
            width: 450px;
            margin-left: 4rem;
            
        }

        
        .about-badge {
            position: absolute;
            top: 4rem;
            right: -3.5rem;
            width: 95px;
            z-index: 2;
        }

        
                    .websites-grid {
     width: 90rem;
}

        
        .websites-grid img {
   width: 100%;
    gap: 1rem;

}


        .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
            width: 89.6rem;
            margin: 6rem auto 0 auto;
          
              display: grid;
    gap: 1rem;
    justify-content: center;
        }

        .testimonial-container{
        width: 284px;
        height: 314px;
        padding: 2.4rem .5rem;
        }

        .testimonials .section-title {
    margin-bottom: 2.8rem;
}

.testimonial-avatar {
    width: 97.1px;
    height: 97.1px;
    margin: -8.6rem auto 1.2rem;
   

}

.stars {
    font-size: 2.5rem;
}

.testimonial h3 {
    font-size: 2rem;

}

.testimonial p {
    font-size: 1rem;
    
}

.testimonial-name {

    font-size: 0.9rem;
 
}
   

   .site-footer h2 {
            font-size: 4.2rem;
        }

        .site-footer > p {
            font-size: 1.9rem;
            width: 100%;
            }

            .footer-p{
              font-size: 1.9rem;
                }

        .contact-row{
            font-size: 1.2rem;
            gap: .8rem;
        }

        .contact-row img {
         width: 14px;
        height: 14px;
        }

   






    }



    @media (min-width: 1440px) {
        
        .container{
            width: 1440px;
            margin: 0 auto;
        }
        
    .site-header .logo {
            width: 293px;
        }

    .hero-inner {
            display: flex;
            align-items: center;
            gap: 9.5rem;
            max-width: 1920px;
            margin: 0 auto;
            padding: 11rem 18rem 11rem 18rem;
        }

        .hero-media,
        .hero-content {
            flex: 1 1 50%;
            padding: 0;
        }

    .hero-image-desktop {
        width: 100%;
        border-radius: 4px;
        display: block;
    }

    .hero-badge {
        position: absolute;
        top: 2rem;
        left: -4.5rem;
        width: 114px;
        z-index: 2;
    }

        .hero-content {
            order: -1;
        }


        .hero-content{
            font-size: 1rem;
            max-width: 435px;
            padding-left: 0rem;
        }

        .eyebrow {
        font-size: 1.35rem;
        font-weight: 500;
        margin-bottom: 1.2rem;
    }

    .hero-header {
        font-size: 4.1rem;
        margin-bottom: 1.2rem;
    }

    .lead {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .btn.btn-navy.btn-hero, .btn.btn-white.btn-hero {
        font-size: 1.2rem;
        width: 22rem;
        padding: 1.2rem 1.5rem;
        font-weight: 400;
        letter-spacing: 1.6px;
        line-height: 1;
    }


    .projects-intro {
            padding: 4rem 2.5rem 0rem 3rem;
        }

        .section-title {
            font-size: 4.5rem;
            margin-bottom: 2.8rem;
        }

        .second{
            order: 2;
        }

        .eyebrowproject , .eyebrow-light{
            font-size: 1rem;
            font-weight: 900;
            margin-bottom: 1.6rem;
        }

        .section-title.left, .section-title.left.eyebrow-light{
            font-size: 3.37rem;
            line-height: 1.2;
            margin-bottom: 1.6rem;
        }

        .note, .note.eyebrow-light{
            font-size: 1.1rem;
            line-height: 1.5;
            margin-bottom: 1.6rem;
        }

        .project-note {
            font-size: 1.1rem;
            line-height: 1.5;
            margin-bottom: .8rem;
        }

    

        /* ---- Project cards: alternating two-column rows ---- */
        .project {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 2.5rem 4.5rem;
            display: flex;
            align-items: center;
            gap: 4rem;
            justify-content: center;
        }

        .project-media {
            width: 540px;
            margin-bottom: 0;
            padding: 0;
        
        }
        .project-content, .logo-content, .feature-content , .about-content{
            width: 475px;
            margin-bottom: 0;
            padding: 0;
        }

        .note, .project-note {
            width: 437px;
        }

         .feature-media > img:first-child {
        width: 720px;
        }

        .feature-badge {
        position: absolute;
        bottom: 2.5rem;
        left: 120rem;
        width: 114px;
        z-index: 2;
          }

          
        .feature-logo{
        align-items: center;
        justify-self: center;   

        }

       .logo-media{
        order: 2;
        width: 540px;
        
    
       }

        .feature-badge.logo-badge {
        position: absolute;
        bottom: 1rem;
        left: -20rem;
        width: 114px;
        z-index: 2;
          }

        .feature-content.logo-content {
            padding: 0rem;
          }

            .about-media{
            width: 540px;
            margin-left: 5rem;
            
        }

 

                    .websites-grid {
     width: 108rem;
}

        
        .websites-grid img {
   width: 100%;
    gap: 1rem;

}
   


        .about-badge {
            position: absolute;
            top: 4rem;
            right: -3.5rem;
            width: 114px;
            z-index: 2;
        }

       
        .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
            width: 107rem;
            margin: 7rem auto 0 auto;
          
              display: grid;
    gap: 1rem;
    justify-content: center;
        }

        .testimonial-container{
        width: 341px;
        height: 376px;
        padding: 2.4rem .5rem;
        }

        .testimonials .section-title {
    margin-bottom: 2.8rem;
}

.testimonial-avatar {
    width: 116px;
    height: 116px;
    margin: -8.6rem auto 1.2rem;
   

}

.stars {
    font-size: 3rem;
}

.testimonial h3 {
    font-size: 2.4rem;

}

.testimonial p {
    font-size: 1.2rem;
    
}

.testimonial-name {

    font-size: 1.5rem;
 
}

 .site-footer h2 {
            font-size: 5.1rem;
        }

        .site-footer > p {
            font-size: 2.2rem;
            width: 100%;
            }

             .footer-p{
              font-size: 2.2rem;
                }


        .contact-row{
            font-size: 1.5rem;
            gap: 1rem;
        }

        .contact-row img {
         width: 16px;
        height: 16px;
        }

   
    }

    @media (min-width: 1920px) {
        .container{
            width: 1920px;
            margin: 0 auto;
        }
        
        .site-header .logo {
            width: 390px;
        }

    .hero-inner {
            display: flex;
            align-items: center;
            gap: 11.5rem;
            max-width: 1920px;
            margin: 0 auto;
            padding: 14rem 18rem 14rem 18rem;
        }

        .hero-media,
        .hero-content {
            flex: 1 1 50%;
            padding: 0;
        }

    .hero-image-desktop {
        width: 100%;
        border-radius: 4px;
        display: block;
    }

    .hero-badge {
        position: absolute;
        top: 3rem;
        left: -6rem;
        width: 152px;
        z-index: 2;
    }

        .hero-content {
            order: -1;
        }


        .hero-content{
            font-size: 1rem;
            max-width: 580px;
            padding-left: 0rem;
        }

        .eyebrow {
        font-size: 1.8rem;
        font-weight: 500;
        margin-bottom: 1.2rem;
    }

    .hero-header {
        font-size: 5.5rem;
        margin-bottom: 1.8rem;
    }

    .lead {
        font-size: 1.5rem;
        margin-bottom: 1.8rem;
    }

    .btn.btn-navy.btn-hero , .btn.btn-white.btn-hero {
        font-size: 1.5rem;
        width: 25rem;
        padding: 1.5rem 1.7rem;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1;
    }

    .projects-intro {
            padding: 4rem 2.5rem 0rem 3rem;
        }

        .section-title {
            font-size: 6rem;
            margin-bottom: 3rem;
        }

        .second{
            order: 2;
        }

        .eyebrowproject, .eyebrow-light{
            font-size: 1.1rem;
            font-weight: 900;
            margin-bottom: 1.8rem;
        }

        .section-title.left, .section-title.left.eyebrow-light {
            font-size: 4.5rem;
            line-height: 1.2;
            margin-bottom: 1.8rem;
        }

        .note , .note.eyebrow-light {
            font-size: 1.5rem;
            line-height: 1.5;
            margin-bottom: 1.8rem;
        }

        .project-note {
            font-size: 1.5rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

    

        /* ---- Project cards: alternating two-column rows ---- */
        .project {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 2.5rem 4.5rem;
            display: flex;
            align-items: center;
            gap: 4rem;
            justify-content: center;
        }

        .project-media {
            width: 720px;
            margin-bottom: 0;
            padding: 0;
        
        }
        .project-content, .logo-content , .feature-content , .about-content{
            width: 634px;
            margin-bottom: 0;
            padding: 0;
        }

        .note, .project-note {
            width: 583px;
        }

        
         .feature-media > img:first-child {
        width: 960px;
        }

         .feature-badge {
        position: absolute;
        bottom: 5.5rem;
        left: 160rem;
        width: 152px;
        z-index: 2;
          }

              
        .feature-logo{
        align-items: center;
        justify-self: center;   

        }

       .logo-media{
        order: 2;
        width: 720px;
        
    
       }

        .feature-badge.logo-badge {
        position: absolute;
        bottom: 2rem;
        left: -26rem;
        width: 152px;
        z-index: 2;
          }

        .feature-content.logo-content {
            padding: 0rem;
          }

           .about-media{
            width: 720px;
            margin-left: 7rem;
            
        }

        
        .about-badge {
            position: absolute;
            top: 4rem;
            right: -3.5rem;
            width: 152px;
            z-index: 2;
        }

         
            .websites-grid {
              width: 117.7rem;
}

        
        .websites-grid img {
   width: 100%;
    gap: 3rem;

}
   

        .testimonials-grid {
            grid-template-columns: repeat(3, 1fr);
            width: 143rem;
            margin: 8rem auto 0 auto;
          
              display: grid;
    gap: 1rem;
    justify-content: center;
        }

        .testimonial-container{
        width: 455px;
        height: 502px;
        padding: 2.4rem .5rem;
        }

        .testimonials .section-title {
    margin-bottom: 2.8rem;
}

.testimonial-avatar {
    width: 155px;
    height: 155px;
    margin: -9.6rem auto 1.2rem;
   

}

.stars {
    font-size: 3.5rem;
}

.testimonial h3 {
    font-size: 3.2rem;

}

.testimonial p {
    font-size: 1.7rem;
    
}

.testimonial-name {

    font-size: 1.5rem;
 
}
       
 .site-footer h2 {
            font-size: 6.8rem;
        }

        .site-footer > p {
            font-size: 3rem;
            width: 100%;
            }

            .footer-p{
              font-size: 3rem;
                }

        .contact-row{
            font-size: 2rem;
            gap: 1rem;
        }

        .contact-row img {
         width: 16px;
        height: 16px;
        }

}