@charset 'utf-8';
* { box-sizing: border-box; }
:root {
    --darak-orange: #FFB144;
    --darak-black: #4F4A45;
    --darak-white: #F3EEE8;
    --back-white: #FBF5EA;
    --font-white: #FBF5EA;
    --font-white-50: #a09f9d;
    --font-black: #2c2827;
    --font-gold: #cd974c;
    --link-hover:#EDE5D2;
}
html{
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
body {
    font-family: 'SUIT', sans-serif;
    margin:0;
    padding:0;
    background-color:var(--main-bg-color);
    color:var(--font-black);
    font-size: 0.9em;
}
a {
    transition:filter 200ms ease;
}
a:hover {
    opacity:0.9;
    cursor: pointer;
}
.container {
    max-width:720px;
    margin:0 auto;
    padding:0 16px;
}

header {
    background-color:var(--darak-black);
    height:48px;
}
header .container {
    height:100%;
    display:flex;
    border-left:var(--darak-orange) 8px solid;
}
header .home {
    display:flex;
    align-items: center;
    color:var(--darak-white);
    text-decoration: none;
    margin-left:-8px;
}
section.home {
    min-height:500px;
    height:calc(70vh - 48px);
    background-image:url(./img/bg_home.jpg);
    background-size:cover;
    background-position:center top;
    position:relative;
    z-index: -1;
}

section.home h1 {
    color:#fff;
    font-weight:700;
    text-shadow: var(--darak-black) 0px 4px 16px;

}
section.home h1 .c-orange {
    font-weight: 900;
    color:var(#fff);
}
section.home::before {
    position:absolute;
    width:100%;
    height:100%;
    background: rgb(79,74,69);
background: -moz-linear-gradient(0deg, rgba(79,74,69,0.5) 0%, rgba(79,74,69,0.15) 33%, rgba(79,74,69,0) 48%, rgba(79,74,69,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(79,74,69,0.5) 0%, rgba(79,74,69,0.15) 33%, rgba(79,74,69,0) 48%, rgba(79,74,69,0) 100%);
background: linear-gradient(0deg, rgba(79,74,69,0.5) 0%, rgba(79,74,69,0.15) 33%, rgba(79,74,69,0) 48%, rgba(79,74,69,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4f4a45",endColorstr="#4f4a45",GradientType=1); 
    content: ' ';
    left:0;
    top:0;
    z-index: -1;
}
section.home .container {
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom:32px;
}
section.home .faq-links {
    list-style:none;
    padding:0;
    margin:0;
}

section.home .faq-links li {
    margin:0;
    margin-bottom:8px;
    display:flex;
    flex-direction: column;
}
section.home .faq-links li a {
    padding:8px 16px;
    border-radius: 8px;
    margin-bottom:4px;
    text-decoration: none;
    background:#FFF;
    color:var(--font-black);
    box-shadow: rgba(79, 74, 69,0.25) 0px 4px 16px;
}
section.coupon-link {
    background-color:var(--darak-orange);
    text-align: center;
    height:56px;
    display:flex;
    align-items: center;
    justify-content: center;
}
section.faq-categories .faq-category-list {
    display:grid;
    grid-template-columns:calc(50% - 8px) calc(50% - 8px);
    padding:0;
    list-style:none;
    flex-wrap: wrap;
    gap:16px;
    margin-top:24px;
    margin-bottom: 56px;
}
section.faq-categories .faq-category-list > li {
    flex-grow:2;
}
section.faq-categories .faq-category-list > li > a{
    text-decoration: none;
    color:var(--darak-black);
    display:flex;
    flex-direction: column;
    flex-grow:1;
    border-radius: 16px;
    border: 2px var(--darak-black) solid;
    background:var(--darak-white);
    height:156px;
    justify-content: flex-end;
    padding:16px;
    box-shadow: rgba(70, 55, 48,0.25) 0px 8px 16px;
    position:relative;
    overflow: hidden;
}
section.faq-categories .faq-category-list > li > a::after {
    border-bottom: var(--darak-orange) 16px solid;
    content: ' ';
    position:absolute;
    left:0;
    bottom:0;
    right:0;
}
section.faq-categories .faq-category-list > li > a > h1 {
    margin-bottom:16px;
}
section.faq-categories .faq-category-list > li > a > p {
    margin-top:0px;
}

section.inner-banner {
    background-image:url(img/bg_banner.jpg);
    background-size:cover;
    background-position:center center;
    height:172px;
    position:relative;
    z-index: -1;
}
section.inner-banner ::before {
    position:absolute;
    width:100%;
    height:100%;
    background: rgb(79,74,69);
background: -moz-linear-gradient(0deg, rgba(79,74,69,0.5) 0%, rgba(79,74,69,0.1) 33%, rgba(79,74,69,0) 48%, rgba(79,74,69,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(79,74,69,0.5) 0%, rgba(79,74,69,0.1) 33%, rgba(79,74,69,0) 48%, rgba(79,74,69,0) 100%);
background: linear-gradient(0deg, rgba(79,74,69,0.5) 0%, rgba(79,74,69,0.1) 33%, rgba(79,74,69,0) 48%, rgba(79,74,69,0) 100%); 
    content: ' ';
    left:0;
    top:0;
    z-index: -1;
}
section.inner-banner .container {
    display:flex;
    height:100%;
    flex-direction: column;
    justify-content: flex-end;
    color:#fff;
    font-weight:700;
    text-shadow: var(--darak-black) 0px 4px 16px;
}
section.inner-banner .container h3 {
    margin-bottom: 8px;
}
section.inner-banner .container h1 {
    margin-top:0;
    margin-bottom: 24px;
    font-weight:900;
}

section#contact-page {
    background: var(--darak-black);
    color: var(--darak-white);
}

#contact-form {
    display:flex;
    flex-direction: column;
    padding:16px 0px;
    margin:0;
}

#contact-form select {
    background:var(--darak-white);
    border:none;
    height:48px;
    padding:16px;
    border-radius: 16px;
}

#contact-form input {
    background:var(--darak-white);
    border:none;
    height:48px;
    padding:16px;
    border-radius: 16px;
}

#contact-form textarea {

    background:var(--darak-white);
    border:none;
    min-height:256px;
    padding:16px;
    border-radius: 16px;
    margin-bottom:16px;
}
#coupon-input  {
    background:var(--darak-orange);
    padding-bottom:64px;
}
#coupon-input .banner {
    background-image:url(img/bg_coupon.jpg);
    background-size:cover;
    background-position: center center;
    height: 400px;
}

