* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
  font-family: 'Space Grotesk', sans-serif;
  background-color: #F7F6EE;
}

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

/* body > header>nav + main */
main {
    width: 100%;
}

nav {
    width: 100%;
    height: 15vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 9vw 0vw 8vw;
    user-select: none;
}

/* nav > (a>h3>span) + (ul>li>a) */
nav a {
    text-decoration: none;
}


nav a>h3 {
    text-transform: uppercase;
    font-weight: 400;
    color: #232322;
    letter-spacing: 1.5px;
    font-size: 35px;
   
}

/* nav > (a>h3>span(logo_style))  */
#logo_style {
    font-weight: bold;
}

/* ul */
.nav-links {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    column-gap: 87px;
}

/* ul > li > a */
.nav-links li>a {
    text-decoration: none;
    font-family: 'Lora', serif;
    font-size: 20px;
    color: #232322;
}

.nav-links li>a:focus {
    border-bottom: #232322 solid 1px;
    padding-bottom: 1.5px;
    color: #232322;
}

.nav-links li>a:hover {
    border-bottom: #232322 solid 1px;
    padding-bottom: 1.5px;
    color: #232322;
}


/* main > (section(hero)> div(text)+ div(img) */
.hero_text {    
    width: 100%;
    height: 73vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;   
    
}

/*(section(hero)> div(hero_text)> h1 + p +btn */
.hero_text h1{  
   font-size: 4.1vw; 
   font-weight: 300;
   font-family: 'Libre Baskerville', serif;
}

.hero_text p {
    text-align: center;
    width: 53%;
    margin: 26.6px 0;
    font-family: 'Lora', serif;
    font-size: 1.65vw;
    line-height: 30px;
    font-weight: 200;
}

.hero_text button{
    padding: 12px 22px;
    border-radius: 30px;
    background-color: #232323;
    border-style: none;
    color: white;
    font-size: 1.3vw;
    font-weight: 500;
    letter-spacing: 1.2px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 30px;
}

.hero_text button:hover {
    background-color: #EABABA;
    cursor: pointer;
}

/* (section(hero)> div(text)+ (div>img(hero_illus) */
.hero_illus {
    width: 100%;
}

.hero_illus img {
    width: 100%;
}

/* (section(services)> div(block)+div(illus) */
#services {
    height: 80vh;
    margin-top: 60px;

}

/* div(block)> div(text)+div(bar)+div(service-list) > h2) */
.service-block  {
    display: flex;
    justify-content: center;
    padding-right: 100px;

}

.service-block h2{
    font-family: 'Libre Baskerville', serif;
}

.service-block p {
    font-family: 'Lora', serif;
}

/* div(text) > h2+p */
.service-text {
    width: 39vw;
    padding-right: 81px;
}

.service-text h2 {
    font-size: 3vw;
    font-weight: 200;
    line-height: 45px;
    text-align: right;
}

.service-text h2::after {
    content: '';
    display: block;
    width: 4vw;
    height: 25px;
    border-bottom: #232322 solid 5px;
    position: relative;
    left: 396px;
}

.service-text p {
    font-size: 1.5vw;
    font-weight: 300;
    width: 64%;
    text-align: right;
    margin-top: 25px;
    line-height: 30px;
    margin-left: 161px;
}

/* div(list) > ul>li>div>h2+p */
.service-list {
    height: 113vh;
    border-left: #8D8D89 solid 1.5px;
    width: 30vw;
    padding-left: 40px;
}

.service-list ul {
    list-style: none;
}

.service-list img {
    display: inline-block;
    width: 68px;
    height: 68px;
}

.service-list ul li:first-child {
    margin-top: -29px;
}

.service-list li {
    display: inline-block;
}

.list-1 {
    margin-bottom: 10px;
}

.list-2 {
    margin-bottom: 10px;
}

.item-styles {
    position: relative;
    left: 130px;
}

.item-styles h2 {
    font-size: 1.9vw;
    font-weight: 300;

}

.item-styles p {
    width: 17.7vw;
    margin-top: 20px;
    font-weight: lighter;
    line-height: 26px;
    font-size: 1.3vw;
}

.list-item-1 {
    top: -53px;
}

.list-item-2 {
    top: -57px;
}

.list-item-3 {
    top: -59px;
}

/* section(services)> div(block)+div(illust) */
.service-illus {
    width: 22vw;
    height: 93vh;
    display: flex;
    justify-content: left;
    position: relative;
    top: -530px;
    user-select: none;
}

.service-illus img {
    width: 22vw;    
}

p::selection, 
h1::selection, 
h2::selection,  
button::selection,
img::selection {
    background-color: #F0A6C0;
}