/*
Theme Name: Home Vista
Version: 1.0
Text Domain: home-vista
*/


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

body{font-family:Inter,sans-serif;
	 color:#222;
	 background:#fff}

header{margin-bottom:50px}


.search-header{font-size: 34px !important;}
.container{
			width:min(1200px,92%);
			margin:auto;
			//max-width:2000px !important;
		}

.header{padding-left:60px;
		padding-right:60px;
		margin-bottom:60px;
		}

.orange-text{color:#ff7a00;
            display:block}
nav{display:flex;
	justify-content:space-between;
	align-items:center;
	padding-left:60px;
	padding-right:60px;
	padding-top:25px;
}

.logo{
		font-size:32px;
	  	font-weight:800;
	 	 color:#ff7a00
	 	}

.video{height:400px}


.powerful-estimators{color:#fff}
.powerful-estimators ul{list-style-type:none}
.powerful-estimators ul li{font-size:1.1em}
.powerful-estimators h2{line-height:normal;
						margin-bottom:20px;
						}
.powerful-estimators .actions .btn{
	background-color:#fff;
	color:#ff7a00;
	margin-top:30px;
}
.actions .btn .fas{
width:20px;
height:20px;
margin-left:20px;
}

.powerful-estimators{

}

.powerful-estimators .fas,
.powerful-estimators .far{
	width:30px;
	height:30px;
}

.contact-h2{margin-bottom:20px;
			
}


.phone-ul{
	margin-top:60px;
	margin-left:15px;

}

.contact-p{
			margin-left:15px;
			width:80%;

}

.orange-text{color:#ff7a00}

.contact h1{
	
	line-height:normal;
	font-weight:700;
	margin-top:10px;
	margin-bottom:30px;

}
.industry-spaces
{
	background:#fff;
	border-radius:24px;
	padding:20px;
	box-shadow:0 15px 50px rgba(0,0,0,.08);
	text-align:center;
}
.industry-spaces img{
	border-radius:10px !important;
	margin-bottom:10px;
}

.menu{display:flex;
	  gap:32px}

.menu a{text-decoration:none;
		color:#222}

.contact-us .btn{background:#ff7a00 !important;
	 color:#fff !important;  
	 padding:14px 24px !important;
	 border-radius:12px !important;
	 text-decoration:none !important;
	 font-weight:600 !important;
	 height:auto !important;
	}


.page-id-2309 header{margin-bottom:0px}


.blog-content-main p{

    margin-bottom:20px;
}

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 60px;
    padding-top: 40px;
    border-top: 1px solid #e5e5e5;
}

.post-navigation a {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    transition: all 0.3s ease;
    color: #222;
    min-height: 120px;
}

.post-navigation a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: #0d6efd; /* Change to your brand color */
}

.post-navigation .prev-post {
    text-align: left;
    align-items: flex-start;
}

.post-navigation .next-post {
    text-align: right;
    align-items: flex-end;
}

.post-navigation small {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777;
    margin-bottom: 10px;
}

.post-navigation strong {
    font-size: 1.15rem;
    line-height: 1.5;
    font-weight: 700;
    color: #222;
    transition: color .3s ease;
}

.post-navigation a:hover strong {
    color: #0d6efd; /* Brand color */
}
 
}



/*==========================
Categories
==========================*/


.categories h2{

    margin-bottom:30px;
    font-size:27px !important;

}

.category-grid{

    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:20px;

}

.category-grid a span{
    display:block;
    line-height:1em;
    margin-top:10px;
    color:#000;
    font-size:.6em;
}
.category-grid a .fa{
    font-size:30px;
}

.category-grid a{

    padding:22px;
    text-align:center;
    border:1px solid #ececec;
    border-radius:18px;
    text-decoration:none;
    font-weight:600;
    color:#ff6200;
    transition:.3s;
    line-height:1px;

}

.category-grid a:hover{

    background:#ff6200;
    color:white;

}



/*==========================
Articles
==========================*/



.section-heading{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;

}

.article-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.article-grid article{

    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.article-grid img{

    width:100%;
    height:240px;
    object-fit:cover;

}

.article-content{
    padding:30px;
}

.article-content span{

    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    color:#ff6200;

}

.article-content h3{

    margin:15px 0;
    font-size:30px !important;
    line-height:1.3;

}

.article-content p{

    color:#666;
    line-height:1.7;
    margin-bottom:25px;

}

.article-content a{

    font-weight:700;
    color:#ff6200;
    text-decoration:none;

}


/*==========================
Newsletter
==========================*/

.newsletter{


}
.svg-newsletter{width:100px}
.newsletter-box{

background:#fff8f3;
padding:40px;
border-radius:24px;
display:flex;
justify-content:space-between;
align-items:center;

}

.newsletter form{

display:flex;
gap:15px;

}

.newsletter h2{
    line-height:1em;
    margin-bottom:10px;
}
.newsletter input{
    padding:18px;
    border:1px solid #ddd;
    border-radius:12px;
    min-width:300px;

}

.newsletter button{

padding:18px 40px;
background:#ff6200;
color:white;
border:none;
border-radius:12px;
font-weight:700;

}


/*==========================
CTA
==========================*/


.cta-box{

display:grid;
grid-template-columns:1fr 500px;
align-items:center;
background:#ff6200;
padding:30px;
border-radius:30px;
color:white;

}

.cta-box h2{

color:#fff !important;
margin-bottom:10px;
line-height:1.2em;
font-size:35px !important;

}

.cta-box p{

margin-bottom:35px;

}

.cta-box img{

width:100%;

}
.btn-white{
    background-color:#fff;
    color:#ff6200;
    font-weight:600;
    border-radius:5px;
    padding-left:30px;
    padding-right:30px;
    padding-top:10px;
    padding-bottom:10px;
}

.container-blog{
        padding-left:120px;
        padding-right:120px;
    }


.blog-sidebar{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.sidebar-card{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:30px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.sidebar-card h3{
    margin:0 0 24px;
    font-size:22px;
    font-weight:700;
}

/* Search */

.sidebar-search{
    display:flex;
    border:1px solid #e5e5e5;
    border-radius:12px;
    overflow:hidden;
}

.sidebar-search input{
    flex:1;
    border:none;
    padding:16px;
    font-size:15px;
    outline:none;
}

.sidebar-search button{
    width:60px;
    border:none;
    background:#fff;
    cursor:pointer;
}



/* Categories */

.sidebar-categories{
    list-style:none;
    margin:0;
    padding:0;
}

.sidebar-categories li{
    border-bottom:1px solid #f1f1f1;
}

.sidebar-categories li:last-child{
    border:none;
}

.sidebar-categories a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
    color:#222;
    text-decoration:none;
}

.sidebar-categories span{
    display:flex;
    align-items:center;
    gap:14px;
}

.sidebar-categories span i{
    width:22px;
    color:#ff5b19;
}

.sidebar-categories a:hover{
    color:#ff5b19;
}

/* Popular Posts */

.popular-post{
    display:flex;
    gap:16px;
    margin-bottom:22px;
}

.popular-post:last-child{
    margin-bottom:0;
}

.popular-post img{
    width:95px;
    height:75px;
    object-fit:cover;
    border-radius:10px;
}

.popular-post a{
    display:block;
    text-decoration:none;
    color:#222;
    font-weight:600;
    margin-bottom:8px;
    line-height:1.45;
}

.popular-post span{
    font-size:14px;
    color:#777;
}

/* Newsletter */

.newsletter{
    text-align:center;
}

.newsletter-icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    border-radius:16px;
    background:#fff3ec;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#ff5b19;
    font-size:30px;
}

.newsletter p{
    color:#666;
    line-height:1.7;
    margin-bottom:24px;
}

.newsletter input{
    width:100%;
    padding:16px;
    border:1px solid #ddd;
    border-radius:10px;
    margin-bottom:16px;
    outline:none;
}

.newsletter button{
    width:100%;
    padding:16px;
    border:none;
    border-radius:10px;
    background:#ff5b19;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.newsletter button:hover{
    background:#e94d11;
}


.sidebar-categories li a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-decoration:none;
    color:#222;
    padding:14px 0;
}

.category-title{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
}

.category-title i{
    width:20px;
    text-align:center;
    color:#ff5b19;
    font-size:16px;
}

.category-icon-image{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}

.sidebar-categories .fa-chevron-right{
    color:#999;
    font-size:12px;
}

.cat-orange{
    color:#f97316;
    font-weight:bold;
    text-transform:uppercase;
    font-size:.7em;
}
.post-title{

    font-size:35px;
    width:80%;
    line-height:1em;
    text-transform:capitalize;
    margin-top:20px;
    font-weight:800;
}

.excerpt{

    color:#666;
    margin-top:10px;
    font-size:.8em;
    
}

.date-read{
    margin-top:30px;
    color:#666;
    font-size:.8em;
 
}

.newsletter form{
    display:block;
    text-align:left;
}

.newsletter input{
    min-width:0px !important;
}

.tnp-subscription input.tnp-submit{
    background-color:#ff7a00 !important;
    font-weight:600;
}

.scriptlesssocialsharing__buttons a.button{
    padding:5px;
    border:1px solid #d4d4d4;
    flex:0;
}
.scriptlesssocialsharing__icon{
    height:.8em;
    width:.8em;
    fill:#666;
}
.scriptlesssocialsharing{margin:0}
.scriptlesssocialsharing a.button{
    color:#000 !important;
    background-color:#fff !important;
    border-radius:50%;
    margin-right:5px;
    fill:#666;

}
.scriptlesssocialsharing__buttons{
    justify-content: flex-end;
    padding-right:35px;

}

.date-cont{
    display:flex; 
    align-items: center;
    padding-left:10px;
}


.post-image.e-con {
    margin-block-end: 0;
    margin-block-start: 0;
    margin-inline-end: 0;
    margin-inline-start: 0;
    padding-inline-end: 0;
    padding-inline-start: 0;
}



/*==========================
Responsive
==========================*/

@media(max-width:991px){

.container-blog{padding-right:10px;padding-left:10px}
.cta-box img{margin-top:50px}
.hero-grid,
.cta-box{

grid-template-columns:1fr;

}

.article-grid{

grid-template-columns:1fr 1fr;

}

.category-grid{

grid-template-columns:repeat(3,1fr);

}

.newsletter-box{

flex-direction:column;
gap:30px;
text-align:center;

}

.newsletter form{

width:100%;

}

.newsletter input{

flex:1;
width:100% !important;

}

}

@media(max-width:768px){

 .post-navigation {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .post-navigation .next-post {
        text-align: left;
        align-items: flex-start;
    }
.article-grid{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr 1fr;

}

.hero-content h1{

font-size:52px;

}

.section-heading{

flex-direction:column;
gap:20px;

}

.newsletter form{

flex-direction:column;

}

.newsletter button{

width:100%;

}

}

.btn{background:#ff7a00;
	 color:#fff;  
	 padding:14px 24px;
	 border-radius:12px;
	 text-decoration:none;
	 font-weight:600;
	 height:auto;
	}
.img-responsive{width:80%}
.hero{
	  
	  align-items:center}

.hero h1{
		 line-height:1.1;
		 font-weight:800;
		 margin-top:25px;
		}
.hero .small-intro{
	background-color:#fef2ec;
	color:#fd481c;
	padding:10px;
	border-radius:5px;
	display: inline-block;
	text-transform:uppercase;
	font-size:.7em;
	font-weight:bold;
	margin-bottom:5px;


}
.hero ul li .far{color:green;
				 font-weight:600}
.hero ul{margin-top:15px}
.hero ul li{display:inline;
			font-size:.8em;
			margin-right:2%;
			font-weight:600
			}

.hero h1 span{
	color:#ff7a00
}

.hero p{
	margin:24px 0;	
	}

.hero-image{

	background:#fff;
	border-radius:24px;
	padding:32px;
	box-shadow:0 15px 50px rgba(0,0,0,.08)
}

.hero-image img{border-radius:24px !important}

.actions{display:flex;
		 gap:16px}


.problem-content .benefits {
    margin-top:25px;
}

.problem-content .benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 15px;
}

.problem-content .icon {
    
    background:none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6200;
    font-size: .8rem;
    flex-shrink: 0;
    margin-top: 3px;
    width:20px;
    height:20px;
    margin:0px;
    margin-top:3px;
}
.icon .far {
	color:#ff6200;
	font-size:20px;
}

.problem-content  .benefit h4 {

	
    font-weight: 700;
    margin-bottom:5px;
    
}

.problem-content .benefit p {
}





.the-excitement .future-content h2{
    font-size:1.0rem;
    line-height:1.1;
    font-weight:800;
    color:#222;
    margin-bottom:24px;
}

.the-excitement .intro{
    font-size:1.45rem;
    line-height:1.65;
    color:#555;
    margin-bottom:48px;
}

.the-excitement .feature-list{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:25px;
}

.the-excitement .feature{
    display:flex;
    align-items:flex-start;
    gap:22px;
}

.the-excitement .feature-icon{
   
    border-radius:50%;
    background:#fff5ef;
    color:#ff6b00;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.65rem;
    flex-shrink:0;
}

.the-excitement .feature-text h4{
	font-size:1.1em;
    margin:0 0 0px;
    font-weight:700;
    
}

.the-excitement .feature-text p{
    margin:0;
}

.the-excitement .bottom-row{
    display:flex;
    align-items:center;
    gap:34px;
    margin-top:55px;
}

.the-excitement .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:20px 34px;
    background:#ff6b00;
    color:#fff;
    border-radius:14px;
    text-decoration:none;
    font-weight:700;
    font-size:1.2rem;
    transition:.3s;
}

