/* Custom ENECON Styles */

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* This is the secret sauce for angled/animated pages */
}

/********** TOP SECTION *********/
.enecon-hero {
    background-color: #0760a9; /* ENECON Blue */
    color: #ffffff;
    padding: 80px 0 140px 0; /* Adjusted padding for the new angle */
    margin-top: -1px;
    /* Downward angle from Left-to-Right */
    /* (Top-Left, Top-Right, Bottom-Right, Bottom-Left) */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

.enecon-hero h2 {
    font-weight: 700;
    font-size: 36px;
    margin-top: 0;
    color: #fff;
}

.enecon-hero h3 {
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 20px;
    color: #e0e0e0; /* Slight off-white for visual hierarchy */
}

.enecon-hero p {
    font-size: 18px;
    line-height: 1.6;
}

/* Flexbox fix for Bootstrap 3 vertical centering */
@media (min-width: 992px) {
    .display-flex {
        display: flex;
        align-items: center;
    }
}

/* Ensure the image doesn't look cramped on smaller screens */
.placeholder-box {margin-bottom: 30px;}

/********** TOP SECTION END *********/

/********** WHO IS ENECON  *********/
.who-is-enecon {
    padding: 80px 0;
    background-color: #ffffff;
    color: #333333;
}

.who-is-enecon .section-title {
    color: #0760a9; /* ENECON Blue */
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.who-is-enecon p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.who-is-enecon .lead-text {
    font-size: 18px;
    font-weight: 500;
}

.enecon-quote {
    border-left: 5px solid #0760a9;
    padding-left: 20px;
    font-style: italic;
    margin-top: 30px;
    color: #555;
    font-size: 22px !important;
}
/********** WHO IS ENECON END *********/

/********** STATS SECTION  *********/
.enecon-stats {
    padding: 60px 0;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.stat-item {
    padding: 20px;
}

.stat-icon {
    font-size: 40px;
    color: #0760a9; /* ENECON Blue */
    margin-bottom: 10px;
}

.stat-number {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: #333;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #777;
    margin-top: 10px;
}
/********** STATS SECTION END  *********/

/********** WHAT IS THE OPPORTUNITY SECTION *********/
.enecon-opportunity {
    background-color: #333333; /* Dark Gray */
    color: #ffffff;
    padding: 80px 0 160px 0; /* Extra bottom padding for the chevron height */
    
    /* Downward Chevron Shape */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.enecon-opportunity .section-title {
    color: #35A0F7; /* ENECON Blue */
    font-weight: 700;
    font-size: 38px;
    margin-bottom: 10px;
}

.enecon-opportunity .section-subtitle {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 300;
    color: #ccc;
}

.promo-text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}

.facility-list-wrapper {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.facility-list-wrapper h4 {
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #35A0F7;
}

.facility-list {
    text-align: left;
    font-size: 16px;
}

.facility-list li {
    margin-bottom: 10px;
}

.facility-list i {
    color: #35A0F7;
    margin-right: 10px;
    font-size: 12px;
}

.final-call {
    font-size: 20px;
    border-top: 1px solid #444;
    padding-top: 20px;
}
/* Spacing for the new sliding images */
.image-slide-row {
    margin-top: 40px;
    margin-bottom: 50px;
}

.opportunity-img-container {
    padding: 10px;
}

/* Styling the images to pop against the dark gray */
.opportunity-img-container img {
    border: none;
    background-color: #444; /* Subtle border-like effect */
    transition: transform 0.3s ease;
}

.opportunity-img-container img:hover {
    transform: scale(1.02); /* Slight zoom on hover */
}

.img-caption {
    margin-top: 15px;
    font-size: 14px;
    color: #0760a9; /* ENECON Blue */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Ensure images don't overlap on mobile */
@media (max-width: 767px) {
    .opportunity-img-container {
        margin-bottom: 30px;
    }
	/* This controls the chevron on mobile */
	.enecon-opportunity {
        /* We change 90% (steep) to 96% (shallow) for mobile */
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 50% 100%, 0 96%);
        clip-path: polygon(0 0, 100% 0, 100% 98%, 50% 100%, 0 98%);
        /* Reduce bottom padding slightly so the gap isn't huge */
        padding-bottom: 80px; 
    }
}
/********** WHAT IS THE OPPORTUNITY END *********/

/********** DIFFERENT, STABLE, COST SECTION *********/
.opportunity-details {
    padding: 80px 0;
    background-color: #ffffff;
}

.opportunity-details .section-title {
    color: #0760a9;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 20px;
}

.intro-p {
    font-size: 18px;
    color: #555;
}

.emphasis-p {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
}

/* Custom Bullet List */
.feature-list li {
    position: relative;
    /*padding-left: 25px;*/
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
}

.feature-list li:before {
    /*content: "•";*/
    color: #0760a9;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: -5px;
}
.fa-chevron-double-right {color: #0760a9;}

.summary-text {
    margin-top: 15px;
    padding: 0px 15px;
    border-left: 4px solid #0760a9;
    font-style: italic;
    color: #000;
}

/* Stability Section Spacing */
.stability-box {
    margin-bottom: 40px;
}

/* The Cost Highlight Card */
.cost-highlight-card {
    background-color: #f0f7ff; /* Very light blue tint */
    border: 2px solid #0760a9;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.cost-title {
    margin-top: 0;
    font-size: 28px;
    color: #333;
    font-weight: 700;
}

.cost-amount {
    font-size: 48px;
    color: #0760a9;
    font-weight: 800;
    text-transform: uppercase;
    margin: 10px 0;
    letter-spacing: 2px;
}

.final-drive {
    font-weight: 700;
    font-size: 18px;
    margin-top: 15px;
    color: #0760a9;
}
/********** DIFFERENT, STABLE, COST END *********/

/********** DEALER RECEIVE/DO SECTION *********/

.dealer-info-angled {
    background-color: #0760a9; /* ENECON Blue */
    color: #ffffff;
    /* Large padding to prevent content from hitting the slanted edges */
    padding: 120px 0 140px 0;
    margin-top: -60px; /* Pulls it up to meet the white section cleanly */
    
    /* Downward Angle Top & Bottom (Left-to-Right) */
    -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
}

.dealer-info-angled .section-title {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
    color: #D8D8D8;
}

.dealer-list.fa-ul {margin-left: 35px;}

.dealer-list li {
    margin-bottom: 15px;
    font-size: 16px;
}

.dealer-list i {
    color: #ffffff;
    opacity: 0.8;
}

.admin-note, .retention-text {
    margin-top: 25px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: 15px;
}

/* Responsive Fix for Mobile */
@media (max-width: 767px) {
    .dealer-info-angled {
        /* Flatten the angles for mobile */
        -webkit-clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        padding: 80px 0 100px 0;
    }
    
    .dealer-info-angled .display-flex {
        display: block; /* Stack columns on mobile */
    }
}

/********** DEALER RECEIVE/DO END *********/

/********** PRODUCTS SECTION *********/
.enecon-products-detail {
    padding: 80px 0;
    background-color: #ffffff;
}

.enecon-products-detail .section-title {
    color: #0760a9;
    font-weight: 700;
    margin-bottom: 20px;
}

.enecon-products-detail .small-title {
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.product-feature {
    margin-bottom: 25px;
}

.product-feature h3 {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 5px;
}

.product-feature p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

.scratch-surface {
    font-size: 22px;
    color: #0760a9;
    margin: 30px 0;
    font-weight: bold;
}

/* ENECON CTA Button */
.btn-enecon-blue {
    background-color: #0760a9;
    color: #ffffff;
    border-radius: 4px;
    padding: 12px 25px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
}

.btn-enecon-blue:hover {
    background-color: #054a85;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Stacked Image Styling */
.stacked-images .img-wrapper {
    margin-bottom: 30px;
}

.stacked-images img {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

@media (max-width: 991px) {
    .stacked-images {
        margin-top: 50px;
    }
}
/********** PRODUCTS END *********/

/********** CUSTOMERS SECTION *********/
.enecon-customers {
    background-color: #f1f1f1;
    color: #333;
    padding: 100px 0 0 0; /* Bottom padding is 0 because of the full-width images */
    margin-top: -50px; /* Overlap to ensure the chevron cuts into the previous section */
    
    /* Downward Chevron on TOP, Flat on BOTTOM */
    -webkit-clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 100%, 0 100%);
    clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 100%, 0 100%);
}

.enecon-customers .section-title {
    color: #0760a9;
    font-weight: 700;
    margin-bottom: 20px;
}

.customer-list-row {
    margin: 30px auto;
    max-width: 600px;
}

.customer-list-row ul li {
    margin-bottom: 10px;
    font-size: 16px;
}

.and-more {
    font-weight: 700;
    margin-bottom: 50px;
    color: #777;
    font-size: 26px;
}

/* Removes padding from Bootstrap's container-fluid and rows */
.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

/* Image Hover Effect */
.no-gutter img {
    filter: grayscale(20%);
    transition: all 0.4s ease;
}

.no-gutter img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
    z-index: 10;
    position: relative;
}

/* Responsive adjustment for the top chevron */
@media (max-width: 767px) {
    .enecon-customers {
        -webkit-clip-path: polygon(0 4%, 50% 0, 100% 4%, 100% 100%, 0 100%);
        clip-path: polygon(0 4%, 50% 0, 100% 4%, 100% 100%, 0 100%);
    }
}
/********** CUSTOMERS END *********/

/********** WHO MAKES A GOOD CUSTOMER/LEARN MORE SECTION *********/
.dealer-qualifications {
    padding: 80px 0;
    background-color: #ffffff;
}

.dealer-qualifications .section-title {
    color: #0760a9; /* ENECON Blue */
    font-weight: 700;
    margin-bottom: 20px;
}

.qualifications-list.fa-ul {
    margin-left: 30px;
    margin-bottom: 30px;
}

.qualifications-list li {
    font-size: 18px;
    margin-bottom: 12px;
    color: #333;
}

.qualifications-list i {
    color: #0760a9;
}

.section-divider {
    margin: 40px 0;
    border-top: 1px solid #eee;
}

/* Form Placeholder Styling */
.form-placeholder-box {
    background-color: #f1f1f1;
    border: 2px solid #0760a9;
    border-radius: 8px;
    min-height: 500px; /* Gives the box presence before the form is added */
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    /*margin-top: 20px;*/
    padding: 15px;
}

@media (max-width: 991px) {
    .form-placeholder-box {
        margin-top: 50px;
        min-height: 300px;
    }
}
/********** WHO MAKES A GOOD CUSTOMER/LEARN MORE END *********/

/********** RIGHT PADDING FIX *********/
/* Ensure our section wrappers have no horizontal padding */
.enecon-hero, 
.dealer-info-angled, 
.enecon-customers,
.enecon-opportunity {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix for the Row overflow */
.row {
    margin-left: 0;
    margin-right: 0;
}

/* If you want the columns to still have spacing but the row to hit the edge: */
.no-gutter-row {
    margin-left: 0;
    margin-right: 0;
}
.no-gutter-row > [class*='col-'] {
    padding-left: 0;
    padding-right: 0;
}
/********** RIGHT PADDING FIX END *********/

/**** MOBILE STYLES ****/
@media (min-width: 992px) {
    .placeholder-box {margin-bottom: 0;}
    .who-is-enecon .display-flex {
        display: flex;
        align-items: center;
    }
}
/* Adjustments for mobile to prevent crowding */
@media (max-width: 767px) {
    .stat-number {font-size: 32px;}
    .stat-item {margin-bottom: 30px;}
}