html, body {
    margin: 0;
    padding: 0;

}

/* navigation bar */
nav {
    z-index: 1;

    display: flex;
    flex-direction: row;
    white-space: nowrap;
    justify-content: center;
    align-items: center;

    /* background color */
    background-color: #141514;

    /* position */
    position: fixed;

    /* width */
    width: 100vw;

    /* padding */
    padding-top: 25px;
    padding-bottom: 25px;

}

#logo {
    display: flex;
    place-self: center;

    /* size */
    width: 30%;
    /* height: 59.5%; */

    /* padding */
    margin-left: 45px;
    margin-right: 45px;

}

.works {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: .8rem;

    /* border */
    border-width: 1px;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 7px;

    /* padding */
    padding-left: 33px;
    padding-right: 33px;
    padding-top: 12px;
    padding-bottom: 12px;

    /* padding */
    margin-left: 45px;
    margin-right: 45px;

}

.designers {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: .8rem;

    /* border */
    border-width: 1px;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 7px;

    /* padding */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 12px;
    padding-bottom: 12px;

    /* padding */
    margin-left: 45px;
    margin-right: 45px;
    
}

.services {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: .8rem;

    /* border */
    border-width: 1px;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 7px;

    /* padding */
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 12px;
    padding-bottom: 12px;

    /* padding */
    margin-left: 45px;
    margin-right: 45px;
    
}

.aboutus {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: .8rem;

    /* border */
    border-width: 1px;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 7px;

    /* padding */
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 12px;
    padding-bottom: 12px;

    /* padding */
    margin-left: 45px;
    margin-right: 45px;

}
/* nav button hover effects */
.works {
    transition: all .5s ease;
 
}
.works:hover {
    color: #A39670;
    background-color: #ffffff;
}

.designers {
    transition: all .5s ease;
 
}
.designers:hover {
    color: #A39670;
    background-color: #ffffff;
}

.services {
    transition: all .5s ease;
 

}
.services:hover {
    color: #A39670;
    background-color: #ffffff;
}

.aboutus {
    transition: all .5s ease;
 
}
.aboutus:hover {
    color: #A39670;
    background-color: #ffffff;
}

#logo {
    transition: all .2s ease;
    
}
#logo:hover {
    transform: rotate(10deg) scale(1.2);

}

.hero {
    width: 100vw;

}
/* end */

/* Our Works */
.ourworks {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat( 3, 360px);
    grid-template-rows: repeat( 3, 360px);
    justify-content: center;

    /* padding */
    padding-bottom: 60px;

}

.ourworks2 {
    text-decoration: none;
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 3rem;

    /* padding */
    padding-top: 80px;
    padding-bottom: 60px;

    /* alignment */
    display: flex;
    justify-content: center;
}
/* Our works hover effects */
.ourworks2 {
    transition: .3s;
}
.ourworks2:hover {
    transform: scale(1.2);
    text-shadow: 9px 9px 0px #A39670;
}

#img1 {
    transition: .3s;

}
#img1:hover {
    transform: rotate(-10deg) scale(1.1);
    box-shadow:  20px 20px 20px #141514;
    
}

#img2 {
    transition: .3s;

}
#img2:hover {
    transform: translate(0, -10px) scale(1.1);
    box-shadow:  0px 25px 20px #141514;

}

#img3 {
    transition: .3s;

}
#img3:hover {
    transform: rotate(10deg) scale(1.1);
    box-shadow:  -20px 20px 20px #141514;

}

#img4 {
    transition: .3s;

}
#img4:hover {
    transform: rotate(-10deg) scale(1.1);
    box-shadow:  20px 20px 20px #141514;

}

#img5 {
    transition: .3s;

}
#img5:hover {
    transform: translate(0, -10px) scale(1.1);
    box-shadow:  0px 25px 20px #141514;

}

#img6 {
    transition: .3s;

}
#img6:hover {
    transform: rotate(10deg) scale(1.1);
    box-shadow:  -20px 20px 20px #141514;

}

#img7 {
    transition: .3s;

}
#img7:hover {
    transform: rotate(-10deg) scale(1.1);
    box-shadow:  20px 20px 20px #141514;

}

#img8 {
    transition: .3s;

}
#img8:hover {
    transform: translate(0, -10px) scale(1.1);
    box-shadow:  0px 25px 20px #141514;

}

