@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700;900&display=swap');


* {
    padding: 0%;
    margin: 0%;
}

body {
    background: url(./images/retro-living-room-interior-design.jpg) no-repeat;
    background-size: 100% 100%;
    background-position: center;
    height: 100vh;
    color: #fff;
    font-family: Montserrat;
    overflow: hidden;
}

/* ------------------- */
/* -------Navbar------ */
/* ------------------- */

.ham {
    width: 3%;
    filter: brightness(0) invert(1);
    display: none;
}

nav {
    display: flex;
    flex-direction: row;
    width: 90%;
    height: 10vh;
    margin: 0 auto;
    padding: 20px 0;
    align-items: center;
    justify-content: space-between;
}


.part1 h1 {
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: 700;
}

.part2 {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style-type: none;
    position: relative;
    gap: 2rem;
}

.part2::after {
    content: "";
    border-bottom: #fff solid 2px;
    height: 2px;
    width: 79%;
    position: absolute;
    bottom: 0%;
    right: 0%;
}

.list {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding-left: 0;
    gap: 3rem;
}

.list-items {
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 1px;
    background: linear-gradient(#fff, #fff) bottom center no-repeat;
    background-size: 0% 1px;
    transition: all 0.45s;
}

.list-items:hover {
    background-size: 100% 1px;
    cursor: pointer;
}

.call_us {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 20%;
}

.call-img {
    width: 20%;
    filter: brightness(0) invert(1);
}


/* ------------------- */
/* ----Main section--- */
/* ------------------- */

.main {
    margin-top: 5%;
    padding: 0 1% 0 5%;
}

.main h1 {
    font-size: 3.3rem;
    font-weight: 700;
}

.btn {
    margin-top: 6%;
    font-family: Montserrat;
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
    border: #fff 2px solid;
    border-radius: 25px;
    padding: 0.4em 1.1em;
    cursor: pointer;
}

.btn:hover {
    background: #0f3954;
    border: 2px solid transparent;
    transition: all 200ms ease-in-out;
}

/* --NOTES-- */
.note1 {
    position: absolute;
    top: 23%;
    right: 10%;
}

.note2 {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 65%;
    right: 30%;
}

.main-note {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0.226);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 1.1em 2.2em;
    line-height: 1.5;
}

.box {
    display: block;
    border-radius: 25px;
    height: 3.4em;
    width: 7em;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.puzzle-img {
    width: 100%;
}

.line-circle1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.line1 {
    background-color: #fff;
    width: 1px;
    height: 5rem;
}

.circle1 {
    background-color: #fff;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.line-circle2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.line2 {
    background-color: #fff;
    width: 5rem;
    height: 1px;
}

.circle2 {
    background-color: #fff;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}


/* BREAKPOINT FOR SMALL-SCREEN LAPTOPS */
@media (max-width:1024px) {
    html {
        font-size: 10px;
    }

    body {
        background-size: cover;
    }

}


/* BREAKPOINT FOR TABLETS AND MOBILE */
@media (max-width:714px) {
    html {
        font-size: 8px;
    }

    body {
        background-color: #2a5978;
        background-size: cover;
    }

    .part2 {
        display: none;
    }

    .ham {
        width: 4%;
        display: block;
    }

    .content-box {
        height: 35vh;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .note1 {
        top: 50%;
    }

    .idea-img {
        width: 70%;
    }
}