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

html,
body {
    height: 100%;
    width: 100%;
}

.main {
    height: 100%;
    width: 100%;
    padding: 0vh 6vw;
    background-image: url(./assets/images/desktop/image-header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.navigation {
    width: 100%;
    height: 10%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo_ravi {
    font-weight: 900;
    color: #fff;
}

ul {
    display: flex;
    list-style: none;
    gap: 55px;
    align-items: center;
}

.under-list {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}

.contect {
    padding: 12px 25px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 28px;
    color: #fff;
    border: none;
    background-color: #ffffff54;
    backdrop-filter: blur(5px);
}

.contect:hover {
    background-color: #023249;
    color: #ffffffb4;
}

.weare {
    height: 90%;
    width: 100%;
}

.heading {
    text-align: center;
    text-transform: uppercase;
    font-size: 70px;
    letter-spacing: 12px;
    padding-top: 10%;
    color: #fff;
}

.home-pic {
    width: 100%;
    padding-top: 67px;
    display: flex;
    justify-content: center;

    img {
        height: 15%;
    }
}

.page2 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.part1 {
    width: 100%;
    height: 50%;
    background-color: pink;
    display: flex;
}

.part1-text {
    width: 50%;
    height: 100%;
    background-color: #fff;
    padding-top: 8vh;
    padding-left: 6vw;
    padding-right: 4vw;

    h2 {
        font-size: 3.5rem;
    }

    p {
        width: 80%;
        font-size: 18px;
        line-height: 1.5rem;
    }

    button {
        margin-top: 30px;
        border: none;
        background-color: transparent;
        text-transform: uppercase;
        font-weight: 900;
        border-bottom: 3px solid transparent;
    }

    button:hover {
        box-shadow: 0px -7px 0px #FED200 inset;
        border-radius: 8px;
    }
}

.part1-pic {
    width: 50%;
    height: 100%;
    background-image: url(./assets/images/desktop/image-transform.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.part2 {
    width: 100%;
    height: 50%;
    display: flex;
}

.part2-pic {
    width: 50%;
    height: 100%;
    background-image: url(./assets/images/desktop/image-stand-out.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.part2-text {
    width: 50%;
    height: 100%;
    background-color: #fff;
    padding-top: 6vh;
    padding-left: 8vw;
    padding-right: 9vw;

    h2 {
        font-size: 2rem;
        font-weight: 700;
    }

    p {
        margin-top: 35px;
        width: 95%;
        font-size: 18px;
        white-space: wrap;
        text-transform: inherit;
        line-height: 1.8rem;
    }

    button {
        margin-top: 30px;
        border: none;
        background-color: transparent;
        text-transform: uppercase;
        font-weight: 900;
        border-bottom: 3px solid transparent;
    }

    button:hover {
        box-shadow: 0px -7px 0px #FF7364 inset;
        border-radius: 8px;
    }
}

.page3 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.page2_part1 {
    height: 50%;
    width: 100%;
    background-color: red;
    display: flex;
}

.first-img {
    width: 50%;
    height: 100%;
    background-image: url(./assets/images/desktop/image-graphic-design.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.second-ing {
    width: 50%;
    height: 100%;
    background-image: url(./assets/images/desktop/image-photography.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.page2_part2 {
    height: 50%;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client {
    font-size: 30px;
    padding-top: 5%;
    text-transform: uppercase;
    opacity: 0.6;
    text-align: center;
}

.custmers {
    width: 100%;
    height: 70%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}

.box {
    width: 33.33%;
    height: 100%;
    padding: 0px 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    img {
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }

    p {
        width: 90%;
        text-align: center;
        line-height: 1.5rem;
    }

    .sign {
        display: flex;
        flex-direction: column;
        align-items: center;

        .sign_para {
            width: 100%;
            opacity: 0.6;
        }
    }
}

.page4 {
    height: 70%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.page4_imgs {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.box_imgs1 {
    height: 100%;
    width: 25%;
    background-image: url(./assets/images/desktop/image-gallery-milkbottles.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.box_imgs2 {
    height: 100%;
    width: 25%;
    background-image: url(./assets/images/desktop/image-gallery-orange.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.box_imgs3 {
    height: 100%;
    width: 25%;
    background-image: url(./assets/images/desktop/image-gallery-cone.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.box_imgs4 {
    height: 100%;
    width: 25%;
    background-image: url(./assets/images/desktop/image-gallery-sugarcubes.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.discription {
    height: 50%;
    width: 100%;
    background-color: #90D4C5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.ravi {
    font-size: 34px;
    font-weight: 800;
    color: #287160;
}

.discription ul li {
    color: #287160d5;
    font-size: 20px;
    font-weight: 700;
}

.discription ul li:hover {
    color: #fff;
}