#img9 {
    transition: .3s;

}
#img9:hover {
    transform: rotate(10deg) scale(1.1);
    box-shadow:  -20px 20px 20px #141514;
    
}
/* end */

/* Designers */
.team {
    width: 100vw;
    height: 100vh;

    background-image: url('../Images/Designers/DesImages.png');
    background-size: cover;
  
}

.design {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 3rem;

    display: flex;
    justify-content: center;

    /* padding */
    padding-top: 80px;
    padding-bottom: 60px;

}

.boxalign1 {
    display: flex;
    align-items: end;
    flex-direction: column;

    /* padding */
    padding-top: 4%;
    padding-right: 6%;
    
}

#boxpara1 {
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.46vw;

    /* alignment */
    text-align: right;

    /* size */
    width: 16.5vw;

    /* padding */
    padding-left: 2vw;

}

#boxpara11 {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 2vw;

}

.boxalign2 {
    display: flex;
    align-items: start;
    flex-direction: column;

    /* padding */
    padding-top: 4%;
    padding-left: 6%;
    
}

#boxpara2 {
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.46vw;

    /* alignment */
    text-align: left;

    /* size */
    width: 16.7vw;
}

#boxpara22 {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 2vw;

}

.row {
    display: flex;
    justify-content: center;
    align-items: center;

}

.box {
    width: 29vw;
    height: 70vh;
    
}

#box1 {
    background-image: url('../Images/Designers/Des2.2.png');
    background-repeat: no-repeat;
    background-position: top;
    
    background-size: 29vw;

    padding-right: 2%;
 
}

#box2 {
    background-image: url('../Images/Designers/Des1.2.png');
    background-repeat: no-repeat;
    background-position: top;
    
    background-size: 29vw;

    padding-left: 2%;

}
/* Designers Hover Effect */
.design {
    transition: .3s;
}
.design:hover {
    transform: scale(1.2);
    text-shadow: 9px 9px 0px #A39670;
}

#box1 {
    transition: .3s;

}
#box1:hover {
    transform: rotate(-1deg) scale(1.1);

}

#box2 {
    transition: .3s;

}
#box2:hover {
    transform: rotate(1deg) scale(1.1);

}
/* end */

/* Services */
.container2 {
    display: inline-block;
    
    background-image: url('../Images/Services/Services6.png');
    background-size: cover;
    background-color: #c7c7c7;
    background-blend-mode: overlay;

    /* size */
    width: 100vw;

    /* position */
    text-align: center;

}

.h1services {
    text-decoration: none;
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 3rem;

    display: flex;
    justify-content: center;
    
    /* padding */
    padding-top: 80px;
    padding-bottom: 60px;

}

.servicecon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;

    /* padding */
    padding-top: 0vh;
    padding-bottom: 13vh;

}

.sersize {
    width: 19vw;
    display: flex;
    place-self: center;

    /* padding */
    padding: 1vw;
}

.h2services {
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 2vw;

    /* margin */
    margin: 0;

    /* text box */
    display: inline-block;
    width: 100%;

    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;
    place-self: center;

}
/* Services Hover Effects */
.h1services {
    transition: .3s;
}
.h1services:hover {
    transform: scale(1.2);
    text-shadow: 9px 9px 0px #A39670;
}

.web {
    filter: grayscale(100%);
    transition: .3s;
    opacity: 50%;
}
.web:hover{
    filter: grayscale(0%);
    transform: scale(1.1);
    opacity: 100%;
}

.brand {
    filter: grayscale(100%);
    transition: .3s;
    opacity: 50%;
}
.brand:hover{
    filter: grayscale(0%);
    transform: scale(1.1);
    opacity: 100%;
}

.sculpting {
    filter: grayscale(100%);
    transition: .3s;
    opacity: 50%;
}
.sculpting:hover{
    filter: grayscale(0%);
    transform: scale(1.1);
    opacity: 100%;
}
/* end */

/* About us */
.container3 {
    background-image: url('../Images/AboutUs/Aboutusimage2.png');
    background-size: cover;

}

.aboutpara {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;

}

.logoimg {
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-right: 10vw;
    padding-left: vw;

    /* size */
    width: 20vw;

}

