/* Start Global Rulls */
/* Start Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600&family=Fraunces:wght@700;900&display=swap');
*,*::before,*::after{
    box-sizing: border-box;
    font-size: 18px;
    font-family: 'Barlow', sans-serif;
    
}

html{
    scroll-behavior: smooth;
}

:root{
    /* ### Primary */

--Soft-red: hsl(7, 99%, 70%);
--Yellow: hsl(51, 100%, 49%);
--graphic-design-text: hsl(167, 40%, 24%);
--photography-text: hsl(198, 62%, 26%);
--footer: hsl(168, 34%, 41%);

/* ### Neutral */

--Very-dark-desaturated-blue: hsl(212, 27%, 19%);
--Very-dark-grayish-blue: hsl(213, 9%, 39%);
--Dark-grayish-blue: hsl(232, 10%, 55%);
--Grayish-blue: hsl(210, 4%, 67%);
--White:hsl(0, 0%, 100%);
}
.center-row{
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* End Global Rulls */
/* Start Media query */
@media (max-width:767px) {
    .container{
        padding: 0 15px;
        margin: auto;
    }
}
@media (min-width:768px) {
    .container{
        width: calc(100% - 170px);
        padding: 0 15px;
        margin-left: 70px ;
        margin-right: 70px ;
    }
}
@media (min-width:992px) {
    .container{
        width: calc(100% - 170px);
        padding: 0 15px;
        margin-left: 70px ;
        margin-right: 70px ;
    }
}
@media (min-width:1200px) {
    .container{
        width: calc(100% - 170px);
        padding: 0 15px;
        margin-left: 70px ;
        margin-right: 70px ;
    }
}
/* End Media query */
header{
    position:fixed;
    z-index: 100;
    top: 0;
    justify-content: space-between !important;
    width: 100%;
    height: 70px;
    padding: 0 30px;
    transition: background-color 0.3s ease-out ,
    top 0.3s ease-out ,
    left 0.3s ease-in ,
    opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1) ,
    box-radius 0.3s ease-out ;
}
header.Sticky{
    background: var(--Very-dark-desaturated-blue);
    border-radius: 20px;
    top: 5px;
    left: 0;
    width: 100%;
    opacity: 0.9;
    box-shadow: 0 0 10px #222;
}

header .logo .title{
    color: #fff;
    font-weight: bold;
}
@media (max-width:768px) {
    header .logo .title{
        font-size: 1.1rem;
    }
    
}
header .toggleBTN{
    position: relative;
    background-color: #e4e4e428;
    width: 35px;
    height: 40px;
    cursor: pointer;
    justify-content: space-evenly !important;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out ,
            background-color 0.4s ease;
}
header .toggleBTN .row{
    width: 80%;
    height: 4px;
    background-color: #e4e4e4;
    border-radius: 45px;
}
header .toggleBTN:hover{
    background-color: #e4e4e47e;
}
header .toggleBTN:hover .row{
    background-color: #fff;
}
@media (max-width:991px) {
    header .toggleBTN {
        opacity: 1;
        pointer-events: all;
    }
}
header nav.links{
    list-style: none;
    gap: 50px;
}
header nav.links li{
    width: 140px;
}
header nav.links li a{
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: capitalize;
    color: #fff;
    font-size: 600;
    font-weight: bold;
    transition: color 0.3s ease-out,
                background-color 0.3s ease-out;
    border-radius: 45px;
}
header nav.links li a:hover ,
header nav.links li a.active{
    text-transform: uppercase;
    background-color: var(--White);
    color: #101010;
}

@media (max-width:992px) {
    header nav.links{
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: fit-content;
        padding: 20px;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 5px;
        background-color: var(--White);
        border-radius: 5px;
        opacity: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease-out;
    }
    header nav.links.active{
        pointer-events: all;
        opacity: 1;
    }
    header nav.links li {
        width: initial;
        text-align: center;
    }
    header nav.links li a{
        
        color: var(--Very-dark-desaturated-blue);
    }
    header nav.links li a:hover ,
    header nav.links li a.active{
        background-color: var(--Yellow);

    }
}

