.program-box-items {
    padding: 20px 30px 36px;
    position: relative;
    z-index: 9;
   // max-width: 420px;
    text-align: center;
    margin: 30px auto;

    .program-bg {
        position: absolute;
        top: 0;
        left: 0;
        background-color: $theme-color-2;
        transition: all 500ms ease;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371 458"><path  d="M180.499 1.01957C228.479 0.655383 276.69 -1.7067 311.981 40.3475C348.649 84.0424 368.9 145.98 370.375 210.447C371.895 276.909 355.756 343.16 319.998 390.92C283.71 439.389 232.608 453.808 180.499 456.752C125.658 459.85 64.9802 460.19 28.2615 407.4C-7.46789 356.033 -0.110132 279.336 4.09606 210.447C7.86177 148.773 16.5925 85.8896 50.5519 42.3318C84.3879 -1.06785 132.853 1.38123 180.499 1.01957Z" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        width: 100%;
        height: 100%;
        z-index: -1;

        &.bg-2 {
            background-color: $theme-color;
        }

        &.bg-3 {
            background-color: $theme-color;
        }

        &.bg-3 {
            background-color: $white;
        }

        &.bg-4 {
            background-color: $bg-color;
        }
    }

    .program-image {
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308 237"><path fill-rule="evenodd" clip-rule="evenodd" d="M149.968 0.07171C188.87 -0.110783 227.96 -1.29441 256.574 19.7787C286.305 41.674 302.725 72.7107 303.921 105.015C305.153 138.318 292.067 171.516 263.075 195.448C233.652 219.736 192.218 226.961 149.968 228.436C105.502 229.989 56.3034 230.159 26.5315 203.707C-2.43828 177.967 3.52747 139.534 6.93789 105.015C9.99117 74.11 17.0702 42.5996 44.6048 20.773C72.0394 -0.974285 111.335 0.252935 149.968 0.07171Z" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        
        img {
            @include imgw;
        }
    }

    .program-content {
        padding: 30px 20px 0;

        @include breakpoint (max-sm){
            padding: 20px 20px 0;
        }

        h4 {
            margin-bottom: 5px;

            a {
                color: $white;
            }
        }

        span {
            color: $white;
            font-weight: 600;
            font-family: $heading-font;
        }

        p {
            color: $white;
            margin-top: 10px;
            margin-bottom: 30px;

            @include breakpoint (max-sm){
                margin-bottom: 15px;
            }
        }

        .arrow-icon {
            width: 60px;
            height: 55px;
            line-height: 55px;
            border-radius: 22px;
            background-color: $theme-color;
            display: inline-block;
            color: $white;
            @include transition;
            position: absolute;
            bottom: -50px;
            left: 50%;
            transform: translate(-50%,-50%);

            &:hover {
                background-color: $header-color;
            }

            &.color-2 {
                background-color: $header-color;

                &:hover {
                    background-color: $white;
                    color: $header-color;
                }
            }
        }

        &.style-2 {
            h4 {
                a {
                    color: $header-color;
                }
            }

            span {
                color: $theme-color;
            }

            p {
                color: $text-color;
            }
        }
    }

    @include breakpoint (max-sm){
        display: n;
    }
}