.the-excitement .btn-primary:hover{
    background:#ef6000;
}

.the-excitement .btn-primary i{
    font-size:.9rem;
}

.the-excitement .professional-box{
    display:flex;
    align-items:center;
    gap:18px;
    padding-left:34px;
    border-left:1px solid #ececec;
}

.the-excitement .shield{
    color:#ff6b00;
    font-size:2.7rem;
}

.the-excitement .professional-box h5{
    margin:0 0 4px;
    font-size:1.45rem;
    font-weight:700;
    color:#222;
}

.the-excitement .professional-box p{
    margin:0;
    
    color:#555;
    line-height:1.5;
}







.features-section .section-header{
    max-width:900px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;
}

.features-section .eyebrow{
    display:inline-block;
    color:#ff6418;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:15px;
}

.features-section h2{
    font-size:45px;
    line-height:1.1;
    font-weight:800;
    color:#111;
    margin:0;
}

.features-section .features-grid{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.features-section .feature-card{

    background:#fff;
    border:1px solid #ededed;
    border-radius:22px;
    padding:42px 35px;
    text-align:center;
    transition:.35s;
    box-shadow:
        0 6px 30px rgba(0,0,0,.05);
}

.features-section .feature-card:hover{

    transform:translateY(-8px);
    box-shadow:
        0 20px 60px rgba(0,0,0,.10);
}

.features-section .icon{

    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:#fff3ed;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    margin-bottom:30px;
}

.features-section .feature-card h3{

    font-size:20px;
    font-weight:700;
    
    margin-bottom:20px;
}

.features-section .divider{

    display:block;
    width:42px;
    height:4px;
    background:#ff6418;
    border-radius:10px;
    margin:0 auto 30px;
}

.features-section .feature-card p{
    margin:0;
}


/* ===========================
   LEFT CONTENT
=========================== */

.hero-tag{

    background-color:#fef2ec;
	color:#fd481c;
	padding:10px;
	border-radius:5px;
	display: inline-block;
	text-transform:uppercase;
	font-size:.7em;
	font-weight:bold;
	margin-bottom:5px;
}


.hero-content h1{

   
    line-height:1.05;
    font-weight:800;

    color:#111;

}

.hero-content h1 span{

    color:#ff6418;
}

.hero-description{

    margin-bottom:40px;
    margin-top:15px;
}

/* ===========================
   BENEFITS
=========================== */

.hero-benefits{

    display:flex;
    flex-wrap:wrap;

    gap:15px;

    padding:0;
    margin:0 0 45px;

    list-style:none;
}

.hero-benefits li{

    display:flex;
    align-items:center;
    gap:10px;

    color:#333;

    font-size:.9em;
    font-weight:600;
}

.hero-benefits i{

    color:#34b453;
    font-size:18px;
}


/* ===========================
   IMAGE
=========================== */

.hero-image{

    position:relative;
}

.hero-image img{

    width:100%;
    display:block;

    border-radius:24px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.15);
}

