* {
    /* font-family: adobe-caslon-pro, serif; */
    margin: 0;
    padding: 0;
}

:root {
    --content-max-width: 1000px;
    --logo-font-size: 50px;
}

body {
    padding-left: 1em;
    padding-right: 1em;

}
  
.nav {
    padding: 0;
    padding-top: 10px;
    max-height: var(--logo-font-size);
    background-color: whitesmoke;
    z-index: 999;

    /* background: rgba( 255, 255, 255, 0.6 ); */
    --this-background-color: rgba( 245, 245, 245, 0.6 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    box-shadow: 0 0 0 10vmax var(--this-background-color);
    clip-path: inset(0 -100vmax);
    background-color: var(--this-background-color);
}
.logo-text {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: calc(var(--logo-font-size)*2);
    align-items: center;
    text-align: center;
}
  
#your-business-nav {
    margin-left: -2em
}


body {
    background-color: whitesmoke;
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.nav {
    margin: 0 auto;
    position: sticky;
    top: 0;
}


.nav-items {
    z-index: 999;
    font-family: adobe-caslon-pro, serif;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 3em;

    a {
        text-decoration: none !important;
        color: inherit;
    }
    .div1 { 
        grid-area: 1 / 1 / 2 / 2;
        text-align: end;
        font-family: "song myung";
        font-size: calc(var(--logo-font-size)/1.7);
        max-width: calc(var(--logo-font-size));
    }
    .div2 {
        grid-area: 1 / 2 / 2 / 4; 
        p {
          font-family: adobe-caslon-pro, serif;
          font-size: calc(var(--logo-font-size)*1.2);
          max-height: var(--logo-font-size);
          font-weight: bolder;
          text-align: left;
          vertical-align: center;
          line-height: 1.25em;
          transform: translateX(-.1em);
          color: #66A3AB;
          
        }
    }
    .div3 {
        grid-area: 1 / 2 / 2 / 4;
        font-family: "song myung";
        font-size: calc(var(--logo-font-size)/1.7);
        transform: translateX(-.2em);
    }

    .right-side {
        display: flex;
        justify-content: flex-end;
        gap: 3em;
        font-size: 1.3em;
        font-size: 1em;
        /* font-size: 1.3em+5cw; */
        /* font-size: clamp(1em, 1.5em-10cw, 1.5em); */
        font-size: clamp(1em, 1em + 1.7vw, 1.5em);
    }
}

.services-h1 {
    font-size: 4em;
    margin-top: 2em;
}

h1 {
    margin-top: 4em;
    font-size: 1.8em;
    letter-spacing: .15em;
    :nth-child(1) {
        font-size: 1.8em;
        letter-spacing: .15em;
    }
    :nth-child(2) {
        font-size: 1.3em;
        letter-spacing: .1em;
    }
}

.tenants {
    margin-top: 4em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 7em;
    grid-row-gap: 7em;
    .item {
        font-size: 1.6em;
        padding: .3em;
        /* max-width: 40ch; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-color: #66a3ab1e;
        line-height: 1.5em;

        border-radius: 50px;
        background: #f5f5f5;
        box-shadow:  20px 20px 60px #d0d0d0,
                     -20px -20px 60px #ffffff;
        
        p {
            margin-top: .8em;
        }
        a {
            justify-self: end;
            align-self: end;
            padding: 1em;
            text-decoration: none !important;
            color: hsl(187, 29%, 60%);
        }
    }
    .item:hover {
        border-color:hsl(187, 29%, 80%);
        a {
            /* color: hsl(187, 29%, 30%); */
            text-shadow: 4px 4px 7px rgba(236, 131, 20, 0.3);
            color: #dc3a3a;
        }
        transform: scale(101%);
    }
    :nth-of-type(2) .diamond,
    :nth-of-type(3) .diamond,
    :nth-of-type(6) .diamond{
        background-color: #dc3a3a;
    }
}

.title {
    display: flex;
    align-items: center;
    margin-bottom: .8em;

    .diamond {
        width: .8em;
        height: .8em;
        background-color: #487D84;
        margin-right: .6em;
        transform: rotate(45deg);
    }
    

    h2 {
        align-self: end;
    }
}

.leading-paragraph, .summary {
    margin: 1em 0 2em 1em;
    font-size: 2em;
    /* max-width: 46ch; */
    line-height: 1.4em;
}

.summary {
    margin-top: 4em;
}



.section, .question {
    margin-top: 4em;
    h2 {
        font-size: 2em;
    }

    p {
        font-size: 1.6em;
        line-height: 1.6em;
    }
}

.section p {
    margin-top: 1em;
}

.section-paragraph > p {
    margin-top: 1em;
    columns: 2;
    column-gap: 2em;
    word-wrap: pretty;
    column-rule: thin inset white;
}

ol {
    margin-left: 3em;
}

ol > li {
    margin: 1.5em;
    font-size: 1.4em;
    line-height: 1.4em;
}

.across , .benefits{
    padding-top: 3em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    
    h3 {
        font-size: 1.7em;
    }
    p {
        margin: 0;
        margin-top: .5em;
    }
}

.section:has(.benefits) {
    padding-bottom: 0;
    padding-top: 2em;
    box-shadow: 0 0 0 10vmax var(--this-background-color);
    clip-path: inset(0 -100vmax);
    background-color: var(--this-background-color);
}

.section:has(.benefits):nth-of-type(odd) {
    --this-background-color: #6ba6ae25;
    border-radius: 10% / 50%;
    
}

.section:has(.benefits):nth-of-type(even) {
    --this-background-color: rgba(252, 118, 120, 0.286);
    border-radius: 10% / 50%;
}

#summary-section p {
    margin-bottom: 1em;
}

form  {
    display: flex;
    flex-direction: column;
    /* gap: 2em; */
    font-size: 1.8em;

    
    input[type=email], input[type=tel], textarea {
        font-size: 1em;
        margin-top: .3em;
        margin-bottom: .8em;
    }

    input[type=email] {
        width: 30ch;
    }
    input[type=tel] {
        width: 15ch;
    }

    button[type=submit] {
        width: 200px;
        align-self: end;
        font-size: 1em;
        padding: 10px 0;
        border-radius: 10px;
        margin-bottom: 20px;
    }
}

.coming-soon-paragraph {
    margin-top: 4em;
    line-height: 1.5;
}