:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-be3cf86 *//*=================================
RESERVATION HERO
=================================*/

.reservation-hero{

    position:relative;
    padding-bottom: 1px;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

}

/* Background */

.reservation-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("https://clovespiice.com/wp-content/uploads/2026/07/Dine-in-Full.jpg") center center/cover no-repeat;

    transform:scale(1.18);

    animation:reservationZoom 12s ease-out forwards;

    z-index:0;

}

@keyframes reservationZoom{

    from{

        transform:scale(1.18);

    }

    to{

        transform:scale(1);

    }

}

/* Overlay */

.reservation-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(19,62,36,.82),
        rgba(19,62,36,.74)
    );

    z-index:1;

}

/* Pattern */

.reservation-pattern{

    position:absolute;

    inset:0;

    background:url("images/mandala-white.png") center center no-repeat;

    background-size:850px;

    opacity:.04;

    z-index:2;

}

/* Content */

.reservation-content{

    position:relative;

    z-index:3;

    max-width:820px;

    padding:120px 25px 0;

}

.reservation-tag{

    display:inline-block;

    margin-bottom:18px;

    font-family:Poppins,sans-serif;

    font-size:18px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#EE771C;

}

.reservation-content h1{

    font-family:"Cormorant Garamond",serif;

    font-size:72px;

    font-weight:500;

    line-height:1.05;

    color:#F8F5EE;

    margin-bottom:25px;

}

.reservation-content p{

    max-width:700px;

    margin:auto;

    font-family:Poppins,sans-serif;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

}

.reservation-location{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    padding:14px 28px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    color:#fff;

    font-family:Poppins,sans-serif;

    font-size:16px;

}

.reservation-btn{

    display:inline-block;

    margin-top:40px;

    padding:16px 42px;

    background:#EE771C;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-family:Poppins,sans-serif;

    font-weight:600;

    transition:.35s;

    box-shadow:0 18px 40px rgba(238,119,28,.28);

}

.reservation-btn:hover{

    background:#ff8d3a;

    transform:translateY(-4px);

}
/*=================================
TEXT ANIMATION
=================================*/

.reservation-tag,
.reservation-content h1,
.reservation-content p,
.reservation-location,
.reservation-btn{

    opacity:0;
    transform:translateY(35px);

    animation:reservationFadeUp .9s ease forwards;

}

/* Animation Delay */

.reservation-tag{
    animation-delay:.2s;
}

.reservation-content h1{
    animation-delay:.4s;
}

.reservation-content p{
    animation-delay:.6s;
}

.reservation-location{
    animation-delay:.8s;
}

.reservation-btn{
    animation-delay:1s;
}

/* Keyframes */