/* ===========================
   FLOATING CARD
=========================== */

.floating-card{

    position:absolute;

    bottom:35px;
    left:35px;

    display:flex;
    align-items:center;
    gap:18px;

    background:#fff;

    padding:22px 26px;

    border-radius:18px;

    width:360px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.12);
}

.card-icon{

    width:55px;
    height:55px;

    border-radius:50%;

    background:#fff4ed;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ff6418;

    font-size:24px;

    flex-shrink:0;
}

.card-content strong{

    display:block;

    color:#222;

    font-size:16px;
    line-height:1.5;
}




.growth-box .growth-icon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff6b00;
    font-size:2.3rem;
}

.growth-box .eyebrow{
	margin-bottom:10px !important;
}
.growth-box  h3{
    margin:0 0 4px;
    font-size:2.0em !important;
    font-weight:700;
    color:#222;
}

.growth-box  p{
    margin:0;
    color:#666;

}



.growth-box  .benefits {
    margin-top:25px;
}

.growth-box  .benefit {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 15px;
}

.growth-box  .icon {
    
    background:none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6200;
    font-size: .8rem;
    flex-shrink: 0;
    margin-top: 3px;
    width:20px;
    height:20px;
    margin:0px;
    margin-top:3px;
}
.icon .far {
	color:#ff6200;
	font-size:20px;
}

