style.css

body {
    overflow-x: hidden !important;
}

/* navbar */

.navbar {
    position: sticky;
    background-color: white;
    top: 0;
    z-index: 1;
}
.nav-heading {
    width: 52vw !important;
}
.active  #line {
    background-color: #ab641d;
    transition: width 0.5s;
    margin-top: 3px;
    height: 0.3vh;
    display: flex;
    width: 0vw;
}

.active #line {
    width: 40px;
}

.active {
    color: #ab641d !important;
}
#line {
    background-color: #ab641d;
    width: 0vw;
    transition: width 0.5s;
    height: 0.3vh;
    display: flex;
    margin-top: 3px;
}
.nav-item:hover #line{
    width: 40px;
}

.nav-item:hover a {
    color: #ab641d !important;
}

.nav-item:hover .dropdown-menu {
    display: block;
}
/* end navbar */

/* cover */
.cover {
    position: relative;
}

.cover-pic img {
    height: 90vh;
    width: 100vw;
}

.cover-content {
    position: absolute;
    top: 20vh;
    left: 20vw;
    width: 70vw;
}

.cover-heading h1 {
    font-size: 70px;
    font-weight: bold;
}

.cover-para {
    margin-top: 5vh;
    width: 63vw;
}

.cover-para p {
    text-align: center;
    font-size: 17px;
}

.cover-links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -4vw;
}

.cover-links div {
    margin-left: 1vw;
}

.cover-links a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: 700;
}

.learn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
}

.learn-more button {
    background-color: transparent;
    border: none;
    font-weight: bold;
    background-color: #fcaf3b;
    transition: all .5s;
    padding: 12px;
}

.learn-more:hover button {
    background-color: #ab641d;
}

.learn-more:hover a button {
    color: white;
}


.hire-us {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
}

.hire-us button {
    background-color: transparent;
    border: none;
    font-weight: bold;
    padding: 12px;
    border: 2px solid #14171c;
    transition: all .5s;
}

.hire-us:hover  button{
    background-color: #14171c;
}

.hire-us:hover a button {
    color: white;
}

/* end cover */


/* card */
.cards {
    margin-top: 13vh !important;
    margin-bottom: 15vh;
}

.cardImg {
    display: flex;
    justify-content: center;
}

/* end card */

/* webDesign */
.webDesign {
    background-color: #ededed;
    margin-bottom: 5vh;
}

.webDesignImg img {
    width: 50vw;
}

.webDesignContent {
    margin-left: 6vw;
    display: flex;
    flex-direction: column;
}

.webDesignCol2 {
    display: flex;
    align-items: center;
}

.webDesignHeading h2 {
    font-size: 46px;
}

.webDesignBtn button {
    background-color: #fcaf3b;
    border: none;
    width: 15vw;
    height: 6vh;
    font-size: 16px;
    font-weight: 700;
    transition: all .5s;
}

/* end webDesign */

/* branding */
.branding {
    margin-bottom: 4vh;
}

.branding .row {
    padding-right: 6vw;
}

.brandingImg img {
    width: 50vw;
}

.brandingContent {
    margin-left: 3vw;
    display: flex;
    flex-direction: column;
}

.brandingCol2 {
    display: flex;
    align-items: center;
}

.brandingHeading h2 {
    font-size: 46px;
}

.brandingBtn button {
    background-color: #fcaf3b;
    border: none;
    width: 15vw;
    height: 6vh;
    font-size: 16px;
    font-weight: 700;
    transition: all .5s;
}

/* end branding */

/* values */
.values {
    background-color: #14171c;
    margin-bottom: 5vh;
    color: white;
}

.valuesImg img {
    width: 50vw;
}

.valuesContent {
    margin-left: 6vw;
    display: flex;
    flex-direction: column;
}

.valuesCol2 {
    display: flex;
    align-items: center;
}

.valuesHeading h2 {
    font-size: 46px;
}

.valuesBtn button {
    background-color: #fcaf3b;
    border: none;
    width: 15vw;
    height: 6vh;
    font-size: 16px;
    font-weight: 700;
    transition: all .5s;
}

/* end values */

/* featuredWork */
.featuredWork img {
    width: 45vw;
}

/* end featuredWork */

/* reviews */
.review {
    padding-top: 10vh;
    background-color: #ededed;
}

.review img {
    border-radius: 50%;
}

/* end reviews */

/* workTogether */
.workTogether {
    padding: 20vh 5vw 20vh 5vw;
    background-color: #14171c;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.workTogetherHeading h2 {
    font-size: 46px;
    font-weight: 600;
}

.workTogetherBtn button {
    background-color: #fcaf3b;
    border: none;
    width: 14vw;
    height: 6vh;
    font-size: 16px;
    font-weight: 700;
    transition: all .5s;
}

/* end workTogether */

/* copyright */
.copyright {
    background-color: black;
    color: white;
    padding-left: 5vw;
    margin-bottom: -3vh;
}

/* end copyright */

.workTogetherBtn button:hover,
.valuesBtn button:hover,
.brandingBtn button:hover,
.webDesignBtn button:hover {
    background-color: #ab641d;
    color: white;
}

@media (max-width: 460px) {
    .valuesBtn button,
    .brandingBtn button,
    .webDesignBtn button,
    .workTogetherBtn button {
        width: 35vw !important;
    }
}
@media (max-width: 400px) {
    .cover-links {
        flex-direction: column;
    }
    .hire-us {
        margin-top: 4vh;
    }
}
@media (max-width: 330px) {
    .valuesBtn button,
    .brandingBtn button,
    .webDesignBtn button,
    .workTogetherBtn button {
        width: 55vw !important;
    }
    .cover-heading h1 {
        font-size: 26px !important;
    }
    .cover-content {
        top: 6px !important;
    }
}

@media (max-width: 210px) {
    .valuesBtn button,
    .brandingBtn button,
    .webDesignBtn button,
    .workTogetherBtn button {
        width: 75vw !important;
    }
    .learn-more, .hire-us {
        width: 180px !important;
    }

    .cover-heading h1 {
        font-size: 18px !important;
    }
}

@media (max-width: 760px) {
    body {
        overflow-x: hidden;
    }

    .webDesignImg img,
    .brandingImg img,
    .valuesImg img {
        width: 90vw;
    }

    .workTogetherHeading h2 {
        font-size: 30px;
    }
}

@media (max-width:990px) {
    body {
        overflow-x: hidden;
    }

    .cover-heading h1 {
        font-size: 34px;
    }

    .cover-para {
        width: 70vw;
    }

    .featuredWork img {
        width: 90vw;
    }

    .webDesignContent,
    .valuesContent {
        margin-left: 1vw;
    }

    .valuesBtn button,
    .brandingBtn button,
    .webDesignBtn button,
    .workTogetherBtn button {
        width: 25vw;
    }

    .brandingImg {
        padding-left: 4vw;
    }

    .featuredWorkImg1,
    .featuredWorkImg2 {
        padding-top: 5vh;
    }

    .featuredWorkImg1 img,
    .featuredWorkImg2 img {
        padding-right: 5vw;
    }

    .review .cardPara {
        display: flex;
        justify-content: center;
    }
}