styles.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(
        hsl(218, 28%, 13%),
        hsl(216, 53%, 9%)
    );
}

#logo-nav-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.8rem;
    margin-bottom: 1.5rem;
}

#logo-nav-section nav a {
    font-family: 'Raleway', serif;
    text-decoration: none;
    margin-left: 0.65rem;
    color: hsl(0, 0%, 90%);
    font-size: 0.65rem;
}

#logo-nav-section nav a:active {
    color: hsl(0, 0%, 100%);
    text-decoration: underline;
}

#logo-nav-section .logo {
    width: 4.5rem;
}

#logo-nav-section img {
    width: 100%;
}

#header {
    margin-bottom: 10rem;
    /* height: 75vh; */
    /* text-align: center; */
}

#header h2 {
    font-family: 'Raleway', serif;
    color: hsl(0, 0%, 100%);
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 1rem 0;
}

#header p {
    font-family: 'Open Sans', serif;
    font-size: 0.75rem;
    color: hsl(0, 0%, 95%);
    line-height: 1.4;
    margin-bottom: 1rem;
}

#header button {
    font-family: 'Raleway', serif;
    background: linear-gradient(
        to right,
        hsl(176, 68%, 64%) 0%,
        hsl(198, 60%, 50%) 85%
    );
    color: hsl(0, 0%, 95%);
    border-radius: 30px;
    padding: 1rem 4.5rem;
    font-size: 1.2rem;
    margin-top: 1.6rem;
    border: none;
}

#header button:active {
    background: hsl(176, 68%, 64%);
}

#header .illustration-image-text-wrapper {
    padding: 0 2rem;
    text-align: center;
}

#header .illustration-image {
    width:  20rem;
    margin: 0 auto;
}

#header .illustration-image img {
    width: 100%;
}

#first-section {
    text-align: center;
    /* margin: 9.5rem 0 0; */
}

#first-section h3 {
    font-family: 'Raleway', serif;
    font-size: 1.2rem;
    color: hsl(0, 0%, 100%);
    margin: 1.2rem 0 1rem;
}

#first-section p {
    font-family: 'Open Sans', serif;
    color: hsl(0, 0%, 95%);
    line-height: 1.5;
    font-size: 0.75rem;
    padding: 1rem;
}

#first-section .feature {
    width: 20rem;
    margin: 5.5rem auto;
}

#mid-section {
    padding: 1rem;
}

#mid-section h3 {
    font-family: 'Raleway', serif;
}

#mid-section .link {
    font-family: 'Open Sans', serif;
    display: flex;
    border-bottom: 1px solid hsl(176, 68%, 64%);
    padding-bottom: 0.5rem;
    width: 11rem;
}

#mid-section .link .arrow-image {
    width: 1.5rem;
}

#mid-section .link .arrow-image img {
    width: 100%;
}

#mid-section .link a {
    text-decoration: none;
    color: hsl(176, 68%, 64%) 0%;
}

#mid-section .link a img {
    position: relative;
    top: 5px;
}

#mid-section p {
    font-family: 'Open Sans', serif;
    font-size: 0.75rem;
    color: hsl(0, 0%, 95%);
    margin: 1rem 0;
}

h3 {
    color: hsl(0, 0%, 100%);
    margin: 1.2rem 0;
}

.illustration-stay-image {
    width: 20rem;
    margin: 0 auto;
}

.illustration-stay-image img {
    width: 100%;
}

#second-section {
    margin: 8.5rem 0;
}

#second-section .customers {
    /* width: 16rem; */
    padding: 2rem;
}

#second-section .customers .customer {
    width: 15.5rem;
    padding: 1.5rem;
    border-radius: 8px;
    /* border: 1px solid #ccc; */
    margin: 1rem auto;
    /* width: 20rem; */
    background-color: hsl(219, 30%, 18%);
    z-index: 0;
}

#second-section .customers .customer p {
    font-family: 'Open Sans', serif;
    font-size: 0.8rem;
    line-height: 1.5;
}

#second-section .customer .exec-name {
    color: hsl(0, 0%, 100%);
    font-weight: 600;
}

#second-section .customer .exec {
    padding-top: 0.7rem;
}

#second-section .customer .exec .exec-profile {
    margin-left: 0.7rem;
}

#second-section .customer p {
    color: hsl(0, 0%, 95%);
}

#second-section .quotes-image {
    width: 1.5rem;
}