.growth-box  .benefit h4 {

	
    font-weight: 700;
    margin-bottom:5px;
    
}

.growth-box  .benefit p {
	font-size:.8em;
    line-height: 1.0;
    color: #666;
}


.the-problem .subtext{
	color:#f97046;
	text-transform:uppercase;
	font-weight:bold;
	margin-bottom:10px;
	font-size:13px;

}
.the-problem h2{
	line-height:normal;
	margin-bottom:15px;
	font-weight:bold;
	text-transform:capitalize;

}
.problem-slides{text-align:center}
.problem-slides .fas{font-size:40px}

.problem-slides {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.problem-slides .x-icon {
    color: #ef4444;
    font-size: 20px;
    margin-bottom: 32px;
    border:10px solid #fee5e2;
    border-radius:50%;
}

.problem-slides .house-icon {
    font-size: 42px;
    color: #333;
    margin-bottom: 35px;
}

.problem-slides .fa-exclamation-triangle{
	color:#ff6207;
}

.problem-slides.last{
	text-align:left;
    display: block;
    flex-direction: column;
    border-left:1px dotted #ff6207;
    padding-left:35px;
    
}

.problem-slides .result{
	font-weight:bold;
	margin-left:15px;

}
.problem-slides ul{
	list-style-type:circle;
	margin-left:15px;
	margin-top:20px;
}

.problem-slides ul li{
	padding:5px;
}
.problem-slides ul li::marker {
    color: red
}
.problem-slides .main-icon {
    font-size: 42px;
    color: #333;
    margin-bottom: 35px;
}

.problem-slides .problem-text {
    font-weight: 600;
    max-width: 150px;
}

.problem-slides .secondary{ border:1px solid #ddd;
			background:#fff;
			color:#222}


.excitement h2{
	
	line-height:normal;
	margin-bottom:15px;
	font-weight:bold;
	text-transform:capitalize;

}


.emotional-journey .section-label {
    text-align: center;
    color: #ff6b1a;
    font-weight: 700;
    margin-bottom: 30px;
}

.emotional-journey .journey-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.emotional-journey .journey-step {
    width: 180px;
    text-align: center;
}

.emotional-journey .journey-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    border-radius: 50%;
    background: #f7f7f7;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    color: #333;
}

.emotional-journey .journey-icon.active {
    color: #ff6b1a;
}

.emotional-journey .journey-arrow {
    color: #d8d8d8;
    font-size: 28px;
    margin-top: 18px;
    width: 80px;
    text-align: center;
}

.emotional-journey .journey-step h3 {
   	font-weight: 700;
    margin: 0 0 10px;
}

.emotional-journey .journey-step p {
   
    color: #666;
    margin: 0;
}



.excitement .subtext,.contact .subtext{
	color:#f97046;
	text-transform:uppercase;
	font-weight:bold;
	margin-bottom:10px;
	font-size:13px;

}

.industry-spaces{
	margin-top:50px;
}
.industry-spaces .justification {
    list-style: none;
    padding: 0;
    margin: 0;
}

.industry-spaces .justification li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.industry-spaces .justification li i {
    color: #22c55e;
    width: 20px;
    text-align: center;
}
#features
{
	color:#fff;
	padding:20px;
}
#features h2{
			 line-height:normal;
			 margin-bottom:10px;
			 font-weight:bold;
}
#features h3{font-size:1.3em;
			 line-height:normal;
			 margin-bottom:10px;
			 margin-top:10px;
			 font-weight:bold;

}
#features p
{
	font-size:.9em;
}
.features-box{
	background-color:rgba(255, 255,255, 0.15);
	border-radius:10px;
	padding:15px;
	
}
.estimator-card{
	background:#fff;
	border-radius:24px;
	padding:32px;
	box-shadow:0 15px 50px rgba(0,0,0,.08)
}

.before-after{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin:20px 0
}

.before-after img{	width:100%;
					height:220px;
					object-fit:cover;
					border-radius:12px}

.features{
	background:linear-gradient(90deg,#ff7a00,#ff9a2f);
	padding:60px 0;
	color:#fff
}

.feature-grid{	display:grid;
				grid-template-columns:repeat(4,1fr);
				gap:20px
			}

.feature-card{
	background:rgba(255,255,255,.1);
	padding:24px;border-radius:18px
}

.industries h2{}

.section-title{	text-align:center;
				font-size:42px;
				font-weight:800;
				margin-bottom:40px}

.industry-grid{	display:grid;
				grid-template-columns:repeat(6,1fr);
				gap:18px}

.industry-card{
	background:#fff;
	border:1px solid #eee;
	border-radius:18px;
	padding:12px
}

.industry-card img{
	width:100%;
	height:140px;
	object-fit:cover;
	border-radius:12px
}

.video{
	padding:60px 0;
	text-align:center
}
.video-placeholder{
	height:500px;
	border-radius:24px;
	background:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1400') center/cover;
	display:flex;
	align-items:center;
	justify-content:center
}

.play{
	width:100px;
	height:100px;
	border-radius:50%;
	background:#fff;
	font-size:40px;
	display:flex;
	align-items:center;
	justify-content:center
}

.cta{

	background:linear-gradient(90deg,#ff7a00,#ff9a2f);
	padding:80px 0;
	color:#fff
}

.cta-wrap{	display:grid;
			grid-template-columns:1fr 1fr;
			gap:40px;
			align-items:center}

.mock-estimator{
	background:#fff;
	color:#222;
	border-radius:20px;
	padding:30px
}

.testimonials{padding:80px 0}

.testimonial-grid{display:grid;
				  grid-template-columns:repeat(5,1fr);
				  gap:20px
				}

.testimonial{
	border:1px solid #eee;
	border-radius:16px;
	padding:20px
}

.main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* spacing between items */
}

.main-menu li {
    margin: 0;
}

.main-menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
}

.menu ul {
    display:flex;
}
.menu ul li{
	padding-right:20px;
}

footer{
		background:#10141f;
		color:#fff;
		padding:60px;
		
	  }

