/*
Theme Name: Loft Conversion UK
Theme URI: https://example.com
Author: Shahwaiz Khan
Author URI: https://example.com
Description: A custom WordPress theme based on Bootstrap.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: loftconversionuk
*/

body
{
	font-family: system-ui, sans-serif;
	 background: #F8F9FA;
}

/* colors */

.menu-sec ul li a
{
	color: #2E3138CC!important;
}

h1,h2,h3,h4,h5,h6, .testi-box .fst-italic, .testi-box .fw-semibold, .footer-pages a, .contact-sec input, .cta-btn a, .quote-sec label
{
	color: #2E3138 !important; 
}

p, .accordion-body, .footer-sec ul li, .footer-sec ul li a, .quote-sec input, .quote-sec select, .quote-sec .submit-para, .quote-sidebar .mt-4 ol li, .quote-sidebar ul li
{
  color: #676F7E !important;
}


.hero-sec h1, .hero-sec ul li, .hero-cntnt p, .hero-sec span, #mainMenu .btn-primary, .about-cntnt a, .cta-sec h2, .cta-sec p, .works-srvs a, .about-card a:hover, .blog-main .btn-outline-primary:hover
{
	    color: #FFFFFF !important;
}

.hero-sec .bi, .testi-box .text-warning
{
	    color: #33cccc !important;
}

.choose-cntnt .bi, .about-box h3, .stats-sec h3, .cta-sec a, .footer-sec .bi, .proces-sec .bi, .main-servs .bi, .ad-box .bi, .value-sec .bi-bullseye::before, .value-sec .bi-award::before, .value-sec .bi-heart::before, .value-sec .bi-people::before, .contact-sec .bi-envelope::before, .contact-sec .bi-telephone::before, .contact-sec .bi-geo-alt::before, .contact-sec .bi-clock::before, .bg-primary-subtle, .about-card a, .blog-main .btn-outline-primary
{
	color: #1f4ead !important;
}

.about-card a, .blog-main .btn-outline-primary
{
	border: 1px solid #1f4ead !important;
}


.hero-sec {
  position: relative;
  background: 
    linear-gradient(135deg, rgba(20, 58, 138, 0.85) 0%, rgba(30, 86, 204, 0.85) 50%, rgba(43, 133, 133, 0.85) 100%),
    url('/wp-content/themes/loft-conversions-uk/assets/loft-conversion-hero-image.jpg') center/cover no-repeat;
  color: #fff;
  padding: 80px 0;
}


.cta-sec
{
	background: linear-gradient(to right, hsl(220, 70%, 40%), hsl(180, 60%, 50%));
}

#mainMenu .btn-primary, .about-cntnt a, .wpcf7-form .btn-primary, .works-step .bg-primary, .works-hero a, .works-srvs a, .contact-sec button, .quote-sec button, .about-card a:hover, .blog-main .btn-outline-primary:hover
{
	background: #1f4ead !important;
}

.cta-sec a, .cta-btn a, .works-step, .benefits-sec, .main-servs, .works-srvs, .story-sec, .stats-sec, .contact-sec, .choose-sec, .testi-sec
{
	background: #FFFFFF !important;
}

.main-servs .bi, .ad-box .bi-shield-fill::before, .ad-box .bi-clock-fill::before, .ad-box .bi-rulers::before, .contact-sec .bi-envelope::before, .bg-primary-subtle
{
	    background: #33CCCC1A !important;
}



/* font */


.menu-sec ul li a, .hero-sec label, .cta-sec a, .cta-btn a, .quote-sec label, .quote-sec button
{
	font-weight: 500;
}

.works-srvs h3
{
	font-weight: 600;
}

.about-box h3, .works-hero h1, .main-servs h2
{
	font-weight: 700 !important;
}

