/* ========================================================== */
/*                          MAIN CSS                          */
/* ========================================================== */



h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
  }

.hero-section {
    position: relative;
    background-image: url(img/hero-bg-16.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
@media (max-width: 576px) {
    .hero-section {
        background-position: center bottom;
        background-size: auto 115%;
    }    
}

/* this adds angled edje to hero block */
.hero-section:after { 
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" fill="%23f1eeea"><polygon points="0,100 100,0 100,100"></polygon></svg>');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}
@media (max-width: 767px)  {
	.hero-section:after { height: 3rem; }
}

.section {
	margin-top: 5rem;
	margin-bottom: 5rem
}

.bg-grape {
    background-color: var(--bs-primary);
    background-image: url(img/grape.svg);
    background-size: 400px 400px;
    background-position: bottom -80px right -50px;
    background-repeat: no-repeat;
}
@media (max-width: 576px) {
    .bg-grape {
        background-color: var(--bs-primary);
        background-image: url(img/grape.svg);
        background-size: 400px 400px;
        background-position: bottom -100px right -200px;
        background-repeat: no-repeat;
    }
}

/* Check list style */
.is-style-check-list {
    list-style-type: '✓ ';
    padding-left: 1.2rem;
    line-height: 1.6;
}
ul.is-style-check-list li::marker {
    color: var(--bs-primary);
    font-size: 1.2em;
    font-weight: bold;
}
ul.is-style-check-list li {
    margin-bottom: 0.65rem;
}
ul.two-column-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


/* Header Shadow */
[data-content-shadow] {
    position: relative;
}
[data-content-shadow]:before {
    content: attr(data-content-shadow);
    font-size: 2em;
    line-height: inherit;
    position: absolute;
    top: -130%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 180%;
    color: currentColor;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
    opacity: 0.15;
    z-index: -1;
}