.footer-grid{display:grid;
			grid-template-columns:1fr 1fr 1fr;
			gap:30px;
			color:#fff;
			
		}
.footer-grid ul li{text-align:center;padding-right:40px}
.footer-grid .menu a{
	color:#fff;
}


.eyebrow {
    display: inline-block;
    color: #ff6b1a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 24px;
}

.problem-content .actions{margin-top:30px}

.problem-content h2 {
    
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111;
}

.problem-content p {

}

/* Diagram */

.problem-flow {
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 60px;
}

.top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.state {
    text-align: center;
    flex: 1;
}

.icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
}

.state h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #111;
}

.state p {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
}

.arrow {
    width: 60px;
    height: 1px;
    background: #ddd;
    position: relative;
}

.arrow::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    top: -4px;
}

.state.active .icon {
    background: #ff6b1a;
    color: white;
}

.state.active h4 {
    color: #ff6b1a;
}

.bottom-row {
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px dashed #e4e4e4;

    display: flex;
    justify-content: space-around;
}

.outcome {
    text-align: center;
}

.outcome span {
    display: flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;

    background: rgba(255,107,26,.08);
    color: #ff6b1a;
    font-size: 24px;
}

.outcome h4 {
    font-size: 18px;
    color: #111;
}



.right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* important */
    gap: 32px;
}

.right-content .item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
}

.right-content .icon {
    flex-shrink: 0;
    margin:0px;
    font-size: 32px;
    line-height: 1;
}

.right-content .item h3 {
    margin: 0 0 0px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.right-content .item p {
    margin: 0;
    color: #666;
    font-size: 18px;
}

.right-content .orange {
    color: #ff6b1a;
}
/* Layout */
.emotion-content {
    display: grid;
    grid-template-columns: 1.3fr auto 1fr;
    align-items: center;
    gap: 60px;
}

/* Heading */
.headline h2 {
    
    line-height: 1.08;
    font-weight: 700;
    color: #111111;
    margin: 0;
    letter-spacing: -0.03em;
}

/* Divider */
.divider {
    width: 1px;
    height: 120px;
    background: #e8e8e8;
}

/* Right Side */
.logic-points {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.icon {
    font-size: 40px;
    line-height: 1;
    color: #111;
    flex-shrink: 0;
}

.icon.heart {
    color: #ff6a13;
}

.text h3 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    color: #111111;
}

.text p {
    margin: 0;
    font-size: 20px;
    color: #666666;
    line-height: 1.5;
}


.reach-out-sidebar {
    background: #f8f8f8;
    border-radius: 20px;
    padding: 40px;
  
    border: 1px solid #ececec;
}

.reach-out-sidebar h3 {
    margin: 0 0 28px;
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #2d2d2d;
    font-size: 16px;
    line-height: 1.5;
}

.check-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid #ff5a1f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5a1f;
    font-size: 12px;
    font-weight: 700;
}

.sidebar-image-wrapper {
    position: relative;
    margin-top: 20px;
}

.sidebar-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.target-badge {
    position: absolute;
    left: -20px;
    bottom: 25px;

    width: 90px;
    height: 90px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #ff7a1a 0%,
        #ff4d00 100%
    );

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    box-shadow:
        0 15px 30px rgba(255, 90, 31, 0.35);
}

.target-badge svg {
    width: 38px;
    height: 38px;
}



.hero .features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    
    margin-bottom:32px;
}

.hero .feature-card{
    text-align:left;
}

.hero .feature-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    font-size:30px;
}

.hero .feature-icon.orange{
    background:#FFF2E9;
    color:#ff7a00;
}

.hero .feature-icon.green{
    background:#EEF9EF;
    color:#27AE60;
}

.hero .feature-icon.purple{
    background:#F4EEFF;
    color:#8B5CF6;
}

.hero .feature-icon.blue{
    background:#EDF5FF;
    color:#4F8EF7;
}

.hero .feature-card h3{
    
    font-weight:700;
    margin-bottom:10px;
    color:#111;
}

.hero .feature-card p{
    color:#666;
    
    
}

.hero .builder-banner{

    margin-top:30px;
    background:#FFF7F3;
    border:1px solid #F2E4DA;
    border-radius:20px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:30px;

}

.hero .shield{

    width:90px;
    height:90px;
    border-radius:18px;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#ff7a00;
    flex-shrink:0;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.hero .shield .fas{
	font-size:3.5em;
}
.hero .actions{margin-top:60px}

.hero .builder-content h3{
	
	font-weight:bold;
	font-size:1.3em;
  	margin-bottom:0px;
    color:#111;
}

.hero .builder-content p{

    color:#666;
    padding:0px;
    margin:0;
}

.hero .builder-list{

    display:flex;

    flex-wrap:wrap;

    gap:30px;
}

.hero .builder-list span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#222;

    font-weight:600;
}

.hero .builder-list i{

    color:#ff7a00;
}