.menu-sec ul li a, .hero-sec ul li, .hero-sec label, #mainMenu .btn-primary, .accordion-body, .cta-sec a, .wpcf7-form .btn-primary, .benefits-sec p, .works-hero a, .works-srvs a, .contact-sec label, .contact-sec input, .contact-sec button, .cta-btn a, .quote-sec input, .quote-sec label, .quote-sec select, .quote-sec button, .quote-sidebar .bi, .quote-sidebar ul li
{
	font-size: 14px !important;
}

.about-cntnt p, .footer-sec h5, .ad-box p
{
	font-size: 16px !important;
}


.hero-sec h1, .hero-cntnt p, .works-head p, .choose-head p, .testi-head p, .faq-head p, .cta-sec p, .works-hero p, .proces-sec p, .proces-sec h5, .benefits-sec h5, .ad-head .mb-5, .works-srvs .mb-5, .quote-sec p, .quote-sidebar h4, .quote-sidebar h5, .blog-head p, .about-card .card-body h5
{
	font-size: 18px !important;
}


.works-step h3, .main-servs .bi, .ad-box .bi, .contact-sec h2
{
	font-size: 24px !important;
}

.works-head h2, .choose-head h2, .about-cntnt h2, .testi-head h2, .faq-head h2, .cta-sec h2, .works-hero h1, .proces-sec h2, .benefits-sec h2, .main-servs h2, .ad-head h2, .works-srvs h2, .story-sec h2, .value-sec h2, .quote-sec h1, .blog-head h1
{
	font-size: 36px !important;
}

.hero-sec h1
{
	font-size: 48px !important;
}


/* padding */


.hero-sec, .works-sec, .choose-sec, .about-sec, .testi-sec, .faq-sec, .cta-sec, .works-step, .proces-sec, .benefits-sec, .main-servs, .ad-servs, .works-srvs, .story-sec, .value-sec, .stats-sec, .contact-sec, .quote-sec, .single-sec
{
	    padding: 80px 12px !important;
}

.works-hero
{
	padding: 64px 12px !important;
}

.ad-box .card, .contact-sec .bg-white
{
	padding: 24px !important;
}

.blog-main .card-body
{
	    padding: 24px 24px 0px;
}

.blog-main .card-footer
{
	padding: 16px 24px 24px 24px;
}

.about-box .bg-white
{
	 padding: 18px !important;
}

.proces-sec .bi-check-circle::before
{
	 padding: 0px !important;
}

.contact-sec input, .cta-btn a, .quote-sec input, .quote-sec select, .bg-primary-subtle
{
	padding: 8px 12px !important;
}


/* margin */

.faq-head p, .works-step .d-flex, .benefits-sec h2
{
		margin-bottom: 48px !important;
}

.main-servs ul
{
	margin-bottom: 24px !important;
}

.works-head h2, .choose-head h2, .bi-shield-fill-check::before, .bi-award::before, .bi-clock::before, .bi-hand-thumbs-up::before, .bi-check2-circle::before, .about-cntnt h2, .faq-head h2, .bi-chat-square-text::before, .bi-person-check::before, .bi-file-text::before, .value-box, .about-card .card-body h5
{
	margin-bottom: 16px !important;
}

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

.footer-sec ul li, .quote-sidebar ul li, .quote-sidebar .mt-4 ol li
{
	margin-bottom: 8px !important;
}

.about-box p, .benefits-sec p, .ad-box p, .value-sec p, .quote-sidebar .bi-check-circle::before
{
	margin-bottom: 0px !important;
}

.quote-sec ul li
{
	margin-bottom: 5px !important;
}



/* header */

.custom-logo
{
	mix-blend-mode: multiply;
    background-color: transparent;
    width: 180px !important;
    height: auto !important;
    object-fit: contain;
}

.menu-sec ul li a
{
	text-decoration: none;
    padding: 0px 12px;
}


/* home */

.hero-sec .bg-para {
    background: none !important;
    border: unset ! IMPORTANT;
}

.hero-sec input
{
	    font-size: 14px;
    padding: 8px 12px;
}


.hero-sec label
{
	color: #000000;
}

/* icons */

