/*
Theme Name: Christy Investigations v2
Template: blankslate
Author: Child Theme Configurator

*/


/* Colours */
/* Green #364835 */
/* Gold #AB9767 */



.pt-serif-regular {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.pt-serif-bold {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.pt-serif-regular-italic {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.pt-serif-bold-italic {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: italic;
}


.open-sans-web {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
font-size: 17px;
color:#000;
  line-height: 1.6;
  background-color: #FFF;

  font-family: "PT Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;


    margin: 0; /* Remove any margin from the body and html */
      padding: 0; /* Remove any padding from the body and html */
      width: 100%; /* Ensure the body takes the full width */
      box-sizing: border-box; /* Ensure all padding and border are included in the width/height */
    }

.wrapper{
  max-width: 1280px;
  margin:0 auto;
}

.topbar{
  background-color: #333;
  padding:5px 0;
    height: auto; /* Fixed height for larger screens */
    text-align: center;
    font-size: 12px; /* Text size */
    line-height: 18px;
    color: white; /* White text color for contrast */
  }

.topbar a{
    color:#FFF;
  }


.webheader{
  background-color: #364835;
  min-height:150px;
  height:auto;
  padding:20px 0;
  color:#AB9767;

  }

  .webheaderleft{
    float:left;
    width:600px;
  }

  .webheaderright{
    float:left;
    width: calc(100% - 600px);
    font-family: "PT Serif", serif;
  }

  .webnavigation{
    padding-top:21px;
  }




  .weblogo{

  }

  .weblogotop, .weblogotop a{
  	color:#AB9767;
  	font-size:46px;
  	font-family:"PT Serif";
  	text-transform:uppercase;
  	line-height:1.1;
  	font-weight:normal;
        text-decoration: none;
  }

  .weblogobottom, .weblogobottom a{
  	color:#FFF;
  	font-size:26px;
  	line-height:1.3;
  	font-family:"Open Sans";
    text-decoration: none;
  }


  @media (max-width: 600px) {
    .webheaderleft{
      float:none;
      width:100%;
      text-align: center;
    }

    .webheaderright{
      float:none;
      width: 100%;
    }

    .weblogotop, .weblogotop a{

      font-size:36px;

    }

    .weblogobottom, .weblogobottom a{

      font-size:20px;
    }


  }

.webslider{
  background-color: #FFF;
  min-height:550px;
    padding:20px 0;
     /*background-image: url("https://www.christy-investigations.co.uk/wp-content/uploads/2025/02/mylo-kaye-NXtGjC7osPs-unsplash.jpg");*/
     background-size: cover;
     background-position: center;

     background-color: rgba(54, 72, 53, 0.4); /* Dark overlay */
  background-blend-mode: darken; /* Blend background color with the image */



     color:#FFF;
     font-weight: bold;
     font-size: 36px;
font-family:"PT Serif";
     display: flex; /* Enable flexbox layout - better control of child elements which become flex items */
  justify-content: center; /* Flex items (children) aligns horizontally */
  align-items: center; /* Aligned flex items vertically */
  }

  .webslider .wrapper{
	max-width:750px;
}

.webslider h1{
  font-size: 40px;
}

.webslider .wrapper p{
text-align:center;
}

.webmain{
  background-color: #FFF;
  min-height:100px;
  padding:60px 0;
  }

.servicessection{
  background-color: #DEDEDE;
  min-height:300px;
  text-align: center;
  padding:60px 0;
  }

  /* Services section */

  .services-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns of equal width */
    grid-template-rows: auto; /* Automatically adjust rows based on content */
    gap: 20px; /* Space between grid items */
  }

  .service-item {
  position: relative; /* Positioning context for text */
  width: 100%;
  padding-top: 100%; /* Aspect ratio of 1:1 */
  overflow: hidden; /* Ensure images and text stay inside the box */
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease; /* Smooth transition for the tint effect */
}

.service-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the div without distortion */
  z-index: 1; /* Ensure image is under the overlay */
}

.service-image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Default tint (darkened effect) */
  z-index: 2; /* Ensure the overlay is on top of the image */
  transition: background-color 0.3s ease; /* Smooth transition for the tint effect */
}

.service-item:hover .service-image-wrapper::before {
  /*background-color: rgba(54, 72, 53, 0.7); *//* Change to green tint on hover */
  background-color: rgba(41, 54, 40, 0.8); /* Darker shade of #364835 */
}

.service-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
  z-index: 3; /* Ensure text appears above the overlay */

  line-height: 1.2; /* Adjust line height to reduce space between lines */
}

.service-text .hover-text {
  display: none;
}