.cta-content{
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.cta-content h2{
    
    line-height:1.1;
    font-weight:800;
    color:#111;
    margin-bottom:40px;
}

.cta-buttons{
    display:flex;
    gap:18px;
}


.cta-image{
    position:relative;
    overflow:hidden;
}

.cta-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.how-it-works-hero .orange{

	color:#ff7a00;
}

.how-it-works-hero h1{

	
    line-height: 1.05;
    font-weight: 800;
   	
}

.how-it-works-hero p{

margin-top:15px;
max-width:80%;
}




.process-section .section-heading{

    text-align:center;
    margin-bottom:70px;

}

.process-section .section-heading .eyebrow{

    display:inline-block;
    color:#ff6200;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:18px;

}

.process-section .section-heading h2{

    
    font-weight:800;
    color:#111;
    line-height:1.15;

}

.process-section .process-grid{

    display:grid;
    grid-template-columns:
    1fr 40px
    1fr 40px
    1fr 40px
    1fr 40px
    1fr;
    align-items:center;
    gap:0;

}

.process-section .process-card{

    background:#fff;
    border-radius:22px;
    padding:10px;
    text-align:center;
    border:1px solid #efefef;
    box-shadow:
    0 12px 40px rgba(0,0,0,.05);
    min-height:500px;

}

.process-section .step-number{

    width:42px;
    height:42px;
    margin:0 auto 30px;
    border-radius:50%;
    background:#fff5ef;
    color:#ff6200;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;

}

.process-section .process-icon{

    font-size:64px;
    color:#ff6200;
    margin-bottom:35px;

}

.process-section .process-card h3{

    font-size:1.3em;
    line-height:1.3;
    margin-bottom:18px;
    font-weight:700;

}

.process-section .line{

    width:42px;
    height:3px;
    background:#ff6200;
    margin:0 auto 28px;
    border-radius:50px;

}

.process-section .process-card p{

    color:#666;
   
}

.process-section .connector{

    position:relative;
    height:4px;

}

.process-section .connector::after{

    content:"";
    position:absolute;
    top:50%;
    left:8px;
    right:8px;
    height:6px;
    transform:translateY(-50%);
    background-image:
    radial-gradient(#ff6200 2px, transparent 2px);
    background-size:12px 6px;
    background-repeat:repeat-x;

}




.platform-section h2{

   
    line-height:1.15;
    margin-bottom:28px;
    font-weight:800;
    color:#111;

}

.platform-section h2 span{

    color:#ff6200;
}

.platform-section p{
    color:#666;
}

.platform-section .actions,.how-it-works-hero .actions{

	margin-top:30px;
}

.platform-right{

    display:grid;

    grid-template-columns:repeat(3,1fr);

}

.platform-section .platform-item{

    display:flex;
    align-items:flex-start;
    gap:18px;
    
   

}

.platform-section .platform-item:nth-child(1),
.platform-section .platform-item:nth-child(2),
.platform-section .platform-item:nth-child(4),
.platform-section .platform-item:nth-child(5){

    border-right:1px solid #ececec;

}

.platform-section .platform-item:nth-child(-n+3){

    border-bottom:1px solid #ececec;

}

.platform-section .platform-item .icon{

    width:58px;
    height:58px;
    border-radius:50%;
    background:#fff5ef;
    color:#ff6200;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    flex-shrink:0;

}

.platform-section .platform-item h4{

    font-size:1.3rem;
    margin-bottom:8px;
    color:#111;
    font-weight:700;

}

.platform-section .platform-item p{

    color:#666;

}


.contact-left{

    max-width:430px;

}

.contact-left .eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:#ff6200;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.contact-left h1{

   

    line-height:1.1;

    font-weight:800;

    color:#151515;

    margin-bottom:28px;

}

.contact-left h1 span{

    color:#ff6200;

}

.contact-left .intro{

    font-size:1.4rem;

    line-height:1.75;

    color:#5f5f5f;

    margin-bottom:60px;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:42px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

}

.contact-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    color:#ff6200;

    font-size:1.7rem;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    flex-shrink:0;

}

.contact-info h4{

    font-size:1.45rem;

    font-weight:700;

    color:#222;

    margin:4px 0 10px;

}

.contact-info p{

    color:#666;

}

.feature-problem .orange {

	color:#ff6b1a;
}


/*=========================================
ROI SECTION
=========================================*/




/*---------------------------------------
Heading
---------------------------------------*/

.section-heading{

    text-align:center;
    margin-bottom:70px;

}

.section-heading .eyebrow{

    display:block;
    color:#ff5a0a;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:18px;
    text-transform:uppercase;

}

.section-heading h2{

    font-size:64px;
    font-weight:800;
    line-height:1.1;
    color:#111;

}

.section-heading h2 span{

    color:#ff5a0a;

}

/*---------------------------------------
Project Cards
---------------------------------------*/

.roi-projects{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-bottom:45px;

}

.roi-card{

    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
    transition:.35s;

}

.roi-card:hover{

    transform:translateY(-8px);

}

.roi-card img{

    width:100%;
    height:260px;
    object-fit:cover;

}

.roi-card-content{

    display:flex;
    align-items:center;
    gap:24px;
    padding:28px;

}

