/*
Theme Name: Agent Garage
Theme URI: 
Author: Luke
Author URI:
Description: Agent Garage
Version: 1.0
*/

html {margin-top: 0 !important;}

body {background-color: #282828; color: #ffffff; font-family: 'Barlow', sans-serif; font-size: 16px;}

h2 {font-size: 24px;}
a {color: #ffffff; text-decoration: none;}
.btn-primary {background-color: #282828;border-color: #282828; font-size: 24px; }

.container {width: 1230px;}

.lightGrey {background-color: #353535;}

.listAlign {margin: 0;}

.listAlign li {list-style: none; float: left; padding: 10px;}

.floatLeft {float: left;}
.floatRight {float: right;}
.floatNone {float: none;}
.floatNone li {float: none;}

.navContainer {padding: 10px;}

.header {
    background-color: #F47226; 
    height: 767px;
    padding: 0;
	margin-bottom: 50px;
}

.headerImage {
    /* background-color: #F47226;  */
    height: 767px;
    background-size: cover;
    /* opacity: 0.7; */
    background-image: linear-gradient(rgba(244,114,38,0.6), rgba(244,114,38,0.3)), url("https://theagentsgarage.co.za/wp-content/uploads/2025/01/IMG_5309-1-scaled.jpg");
    
}

.headerContent {width: 741px; padding: 10px; margin: 160px 0 0 0; opacity: 1;}

.headerContent h1 {font-size: 70px; line-height: 68px;}
.headerContent h2 {font-size: 24px; font-weight: 300; width: 64%; margin: 20px 0 20px 0}

.footer {padding: 50px 0 50px 0; background-color: #282828;}
.footer img {width: 90%;}

.footerInfo {background-color: #353535; padding: 10px;}

.aboutUs {border: 1px solid #ffffff; padding: 30px; border-radius: 5px; margin-bottom: 40px;}
.aboutUs h2 {font-size: 20px; font-weight: 600;}
.aboutUs h1 {font-size: 28px; font-weight: 400; margin: 10px 0 10px 0;}
.aboutUs h1 span {font-weight: 600;}
.aboutUs img {
    box-shadow: -26px 29px 5px 0px rgba(255,255,255,0.81);
-webkit-box-shadow: -26px 29px 5px 0px rgba(255,255,255,0.81);
-moz-box-shadow: -26px 29px 5px 0px rgba(255,255,255,0.81);

margin-bottom: 50px;
}

.elipse {
background-image: url("images/ellipse-3.png");
background-repeat: no-repeat;}

.booking_form .form-group .controls select, .booking_form select, .booking_form textarea, .booking_form input[type="text"] {
    background-color: #282828;
	margin: 3px;
}

.wpdevelop label {
    font-weight: normal;
}

.wpbc_booking_form_structure .wpbc_structure_calendar {
    float: left;
    margin-right: 50px;
}

.booking_form .form-group {
    margin: 15px 3px;
    float: left;
}

.wpbc-payment-form .btn, .wpbc-payment-form .button, .booking_form_div .btn, .booking_form_div .button, .booking_form_div .submit, .booking_form_div .button-secondary {
    margin-top: 72px;
}

#fbuilder .slots div a {
    background: #282828 !important;
}

#fbuilder .medium {
    background-color: #282828;
    border: 1px solid #ffffff;
    padding: 10px;
    color: #ffffff;
}

.totalCost {display: none;}

/* MEDIA QUERIES */

@media only screen and (max-width: 1230px) {

    .container {width: 100%}

    .aboutUs img {
        width: 90%;}

}


    

@media only screen and (max-width: 768px) {
    
    .logo {
        width: 65%;
        margin-top: 7px;
    }

    .headerContent {
        width: 90%;
        margin: 50px 0 0 0;
    }

    .headerContent h1 {
        font-size: 60px;
        line-height: 56px;
    }

    .headerImage {
        height: 507px;
    }

    .header {
        height: auto;
    }

    .aboutUs img {
        width: 100%;
        margin-top: 50px;
    }

    .wpbc_booking_form_structure .wpbc_structure_calendar {
        float: none;
    }

    .booking_form .form-group {
        margin: 15px 3px;
        float: none;
    }

    .datepick-inline .datepick-one-month {
        margin-bottom: 30px;
    }

  }

  @media only screen and (max-width: 480px) {

    .logo {
        width: 37%;
        margin-top: 36px;
        margin: auto;
        display: block
    }

    .navMobile ul {
        margin: auto;
        display: block;
        width: 90%;
        float: none;
    }

    .header {
        width: 100%;
    }

    .headerContent h1 {
        font-size: 45px;
        line-height: 45px;
    }

    .headerContent h2 {
        font-size: 18px;
        width: 100%;
    }

    .footer img {
        display: none;
    }

    .footer {
        text-align: center;
    }

    .footer .col-md-3 {margin-bottom: 20px;}

    .footer .row {width: 100%;}

    .bhMediaMobile {
        text-align: center !important;
        padding-top: 20px;
    }
	  
.imgSpace img {
	margin: auto;
    display: block;
    margin-bottom: 20px;
}
  }

  @media only screen and (max-width: 376px) {

    .navMobile ul {
        width: 100%;
    }

    .headerContent h1 {
        font-size: 33px;
        line-height: 38px;
    }

    .infoMobile {float: left; text-align: left; }

    .infoMobile .mx-3 {
        margin-right: 5rem!important;
    }

  }