@charset "UTF-8";

@font-face {
    font-family: "TTR";
      src: url("fonts/TTRamillas-Regular.ttf");
}
@font-face {
    font-family: "inter";
    src: url("fonts/Inter-Medium.ttf");
}
@font-face {
    font-family: "inter-light";
    src: url("fonts/Inter-Light.ttf");
}

.mobile {
  display: none;
}

.desktop {
  display: block;
}
.row, .inner-row {
    display: flex;
    flex-direction: row;
    gap: 60px;
}

.w-30 {
    width: 30%;
}
.w-40 {
    width: 36%;
    padding-block-start: 2%;
}
.w-50 {
    width: 50%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
.header .w-30 {
    padding-block-start: 7%;
}

body {
    margin: 0;
    background-color: #FFFDFC;
}

h1 {
    font-family: "TTR";
    font-size: 66px;
    font-weight: 600;
    letter-spacing: -4px;
    text-align: left;
    color: #AE684F;
    padding-inline-start: 13%;
    padding-block: 2%;
}
.title {
    font-family: "TTR";
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -2px;
    text-align: left;
    color: #000;
    margin-block: 1% 0%;
    padding-inline-start: 8%;
}
.contact_text {
    margin-block-start: 10%;
}
.more-text {
  display: none;
}

.see-more {
  color: #AE684F;
  cursor: pointer;
  text-decoration: none;
}

.see-more:hover {
  text-decoration: underline;
}

h2 {
    font-family: "inter";
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0px;
    text-align: left;
    color: #000;
    margin-block: 9% 0%;
}
h3 {
    font-family: "inter";
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0px;
    text-align: left;
    color: #AE684F;
    margin-block: 0%;
}
p, .phone, .loc {
    font-family: "inter";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0px;
    color: #686767;
    text-align: left;
    margin-block: 0% 2%;
    text-decoration: none;
}
.phone, .loc {
    cursor: pointer;
}
.phone:hover, .loc:hover, .w-60 a:hover {
    color: blue;
}
.grey {
    font-family: "inter";
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: #797575;
    margin-inline-start: 60%;
    text-underline-offset: 5px;
}
.find {
    font-family: "inter";
    font-size: 32px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -1px;
    text-align: left;
    color: #000;
    padding-inline-start: 9%;
    margin-block: 4% 10%;
}
.contact {
    background-color: #AB9552;
    border-radius: 5px;
    border: none;
    color: #fff;
    box-shadow: 0px 4px 10px 0px #00000026;
    padding: 12px 36px 12px 36px;
    font-family: "inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0px;
    cursor: pointer;
}
.accordion {
    font-family: arial;
    font-size: 20px;
    font-weight: 500;
    background-color: #2d5d75;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 85%;
    margin: 0px 7.5%;
    margin-block-start: 0.1%;
    display: inline-flex;
    text-align: left;
    border: none;
    outline: none;
    transition: background-color 0.4s ease;
    border-radius: 5px;
    letter-spacing: -0.5px;
}
.intro {
    background-color: #e1c88d !important
}
.intro:after {
    color: #2d5d75 !important;
}
.intro span {
    color: #2d5d75;
}

.accordion:hover {
/*    background-color: #2B9297;*/
}

.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
    width: 81.5%;
    margin: auto;
}

.accordion:after {
    content: '+'; 
    color: #AB9552;
    float: right;
    margin-left: 5px;
    padding-block-start: 5px;
    transition: transform 0.4s ease;
}

.accordion.active:after {
    content: '-';
}
.inner-row {
    margin-inline-start: 1%;
}
.inner-row .w-30 {
    padding-block-start: 1%;
}
.inner-row .w-60 {
    width: 55%;
}
.w-60 a {
    font-family: Inter;
    color: #686767;
    text-decoration: none;
}
.panel .row {
    padding-block-start: 1%;
    gap: 0px;
}
.time {
    width: 30%;
    padding-block-start: 0.5%;
}
.area-day {
    width: 30%;
    padding-block-start: 0.5%;
}
.text {
    width: 37%;
    padding-block-start: 0.5%;
}

.book {
    max-width: 100%;
    margin: 0;
    margin-block-start: 4%;
}
@media only screen and (max-width: 768px) {

    .row {
       flex-direction: column; 
       width: 100%;
       gap: 0px;
    }
    .inner-row {
        gap: 0px;
    }

    .desktop {
       display: none; 
    }
    .mobile {
      display: block;
    }
    .w-40, .w-50, .w-70 {
        width: 100%;
    }
    .row .w-30 {
        padding-block-start: 6%;
        padding-inline-start: 4%;
        width: 91%;
    }
    .row .w-60 {
        width: 91%;
        padding-inline-start: 2%;
    }
    .header {
        padding-inline: 4%;
    }
    .header .row {
        flex-direction: row !important;
    }
    .header .w-30 {
        padding-block-start: 16%;
        padding-inline: 2%;
        text-align: right !important;
        width: 100%;
    }
    .header .w-60 {
        width: 100%;
        padding-inline-start: 0%;
    }

    
    .main-content {
        margin-top: -20.5%;
    }
    h1 {
        font-size: 46px;
    }
    h2 {
        font-size: 20px;
    }
    p {
        font-size: 16px;
        margin: auto;
    }
    .contact_text, .venue {
        margin-block-start: 5%;
    }
    .accordion {
        display: block;
        line-height: 1.8;
        padding: 8px 15px;
        font-weight: 600;
        border-radius: 5px;
        margin-block-start: 0.3%;
    }
    .intro {
        padding: 5px 15px !important;
        line-height: 1.5 !important;
    }
    .title {
        font-size: 27px;
        letter-spacing: -1px;
        padding-block: 2% 0%;
        padding-inline-start: 12%;
    }
    .grey {
        font-size: 15px;
        margin-inline-start: 0%;
        margin-inline-end: 5%;
        text-align: right !important;
    }
    .accordion:after {
        margin-top: -12%;
        font-size: 30px;
        font-weight: 400 !important;
        margin-inline: 0% !important;
    }
    .inner-row .w-40 {
        width: 40%;
    }
    .inner-row .w-60 {
        align-content: center;
        padding-inline-start: 3%;
    }
    .time {
        padding-inline-end: 10%;
    }
    .time, .area-day {
        width: 50%;
        font-size: 20px;
    }
    .text {
        width: 100%;
        font-size: 18px;
        font-weight: 400 !important;
        font-family: "inter-light";
    }
    .book {
        max-width: 100%;
        height: auto;
    }
    .find {
        font-size: 20px;
        text-align: center;
        padding-inline-start: 4% !important;
        line-height: 2;
    }

}