/*
Theme Name: Warren Child
Theme URI: https://warren.qodeinteractive.com
Description: A child theme of Warren
Author: Mikado Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: warren
Template: warren
*/

h1, h2, h3, h4, h5, h6 {
    font-family: "anonymous-pro", monospace;
}

#qodef-page-inner {
    padding: 30px 0;
}

#qodef-page-header {
    background: transparent;
}

.slick-slide img {
    height:100% !important;
    object-fit: cover;
}

.list .slick-slide img {
    border-radius: 0 0 100px 0;
}

body {
    background: #FCECD8;
background: linear-gradient(180deg,rgba(252, 236, 216, 1) 0%, rgba(255, 255, 255, 0.13) 53%, rgba(255, 255, 255, 1) 100%);
    
}
.qodef-button.qodef-html--link {
    font-family: "Poppins";
    font-size: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-weight: 400;
}

.qodef-button.qodef-layout--outlined {
    color: #FCECD8;
    background-color: transparent;
    border: 2px solid #FCECD8;
    border-radius: 30px;
    font-weight: 400;
}

.qodef-button.qodef-layout--outlined:hover {
    border: 2px solid #FCECD8;
    color: #FCECD8;
}

.dark.qodef-button.qodef-layout--outlined {
    color: #1C2551;
    border-color: #1C2551;
}

.dark.qodef-button.qodef-layout--outlined:hover {
    color: #1C2551;
    border-color: #1C2551;
}

