/* Main Content */
.main-content {
    padding: 0 0 60px;
    width: 100%;
    margin-inline: auto;
    background-color: #000000;
    color: #fff;
}
.craftmanship-hero-banner-sec {
    position: relative;
    width: 100%;
    background-color: #000000;
    .common-container-craftmanship-hero {
        max-width: 100%;
        margin: 0 auto;
    }
    .craftmanship-hero-banner-inner {
        position: relative;
        background: url("/wp-content/themes/dellastore/assets/images/office-subpages/craftsmanship/craftsmanship-banner.webp") no-repeat;
        background-size: cover;
        background-position: center;
        height: calc(100vh - 100px);
        /* img {
            aspect-ratio: 16 / 7.3;
            object-fit: cover;
        } */

        /* .craftmanship-hero-banner-layer1 {
            padding: 0 8%;
            img {
                aspect-ratio: 16 / 6;
            }
        }
        .craftmanship-hero-banner-layer2 {
            position: relative;
            img {
                aspect-ratio: 16 / 4;
            }
        } */
        .craftmanship-hero-content {
            padding:  15px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 5%;
            z-index: 1;
            text-align: center;
            width: 100%;
            max-width: 850px;
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000000;
                opacity: 0.5;
                z-index: -1;
            }
            .craftmanship-hero-content-title {
                font-size: clamp(24px, calc(1.5rem + (40 - 24) * ((100vw - 767px) / (1920 - 767))), 40px);
                 font-family: 'Figtree', sans-serif;
                font-weight: 400;
            }
            .craftmanship-hero-content-subtitle {
                font-size: clamp(20px, calc(1.25rem + (24 - 20) * ((100vw - 767px) / (1920 - 767))), 24px);
                 font-family: 'Figtree', sans-serif;
                font-weight: 400;
            }
            .craftmanship-hero-content-desc {
                p {
                font-size: 1rem;
                font-family: 'Figtree', sans-serif;
                line-height: 24px;
                font-weight: 400;
                max-width: 850px;
                margin: 0 auto;
                }
            }

        }
    }
}

.craftmanship-feature-sec {
    margin: 80px 0 0;
    .craftmanship-feature-inner {
        display: flex;
        flex-direction: column;
        gap: 80px 0;
        .row {
            align-items: center;

            &:nth-child(even) {
                flex-flow: row-reverse;
                .craftmanship-feature-left {
                    text-align: left;
                }
                
            }
            &:nth-child(odd) {
                .craftmanship-feature-right {
                    padding-left: 8.33333333%;
                }
                .craftmanship-feature-left {
                    text-align: right;
                }
            }
        }
       
        
        .craftmanship-feature-left {
            img {
                max-height: 600px;
                max-width: 600px;
            }
        }
        .craftmanship-feature-right {
            .craftmanship-feature-title {
                font-size: clamp(18px, calc(1.125rem + (32 - 18) * ((100vw - 767px) / (1920 - 767))), 32px);
                font-weight: 400;
                margin-bottom: 1rem;
            }
            
            .craftmanship-feature-desc {
                font-size: .875rem;
                line-height: 22px;
                font-weight: 300;
                max-width: 850px;
                margin: 0 auto;
            }
        }
    }
    .craftmanship-feature-info {
        .accordion-item    {
            background-color: #000;
            padding-bottom: .5rem;
            border: none;
            padding-left: 2rem;
            position: relative;
            
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 1px;
                height: 100%;
                border-left: 1px solid #717171;
                transition: border-color 0.2s ease;

            }
            .accordion-header {
                padding: .5rem 0;
                .accordion-button:not(.collapsed) {
                    color: #fff;
                    font-weight: 400;
                }
            }
            .accordion-collapse {
                &.show {
                    .accordion-body {
                        color: #fff;
                        font-weight: 400;
                    }
                }
            }
            .accordion-button {
                font-size: 1.25rem;
                font-weight: 400;
                text-align: left;
                color: #8f8f8f;
                background-color: #000;
                padding: 0;
                /* margin-bottom: .5rem; */
                box-shadow: none;
                &::after {
                    display: none;
                }
                

            }
            .accordion-body {
                font-size: 1rem;
                line-height: 22px;
                font-weight: 400;
                max-width: 435px;
                text-align: left;
                color: #8f8f8f;
                padding: 0;
            }
        }
    }
}

.accordion-item:has(.accordion-collapse.collapse.show) {
    &::before {
            border-color: #fff;
    }
}
@media (max-width: 1199px) {
    
    .craftmanship-hero-banner-sec {
       & .craftmanship-hero-banner-inner {
            background-position: 56% center;
            & .craftmanship-hero-banner-layer2 {
                img {
                    aspect-ratio: 16 / 7;
                }
            }
        }
    }
    .craftmanship-feature-sec {
        margin: 60px 0 0;
        & .craftmanship-feature-inner {
            .row {
                &:nth-child(odd) {
                    .craftmanship-feature-right {
                        padding-left: 4% !important;
                    }
                }
            }
            & .craftmanship-feature-left {
                img {
                    max-height: 100%;
                    max-width: 100%;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .craftmanship-hero-banner-sec {
        & .craftmanship-hero-banner-inner {
            height: 45vh;
            & .craftmanship-hero-content {
                .craftmanship-hero-content-desc {
                    font-size: .875rem;
                    line-height: normal;
                    max-height: 90px;
                    overflow: scroll;
                }
            }
        }
    }
    
    .craftmanship-feature-sec {
        margin: 40px 0 0;
        & .craftmanship-feature-inner {
            gap: 30px;
            .row {

                &:nth-child(even) {
                    flex-flow: column;
                    
                    .craftmanship-feature-left {
                        text-align: center;
                    }
                }
                    
                &:nth-child(odd) {
                    .craftmanship-feature-right {
                        padding-left: 4% !important;
                    }
                    .craftmanship-feature-left {
                        text-align: center;
                    }
                }
            }
            & .craftmanship-feature-left {
                text-align: left;
                img {
                    max-height: 300px;
                }
            }
            .craftmanship-feature-right {
                margin-top: 30px;
            }
        }
        .craftmanship-feature-info {
            .accordion-item {
                padding-left: 1rem;
                padding-bottom: .5rem;
            }
        }
        
    }
}