.bi-clipboard2::before, .bi-people::before, .bi-check-circle::before, .value-sec .bi-bullseye::before, .value-sec .bi-award::before, .value-sec .bi-heart::before, .contact-sec .bi-envelope::before, .contact-sec .bi-telephone::before, .contact-sec .bi-geo-alt::before, .contact-sec .bi-clock::before
{
    margin-bottom: 16px !important;
    background: #33CCCC1A !important;
    border-radius: 50%;
    padding: 15px;
}

.works-cntnt .bg-white, .choose-cntnt .bg-white, .testi-box .bg-white, .faqAccordion button, .value-sec .card, .stats-sec .rounded
{
	    border-radius: 12px !important;
}

.proces-sec .display-6
{
	    margin-top: -38px;
    background: #1f4ead !important;
    padding: 10px;
    border-radius: 50%;
    width: 18%;
    font-size: 20px;
    color: #ffffff !important;
    font-weight: bold;
}

.srvs-icon .bi, .ad-box .bi-shield-fill::before, .ad-box .bi-clock-fill::before, .ad-box .bi-rulers::before{
    padding: 15px !important;
    border-radius: 50%;
}

.works-srvs .mb-3
{
	height: auto !important;
    line-height: unset ! IMPORTANT;
    background: #1f4ead !important;
    width: 15% ! IMPORTANT;
    font-size: 20px ! IMPORTANT;
    color: #ffffff !important;
    font-weight: bold;
    padding: 15px ! IMPORTANT;
}

.cta-btn a
{
	border: unset !important;
}


/* blogs */

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

.blog-main .btn-outline-primary
{
    font-size: 14px;
    font-weight: 600;
}

.single-main img
{
	    object-fit: cover;
    height: 500px !important;
    border-radius: 10px !important;

}

.single-post h1{font-size:36px;font-weight:600}
.single-post h2{font-size:28px;font-weight:600}
.single-post h3{font-size:24px;font-weight:600}
.single-post h4{font-size:20px;font-weight:600}
.single-post h5{font-size:18px;font-weight:600}
.single-post h6{font-size:16px;font-weight:600}


/* responsive */

@media (min-width: 992px) and (max-width: 1366px)
{
	.proces-sec .display-6 {
    width: 25%;
	}
}

@media (min-width: 768px) and (max-width: 991px)
{
	.menu-sec 
	{
		    padding: 16px 0px;
	}
	
	.menu-sec li
	{
		padding: 8px 0px;
	}
	
	.proces-sec h5
	{
		    font-size: 15px !important;
	}
	
	.proces-sec .display-6 {
    width: 30%;
    font-size: 15px;
		margin-top: -28px;
	}
	
	.proces-box .rounded, .benefit-box .rounded
	{
		    padding: 12px !important;
	}
	
}

@media (max-width: 767px)
{
	
	
	.menu-sec 
	{
		    padding: 16px 0px;
	}
	
	.menu-sec li
	{
		padding: 8px 0px;
	}
	
	
	.hero-sec h1, .about-box h3
	{
    font-size: 36px !important;
	}
	
	.proces-sec h5
	{
		font-size: 20px !important;
	}
	
	.hero-sec .bg-para {
    padding: 0px 0px 16px 0px !important;
	}
	
	.hero-cntnt, .about-cntnt, .main-servs .service-content
	{
		    margin-bottom: 30px;
	}
	
	.works-head h2, .choose-head h2, .about-cntnt h2, .testi-head h2, .faq-head h2, .cta-sec h2, .works-hero h1, .proces-sec h2, .benefits-sec h2, .main-		servs h2, .ad-head h2, .works-srvs h2, .story-sec h2, .value-sec h2, .quote-sec h1, .blog-head h1, .main-servs h2, .single-post h1 {
    font-size: 30px !important;
	}
	
	.about-box .text-center
	{
		display: block;
	}
	
	.about-box .col-4
	{
		width: 100%;
	}
	
	.proces-sec .display-6 {
    width: 15%;
	}
	
	.single-main img {
    height: auto !important;
	}	



}