/*
Theme Name: PreFab Homes
Theme URI: https://www.prefabricatedhomesuk.co.uk/
Author: Your Name
Author URI: https://www.prefabricatedhomesuk.co.uk/
Description: A custom WordPress theme for PreFab Homes built with Bootstrap.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prefab-homes
Tags: bootstrap, prefab, homes, responsive, custom-theme
*/

/* PreFab Homes – design tokens inspired by your Tailwind setup */

/* ===========================
   PreFab Homes Theme Colors
   =========================== */

/* =========================
   Design System Variables
   ========================= */
:root {
  /* Base colors */
  --background: hsl(36, 20%, 98%);
  --foreground: hsl(150, 30%, 15%);

  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(150, 30%, 15%);

  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(150, 30%, 15%);

  --primary: 150 45% 35%;
  --primary-foreground: hsl(0, 0%, 100%);

  --secondary: 35 80% 65%;
  --secondary-foreground: hsl(150, 30%, 15%);

  --muted: 36 20% 92%;
  --muted-foreground: hsl(150, 10%, 45%);

  --accent: 35 80% 65%;
  --accent-foreground: hsl(150, 30%, 15%);

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: hsl(0, 0%, 100%);

  --border: 36 15% 88%;
  --input: 36 15% 88%;
  --ring: 150 45% 35%;

  --radius: 0.75rem;

  /* Custom gradients, shadow, transition */
  --gradient-hero: linear-gradient(135deg, hsl(150 45% 35% / 0.9), hsl(150 50% 45% / 0.6));
  --gradient-accent: linear-gradient(135deg, hsl(35 80% 65%), hsl(35 85% 70%));
  --shadow-elegant: 0 20px 60px -15px hsl(150 45% 35% / 0.3);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode variables */
.dark {
  --background: hsl(150, 30%, 8%);
  --foreground: hsl(36, 20%, 95%);

  --card: hsl(150, 25%, 12%);
  --card-foreground: hsl(36, 20%, 95%);

  --popover: hsl(150, 25%, 12%);
  --popover-foreground: hsl(36, 20%, 95%);

  --primary: 150 50% 50%;
  --primary-foreground: hsl(150, 30%, 10%);

  --secondary: 35 75% 60%;
  --secondary-foreground: hsl(150, 30%, 10%);

  --muted: 150 20% 20%;
  --muted-foreground: hsl(36, 10%, 65%);

  --accent: 35 75% 60%;
  --accent-foreground: hsl(150, 30%, 10%);

  --destructive: 0 62.8% 50%;
  --destructive-foreground: hsl(0, 0%, 100%);

  --border: 150 20% 20%;
  --input: 150 20% 20%;
  --ring: 150 50% 50%;
}

/* =========================
   Global Styles
   ========================= */
* {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

body {
      background: #fbfaf9;
  color: hsl(var(--foreground));
  font-family: system-ui, sans-serif;
}

/* =========================
   Hero Section Gradient
   ========================= */
.hero-gradient {
  background: var(--gradient-hero);
  box-shadow: var(--shadow-elegant);
  transition: var(--transition-smooth);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* =========================
   Buttons
   ========================= */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-radius: var(--radius);
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  filter: brightness(1.1);
}

/* =========================
   Card and Popover Defaults
   ========================= */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  transition: var(--transition-smooth);
}

.popover {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-radius: var(--radius);
  box-shadow: var(--shadow-elegant);
  transition: var(--transition-smooth);
}

/* =========================
   Utility classes
   ========================= */
.text-primary {
  color: hsl(var(--primary)) !important;
}

.text-secondary {
  color: hsl(var(--secondary));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.shadow-elegant {
  box-shadow: var(--shadow-elegant);
}

.transition-smooth {
  transition: var(--transition-smooth);
}


/* Ensure the navbar menu items are horizontal and spaced */
.navbar-nav {
  display: flex;           /* horizontal layout */
  gap: 20px;               /* space between menu items */
}

/* Optional: ensure list items don’t add extra spacing */
.navbar-nav li {
  display: flex;           /* aligns the link properly */
  align-items: center;
}

/* Style the links inside menu items */
.navbar-nav li a {
  text-decoration: none;
  color: #318159;             /* change to your desired color */
  padding: 5px 10px;       /* increases clickable area */
  transition: color 0.2s;
	    font-size: 14px;
	    font-weight: 500;
}

/* Hover effect for menu links */
.navbar-nav li a:hover {
  color: #318159;          /* example hover color */
}

/* Optional: adjust the "Get Free Quote" button spacing */
.navbar .btn {
  margin-left: 20px; 
	color: #FFFFFF; /* space from last menu item */
	color: #FFFFFF;
    border: navajowhite;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
}

.h-txt {
    font-size: 72px;
	line-height: 1;
}

.mb-5
{
	    font-size: 24px;
    line-height: 2rem;
    font-weight: 400;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6
{
	color: #1B3226;
}

p
{
	color: #677E73 !important;
	font-size: 16px;
}


/* ==== LOGO SIZE FIX ==== */

.custom-logo 
{
  mix-blend-mode: multiply;
  background-color: transparent;
	  width: 180px !important;  /* adjust to your preferred size */
  height: auto !important;
  object-fit: contain;
}


.btn-light
{
	        background-color: hsl(var(--secondary));
       padding: 15px 40px;
    border: navajowhite;
    font-size: 18px;
    color: #1B3226;
    font-weight: 500;
}

.btn-light:hover
{
	    background: #edb25ee6;
}

.hero-sec .btn-outline-light
{
	padding: 15px 40px;
    font-size: 18px;
	font-weight: 500;
	background: #FFFFFF33;
}

.hero-sec .btn-outline-light:hover
{
	background: #FFFFFF4d;
}

.card-body
{
	background: #ffffff;
    border-color: #e5e1dc;
    border-style: solid;
    border-radius: 10px;
	border-width: 0px;
}



.form-sec .form-control
{
	    font-size: .875rem;
    line-height: 1.25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: #fbfaf9;
}

.form-sec .btn-primary
{
	    color: #fff;
    border: unset;
    font-size: 16px;
    padding: 15px 0px;
    font-weight: 600;
}

.form-sec h2, .cta-cntct h2
{
	    color: #1b3226;
    font-size: 30px;
}


.btn-primary:hover
{
	background: #318159e6;
}

.text-white
{
	    margin: 0px 390px;
}

.text-green
{
	background-color: #318159e6 !important;
}

.benefits, .form-sec, .home-types, .text-sec, .about-sec, .cta-sec
{
	padding: 80px 0px !important;
}

.benefits, .cntct-form .form-control, .info-form .form-control, .info-form .form-select
{
	    background: #fbfaf9 !important;
}

.benefits h2, .home-types h2, .about-sec h2
{
	    font-size: 36px;
	color: #1b3226;
}

.benefits h5, .cntct-info h5
{
	font-weight: 600 !important;
}

.benefits h5, .home-types .card-body h5, .footer-sec h5, .about h1, .service p, .cntct-info p, .info-form label, .post-cntnt p
{
	color: #1b3226 !important;
}


.benefits p, .home-types p, .text-sec p, .footer-sec p, .footer-sec ul li, .about p, .about ul li, .types-sec p, .how-work p, .step-sec ul li, .step-sec p, .hero-home p, .types-sec ul li, .form-sec p, .sm-txt, .info-box p, .cntct-hero p, .cntct-info .mb-0, .faq-sec p, .cta-cntct p, .quote-sec p, .side-nxt ul li, .blog-hero p, .blog-main p, .single-hero .text-muted, .footer-sec ul li a span
{
	    color: #677E73 !important;
}


.form-sec, .home-types, .about-sec
{
	    background: #EFEBE7 !important;
}

.home-types .fw-semibold, 
.footer-logo a
{
	color: #318159 !important;
}

.benefits .bg-primary, .cntct-info .bg-light
{
	background: #3181591A !important;
}

.home-types .card-body
{
	    text-align: left;
    padding: 24px;
}

.home-types .card-body h5
{
	font-size: 24px;
}

.home-types .fw-semibold, .info-form h4
{
	font-size: 20px;
}

.home-types .btn-lg
{
	font-size: 16px;
    padding: 12px 32px;
    color: #ffffff;
    font-weight: 700;
    border: unset;
}

.text-sec 
{
	background: #F8F9FA;
}

.text-sec .text-primary
{
	font-size: 48px;
	    line-height: 1;
}

.cta-sec, .ready-sec .card-body, .side-help .card-body
{
	 background: #318159 !important;
	margin: 0px;
}

.about-sec p
{
	font-size: 18px;
    color: #677E73;
    line-height: 1.75rem;
}


/* about us */

.about
{
	background: #fbfaf9;
}

.about p
{
	    font-weight: 400;
    line-height: 1.75rem;
	font-size: 16px;
	
}

.mission .card-body, .values-sec .card-body
{
	border-width: 0px;
}

.cta-sec p
{
	font-size: 20px !important;
	color: #FFFFFF !important;
	opacity: inherit ! IMPORTANT;
}

.about-quote
{
    border-width: 0px;
	        padding: 48px !important;
}

.about-quote a
{
	font-size: 16px;
    padding: 10px 32px;
}

.about h2
{
	font-size: 30px;
}

.about-hero p
{
	font-size: 20px !important;
	
}

.mission, .cntct-hero, .cntct-info
{
	margin-bottom: 64px !important;
}

.mission p
{
	    font-size: 18px !important;
    line-height: 1.625;
}

.hero-sec p, .cta-sec h2
{
	    color: #FFFFFFE6 !important;
}

.about ul li, .post-cntnt p
{
	line-height: 1.5;
}

.about h3
{
	margin-bottom: 24px !important;
}

.about .rounded-4
{
	background: #EFEBE7 !important;
}

.about .display-6
{
	font-size: 36px;
	margin-bottom: 8px;
}

.about .text-white, .cntct-form label, .info-form label
{
	margin: 0px;
}

.values-sec .bi
{
	     background: #3181591a !important;
    padding: 15px 18px;
    border-radius: 50%;
    font-size: 30px;
    color: #318159;
}

.values-sec h3, .footer-sec p
{
	margin-bottom: 12px !important;
}

.values-sec .card-body
{
	    padding: 45px 32px 16px 32px !important;
}

.values-sec .mb-3
{
	margin-bottom: 24px !important;
}


/* home types */

.hero-home p, .cntct-hero p, .ready-sec p
{
	font-weight: 400;
}

.types-sec h2
{
	font-size: 30px;
}

.types-sec .bedrom, .types-sec ul li
{
	    font-size: 16px;
    color: #677E73 !important;
}

.types-sec .mb-0
{
	font-size: 30px;
    font-weight: 700;
}

.types-sec .bi
{
	margin-right: 5px;
}

.types-sec p
{
	line-height: 1.5;
}

.types-sec h5
{
	    font-size: 16px;
    margin-bottom: 12px ! IMPORTANT;
}

.types-sec ul
{
	line-height: 1.25rem;
}

.types-sec span
{
	    background: #3181591A !important;
    color: #318159 !important;
    font-size: 14px;
    padding: 4px 12px;
	font-weight: 400;
}

.types-sec, .info-sec
{
	margin-bottom: 64px !important;
}

.types-sec a, .cntct-form button
{
	padding: 10px 32px !important;
    color: #FFFFFF;
    font-weight: 600;
    border: unset;
    border-radius: 10px;
}

.types-cntnt
{
	    background: #ffffff;
    border-radius: 10px;
}

.home-types-sec-main
{
	padding: 64px 12px !important;
}


/* how it works */

.howitwork
{
	background: #fbfaf9;
	    padding-bottom: 64px !important;
}



.step-sec .bg-primary {
    background-color: #3181591a !important;
}

.step-sec p, .side-help h5
{
	font-size: 18px;
}

.step-sec
{
	    margin-bottom: 80px ! IMPORTANT;
}

.howitwork h2
{
	font-size: 30px;
	margin-bottom: 32px !important;
}

.service
{
	background: #efebe7 !important;
	margin: 64px 0px;
}

.service h2
{
	margin-bottom: 32px !important;
}

.service p 
{
	    color: #1b3226 !important;
}

.timeline .h3, .blog-cta h2
{
	    font-size: 36px;
}

.cta-sec .card-body
{
	background: #318159 !important;
	padding: 0px !important;
}

.timeline
{
	margin-bottom: 64px !important;
}

.timeline p, .single-cta p, .single-cta .btn-light, .post-cntnt ul li
{
	font-size: 16px;
}

.single-cta .btn-light 
{
	background: #318159 !important;
	color: #FFFFFF;
	    padding: 12px 32px;
}

.cta-work
{
	padding: 48px !important;
}

.info-sec .card-body
{
	background: #efebe7;
}

.info-sec h2, .single-cta h2
{
	font-size: 24px;
}

.info-sec h5
{
	font-size: 16px;
	    margin-bottom: 12px !important;
}


.info-box, .info-box p
{
	    margin: 0px !important;
	line-height: 1.5;
}

.home-cta
{
	padding: 48px !important;
}

.cta-work h2, .home-cta h2
{
	margin-bottom: 16px !important;
	font-size: 30px;
}



/* contact us */


.cntct-info .card-body, .faq-sec .card-body, .ready-sec .card-body, .side-nxt .card-body, .side-help .card-body, .blog-main .card-body
{
	padding:24px;
}

.cntct-info p, .cntct-form label, .info-form label
{
	font-weight: 500;
}

.cntct-info .mb-0
{
	font-weight: 400;
}

.cntct-form .form-control, .info-form .form-control, .info-form .form-select
{
	padding: 8px 12px;
    border-color: #e5e1dc;
    border-radius: 10px;
	    font-size: .875rem;
}


.faq-sec h6, .info-form h4
{
	    font-weight: 600;
}

.faq-sec p
{
	    line-height: 1.5;
}

.faq-sec .faq-cntnt
{
	    border-bottom: 1px solid #e5e1dc;
}

.ready-sec .card-body
{
	text-align: left !important;
}

.ready-sec .card-body h5, .ready-sec .card-body p, .side-help h5, .side-help p, .hero-sec h1
{
	color: #ffffff !important;
}

.hero-sec p
{
	margin-bottom: 32px !important;
}

.ready-sec .card-body h5
{
	margin-bottom: 12px !important;
}

.ready-sec .card-body p
{
	margin-bottom: 16px !important;
}

.ready-sec a
{
	    padding: 8px 16px;
    border-radius: 10px;
}

.cta-cntct .card-body
{
	    background: #efebe7;
}

.cta-cntct .btn-primary
{
	    padding: 12px 32px !important;
    color: #FFFFFF;
    border: unset;
    font-weight: 500;
}

.cta-cntct .btn-outline-primary
{
	    border: unset;
    background: #fbfaf9;
    border-radius: 10px;
    padding: 12px 32px;
    color: #1b3226;
    font-weight: 500;
}


/* get quote */


.quote-sec h1
{
	margin-bottom: 16px;
}

.info-form .card-body
{
	padding: 32px !important;
	    padding-bottom: 0px !important;
}

.info-form .wpcf7-submit
{
	color: #ffffff;
    border: unset;
    font-weight: 600;
    font-size: 16px;
    padding: 12px;
}

.side-fact .mb-last
{
	margin: 0px;
}

.get-quote-sec
{
	    background: #efebe7 !important;
    margin: 0 !important;
	padding: 64px 0px !important;
}

/* single */

.single-cta
{
	    background: #3181590d !important;
    margin-bottom: 64px;
    border-radius: 10px;
    padding: 32px !important;
}

.post-cntnt h3
{
	font-size: 26px;
}

.post-cntnt h4
{
	font-size: 22px;
}

.post-cntnt h6
{
	font-size: 18
}

.single-hero
{
	margin: 0px 415px;
}

.single-hero h1, .single-hero .text-muted, .single-hero .mb-3
	{
		text-align: left;
	}

.single-img
{
	display: none;
}





/* blog */

.blog-hero, .blog-main
{
	background: #edf2ef !important;
}

.blog-main img
{
	        height: 300px;
    width: 100%;
}

.blog-hero h1
{
	font-size: 60px;
}

.blog-main .mr
{
	margin-right: 15px;
}

.blog-main .btn-outline-primary
{
	background: #fbfaf9 !important;
    border-color: #e5e1dc;
    border-width: 1px;
    border-radius: 10px;
    color: #1b3226;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
}


.blog-main .btn-outline-primary:hover
{
	background: #edb25e !important;
	border-color: #e5e1dc;
    border-width: 1px;
	color: #1b3226;
}

.blog-main .badge
{
	    padding: 4px 12px;
    color: #318159 !important;
    background: #3181591A !important;
}

.blog-cta
{
	padding: 64px !important;
}

.blog-cta-box
{
	padding: 0px;
}

.blog-cta .btn-light, .single-hero .text-muted
{
	font-size: 16px;
}





/* footer */

.footer-sec 
{
	margin-top: 0px !important;
}

.footer-sec p, .footer-sec ul li, .sm-txt, .types-sec ul li, .cntct-info .mb-0, .cntct-form label, .faq-sec h6, .faq-sec p, .ready-sec p, .ready-sec a, .info-form label, .side-help p, .side-fact p, .footer-sec ul li a span
{
	font-size: 14px;
}

.footer-sec ul li a
{
	text-decoration: none;
}

.service p, .ready-sec h5
{
	font-size: 18px !important;
}

.footer-sec .fs-5
{
	font-size: 20px !important;
}

.footer-sec h5, .about ul li, .step-sec ul li, .cntct-info h5, .cntct-info p
{
	font-size: 16px;
}

.footer-logo
{
	margin-bottom: 12px !important;
}


/* responsive */


@media (min-width: 992px) and (max-width: 1366px) {
 .hero-sec
	{
		margin: 0px 12px;
	}
	
	.navbar-nav li a {
    padding: 5px;
    }
	
	.single-hero h1
	{
		font-size: 48px !important;
	}
	
	.single-cta
	{
		margin: 0px 12px;
	}
	.single-hero {
    margin: 0px;
	}
	
	.post-cntnt .para
	{
		    max-width: 100% !important;
	}
	
	.single-post-main
	{
		padding: 0px 32px;
    margin: 0px 64px;
	}
}


@media (min-width: 768px) and (max-width: 991px) {
  .hero-sec, .single-cta
	{
		margin: 0px 12px;
	}
	
	.hero-sec h1
	{
		font-size: 60px;
	}
	
	.cta-sec h2, .about-hero h1, .how-work h1, .hero-home h1, .blog-hero h1, .cntct-hero h1, .quote-sec h1, .single-hero h1
	{
		font-size: 48px !important;
	}
	
	.about-quote h2, .cta-work h2, .home-cta h2
	{
		font-size: 30px !important;
	}
	
	.blog-cta-box h2
	{
		font-size: 32px !important;
	}
	
	.step-sec h3
	{
		font-size: 24px;
	}
	
	.single-hero {
    margin: 0;
	}
	
	.text-muted, .single-hero .mb-3
	{
		font-size: 16px;
	}
	
	.post-cntnt 
	{
		padding: 48px 24px ! IMPORTANT;
	}
}


@media (max-width: 767px) {
	.hero-head
	{
		height: 80vh !important;
	}
	
  	.hero-sec
	{
	margin: 0px 12px;
	}
	
	
	.hero-sec h1, .about h1, .how-work h1, .hero-home h1, .blog-hero h1, .cntct-hero h1, .quote-sec h1, .single-hero h1
	{
    font-size: 36px;
	}
	
	.hero-sec p 
	{
    font-size: 20px;
	}
	
	.step-sec h3, .cntct-form h2, .cta-cntct h2
	{
		font-size: 24px;
	}
	
	.benefits h2, .home-types h2, .about-sec h2, .cta-sec h2
	{
		font-size: 30px;
	}
	
	.btn-light, .hero-sec .btn-outline-light, .single-cta
	{
    margin: auto;
	}
	
	.form-sec .card-body
	{
		padding-bottom: 0px !important;
	}
	
	.form-sec .card-body, .mission .card-body, .about .rounded-4, .about-quote, .step-sec .card-body, .service, .timeline .card-body, .cta-work, .types-cntnt, .info-sec .card-body, .home-cta, .cntct-form .card-body, .cta-cntct .card-body
	{
		padding: 32px !important;
	}
	
	.faq-sec .card-body
	{
		padding: 24px !important;
	}
	
	.values-sec .card-body
	{
		padding: 45px 28px 16px 28px !important;
	}
	
	.form-sec p
	{
		    margin-bottom: 0px !important;
	}
	
	.about h2, .cta-sec p 
	{
		margin-bottom: 32px !important;
	}
	
	.about h3 {
    margin-bottom: 16px !important;
	}
	
	.cta-sec h2
	{
		margin-bottom: 16px !important;
	}
	
	.about
	{
		    padding-bottom: 64px !important;
	}
	
	.howitwork
	{
		margin-top: 0px !important;
	}
	
	.info-sec h2 {
    font-size: 23px !important;
	}
	
	.home-types-sec-main .btn-light 
	{
    	padding: 15px 30px;
	}
	
	.cntct-form button
	{
		width: 100%;
	}
	
	.single-hero h1, .single-hero .text-muted, .single-hero .mb-3
	{
		text-align: left;
	}

	.single-hero {
    margin: 0;
	}
	
	.blog-cta {
	    padding: 32px !important;
	}
	
}