#coupon-form {
    margin:0 16px;
    background-color: #fff;
    padding:24px;
    box-shadow: rgba(70, 55, 48,0.25) 0px 8px 16px;
    border-radius: 32px;
    transform: translateY(-32px);
    border:var(--darak-black) 2px solid;
    background-color: var(--darak-white);
}

#coupon-form > h1 {
    margin-top:16px;
}
#coupon-form input[type="text"] {
    display: flex;
  align-items: center;
  justify-content: center;
  color: var(--darak-black);
  border:var(--darak-black) 1px solid;
  text-align: center;
  margin-bottom:16px;
  height: 48px;
  width: 100%;
  border-radius: 16px;
  font-weight: bold;
}
#coupon-form .description {
    margin-top:56px;
}
#coupon-input .banner .container {
    display:flex;
    height:100%;
    justify-content: center;
    align-items: flex-end;
}
#coupon-input .banner .logo {
    width:100%;
    margin-bottom:64px;
    max-width: 480px;
}
form button {
    display:flex;
    align-items: center;
    justify-content: center;
    color:var(--darak-black);
    background-color: var(--darak-orange);
    cursor:pointer;
    border:none;
    height:48px;
    width:100%;
    border-radius: 16px;
    font-weight:bold;
}
form button:disabled {
    opacity: 0.5;
    cursor:not-allowed;
}

section.coupon-link a {
    color:var(--font-white);
    font-weight: bold;
    text-decoration: none;
}
section.contact {
    background:var(--darak-black);
    color:var(--font-white);
    text-align: center;
    padding:16px 0px;
    padding-bottom:36px;
    border-bottom:1px solid var(--font-white-50);
}
section.contact p {
    margin-bottom: 36px;
}
section.contact a {
    padding: 16px 64px;
    border:var(--font-white) 1px solid;
    border-radius: 36px;
    color:var(--font-white);
    text-decoration: none;
    display: inline-block;
}
footer {
    background:var(--darak-black);
    color:var(--font-white);
    text-align: center;
    padding:16px 0px;
}
#board-list .container {
    margin:16px 0px;
}
#board-list .list {
    list-style:none;
    margin:0;
    padding:0;
}