/**
 * Support Steps CSS - FINAL VERSION
 * Matches reference site exactly
 */

/* Base styles - keeping minified original */
.block-projectsteps{margin-bottom:10px}@media (min-width:768px){.block-projectsteps{margin-bottom:55px;padding:0 12.5px}}@media (max-width:992px){.block-projectsteps{padding-top:20px}}.block-projectsteps strong{color:#102335}.block-projectsteps__container{display:flex;flex-direction:column;padding:0}@media (min-width:1200px){.block-projectsteps__container{height:545px}}@media (min-width:768px){.block-projectsteps__container{flex-direction:row;margin-bottom:0}}.block-projectsteps__left{order:3}@media (min-width:768px){.block-projectsteps__left{align-items:center;background:#e9f4f3;display:flex;order:1;width:50%}}.block-projectsteps__left .block-projectsteps__panel-header{font-size:1.6rem;font-weight:700;line-height:2rem;margin:0 0 15px;padding:0;position:relative}@media (min-width:768px){.block-projectsteps__left .block-projectsteps__panel-header:hover{cursor:pointer}.block-projectsteps__left .block-projectsteps__panel-header{align-items:center;display:flex;font-size:1.2rem;height:38px;line-height:1.5rem;margin-bottom:0;padding:4px 0 11px;transition:all .5s}.block-projectsteps__left .block-projectsteps__panel-header:after{align-items:center;border:1px solid #7e96aa;border-radius:50%;color:#7e96aa;content:"→";display:flex;font-size:.9rem;height:24px;justify-content:center;margin-left:6px;position:absolute;right:0;top:3px;transition:all .5s;width:24px}}@media (min-width:1200px){.block-projectsteps__left .block-projectsteps__panel-header{font-size:1.5rem}}.block-projectsteps__left p{color:#374652;font-size:1.2rem;font-weight:400;line-height:2.2rem;margin:0 0 15px}@media (min-width:1200px){.block-projectsteps__left p{padding-right:30px}}@media (min-width:768px) and (max-width:991px){.block-projectsteps__left p{font-size:1.1rem;line-height:1.8rem}}.block-projectsteps__right{order:1}@media (min-width:768px){.block-projectsteps__right{align-items:center;background:#409498;display:flex;justify-content:center;order:3;padding:30px;width:50%;transition:background-color .3s ease}}.block-projectsteps__panel{display:none;padding-bottom:15px}@media (min-width:768px){.block-projectsteps__panel{display:block;padding-left:33px;position:relative}.block-projectsteps__panel:before{border-radius:50%;height:8px;left:0;top:10px;width:8px}.block-projectsteps__panel:after,.block-projectsteps__panel:before{background:#102335;content:"";display:flex;font-family:arial;position:absolute;transition:all .5s}.block-projectsteps__panel:after{height:calc(100% - 14px);left:3px;top:20px;width:2px}.block-projectsteps__panel:last-child:after{display:none}}.block-projectsteps__panel-group{list-style-type:none;margin:0;padding:0}@media (min-width:768px){.block-projectsteps__panel-group{margin:0 auto;max-width:444px;width:100%}}@media (min-width:1200px){.block-projectsteps__panel-group{max-width:465px}}@media (min-width:768px) and (max-width:1199px){.block-projectsteps__panel-group{padding:25px}}.block-projectsteps__panel-body{display:block}@media (min-width:768px){.block-projectsteps__panel-body{display:none}}.block-projectsteps__panel.open{display:none}@media (min-width:768px){.block-projectsteps__panel.open{display:block}.block-projectsteps__panel.open .block-projectsteps__panel-header{font-size:2rem;line-height:2.5rem;margin-bottom:0;position:relative;transition:all .5s}.block-projectsteps__panel.open .block-projectsteps__panel-header:after{background-color:#102335;border:1px solid #102335;color:#fff;content:"→";transform:rotate(90deg);transition:all .5s}}@media (min-width:1200px){.block-projectsteps__panel.open .block-projectsteps__panel-header{font-size:2.5rem}}@media (min-width:768px) and (max-width:1199px){.block-projectsteps__panel.open .block-projectsteps__panel-header{font-size:1.5rem;line-height:2rem}}.block-projectsteps__panel.open.block-projectsteps__panel:before{background:#102335;top:11px;transition:all .5s}.block-projectsteps__panel.open.block-projectsteps__panel:after{background:#102335;height:calc(100% - 14px);top:22px;transition:all .5s}.block-projectsteps__panel.open~.block-projectsteps__panel:before{background:#284b73;transition:all .5s}.block-projectsteps__panel.open~.block-projectsteps__panel:after{background:#c4c4c4;transition:all .5s}@media (max-width:768px){.block-projectsteps__panel .btn{display:flex;font-size:1.2rem;justify-content:center;margin:0 auto;max-width:300px;padding:17px 21px 17px 24px;width:100%}.block-projectsteps__panel .btn:after{font-size:.9rem;position:relative;top:1px}}.block-projectsteps__content{display:block}@media (min-width:768px){.block-projectsteps__content{display:none}.block-projectsteps__content.active{display:block}}.block-projectsteps__content img{display:block;height:auto;margin:0 auto 40px;max-width:245px;width:100%}@media (min-width:768px){.block-projectsteps__content img{margin-bottom:0;max-width:300px}}.block-projectsteps__content-links{display:none}@media (min-width:768px){.block-projectsteps__content-links{display:flex;flex-wrap:wrap;justify-content:center}}.block-projectsteps{margin-left:auto;margin-right:auto;max-width:1920px;overflow:hidden;width:100%}

/* BUTTON STYLING - MATCHING REFERENCE SITE */

/* Left panel button - white/transparent background with colored border */
@media (min-width: 768px) {
    .block-projectsteps__left .btn {
        margin-bottom: 10px;
        padding: 13px 26px 13px 24px;
        background: transparent !important;
        border-radius: 25px;
        font-size: 1.1rem;
        font-weight: 600;
        transition: all .25s;
    }

    /* Teal step button */
    .block-projectsteps__left [data-bg-color="bloc-blue2-bg"] .btn {
        background: transparent !important;
        border: 1px solid #409498 !important;
        color: #409498 !important;
    }

    .block-projectsteps__left [data-bg-color="bloc-blue2-bg"] .btn:hover {
        background: #409498 !important;
        color: #fff !important;
    }

    /* Yellow step button */
    .block-projectsteps__left [data-bg-color="bloc-safran-bg"] .btn {
        background: transparent !important;
        border: 1px solid #e1bb34 !important;
        color: #e1bb34 !important;
    }

    .block-projectsteps__left [data-bg-color="bloc-safran-bg"] .btn:hover {
        background: #e1bb34 !important;
        color: #fff !important;
    }

    /* Green step button */
    .block-projectsteps__left [data-bg-color="bloc-green2-bg"] .btn {
        background: transparent !important;
        border: 1px solid #628173 !important;
        color: #628173 !important;
    }

    .block-projectsteps__left [data-bg-color="bloc-green2-bg"] .btn:hover {
        background: #628173 !important;
        color: #fff !important;
    }

    /* Pink step button */
    .block-projectsteps__left [data-bg-color="bloc-pink-bg"] .btn {
        background: transparent !important;
        border: 1px solid #de9ba8 !important;
        color: #de9ba8 !important;
    }

    .block-projectsteps__left [data-bg-color="bloc-pink-bg"] .btn:hover {
        background: #de9ba8 !important;
        color: #fff !important;
    }
}

/* Content links buttons - white border on colored background */
.block-projectsteps__content-links .btn {
    background: transparent !important;
    border: 1px solid #fff !important;
    border-radius: 25px;
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 6px 6px;
    padding: 13px 21px 13px 24px;
    transition: all .25s;
}

.block-projectsteps__content-links .btn:hover {
    background: #fff !important;
    transition: all .25s;
}

/* Content link hover colors based on background */
.block-projectsteps__content[data-bg-color="bloc-blue2-bg"] .block-projectsteps__content-links .btn:hover {
    color: #409498 !important;
}

.block-projectsteps__content[data-bg-color="bloc-safran-bg"] .block-projectsteps__content-links .btn:hover {
    color: #e1bb34 !important;
}

.block-projectsteps__content[data-bg-color="bloc-green2-bg"] .block-projectsteps__content-links .btn:hover {
    color: #628173 !important;
}

.block-projectsteps__content[data-bg-color="bloc-pink-bg"] .block-projectsteps__content-links .btn:hover {
    color: #de9ba8 !important;
}

/* RIGHT PANEL BACKGROUND COLORS - Using class selectors */
@media (min-width: 768px) {
    .block-projectsteps[data-bg-color="bloc-blue2-bg"] .block-projectsteps__right {
        background: #409498 !important;
        transition: background-color 0.3s ease;
    }

    .block-projectsteps[data-bg-color="bloc-safran-bg"] .block-projectsteps__right {
        background: #e1bb34 !important;
        transition: background-color 0.3s ease;
    }

    .block-projectsteps[data-bg-color="bloc-green2-bg"] .block-projectsteps__right {
        background: #628173 !important;
        transition: background-color 0.3s ease;
    }

    .block-projectsteps[data-bg-color="bloc-pink-bg"] .block-projectsteps__right {
        background: #de9ba8 !important;
        transition: background-color 0.3s ease;
    }
}

/* Left panel background tint */
.block-projectsteps[data-bg-color="bloc-blue2-bg"] .block-projectsteps__left {
    background: rgba(64,148,152,.1);
}

.block-projectsteps[data-bg-color="bloc-safran-bg"] .block-projectsteps__left {
    background: rgba(225,187,52,.1);
}

.block-projectsteps[data-bg-color="bloc-green2-bg"] .block-projectsteps__left {
    background: rgba(98,129,115,.1);
}

.block-projectsteps[data-bg-color="bloc-pink-bg"] .block-projectsteps__left {
    background: rgba(222,155,168,.1);
}

/* MOBILE FIXES */

/* Image max-width on desktop */
@media (min-width: 768px) {
    .block-projectsteps__content-image {
        max-width: 300px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* Mobile layout improvements */
@media (max-width: 767px) {
    .block-projectsteps__content {
        padding: 20px;
        min-height: 400px;
    }
    
    .block-projectsteps__content-image {
        max-width: 100%;
        margin: 0 auto 30px;
    }
    
    /* Hide panel body text on mobile (shown in content area) */
    .block-projectsteps__left {
        display: none;
    }
    
    .block-projectsteps__right {
        width: 100%;
        order: 1;
    }
    
    /* Ensure content is visible on mobile */
    .block-projectsteps__content {
        display: block !important;
    }
    
    /* Mobile slider adjustments */
    .slick-track {
        display: flex;
    }
    
    .slick-slide {
        height: auto;
    }
}

/* MOBILE SLIDER FIX - Force slides to display */
@media (max-width: 767px) {
    /* Remove display:none from Slick slides */
    .block-projectsteps__content.slick-slide {
        display: block !important;
    }
    
  
    /* Force active slide to show */
    .block-projectsteps__content.slick-slide.slick-active {
        display: block !important;
    }
    
    /* Panel body should be visible */
    .block-projectsteps__content .block-projectsteps__panel-body {
        display: block !important;
    }
}

.block-projectsteps__content .block-projectsteps__panel-body p {
    color: #374652;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2.2rem;
    margin: 0 0 15px;
}
.block-projectsteps__content .block-projectsteps__panel-body .btn {
    align-items: center;
    display: flex;
    font-size: 1.2rem;
    justify-content: center;
    margin: 0 auto 30px;
    max-width: 300px;
    padding: 17px 21px 17px 24px;
    transform: scale(1);
    transition: background-color .25s, border .25s ease;
    width: 100%;
}
.btn.btn-primary {
    background: #102335;
    border-color: #102335;
    color: #fff;
}
.btn {
    background: transparent;
    border: 2px solid #b7c6d1;
    border-radius: 25px;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    min-height: 40px;
    padding: 12px 21px 11px;
    transition: all .25s;
    white-space: normal;
}
.block-projectsteps__content .block-projectsteps__panel-body .btn:after {
    font-size: .9rem;
}
.btn:after {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: inherit;
    content: "\e90b";
    font-size: .7rem;
    margin-left: 6px;
}
.btn.btn-primary:focus, .btn.btn-primary:hover {
    background-color: #fff;
    border-color: #102335;
    color: #102335;
}