/*
Theme Name: Premier Technologies2
*/


/*
font-family: 'Open Sans', sans-serif;

font-family: 'bebas_neuebold';
font-family: 'bebas_neuebook';
font-family: 'bebas_neuelight';
font-family: 'bebas_neueregular';
font-family: 'bebas_neuethin';
*/





@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('fonts/opensans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sansbold_italic';
    src: url('fonts/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sansitalic';
    src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
         url('fonts/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sanssemibold';
    src: url('fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('fonts/opensans-semibolditalic-webfont.woff2') format('woff2'),
         url('fonts/opensans-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bebas_neuebold';
    src:url('fonts/bebasneue/bebasneue_bold-webfont.woff2') format('woff2'),
        url('fonts/bebasneue/bebasneue_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'bebas_neuebook';
    src: url('fonts/bebasneue/bebasneue_book-webfont.woff2') format('woff2'),
         url('fonts/bebasneue/bebasneue_book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bebas_neuelight';
    src: url('fonts/bebasneue/bebasneue_light-webfont.woff2') format('woff2'),
         url('fonts/bebasneue/bebasneue_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bebas_neueregular';
    src: url('fonts/bebasneue/bebasneue_regular-webfont.woff2') format('woff2'),
         url('fonts/bebasneue/bebasneue_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bebas_neuethin';
    src: url('fonts/bebasneue/bebasneue_thin-webfont.woff2') format('woff2'),
         url('fonts/bebasneue/bebasneue_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
    margin: 0;
    padding: 0;
    font: normal 17px/1.4 'open_sansregular', sans-serif;
    background: #ffffff;
    color: #000;
}
.container {
    width: 100%;
    max-width: 1350px;
}

.container-medium {
    max-width: 900px;
    margin: 0 auto;
}




.transitionAll {
    -webkit-transition: all 0.25s ease;
       -moz-transition: all 0.25s ease;
         -o-transition: all 0.25s ease;
            transition: all 0.25s ease;
}

/**/
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
header.site_header {
    padding: 23px 0 16px;
}
.site-logo {
    margin: 0;
    padding: 0;
}
.site-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}
.top_menu {
    margin: 0 0 21px;
    color: #FFF;
}
.top_menu .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: right;
}

.top_menu .menu > li{
    display: inline-block;
    font-size: 30px;
    line-height: 40px;
    font-family: 'bebas_neueregular';
    vertical-align: top;
    margin: 0 0 0 10px;
}
.top_menu .menu > li > a {
    display: block;
    color: #940000;
    text-decoration: none; 
    position: relative;
    padding: 0 0 0 40px;
    height: 40px;
}
.top_menu .menu > li > a:hover {
    color: #940000;
}
.top_menu .menu > li > a:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(images/social_icons.jpg) no-repeat 0 0;
    background-size: cover;
}

.top_menu .menu > li > a:hover:before {
    opacity: 0.7;
}

.top_menu .menu > li.label_hide {
    font-size: 0;
    line-height: 0;
}


.top_menu .menu > li.sIcon-call .call_label {
    display: block;
    margin: 0 10px;
}

.top_menu .menu > li.sIcon-call > a:before {
    background-position: left top;
}
.top_menu .menu > li.sIcon-fb > a:before {
    background-position: -40px 0;
}
.top_menu .menu > li.sIcon-x > a:before {
    background-position: -40px 0;
}
.top_menu .menu > li.sIcon-youtube > a:before {
    background-position: -120px 0;
}

/**/
.navbar-default {
    margin: 0;
    padding: 0;
    min-height: inherit;
    background: none;
    border-radius: 0;
    border: none;
}

.navbar-collapse {
    margin: 0;
    padding: 0;
}
.navbar-default .navbar-nav>li>a {
    color: #940000;
}
.nav>li>a {
    font-family: 'bebas_neueregular';
    font-size: 20px;
    margin: 0;
    padding: 0;
    color: #FFF;
}
.navbar-default .nav>li {
    font-family: 'bebas_neueregular';
    font-size: 20px;
    padding: 0 16px 0 9px;
    position: relative;
    color: #FFF;
}
.navbar-default .navbar-nav>li:after{
    content: " | ";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.navbar-default .nav>li:last-child {
    padding-right: 0;
}
.navbar-default .nav>li:last-child:after {
    display: none;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background: none;
    color: #FFF;    
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background: none;
    color: #FFF;
}

.navbar-default .nav>li.dropdown .dropdown-menu {
    margin: 3px 0 0;
    padding: 8px 0;
    border: solid 1px #6f6f6f;
    background: #010101;
    -webkit-box-shadow:none;
    box-shadow:none;
    border-radius: 0;
    min-width: 140px;
}
.dropdown-menu>li>a {
    color: #FFF;
    margin: 0;
    padding: 0 8px;
    font-size: 16px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: #6f6f6f;
    text-decoration: none;
    background: none;
    outline: 0;
}

/**/
/* Sticky translucent nav that stays in place until it hits the top */
body.search-results .hero { display: none; }
.hero-slider {}
.hero-slider .slick-arrow {
    font-size: 0;
    line-height: 0;
    border: none;
    background: none;
    outline: none;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 2;
}
.hero-slider .slick-arrow:hover {
    opacity: 0.6;
}
.hero-slider .slick-prev.slick-arrow {
    background: url(images/sl_arrow_left.png) no-repeat left top;
    width: 49px;
    height: 56px;
    left: 0;
}
.hero-slider .slick-next.slick-arrow {
    background: url(images/sl_arrow_right.png) no-repeat left top;
    width: 50px;
    height: 57px;
    right: 0;
}
.slick-slide {
    outline: none;
    position: relative;
    background-size: cover;
}
.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
}
.slick-slide img.hero_inner_img {
/*    height: 200px;*/
}
.slick-dots {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 23px;
    text-align: center;
}
.hero .slick-dots li:first-child:last-child {
    display: none !important;
}
.slick-dots li {
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    margin: 5px; 
}
.slick-dots li button {
    display: block;
    width: 10px;
    height: 10px;
    border: solid 1px #ebebeb;
    background: #ffffff;
    margin: 0;
    padding: 0;
    outline: none;
}
.slick-dots li.slick-active button {
    background: #940000;
}


.heroCopy {
    position: absolute;
    width: 100%;
    top: 50%;
    text-align: center;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


.heroCopy h2 {
    margin: 0;
    padding: 0;
  font-size: 50px;
  font-family: 'bebas_neueregular';
  color: #FFF;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
    text-shadow: -1px 2px 20px rgba(0, 0, 0, 1);
    letter-spacing: 0.06em;
  
}
.heroCopy .hero_btn {}
.heroCopy .hero_btn a {
    font-size: 22px;
    font-family: 'bebas_neuebold';
    color: #FFF;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none
}
.heroCopy hero_btn a:hover {
    color: #880202;
}
/**/
#content {
}

.home_content {
    background: #880202;
    color: #ffffff;
    text-align: center;
    padding: 51px 8.5% 44px;
}
.home_content h2 {
    margin: 0 0 26px;
    padding: 0;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    font-size: 18px;
    letter-spacing: 0.06em;
}

.home_content p {
    margin: 0 0 15px;
    padding: 0;
    letter-spacing: 0.06em;
}


/**/
.box_sec {
    background: #ffffff;
    padding: 25px 45px;
    text-align: center;
    font-size: 0;
}

.box-item {
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    padding: 0 35px;
    margin: 15px 0;
    position: relative;
}

.box-item .box-item_inner {
    border: none
    position: relative;
    height: 100%;
}
.box_thumb {
    background-size: cover;
    background-position: center top;
    margin: 0 0 17px;
}
.box_thumb img {
    display: block;
    width: 100%;
}

.box_copy {
    padding: 0 13px;
}
.box_copy .box_title {
    margin: 0 0 11px;
    padding: 0;
    color: #940000;
    font-family: 'open_sansbold', sans-serif;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 0.04em;
}
.box_description {
    margin: 0 0 22px;
    padding: 0;
    font-family: 'open_sansregular', sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: normal;
    letter-spacing: 0.02em;
}

.hero_btn {
    margin: 0 0 15px;
}
.hero_btn a {
    text-decoration: none;
    color: #6f6f6f;
    font-family: 'bebas_neuebold';
    font-size: 19px;
    text-decoration: none;
    letter-spacing: 0.08em;
}
.hero_btn a:hover {
    color: #940000;
}

/**/
.testimonial_sec {
    background: url(images/testimonial_bg.jpg) no-repeat center top;
    background-size: cover;
    color: #FFF;
    text-align: center;
    padding: 128px 13%;
}

.testimonial_slider_item {}
.testimonial_slider_item h2 {
    margin: 0 0 24px;
    padding: 0;
    font-size: 18px;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.testimonial_slider_item .testimonial-content {
    margin: 0;
    padding: 0;
    font-size: 18px;
    letter-spacing: 0.08em;
}
.testimonial_slider_item .testimonial-content p {
    margin: 0 0 25px;
    padding: 0;
    font-size: 24px;
}

.testimonial_slider_item h3 {
    margin: 0 0 12px;
    padding: 0;
    text-align: center;
    letter-spacing: 0.06em;
    font-size: 30px;
    font-family: 'bebas_neueregular';
    font-weight: normal;
}

.testimonial_slider .slick-arrow {
    font-size: 0;
    line-height: 0;
    border: none;
    background: none;
    outline: none;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 2;
}
.testimonial_slider .slick-arrow:hover {
    opacity: 0.5;
}
.testimonial_slider .slick-prev.slick-arrow {
        background: url(images/sl_arrow_left.png) no-repeat left top;
    width: 49px;
    height: 56px;
    left: -16%;
}

.testimonial_slider .slick-next.slick-arrow {
    background: url(images/sl_arrow_right.png) no-repeat left top;
    width: 50px;
    height: 57px;
    right: -16%;
}

/**/
.site_footer {
    color: #FFF;
}
.site_footer .menu {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
    
}
.site_footer .menu > li {
    display: inline-block;
    vertical-align: top;
    font-family: 'bebas_neueregular';
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.14em;
}
.site_footer .menu > li:after {
    content: "|";
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}
.site_footer .menu > li:last-child:after {
    display: none;
}
.site_footer .menu > li > a {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    text-decoration: none;
}
.site_footer .menu > li > a:hover {
    color: #949494;
}
.site_footer .menu > li ul {
    display: none;
}
.footer_left {
    float: left;
    margin: 11px 0 7px;
}
.footer_left {}
.footer_right {
    margin: 34px 0 0;
    float: right;
    text-align: right;
}

.site_info {
    font-size: 12px;
    letter-spacing: 0.10em;
    opacity: 0.5;
}
.site_info a {
    text-decoration: none;
    color: #FFF;
}
.site_info a:hover {
}

/**/pageheader
h1.entry-title {
    margin: 0 !important;
    padding: 17px !important;
    background: #940000 !important;
    color: #FFF !important;
    text-align: center !important;
    font-family: 'bebas_neueregular' !important;
    font-size: 24px !important;
    letter-spacing: 0.14em !important;
     box-shadow: 1px 1.732px 2px 0px rgba(0, 0, 0, 0.2) !important;
}


.alignleft {
    float: left;
    margin: 0 15px 15px 0;
}
.alignright {
    float: right;
    margin: 0 0 15px 15px;
}

.aligncenter {
    margin: 0 auto 15px;
    display: block;
}

.entry-content {
    background: #ffffff;
    color: #940000;
    padding: 57px 50px;
     
}
.entry-content h2 {
    margin: 0 0 2px;
    padding: 0;
    font-size: 24px;
    line-height: 1.3;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    letter-spacing: 0.06em;
}

.entry-content h3 {
    margin: 0 0 2px;
    padding: 0;
    font-size: 20px;
    line-height: 1.3;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    
    letter-spacing: 0.06em;
}

.entry-content h4 {
    margin: 0 0 2px;
    padding: 0;
    font-size: 17px;
    line-height: 1.3;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    
    letter-spacing: 0.06em;
}

.entry-content h5 {
    margin: 0 0 2px;
    padding: 0;
    line-height: 1.3;
    font-size: 15px;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    
    letter-spacing: 0.06em;
}

.entry-content h6 {
    margin: 0 0 2px;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
    font-family: 'open_sansbold', sans-serif;
    font-weight: normal;
    
    letter-spacing: 0.06em;
}


.entry-content a {
    color: #ffffff;
    text-decoration: none;
}
.entry-content a:hover {
    
    color: #000;
}
.entry-content p {
    margin: 0 0 15px;
    padding: 0;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 15px;
    font-size: 17.5px;
    border-left: 5px solid #940000;
    background: #fff;
}

.entry-content ol, .entry-content ul {
    margin: 0 0 15px 39px;
    padding: 0;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #b7b7b7;
}


/**/
.product_sec {
    padding: 11px 0 50px;
}
.product_list {
    margin: 0 0 10px;
}
.product_list a {
    padding: 36px 0 37px;
    display: block;
    background-size: cover;
    background-position: center top;
    text-decoration: none;
    color: #FFF;
    text-transform: uppercase;
    font-size: 34px;
    letter-spacing: 0.14em;
    font-family: 'bebas_neuebold';
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
    position: relative;
}
.product_list a:hover {
    color: #FFF;
}
.product_list a span {
    position: relative;
    z-index: 2;
}
.product_list a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
    opacity: 0;
        -webkit-transition: all 0.25s ease;
       -moz-transition: all 0.25s ease;
         -o-transition: all 0.25s ease;
            transition: all 0.25s ease;

    
}
.product_list a:hover:after {
    opacity: 1;
}

.logo_item {}
.logo_item img {
    display: block;
    width: 100%;
    height: auto;
}

/**/
.contact_list {
    float: left;
    width: 67.214%;
    padding: 0 20px 0 0;
}

.contact_box {
    padding: 0 0 13px;
}


.contact-top {
    margin: 0 0 10px;
}
.member_image {
    float: left;
    width: 22%;
}
.member_image img {
    display: block;
    width: 100%;
    height: auto;
}
.member_info {
    padding: 0 0 0 20px;
    float: left;
    width: 78%;
}

.member_call a {
    color: #000;
    text-decoration: none;
}
.member_call a:hover {
    color: #940000;
}


.contact_form {
    float: right;
    width: 32.78600%;
    background: #cccccc;
    border: solid 1px #6f6f6f;
    padding: 17px 48px 19px;
}
.entry-content .contact_form h5 {
    margin: 0 0 11px;
    padding: 0;
    color: #940000;
}
.entry-content .contact_form p {
    margin: 0 0 18px;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
}


.input_sec {
    margin: 0 0 4px;
}
.input_sec input {
    display: block;
    background: #ffffff;
    border: none;
    outline: none;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 17px;
}
.textarea_sec {
    margin: 0 0 4px;
}
.textarea_sec textarea {
    display: block;
    background: #ffffff;
    border: none;
    outline: none;
    width: 100%;
    height: 100px;
    line-height: 1.5;
    padding: 0 24px;
    resize: none;
}
.captcha_sec {
    margin: 0 0 4px;
}
.submit_btn input {
    display: inline-block;
    vertical-align: top;
    background: #940000;
    color: #FFF;
    border: none;
    border-radius: 0;
    outline: none;
    width: 150px;
    height: 40px;
    line-height: 40px;
    font-family: 'bebas_neueregular';
    letter-spacing: 0.14em;
    font-size: 20px;
    text-align: center;
    
    
}

/**/
.entry-content .social_sec .social_media {
    margin: 0 0 14px;
    padding: 5px 0 0;
    list-style: none;
}
.entry-content .social_sec .social_media li {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px 0;
}

.location_wrapp {
    margin: 0 -10px;
}

.location_item {
    float: left;
    width: 50%;
    padding: 0 10px;
}
.location_address {
    margin: 0 0 14px;
}
.location_map iframe {
    display: block;
    width: 100%;
}
/**/
.container-post {
    max-width: 950px;
    margin: 0 auto;
}
.post-item + .post-item .postBroder {
    background: #940000;
    height: 1px;
    margin: 40px 15px;
    
}
.post_thumbnail a {
    display: block;
    text-decoration: none;
    background-size: cover;
    background-position: center top; 
}
.post_thumbnail img {
    display: block;
    width: 100%;
}


.postInfo {
    font-size: 14px;
    margin: 0 0 7px;
}

.post-btn-sec a.btn.btn-post {
    background: #940000;
    color: #FFF;
    border-radius: 0;
    font-family: 'bebas_neueregular';
    letter-spacing: 0.1em;
    font-size: 18px;
}

.post-btn-sec a.btn.btn-post:hover {
    background: #750000;
}

.wp-pagenavi {
    margin: 40px 0 0;
    text-align: center;
    border-top: solid 1px #940000;
    padding: 30px 0 0;
}

.wp-pagenavi a, .wp-pagenavi span {
    background: #940000;
    border: none;
    color: #fff;
    padding: 5px 10px;
    display: inline-block;
    min-width: 35px;
    font-size: 17px;
}

.wp-pagenavi .current {
    padding: 5px 10px;
    border: none;
    color: #ffffff;
    background: #6f0000;
    display: inline-block;
}

.wp-pagenavi a:hover, .wp-pagenavi span:hover {
    color: #ffffff;
    background: #6f0000;
    text-decoration: none;
}


@media (min-width: 768px){
    .mobile_bg {
        background: none !important;
    }
    .navbar-nav {
        float: right;
        margin: 0;
    }
    .navbar-default .nav>li.dropdown:hover .dropdown-menu{
        display: block;
    }
    .navbar-default .nav>li.dropdown .dropdown-menu:before {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        top: -10px;
        height: 20px;
    }
}


@media (max-width: 1350px) {
    .contact_list {
        width: 50%;
    }
    .contact_form {
        width: 50%;
    }
}
@media (max-width: 1100px) {
    .box_sec {
    background: #ebebeb;
    padding: 25px 25px;
    text-align: center;
    font-size: 0;
}
    
    .testimonial_sec {
        padding: 80px 13%;
    }
    .footer_left img {
        display: block;
        max-width: 300px;
    }
    .footer_right {
        margin: 22px 0 0;
    }
}

@media (max-width: 991px) {
    
    header.site_header {
        padding: 15px 0 15px;
    }
    .top_menu {
        margin: 0 0 10px;
        color: #FFF;
    }    
    .top_menu .menu > li {
        font-size: 20px;
        line-height: 20px;
    }
    .top_menu .menu > li > a {
        height: 20px;
        padding: 0 0 0 20px;
    }
    .top_menu .menu > li > a:before {
        width: 20px;
        height: 20px;
    }
    .top_menu .menu > li.sIcon-fb > a:before {
        background-position: -20px 0;
    }
    .top_menu .menu > li.sIcon-x > a:before {
        background-position: -40px 0;
    }
    .top_menu .menu > li.sIcon-youtube > a:before {
    background-position: -60px 0;
}

    
    /**/
    .home_content {
    background: #880202;
    color: #FFF;
    text-align: center;
    padding: 30px 3% 20px;
}
    .box_sec {
    background: #ebebeb;
    padding: 10px;
    text-align: center;
    font-size: 0;
}
    
    .hero_btn {
    margin: 0 0 10px;
}
    .box_description {
        margin: 0 0 15px;
    }
    .hero_btn a {
        font-size: 18px;
    }
    /**/
    .footer_left {
        float: none;
        text-align: center;
    }
    .footer_left img {
    display: inline-block;
        vertical-align: top;
    max-width: 200px;
}
    
    .footer_right {
        float: none;
        text-align: center;
        margin: 10px 0;
    }
    /**/
    .contact_list {
        width: 100%;
        padding: 0;
    }
    .contact_form {
        width: 100%;
        margin: 0 0 20px;
    }
    .location_wrapp {
        margin: 0;
    }
    .location_item {
        width: 100%;
        float: none;
        padding: 0;
    }
    .location_item + .location_item {
        margin: 20px 0 0;
    }
    .location_map iframe {
        height: 250px;
    }
    
    /**/
    .testimonial_slider_item .testimonial-content p {
        font-size: 18px;
    }
    .testimonial_slider_item h3 {
        font-size: 22px;
    }
    
}

@media (max-width: 767px) {
    
    .slick-slide img.hero_inner_img {
    height: auto;
}
    
    .site-logo { text-align: center; margin: 0 0 10px; }
    .site-logo img {
        display: inline-block;
        max-width: 180px;
    }
    
    .header-right {
        background: #333;
    }
    .top_menu {
    margin: 0;
    color: #FFF;
    position: absolute;
    top: 21px;
    z-index: 2;
}
    .navbar-toggle {
        margin: 15px 0;
        border: none;
        border-radius:0;
        background: #880202 !important;
    }
    .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
    .top_menu .menu {
        text-align: left;
    }
    
    
    
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
        background-color: transparent;
        color: #FFF;
        border: none;
        outline: none;
    }
    .navbar-nav {
    margin: 0;
}
    .navbar-default .nav>li {
        padding: 0;
    }
    .navbar-default .nav>li>a {
        padding: 15px;
        border-bottom: solid 1px #484848;
    }
    .navbar-default .navbar-nav>li:after {
        display: none;
    }
    
    .nav>li>a.mobileMenuArrow {
        border: none;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        width: 50px;
        height: 50px;
    }
    .mobileMenuArrow:before { 
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #484848;
    
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    left: 50%;
}
    
    .box-item {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .box-item +.box-item  {
        margin-top: 10px;
    }
    
    .site_footer .menu > li {
        font-size: 16px;
    }
    
    .testimonial_slider_item .testimonial-content {
        font-size: 16px;
    }
    .testimonial_slider_item h3 {
        font-size: 16px;
    }
    .testimonial_sec {
    padding: 40px 13%;
}
    
    /**/
    span.mobile_bg {
    display: block;
    background-size: cover;
}
    .heroCopy {
        padding: 30px 15px 55px;
        background: #333;
            position: inherit;
    width: 100%;
    top: inherit;
    text-align: center;
    left: inherit;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    }
    
    .heroCopy h2 { font-size: 30px; }
    .heroCopy .hero_btn a { font-size: 20px; }
    
    /**/
    .entry-content { padding: 15px 15px; }
    .product_sec {
    padding: 11px 0 15px;
}
    .product_list a {
        font-size: 24px;
    }
    
}

@media (max-width: 479px) {
    body { font-size: 14px; }
    blockquote { font-size: 14px; }
    .slick-dots {
        bottom: 3px;
    }
    .heroCopy {
        padding: 20px 15px 25px;
    }
    .heroCopy h2 {
        font-size: 24px;
    }
    
    .heroCopy .hero_btn a {
    font-size: 17px;
}
    .testimonial_slider_item .testimonial-content {
        font-size: 14px;
    }
    .testimonial_slider_item h3 {
        text-align: center;
    }
    .entry-content ol, .entry-content ul {
    margin: 0 0 15px 25px;
    padding: 0;
}
    .entry-content h2 {
        font-size: 18px;
    }
    .entry-content h3 {
        font-size: 16px;
    }
    .entry-content h4 {
        font-size: 15px;
    }
    /**/
    .contact_form {
        padding: 15px 15px 15px;
    }
    .wpcf7-recaptcha > div{
        max-width: 100%;
        overflow: auto;
    }
    .wpcf7-recaptcha iframe {
        /*max-width: 100%;*/
    }
    
    .post_thumbnail {
        margin: 0 0 15px;
    }
    .col-xxs-12 {
        float: none;
        width: 100%;
    }
    
    .post-item+.post-item .postBroder {
            margin: 30px 15px;
    }
    .wp-pagenavi {
    margin: 30px 0 0;
    padding: 15px 0 0;
}
    
    .wp-pagenavi a, .wp-pagenavi span {
            min-width: 29px;
    font-size: 14px;
    }
    .postInfo span {
        display: block;
    }
}

body {
    margin: 0;
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
}

.left {
  width: 25%;
}

.right {
  width: 75%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* Sticky translucent nav bar */
.hero-translucent-nav {
    position: fixed;        /* fixes it to the viewport */
    top: 0;                 /* stick to very top */
    left: 0;
    width: 100%;            /* span full width */
    z-index: 9999;          /* keep above hero images/slides */
    background: rgba(255,255,255,0.8); /* translucent white */
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* subtle shadow */
}

/* Style the menu inside */
.hero-translucent-nav .translucent-menu {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hero-translucent-nav .translucent-menu li {
    display: inline-block;
    margin: 0 15px;
}
.hero-translucent-nav .translucent-menu li a {
    color: #940000;
    font-family: 'bebas_neueregular';
    font-size: 20px;
    text-decoration: none;
}
.hero-translucent-nav .translucent-menu li a:hover {
    color: #750000;
}

/* ===========================
   Custom overrides added to
   1) make hero full-bleed (remove black side margins on home)
   2) make top header white with red lettering
   =========================== */

/* Make hero section span the full browser width even though the theme container is centered.
   This creates a full-bleed hero so you won't see the body background (dark margins) at the sides. */
@media (min-width: 768px) {
.hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
    /* if you want the hero to sit above the body background, ensure no extra padding/margins here */
    padding: 0;
}
}
/* Ensure slides stretch to the full width and have a reasonable min height */
.hero .hero-slider,
.hero .slide_item,
.hero .slick-slide {
    width: 100%;
    min-height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Header: white background, red link text */
header.site_header {
    background: #ffffff;
    /* keep existing padding */
    padding: 23px 0 16px;
    /* optional subtle bottom border */
    border-bottom: 1px solid #ececec;
}

/* Top small menu (right-hand icons/labels) */
.top_menu,
.top_menu .menu > li > a {
    color: #940000 !important;
}
.top_menu .menu > li > a:hover {
    color: #750000 !important;
}

/* Main nav links color */
.navbar-default .navbar-nav>li>a,
.nav > li > a {
    color: #940000 !important;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #750000 !important;
}

/* Dropdown menu styling for contrast on white header */
.navbar-default .nav>li.dropdown .dropdown-menu {
    background: #ffffff !important;
    border-color: #e6e6e6;
}
.dropdown-menu>li>a {
    color: #940000 !important;
}

/* Mobile header adjustments: header-right and toggle colors */
.header-right {
    background: #ffffff;
}

/* Navbar toggle (mobile) — white background and red bars for contrast */
.navbar-default .navbar-toggle {
    background: #ffffff !important;
    border-color: #e6e6e6;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #940000 !important;
}

/* Where existing rules set header-right or mobile colors, this final block uses !important to ensure the white/red theme applies. */

/* Small tweaks so the hero title (white text) is still readable if hero image is light:
   You can adjust to suit the image (currently heroCopy h2 is white). */
.heroCopy h2 {
    color: #ffffff; /* keep white by default; if you want red, change here */
}

/* If you prefer the small top menu icons to remain image-based and not be red,
   remove the color overrides above for .top_menu.* */

/* End overrides */
/* ===========================
   Header corner fix — append to your style.css
   =========================== */

/* Make the header full-bleed so the dark body background can't peek in at the corners */
header.site_header {
    background: #ffffff !important;
    /* full-bleed technique */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
    z-index: 1000;
    border-bottom: 1px solid #ececec;
    /* keep existing padding */
    padding: 23px 0 16px;
}

/* Ensure the right-side header region is white on all breakpoints */
.header-right {
    background: #ffffff !important;
}

/* Prevent previously set mobile rule from using a dark background */
@media (max-width: 767px) {
    .header-right {
        background: #ffffff !important;
    }
    /* keep the small top menu visible and positioned inside the white header */
    .top_menu {
        position: relative !important;
        top: auto !important;
        color: #940000 !important;
    }
    /* make the mobile toggle clearly visible on the white header */
    .navbar-default .navbar-toggle {
        background: #ffffff !important;
        border-color: #e6e6e6 !important;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #940000 !important;
    }
}

/* Make sure nav links remain red on white header */
.navbar-default .navbar-nav>li>a,
.nav > li > a,
.top_menu .menu > li > a {
    color: #940000 !important;
}
/* ===========================
   Header: full-bleed background but keep inner content constrained
   Append to the end of your style.css
   =========================== */

/* Keep the header visually full-bleed (white background) so the body background doesn't show,
   but ensure the content inside stays aligned with the site's centered container. */
header.site_header {
    background: #ffffff !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
    z-index: 1000;
    border-bottom: 1px solid #ececec;
    padding: 23px 0 16px;
}

/* Constrain the header's inner .container so text and nav sit within the site's normal margins */
header.site_header .container {
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;   /* match any site container padding you use */
    padding-right: 15px;  /* match any site container padding you use */
    box-sizing: border-box;
    position: relative;
}

/* If your header content uses .row directly (without nested container), ensure row is centered */
header.site_header .row {
    max-width: 1350px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Make sure header-right doesn't carry any dark background on mobile */
.header-right {
    background: transparent !important;
}

/* Keep nav and top menu text in red on white background */
.top_menu .menu > li > a,
.navbar-default .navbar-nav>li>a,
.nav > li > a {
    color: #940000 !important;
}
/* ===========================
   Remove remaining dark margins + make footer white with red text
   Append to the end of your style.css
   =========================== */

/* Remove the dark page background so no black margins appear anywhere */
body {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000;
}

/* Make footer full-bleed (like the header) and white so the body background can't peek through */
footer.site_footer {
    background: #ffffff !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
    z-index: 900;
    border-top: 1px solid #ececec;
    padding: 0;
}

/* Constrain the inner footer content to the site's normal centered width */
footer.site_footer .site_footer_inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 34px 15px;
    box-sizing: border-box;
    color: #940000 !important;
}

/* Footer text and links in red to match header */
.site_footer,
.site_footer .menu > li > a,
.site_footer a,
.site_footer .site_info {
    color: #940000 !important;
}
.site_footer .menu > li > a:hover,
.site_footer a:hover {
    color: #750000 !important;
}

/* Ensure any footer backgrounds/images are not showing a dark color */
footer.site_footer,
footer.site_footer * {
    background-image: none !important;
    background-color: transparent !important;
}

/* Make sure logo and other elements in footer are visible and not tinted */
.footer_left img {
    filter: none !important;
}

/* Mobile adjustments so footer content stays aligned like header */
@media (max-width: 767px) {
    footer.site_footer .site_footer_inner {
        padding: 20px 15px;
        text-align: center;
    }
    .footer_left,
    .footer_right {
        float: none;
        margin: 0;
        text-align: center;
    }
}
/* ===========================
   Header: translucent + sticky
   Main page: remove side margins (make main content use full width)
   Home: include products layout style
   Append to the end of style.css
   =========================== */

/* Make header translucent and sticky */
header.site_header {
    position: fixed;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
    background: rgba(255,255,255,0.85) !important; /* translucent */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    z-index: 2000;
    transition: background 200ms ease;
}

/* Give the header inner container the normal constrained width so logo/nav stay aligned */
header.site_header .container {
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    position: relative;
}

/* Keep header-right transparent so the translucent header shows consistent color */
.header-right {
    background: transparent !important;
}

/* Force nav/text colors to red on the light header */
.top_menu .menu > li > a,
.navbar-default .navbar-nav>li>a,
.nav > li > a {
    color: #940000 !important;
}

/* Make sure dropdown menus sit below the header (higher z-index)
   and are visible on the translucent header background */
.navbar-default .nav>li.dropdown .dropdown-menu {
    z-index: 2100;
    background: #ffffff;
}

/* Smoothly make header less translucent once user scrolls (optional) */
body.scrolled header.site_header {
    background: rgba(255,255,255,0.98) !important;
}

/* Remove margins on the sides of the main page content:
   - Ensure the main site container has no extra outer margin/padding
   - Expand .entry-content and .site_content to use the available container width */
.container {
    padding-left: 0;
    padding-right: 0;
}

/* Make the inner content area use the full width inside the centered container:
   this removes extra inner side gutters while keeping a small padding for breathing space. */
.entry-content,
.site_content,
.container-medium,
.container-post {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* If you prefer zero padding inside content, set to 0; currently 15px offers minimal breathing room */
.entry-content {
    padding: 57px 15px; /* changed from 57px 50px */
}

/* Make product section pulled onto the home page match the existing product styling */
.home_products .product_list {
    margin-bottom: 10px;
}

/* Ensure the hero sits below the fixed header (header is fixed via JS body padding) */
/* If you need any specific extra offset for hero, add it here. */

/* small responsive tweaks to ensure fixed header doesn't overlap mobile nav toggles */
@media (max-width: 767px) {
    header.site_header {
        padding: 12px 0;
    }
    /* ensure top menu that was positioned absolute earlier returns to normal flow */
    .top_menu {
        position: relative !important;
        top: auto !important;
    }
    .entry-content {
        padding: 15px;
    }
}
/* john- delete here ok 
/* Make hero sit flush to the top under the fixed translucent header */
.hero {
    margin-top: 0 !important;
    /* ensure hero is behind the header */
    position: relative;
    z-index: 1;
}

/* Ensure header stays above the hero */
header.site_header {
    z-index: 2000;
}

/* When we push #content down via JS we want its layout preserved */
#content {
    box-sizing: border-box;
}

/* Safety: when no hero exists, #content padding-top will be cleared by the script */
/* =========================
   Header size adjustments
   Add to the end of your style.css (or child theme stylesheet)
   ========================= */

header.site_header {
    /* reduce top/bottom padding to make header shorter */
    padding: 8px 0;
}

.site-logo img {
    /* limit logo width so header height shrinks */
    max-width: 200px;
    height: auto;
    display: block;
}

.header-right {
    /* nudge the right-side header content up */
    padding-top: 6px;
}

.top_menu {
    /* reduce the top menu spacing */
    margin: 0 0 8px;
}

/* slightly tighten the navbar toggle spacing on small screens */
.navbar-toggle {
    margin: 8px 0;
}

/* Mobile tweaks */
@media (max-width: 767px) {
    .site-logo img {
        max-width: 140px; /* smaller logo on phones */
    }
    .top_menu {
        top: 14px; /* move top-menu closer to header on small screens */
    }
}
/* Move logo slightly to the right on larger screens, but keep centered on mobile */
.site-logo {
    margin-left: clamp(36px, 7.5vw, 120px); /* tweak min/ideal/max offset here */
}

/* Keep the existing centered behavior on small screens */
@media (max-width: 767px) {
    .site-logo {
        margin-left: 0;
    }
}
/* ================================
   Space primary nav items and match right spacing to the logo
   Add to the end of your style.css (or child stylesheet)
   Matches the logo offset: margin-left: clamp(36px, 7.5vw, 120px)
   ================================ */

/* Keep same right spacing as the logo */
.site-logo {
    margin-left: clamp(36px, 7.5vw, 120px);
}

/* Give the header right-side the same inset so nav doesn't butt up to the edge */
.header-right {
    padding-right: clamp(36px, 7.5vw, 120px);
}

/* Desktop / tablet: lay out the primary menu as a flex row, space items across,
   and prevent wrapping so the visual spacing remains consistent */
@media (min-width: 768px) {
    /* Make the collapsed container behave as a flex-box so the nav can grow */
    .navbar-default .collapse.navbar-collapse {
        display: flex !important;
        align-items: center;
        gap: 1rem;
    }

    /* Primary nav becomes a flex row that takes remaining space and spaces items */
    .navbar-default .navbar-nav {
        display: flex;
        flex: 1 1 auto;         /* take available space */
        justify-content: space-between; /* spread items evenly */
        align-items: center;
        gap: clamp(12px, 2vw, 36px); /* additional breathing room between items */
        white-space: nowrap;    /* avoid wrapping where possible */
        margin: 0;              /* reset any inline-list margins */
    }

    /* Remove float behaviour so flex works predictably */
    .navbar-default .navbar-nav > li {
        float: none;
    }

    /* Keep link padding reasonable so spacing is visually balanced */
    .navbar-default .navbar-nav > li > a {
        padding: 10px 6px;
        display: inline-block;
    }
}

/* Mobile: restore stacked behaviour (collapsed menu) and keep logo centered */
@media (max-width: 767px) {
    .header-right {
        padding-right: clamp(12px, 3vw, 30px); /* smaller inset on phones */
    }
    .navbar-default .collapse.navbar-collapse,
    .navbar-default .navbar-nav {
        display: block;
        width: 100%;
    }
    .navbar-default .navbar-nav > li {
        float: none;
        display: block;
        width: 100%;
    }
    .navbar-default .navbar-nav > li > a {
        padding: 10px 15px;
    }
}
/* -----------------------------
  Updates for static white header + translucent nav overlay on hero
  Append to the end of style.css (or child stylesheet).
  - static-white-header: fully opaque white bar with centered logo
  - hero-translucent-nav: translucent overlay on top of hero with centered menu
  ----------------------------- */

/* ---------- Static white header (opaque) ---------- */
.static-white-header {
    width: 100%;
    background: #ffffff; /* fully opaque white */
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    z-index: 1100;
}

.static-white-header .static-inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 10px clamp(36px, 7.5vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center; /* center the logo horizontally */
}

/* Logo sizing and centering inside the white header */
.static-white-header .site-logo img {
    max-width: clamp(90px, 20vw, 220px);
    height: auto;
    display: inline-block;
}

/* Remove previous header nav/logo layout conflicts by ensuring original header rules don't apply */
header.site_header {
    display: none; /* hide legacy header area (we moved logo/nav) */
}

/* ---------- Hero + translucent nav overlay ---------- */
.hero {
    position: relative;
    overflow: visible;
}

/* ---------- Updated: make translucent overlay span full width and scroll with page ----------
   Replace or append this block at the end of your style.css (it overrides the previous
   .hero-translucent-nav rules). The overlay will span the entire viewport width and sit
   over the top of the hero (absolute within the hero), but it will move up/down as the
   page scrolls (not fixed to the viewport).
--------------------------------------------------------------------------------------- */

.hero {
    position: relative; /* ensure absolute children are positioned relative to hero */
}

/* Full-width translucent nav overlay across the viewport */
.hero-translucent-nav {
    position: absolute;
    top: 12px;            /* distance from top edge of hero */
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255,255,255,0.75); /* translucent white */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px 0;       /* vertical padding; horizontal spacing handled by inner container */
    z-index: 1050;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: flex;
    justify-content: center; /* center inner container horizontally */
    pointer-events: auto;
}

/* Inner container keeps menu centered and constrained while the bar spans full width */
.hero-translucent-nav .translucent-inner {
    width: 100%;
    max-width: 1350px; /* keep menu at the same max width as your site */
    padding: 0 clamp(16px, 3vw, 36px); /* horizontal padding on very small viewports */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu styling remains the same but now lives inside the inner container */
.translucent-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(14px, 3vw, 36px);
    align-items: center;
    justify-content: center;
}

/* Keep items inline and styled */
.translucent-menu > li {
    display: inline-block;
}

.translucent-menu > li > a {
    color: #111;
    text-decoration: none;
    font-family: 'bebas_neueregular', sans-serif;
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: 0.08em;
    padding: 6px 2px;
}

/* Mobile tweaks: allow wrap and reduce spacing */
@media (max-width: 767px) {
    .hero-translucent-nav {
        top: 8px;
        padding: 6px 0;
    }
    .hero-translucent-nav .translucent-inner {
        padding-left: 12px;
        padding-right: 12px;
    }
    .translucent-menu {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .translucent-menu > li > a {
        font-size: 14px;
        padding: 6px 8px;
    }
}

/* Optional: small shift when hero has less height to keep overlay visible */
@media (max-height: 420px) {
    .hero-translucent-nav { top: 6px; }
}

/* Menu inside the translucent overlay: center items horizontally */
.translucent-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(14px, 3vw, 36px); /* spacing between menu items */
    align-items: center;
}

/* Individual items */
.translucent-menu > li {
    display: inline-block;
}

/* Links styling */
.translucent-menu > li > a {
    color: #111;
    text-decoration: none;
    font-family: 'bebas_neueregular', sans-serif;
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: 0.08em;
    padding: 6px 2px;
    text-transform: none;
}

/* Hover/focus states */
.translucent-menu > li > a:hover,
.translucent-menu > li > a:focus {
    color: #940000;
    text-decoration: none;
}

/* Ensure the overlay does not push hero content down */
.hero .hero-slider {
    margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .hero-translucent-nav {
        top: 10px;
        padding: 6px 12px;
        left: 50%;
        transform: translateX(-50%);
    }
    .translucent-menu {
        gap: clamp(10px, 4vw, 20px);
    }
    .translucent-menu > li > a {
        font-size: clamp(13px, 3.5vw, 16px);
    }
}

@media (max-width: 767px) {
    /* On small screens, collapse the translucent nav to a slightly taller pill and allow wrapping */
    .hero-translucent-nav {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 10px;
        width: auto;
        white-space: normal;
        line-height: 1.1;
    }
    .translucent-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .translucent-menu > li > a {
        padding: 6px 8px;
        display: inline-block;
    }
}

/* If you want the translucent nav to overlay centered on the hero even when hero images vary,
   the absolute positioning above will keep it visually centered. */
.hero {
    margin-top: 0 !important;
    /* ensure hero is behind the header */
    position: relative;
    z-index: 1;
}
/* Sticky-on-scroll translucent nav (robust) */

/* initial overlay behaviour */
.hero-translucent-nav {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    background: rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 180ms ease, box-shadow 180ms ease, padding 120ms ease;
    z-index: 1050;
}

/* small inner container */
.hero-translucent-nav .translucent-inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ================================
   Footer styles (full block)
   Paste this into your theme's style.css (ideally near the end).
   Adjust colors/spacing to match your site as needed.
   ================================ */

.site_footer {
    background: #e9eae3; /* light, warm grey similar to reference */
    color: #444;
    padding: 46px 0 18px;
    font-family: 'open_sansregular', sans-serif;
    box-sizing: border-box;
}

.site_footer_inner.footer-flex {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Columns */
.footer-col {
    box-sizing: border-box;
}

/* Column widths (desktop) */
.footer-col-logo { flex: 0 0 28%; max-width: 28%; }
.footer-col-follow { flex: 0 0 18%; max-width: 18%; }
.footer-col-newsletter { flex: 0 0 28%; max-width: 28%; }
.footer-col-contact { flex: 0 0 24%; max-width: 24%; }

/* Logo & tagline */
.footer-logo {
    display: block;
    max-width: 220px;
    height: auto;
    margin-bottom: 18px;
}
.footer-tagline {
    margin: 0;
    color: #6a6a5f;
    font-size: 16px;
    line-height: 1.6;
}

/* Headings */
.footer-heading {
    margin: 0 0 14px 0;
    font-family: 'open_sansbold', sans-serif;
    color: #4a5535; /* muted green-ish in reference */
    font-size: 18px;
    letter-spacing: 0.02em;
}

/* Social list */
.footer-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-social-list li { margin: 0 0 10px; }
.footer-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    text-decoration: none;
    font-size: 16px;
}
.footer-social-link .fa {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.06);
    color: #444;
    background: transparent;
}
.footer-social-link:hover .fa,
.footer-social-link:focus .fa {
    color: #fff;
    background: #4a5535;
    border-color: rgba(0,0,0,0.08);
}

/* Newsletter / stay informed */
.footer-newscopy {
    color: #6a6a5f;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
}
.footer-cta {
    display: inline-block;
    background: #caa63a; /* golden button as in reference */
    color: #fff;
    padding: 12px 28px;
    border-radius: 28px;
    text-decoration: none;
    font-weight: 600;
    transition: background .18s ease, transform .12s ease;
}
.footer-cta:hover,
.footer-cta:focus {
    background: #b58f2f;
    transform: translateY(-2px);
}

/* Contact list */
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    color: #4a4a46;
    font-size: 15px;
    line-height: 1.6;
}
.contact-item i.fa {
    color: #caa63a; /* accent icon color */
    font-size: 18px;
    min-width: 20px;
    display: inline-block;
}
.contact-item a {
    color: #4a4a46;
    text-decoration: none;
}
.contact-item a:hover,
.contact-item a:focus {
    color: #000;
}

/* Bottom bar */
.site_footer_bottom {
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: 30px;
    padding: 14px 0 30px;
    background: transparent;
}
.site_footer_bottom_inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6a6a5f;
    font-size: 13px;
}
.site_footer_bottom_inner a { color: #6a6a5f; text-decoration: none; }
.site_footer_bottom_inner a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 991px){
    .site_footer_inner.footer-flex {
        flex-wrap: wrap;
        gap: 24px;
        padding: 0 18px;
    }
    .footer-col-logo, .footer-col-newsletter, .footer-col-contact, .footer-col-follow {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .site_footer_bottom_inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 599px){
    .footer-col-logo, .footer-col-newsletter, .footer-col-contact, .footer-col-follow {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-heading { margin-top: 6px; }
    .footer-social-link { font-size: 15px; }
    .footer-logo { max-width: 180px; }
    .site_footer { padding: 30px 0 16px; }
}

/* stuck state: pinned to top of viewport */
.hero-translucent-nav--stuck {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: rgba(255,255,255,0.94) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding-top: 6px;
    padding-bottom: 6px;
}

/* placeholder used to preserve layout when nav is fixed */
.hero-translucent-nav-placeholder {
    display: block;
    width: 100%;
    height: 0;
    pointer-events: none;
}

/* small responsive tweak */
@media (max-width:767px){
    .hero-translucent-nav { top:8px; padding:6px 0; }
    .hero-translucent-nav--stuck { padding:6px 0; }
}
/* Social icons in the static white header (top-right) */
.static-white-header .static-inner {
    position: relative; /* make inner container positioning context */
}

/* Container for social links (positioned to the right of the header) */
.static-white-header .static-social {
    position: absolute;
    right: clamp(12px, 3.5vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* Unstyled list and items */
.static-white-header .social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Link appearance */
.static-white-header .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #940000;
    text-decoration: none;
    font-size: 16px;
    border-radius: 50%;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    background: transparent;
}

/* Hover/focus */
.static-white-header .social-link:hover,
.static-white-header .social-link:focus {
    color: #fff;
    background: #940000;
    transform: translateY(-1px);
    outline: none;
}

/* Slightly larger icons on desktop */
@media (min-width: 768px) {
    .static-white-header .social-link { width: 40px; height: 40px; font-size: 18px; }
}

/* Mobile: move social icons below the logo or hide if you prefer */
@media (max-width: 767px) {
    .static-white-header .static-social {
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
    /* If you prefer to hide icons on very small screens, uncomment below:
    .static-white-header .static-social { display: none; }
    */
}

/* Utility: accessible text visually hidden but available to screen-readers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Contact button in top-left of the static white header */
.static-white-header .static-inner {
    position: relative; /* positioning context for left/right controls */
}

/* Contact container (left) */
.static-white-header .static-contact {
    position: absolute;
    left: clamp(12px, 3.5vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1150;
}

/* Contact button appearance */
.static-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    color: #940000;
    text-decoration: none;
    border: 1px solid #940000;
    border-radius: 4px;
    background: transparent;
    transition: background .16s ease, color .16s ease, transform .12s ease;
    box-shadow: none;
}

/* Icon inside button */
.static-contact-button .fa {
    font-size: 16px;
}

/* Button hover/focus */
.static-contact-button:hover,
.static-contact-button:focus {
    color: #ffffff;
    background: #940000;
    transform: translateY(-1px);
    outline: none;
}

/* Hide the word "Contact Us" on very small screens and show only the icon (optional) */
@media (max-width: 479px) {
    .static-contact-button .contact-text { display: none; }
    .static-contact-button { padding: 6px 8px; border-radius: 50%; width: 40px; height: 40px; justify-content: center; }
}

/* Keep social icons on the right as before (no change needed) */
.static-white-header .static-social {
    position: absolute;
    right: clamp(12px, 3.5vw, 40px);
    top: 50%;
    transform: translateY(-50%);
}

/* Ensure header elements don't overlap on very small widths — stack if necessary */
@media (max-width: 599px) {
    .static-white-header .static-inner {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .static-white-header .static-contact,
    .static-white-header .static-social {
        position: absolute;
        top: 8px;
        transform: none;
    }
    .static-white-header .static-contact { left: 8px; }
    .static-white-header .static-social { right: 8px; }
    .site-logo { text-align: center; }
}
/*
Full CSS including footer styles used by the footer.php above.
If you already have a large style.css, paste only the footer section below near the end,
or replace your current footer-related CSS with this block.
*/

/* ================================
   Footer styles (full block)
   ================================ */

.site_footer {
    background: #e9eae3; /* light, warm grey */
    color: #444;
    padding: 46px 0 18px;
    font-family: 'open_sansregular', sans-serif;
    box-sizing: border-box;
}

.site_footer_inner.footer-flex {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Columns */
.footer-col { box-sizing: border-box; }

/* Column widths (desktop) */
.footer-col-logo { flex: 0 0 28%; max-width: 28%; }
.footer-col-follow { flex: 0 0 18%; max-width: 18%; }
.footer-col-newsletter { flex: 0 0 28%; max-width: 28%; }
.footer-col-contact { flex: 0 0 24%; max-width: 24%; }

/* Logo */
.footer-logo {
    display: block;
    max-width: 220px;
    height: auto;
    margin-bottom: 6px;
}

/* Headings */
.footer-heading {
    margin: 0 0 14px 0;
    font-family: 'open_sansbold', sans-serif;
    color: #4a5535; /* muted green-ish */
    font-size: 18px;
    letter-spacing: 0.02em;
}

/* Social list */
.footer-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-social-list li { margin: 0 0 10px; }
.footer-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    text-decoration: none;
    font-size: 16px;
}
.footer-social-link .fa {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.06);
    color: #940000; /* red icons per request */
    background: transparent;
}
/* Hover */
.footer-social-link:hover .fa,
.footer-social-link:focus .fa {
    color: #fff;
    background: #940000;
    border-color: rgba(0,0,0,0.08);
}

/* Stay Informed (now a simple link to contact page) */
.footer-stay-link { margin: 0; }
.footer-stay-link a {
    color: #940000;
    text-decoration: none;
    font-weight: 600;
}
.footer-stay-link a:hover,
.footer-stay-link a:focus { text-decoration: underline; }

/* Contact list */
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    color: #4a4a46;
    font-size: 15px;
    line-height: 1.6;
}
.contact-item i.fa {
    color: #940000; /* red icons per request */
    font-size: 18px;
    min-width: 20px;
    display: inline-block;
}
.contact-item a {
    color: #4a4a46;
    text-decoration: none;
}
.contact-item a:hover,
.contact-item a:focus {
    color: #000;
}

/* Bottom bar */
.site_footer_bottom {
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: 30px;
    padding: 14px 0 30px;
    background: transparent;
}
.site_footer_bottom_inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6a6a5f;
    font-size: 13px;
}
.site_footer_bottom_inner a { color: #6a6a5f; text-decoration: none; }
.site_footer_bottom_inner a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 991px){
    .site_footer_inner.footer-flex {
        flex-wrap: wrap;
        gap: 24px;
        padding: 0 18px;
    }
    .footer-col-logo, .footer-col-newsletter, .footer-col-contact, .footer-col-follow {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .site_footer_bottom_inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 599px){
    .footer-col-logo, .footer-col-newsletter, .footer-col-contact, .footer-col-follow {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-heading { margin-top: 6px; }
    .footer-social-link { font-size: 15px; }
    .footer-logo { max-width: 180px; }
    .site_footer { padding: 30px 0 16px; }
}

/* ================================
   If your main style.css also contains nav/hero/testimonial styling, keep those rules.
   This footer CSS will integrate with the rest of the file.
   ================================ */
/* ================================
   Footer styles (updated for contact-left layout)
   Paste this into your theme's style.css (near the end) or in Additional CSS.
   ================================ */

.site_footer {
    background: #e9eae3; /* light, warm grey */
    color: #444;
    padding: 46px 0 18px;
    font-family: 'open_sansregular', sans-serif;
    box-sizing: border-box;
}

.site_footer_inner.footer-flex {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Columns */
.footer-col { box-sizing: border-box; }

/* Column widths (desktop) - logo, contact (wider), follow, stay informed */
.footer-col-logo { flex: 0 0 22%; max-width: 22%; }
.footer-col-contact { flex: 0 0 32%; max-width: 32%; } /* expanded to fit the full address */
.footer-col-follow { flex: 0 0 18%; max-width: 18%; }
.footer-col-newsletter { flex: 0 0 24%; max-width: 24%; }

/* Logo */
.footer-logo {
    display: block;
    max-width: 220px;
    height: auto;
    margin-bottom: 6px;
}

/* Headings */
.footer-heading {
    margin: 0 0 14px 0;
    font-family: 'open_sansbold', sans-serif;
    color: #4a5535; /* muted green-ish */
    font-size: 18px;
    letter-spacing: 0.02em;
}

/* Social list */
.footer-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-social-list li { margin: 0 0 10px; }
.footer-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    text-decoration: none;
    font-size: 16px;
}
.footer-social-link .fa-brands {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.06);
    color: #940000; /* red icons per request */
    background: transparent;
}
.footer-social-link:hover .fa-brands,
.footer-social-link:focus .fa-brands {
    color: #fff;
    background: #940000;
    border-color: rgba(0,0,0,0.08);
}

/* Stay Informed (now only a link to contact page) */
.footer-stay-link { margin: 0; }
.footer-stay-link a {
    color: #940000;
    text-decoration: none;
    font-weight: 600;
}
.footer-stay-link a:hover,
.footer-stay-link a:focus { text-decoration: underline; }

/* Contact list (address clickable to Google Maps) */
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    color: #4a4a46;
    font-size: 15px;
    line-height: 1.6;
}
.contact-item i.fa {
    color: #940000; /* red icons per request */
    font-size: 18px;
    min-width: 20px;
    display: inline-block;
}
.contact-item a {
    color: #4a4a46;
    text-decoration: none;
}
.contact-item a:hover,
.contact-item a:focus {
    color: #000;
}

/* Specific style for the map link so it fills line nicely and wraps */
.contact-map-link {
    color: #4a4a46;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
}
.contact-map-link:hover,
.contact-map-link:focus {
    text-decoration: underline;
    color: #000;
}

/* Phone link */
.contact-phone a {
    color: #4a4a46;
    text-decoration: none;
}
.contact-phone a:hover { color: #000; }

/* Bottom bar */
.site_footer_bottom {
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: 30px;
    padding: 14px 0 30px;
    background: transparent;
}
.site_footer_bottom_inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6a6a5f;
    font-size: 13px;
}
.site_footer_bottom_inner a { color: #6a6a5f; text-decoration: none; }
.site_footer_bottom_inner a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 991px){
    .site_footer_inner.footer-flex {
        flex-wrap: wrap;
        gap: 24px;
        padding: 0 18px;
    }
    /* stack columns two-up on tablet */
    .footer-col-logo, .footer-col-contact, .footer-col-follow, .footer-col-newsletter {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .site_footer_bottom_inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 599px){
    .footer-col-logo, .footer-col-contact, .footer-col-follow, .footer-col-newsletter {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-heading { margin-top: 6px; }
    .footer-social-link { font-size: 15px; }
    .footer-logo { max-width: 180px; }
    .site_footer { padding: 30px 0 16px; }
}
/* PRODUCTS / SERVICES — full-bleed section */
.ps-section {
  position: relative;
  width: 100vw;              /* full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  overflow: visible;
  z-index: 10;
  padding: 36px 0;           /* vertical padding for the section content */
  background: transparent;   /* background controlled by .ps-bg layers */
}

/* background layers (back/front) */
.ps-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, background-image;
  z-index: 0;
  opacity: 1;
}
.ps-bg--front { opacity: 1; }
.ps-bg--back { opacity: 0; }

/* inner container keeps content centered but backgrounds are full-bleed */
.ps-inner {
  position: relative;
  z-index: 2;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* grid & tiles */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ps-column {
  display: block;
  min-height: 360px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.04);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.ps-column-inner { height: 100%; display:flex; flex-direction:column; }
.ps-col-image { flex:1 1 auto; background-size:cover; background-position:center; min-height:220px; transition:transform 420ms ease; }
.ps-col-overlay { position:absolute; inset:0; background: rgba(0,0,0,0.14); transition: background 220ms ease; }
.ps-col-content { position:relative; padding:18px; z-index:3; color:#fff; }
.ps-col-heading { font-weight:700; font-size:18px; margin-bottom:6px; color:#fff; }

/* hover/focus */
.ps-column:hover, .ps-column:focus { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.14); }
.ps-column:hover .ps-col-overlay, .ps-column:focus .ps-col-overlay { background: rgba(0,0,0,0.28); }
.ps-column:hover .ps-col-image, .ps-column:focus .ps-col-image { transform: scale(1.04); }

/* responsive */
@media (max-width: 1199px) { .ps-grid { grid-template-columns: repeat(3,1fr); } .ps-column { min-height:320px; } }
@media (max-width: 767px) { .ps-inner { padding: 0 14px; } .ps-grid { grid-template-columns: 1fr; } .ps-column { min-height:220px; border-radius:4px; } }
/* ----------------------------------------
   Homepage: allow Elementor sections to be full-bleed
   Targets only the .home_content block used on front-page.php
   ---------------------------------------- */

/* Make the homepage block able to be full-bleed */
.home_content {
  background: transparent !important;
  padding: 0 !important;               /* remove theme padding for this block */
  box-sizing: border-box;
}

/* Make the immediate container expand to full viewport width so
   Elementor's "Stretch Section" and "Full Width" content can reach the edges */
.home_content .container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  margin-right: 50% !important;
  transform: translateX(-50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Remove extra inner theme padding so Elementor content uses full block area */
.home_content .home-content,
.home_content > .home-content,
.home_content .elementor {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Force Elementor internal containers to use full width inside the home block */
.home_content .elementor-section,
.home_content .elementor-section .elementor-container,
.home_content .elementor-widget-wrap,
.home_content .elementor-column,
.home_content .elementor-row {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Give widgets a small inner padding so text doesn't touch the edges.
   Adjust or remove if you want absolutely no gutters. */
.home_content .elementor-column > .elementor-widget-wrap {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Small device tweaks */
@media (max-width: 767px) {
  .home_content .container { width: 100% !important; transform: none !important; margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; }
  .home_content .elementor-column > .elementor-widget-wrap { padding-left: 12px !important; padding-right: 12px !important; }
}
/* HERO WRAPPER (add this class to the container) */
.hero-wrapper {
  position: relative;      /* required so absolute bg-layers sit on it */
  overflow: hidden;
  min-height: 600px;       /* match your instruction */
  box-sizing: border-box;
}

/* All background layers — make them fill the wrapper and start hidden */
.hero-wrapper .bg-layer {
  position: absolute;      /* set via Elementor Positioning -> Absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 400ms ease, transform 450ms ease;
  pointer-events: none;    /* click-through; overlay will handle interaction */
  z-index: 1;
}

/* Always-visible default background if you want one:
   give the layer a class of bg-default in Elementor and it will show initially */
.hero-wrapper[data-active="default"] .bg-default,
.hero-wrapper[data-active="planting"] .bg-planting,
.hero-wrapper[data-active="application"] .bg-application,
.hero-wrapper[data-active="harvest"] .bg-harvest,
.hero-wrapper[data-active="gps"] .bg-gps,
.hero-wrapper[data-active="decision"] .bg-decision,
.hero-wrapper[data-active="service"] .bg-service {
  opacity: 1;
  transform: scale(1);
}

/* HERO OVERLAY — top content that sits above the bg-layers */
.hero-overlay {
  position: relative;
  z-index: 10;             /* sits above bg layers */
  display: flex;           /* user requested Row + Space Between */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;         /* adjust as desired */
}

/* Hover items (inner blocks) — give a shared class + a per-item class */
.hero-overlay .hover-item {
  cursor: pointer;
  background: rgba(0,0,0,0.0);
  padding: 12px 18px;
  border-radius: 2px;
  transition: transform .22s ease, box-shadow .22s ease;
  text-decoration: none;
  color: inherit;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

/* Visual hover/focus */
.hero-overlay .hover-item:hover,
.hero-overlay .hover-item:focus {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}

/* Responsive: collapse or wrap as needed */
@media (max-width: 1100px) {
  .hero-overlay { flex-wrap: wrap; gap: 12px; justify-content: center; }
}
@media (max-width: 700px) {
  .hero-wrapper { min-height: 360px; }
  .hero-overlay { padding: 12px; }
}
/* ---------- Home Products Hero (append to style.css or paste into Additional CSS) ---------- */
.pt-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px; /* adjust as needed */
  box-sizing: border-box;
  width: 100%;
}

/* Background layers */
.pt-hero .pt-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 420ms ease, transform 420ms ease;
  z-index: 1;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Overlay grid: 6 columns on desktop */
.pt-hero .pt-overlay {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  height: 100%;
  align-items: end; /* titles sit near bottom like your sample */
  box-sizing: border-box;
  padding: 0 18px 22px;
}

/* Tile basics */
.pt-hero .pt-tile {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  outline: none;
  height: 100%;
  transition: transform .22s ease;
}

/* Inner sliding band that reveals description on hover/focus/active */
.pt-hero .pt-tile-inner {
  width: 100%;
  max-width: 520px;
  padding: 18px 26px;
  background: rgba(0,0,0,0.34);
  color: #fff;
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.2,.9,.3,1), background 220ms;
  box-sizing: border-box;
}

/* Title always visible */
.pt-hero .pt-title {
  font-family: 'bebas_neueregular', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Description initially hidden */
.pt-hero .pt-desc {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(12px);
  max-height: 0;
  transition: opacity 300ms ease, transform 300ms ease, max-height 300ms ease;
  line-height: 1.5;
}

/* See-more button */
.pt-hero .pt-cta {
  display: inline-block;
  margin-top: 12px;
  background: #e2b33b;
  color: #111;
  padding: 10px 18px;
  border-radius: 26px;
  text-decoration: none;
  font-weight: 600;
}

/* Hover / focus / active states: slide-up and reveal */
.pt-hero .pt-tile:hover .pt-tile-inner,
.pt-hero .pt-tile:focus .pt-tile-inner,
.pt-hero .pt-tile.active .pt-tile-inner {
  transform: translateY(-38%);
  background: rgba(0,0,0,0.46);
}

.pt-hero .pt-tile:hover .pt-desc,
.pt-hero .pt-tile:focus .pt-desc,
.pt-hero .pt-tile.active .pt-desc {
  opacity: 1;
  transform: translateY(0);
  max-height: 400px;
}

/* Show background corresponding to data-active */
.pt-hero[data-active="planting"] .bg-planting,
.pt-hero[data-active="application"] .bg-application,
.pt-hero[data-active="harvest"] .bg-harvest,
.pt-hero[data-active="gps"] .bg-gps,
.pt-hero[data-active="decision"] .bg-decision,
.pt-hero[data-active="service"] .bg-service {
  opacity: 1;
  transform: scale(1);
}

/* Default: when data-active unset, show planting (or set hero data-default attr) */
.pt-hero[data-active="default"] .pt-bg { opacity: 0; }

/* responsive columns */
@media (max-width: 1200px) {
  .pt-hero .pt-overlay { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .pt-hero .pt-overlay { grid-template-columns: repeat(2, 1fr); }
  .pt-hero { min-height: 420px; }
}
@media (max-width: 480px) {
  .pt-hero .pt-overlay { grid-template-columns: 1fr; }
  .pt-hero { min-height: 320px; }
  .pt-hero .pt-tile-inner { padding: 14px; }
  .pt-hero .pt-title { font-size: 18px; }
  .pt-hero .pt-desc { font-size: 14px; }
}
/* TEMP DEBUG: force the hero visible and on top */
.pt-hero, .pt-hero-debug {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 420px !important;
  position: relative !important;
  z-index: 99999 !important;
  background: rgba(148,0,0,0.08) !important;
}
/* Put the tiles aligned to the bottom of the hero */
.pt-hero .pt-overlay {
  display: grid !important;
  height: 100% !important;           /* make overlay fill hero height */
  align-items: end !important;       /* place items at bottom */
  align-content: end !important;
  padding-bottom: 22px !important;   /* spacing from bottom */
}

/* Ensure each tile inner area sits at the bottom (fallback) */
.pt-hero .pt-tile {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* Style the CTA: red background, white text */
.pt-hero .pt-cta {
  background: #940000 !important; /* your red */
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 26px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Optional: small hover tweak */
.pt-hero .pt-cta:hover,
.pt-hero .pt-cta:focus {
  background: #7a0000 !important;
  color: #fff !important;
}
/* 1) Force tiles to sit at the bottom of the hero and make titles easier to read */
.pt-hero {
  min-height: 520px !important;
}
.pt-hero .pt-overlay {
  display: grid !important;
  height: 100% !important;
  align-items: end !important;       /* place the tiles at the bottom */
  align-content: end !important;
  padding-bottom: 28px !important;
  box-sizing: border-box;
}

/* Tile layout tweaks */
.pt-hero .pt-tile {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* Title (header) styling - easier to read */
.pt-hero .pt-title {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;  /* legible sans */
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
}

/* Description styling */
.pt-hero .pt-desc {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.95) !important;
  line-height: 1.4 !important;
}

/* CTA already updated to red/white earlier; ensure padding + sizing matches */
.pt-hero .pt-cta {
  background: #940000 !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 26px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* 2) Make the translucent overlay/nav match slideshow inner width (so it lines up) */
.hero-translucent-nav .translucent-inner {
  max-width: 1350px !important; /* match your slideshow inner width */
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Keep the overlay visually above the hero content */
.hero-translucent-nav {
  z-index: 1050 !important;
}

/* small responsive tweaks */
@media (max-width: 1199px) {
  .pt-hero .pt-title { font-size: 18px !important; }
  .pt-hero { min-height: 420px !important; }
}
@media (max-width: 767px) {
  .pt-hero .pt-overlay { grid-template-columns: 1fr !important; align-items: end !important; }
  .pt-hero .pt-title { font-size: 16px !important; }
  .pt-hero { min-height: 320px !important; }
}
/* === Products / Services: bottom labels + slide-up on hover === */
.ps-section .ps-column {
  /* ensure tiles have predictable height & stacking */
  display: block;
  min-height: 360px;
  position: relative;
  overflow: hidden;
}

.ps-section .ps-column-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keep content at bottom */
  height: 100%;
  box-sizing: border-box;
}

/* content block (title + button) sits on bottom and animates up on hover */
.ps-section .ps-col-content {
  z-index: 3;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  transform: translateY(0);
  box-sizing: border-box;
  padding: 18px;
}

/* lift the copy up when hovering/focusing the tile */
.ps-section .ps-column:hover .ps-col-content,
.ps-section .ps-column:focus-within .ps-col-content {
  transform: translateY(-34%); /* adjust percentage to taste */
}

/* Slight visual darkening when hovered so text stays readable */
.ps-section .ps-column:hover .ps-col-overlay,
.ps-section .ps-column:focus-within .ps-col-overlay {
  background: rgba(0,0,0,0.32);
}
/* ---------- Make products (.pt-hero) full-bleed and flush with slideshow ---------- */
.pt-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;                /* remove outer gutters */
  box-sizing: border-box;
  overflow: visible;
  z-index: 10;
  margin-top: 0 !important;  /* ensure it sits flush under the hero */
}

/* Inner overlay: align to the same centered width as the hero */
.pt-hero .pt-overlay {
  max-width: 1350px;         /* match your hero inner width */
  margin: 0 auto;
  padding: 18px 12px;        /* small inner breathing room */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: end;          /* ensure tiles align to the bottom */
  box-sizing: border-box;
}

/* Tile layout: title/buttons sit at bottom and lift on hover */
.pt-hero .pt-tile {
  display: flex;
  align-items: end;          /* ensures inner content sits at the bottom */
  cursor: pointer;
  min-height: 320px;
  box-sizing: border-box;
}

.pt-hero .pt-tile-inner {
  width: 100%;
  padding: 18px 26px;
  background: rgba(0,0,0,0.34);
  color: #fff;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), background 220ms;
  transform: translateY(0);
  box-sizing: border-box;
}

/* Slide-up on hover/focus (adjust percentage to taste) */
.pt-hero .pt-tile:hover .pt-tile-inner,
.pt-hero .pt-tile:focus .pt-tile-inner,
.pt-hero .pt-tile.active .pt-tile-inner {
  transform: translateY(-38%);
}

/* show description on hover */
.pt-hero .pt-desc {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.pt-hero .pt-tile:hover .pt-desc,
.pt-hero .pt-tile:focus .pt-desc,
.pt-hero .pt-tile.active .pt-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive column counts and smaller lifts */
@media (max-width: 1200px) {
  .pt-hero .pt-overlay { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .pt-hero .pt-overlay { grid-template-columns: repeat(2, 1fr); }
  .pt-hero .pt-tile-inner { padding: 14px; }
  .pt-hero .pt-tile:hover .pt-tile-inner { transform: translateY(-22%); }
}
@media (max-width: 480px) {
  .pt-hero .pt-overlay { grid-template-columns: 1fr; }
  .pt-hero .pt-bg { min-height: 260px; } /* fallback */
  .pt-hero .pt-tile-inner { padding: 12px; }
  .pt-hero .pt-tile:hover .pt-tile-inner { transform: translateY(-12%); }
}

/* Safety overrides in case a parent adds padding */
.pt-hero, .pt-hero .pt-overlay {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Safer full-bleed breakout + visibility fixes for .pt-hero */
.pt-hero {
  /* safer breakout using margin calc (avoids some transform/fixed issues) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;

  /* ensure it's visible and occupies space */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 360px; /* change to match your slideshow if needed */
  z-index: 40 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ensure bg layers fill the section */
.pt-hero .pt-bg {
  display: block !important;
  min-height: 360px !important; /* match pt-hero */
  background-size: cover !important;
  background-position: center center !important;
  width: 100% !important;
}

/* overlay should be above bg */
.pt-hero .pt-overlay {
  position: relative;
  z-index: 45;
  max-width: 1350px;
  margin: 0 auto;
  padding: 12px 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: end;
}

/* tile visibility/layout */
.pt-hero .pt-tile { display:flex; align-items:end; min-height: 260px; }
.pt-hero .pt-tile-inner {
  transform: translateY(0);
  transition: transform .32s cubic-bezier(.2,.9,.2,1);
}

/* hover lift */
.pt-hero .pt-tile:hover .pt-tile-inner,
.pt-hero .pt-tile:focus .pt-tile-inner { transform: translateY(-30%); }

/* responsive adjustments */
@media (max-width: 1200px) { .pt-hero .pt-overlay { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 800px)  { .pt-hero .pt-overlay { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .pt-hero .pt-overlay { grid-template-columns: 1fr; } .pt-hero, .pt-hero .pt-bg { min-height: 240px !important; } }
/* Make products (.pt-hero or .ps-section) full-bleed, visible and bottom-aligned */
.pt-hero, .ps-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 40 !important;
}

/* background layers fill the area */
.pt-hero .pt-bg, .ps-section .ps-bg { min-height: 360px !important; background-size: cover !important; background-position:center !important; }

/* centered inner container / grid */
.pt-hero .pt-overlay, .ps-section .ps-inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 12px 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 14px;
  align-items: end;
}

/* tile internals - titles sit at bottom & lift on hover */
.pt-hero .pt-tile, .ps-section .ps-column { display:flex; align-items:end; min-height:260px; }
.pt-hero .pt-tile-inner, .ps-section .ps-col-content {
  transition: transform .32s cubic-bezier(.2,.9,.2,1);
  transform: translateY(0);
}
.pt-hero .pt-tile:hover .pt-tile-inner,
.ps-section .ps-column:hover .ps-col-content,
.pt-hero .pt-tile:focus .pt-tile-inner,
.ps-section .ps-column:focus .ps-col-content {
  transform: translateY(-34%);
}

/* responsive */
@media (max-width:1200px){ .pt-hero .pt-overlay, .ps-section .ps-inner { grid-template-columns: repeat(3,1fr); } }
@media (max-width:800px){ .pt-hero .pt-overlay, .ps-section .ps-inner { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .pt-hero .pt-overlay, .ps-section .ps-inner { grid-template-columns: 1fr; } .pt-hero .pt-bg, .ps-section .ps-bg { min-height: 240px !important; } }
/* Quick test: force product hero to use full width (temporary) */
.pt-hero {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 999 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* make sure background fills the section */
.pt-hero .pt-bg { width: 100% !important; min-height: 360px !important; background-size: cover !important; }

/* center overlay inside the full-bleed block */
.pt-hero .pt-overlay { max-width: 1350px; margin: 0 auto; padding: 12px; box-sizing: border-box; }
/* OK TO DELETE JOHNNNNNNNNNNN
/* === Products / Services: titled-bottom tiles that pop up on hover/focus === */
/* Ensure the products block is full-bleed (keeps previous full-bleed rules safe) */
.pt-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0;
}

/* Overlay grid centered */
.pt-hero .pt-overlay {
  max-width: 1350px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: end; /* keep tiles aligned to bottom */
  box-sizing: border-box;
}

/* Each tile: background shows behind, inner content sits at bottom and is absolute */
.pt-hero .pt-tile {
  position: relative;
  overflow: hidden;
  min-height: 320px;               /* adjust to taste */
  display: block;
}

/* The inner panel that slides up */
.pt-hero .pt-tile-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0,0,0,0.36);    /* dim overlay */
  color: #fff;
  padding: 20px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* start partially hidden so only the title band shows */
  transform: translateY(calc(100% - 80px)); /* show 80px (title area) initially */
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  will-change: transform;
}

/* Title always visible in the small band */
.pt-hero .pt-title {
  font-family: 'bebas_neueregular', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 12px 0;
}

/* Summary and CTA are hidden initially */
.pt-hero .pt-desc {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease, max-height 260ms ease;
  max-height: 0;
  overflow: hidden;
}

/* CTA (rounded button) hidden until hover */
.pt-hero .pt-cta {
  display: inline-block;
  background: #a80909;              /* deep red */
  color: #fff;
  padding: 10px 22px;
  border-radius: 34px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
  align-self: start;               /* keep button left aligned in the inner panel */
}

/* Hover / keyboard focus: slide the inner panel fully up and reveal content */
.pt-hero .pt-tile:hover .pt-tile-inner,
.pt-hero .pt-tile:focus-within .pt-tile-inner {
  transform: translateY(0);
  background: rgba(0,0,0,0.52);
}

/* Reveal summary & CTA on hover/focus */
.pt-hero .pt-tile:hover .pt-desc,
.pt-hero .pt-tile:focus-within .pt-desc {
  opacity: 1;
  transform: translateY(0);
  max-height: 480px;
}
.pt-hero .pt-tile:hover .pt-cta,
.pt-hero .pt-tile:focus-within .pt-cta {
  opacity: 1;
  transform: translateY(0);
}

/* small visual polish */
.pt-hero .pt-tile-inner { border-radius: 2px; }
.pt-hero .pt-tile:focus-within { outline: 3px solid rgba(148,0,0,0.12); }

/* Responsive column counts */
@media (max-width: 1200px) {
  .pt-hero .pt-overlay { grid-template-columns: repeat(3, 1fr); }
  .pt-hero .pt-tile-inner { transform: translateY(calc(100% - 96px)); } /* slightly taller band on medium */
}
@media (max-width: 800px) {
  .pt-hero .pt-overlay { grid-template-columns: repeat(2, 1fr); }
  .pt-hero .pt-tile { min-height: 260px; }
  .pt-hero .pt-tile-inner { transform: translateY(calc(100% - 110px)); }
}
@media (max-width: 480px) {
  .pt-hero .pt-overlay { grid-template-columns: 1fr; }
  .pt-hero .pt-tile { min-height: 220px; }
  .pt-hero .pt-tile-inner { transform: translateY(calc(100% - 100px)); padding: 14px; }
  .pt-hero .pt-title { font-size: 18px; }
  .pt-hero .pt-cta { padding: 8px 16px; }
}

/* Safety: make sure bg sits behind everything */
.pt-hero .pt-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center center; }
/* Ensure pt-hero and its grid fill the hero area so tiles sit at the very bottom */
.pt-hero {
  position: relative;
  min-height: 360px; /* match your slideshow height; increase if hero is taller */
  box-sizing: border-box;
}

/* Make the overlay fill the section so grid rows are full height */
.pt-hero .pt-overlay {
  height: 100%;
  display: grid;
  align-items: stretch; /* force grid items to full height */
  grid-auto-rows: 1fr;
}

/* Make each tile stretch to full height of the overlay cell */
.pt-hero .pt-tile {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: block;
}

/* Sliding inner panel anchored to bottom — uses CSS variable for visible band height */
:root { --pt-band: 88px; } /* adjust this value to control how much of the band is visible initially */
.pt-hero .pt-tile-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0,0,0,0.36);
  padding: 20px 24px;
  box-sizing: border-box;
  transform: translateY(calc(100% - var(--pt-band)));
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  will-change: transform;
}

/* On hover/focus slide the panel up to reveal summary & CTA */
.pt-hero .pt-tile:hover .pt-tile-inner,
.pt-hero .pt-tile:focus-within .pt-tile-inner {
  transform: translateY(0);
}

/* Responsive: reduce initial band on smaller screens */
@media (max-width: 1200px) { :root { --pt-band: 96px; } }
@media (max-width: 800px)  { :root { --pt-band: 110px; } }
@media (max-width: 480px)  { :root { --pt-band: 100px; } }
/* small helper so browsers that support it will offset anchored targets */
#products-services {
  scroll-margin-top: 88px; /* adjust to your header height */
}

/* enable native smooth scroll in browsers that support it (optional) */
html { scroll-behavior: smooth; }
/* Make the pt-hero fill the hero area and force tiles to the bottom */
.pt-hero {
  /* ensure the block fills the hero height synced by JS */
  min-height: 100%;
  height: auto;
  display: block;
  position: relative;
  box-sizing: border-box;
}

/* Ensure the overlay fills the pt-hero so grid rows are full height */
.pt-hero .pt-overlay {
  height: 100%;                 /* overlay fills the hero area */
  align-items: end !important;  /* align tiles to the bottom of their grid cells */
  align-content: end !important;
  display: grid !important;
  grid-auto-rows: 1fr;          /* make each grid row stretch to full height */
}

/* Make each tile stretch to the full overlay cell height and anchor inner panel to bottom */
.pt-hero .pt-tile {
  display: block;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Sliding inner panel anchored to bottom (visible band controlled by --pt-band) */
:root { --pt-band: 88px; } /* adjust if you want more/less of the title band showing */
.pt-hero .pt-tile-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(calc(100% - var(--pt-band)));
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  will-change: transform;
}

/* reveal on hover / focus */
.pt-hero .pt-tile:hover .pt-tile-inner,
.pt-hero .pt-tile:focus-within .pt-tile-inner {
  transform: translateY(0);
}

/* Small screens: slightly different initial band */
@media (max-width: 1200px) { :root { --pt-band: 96px; } }
@media (max-width: 800px)  { :root { --pt-band: 110px; } }
@media (max-width: 480px)  { :root { --pt-band: 100px; } }

/* Safety: ensure the products section background layers match height */
.pt-hero .pt-bg,
.ps-section .ps-bg {
  min-height: 100% !important;
}
/* Anchor the products hero tiles to the bottom of the hero images */
.pt-hero,
#products-services {
  position: relative;
  box-sizing: border-box;
  z-index: 40;
  min-height: 520px; /* fallback — adjust if needed, JS below will overwrite when available */
}

/* background layers fill the whole area */
.pt-hero .pt-bg,
#products-services .ps-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  z-index: 1;
  min-height: 100%;
}

/* position the tile overlay absolutely and pin it to the bottom */
.pt-hero .pt-overlay,
#products-services .ps-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                /* <-- sits at bottom of the block */
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  max-width: 1350px;
  margin: 0 auto;
  padding: 12px 18px;
  align-items: end;         /* make the tiles align to the bottom of their cells */
  box-sizing: border-box;
}

/* ensure each tile can anchor to the bottom of its grid cell */
.pt-hero .pt-tile,
#products-services .ps-column {
  position: relative;
  height: auto;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
}

/* sliding inner panel anchored to the bottom (tune band via --pt-band) */
:root { --pt-band: 88px; }
.pt-hero .pt-tile-inner,
#products-services .ps-col-content {
  position: relative;
  transform: translateY(0);
  transition: transform .36s cubic-bezier(.2,.9,.2,1);
}
/* Partner marquee: white banner with continuous right-to-left scroll
   - Inserts a white strip and moves the two logo images from right -> left
   - Duplicate group produces seamless looping
   - Respects prefers-reduced-motion
*/

.partner-marquee {
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0; /* vertical padding of the banner */
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
}

.partner-marquee__wrap {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/* track holds two groups (original + duplicate) */
.partner-marquee__track {
  display: flex;
  align-items: center;
  gap: 40px;               /* spacing between groups */
  width: 200%;             /* track will be twice the visible width (groups side-by-side) */
  box-sizing: content-box;
  /* animation: translate X to move left by 50% (one group width) */
  animation: pm-scroll 16s linear infinite;
  will-change: transform;
}

/* Each group contains the two logos side-by-side */
.partner-marquee__group {
  display: flex;
  align-items: center;
  gap: 56px;               /* spacing between logos */
  flex: 0 0 50%;           /* each group occupies half of the track (so two groups fill 100%) */
  box-sizing: border-box;
  justify-content: flex-start;
}

/* Logo sizing: adjust height as needed */
.partner-marquee__group img {
  height: 72px;
  max-height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

/* smaller screens: scale down logos & spacing */
@media (max-width: 991px) {
  .partner-marquee__group img { height: 56px; max-height: 56px; }
  .partner-marquee__group { gap: 28px; }
  .partner-marquee__track { animation-duration: 12s; }
}

@media (max-width: 480px) {
  .partner-marquee__group img { height: 44px; max-height: 44px; }
  .partner-marquee__group { gap: 18px; }
  .partner-marquee__track { animation-duration: 10s; }
}

/* Animation keyframes: translate left by 50% (one group's width) */
@keyframes pm-scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); } /* moves left by one group width */
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track { animation: none; }
}

/* Accessibility: visually hide duplicate group's alt text (already empty) and ensure proper semantics */
.partner-marquee__group[aria-hidden="true"] img { alt: ""; pointer-events: none; }
/* Seamless partner marquee — smooth continuous right→left loop */

/* container */
.partner-marquee {
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
}

/* center constraint */
.partner-marquee__wrap {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/* track holds two identical .partner-marquee__content blocks side-by-side */
.partner-marquee__track {
  display: flex;
  align-items: center;
  width: 200%;               /* visual width is two blocks */
  box-sizing: border-box;
  animation: pm-scroll 18s linear infinite;
  will-change: transform;
  /* pause on focus/hover for usability */
}
.partner-marquee__track:hover,
.partner-marquee__track:focus-within {
  animation-play-state: paused;
}

/* each content block holds the logos (no gap between blocks) */
.partner-marquee__content {
  display: flex;
  align-items: center;
  gap: 56px;                /* spacing between logos inside a block */
  flex: 0 0 50%;            /* exactly half the visible track width */
  box-sizing: border-box;
  justify-content: flex-start;
}

/* logos */
.partner-marquee__content img {
  height: 72px;
  max-height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

/* responsive tweaks */
@media (max-width: 991px) {
  .partner-marquee__content img { height: 56px; max-height: 56px; }
  .partner-marquee__content { gap: 36px; }
  .partner-marquee__track { animation-duration: 14s; }
}
@media (max-width: 480px) {
  .partner-marquee__content img { height: 44px; max-height: 44px; }
  .partner-marquee__content { gap: 20px; }
  .partner-marquee__track { animation-duration: 10s; }
}

/* Keyframes: move left by exactly the width of one content block (50%) */
@keyframes pm-scroll {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Respect reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track { animation: none; }
}
/* Seamless partner marquee — measured, cloned & animated with JS for no visual restart */

/* container */
.partner-marquee {
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
}

.partner-marquee__inner {
  max-width: 1350px; /* keep centered constraint; change to 100vw for full edge-to-edge */
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/* track: contains two lists (original + clone). JS will clone and set CSS variables */
.partner-marquee__track {
  display: flex;
  align-items: center;
  gap: 36; /* no gap between original and clone */
  box-sizing: content-box;
  will-change: transform;
  /* animation parameters will be set by JS via CSS variables:
     --pm-scroll-length: px amount to translate (width of ONE list)
     --pm-duration: animation duration in seconds
     Fallback: do not animate until JS sets .pm-ready class.
  */
  transform: translateX(0);
}

/* ready state (JS adds .pm-ready) starts the animation */
.partner-marquee__track.pm-ready {
  animation: pm-scroll linear infinite;
  animation-duration: var(--pm-duration, 35s);
  animation-timing-function: linear infinite;
  animation-name: pm-scroll;
  /* ensure continuous by using the computed transform (keyframes use CSS var) */
}

/* each list holds your logos in sequence */
.partner-marquee__list {
  display: flex;
  align-items: center;
  gap: 56px;                /* spacing between logos */
  flex: 0 0 auto;
  box-sizing: border-box;
  white-space: nowrap;
}

/* logos */
.partner-marquee__list img {
  height: 72px;
  max-height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  vertical-align: middle;
}

/* pause on hover/focus for usability */
.partner-marquee__track.pm-ready:hover,
.partner-marquee__track.pm-ready:focus-within {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .partner-marquee__list img { height: 56px; max-height: 56px; }
  .partner-marquee__list { gap: 36px; }
  .partner-marquee__track.pm-ready { animation-duration: var(--pm-duration, 35s); }
}
@media (max-width: 480px) {
  .partner-marquee__list img { height: 44px; max-height: 44px; }
  .partner-marquee__list { gap: 36px; }
  .partner-marquee__track.pm-ready { animation-duration: var(--pm-duration, 31s); }
}

/* Keyframes use the CSS variable --pm-scroll-length that JS sets (in px) */
@keyframes pm-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--pm-scroll-length) * -1)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track.pm-ready { animation: none !important; transform: none !important; }
}
/* ============================
   EZ Guide Page Only (page-id-11)
   Slide-up button reveal on hover
   ============================ */

/* Shared: base box styling */
.page-id-11 .box-item,
.page-id-1767 .box-item,
.page-id-48 .box-item,
.page-id-46 .box-item,
.page-id-50 .box-item,
.page-id-44 .box-item {
    position: relative;
    overflow: hidden;
    transition: transform 260ms ease, box-shadow 260ms ease;
}

/* Shared: hidden button state */
.page-id-11 .hero_btn,
.page-id-1767 .hero_btn,
.page-id-50 .hero_btn,
.page-id-46 .hero_btn,
.page-id-48 .hero_btn,
.page-id-44 .hero_btn {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 300ms ease, transform 300ms ease;
}

/* Shared: hover animation for button */
.page-id-11 .box-item:hover .hero_btn,
.page-id-1767 .box-item:hover .hero_btn,
.page-id-50 .box-item:hover .hero_btn,
.page-id-46 .box-item:hover .hero_btn,
.page-id-48 .box-item:hover .hero_btn,
.page-id-44 .box-item:hover .hero_btn {
    opacity: 1;
    transform: translateY(0);
}

/* Shared: hover animation for box */
.page-id-11 .box-item:hover,
.page-id-1767 .box-item:hover,
.page-id-50 .box-item:hover,
.page-id-46 .box-item:hover,
.page-id-48 .box-item:hover,
.page-id-44 .box-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16,20,10,0.12);
}
.page-id-11 .box-item:hover .box_description,
.page-id-1767 .box-item:hover .box_description,
.page-id-50 .box-item:hover .box_description,
.page-id-46 .box-item:hover .box_description,
.page-id-48 .box-item:hover .box_description,
.page-id-44 .box-item:hover .box_description {
    margin: 0 0 22px;
    padding: 0;
    font-family: 'open_sansregular', sans-serif;
    font-size: 14px;
    color: #6f6f6f;
    font-weight: normal;
    letter-spacing: 0.02em;
}


/* =========================================
/* PAGE 1333 — Make icon + text align nicely */
.page-id-1333 .wp-block-column p {
    display: flex;
    align-items: center; /* vertically centers text beside icon */
    gap: 10px; /* space between icon and text */
}

.page-id-1333 .wp-block-column p img {
    display: block;
}
/* Move the right column closer to the big image */
.page-id-1333 .wp-block-columns > .wp-block-column:nth-child(2),
.page-id-1340 .wp-block-columns > .wp-block-column:nth-child(2),
.page-id-1473 .wp-block-columns > .wp-block-column:nth-child(2),
.page-id-1476 .wp-block-columns > .wp-block-column:nth-child(2),
.page-id-1491 .wp-block-columns > .wp-block-column:nth-child(2),
.page-id-1482 .wp-block-columns > .wp-block-column:nth-child(2),
.page-id-1486 .wp-block-columns > .wp-block-column:nth-child(2) {
    margin-left: -150px; /* adjust this number */
}
/* =========================================
   PAGE 1333 — Icon hover dropdown
   ========================================= */

/* Make each icon row a vertical stack */
/* Make icon + label inline on multiple pages */
.page-id-1333 .wp-block-column p,
.page-id-1845 .wp-block-column p,
.page-id-1340 .wp-block-column p,
.page-id-1473 .wp-block-column p,
.page-id-1476 .wp-block-column p,
.page-id-1491 .wp-block-column p,
.page-id-1482 .wp-block-column p,
.page-id-1486 .wp-block-column p { 
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Hidden dropdown text */
.page-id-1333 .dropdown-text,
.page-id-1845 .dropdown-text,
.page-id-1340 .dropdown-text,
.page-id-1473 .dropdown-text,
.page-id-1476 .dropdown-text,
.page-id-1491 .dropdown-text,
.page-id-1482 .dropdown-text,
.page-id-1486 .dropdown-text {
    flex-basis: 100%;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    margin-left: calc(88px + 10px);
    font-size: 14px;
	line-height: 2.5;
    color: #444;
}

/* Reveal on hover */
.page-id-1333 .wp-block-column p:hover .dropdown-text,
.page-id-1845 .wp-block-column p:hover .dropdown-text,
.page-id-1340 .wp-block-column p:hover .dropdown-text,
.page-id-1473 .wp-block-column p:hover .dropdown-text,
.page-id-1476 .wp-block-column p:hover .dropdown-text,
.page-id-1491 .wp-block-column p:hover .dropdown-text,
.page-id-1482 .wp-block-column p:hover .dropdown-text,
.page-id-1486 .wp-block-column p:hover .dropdown-text {
    max-height: 200px;
    opacity: 1;
    margin-top: 4px;
}

/* Fix link color inside dropdown text */
.page-id-1333 .dropdown-text a,
.page-id-1845 .dropdown-text a,
.page-id-1340 .dropdown-text a,
.page-id-1473 .dropdown-text a,
.page-id-1476 .dropdown-text a,
.page-id-1491 .dropdown-text a,
.page-id-1482 .dropdown-text a,
.page-id-1486 .dropdown-text a {
    color: #444 !important;
    text-decoration: underline;
}
.page-id-1589 .box-item img {
    width: 100%;              /* fills the box horizontally */
    height: auto;             /* keeps aspect ratio */
    max-height: 220px;        /* optional: limits vertical size */
    object-fit: contain;      /* ensures full image is visible */
    display: block;
    margin: 0 auto;           /* centers the image */
}
h1.entry-title {
    margin: 0 !important;
    padding: 17px !important;
    background: #940000 !important;
    color: #FFF !important;
    text-align: center !important;
    font-family: 'bebas_neueregular' !important;
    font-size: 24px !important;
    letter-spacing: 0.14em !important;
     box-shadow: 1px 1.732px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
/* Base container */
.reveal-pair {
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  min-height: 420px; /* ensures room for image + caption */
}

/* Stack image on top of caption */
.reveal-inner {
  position: relative;
  padding: 80px 0; /* more vertical room */
}

/* Caption underneath */
.reveal-caption {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  max-width: none;
  margin: 0;
  padding: 0 5vw;
  text-align: center;
}

.reveal-caption h3 {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #940000;
}

.reveal-caption p {
  font-size: 2.05rem;
  line-height: 1.6;
  color: #6f6f6f;
}

/* Image starts centered over caption */
.reveal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1s ease;
  z-index: 2;
}

.reveal-image img {
  width: min(360px, 70vw); /* smaller + responsive */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  box-shadow: none;
}

/* LEFT version: image slides left */
.reveal-pair.left:hover .reveal-image {
  transform: translate(-180%, -50%);
}

/* RIGHT version: image slides right */
.reveal-pair.right:hover .reveal-image {
  transform: translate(80%, -50%);
}

/* Reveal caption when image moves */
.reveal-pair:hover .reveal-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile tweaks: don't overlay, just stack nicely */
@media (max-width: 768px) {
  .reveal-pair {
    min-height: 0;
    margin: 40px auto;
  }

  .reveal-inner {
    padding: 0 20px 40px;
  }

  .reveal-image {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 20px;
  }

  .reveal-pair.left:hover .reveal-image,
  .reveal-pair.right:hover .reveal-image {
    transform: none; /* no slide on hover for mobile */
  }

  .reveal-caption {
    opacity: 1;
    transform: none;
  }
}
/* Caption underneath */
.reveal-caption {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(20px); /* default slide up */
}

/* LEFT caption slides right */
.reveal-pair.left:hover .reveal-caption {
  opacity: 1;
  transform: translateX(40px);
}

/* RIGHT caption slides left */
.reveal-pair.right:hover .reveal-caption {
  opacity: 1;
  transform: translateX(-40px);
}
/* stay opennnn
/* Keep open after hover */
.reveal-pair.opened .reveal-caption {
  opacity: 1;
  transform: translateY(0);
}

.reveal-pair.left.opened .reveal-image {
  transform: translate(-180%, -50%);
}

.reveal-pair.right.opened .reveal-image {
  transform: translate(80%, -50%);
}
.reveal-pair::after {
  content: "";
  display: block;
  width: 220px;
  height: 3px;
  background: #940000;
  margin: 60px auto;
}
/* Sticky translucent nav that stays in place until it hits the top */
.hero-translucent-nav {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1200 !important;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(4px);

}
/* Comparison Table Styling */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Open Sans', sans-serif;
  font-size: 17px, bold;
  margin: 40px 0;
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: 14px 17px;
  border-bottom: 1px solid #ccc;
}

.comparison-table thead th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #333;
}

/* Hover effect for rows */
.comparison-table tbody tr:hover {
  background-color: #940000;
  color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Optional: make checkmarks bold */
.comparison-table td:contains("✓") {
  font-weight: bold;
}
/* Make icon + label inline on multiple pages */
.page-id-1845 .wp-block-column p,
.page-id-1860 .wp-block-column p { 
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Hidden dropdown text */
.page-id-1845 .dropdown-text,
.page-id-1860 .dropdown-text {
    flex-basis: 100%;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    margin-left: calc(88px + 10px);
    font-size: 16px;
    line-height: 2.5;
    color: #444;
}

/* Reveal on hover */
.page-id-1845 .wp-block-column p:hover .dropdown-text,
.page-id-1860 .wp-block-column p:hover .dropdown-text {
    max-height: 200px;
    opacity: 1;
    margin-top: 4px;
}

/* Keep dropdown open once JS adds .open */
.page-id-1845 .wp-block-column p.open .dropdown-text,
.page-id-1860 .wp-block-column p.open .dropdown-text {
    max-height: 200px;
    opacity: 1;
    margin-top: 4px;
}

/* Fix link color inside dropdown text */
.page-id-1845 .dropdown-text a,
.page-id-1860 .dropdown-text a {
    color: #444 !important;
    text-decoration: underline;
}
.page-id-1845 .feature-grid,
.page-id-1951 .feature-grid,
.page-id-1944 .feature-grid,
.page-id-1932 .feature-grid,
.page-id-1744 .feature-grid,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.page-id-1845 .feature-item,
.page-id-1964 .feature-item,
.page-id-1951 .feature-item,
.page-id-1944 .feature-item,
.page-id-1932 .feature-item,
.page-id-1744 .feature-item,
.feature-item {
  background: #FFF;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

.page-id-1845 .feature-item:hover,
.page-id-1964 .feature-item:hover,
.page-id-1951 .feature-item:hover,
.page-id-1944 .feature-item:hover,
.page-id-1932 .feature-item:hover,
.page-id-1744 .feature-item:hover,
.feature-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.page-id-1845 .feature-icon,
.page-id-1964 .feature-icon,
.page-id-1951 .feature-icon,
.page-id-1944 .feature-icon,
.page-id-1932 .feature-icon,
.page-id-1744 .feature-icon,
.feature-icon {
  width: 95px;
  height: 94px;
  margin: 0 auto 12px;
}

.page-id-1845 .feature-icon img,
.page-id-1964 .feature-icon img,
.page-id-1951 .feature-icon img,
.page-id-1944 .feature-icon img,
.page-id-1932 .feature-icon img,
.page-id-1744 .feature-icon img,
.feature-icon img {
  width: 100%;
  height: auto;
}

/* Spin animation */
.page-id-1845 .feature-icon.spin img,
.page-id-1964 .feature-icon.spin img,
.page-id-1951 .feature-icon.spin img,
.page-id-1944 .feature-icon.spin img,
.page-id-1932 .feature-icon.spin img,
.page-id-1744 .feature-icon.spin img,
.feature-icon.spin img {
  animation: spinIcon 3s linear infinite;
}

@keyframes spinIcon {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hop animation */
.page-id-1845 .feature-icon.hop img,
.page-id-1964 .feature-icon.hop img,
.page-id-1951 .feature-icon.hop img,
.page-id-1944 .feature-icon.hop img,
.page-id-1932 .feature-icon.hop img,
.page-id-1744 .feature-icon.hop img,
.feature-icon.hop img {
  animation: hopIcon 1.2s ease-in-out infinite alternate;
}

@keyframes hopIcon {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.page-id-1845 .feature-item strong,
.page-id-1964 .feature-item strong,
.page-id-1951 .feature-item strong,
.page-id-1944 .feature-item strong,
.page-id-1932 .feature-item strong,
.page-id-1744 .feature-item strong,
.feature-item strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
  color: #940000;
}

.page-id-1845 .feature-item p,
.page-id-1964 .feature-item p,
.page-id-1951 .feature-item p,
.page-id-1944 .feature-item p,
.page-id-1932 .feature-item p,
.page-id-1744 .feature-item p,
.feature-item p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}
/* Wrapper */
.hotspot-wrapper {
  position: relative;
  max-width: 100%;
  margin: 40px auto;
}

.hotspot-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Hotspot container */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* The clickable dot */
.hotspot-dot {
  width: 22px;
  height: 22px;
  background: #940000;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  animation: pulse 1.5s infinite;
}

/* Pulse animation */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0.6; }
}

/* Hidden content box */
.hotspot-content {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 15px;
  width: 220px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}

/* Show on click */
.hotspot.active .hotspot-content {
  display: block;
}

/* Title */
.hotspot-content h4 {
  margin: 0 0 8px;
  color: #940000;
  font-size: 18px;
}
/*
/* Default box position */
.hotspot-content {
  display: none;
  position: absolute;
  background: white;
  padding: 15px;
  width: 220px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}

/* Show on click */
.hotspot.active .hotspot-content {
  display: block;
}

/* Positioning logic */
.hotspot[data-offset="top-left"] .hotspot-content {
  top: -100px;
  left: -240px;
}

.hotspot[data-offset="top-right"] .hotspot-content {
  top: -100px;
  left: 30px;
}

.hotspot[data-offset="bottom-left"] .hotspot-content {
  top: 30px;
  left: -240px;
}

.hotspot[data-offset="bottom-right"] .hotspot-content {
  top: 30px;
  left: 30px;
}
/* Wrapper */
.gps-comparison {
  margin: 60px auto;
  max-width: 1200px;
  padding: 0 20px;
  font-family: sans-serif;
}

/* Title */
.gps-title {
  text-align: center;
  font-size: 32px;
  color: #940000;
  margin-bottom: 40px;
}

/* Grid layout */
.gps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

/* Column styling */
.gps-column {
  background: #ffffff;
  border-left: 6px solid #940000;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gps-column h3 {
  font-size: 20px;
  color: #940000;
  margin-bottom: 16px;
  text-align: center;
}

.gps-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gps-column li {
  margin-bottom: 20px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.gps-column li strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
  color: #222;
}

/* Notes section */
.gps-notes {
  margin-top: 40px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.gps-notes p {
  margin-bottom: 12px;
}
/* Section wrapper */
.turnpath-section {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
  font-family: sans-serif;
}

/* Title */
.turnpath-title {
  text-align: center;
  font-size: 32px;
  color: #940000;
  margin-bottom: 40px;
}

/* Grid layout */
.turnpath-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

/* Card styling */
.turnpath-card {
  background: #ffffff;
  border-left: 6px solid #940000;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Number styling */
.turnpath-number {
  font-size: 28px;
  font-weight: bold;
  color: #940000;
  flex-shrink: 0;
}

/* Text styling */
.turnpath-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.turnpath-text strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
  color: #222;
}
/* Container layout */
.ag-section {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

/* 66% / 33% split */
.ag-section__image {
  flex: 66 0%;
  position: relative;
  border-radius: 0px;
  overflow: hidden;
  background: #FFFFFF;
  min-height: 400px; /* ensures visibility */
}

.ag-section__sidebar {
  flex: 0 33%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Image handling */
.ag-section__image-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ag-section__image-el.active {
  opacity: 1;
}

/* Boxes */
.ag-section__box {
  border-radius: 8px;
  border: 1px solid #d4d4d4;
  padding: 1rem 1.2rem;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ag-section__box:hover {
  border-color: #940000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.ag-section__box.active {
  border-color: #940000;
  background-color: #faf5f5;
}

/* Header row inside boxes */
.ag-section__box-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

/* Dot indicator */
.ag-section__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #940000;
  background-color: transparent;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.ag-section__box.active .ag-section__dot {
  background-color: #940000;
}

/* Typography */
.ag-section__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #222222;
}

.ag-section__text {
  margin: 0;
  margin-top: 0.1rem;
  font-size: 11px;
  line-height: 1.5;
  color: #6f6f6f;
}

/* Responsive */
@media (max-width: 1216px) {
  .ag-section {
    flex-direction: column;
  }

  .ag-section__image,
  .ag-section__sidebar {
    flex: 1 1 auto;
  }

  .ag-section__image {
    min-height: 400px;
  }
}
.ag-feature {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: sans-serif;
}

/* Top nav */
.ag-feature__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ag-feature__tab {
  background: #f5f5f5;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 1.50rem;
  color: #6f6f6f;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: normal; 
  text-align: center; /* or center if you prefer */ 
  line-height: 1.4;
  max-width: 220px;
  align-items: center; 
  justify-content: center; 
  height: 60px;
}

.ag-feature__tab:hover {
  background: #eaeaea;
}

.ag-feature__tab.active {
  background: #940000;
  color: #ffffff;
}

/* 50/50 layout */
.ag-feature__content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.ag-feature__image {
  flex: 1;
  position: relative;
  min-height: 400px;
  border-radius: 8px;
  overflow: hidden;
}

.ag-feature__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ag-feature__image img.active {
  opacity: 1;
}

.ag-feature__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center; /* centers vertically */ 
  height: 50%;
  text-align: center;
  padding-top: 125px;
}

.ag-feature__panel {
  display: none;
}

.ag-feature__panel.active {
  display: block;
}

.ag-feature__text h2 {
  margin: 0;
  font-size: 2.25rem;
  color: #940000;
}

.ag-feature__text p {
  margin: 2rem 0 0;
  font-size: 1.75rem;
  color: #6f6f6f;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
  .ag-feature__content {
    flex-direction: column;
  }

  .ag-feature__image {
    min-height: 300px;
  }
}
/* ================================
   ACTIVE PROMOTIONS (BLOG INDEX)
   ================================ */

/* Card styling */
.blog .post-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
    margin: 20px 0 !important;
    padding: 20px !important;
    transition: transform 220ms ease, box-shadow 220ms ease !important;
}

.blog .post-content:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.18) !important;
}

/* Title */
.blog .entry-title a {
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: #000 !important;
}

/* Excerpt */
.blog .post-excerpt {
    font-size: 1rem !important;
    color: #444 !important;
    margin-bottom: 20px !important;
}

/* Button */
.blog .post-btn-sec .btn-post {
    background: #940000 !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: background 180ms ease !important;
}

.blog .post-btn-sec .btn-post:hover {
    background: #7a0000 !important;
}

/* Featured image screenshot style */
.blog .post_thumbnail a {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

.blog .post_thumbnail img {
    display: none !important;
}
@media (max-width: 767px) {
  .mobile-header {
    background: #fff;
    text-align: center;
    padding: 15px 10px;
  }

  .logo-wrap img {
    max-width: 180px;
    height: auto;
  }

  .social-icons {
    list-style: none;
    padding: 0;
    margin: 10px 0;
  }

  .social-icons li {
    display: inline-block;
    margin: 0 5px;
  }

  .social-icons img {
    width: 24px;
    height: 24px;
  }

  .mobile-nav {
    background: #940000;
    padding: 10px 0;
  }

  .mobile-nav a {
    display: block;
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 18px;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid #b00000;
  }

  .mobile-hero {
    position: relative;
  }

  .mobile-hero img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hero-overlay {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 15px;
    text-align: center;
  }

  .hero-overlay h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .hero-overlay p {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .hero-button {
    background: #940000;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 4px;
    display: inline-block;
  }
}
@media (max-width: 767px) {
  .mobile-header {
    background: #fff;
    text-align: center;
    padding: 15px 10px;
  }

  .logo-wrap img {
    max-width: 180px;
    height: auto;
  }

  .social-icons {
    list-style: none;
    padding: 0;
    margin: 10px 0;
  }

  .social-icons li {
    display: inline-block;
    margin: 0 5px;
  }

  .social-icons img {
    width: 24px;
    height: 24px;
  }

  .mobile-nav {
    background: #940000;
    padding: 10px 0;
  }

  .mobile-nav a {
    display: block;
    color: #fff;
    font-family: 'bebas_neueregular';
    font-size: 18px;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid #b00000;
  }

  .mobile-hero {
    position: relative;
  }

  .mobile-hero img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hero-overlay {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 15px;
    text-align: center;
  }

  .hero-overlay h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .hero-overlay p {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .hero-button {
    background: #940000;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 4px;
    display: inline-block;
  }
}