.roi-card-content p{

    margin:0;
   
    color:#000;

}
.roi-card-content .orange{color:#ff5a0a}
.roi-card-content .green{color:#6cab3c}
.roi-card-content .blue{color:#2e8bff}

.roi-card-content h3{

    margin-top:12px;
    font-size:35px !important;
    font-weight:800;

}

/*---------------------------------------
Icons
---------------------------------------*/

.roi-icon{

    width:92px;
    height:92px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:38px;
    flex-shrink:0;

}

.remodel{

    background:#fff3ed;
    color:#ff5a0a;

}

.landscape{

    background:#eef8ea;
    color:#6cab3c;

}

.pool{

    background:#edf5ff;
    color:#2e8bff;

}

/*---------------------------------------
ROI Message
---------------------------------------*/

.roi-cont{

   
    background:#FCF7F5;
    border-radius:26px;
    padding:34px 40px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    margin-bottom:35px;
    

}

.roi-message{
	display:flex;
    align-items:center;
    gap:30px;
    padding-left:15%;
    

}

.roi-message p{
    font-weight:600;
    color:#000;
    
}

.roi-message-icon{

    width:86px;
    height:86px;
    border:3px solid #ff5a0a;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff5a0a;
    font-size:34px;

}


.roi-message strong{

    color:#ff5a0a;

}

/*---------------------------------------
CTA
---------------------------------------*/
.roi-cta .fa{font-size:50px}
.roi-cta{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px;
    background:#FCF7F5;
    border-radius:26px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.roi-cta-text{

    display:flex;

    align-items:center;

    gap:24px;

}

.roi-cta-icon{

    width:86px;

    height:86px;

    border-radius:50%;

    background:#fff3ed;

    color:#ff5a0a;

    display:flex;

    justify-content:center;

    align-items:center;

}

.roi-cta h3{

	font-size:30px !important;
	font-weight:600;

}

.roi-cta p{


    color:#666;

}

.btn-orange{

    background:#ff5a0a;

    color:#fff;

    padding:22px 52px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-orange:hover{

    background:#e64e05;

}



/*==============================
HEADER
==============================*/

.how-steps .section-header{

    text-align:center;
    margin-bottom:70px;

}


.how-steps .section-header h2{

    
    font-weight:800;
    line-height:1.1;
    color:#111;
    margin-bottom:22px;

}

.how-steps .section-header h2 span{

    color:#ff5a0a;

}

.how-steps .section-header p{

    
    max-width:70%;
    margin:auto;
    color:#666;
    font-size:20px;
    

}

/*==============================
STEPS
==============================*/

.how-steps .steps-wrapper{

    display:grid;
    grid-template-columns:1fr 50px 1fr 50px 1fr 50px 1fr;
    gap:0;
    align-items:start;
    margin-top:60px;

}

.how-steps .step-card{
	

    background:#fff;
    border-radius:28px;
    padding:15px;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
    transition:.35s;
    min-height:500px;

}



.how-steps .step-card:hover{

    transform:translateY(-8px);

}

.how-steps .step-number{

    width:58px;
    height:58px;
    border-radius:50%;
    background:#ff5a0a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    margin-bottom:28px;

}

.how-steps .step-card h3{

	font-size:25px;
    margin-bottom:18px;
  

}

.how-steps .step-card p{
  
    margin-bottom:28px;

}

.how-steps .step-image{

    border-radius:18px;
    overflow:hidden;

}

.how-steps .step-image img{

    width:100%;
    display:block;
    object-fit:cover;

}

.how-steps .step-arrow{

    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff5a0a;
    font-size:30px;
    margin-top:120px;

}

/*==============================
BOTTOM CTA
==============================*/

.how-steps .steps-cta{

    display:grid;
    grid-template-columns:120px 1fr auto;

    align-items:center;

    gap:45px;

    background:#fff;

    padding:45px 55px;

    border-radius:28px;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    margin-top:70px;

}

/* ICON */

.how-steps .cta-icon{

    width:90px;
    height:90px;

    border:3px solid #ff5a0a;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#ff5a0a;

    font-size:40px;

}

/* TEXT */

.how-steps .cta-text h3{

    font-size:25px;

    line-height:1.15;
    margin-bottom:10px;
    font-weight:800;
    color:#111;

}

.resources .section-tag{
   text-align:left; 
}
.resources p{
    margin-bottom:20px;
}

.resources h1{
    margin-top:10px;
    margin-bottom:10px;
}

.search-box{

display:flex;
overflow:hidden;

border:1px solid #e8e8e8;
border-radius:16px;

}

.search-box input{

flex:1;
padding:20px;
border:none;
font-size:18px;


}

.search-box button{

width:70px;
border:none;
background:white;
cursor:pointer;

}
.section-tag{

    display:block;
    color:#ff5a0a;
    font-size:15px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:20px;
    text-align:center;
    margin:0 auto;

}

.dashboard-content h2{

    font-weight:800;
    margin-bottom:10px;
    text-align:center;

}

.dashboard-content h2 span{

    color:#ff5a0a;
}

.dashboard-intro{

    color:#666;
    margin:0 auto;
    margin-bottom:55px;
    text-align:center;
    width:60%;


}

.dashboard-benefits{

    display:grid;
    gap:15px 40px;

}

.benefit{

    display:flex;
    align-items:flex-start;
    gap:18px;

}



.benefit-icon{

    width:62px;
    height:62px;
    flex-shrink:0;
    border-radius:18px;
    background:#fff4ee;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#ff5a0a;
    font-size:32px;

}
.benefit p{
    font-size:.9em;
}

.benefit h3{

    margin-bottom:0px;
    font-size:15px !important;
    font-weight:700;
}

div.wpforms-container-full .wpforms-form .wpforms-description{
    color:#666;
    font-weight:normal;
    line-height:1.2;
    font-size:.9em;
    width:95%;

}
div.wpforms-container-full .wpforms-form .wpforms-head-container{
    padding-bottom:15px;
}
/*=========================================
BOTTOM CTA BANNER
=========================================*/

.dashboard-banner{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:60px;

    padding-top:40px;
    padding-bottom:40px;
   

    background:#fff8f4;


}

/*=========================================
LEFT SIDE
=========================================*/

.banner-content{

    display:flex;
    align-items:center;

    gap:35px;

    flex:1;

}

.banner-icon{

    width:110px;
    height:110px;

    min-width:110px;

    border:3px solid #ff6200;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#fff;

    color:#ff6200;

    font-size:46px;

}

.banner-text{

    flex:1;

}

.banner-text h2{

    margin:0 0 15px;
    font-size:28px !important;
    font-weight:800;
  
    color:#111;

}

.banner-text p{

    margin:0;

    max-width:90%;

    line-height:1.65;

    color:#666;

}

/*=========================================
BUTTON
=========================================*/

.banner-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    padding:22px 44px;

    background:#ff6200;
    color:#fff;

    text-decoration:none;
    font-weight:700;

    border-radius:18px;

    white-space:nowrap;

    flex:0 0 auto;
    align-self:center;

    height:auto;
    width:auto;

}

.banner-button:hover{

    background:#eb5600;

    transform:translateY(-2px);

}

.banner-button i{

    font-size:18px;

}

.shortcodeon{display:none}
.video-promo{
    width:100% !important;
    height:auto;
}
.footer-orange{color:#ff7a00;margin-top:10px}

/*==================================================
1200px
==================================================*/
@media (max-width:1200px){

    .dashboard-benefits{

        display:grid;
        grid-template-columns:1fr 1fr;
        gap:35px 40px;
    }

    .how-it-works-hero p{max-width:100%}
    .shorcode-margin{
        margin-bottom:25px;
        margin-top:30px;
    }
    nav{padding-left:0px;
        padding-right:0px}
	.shortcodeon{display:block}
	.shortcodeoff,#shortcodeoff{display:none}
	.roi-message{padding-left:0}
	 .roi-projects{
        grid-template-columns:repeat(2,1fr) !important
    }
    /* Features */
    .features-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* Hero */
    .hero-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .hero h1{
    	
    	margin-top:5px;
    }
    .hero p{
    	margin-top:15px;
    	margin-bottom:15px;
    }
    .hero .builder-content h3{

    	font-size:1em;
    }
    .hero-benefits{
    	flex-direction:row !important;
    }

    .features-section .features-grid
    {
    	    grid-template-columns: repeat(2, 1fr);

    }
    .how-steps .steps-cta{
    	padding:10px;
    	gap:20px;
    }
    .section-header p, .step-card p, .steps-cta p
    {
    	font-size:.8em !important
    }

    .btn-orange{
    	padding-left:25px;
    	padding-right:25px
    }

    .how-steps .cta-text h3
    {
    	font-size:15px;
    }
    .hero-content h1{
    	margin-top:15px;
    	margin-bottom:15px;
    }

    .industry-spaces{
    	margin-top:0px;
    	min-height:185px;
    }
    .hero-content{
        text-align:center;
    }

    .hero-description{
        margin:auto auto 40px;
    }

    .hero-benefits{
        justify-content:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image{
        max-width:800px;
        margin:auto;
    }

    .floating-card{
        left:50%;
        transform:translateX(-50%);
    }

    /* Dashboard */
    .dashboard-benefits{
        grid-template-columns:1fr;
    }

    .dashboard-intro{
        font-size:1em;
    }

    .dashboard-banner{
    	display:block;
    	padding-top:20px !important;
    }

    .how-steps .steps-wrapper {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 50px;
    }
    .step-arrow{display:none !important}
    .banner-button{
    	margin-top:30px;
    }
    /* Steps */
    .steps-wrapper{
        grid-template-columns:1fr;
        gap:30px;
    }

    .step-arrow{
        display:none;
    }

    .steps-cta{
        flex-direction:column;
        gap:35px;
        text-align:center;
    }

    .cta-content{
        flex-direction:column;
    }

    /* Dashboard Banner */
    .dashboard-banner{
        flex-direction:column;
        text-align:center;
    }

    .banner-content{
        flex-direction:column;
    }

    .banner-text{
        text-align:center;
    }

    .banner-text p{
        max-width:100%;
    }

    .banner-button{
        width:100%;
        max-width:420px;
    }

   

    

}


/*==================================================
991px
==================================================*/
@media (max-width:991px){

    .emotional-journey .section-label{
        margin-top:40px;
    }
    .the-excitement .feature-list{
        margin-top:50px;
    }
    .the-excitement p{margin-bottom:15px}
    .btn{font-size:15px}
    .headline h2{text-align:center}
    .orange-text{display:inline}
    /* ROI */
    .roi-projects{
        grid-template-columns:1fr;
    }

    .roi-message{
        flex-direction:column;
        text-align:center;
    }

    .roi-message p{
        font-size:28px;
    }

    .roi-cta{
        flex-direction:column;
        gap:35px;
        text-align:center;
    }

    .roi-cta-text{
        flex-direction:column;
    }

    .section-heading h2{
        font-size:42px;
    }

    header{margin-bottom:30px}

}


/*==================================================
900px
==================================================*/
@media (max-width:900px){
    .footer-grid ul li{
        padding-right:0px
    }
    .stop-selling-estimates{
        padding:0 !important
    }
    .hero-content h1{text-align:left}
    .roi-card-content h3{
        font-size:25px !important;

    }
    .roi-card{margin-bottom:15px}
    .roi-projects{display:block}
    .roi-icon{margin:0 auto;margin-bottom:10px}
    .roi-card-content{
        display:block;
        text-align:center;

    }
    .how-steps .steps-wrapper{

        display:block;
    }
    .how-steps .steps-cta{

        grid-template-columns: none;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .15);
    }
    .how-steps .cta-icon{
        margin:0 auto;
    }
    .how-steps .step-card{
        margin-bottom:25px;
    }

    .dashboard-content h2{

        line-height:1;
        margin-top:15px;
        margin-bottom:25px;
        text-align:left;
    }

    .dashboard-intro{
        width:100%;
        text-align:left
    }
    .section-tag{text-align:left}
    .cta-content{padding:0}
    .menu{display:block}
    .emotional-journey .journey-row{
        display:block
    }

    .emotional-journey .journey-step
    {
        width:100%;
        margin-top:25px;
    }
    .journey-arrow{display:none}
    /* Emotion */
    .emotion-content{
        grid-template-columns:1fr;
        gap:40px;
    }

    .divider{
        width:100%;
        height:1px;
    }

    .text h3{
        font-size:28px;
    }

    /* Homepage */
    .hero,
    .cta-wrap{
        grid-template-columns:1fr;
    }

    .feature-grid,
    .industry-grid,
    .testimonial-grid,
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}


/*==================================================
768px
==================================================*/
@media (max-width:768px){

    /* Features Hero */
    .features-hero{
        padding:70px 0;
    }

    .hero-benefits{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        justify-content:center;
    }

    .floating-card{
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;
        width:100%;
        margin-top:20px;
    }

    .hero-image img{
        border-radius:18px;
    }

    /* Features */
    .features-grid{
        grid-template-columns:1fr;
    }

    .features-section{
        padding:70px 20px;
    }

    .features-section .feature-card{
        padding:35px;
    }

    .features-section .icon{
        width:75px;
        height:75px;
        font-size:34px;
    }

    /* Steps */
    .section-header h2{
        font-size:48px;
    }

    .step-card h3,
    .steps-cta h3{
        font-size:32px;
    }

    .section-header p,
    .step-card p,
    .steps-cta p{
        font-size:18px;
    }

    /* Dashboard Banner */
    .dashboard-banner{
        padding:40px 30px;
    }

    .banner-icon{
        width:90px;
        height:90px;
        min-width:90px;
        font-size:36px;
    }

    .banner-text h2{
        font-size:36px;
    }

    .banner-text p{
        font-size:18px;
    }

    .banner-button{
        width:100%;
        justify-content:center;
    }

}


/*==================================================
480px
==================================================*/
@media (max-width:480px){

    .hero-tag{
        font-size:12px;
    }

}