.footer-left-column {
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.footer-logo {
    max-width: 243px;
    width: 100%;
}

.footer-socials {
    display: flex;
    gap: 45px;
    max-width: 243px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.footer-right-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin-top: 50px;
    color: #A01C3C;
}

.footer-right-column.left {
    align-items: flex-start;
}

.footer-heading h3,
.footer-heading h4 {
    color: #A01C3C !important;
}

.footer-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.footer-bottom-column {
    display: flex;
    justify-content: space-between;
    color: #1C2551;
    font-size: 15px;
    padding-top: 15px;
    padding-bottom: 30px;
}

.footer-bottom-left {
    display: flex;
    gap: 60px;
}

.footer-bottom-left a,
.footer-bottom-right a{
    color: #1C2551 !important;
}

.footer-credit a {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.footer-links {
    display: flex;
    gap: 30px;
}

button {
    appearance: none;
    outline: none;
    box-shadow: none;
    border: none;
    background: #A01C3C;
    max-width: 327px;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
    font-family: "Poppins";
    font-size: 20px;
}

.qodef-image-marquee {
    background: #1C2551;
}

.qodef-fullscreen-menu-opener {
    width: 141px;
    height: 100%;
    background: #A01C3C;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.qodef-fullscreen-menu-opener.qodef--opened {
    background: #FCECD8;
    
}

.qodef-opener-icon.qodef-source--predefined {
    color: #FCECD8;
}

.qodef-fullscreen-menu-opener.qodef--opened.qodef-opener-icon.qodef-source--predefined {
    color: #A01C3C;
}

.qodef-fullscreen-menu-opener .qodef-m-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.qodef-opener-icon.qodef-source--predefined .qodef-m-line {
    height: 2px;
}

.qodef-opener-icon.qodef-source--predefined .qodef-m-lines {
    width: 90px;
    height: 36px;
}

.qodef-opener-icon.qodef-source--predefined .qodef-m-line.qodef--2 {
    top: 16px;
}

.qodef-widget-holder.qodef--one {
    width: 100%;
    display: flex;
    justify-content: center;
}

.site-title-heading h2 {
    color: #A01C3C;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.site-title-heading h3 {
    color: #A01C3C;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#qodef-fullscreen-area {
    width: 50%;
    left: auto;
    right: 0;
    border-radius: 0px 0px 0px 130px;
}

.qodef-fullscreen-menu {
    padding-left: 160px;
}

#qodef-page-mobile-header-inner {
    padding: 0 0 0 7%;
}

.qodef-fullscreen-menu > ul > li {
    padding: 0;
}

.qodef-fullscreen-menu > ul > li > a .qodef-menu-item-text-inner {
    --qodef-underline-position-y: 0;
}

.qodef-fullscreen-menu > ul > li.current-menu-ancestor > a, .qodef-fullscreen-menu > ul > li.current-menu-item > a, .qodef-fullscreen-menu > ul > li:hover > a {
    color: #FCECD8;
}

.qodef-fullscreen-menu > ul > li > a:hover {
    font-family: "instrument-serif", sans-serif;
    font-style: italic;
    text-transform: initial;
    letter-spacing: 0.7;
    font-weight: 400;
}

.icon-card {
    justify-content: space-between;
    gap: 30px
    height: 100%;
    text-align: center !important;
}

.icon-card .elementor-widget-warren_core_custom_font {
    width: 100%;
}

.icon-card.left {
    text-align: left !important;
}

.icon-card img {
    width: 100px;
    height: auto;
}

.qodef-layout--filled.dark {
    color: #1C2551 !important;
    background-color: #FCECD8 !important;
    font-weight: 400;
    text-transform: initial;
}


.features-container {
    color: #FCECD8;
    padding: 15px 30px;
}

.feature-item {
    display: flex;
    align-items: center; /* Vertically aligns icon and text */
    padding: 25px 0 25px 50px;
    border-bottom: 2px solid #FCECD8;
}

.feature-item:last-child {
    border-bottom: none;
}

.icon-placeholder {
    width: 50px;
    height: 50px;
    flex-shrink: 0; 
    margin-right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-text {
    font-size: 20px; 
    font-weight: 400;
    line-height: 1.5;
    margin: 0; 
}

.boutique-card {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden; /* Ensures content stays within the border */
}

.card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box; /* Ensures padding doesn't add to the size */
    transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
    color: #F3E9D9; /* Light text color for both states */
}

/* --- Initial State --- */
.card-front {
    background-color: #A01C3C; /* Red background */
    opacity: 1; /* Visible by default */
    display: flex;
    flex-direction: column;
    justify-content: center
}

.card-front h3 {
    margin: 0;
    font-size: 35px;
    line-height: 50px;
    color: #FCECD8;
    font-weight: 700;
}

/* --- Hover State --- */
.card-back {
    background-color: #1C2551;
    opacity: 0; /* Hidden by default */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes title to top and description to bottom */
}

.hover-title {
    margin: 0;
    font-family: "instrument-serif";
    font-size: 35px;
    font-style: italic;
    font-weight: 400;
    line-height: 50px;
    color: #FCECD8;
}

.hover-description {
    font-size: 20px;
}

/* --- The Hover Magic --- */
.boutique-card:hover .card-front {
    opacity: 0; /* Fade out the front */
}

.boutique-card:hover .card-back {
    opacity: 1; /* Fade in the back */
}



.custom-enquiry-form {
    padding: 40px;
    border-radius: 10px;
    max-width: 1192px;
    margin: 20px auto !important;
}

/* ---- Two-Column Grid Layout ---- */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* Space between the two columns */
}

/* ---- General Field Styling (Inputs, Textarea, Select) ---- */
.custom-enquiry-form input[type="text"],
.custom-enquiry-form input[type="email"],
.custom-enquiry-form input[type="tel"],
.custom-enquiry-form textarea,
.custom-enquiry-form select {
    width: 100%;
    border: 1px solid #283359; /* Dark blue border */
    background-color: #fff;
    padding: 14px 24px;
    border-radius: 50px; /* This creates the heavily rounded "pill" shape */
    box-sizing: border-box;
    margin-bottom: 20px;
    color: #283359;
}

.custom-enquiry-form p {
    margin: 0; /* Resets default paragraph margin */
}

/* ---- Placeholder Text Color ---- */
.custom-enquiry-form ::placeholder {
    color: #283359;
    opacity: 1; /* Ensures placeholder is not faded */
}

