@font-face {
    font-family: 'NotoSerif-Regular';
    src: url('fonts/NotoSerif-Regular.ttf') format('truetype'),
         url('fonts/NotoSerif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif-Bold';
    src: url('fonts/NotoSerif-Bold.ttf') format('truetype'),
         url('fonts/NotoSerif-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerif-Italic';
    src: url('fonts/NotoSerif-Italic.ttf') format('truetype'),
         url('fonts/NotoSerif-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html { scroll-behavior: smooth;}
body{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: 300;
    background: #f3f4f4;
    color: #000;
    font-family: 'NotoSerif-Regular';
}
b {font-family: 'NotoSerif-Bold';}
p {line-height: 1.5; margin-bottom: 12px; margin-top: 0px;;;}
a,a:hover { text-decoration:none; }
ul, ol, li  {padding-left: 0px; list-style-type:none; margin: auto}
h1, h2, h3, h4, h5, h6{margin-bottom: 0px; margin-top: 0px;}
.width {width: 100%; max-width: 1200px; margin: auto;}
.align-left {text-align: left;}
.align-right {text-align: right;}
.align-center {text-align: center;}
.align-justify {text-align: justify;}
.last-align-center {text-align-last: center;}
.last-align-left {text-align-last: left;}
.last-align-right {text-align-last: right;}

.container { 
    max-width:1440px; 
    margin:auto;
    padding-left: 15px;
    padding-right: 15px;
}
header {
    position: fixed; 
    top: 0px; 
    left: 0;
    right: 0;
    width: 100%;
/*
    background-color: #fff;
    background: -webkit-linear-gradient(180deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    background: -moz-linear-gradient(180deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    background: linear-gradient(180deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 38%, 56% 39%, 50% 100%, 44% 39%, 0 38%);
*/
    z-index: 99;
}

header .header {
    background-image: url(../source/header-bg.png);
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: auto;
/*    clip-path: polygon(0 0, 100% 0, 100% 35%, 56% 37%, 50% 97%, 44% 37%, 0 35%); */
    position: relative;
}

header .header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    text-align: center;
}
header .header-content p {font-size: 14px; margin-top: 10px; text-align: left}
header .header-content .logo {padding-top: 10px; padding-bottom: 70px;}
header .header-content .logo img {width: 100%; max-width: 150px;}

main {padding-top: 35px;}

.section .images {position: relative;}
.section .images > img {display: block; width: 100%;}
.section .text {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.section .text p {
    color: #fff;
    text-shadow: 0px 0px 3px #000000;
    font-size: 22px;
    font-family: 'NotoSerif-Italic';
    font-weight: 200;
    padding: 0px 10px;
}
.section .text img {}

.section-one {
    background-image: url(../source/section-one-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 2rem 0;
    color: #fff;
}

.section-one .grid-content{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    grid-gap: 40px;
    
}
.section-one .grid-content .grid-column {position: relative;}
.section-one .grid-content .grid-column:after {
    content: '';
    display: block;
    width: 2px;
    height: 22vh;
    background: -webkit-linear-gradient(0deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    background: -moz-linear-gradient(0deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    background: linear-gradient(0deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translate(0%, -50%);
}
.section-one .grid-content .grid-column:last-child:after{display: none;}

.section-one .about-title {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    max-width: 300px;
}

.section-one .about-title .title{
    font-size: 24px;
    font-weight: bold;;
    font-family: 'NotoSerif-Italic';
    line-height: 1.2;
}
.section-one .about-title .subtitle{
    font-size: 24px;
    font-family: 'NotoSerif-Italic';
    line-height: 1.2;
}


.section-three {
    padding: 2rem 0;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}
.section-three .title {
    color: #8c6940;
    text-transform: uppercase;
    font-size: 25px;
    font-family: 'NotoSerif-Italic';
}
.section-three .video {
    margin: 20px auto; 
    max-width: 768px;
    border: 3px solid transparent;
    background: -webkit-linear-gradient(140deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    background: -moz-linear-gradient(140deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
    background: linear-gradient(140deg, rgba(100,80,40,1) 0%, rgba(255,194,111,1) 12%, rgba(170,130,81,1) 34%, rgba(248,204,116,1) 50%, rgba(255,230,139,1) 65%, rgba(255,206,131,1) 78%, rgba(166,127,79,1) 90%, rgba(112,78,0,1) 100%);
}
.section-three .video video {display: block;}
.section-three p {color: #5d5d5d}
.section-three p b { color: #8c6940; font-size: 18px;}

.section-four {
    background-image: url(../source/section-four-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 4rem 0 2rem;
    color: #fff;
}

.section-four b {word-spacing: 2px;}

.section-four .box-title{
    text-align: center;
    max-width: 850px;
    margin: 0px auto 20px;
    border: 1px solid #fff;
    padding: 30px 5% 15px;
    position: relative;
}

.section-four .box-title .box-icon{
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
}

.section-four .box-title .title{
    font-size: 26px;
    font-family: 'NotoSerif-Italic';
    margin-bottom: 12px;
}

.section-four .grid-content {
    max-width: 991px;
    margin: 1rem auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    grid-gap: 2%;
}
.section-four .grid-content .box-images {
    margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75); 
    box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
}
.section-four .grid-content img {
    display: block;
    width: 100%;
    border-bottom: 3px solid transparent;
    background: -webkit-linear-gradient(90deg, rgba(200,153,46,1) 0%, rgba(181,126,16,1) 14%, rgba(249,223,123,1) 30%, rgba(249,223,123,1) 54%, rgba(181,126,16,1) 90%);
    background: -moz-linear-gradient(90deg, rgba(200,153,46,1) 0%, rgba(181,126,16,1) 14%, rgba(249,223,123,1) 30%, rgba(249,223,123,1) 54%, rgba(181,126,16,1) 90%);
    background: linear-gradient(90deg, rgba(200,153,46,1) 0%, rgba(181,126,16,1) 14%, rgba(249,223,123,1) 30%, rgba(249,223,123,1) 54%, rgba(181,126,16,1) 90%);
}

.section-five {
    background-image: url(../source/section-five-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 2rem 0;
}
.section-five .qr-code {
    margin-bottom: 20px;
    margin-top: 20px;
}
.section-five .qr-code img{
    width: 100%;
    max-width: 220px;
}
.section-five .title {
    color: #8c6940;
    text-transform: uppercase;
    font-size: 34px;
    font-family: 'NotoSerif-Italic';
}
.section-five p {
    max-width: 991px;
    margin: 0px auto 12px;
}
.section-five p:last-child {
    margin-bottom: 0px;
}

footer {
    background-color: #393939;
    text-align: center;
    padding: 10px 0px;
}
footer .copyright {color: #fff;}

@media (max-width: 991px){
   header .header-content {grid-template-columns: 1fr;}
   header .header-content .header-column:first-child,
   header .header-content .header-column:last-child {display: none;}
  .section-one .grid-content{grid-template-columns: 1fr; grid-gap: 0px;}
  .section-one .grid-content .grid-column:after{display: none}
  .section-two .inner-section ul li {font-size: 16px;}
  .section-two .inner-section ul li span {font-size: 70px;}
}

@media (max-width: 768px){
   header .header {background-size: 150rem;}
   header .header-content .logo img {max-width: 105px;}
   main {padding-top: 25px;}
   .section .images{
        position: relative;
        width: 100%;
        height: 363px;
        overflow: hidden;
   }
  .section .images > img {
        object-fit: cover;
        position: absolute;
        height: 363px;
        width: 100%;
        top: 0;
        left: 0;
  }
  .section-four .grid-content{grid-template-columns: 1fr 1fr;}
  .section-four .grid-content .grid-box:last-child {
      grid-column: 1 / span 2;
      max-width: 50%;
      margin: auto;
    }
}

@media (max-width: 480px){
   header .header{ background-image: url(../source/header-bg-mobile.png); }
   header .header-content .logo img {max-width: 80px;}
  .section-two .inner-section ul {display: grid; grid-template-columns: 1fr 1fr;}
  .section-two .inner-section ul li {display: block; width: 100%; text-align: left;}
  .section-four .grid-content{grid-template-columns: 1fr;}
  .section-four .grid-content .grid-box:last-child  {grid-column: 1;  max-width: 100%;}
}