.service-item:hover .service-text  {
width:65%;
}


.service-item:hover .service-text .default-text {
  display: none;
}


.service-item:hover .service-text .hover-text {
  display: inline;
  font-size: 15px;
  line-height: 1.1 !important;
  font-weight: normal;
}

@media (max-width: 768px) {
  .services-grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    grid-template-rows: auto;
  }

  .service-text {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .services-grid-container {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }

  .service-text {
    font-size: 1rem;
  }
}

/* Case Study section */

.casestudysection{
  background-color: #FFF;
  min-height:100px;
  padding:60px 0;
  text-align: center;
  }

  .casestudy-container {
    display: flex; /* Aligns the two divs side by side */
    justify-content: space-between; /* Optional: if you want space between them */
    align-items: stretch; /* Ensures both divs have equal height */
  }

  .casestudy-left {
    width: 50%; /* Takes up 50% of the container width */
    background-image: url('https://www.christy-investigations.co.uk/wp-content/uploads/2025/02/mylo-kaye-zGSSuyf-ac0-unsplash.jpg'); /* Background image */
    background-size: cover; /* Ensure the image covers the div */
    background-position: center; /* Center the background image */
    height: auto; /* Automatically adjust height based on content */
  }

  .casestudy-right {
    width: 50%; /* Takes up 50% of the container width */
    background-color: #ccc; /* Grey background */
    height: auto; /* Automatically adjust height based on content */
    padding: 20px; /* Add some padding around the text */
  }

  /* Responsive: Stack sections vertically on smaller screens */
  @media (max-width: 768px) {
    .casestudy-container {
      flex-direction: column; /* Stack the sections vertically */
      align-items: center; /* Center the sections horizontally */
    }

    .casestudy-left,
    .casestudy-right {
      width: 100%; /* Each section takes full width */
      margin-bottom: 0px; /* Add space between the sections */
      min-height: 210px;
    }

    /* Remove margin from the last section */
    .casestudy-right:last-child {
      margin-bottom: 0;
    }
  }


/* Case Study section // */


.testimonialsection{


  position: relative; /* Position content and pseudo-element relative to the container */
    width: 100%; /* Adjust width as needed */
    min-height: 300px; /* Set a specific height for the container */
    color: white; /* Ensure text is visible */
  padding:60px 0;

text-align: center;
  }


  .testimonialsection::before {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute; /* Position it absolutely to fill the div */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.christy-investigations.co.uk/wp-content/uploads/2025/02/tyler-jones-ramsey-iR3PXdHIips-unsplash.jpg'); /* Path to your image */
    background-size: cover; /* Make the image cover the entire div */
    background-position: center; /* Center the image */
    filter: brightness(50%); /* Darken the image by reducing the brightness */
    z-index: -1; /* Place the pseudo-element behind the content */
  }
  .testimonial-box {
    display: flex; /* Use flexbox for columns */
    gap: 20px; /* Adds a gap between the columns */
    background-color: white; /* White background for the box */
    padding: 30px; /* Padding around the content inside the box */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds subtle shadow for depth */
  }

  .testimonial-column {
    flex: 1; /* Distribute the space equally between columns */
    padding: 10px; /* Optional padding inside each column */
    text-align: left; /* Left align the text */
  }

  .testimonial-column p {
    margin: 10px 0; /* Space between paragraphs inside each column */
    color: #000; /* Dark text color */
  }


  /* Responsive: Stack columns vertically on smaller screens */
  @media (max-width: 768px) {
    .testimonial-box {
      flex-direction: column; /* Stack columns vertically */
      align-items: center; /* Center the columns */
    }

    .testimonial-column {
      width: 100%; /* Each column takes full width */
      margin-bottom: 0px; /* Space between stacked columns */
    }


  }


/* Testimonial section // */

/* Why choose us */

.whychooseussection{
  background-color: #FFF;
  min-height:100px;
  padding:60px 0;
  }


  /* Container for the 4 columns */
  .why-choose-us {
    display: flex; /* Use Flexbox for columns */
    gap: 10px; /* Gap between columns */
    flex-wrap: wrap; /* Allow wrapping to new rows on smaller screens */
    align-items: stretch; /* Ensure all columns stretch to the same height */
  }

  /* Style for each individual column */
  .why-column {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column; /* Stack items vertically */
  }

  /* Style for the Material icons */
  .material-icons {
    font-size: 60px !important; /* Larger icons */
    color: #AB9767; /* Icon color  */
    margin-bottom: 10px; /* Space below the icon */
  }

  /* Style for the heading */
  .why-column h3 {
    margin: 10px 0; /* Space above and below the heading */
    font-size: 1.3rem; /* Font size for the heading */
    color: #333; /* Dark color for the heading */
  }

  /* Style for the text box */
  .why-text-box {
    background-color: #f5f5f5;
     padding: 15px;
     border-radius: 6px;
     color: #555;
     font-size: 1rem;
     flex-grow: 1; /* Ensure the text box fills remaining space */
     display: flex;
     align-items: center; /* Vertically center text */
     justify-content: center; /* Center text horizontally */
  }

  @media (max-width: 768px) {
    .why-choose-us {
      flex-direction: column; /* Stack columns vertically on smaller screens */
    }
  }