/* ---- Textarea Specifics ---- */
.custom-enquiry-form textarea {
    border-radius: 30px; /* Larger radius for the larger field */
    height: 180px;
    resize: vertical; /* Allows user to resize vertically only */
}

/* ---- Dropdown Arrow Styling ---- */
.custom-enquiry-form select {
    appearance: none; /* Removes default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L8 8.5L15 1.5' stroke='%23283359' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 16px;
}

/* ---- Privacy Acceptance Checkbox ---- */
.acceptance-field {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 30px;
    color: #283359;
}

.custom-enquiry-form .wpcf7-acceptance {
    margin-right: 15px;
}

.custom-enquiry-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background: #fff;
    width: 50px;
    height: 50px;
    border: 1px solid #283359;
    border-radius: 50%; /* Makes it a circle */
    cursor: pointer;
    top: -2px; /* Slight vertical alignment */
    margin-right: 20px;
}

.custom-enquiry-form input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background-color: #283359; /* Inner circle color when checked */
    border-radius: 50%;
}

.acceptance-field a {
    color: #283359;
    text-decoration: underline;
}

/* ---- Submit Button ---- */
.custom-enquiry-form .wpcf7-submit {
    /* The button color has been intentionally left out as requested */
    color: #FCECD8;
    border: none;
    padding: 16px 40px;
    border-radius: 38px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
    font-size: 20px;
    font-family: "Poppins";
    font-weight: 400;
    display: flex;
  justify-content: center;
}

.qodef-qi-contact-form-7 button[type="submit"]:focus, .qodef-qi-contact-form-7 button[type="submit"]:hover, .qodef-qi-contact-form-7 input[type="submit"]:focus, .qodef-qi-contact-form-7 input[type="submit"]:hover {
    color: rgb(255,255,255);
  background-color: rgb(28,37,81);
}

.submit-button-container {
    padding-top: 10px;
}

.wpcf7-list-item {
    margin-left: 0 !important;
}

input[type="checkbox"]::after, input[type="radio"]::after {
  background-color: #1c2551;
  content: "";
  display: block;
  height: calc(100% - 8px);
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 4px;
  transition: opacity .2s ease-out;
  width: calc(100% - 8px);
  border-radius: 50%;
}

.slick-carousel {
    margin-left: -15px;
    margin-right: -15px;
}

.carousel-homepage .slick-slide {
    padding: 0 !important;
}

.carousel-homepage {
    margin-bottom: 0 !important;
}

.slick-slide {
    padding: 0 15px; /* Creates 30px total space (15px on each side) */
}

/* Optional: If the padding causes horizontal overflow, this fixes it */
.slick-list {
    margin: 0 -15px;
}


/* --- Custom Dot Styling --- */

/* Style the dots container */
.slick-dots {
    margin-bottom: 0 !important;
    bottom: -60px !important; /* Position the dots below the carousel */
}

/* Style each individual dot's list item */
.slick-dots li {
    margin: 0 14px !important;
}

/* Style the dot's button element */
.slick-dots li {
    width: 17px !important;
    height: 17px !important;
}
.slick-dots li button {
    width: 17px !important;
    height: 17px !important;
    padding: 0;
    background: transparent !important;
    border: 1px solid #fff !important;
}

/* Style the pseudo-element inside the button which is the visible dot */
.slick-dots li button:before {
    content: '' !important; /* Remove the default slick icon */
    width: 17px !important;
    height: 17px !important;
    border-radius: 50%;
    border: 0 !important; 
    opacity: 1 !important;
    background: transparent !important;
    transition: background-color 0.3s ease;
}

/* Style for the active dot */
.slick-dots li.slick-active button:before {
    background-color: #fff !important;
}

.homepage-item {
    max-height: 857px;
    min-height: 857px !important;
    overflow: hidden;
    position: relative;
    display: flex;
}

.homepage-item .item-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    bottom: 90px;
    padding: 0 90px 0 90px;
}

.item-image-container {
    height: 400px;
}

.homepage-item .item-image-container {
    height: 857px;
    position: relative;
    display: flex;
}

