* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

:root {
--red: hsl(7, 99%, 70%);
--yellow: hsl(51, 100%, 49%);
--green-dark: hsl(167, 40%, 24%);
--blue-dark: hsl(198, 62%, 26%);
--blue-light:  hsla(198, 87%, 64%);
--green-light: hsl(167, 34%, 41%); 
--grey-darker:  hsl(212, 27%, 19%);
--grey-dark:  hsl(213, 9%, 39%);
--grey-normal: hsl(232, 10%, 55%);
--grey-light: hsl(210, 4%, 67%);
--white: hsl(0, 100%, 100%);

}

body {
   position: relative;
   font-family: "Barlow", sans-serif;
   font-weight: 600;

}

header {
    background: var(--blue-light);
    width: 100%;
    height: 100%;
    background-image:url(./images/desktop/image-header.jpg);
    background-repeat: none;
    background-position-x: center;
    background-position-y: rem;
    background-size: cover;

}



nav {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    position: sticky;
    top: 0px;
    width: 100%;
   
}

.header-logo {
    display: flex;
    justify-content: flex-start;
    width: 65%;
}

.header-link ul li{
    display: inline;
   text-align: right;
    list-style: none;
}

.header-link ul li a {
    color: var(--white);
    text-decoration: none;
    padding: 1rem;
    margin-right: 1rem;

}

.hamburger {
    display: none;
}


button {
    display: flex;
    justify-content: flex-end;
    border-color: var(--blue-light);
    padding: 0.7rem 0.8rem;
    margin-top: -1rem;
    border-radius: 1.5rem;
    color: var(--grey-darker);
    font-weight: 700;

  
    
}

button:hover {
    background: var(--blue-light);
    color: var(--white);
}

header h1 {
    text-align: center;
    font-weight: 900;
    font-size: 60px;
    color: var(--white);
    padding-top: 4rem;
    padding-bottom: 30rem;
    font-family: "Fraunces", serif;
    
}

.pointer img {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    width: 40px;
   
    
}

.section0 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.section1 {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
}

.section1 h2 {
    font-size: 2rem;
    color: var(--grey-darker);
    margin-bottom: 1.2rem;
    font-family: "Fraunces", serif;
}

.section1 p {
    color: var(--grey-normal);
    margin-bottom: 1.5rem;
}

.section1 a {
  text-decoration: none;
  font-weight: bold;
  color: var(--grey-darker);
  border-bottom: 3px var(var(--yellow));
  width: fit-content;
  font-family: "Fraunces", serif;
  border-bottom: 3px solid var(--yellow);
}

.img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
}

.img-1{
background-image: url(./images/desktop/image-transform.jpg);
}

.img-2 {
background-image: url(./images/desktop/image-stand-out.jpg);
}

.img-3 {
    background-image: url(./images/desktop/image-graphic-design.jpg);
}

.img-4 {
    background-image: url(./images/desktop/image-photography.jpg);
}


.img-text {
   height: 400px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   text-align: center;
   padding: 50px 30px;

}

.img-text h3{
    font-size: 2rem;
    color: var(--grey-darker);
    margin-bottom: 1.2rem;
    font-family: "Fraunces", serif;
    
}

.img-text p {
   color: var(--grey-darker);
   margin-bottom: 1.5rem; 
   width: 80%;
   
}

.testimonial {
    background: var(--white);
}

.testimonial-header {
    text-align: center;
    font-size: 18px;
    margin-top: 7rem;
    margin-bottom: 4rem;
}

.testimonial-content {
    display: flex;
    justify-content:space-between;
    width: 90%;
    margin: 0 auto;
     
}

.testimonial-content .content1 {
    padding-right: 2rem;
}

.testimonial-content .content1 img{
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: block;
     margin: 2rem auto;
    
}

.testimonial-header h3 {
     font-family: "Fraunces", serif;
     padding: 1rem;
     color: var(--grey-light);
}

.testimonial-content .content1 p {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--grey-dark);
}

.testimonial-content .content1 h3 {
    text-align: center;
    font-family: "Fraunces", serif;
    
}

#small {
    font-size: 10px;
    margin-bottom: 6rem;
}

.gallery img{
    width: 25%;
}

.gallery {
    display: flex;
    
}

.footer{ 
    background: hsla(167, 34%, 41%, 0.5);  
    padding: 40px 0;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    font-family: sans-serif;
    font-weight: 700;
    color: #2c6560;
    margin-bottom: 1.5rem;
}

.footer-links {
    display: flex;
   
}

.footer-links ul li {
    display: inline;
    padding: 1rem;
    
}

.footer-links ul li a {
     color: var(--grey-dark);
     text-decoration: none;
}

.footer-links ul li a:hover {
    color: var(--grey-darker);
}
.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 5rem;
}




@media (max-width: 600px) {

    body {
        position: relative;
    }

    header {
        background-image:url(./images/mobile/image-header.jpg);
        height: 100%;
        background-size: cover;
    }

    .header-logo {
        width: 95%;
    }

    .header-link a{
        display: flex;
        color: black;
    }

    .header-link {
        /* display: none; */
        position: absolute;
        top: 110px;
        left: 10%;
        width: 85%;
        background: var(--white);
        padding: 40px 20px;
        text-align: center;
        list-style: none;
        flex-direction: column;
        gap: 25px;
        animation: fadeSlide 0.3s ease;
        z-index: 999;

        
    }



    button {
        display: none;
      
    }

    .hamburger {
        display: block;
        position: absolute;
        right: 20px;
        top: 25px;
    }

 
       
    .pointer img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 6.5%;
        width: 35px;
    }   

    
    .section0 {
        grid-template-columns: 1fr;
    }

    .testimonial-content {
        flex-direction: column;
        align-items: center;
    }

    .testimonial-content .content1 {
        padding: 0;
        margin-bottom: 3rem;
    }

    .img-1 {
        background-image: url(./images/mobile/image-transform.jpg);
        background-size: cover;
        background-position: center;
       
    }

    .img-2 {
        background-image: url(./images/mobile/image-stand-out.jpg);
        background-size: cover;
        background-position: center;
       
    }

    .img-3 {
        background-image: url(./images/mobile/image-graphic-design.jpg);
        background-size: cover;
        background-position: center;
       
    }

    .img-4 {
        background-image: url(./images/mobile/image-photography.jpg);
        background-size: cover;
        background-position: center;
        
    }

    .img-text {
        height: 200vh;
        padding: 80px 20px;
        text-align: center;
       
    }
    
    .img-text p {
        width: 100%;
        padding: 2rem;
      
    }
    .section1 {
        width: 100%;
        text-align: center;
    }

    .section1 a {
        margin: 0 auto;
      
    }

    .gallery img {
        width: 100%;
        
    }
    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        
    }
}