main.about{
    position: relative;
    min-height: 100vh;
    background-image: url('../images/desktop/image-header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
main.about .container{
    min-height: 100vh;
    justify-content: flex-start;
}
main.about .container .aboutText {
    margin-top: 300px;
    text-transform: uppercase;
    font-size: 4.5rem;
    color: #fff;
    font-family: 'Fraunces', serif;
}
@media (max-width:992px) {
    main.about .container .aboutText {
    font-size: 1.8rem;
    }
}
main.about .container .arrow-down img{
    max-width: 100%;
    animation-name: bounce;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}
main.services{
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
main.services .serv-box-text{
    position: relative;
    flex-basis: 50%;
}
@media (max-width:767px) {
    main.services .serv-box-text{
        flex-basis: 100%;
    }
}
main.services .serv-box-text .serv-title{
    font-family: 'Fraunces', serif;
    font-weight: bold;
    font-size: 3rem;
    max-width: 500px;
    color: var(--Very-dark-desaturated-blue);
}
main.services .serv-box-text .ser-description{
    font-weight: 400;
    max-width: 500px;
    text-align: left;
    color: var(--Very-dark-grayish-blue);
}
main.services .serv-box-text button.learn-more{
    border: none;
    padding: 8px;
    background-color: transparent;
    border-bottom: 5px solid var(--Yellow);
    box-shadow: 2px 14px 15px 1px #e4e4e4;
}
main.services .serv-box-text:nth-child(4) button.learn-more{
    border-bottom: 5px solid var(--Soft-red);
}
main.services .serv-box-text button.learn-more a{
    text-decoration: none;
    color: var(--Very-dark-grayish-blue);
}
@media (max-width:768px) {
    main.services .serv-box-text{
        padding: 70px 20px;
    }
    main.services .serv-box-text .title{
        text-align: center;
    }
    
}
main.services .product-image {
    flex-basis: 50%;
}
main.services .product-image img{
    object-fit: fill;
    max-width: 100%;
}

@media (max-width:767px) {
    main.services .product-image {
        flex-basis: 100%;
        
    }
    
}

main.services .serv-box-text:nth-child(5) , 
main.services .serv-box-text:last-child{
    flex-basis: 50%;
    background-image: url('../images/desktop/image-graphic-design.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
    
}

main.services .serv-box-text:last-child{
    background-image: url(../images/desktop/image-photography.jpg);
}

@media (max-width:767px) {
    main.services .serv-box-text:nth-child(5) , 
    main.services .serv-box-text:last-child{
        flex-basis: 100%;
    }
}


main.services .serv-box-text:nth-child(5) .serv-title ,
main.services .serv-box-text:last-child  .serv-title{
    color: var(--graphic-design-text);
    margin-top: 255px;
    font-family: 'Fraunces', serif;
    font-weight: bold;
    font-size: 3rem;
    max-width: 420px;
}
main.services .serv-box-text:nth-child(5) .ser-description ,
main.services .serv-box-text:last-child  .ser-description{
    font-weight: 400;
    max-width: 400px;
    text-align: left;
}
main.services .serv-box-text:last-child  .serv-title{
    color: var(--photography-text);
}
main.services .serv-box-text:last-child  .ser-description{
    color: var(--Very-dark-grayish-blue);
}

@media (max-width:768px) {
    main.services .serv-box-text .serv-title ,
    main.services .serv-box-text:nth-child(5) .serv-title ,
    main.services .serv-box-text:last-child  .serv-title {
        font-size: 1.5rem;
        max-width: 350px;
    }
    main.services .serv-box-text .ser-description ,
    main.services .serv-box-text:nth-child(5) .ser-description ,
    main.services .serv-box-text:last-child  .ser-description{
        font-weight: 400;
        max-width: 350px;
    }
}
main.testimonials{
    min-height: 70vh;
    background-color: var(--White);
}
main.testimonials .container{
    flex-direction: row-reverse;
}
@media (max-width:992px) {
    main.testimonials .container{
        flex-direction: column;
    }
    
}
main.testimonials  .PageTitle{
    margin-bottom: 80px;
    height: 120px;
    align-items: flex-end;
}
main.testimonials .PageTitle > h2{
    color: var(--Very-dark-grayish-blue);
    font-family: 'Fraunces', serif;
    letter-spacing: 3px;
    font-size: 1.5rem;
}
.container .people-testimonials{
    padding: 15px;
    max-width: 350px;
    margin-bottom: 80px;
    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container .people-testimonials:hover{
    transform: translateY(-25px) scale(1.05);
}
.container .people-testimonials > .opinions-text{
    color: var(--Very-dark-grayish-blue);
    text-align: center;
    font-weight: bold;
}
.container .people-testimonials > .name h3{
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Fraunces', serif;
    color: var(--Very-dark-desaturated-blue);
    
}
.container .people-testimonials > .name .carier{
    color: var(--Very-dark-grayish-blue);
}
.container .people-testimonials .person-image{
    width: 20%;
    height: 20%;
    border-radius: 50%;
    overflow: hidden;
}
.container .people-testimonials .person-image img{
    max-width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
main.projects{
    min-height: 30vh;
}
@media (max-width:992px) {
    main.projects{
        flex-wrap: wrap;
    }
}
main.projects .proj-image {
    position: relative;
    flex-basis: 25%;
}
main.projects .proj-image img{
    max-width: 100%;
    object-fit: cover;
}

@media (max-width:768px) {
    main.projects .proj-image {
        flex-basis: 50% !important;
    }
}

footer.contact-us{
    min-height: fit-content;
    background-color: var(--footer);
    padding-bottom: 35px;
}
footer.contact-us .container .siteName{
    align-self: center;
    color: var(--Very-dark-desaturated-blue);
    font-size: 2rem;
    font-weight: bolder;
}
footer.contact-us .container ul.foot-links{
    list-style: none;
    gap: 50px;
    align-self: center;
}
footer.contact-us .container ul.foot-links > li > a{
    text-decoration: none ;
    color: var(--graphic-design-text);
    font-weight: bold;
}

footer.contact-us .container ul.social-links{
    list-style: none;
    gap: 30px;
    
}
footer.contact-us .attribution {
    
    text-align: center;
}
footer.contact-us .attribution a{
    text-decoration: none;
    color: var(--Very-dark-desaturated-blue);
}