/*====================================================================
    HLUMA MEDICAL CARE CENTRE
    CUSTOM STYLESHEET
    Phase 1 - Brand Foundation
    Author: Jacob Mabele Marketing Agency
=====================================================================*/

/*--------------------------------------------------------------
1. BRAND COLOURS
--------------------------------------------------------------*/

:root{

    --hluma-green:#006400;
    --hluma-green-dark:#004d00;
    --hluma-green-light:#2e8b57;

    --hluma-white:#ffffff;

    --hluma-text:#333333;

    --hluma-light:#f7faf7;

    --hluma-border:#d9e7d9;

}

/*--------------------------------------------------------------
2. TYPOGRAPHY
--------------------------------------------------------------*/

body{

    color:var(--hluma-text);

    line-height:1.7;

}

p{

    color:var(--hluma-text);

    line-height:1.8;

}

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--hluma-green);

    font-weight:700;

    line-height:1.3;

}

/*--------------------------------------------------------------
3. LINKS
--------------------------------------------------------------*/

a{

    color:var(--hluma-green);

    text-decoration:none;

    transition:.3s;

}

a:hover{

    color:var(--hluma-green-dark);

}

/*--------------------------------------------------------------
4. BUTTONS
--------------------------------------------------------------*/

button,

input[type="submit"],

input[type="button"],

input[type="reset"],

.elementor-button,

.rt-button,

.wp-block-button__link,

.btn{

    background:var(--hluma-green);

    border:1px solid var(--hluma-green);

    color:#ffffff;

    transition:.3s;

}

button:hover,

input[type="submit"]:hover,

input[type="button"]:hover,

input[type="reset"]:hover,

.elementor-button:hover,

.rt-button:hover,

.wp-block-button__link:hover,

.btn:hover{

    background:var(--hluma-green-dark);

    border-color:var(--hluma-green-dark);

    color:#ffffff;

}

/*--------------------------------------------------------------
5. FORM FIELDS
--------------------------------------------------------------*/

input,

textarea,

select{

    border:1px solid var(--hluma-border);

    border-radius:6px;

    transition:.3s;

}

input:focus,

textarea:focus,

select:focus{

    border-color:var(--hluma-green);

    outline:none;

    box-shadow:none;

}

/* Contact Form 7 */

.wpcf7 input,

.wpcf7 textarea,

.wpcf7 select{

    border:1px solid var(--hluma-border);

    background:#ffffff;

}

.wpcf7 input:focus,

.wpcf7 textarea:focus,

.wpcf7 select:focus{

    border-color:var(--hluma-green);

}

/*--------------------------------------------------------------
END OF PHASE 1
--------------------------------------------------------------*/

/*==========================================================
HLUMA APPOINTMENT FORM OVERRIDE
==========================================================*/

.widget-custom-booking-form{
    background:#005f1f !important;
}

.widget-custom-booking-form h2,
.widget-custom-booking-form h3,
.widget-custom-booking-form h4,
.widget-custom-booking-form p,
.widget-custom-booking-form label{
    color:#ffffff !important;
}

.widget-custom-booking-form input,
.widget-custom-booking-form textarea,
.widget-custom-booking-form select{

    background:#ffffff !important;

    color:#333333 !important;

    border:1px solid #d8d8d8 !important;

    font-size:16px !important;

    height:52px !important;

}

.widget-custom-booking-form textarea{

    height:180px !important;

}

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

    color:#777777 !important;

    opacity:1;

}

.widget-custom-booking-form select{

    color:#333333 !important;

}

.widget-custom-booking-form button,
.widget-custom-booking-form input[type=submit]{

    background:#004518 !important;

    border:none !important;

    color:#ffffff !important;

    font-size:17px !important;

    font-weight:600 !important;

    padding:15px 30px !important;

}

.widget-custom-booking-form button:hover,
.widget-custom-booking-form input[type=submit]:hover{

    background:#003512 !important;

}

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

.hluma-booking-form{

    background:#005f1f;

    padding:25px;

    border-radius:10px;

    border:3px solid #004518;

}

.hluma-booking-form h3{

    color:#ffffff;

    font-size:34px;

    margin-bottom:10px;

}

.hluma-booking-form p{

    color:#ffffff;

    margin-bottom:20px;

}

.cf7-row{

    display:flex;

    gap:15px;

    margin-bottom:15px;

}

.cf7-half{

    flex:1;

}

.hluma-booking-form input,

.hluma-booking-form select,

.hluma-booking-form textarea{

    width:100%;

    background:#ffffff;

    border:2px solid #006400;

    border-radius:6px;

    padding:10px 14px;

    font-size:15px;

    color:#333333;

    box-sizing:border-box;

}

