/*
Theme Name: Construction Child
Theme URI: http://www.wpcharming.com
Description: Construction Child Theme
Author: WPCharming
Author URI: http://www.wpcharming.com
Template: construction
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpcharming
Tags:two-columns, left-sidebar, right-sidebar, light, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* side quote form */
#secondary{ padding:40px 20px 40px 20px !important; }
#secondary aside.side_quote{ padding: 0 10px; background:#818286; }
#secondary aside.side_quote h4.widget-title{ color:#FFF; padding-top:10px; }
#wpcf7-f1531-o1 p{ margin:6px 0; color:#FFF; }
#wpcf7-f1531-o1 .grid-md-6{ margin:6px 0; }
#wpcf7-f1531-o1 input{ background:#FFF; padding:7px 3px !important; }
#wpcf7-f1531-o1 select{ border: 2px solid #e9e9e9; padding: 8.5px; }
#wpcf7-f1531-o1 select[name=budget]{ width:100%; }
#wpcf7-f1531-o1 select[name=referral]{ width:100%; }
#wpcf7-f1531-o1 textarea{ background:#FFF; padding:7px 3px !important; height:100px; }
#wpcf7-f1531-o1 input[type=submit]{ color:#777; padding: 11px 20px !important; margin-bottom:10px; }
#wpcf7-f1531-o1 input[type=submit]:hover{ background-color:#00adef; color:#FFF; }
/* end side quote form */

.entry-content p em{ display:block; text-align:right; }
img.alignnone{ width:100%; }
.footer-widgets-area img.alignnone{ width:35%; }
.footer-widgets-area .wp-image-1423{ width:25% !important; }
.footer-widgets-area #text-12 h3{ font-size:15px; margin-left:30px; }
.wp-caption img[class*="wp-image-"]{
    max-width: 100%!important;
    width: 100%!important;
}
.wp-caption{
    width: 100%!important;
}

@media screen and (min-width: 768px){
#rc-imageselect, .g-recaptcha {
transform:scale(0.76);
-webkit-transform:scale(0.76);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}

/*------- Style for links with the special class   --------------------------------------------------------------------------------------*/
.special-link-white {
  color: white; /* Set the color of the link text to white */
  text-decoration: underline !important; /* Add an underline */
  font-weight: bold; /* Make the text bold */
  position: relative; /* Set position to relative */
  font-size: 0.8em; /* Adjust the font size */
}

/*Change the color of links with the special class on hover*/
.special-link-white:hover {
  color: #14c2bc; /* Change the color of the link text to grey on hover */
}

.special-link-dark {
  color: #262834; /* Set the color of the link text to white */
  text-decoration: underline !important; /* Add an underline */
  font-weight: bold; /* Make the text bold */
  position: relative; /* Set position to relative */
  font-size: 0.8em; /* Adjust the font size */
}


/*Change the color of links with the special class on hover*/
.special-link-dark:hover {
  color: #14c2bc; /* Change the color of the link text to grey on hover */
}
/*---------------------------------------------------------------------------------------------------------Make an image margin so that image will appear partially of the page on left or right                        ---------------------------------------------------------------------------------------------------------*/
.off-screen-margin-right {
  margin-right: -300px !important;
}

.off-screen-margin-left {
  margin-left: -300px !important;
}

/* ------------------------------------------------------------------------------------------------------Floating label CSS to add placeholder into date field of contact form 7 when viewed on mobile                    -------------------------------------------------------------------------------------------------------*/
/* Common styles */
.floating-label input {
    border: 1px solid #ccc;
    padding: 10px !important; /* Common padding */
    font-size: 16px;
    width: 100%;
    background: none;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    .floating-label {
        position: relative;
        margin-bottom: 10px;
    }

    .floating-label input {
        padding-top: 20px !important; /* Increased top padding for mobile devices */
        padding-bottom: 20px !important; /* Increased bottom padding for mobile devices */
    }

    .floating-label label {
        position: absolute;
        top: 10px; /* Adjusted to position label inside the input box */
        left: 30px;
        pointer-events: none;
        transition: 0.2s ease all;
        color: #fff; /* Set label color to white */
        font-size: 16px;
        background: #262834; /* Set background color for better visibility */
        padding: 0 5px; /* Add padding for better appearance */
    }

    .floating-label input:focus ~ label,
    .floating-label input:not(:placeholder-shown) ~ label {
        top: -15px; /* Adjusted to move the label above the input */
        left: 10px;
        font-size: 12px;
    }
}
/* Headings styling fix */
h1 {
  font-family: 'Rufina', serif;
  font-weight: 600;
  font-size: 42px; /* adjust if needed */
}

h2 {
  font-family: 'Rufina', serif;
  font-weight: 800;
  font-size: 38px;
}

/* Smaller headings use Lato */
h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 22px;
}

h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 20px;
}