#second-section .quotes-image img {
    width: 100%;
    position: relative;
    top: 52px;
    left: 38px;
}

#second-section .exec {
    display: flex;
    align-items: center;
}

#second-section .exec img {
    width: 15%;
    border-radius: 50%;
}

#third-section {
    text-align: center;
    width: 16.5rem;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: hsl(217, 28%, 15%);
    border-radius: 10px;
}

#third-section h3 {
    font-family: 'Raleway', serif;
}

#third-section p {
    font-family: 'Open Sans', serif;
    font-size: 0.8rem;
    color: hsl(0, 0%, 95%);
    margin-bottom: 1.3rem;
    line-height: 1.4;
}

#third-section .input-button-wrapper {
    width: 16rem;
    margin: 0 auto;
}

#third-section .input-button-wrapper input {
    width: 90%;
    border-radius: 25px;
    padding: 0.75rem;
    background-color: hsl(0, 0%, 100%);
    border: none;
}

#third-section .input-button-wrapper button {
    font-family: 'Raleway', serif;
    width: 100%;
    display: block;
    margin: 1.5rem auto;
    border-radius: 25px;
    padding: 0.85rem 0.75rem;
    background: linear-gradient(
        to right,
        hsl(176, 68%, 64%) 0%,
        hsl(198, 60%, 50%) 85%
    );
    color: hsl(0, 0%, 100%);
    border: none;
}

#third-section .input-button-wrapper button:active {
    background: hsl(176, 68%, 64%);
}

footer {
    font-family: 'Open Sans', serif;
    padding: 0 1.5rem 0;
}

footer p {
    font-size: 0.75rem;
    color: hsl(0, 0%, 95%);
    line-height: 1.4;
    width: 20rem;
    margin: 1.2rem 0;
}

.footer-logo {
    padding: 0 1.6rem;
    margin: 4.5rem 0 2rem;
}

footer .contact {
    display: flex;
    align-items: center;
}

footer .contact img {
    margin-right: 1.3rem;
}

footer .location img {
    position: relative;
    top: -0.85rem;
    /* padding: 2rem; */
}

footer .section {
    margin: 3.5rem 0;
}

footer .social-icons {
    padding: 2.5rem 0 1.75rem;
    text-align: center;
}

footer .social-icons img {
    margin-left: 0.65rem;
}

@media(min-width: 1100px) {
    #header h2 {
        width: 27rem;
        margin: 2rem auto;
    }

    #header p {
        width: 22rem;
        margin: 0 auto;
    }

    #first-section {
        display: flex;
        flex-wrap: wrap;
        width: 55rem;
        margin: 0 auto;
    }

    #mid-section {
        display: flex;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }

    #mid-section h3 {
        width: 12rem;
    }

    #mid-section p {
        width: 25rem;
    }

    #second-section .quotes-image {
        width: 2.5rem;
    }

    #second-section .quotes-image img {
        width: 100%;
        position: relative;
        top: 60px;
        left: 212px;
        z-index: -1;
    }

    #second-section .customers {
        display: flex;
        width: 70%;
        margin: 0 auto;
    }

    .illustration-stay-image {
        width: 25rem;
    }

    #third-section {
        width: 60%;
        margin: 0 auto;
    }

    #third-section p {
        width: 34rem;
        margin: 1rem auto;
    }

    #third-section .input-button-wrapper {
        display: flex;
        align-items: center;
        width: 85%;
    }

    #third-section .input-button-wrapper button {
        width: 25%;
    }

    #third-section .input-button-wrapper input {
        width: 60%;
        padding: 0 2rem;
        margin: 0;
        height: 2.5rem;
    }
    
    footer {
        display: flex;
        align-items: center;
        width: 90%;
        margin: 0 auto;
    }

    footer .wrapper {
        width: 20%;
        /* margin-right: 2rem; */
    }

    footer .location {
        margin-right: 5rem;
    }

    footer .location img {
        position: relative;
        top: -26.5px;
    }

    footer .location p {
        position: relative;
        top: -5px;
    }

    footer .section {
        position: relative;
        top: 27px;
    }

    footer .terms {
        position: relative;
        top: 10px;
    }

    footer .social-icons {
        display: flex;
        position: relative;
        top: -25px;
    }

    .footer-logo {
        padding: 4.5rem 4.5rem 0;
        margin-bottom: -5rem;
    }
}