/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.py-30{
    padding: 120px 0px;
}
.pb-50{
    padding-bottom: 200px !important;
}
.pb-40{
    padding-bottom: 160px !important;
}
.px-15{
    padding: 0px 60px;
}
.text-orange{
    color: #FC5A22;
}
.bg-orange{
    background: #FC5A22 !important;
}
.py-18\.5{
    padding: 70px 0px;
}

.pb-18\.5{
    padding-bottom: 70px;
}
.pb-15{
    padding-bottom: 60px;
}
.lexend-deca{
    font-family: "Lexend Deca", sans-serif;
}
.outfit{
    font-family: "Outfit", sans-serif;
}
.text-62{
    font-size: 62px;
}
.text-29{
    font-size: 29px;
}
.text-23{
    font-size: 23px;
}
.text-44{
    font-size: 44px;
}
.line-height-1-3{
    line-height: 1.3;
}
.line-height-1-6{
    line-height: 1.6;
}
.letter-spacing-3{
    letter-spacing: 3px;
}

.homepage-hero{
    background-image: url("/assets/hero_image-e550c86e.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.about-hero{
    background-image: url("/assets/hero_image-e550c86e.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.homepage-hero-overlay{
    background: red;
    width: 100vw;
    height: -webkit-fill-available;
    position: absolute;
}

.about-us-big-image{
    height: 600px;
    width: 100%;
    object-fit: cover;
    padding: 0px 12px;
}
.about-us-small-image{
    width: 250px;
    height: 310px;
    position: absolute;
    bottom: -50px;
    left: -68px;
    object-fit: cover;
    border: 9px solid rgb(243, 244, 246);
}
.footer-box{
    position: relative;
    top: -70px;
    z-index: 222;
    border-top: 5px solid #FC5A22;
}

.border-orange{
    border-color: #FC5A22;
}

input#contact_name::placeholder, input#contact_email::placeholder, input#contact_phone::placeholder, input#contact_subject::placeholder, textarea#contact_message::placeholder{
    color: #FC5A22;
    opacity: 1;
}

.service-form-field::placeholder{
    color: white !important;
    opacity: 1;
}

.navbar-dropdown:hover a{
    color: #FC5A22 !important;
    transition: .3s;
}

@media only screen and (max-width: 767px) {
    .navbar-orange-bar{
        flex-direction: column;
    }
    .navbar-orange-bar > div{
        width: 100%;
    }
    .navbar-orange-bar-right{
        flex-direction: column;
        gap: 0px !important;
    }

    .navbar-orange-bar-right > div, .navbar-orange-bar-left{
        justify-content: center;
    }
    .navbar-orange-bar-right > div > p, .navbar-orange-bar-right > div > i, .navbar-orange-bar-left > p, .navbar-orange-bar-left > i{
        font-size: 14px;
    }

    .homepage-boxes{
        flex-direction: column;
        padding: 20px !important;
    }
    .homepage-boxes > div{
        width: 100%;
        padding: 40px 20px;
    }
    .homepage-hero-box > div{
        width: 100%;
        padding: 20px;
    }
    .homepage-hero-box h1{
        font-size: 30px;
    }
    .homepage-hero-box h2{
        font-size: 12px;
    }
    .homepage-hero-box p{
        font-size: 16px;
    }
    .homepage-hero-box{
        padding: 80px 0px;
    }
    .about-us-section{
        flex-direction: column;
        padding: 20px;
    }
    .about-us-section > div{
        width: 100%;
        padding: 0px;
    }
    .about-us-small-image{
        display: none;
    }
    .about-us-big-image{
        height: 335px;
    }
    .about-us-section > div > img{
        padding: 0px;
    }
    .services-section{
        flex-direction: column;
    }
    .services-section > div{
        width: 100%;
    }
    .services-section-outer{
        padding: 20px;
    }
    .faq-section{
        padding: 20px;
    }
    .footer-section{
        flex-direction: column;
        padding: 20px;
        padding-bottom: 50px
    }
    .footer-section-right{
        flex-direction: column;
        padding: 0px !important;
        margin-top: -25px;
    }
    .footer-section > div{
        width: 100%;

    }
    .footer-section-right > div{
        width: 100% !important;

    }
    .footer-section-right > div:nth-child(1){
        padding-bottom: 30px;
    }
    .footer-bottom-text{
        font-size: 12px;
    }
    .bottom-section{
        padding: 20px;
        padding-bottom: 90px;
    }
    .bottom-section > div{
        width: 100%;
    }
    .inner-hero{
        padding: 50px 20px !important;
    }
    .inner-hero h2{
        font-size: 12px;
        margin-bottom: 5px;
    }
    .inner-hero h1{
        font-size: 34px;
    }
    .inner-hero > div{
        width: 100%;
    }
    .navbar-section-button{
        display: none;
    }
    .navbar-section-menu-outer{
        display: none;
    }
    .navbar-section{
        padding: 20px;
    }
    .navbar-section-left{
        width: 50% !important;
    }
    .navbar-section-right{
        width: 50% !important;
    }
    .nav-break-icon{
        border: 1px solid #FC5A22;
        padding: 3px;
    }

    .navbar-section-menu-outer.is-open {
        display: block;
    }
    .navbar-section-menu-outer{
        position: fixed;
        bottom: 0px;
        left: 0px;
        min-height: -webkit-fill-available;
        background: rgb(29,31,54);
        z-index: 99;
        width: 75%;
    }
    body.menu-open {
        overflow: hidden;
        height: 100vh;
    }
    .navbar-section-menu{
        flex-direction: column;
        gap: 0px !important;
    }
    .navbar-section-menu > li{
        border-bottom: 1px solid white;
        width: 100%;
        padding: 15px;
    }
    .navbar-section-menu > li > span{
        padding: 0px !important;
    }
    .navbar-menu-close{
        position: absolute;
        right: 10px;
        top: 13px;
    }
    .mobile-menu-title{
        opacity: .4;
    }
    .menu-dropdown > span{
        justify-content: space-between !important;
    }
    .menu-dropdown{
        padding: 0px !important;
    }
    .menu-dropdown > span > a{
        padding: 15px;
    }
    .menu-dropdown > span > div{
        padding: 12px 14px;
        border-left: 1px solid white
    }
    .menu-dropdown > span > div > svg{
        transform: rotate(270deg);
        width: 25px;
        height: 26px;
    }

    .navbar-dropdown:nth-child(1){
        border-top: 1px solid white !important;
        border-bottom: 1px solid white !important;
    }
    .navbar-dropdown:nth-child(2){
        border-bottom: 1px solid white !important;
    }

    .navbar-section-menu > li > a, .navbar-dropdown > a{
        font-family: "Outfit", sans-serif;
        font-size: 14px;
    }
    .navbar-section-menu > li > span > a{
        font-family: "Outfit", sans-serif;
        font-size: 14px;
    }
    .mobile-services-toggle > svg{
        opacity: .5;
    }

    .gallery-section{
        padding: 20px;
    }
    .contact-section{
        padding: 20px;
    }
    .contact-section-bottom{
        flex-direction: column;
    }
    .contact-section-bottom > div{
        width: 100%;
    }
    .contact-section-bottom > div > iframe{
        width: 100%;
        height: 200px;
    }
    .contact-section-bottom-bottom{
        flex-direction: column;
        padding: 20px;
    }
    .contact-section-bottom-bottom > div{
        padding: 20px;
        width: 100%;
    }
    .mobile-small-title{
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }
    .mobile-large-title{
        font-size: 26px !important;
    }
    .faq-section, .services-section-outer{
        padding-top: 35px;
    }
    .service-inner-page-section{
        padding: 20px;
        flex-direction: column;
    }
    .service-inner-page-section > div{
        width: 100%;
    }
}

@media only screen and (min-width: 767px) {
    .mobile-menu-hide{
        display: none;
    }
}

body.menu-open {
    overflow: hidden;
    height: 100vh;
}

@media only screen and (max-width: 767px) {
    .navbar-section-button {
        display: none;
    }

    .navbar-section {
        padding: 20px;
    }

    .navbar-section-left {
        width: 50% !important;
    }

    .navbar-section-right {
        width: 50% !important;
    }

    .nav-break-icon {
        border: 1px solid #FC5A22;
        padding: 3px;
    }

    .navbar-section-menu-outer {
        display: none;
        position: fixed;
        bottom: 0px;
        left: 0px;
        min-height: -webkit-fill-available;
        background: rgb(29,31,54);
        z-index: 99;
        width: 75%;
    }

    .navbar-section-menu-outer.is-open {
        display: block;
    }

    .navbar-section-menu {
        flex-direction: column;
        gap: 0px !important;
    }

    .navbar-section-menu > li {
        border-bottom: 1px solid white;
        width: 100%;
        padding: 15px;
    }

    .navbar-section-menu > li > span {
        padding: 0px !important;
    }

    .navbar-menu-close {
        position: absolute;
        right: 10px;
        top: 13px;
        cursor: pointer;
    }

    .mobile-menu-title {
        opacity: .4;
    }

    .menu-dropdown > span {
        justify-content: space-between !important;
    }

    .menu-dropdown {
        padding: 0px !important;
    }

    .menu-dropdown > span > a {
        padding: 15px;
    }

    .menu-dropdown > span > div {
        padding: 14px 14px;
        border-left: 1px solid white;
        cursor: pointer;
    }

    .menu-dropdown > span > div > svg {
        transform: rotate(270deg);
        width: 25px;
        height: 26px;
    }

    /* Mobile dropdown behaviour */
    .menu-dropdown .services-submenu {
        position: static;
        min-width: 100%;
        box-shadow: none;
        display: none;
    }

    .menu-dropdown.is-open .services-submenu {
        display: block;
    }

    .menu-dropdown .services-submenu li {
        border-bottom: 1px solid rgba(255,255,255,.2);
    }

    .menu-dropdown .services-submenu a {
        display: block;
        padding: 12px 15px;
    }
}

@media only screen and (min-width: 767px) {
    .mobile-menu-hide, .book-now-menu-item {
        display: none;
    }

}
.services-menu{
    width: 100%;
}

.services-menu:hover{
    background: #FC5A22;
    color: white;
    transition: 0.5s;

}

.select2-container {
    width: 100% !important;
}

.notice, .alert{
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(90deg, rgba(234, 88, 12, 1) 0%, rgba(250, 204, 21, 1) 100%);
    padding: 10px;
    border-radius: 10px;
}

.booking-form-field{
    padding: 10px;
    border: 1px solid black;
    border-radius: 0px;
    font-weight: 300 !important;
}

.select2-selection{
    height: 46px !important;;
    border-radius: 0px !important;
    border-color: black !important;

}
.select2-selection > span{
    padding: 9px 10px !important;
}
.select2-selection__placeholder{
    color: black !important;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 300 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 46px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: black !important;
    font-family: "Lexend Deca", sans-serif;
    font-weight: 300 !important;
}

.services-icon svg{
    width: 30px;
    height: 30px;
}
.services-icon path{
    fill: #FC5A22;
}

.service-box-hover:hover{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: 0.5s;
}

/* Full width calendar */
.flatpickr-calendar {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make weekday row and day grid match */
.flatpickr-weekdaycontainer,
.flatpickr-days .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
}

/* Stop Flatpickr fixed widths breaking the grid */
.flatpickr-weekday,
.flatpickr-day {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Optional: keep spacing consistent */
.flatpickr-days {
    width: 100% !important;
}

.dayContainer, .flatpickr-rContainer{
    max-width: 100% !important;
    width: 100% !important;
}

.flatpickr-day{
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;;
}