.h2aboutus {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 2.6vw;

}

.aboutpara2 {
    padding-top: 10vh;
    padding-bottom: 10vh;

}

span {
    font-weight: bold;

}

span2 {
    font-style: italic;

}

.aboutpara3 {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5vw;

    /* text box */
    display: inline-block;
    text-align: left;
    width: 29vw;

}

.quote {
    /* margin */
    margin-top: 5vh;

}

.quotetext {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.3vw;
    font-weight: bold;
    text-decoration: none;

    /* text box */
    display: inline-block;
    text-align: center;
    width: 15vw;

    /* padding */
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 1.5vw;
    padding-right: 1.5vw;

    /* border */
    border-radius: 20px;
    border-width: 2px;
    border-color: #ffffff;
    border-style: solid;

}

.downarrow {
    width: 1vw;
    padding-left: 10px;

}
/* About Us hover effects */
.quotetext {
    transition: all .5s ease;
 
}
.quotetext:hover {
    color: #A39670;
    background-color: #ffffff;
}

.logoimg {
    transition: .3s;
}
.logoimg:hover {
    transform: scale(1.1);
}
/* end */

/* Got any creative projects on your mind? */
.container4 {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* margin */
    margin-top: 4%;
    margin-bottom: 4%;

}

.got {
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 2.6vw;

    /* margin */
    margin-top: 0;
    margin-bottom: 1.5vh;

    /* text box */
    display: inline-block;
    text-align: center;
    width: 1000px;

}

.para3 {
    color: #141514;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1vw;
    
    /* margin */
    margin-top: 1.5vh;
    margin-bottom: 0;
}
/* end */

/* footer */
.footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* margin */
    margin-top: 5%;
    margin-bottom: 2%;

}

.mail {
    background-color: #000000;

    /* padding */
    padding: 1%;

    margin: 1vw;

    /* border */
    width: 250px;
    height: 233px;
    border-radius: 17px;

    /* flex */
    display: inline-block;
    text-align: center;

}

.icon1 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    /* margin */
    margin-top: 3vh;
    margin-bottom: 4vh;
}

.h4mail {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5rem;

    /* margin */
    margin: 1vh;
}

.pmail {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: .9rem;

    /* margin */
    margin-bottom: 3vh;
}

.call {
    background-color: #000000;

    /* padding */
    padding: 1%;

    /* border */
    width: 250px;
    height: 233px;
    border-radius: 17px;

    /* margin */
    display: inline-block;
    text-align: center;

}

.icon2 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    /* margin */
    margin-top: 3vh;
    margin-bottom: 4vh;
}

.h4call {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5rem;

    /* margin */
    margin: 1vh;
}

.pcall {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: .9rem;

    /* margin */
    margin-bottom: 3vh;
}

.media {
    background-color: #000000;

    /* padding */
    padding: 1%;

    /* margin */
    margin: 1vw;

    /* border */
    width: 550px;
    height: 233px;
    border-radius: 17px;

    /* flex */
    display: inline-block;
    text-align: center;

}

.icon3456 {
    margin-top: 3vh;
    margin-bottom: 4vh;

}

.icon3 {
    padding: .5vw;

}
.icon4 {
    padding: .5vw;

}
.icon5 {
    padding: .5vw;

}
.icon6 {
    padding: .5vw;

}

.h4media {
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.5rem;

    /* margin */
    margin-top: 1vh;

}

.address {
    text-align: center;

    /* margin */
    margin-bottom: 3%;
}

.address2 {
    text-decoration: none;

    /* style */
    color: #000000;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;

}

.contact {
    text-decoration: none;

    /* style */
    color: #000000;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;

}

.email {
    text-decoration: none;

    /* style */
    color: #000000;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 13px;

}
/* footer hover effects */
.mail {
    transition: .3s;
}
.mail:hover {
    transform: scale(1.05);
}

.call {
    transition: .3s;
}
.call:hover {
    transform: scale(1.05);
}

.media {
    transition: .3s;
}
.media:hover {
    transform: scale(1.05);
}
.icon3 {
    transition: .2s;
}
.icon3:hover {
    transform: rotate(360deg) scale(1.2);
}

footer a {
    transition: .3s;
}
footer a:hover {
    transform: rotate(360deg) scale(1.2);
}
/* end */