* {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

section {
    scroll-margin-top: 130px;
}


/* navbar section start */
.navLink,
.logo,
.quote {
    display: none;
}

.getInTouch .quote {
    border: #E67118 2px solid;
}

nav {
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.getInTouch {
    height: 60px;
    display: flex;
    align-items: center;
}

.getInTouch a {
    text-decoration: none;
    color: black;
    padding: 0 20px 0 30px;
    font-size: 18px;
}

.getInTouch .quote:hover {
    background-color: white;
}

.getInTouch a:hover {
    color: #E67118;
}

.menuBar {
    background-color: rgb(100, 100, 100);
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo2{
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
}

.menu {
    height: 35px;
    margin: 10px 15px;
    background-color: rgb(30, 29, 29);
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 5px;
    gap: 10px;
}

.menu span {
    color: white;
}

/* navbar section end */


/* hero section start */
.hero {
    height: 70vh;
    width: 100%;
    background-image: url(../Images/background/h1_hero.jpg);
    background-position: center;
    background-size: cover;
    color: white;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.hero button {
    padding: 20px 30px;
    background-color: black;
    color: white;
    border-radius: 40px;
    font-size: 18px;
    margin-top: 50px;
    border: 2px solid black;
}

.hero button:hover {
    background: none;
    border: 2px solid black;
    color: black;
}



.hero a:hover {
    color: black;
}

/* hero section end */


/* about section start */
.aboutUs {
    margin: 50px 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.highlight {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.highlightContent2 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.highlightContent2 div {
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: 20px;
}

.highlightContent2 h2 {
    color: #E67118;
    font-size: 40px;
}

.aboutUsContent {
    width: 95%;
    font-size: 20px;
    color: gray;
    padding-top: 50px;
    line-height: 1.5;
}

.aboutUsContent button {
    color: white;
    font-size: 18px;
    padding: 20px 30px 20px 30px;
    border: #E67118 2px solid;
    border-radius: 50px;
    background-color: #E67118;
    margin: 20px 7px;
}
.aboutUsContent button:hover {
    background-color: white;
    color: #E67118;
    border: 2px solid #E67118;
}


/* about section end */


/* our mission and motive section start */
.ourMission {
    background-color: rgb(252, 242, 235);
    padding: 50px 10px 0 10px;
}

.ourMission h2 {
    font-size: 40px;
    padding-bottom: 30px;
}

.ourMission p {
    color: #656565;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    padding-bottom: 30px;
}

.ourMission img {
    height: 100%;
    width: 100%;
    padding-top: 30px;
}

.ourMission a {
    text-decoration: none;
    color: #E67118;
    border: 2px solid #E67118;
    padding: 14px 32px;
    font-size: 18px;
    background: none;
    border-radius: 40px;
}

.ourMission a:hover {
    background-color: #E67118;
    color: white;
}

/* our mission and motive section start */


/* collaboration section start */
.collaboration {
    margin-top: 70px;
    padding: 10px;
    text-align: center;
}

.collaboration h2 {
    line-height: 1.2;
    padding: 10px;
    padding-bottom: 25px;
}

.collaboration p {
    padding: 10px;
}

.brands {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px;
}

.brands img {
    height: 100px;
    width: 150px;
}

/* collaboration section end */

/* projects section start */
.designs {
    width: 100%;
    background-color: #F2F4F8;
    margin-bottom: 70px;
}

.designImg {
    height: 100%;
    width: 100%;
}

.designDiscription {
    padding: 50px 25px;
}

.designDiscription h2 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 10px;
}


.p1 {
    margin-bottom: 40px;
    color: #545454;
    font-size: 20px;
    font-weight: 400;
}

.stars {
    font-size: 25px;
}

.p2 {
    margin-top: 40px;
    color: #545454;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.purchaseDetails {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
    color: #545454;
    padding-bottom: 60px;
}

.price,
.author {
    color: #E67118;
    padding-top: 15px;
}

.designs a {
    text-decoration: none;
    color: white;
    padding: 20px 30px;
    background-color: black;
    border-radius: 40px;
    font-size: 18px;
    margin-top: 50px;
    border: 2px solid black;
}

.designs a:hover {
    color: black;
    background: none;
}

/* projects section end */


/* services section start */
.services {
    padding: 10px;
}

.services h2 {
    padding-bottom: 30px;
}

.cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.cards img {
    height: 50px;
    width: 50px;
}

.cards h4 {
    font-size: 25px;
    color: #635c5c;
    ;
}

.cards p {
    color: #656565;
    line-height: 1.5;
}

/* services section end */


/* testimonial section start */
.testimonial {
    background-color: #F1C4A3;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.testimonial h2 {
    padding: 50px 10px;
}

.reviewCard {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
    width: 270px;
    background-color: white;
    margin-bottom: 50px;
    padding: 50px 30px 40px 30px;
    gap: 20px;
    box-sizing: border-box;
    line-height: 1.5;
}

.reviewCard img {
    height: 20px;
    width: 20px;
}

.reviewCard p,
.reviewCard strong {
    color: #656565;
    font-size: 18px;
}

/* testimonial section end */


/* our reach section start */
.ourReach {
    background-color: rgb(252, 242, 235);
    padding: 70px 15px 0;
}

.ourReach h2 {
    padding-bottom: 30px;
}

.ourReach p {
    color: #656565;
    font-size: 18px;
    padding-bottom: 50px;
}

.ourReach a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    padding: 20px 30px 20px 30px;
    border-radius: 50px;
    border: none;
    background-color: #E67118;
    margin: 20px 7px;
}

.ourReach img {
    height: 100%;
    width: 100%;
    padding-top: 100px;
}

/* our reach section end */

/* help section start */
.help {
    background-color: rgb(30, 30, 30);
    padding: 70px 15px;
    color: white;
}

.help h2 {
    padding-bottom: 20px;
}

.help p {
    color: rgb(175, 175, 175);
    font-size: 18px;
    padding-bottom: 50px;
}

.help a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    padding: 20px 30px 20px 30px;
    border-radius: 50px;
    background-color: #E67118;
}

/* help section end */


/* footer section start */
.footer {
    background-color: #F2F4F8;
    padding: 70px 10px 0 10px;
}

.companyDetails {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #635c5c;
    padding-bottom: 30px;
}

.companyDetails img {
    width: 150px;
}

.phone {
    color: #E67118;
    font-size: 24px;
}

.footer li {
    list-style: none;
    padding: 10px;
}

.footer a {
    text-decoration: none;
    color: #635c5c;
}

.footer a:hover {
    text-decoration: underline;
}

.footer h3 {
    padding: 40px 0 30px 0;
}

.footerContent p {
    color: #656565;
    font-size: 18px;
    padding-bottom: 30px;
}

.subscribe {
    width: 70%;
    display: flex;
    gap: 20px;
    border: 2px solid #E67118;
    border-radius: 50px;
    padding: 20px 30px 20px 30px;
    margin-bottom: 70px;
}

.subscribePage {
    width: 300px;
}

.subscribe input {
    border: none;
    width: 100%;
    font-size: 18px;
    background: none;
}

.subscribe input:focus {
    outline: none;
}
.subscribe button {
    border: none;
    background: none;
}

.copyright {
    color: #545454;
    padding: 20px;
    text-align: center;
}

/* footer section end */


/* media query for tablet devices */
@media(min-width:768px) {
    .getInTouch a {
        padding: 12px 20px;
    }

    .quote {
        display: block;
        background-color: #E67118;
        color: white;
        border-radius: 50px;
    }


    .hero {
        height: 100vh;
    }

    .hero h1 {
        width: 560px;
        line-height: 1.5;
        font-size: 44px;
    }


    .aboutUs {
        padding: 30px;
    }

    .aboutUs>div {
        width: 80%;
    }

    .highlightContent2 {
        flex-direction: row;
        gap: 50px;
    }

    .ourMission {
        padding-top: 0;
    }

    .ourMission>div {
        padding: 30px;
        padding-bottom: 0;
        width: 70%;
    }

    .ourMission h2 {
        width: 55%;
    }

    .ourMission img {
        height: 100%;
        width: 110%;
        padding-top: 0;
        margin-top: 30px;
    }

    .collaboration h2 {
        padding: 10px 80px 20px 80px;
    }

    .brands {
        padding: 40px 10px;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .designs h2 {
        font-size: 40px;
        width: 50%;
    }

    .designDiscription p {
        width: 78%;
    }


    .services {
        padding: 35px;
    }

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

    .servicesContent {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .cards {
        width: 45%;
    }


    .reviews {
        padding: 40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .reviewCard {
        width: 40%;
    }


    .reachContent {
        width: 65%;
    }

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


    .help {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .needHelp {
        width: 60%;
    }


    .footer {
        padding-left: 50px;
    }

    .subscribePage {
        width: 60%;
    }

    .foot {
        width: 50%;
    }

    .quickLinks {
        display: flex;
        flex-wrap: wrap;
    }

}


/* media query for desktop devices */
@media(min-width:992px) {
    .menuBar {
        display: none;
    }

    .mainNav {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .logo,
    .navLink {
        display: block;
    }

    .navLink {
        display: flex;
    }

    .navLink a {
        text-decoration: none;
        color: black;
        padding: 0 20px 0 30px;
        font-size: 18px;
    }


    .hero {
        height: 80vh;
    }

    .aboutUs>div {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }

    .highlight {
        width: 60%;
    }

    .aboutUsContent {
        width: 40%;
    }

    .ourMission>div {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0
    }

    .mission {
        width: 40%;
    }

    .missionImg {
        width: 40%;
    }

    .collaboration {
        margin-bottom: 100px;
    }

    .designs {
        display: flex;
    }

    .designs>div {
        width: 50%;
    }

    .designDiscription {
        width: 100%;
        padding: 50px;
    }

    .cards {
        width: 30%;
    }

    .reviewCard {
        width: 20%;
    }

    .ourReach {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 2px 0 0 20px;
    }

    .ourReach img {
        padding: 0;
    }

    .footerContent {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footerData {
        width: 30%;
    }

    .foot h3 {
        padding-top: 0;
    }

    .companyDetails {
        padding-top: 45px;
    }
}