.homepage-item .item-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-item .item-image-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
        background: transparent linear-gradient(0deg, #1C2551 0%, #1C255100 100%) 0% 0% no-repeat padding-box;
}

.item-content h2,
.item-content h3,
.item-content h4 {
    color: #FCECD8;
}

.item-content h2 {
    font-size: 45px;
}

.item-content .description {
    margin: 0;
    font-size: 35px;
    font-family: "instrument-serif", sans-serif;
    font-style: italic;
    line-height: 1.1;
}

.homepage-item .buttons {
    max-width: 600px;
}

.item-content p {
    color: #FCECD8;
}

.item-content .status {
    font-style: italic;
}

.buttons {
    display: flex;
    gap: 29px;
    margin-top: 40px;
}

.buttons a {
    border: 2px solid #FCECD8;
    border-radius: 38px;
    color: #FCECD8;
    width: 100%;
    text-align: center;
    
}

.buttons a:hover {
    background-color: #A01C3C;
}

.info-bar {
    display: flex;
    justify-content: space-between; /* Pushes children to opposite ends */
    align-items: center;          /* Vertically aligns content */
    flex-wrap: wrap;             
}

/* --- Left Section: Location Details --- */
.location-details {
    flex: 170px; 
}

.location-title {
    margin: 0;
    line-height: 100%;
    text-transform: uppercase;
    font-weight: bold;
    color: #1C2551;
}

.location-title .status {
    font-style: italic;
    text-transform: none; 
    font-size: 20px;
    font-weight: 400;
    font-family: "Poppins";
}

.location-details p {
    margin: 0 !important;
}

/* --- Right Section: Service Icons --- */
.services {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-start;
}

.service-item {
    display: flex;
    flex-direction: column; /* Stacks the icon on top of the label */
    align-items: flex-start;    /* Horizontally centers the icon and label */
}

.service-item .icon {
    height: 41px;
    display: flex;
}

.service-item .icon img {
    height: 100%;
    width: auto;
    display: flex;
}

/* A placeholder for where your actual icon would go */
.icon-placeholder {
    width: 48px;
    height: 48px;
}

.service-label {
    text-transform: uppercase;
    font-size: 15px;
    font-family: "anonymous-pro";
    font-weight:700;
}

.query-buttons {
    display: flex;
    gap: 30px;
}

.query-buttons a {
    border: 2px solid #1C2551;
  border-radius: 38px;
  color: #1C2551;
  width: 100%;
  text-align: center;
}

hr,
.elementor hr{
    width: 100%;
    height: 1.5px;
    background: #1C2551;
    background-color: #1C2551 !important;
    max-width: 100% !important;
}

.your-journey ul {
    margin: 10px 0;
}

.qodef-qi-contact-form-7 label {
    display: flex;
    align-items: center;
}

.qodef-qi-contact-form-7 label input {
    flex-shrink: 0;
}

ul {
        list-style-position: outside;
        padding-left: 10px;
}

#qodef-page-mobile-header {
  background-color: #fcecd8 !important;
}

@media (min-width:1713px) {
  .qodef-content-grid-1400 .qodef-content-grid {
    width:1600px
  }
  .qodef-content-grid-1400 .qodef-content-grid.qodef-extended-grid--right {
    padding-left:calc((100% - 1600px)/ 2)
  }
  .qodef-content-grid-1400 .qodef-content-grid.qodef-extended-grid--left {
    padding-right:calc((100% - 1600px)/ 2)
  }
  .qodef--boxed.qodef-content-grid-1400 .qodef-content-grid {
    width:1660px
  }
}