/* Why choose us // */

.contactsection{
  background-color: #FFF;
  min-height:100px;
  padding:20px 0;
  text-align: center;

  }

/* Web footer */

  .webfooter {
    background-color: #444;
    padding: 20px 0;
    color: #FFF;
    width: 100%;
    /* Clearing the floats */
    overflow: hidden;
  }

  .webfooter p{
    margin-top:0;
  }

  /* Styling for each column inside the footer */
  .webfooter-col1,
  .webfooter-col2,
  .webfooter-col3 {
    float: left; /* Using float for layout */
    padding: 10px; /* Padding inside each column */
    font-size: 14px;
  }

  /* Set column widths as needed */
  .webfooter-col1 {
    width: 450px;
    margin-right: 50px;
  }

  .webfooter-col2 {
    width: 450px;
  }

  .webfooter-col3 {
    width: calc(100% - 950px); /* Take the remaining space */
  }

  .webfooter-col3 ul{
    list-style-type: none;
  }

  /* Styling for links */
  .webfooter a {
    color:#AB9767;
  }

  /* Clear floats after the footer columns */
  .webfooter::after {
    content: "";
    display: table;
    clear: both;
  }


  /* Responsive: Stack columns vertically on smaller screens */
@media (max-width: 768px) {
  .webfooter {
    flex-direction: column; /* Stack the columns */
    align-items: center; /* Center columns horizontally */
  }

  .webfooter-col1,
  .webfooter-col2,
  .webfooter-col3 {
    float: none; /* Remove float on smaller screens */
    width: 100%; /* Make columns full width */
    text-align: center; /* Center the content */
    padding: 15px 0; /* Add some padding */
  }
}

/* Web footer // */

.clear{
  clear:both;
}



a.sitebutton {
  display: inline-block;
  margin-top: 35px;
  background-color: #364835;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 30px;
  transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

a.sitebutton:hover {
  color: #AB9767; /* Change text color to white on hover */
  background-color: #2a3b29; /* Slightly darker background for effect */
}

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

.homepagesection h1, .homepagesection h2, .homepagesection h3, .homepagesection h4, .homepagesection h5, .homepagesection h6{
  text-align: center;
}

ul li{
	list-style-position:inside;
}

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    line-height: 1.5;
}

/* Contact Form 7*/

/* Font awesome */

.fa-classic, .fa-solid, .fa-regular{
	font-size:40px;
	color:#AB9767
}

.topbar .fa-classic, .topbar .fa-solid,  .topbar .fa-regular{
	font-size:12px;
	color:#FFF
}


/* Style the form container */
.wpcf7-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Style input fields and textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: border 0.3s ease;
	font-family: inherit !important;

}

/* Focus effect on input fields */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: #0073e6;
    outline: none;
}

/* Style the submit button */
.wpcf7-submit {
    width: 100%;
    padding: 12px;
    background: #AB9767;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.wpcf7-submit:hover {
    background: #888;
}

/* Style error and success messages */
.wpcf7-response-output {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.wpcf7-form.sent .wpcf7-response-output {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.wpcf7-form.invalid .wpcf7-response-output {
    background: #FFF;
    color: #721c24;
}

/* Style checkbox and radio buttons */
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    margin-right: 5px;
}

/* Make the form responsive */
@media (max-width: 600px) {
    .wpcf7-form {
        padding: 15px;
    }
}



/* Hide visually but keep accessible */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* Reduce gap between fields - <p> gaps */

.wpcf7-form p {
    margin: 5px 0 !important; /* Reduce spacing between fields */
}


/* Media Queries for Responsiveness */

@media (max-width: 1280px) {
.topbar .wrapper{
        padding:0px;
}

    .wrapper{
      padding:15px;
    }
}


@media (max-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for medium-sized devices */
  }
}

/* Responsive Layout for Smaller Devices */
@media (max-width: 768px) {

}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 column for small devices */
  }
}