.hluma-booking-form input{

    height:46px;

}

.hluma-booking-form textarea{

    height:110px;

    resize:vertical;

}

.hluma-booking-form input:focus,

.hluma-booking-form textarea:focus,

.hluma-booking-form select:focus{

    border-color:#00aa44;

    outline:none;

    box-shadow:0 0 8px rgba(0,95,31,.25);

}

.hluma-btn{

    width:100%;

    background:#ffffff !important;

    color:#005f1f !important;

    border:2px solid #ffffff !important;

    padding:14px;

    border-radius:6px;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.hluma-btn:hover{

    background:#004518 !important;

    color:#ffffff !important;

    border-color:#ffffff !important;

}

/* Mobile */

@media(max-width:768px){

.cf7-row{

display:block;

}

.cf7-half{

margin-bottom:15px;

}

}

/*====================================================
HLUMA PHASE 2
HEADER • NAVIGATION • GLOBAL COLOURS
====================================================*/

/*----------------------------------------------------
TOP HEADER
----------------------------------------------------*/

.header-top-bar,
.header-top,
.top-header,
.header-top-wrap{

    background:#005f1f !important;

    color:#ffffff !important;

}

.header-top-bar a,
.header-top a{

    color:#ffffff !important;

}

.header-top-bar a:hover,
.header-top a:hover{

    color:#d9f7d9 !important;

}

/*----------------------------------------------------
MAIN MENU
----------------------------------------------------*/

.main-menu ul li a,
.main-navigation ul li a,
#site-navigation a{

    color:#333333 !important;

    font-size:16px !important;

    font-weight:600 !important;

    transition:.3s;

}

.main-menu ul li:hover>a,
.main-navigation ul li:hover>a,
.main-menu ul li.current-menu-item>a,
.main-navigation ul li.current-menu-item>a{

    color:#005f1f !important;

}

/*----------------------------------------------------
SUB MENU
----------------------------------------------------*/

.main-menu ul ul,
.main-navigation ul ul{

    background:#ffffff !important;

    border-top:3px solid #005f1f;

}

.main-menu ul ul li a,
.main-navigation ul ul li a{

    color:#333333 !important;

}

.main-menu ul ul li:hover>a,
.main-navigation ul ul li:hover>a{

    background:#f4faf4 !important;

    color:#005f1f !important;

}

/*----------------------------------------------------
HEADER BUTTONS
----------------------------------------------------*/

.header-btn,
.header-button,
.header-area .item-btn,
.header-area .btn{

    background:#005f1f !important;

    color:#ffffff !important;

    border-radius:6px;

}

.header-btn:hover,
.header-button:hover,
.header-area .item-btn:hover{

    background:#004518 !important;

}

/*----------------------------------------------------
SEARCH ICON
----------------------------------------------------*/

.header-search i,
.search-icon i{

    color:#005f1f !important;

}

/*----------------------------------------------------
MOBILE MENU
----------------------------------------------------*/

@media(max-width:991px){

.main-menu,
.main-navigation{

    background:#ffffff !important;

}

.main-menu ul li a,
.main-navigation ul li a{

    padding:12px 18px;

    font-size:16px !important;

}

}

/*====================================================
HLUMA FOOTER
====================================================*/

.footer-area,
.site-footer,
.footer{

    background:#005f1f !important;

}

.footer-area h1,
.footer-area h2,
.footer-area h3,
.footer-area h4,
.footer-area h5,
.footer-area h6{

    color:#ffffff !important;

}

.footer-area p,
.footer-area li,
.footer-area span{

    color:#e8f6e8 !important;

}

.footer-area a{

    color:#ffffff !important;

}

.footer-area a:hover{

    color:#d4ffd4 !important;

}

.footer-bottom,
.copyright-area{

    background:#004518 !important;

    color:#ffffff !important;

}

.footer-bottom a,
.copyright-area a{

    color:#ffffff !important;

}

/*====================================================
HLUMA BLOG
====================================================*/

.blog-post,
.post-item{

    border-radius:8px;

    overflow:hidden;

}

.blog-post h2,
.post-item h2{

    color:#005f1f !important;

}

.blog-post a,
.post-item a{

    color:#005f1f !important;

}

.blog-post a:hover,
.post-item a:hover{

    color:#004518 !important;

}

.read-more,
.blog-btn,
.post-btn{

    background:#005f1f !important;

    color:#ffffff !important;

    border-radius:5px;

}

.read-more:hover,
.blog-btn:hover,
.post-btn:hover{

    background:#004518 !important;

}

.page-numbers.current{

    background:#005f1f !important;

    color:#ffffff !important;

}

.page-numbers:hover{

    background:#004518 !important;

}