@media only screen and (max-width: 880px) {
    .center-mobile {
        text-align:center;
    }
    .homepage-item .item-content {
        bottom: 21px;
        padding: 0 21px 0 21px;
    }
    .homepage-item {
        max-height: 558px;
        min-height: 558px !important;
    }
    .homepage-item .item-image-container {
        height: 558px;
    }
    .item-content h2 {
        font-size: 25px;
        line-height: 40px;
    }
    .item-content .description {
        font-size: 20px;
    }
    .qodef-fullscreen-menu-opener {
        width: 48px;
    }
    .qodef-opener-icon.qodef-source--predefined .qodef-m-lines {
        width: 30px;
        height: 25px;
    }
    .qodef-opener-icon.qodef-source--predefined .qodef-m-line.qodef--2 {
        top: 11px;
    }
    #qodef-page-mobile-header-inner {
        padding-left: 10px !important;
    }
    #qodef-page-footer-top-area-inner .qodef-layout--columns .qodef-grid-inner .qodef-grid-item:last-child {
        order: 1;
    }
    #qodef-page-footer-top-area-inner .qodef-layout--columns .qodef-grid-inner .qodef-grid-item:first-child {
        order: 2;
    }
    #qodef-page-footer-top-area-inner .qodef-layout--columns .qodef-grid-inner .qodef-grid-item {
        order: 3;
    }
    ul {
        font-size: 15px;
        line-height: 30px;
    }
    .left-mobile {
        text-align: left !important;
    }
    .query-buttons {
        flex-direction: column;
    }
    .location-details {
        flex: auto;
        order: 2;
    }
    .location-title,
    .item-content h4 {
        font-size: 25px !important;
    }
    .location-title {
        margin-bottom: 20px;
    }
    .slick-dots {
        text-align: left !important;
    }
    .features-container {
        padding-left: 0;
        padding-right: 0;
    }
    .info-bar {
        flex-direction: column;    /* Stacks the sections vertically */
        align-items: flex-start; /* Aligns all content to the left */
        gap: 30px
    }

    .services {
        width: 100%;
        justify-content: flex-start;
        gap: 40px;
    }
    
    .buttons {
       flex-direction: column;
    }
    .footer-right-column.left {
        align-items: center;
    }
     .footer-right-column p {
         text-align: center;
     }
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .custom-enquiry-form {
        padding: 20px;
    }
    .feature-item {
        flex-direction: column;
        padding: 30px;
        align-items: flex-start;
    }
    .feature-text {
        font-size: 15px;
        line-height: 40px;
        margin-bottom: 0 !important;
    }
    
    .icon-placeholder {
        margin-right: 0;
    }
    #qodef-page-inner {
      padding: 10px 0;
    }
    .qodef-content-grid {
        width:95%
      }
      .qodef-content-grid.qodef-extended-grid--right {
        padding-left:calc((100% - 95%)/ 2)
      }
      .qodef-content-grid.qodef-extended-grid--left {
        padding-right:calc((100% - 95%)/ 2)
      }
      .qodef--boxed .qodef-content-grid {
        width:calc(95% + 20px)
      }
    .footer-logo {
        margin: 30px auto 0 auto;
        max-width: 150px;
    }
    
    .footer-socials {
        margin: 0 auto;
    }
    
    .footer-right-column {
        margin-top: 0;
        gap: 30px;
    }
    
    .footer-bottom-column {
        flex-direction: column;
    }
    
    .footer-bottom-left {
        gap: 0;
        justify-content: space-between;
    }
    
    .footer-credit a {
        justify-content: center;
    }
    
    #qodef-fullscreen-area {
        width: 100%;
        left: auto;
        right: 0;
        border-radius: 0px 0px 0px 90px;
    }
    
    .qodef-fullscreen-menu {
        padding-left: 25px;
    }
    
    .qodef-fullscreen-menu > ul > li > a {
        font-size: 25px !important;
        line-height: 70px !important;
        letter-spacing: 0.5px;
    }
    
    #qodef-fullscreen-area-inner {
        justify-content: center;
        padding-bottom: 0;
    }
}


@media only screen and (max-width: 450px) {
    .footer-heading h3 {
        font-size: 25px;
    }
    
    .footer-bottom-left {
        flex-direction: column;
        align-content: center;
        justify-content: center;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
        flex-direction: column;
        gap: 0;
    }
}