/*
Theme Name: Roofex
Theme URI: http://roofex.casethemes.net/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/
Description: Roofex is a WordPress theme perfect for metal roofexg, industrial roofexg, construction, exterior, maintenance, painting, remodelling, renovation, repair service, roof repair, roofers, roofexg, roofexg company, roofexg service, siding websites. The theme comes with creative 05 homepage design layouts for more websites. WordPress theme is made by Elementor page builder which is very easy to customize and it has a lot of features and a very strong admin panel for any client to make a good website. Get Roofex Theme now!
Version: 1.0.7
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: roofex
Tags: construction, exterior, maintenance, painting, remodelling, renovation, repair service, roof repair, roofers, roofexg, roofexg company, roofexg service, siding
*/

@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


body{
    font-family: "Nunito Sans", sans-serif !important;
}
h1, h2, h3, h4, h5, h6{
font-family: "Funnel Display", sans-serif;
    
}
.bafg-twentytwenty-container img {
    margin: 0;
    width: 100%;
    height: 300px !important;
}
.process-sec h3 {
    pointer-events: all;
    pointer-events: none;
    cursor: default;
}
.wrap-ctf1 .input-wrap {
  display: flex;
  align-items: center;
  gap: 10px; /* space between input and button */
}

.wrap-ctf1 input[type="text"] {
  flex: 1; /* input takes available space */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.wrap-ctf1 button {
  padding: 10px 20px;
  background: #0073e6;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.newsletter-sec .pxl-contact-form1 .wpcf7-form-control:not(.wpcf7-submit), .pxl-contact-form1 .pxl-select-higthlight {
    background-color: transparent;
    color: white;
    border: 2px solid;
}

.pxl-select-options li:first-child {
    color: #00585f;
    pointer-events: none;
    border-bottom: 1px solid #00585f29;
}
.twentytwenty-before-label, .twentytwenty-after-label {
    background: none !important;
    font-family: "Nunito Sans";
}
/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Fix common element overflow */
img, iframe {
  max-width: 100%;
  height: auto;
}
.pxl-text-editor p {
    margin-bottom: 10px !important;
}

.why-hawaii .pxl-item--desc{
    min-height: 290px;
}
.why-hawaii .pxl-swiper-slide .pxl-item--inner{
        padding: 48px 30px 48px 30px;
        background-color:#f5fced;
}
.why-hawaii .pxl-item--icon {
    margin-bottom: 20px;
    /* background-color: aqua; */
    /* padding: 20px; */
}
.why-hawaii .pxl-item--desc{
    text-align: justify;
}
.process-sec .pxl-item--icon {
    display: flex;
    justify-content: center; /* horizontally */
    align-items: center;     /* vertically */
    /* height: 150px; */           /* set container height */
}

.process-sec .pxl-item--icon svg {
    width: 70px;
    height: 70px;
}

.process-sec-1 h3 {
    margin-bottom: 0px;
    background-color: #6d9d46;
    width: max-content;
    padding: 10px 20px;
    color: #ffffff !important;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-left: -8px;
    text-transform: uppercase;
}
.process-sec-1 .elementor-widget-wrap {
    border: 1px solid #f0f0f0;
    padding: 23px !important;
    border-bottom: 5px solid #055960;
    background-color: #f5f5f5;
    border-radius: 10px;
}
.process-sec-1 .pxl-icon-box9 {
    text-align: left;
}
.problem-roof .pxl-item--inner{
        justify-content: left;
}
.problem-roof .btn-video{
    display: none;
}
.families-across .pxl-item--title span{
    color: #6d9d46 !important;
}
.why-choose .pxl-item--desc {
    min-height: 80px;
}
.why-choose .pxl-item--icon{
    margin-top: 20px;
}
.process-sec .pxl-item--title a {
    cursor: context-menu;
}
.service-list .pxl-image-box4 .pxl-item--inner .pxl-item-image{
    flex-shrink: 0;
}
.problem-roof .pxl-item--inner .pxl-item-image{
    flex-shrink: 0;
}
.we-promise h3 a {
    font-size: 19px;
    cursor: default;
}
.we-promise svg {
    width: 60px;
    height: 60px;
}
.process-sec-2 .elementor-widget-wrap {
    border: 1px solid #f0f0f0;
    padding: 23px !important;
    border-bottom: 5px solid #055960;
    background-color: #f5f5f5;
    border-radius: 10px;
}
.smart-plan .pxl-item--title{
    font-size: 20px;
}
.smart-plan .pxl-icon-box6 {
    box-shadow: none;
    padding: 26px 10px 28px 10px;
    border: 3px solid #00585f;
    border-radius: 5px;
    background-color: #00585f;
}
.smart-plan .bg-image{
    display: none;
}
.smart-plan .pxl-icon-box .pxl-item--title {
    background-color: #6d9d46;
    /* color: #555; */
    padding-bottom: 10px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 5px;
    padding-top: 10px !important;
    font-size: 17px;
}
.we-offer .elementor-image-box-wrapper {
    background-color: #055960;
    padding: 10px;
    color: white;
    /* border-radius: 10px; */
}
.we-offer .elementor-image-box-img{
    border: 5px solid #fff;
}
.we-offer .elementor-image-box-description {
    color: white;
}
.menu-item-13761{
    display: none !important;
}
@media (max-width: 1199px) {
    .menu-item-13761{
    display: block !important;
}
}
@media (max-width: 767px) {
.elementor-widget-icon-box.elementor-mobile-position-top .elementor-icon-box-wrapper {
        align-items: center !important;
        flex-direction: unset;
        gap: var(--icon-box-icon-margin, 15px);
        text-align: center;
    }
    .cta-sec .pxl-image-box1 .wrap-content{
            position: inherit;
    }
    .families-across .pxl-item--inner{
        text-align: center;
    }
}

/*===========*/
.we-offer .elementor-image-box-wrapper {
  padding: 30px !important;  
}

.we-offer h3.elementor-image-box-title {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
      font-family: "Nunito Sans", Sans-serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
}

.we-offer h3.elementor-image-box-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px; /* adjust length */
  height: 3px; /* adjust thickness */
  background-color: #ffffff; /* change color if needed */
}

.alum-roof-we-offer-sec .elementor-image-box-wrapper {
    min-height: 270px !important;
}

.we-offer p.elementor-image-box-description {
    min-height: 110px;
}

.monier-we-offer-sec p.elementor-image-box-description {
    min-height: auto !important;
}

.bituminous-cap-we-offer-sec .elementor-image-box-wrapper {
    min-height: 215px !important;
}

.bituminous-cap-we-offer-sec p.elementor-image-box-description {
    min-height: auto !important;
}

.wood-shake-we-offer-sec p.elementor-image-box-description {
    min-height: 85px !important;
}

@media (max-width: 767px) {
    .alum-roof-we-offer-sec .elementor-image-box-wrapper {
    min-height: auto !important;
}

.we-offer p.elementor-image-box-description {
    min-height: auto;
}

.monier-we-offer-sec p.elementor-image-box-description {
    min-height: auto !important;
}

.bituminous-cap-we-offer-sec .elementor-image-box-wrapper {
    min-height: auto !important;
}

.bituminous-cap-we-offer-sec p.elementor-image-box-description {
    min-height: auto !important;
}

.wood-shake-we-offer-sec p.elementor-image-box-description {
    min-height: auto !important;
}
}