.program-section {
    position: relative;
    padding-bottom: 172px;

    @include breakpoint (max-xl){
        padding-bottom: 155px;
    }

    @include breakpoint (max-lg){
        padding-bottom: 120px;
    }

    .top-shape {
        position: absolute;
        top: 0;
        left: 0;
    }

    .bottom-shape {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .mask-shape {
        position: absolute;
        top: 15%;
        left: 5%;
    }

    .pencil-shape {
        position: absolute;
        bottom: 10%;
        left: 85px;
        animation: rounded 5s linear infinite;
    }

    .mask-shape-2 {
        position: absolute;
        top: 18%;
        right: 5%;
        animation: rounded 5s linear infinite;
    }

    .compass-shape {
        position: absolute;
        bottom: 10%;
        right: 85px;
        animation: rounded 5s linear infinite;
    }

    .love-shape {
        position: absolute;
        top: 40%;
        left: 0;
        animation: rounded 5s linear infinite;
    }

    .zebra-shape {
        position: absolute;
        top: 45%;
        right: 0;
    }
}

.program-box-items-2 {
    padding: 50px 30px 40px;
    position: relative;
    z-index: 9;
    max-width: 420px;
    text-align: center;
    margin: 30px auto;

    .program-bg {
        position: absolute;
        top: 0;
        left: 0;
        background-color: $theme-color-2;
        transition: all 500ms ease;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 288"><path fill-rule="evenodd" clip-rule="evenodd" d="M131.352 0.968405C166.359 0.739595 212.216 -6.12903 237.965 20.2925C264.719 47.745 268.813 92.0436 269.889 132.547C270.998 174.303 264.054 235.303 237.965 265.31C211.488 295.761 169.371 285.444 131.352 287.293C91.3384 289.24 47.0661 289.453 20.2754 256.287C-5.7936 224.014 -0.425215 175.827 2.64371 132.547C5.39126 93.7981 -4.50211 53.0434 20.2754 25.6771C44.9629 -1.5898 96.5877 1.19563 131.352 0.968405Z" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        width: 100%;
        height: 100%;
        z-index: -1;

        &.bg-2 {
            background-color: $theme-color;
        }

        &.bg-3 {
            background-color: #5866EB;
        }

        &.bg-4 {
            background-color: #F25334;
        }
    }

    .icon {
        font-size: 50px;
        color: $white;
    }

    .content {
        padding: 30px 20px 0;

        @include breakpoint (max-sm){
            padding: 20px 20px 0;
        }

        h4 {
            margin-bottom: 5px;

            a {
                color: $white;
            }
        }

        span {
            color: $white;
            font-weight: 600;
            font-family: $heading-font;
        }

        p {
            color: $white;
            margin-top: 10px;
            margin-bottom: 30px;

            @include breakpoint (max-sm){
                margin-bottom: 15px;
            }
        }

        .arrow-icon {
            width: 60px;
            height: 55px;
            line-height: 55px;
            border-radius: 22px;
            background-color: $theme-color-2;
            display: inline-block;
            color: $white;
            @include transition;
            position: absolute;
            bottom: -50px;
            left: 50%;
            transform: translate(-50%,-50%);
            border: 2px solid $white;
            box-shadow: $shadow;

            &:hover {
                background-color: $white;
                color: $header-color;
            }

            &.color-2 {
                background-color: $theme-color;

                &:hover {
                    background-color: $white;
                    color: $header-color;
                }
            }

            &.color-3 {
                background-color: #5866EB;

                &:hover {
                    background-color: $white;
                    color: $header-color;
                }
            }

            &.color-4 {
                background-color: #F25334;

                &:hover {
                    background-color: $white;
                    color: $header-color;
                }
            }
        }
    }
}

.program-section-2 {
    position: relative;

    .line-1 {
        position: absolute;
        top: 40%;
        right: 0%;
        animation: rounded 5s linear infinite;
    }
}

.clases-section {
    position: relative;
    margin-top: 120px;

    .array-button {
        @include breakpoint (max-xl4){
            display: none;
        }

        .array-prev {
            position: absolute;
            transform: translate(-50,-50%);
            top: 55%;
            left: 12%;
            background-color: $theme-color-2;
            color: $white;
            border: 2px solid $white;

            &:hover {
                background-color: $white;
                color: $theme-color;
            }
        }

        .array-next {
            position: absolute;
            transform: translate(-50,-50%);
            top: 55%;
            right: 12%;
            background-color: $theme-color-2;
            color: $white;
            border: 2px solid $white;

            &:hover {
                background-color: $white;
                color: $theme-color;
            }
        }
    }

    .clases-shape {
        height: 160px; 
        width: 100%;
        position: absolute;
        top: -120px;
        left: 0;
        right: 0;
        overflow-x: hidden;
        //z-index: -1;
    }
      
    .wave {
        position: absolute;
        width: 200%;
        height: 100%;
        animation: wave 10s -3s linear infinite;
        transform: translate3d(0, 0, 0);
        background-size: cover;
    }
    
    .wave:nth-of-type(2) {
        bottom: 0;
        animation: wave 18s linear reverse infinite;
    }
    
    .wave:nth-of-type(3) {
        bottom: 0;
        animation: wave 20s -1s linear infinite;
    } 
}

.clases-items {
    margin-top: 30px;
    position: relative;
    z-index: 9;

    br {
        @include breakpoint (max-xxl){
            display: none;
        }
    }

    .clases-bg {
        position: absolute;
        top: 0;
        left: 0;
        background-color: $white;
        transition: all 500ms ease;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370 456"><path d="M7.69014 27.8377C7.69014 27.8377 2.04067 39.7721 6.56025 199.448C11.0798 359.107 -34.2042 452.395 64.068 454.599C162.34 456.803 278.579 456.097 313.562 454.599C348.546 453.101 370 472.509 370 371.041C370 269.573 370 191.974 368.87 120.351C367.74 48.7271 376.694 13.544 336.103 10.9952C295.499 8.44648 190.533 3.96893 145.394 2.47068C100.256 0.972426 12.2097 -9.46369 7.69014 27.8377Z" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        width: 100%;
        height: 100%;
        z-index: -1;

        &.style-2 {
            background-color: #f0f0f073;
        }
    }

    .clases-image {
        padding: 25px 25px 0 25px;
        
        img {
            @include imgw;
        }
    }

    .clases-content {
        padding: 20px 30px;

        @include breakpoint (max-sm){
           padding: 15px 30px;
        }

        h4 {
            margin-bottom: 10px;

            a {
                &:hover {
                    color: $theme-color;
                }
            }
        }

        p {
            padding-bottom: 20px;
            border-bottom: 2px dotted $theme-color;

            @include breakpoint (max-sm){
                padding-bottom: 15px;
            }
        }

        .clases-schedule {
            margin-top: 30px;
            @include flex;
            justify-content: space-between;

            @include breakpoint (max-sm){
                margin-top: 15px;
            }

            li {
                font-weight: 600;
                color: $header-color;
                font-weight: $heading-font;

                span {
                    font-family: $body-font;
                    color: $theme-color;
                    font-weight: 14px;
                }
            }
        }
    }
}

.program-details-wrapper {
    .program-details-items {
        .details-image {
            img {
                @include imgw;
            }
        }

        .details-content {
            margin-top: 40px;

            .post {
                background-color: $theme-color;
                color: $white;
                padding: 4px 15px;
                border-radius: 8px;
                display: inline-block;
                margin-bottom: 20px;
            }

            h2 {
                font-size: 30px;
                margin-bottom: 20px;

                @include breakpoint (max-md){
                    font-size: 26px;
                }

                @include breakpoint (max-sm){
                    font-size: 24px;
                }
            }

            .details-author-area {
                @include flex;
                gap: 30px;
                border-top: 1px solid $border-color;
                border-bottom: 1px solid $border-color;
                padding: 20px 0;
                margin-bottom: 40px;
                margin-top: 30px;

                @include breakpoint (max-sm){
                    flex-wrap: wrap;
                    gap: 15px;
                    margin-bottom: 20px;
                    margin-top: 20px;
                }

                .author-items {
                    @include flex;
                    gap: 10px;
                }

                .class-list {
                    @include flex;
                    gap: 30px;

                    li {
                        i {
                            color: $theme-color;
                        }
                    }
                }
            }

            .list-items {
                margin-top: 20px;

                li {
                    &:not(:last-child){
                        margin-bottom: 10px;
                    }

                    i {
                        margin-right: 5px;
                        color: $theme-color;
                    }
                }
            }
        }
    }

    .details-list-area {
        padding: 30px 40px;
        border-radius: 10px;
        position: relative;
        z-index: 9;
        border: 1px solid $border-color;

        @include breakpoint (max-xl){
            padding: 30px 20px;
        }

        @include breakpoint (max-lg){
            padding: 30px 40px;
        }

        h3 {
            font-size: 24px;
            border-bottom: 1px solid $border-color;
            padding-bottom: 20px;
        }

        @include breakpoint (max-xl){
            margin-right: 0;
        }

        @include breakpoint (max-lg){
            margin-top: 0;
        }

        .details-list {
            margin-bottom: 30px;

            li {
                @include flex;
                justify-content: space-between;
                padding: 15px 0;
                border-bottom: 1px solid $border-color;
                

                span {
                    font-weight: 600 !important;
                    color: $header-color;

                    i {
                        color: $theme-color;
                    }
                }
            }
        }

        .theme-btn {
            padding: 19px 40px;

            @include breakpoint (max-xl){
                padding: 19px 25px;
                font-size: 14px;
            }

            @include breakpoint (max-lg){
                padding: 19px 40px;
                font-size: 16px;
            }

            &.border-style {
                border: 1px solid $theme-color;
                color: $theme-color;
                background-color: transparent;
                padding: 18px 40px;

                &::after,&::before {
                    background-color: $theme-color;
                }

                &:hover {
                    color: $white;
                }
            }
        }

        .social-icon {
            justify-content: center;
            gap: 15px;
            margin-top: 30px;

            a {
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                font-size: 16px;
                display: block;
                color: $theme-color;
                transition: all .4s ease-in-out;
                text-align: center;
                background-color: transparent;
                border: 1px solid $theme-color;

                    &:hover {
                        background-color: $theme-color;
                        color: $white;
                        border: 1px solid transparent
                    }
                }
        }
    }

    .program-author-items {
        @include flex;
        gap: 30px;
        padding: 30px;
        border: 1px solid $border-color;
        border-radius: 12px;
        margin-top: 23px;

        @include breakpoint (max-xl){
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
        }

        .thumb {
            max-width: 370px;

            img {
                @include imgw;
                border-radius: 10px;
            }
        }

        .content {
            max-width: 700px;
            @include breakpoint (max-xl){
                margin: 0 auto;
                text-align: center;
            }

            h2 {
                font-size: 30px;
                margin-bottom: 5px;

                @include breakpoint (max-sm){
                    font-size: 26px;
                }
            }

            span {
                margin-bottom: 20px;
                display: inline-block;

                @include breakpoint (max-sm){
                   margin-bottom: 10px;
                }
            }

            ul {
                margin-top: 20px;
                @include flex;
                gap: 50px;
                border-top: 1px solid $border-color;
                border-bottom: 1px solid $border-color;
                padding: 20px 0;

                @include breakpoint (max-xl){
                    flex-wrap: wrap;
                    justify-content: center;
                    text-align: center;
                    gap: 20px;
                }

                li {
                    color: $header-color;

                    i {
                        margin-right: 5px;
                    }

                    .color-star {
                        color: $theme-color;
                    }
                }
            }

            .social-icon {
                margin-top: 40px;
                gap: 15px;
                position: relative;
                z-index: 9;
                @include breakpoint (max-xl){
                    flex-wrap: wrap;
                    justify-content: center;
                }
                

                @include breakpoint (max-sm){
                    margin-top: 20px;
                }

            a {
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                font-size: 16px;
                display: block;
                color: $theme-color;
                transition: all .4s ease-in-out;
                text-align: center;
                background-color: transparent;
                border: 1px solid $theme-color;

                    &:hover {
                        background-color: $theme-color;
                        color: $white;
                        border: 1px solid transparent
                    }
                }
            }
        }
    }
}