@keyframes reservationFadeUp{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/* Responsive */

@media(max-width:1024px){

    .reservation-content h1{

        font-size:58px;

    }

}

@media(max-width:767px){

    .reservation-hero{

        min-height:100vh;

    }

    .reservation-content{

        padding:10px 12px 0;

    }

    .reservation-content h1{

        font-size:38px;

    }

    .reservation-content p{

        font-size:14px;

    }

    .reservation-btn{

        width:100%;

        max-width:260px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-01424a8 *//*==============================
RESERVATION INFO
==============================*/

.reservation-info{

    padding:110px 8%;

    background:#F8F5EE;

}

.ri-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.ri-tag{

    display:inline-block;

    margin-bottom:18px;

    color:#EE771C;

    font-family:Poppins,sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.ri-heading h2{

    font-family:"Cormorant Garamond",serif;

    font-size:60px;

    color:#133E24;

    margin-bottom:20px;

}

.ri-heading p{

    font-family:Poppins,sans-serif;

    color:#555;

    font-size:17px;

    line-height:1.8;

}

.ri-grid{

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.ri-card{

    background:#fff;

    padding:45px 35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.06);

    transition:.35s;

    border:1px solid rgba(19,62,36,.08);

}

.ri-card:hover{

    transform:translateY(-8px);

    border-color:#EE771C;

}

.ri-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#EE771C;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

}

.ri-card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:30px;

    color:#133E24;

    margin-bottom:15px;

}

.ri-card p{

    font-family:Poppins,sans-serif;

    color:#666;

    line-height:1.8;

    font-size:15px;

    margin-bottom:12px;

}

.ri-card strong{

    color:#EE771C;

    font-family:Poppins,sans-serif;

    font-size:16px;

}

@media(max-width:1024px){

    .ri-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:767px){

    .reservation-info{

        padding:80px 24px;

    }

    .ri-grid{

        grid-template-columns:1fr;

    }

    .ri-heading h2{

        font-size:42px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ecd7e2c *//*===================================
  RESERVATION FORM
===================================*/

.reservation-booking {

    padding: 120px 8%;

    background: #ffffff;

}


/*===================================
  CONTAINER
===================================*/

.booking-container {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 70px;

    align-items: center;

}


/*===================================
  LEFT CONTENT
===================================*/

.booking-form {

    width: 100%;

}

.booking-tag {

    display: inline-block;

    margin-bottom: 18px;

    color: #EE771C;

    font-family: Poppins, sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.booking-form h2 {

    margin: 0 0 18px;

    color: #133E24;

    font-family: "Cormorant Garamond", serif;

    font-size: 60px;

    font-weight: 500;

    line-height: 1.05;

}


.booking-form > p {

    margin: 0 0 35px;

    color: #666;

    font-family: Poppins, sans-serif;

    font-size: 16px;

    line-height: 1.8;

}


/*===================================
  CONTACT FORM 7
===================================*/

.booking-form .wpcf7 {

    width: 100%;

}

.booking-form .wpcf7 form {

    width: 100%;

}


/*===================================
  FORM GRID
===================================*/

.booking-form .form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-bottom: 20px;

}


/*===================================
  CF7 FIELD WRAPPER
===================================*/

.booking-form .wpcf7-form-control-wrap {

    display: block;

    width: 100%;

    margin: 0;

}


/*===================================
  INPUTS
===================================*/

.booking-form input[type="text"],
.booking-form input[type="tel"],
.booking-form input[type="email"],
.booking-form input[type="number"],
.booking-form input[type="date"],
.booking-form input[type="time"] {

    width: 100%;

    height: 54px;

    box-sizing: border-box;

    padding: 15px 18px;

    margin: 0;

    border: 1px solid #dddddd;

    border-radius: 12px;

    background: #ffffff;

    color: #333333;

    font-family: Poppins, sans-serif;

    font-size: 14px;

    outline: none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


/*===================================
  PLACEHOLDERS
===================================*/

.booking-form input::placeholder,
.booking-form textarea::placeholder {

    color: #888888;

    opacity: 1;

}


/*===================================
  FOCUS
===================================*/

.booking-form input:focus,
.booking-form textarea:focus {

    border-color: #EE771C;

    box-shadow:
        0 0 0 4px rgba(238,119,28,.12);

}


/*===================================
  DATE / TIME
===================================*/

.booking-form input[type="date"],
.booking-form input[type="time"] {

    color: #555555;

    cursor: pointer;

}


/*===================================
  TEXTAREA
===================================*/

.booking-form textarea {

    width: 100%;

    min-height: 140px;

    box-sizing: border-box;

    padding: 16px 18px;

    margin: 0 0 25px;

    border: 1px solid #dddddd;

    border-radius: 12px;

    background: #ffffff;

    color: #333333;

    font-family: Poppins, sans-serif;

    font-size: 14px;

    line-height: 1.6;

    resize: vertical;

    outline: none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

}


/*===================================
  SUBMIT BUTTON
===================================*/

.booking-form input[type="submit"] {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 42px;

    margin: 0;

    border: none;

    border-radius: 50px;

    background: #EE771C;

    color: #ffffff;

    font-family: Poppins, sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}


.booking-form input[type="submit"]:hover {

    background: #133E24;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(19,62,36,.18);

}


/*===================================
  VALIDATION
===================================*/

.booking-form .wpcf7-not-valid {

    border-color: #dc3545 !important;

    box-shadow:
        0 0 0 3px rgba(220,53,69,.08) !important;

}


.booking-form .wpcf7-not-valid-tip {

    display: block;

    margin-top: 5px;

    color: #dc3545;

    font-family: Poppins, sans-serif;

    font-size: 11px;

}


/*===================================
  SUCCESS / ERROR MESSAGE
===================================*/

.booking-form .wpcf7-response-output {

    margin: 25px 0 0;

    padding: 14px 18px;

    border-radius: 10px;

    font-family: Poppins, sans-serif;

    font-size: 13px;

    line-height: 1.6;

}


/*===================================
  IMAGE
===================================*/

.booking-image {

    width: 100%;

    height: 610px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

}


.booking-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 8s ease;

}


.booking-image:hover img {

    transform: scale(1.08);

}


/*===================================
  TABLET
===================================*/

@media (max-width: 1024px) {

    .reservation-booking {

        padding: 100px 6%;

    }

    .booking-container {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .booking-form {

        max-width: 800px;

        margin: 0 auto;

    }

    .booking-image {

        height: 500px;

    }

}


/*===================================
  MOBILE
===================================*/

@media (max-width: 767px) {

    .reservation-booking {

        padding: 80px 24px;

    }

    .booking-form h2 {

        font-size: 42px;

    }

    .booking-form > p {

        font-size: 15px;

        line-height: 1.8;

    }

    .booking-form .form-grid {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 15px;

    }

    .booking-form input[type="text"],
    .booking-form input[type="tel"],
    .booking-form input[type="email"],
    .booking-form input[type="number"],
    .booking-form input[type="date"],
    .booking-form input[type="time"] {

        height: 52px;

    }

    .booking-form textarea {

        min-height: 130px;

        margin-bottom: 20px;

    }

    .booking-form input[type="submit"] {

        width: 100%;

        padding: 16px 25px;

    }

    .booking-image {

        height: 420px;

        border-radius: 20px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-501ff0a *//*=================================
THE CLOVE EXPERIENCE
=================================*/

.clove-experience{

    padding:120px 8%;

    background:#F8F5EE;

}

.experience-wrapper{

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:80px;

    align-items:center;

}

.experience-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.experience-image img{

    width:100%;

    aspect-ratio:9/16;

    object-fit:cover;

    display:block;

    transition:8s;

}

.experience-image:hover img{

    transform:scale(1.08);

}

.experience-tag{

    display:inline-block;

    margin-bottom:18px;

    color:#EE771C;

    font-family:Poppins,sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.experience-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:60px;

    line-height:1.1;

    color:#133E24;

    margin-bottom:24px;

}

.experience-content p{

    font-family:Poppins,sans-serif;

    color:#555;

    line-height:1.9;

    font-size:17px;

    margin-bottom:35px;

}

.experience-content ul{

    list-style:none;

    padding:0;

    margin:0 0 40px;

}

.experience-content li{

    position:relative;

    padding-left:32px;

    margin-bottom:18px;

    font-family:Poppins,sans-serif;

    color:#333;

}

.experience-content li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#EE771c;

    font-weight:700;

}

.experience-btn{

    display:inline-block;

    padding:16px 40px;

    background:#EE771C;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-family:Poppins,sans-serif;

    font-weight:600;

    transition:.35s;

    box-shadow:0 18px 40px rgba(238,119,28,.25);

}

.experience-btn:hover{

    background:#133E24;
    color:#fff;
    transform:translateY(-4px);

}

@media(max-width:1024px){

    .experience-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:767px){

    .clove-experience{

        padding:80px 24px;

    }

    .experience-content h2{

        font-size:42px;

    }

}/* End custom CSS */