@use "../utilities" as *;

/**----------------------------------------
START: Home 10 CSS
----------------------------------------*/

.hero-10{
    background-color: #1F2B2A;
    position: relative;
    z-index: 1;
    overflow: hidden;
    .shapes{
        .shape-1{
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .shape-2{
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: -1;
            @include breakpoint(md){
                height: 100%;
            }
        }
        .shape-3{
            position: absolute;
            bottom: -83px;
            left: 0;
            width: 100%;
            height: auto;
            @include breakpoint(xxl){
                bottom: -30px;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
    .hero-img-wrap-7{
        @include breakpoint(xl){
            display: none;
        }
        .hero-img-1{
            position: absolute;
            bottom: 115px;
            left: 36px;
            @include breakpoint(xxxl){
                left: 0;
            }
            @include breakpoint(xxl){
                left: -80px;
            }
        }
        .hero-img-2{
            position: absolute;
            bottom: 0;
            right: 0;
            bottom: 115px;
            right: 36px;
            @include breakpoint(xxxl){
                right: 0;
            }
            @include breakpoint(xxl){
                bottom: 150px;
                right: -50px;
            }
        }
    }
}

.hero-content-10{
    padding: 155px 0 108px 0;
    position: relative;
    z-index: 5;
    @include breakpoint(lg){
        padding-bottom: 50px;
    }
    @include breakpoint(md){
        padding-top: 70px;
    }
    ul{
        list-style: none;
        @include flex-vertical-center;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 15px;
        column-gap: 35px;
        margin-bottom: 50px;
        margin-top: 30px;
        li{
            font-size: 20px;
            font-weight: 500;
            @include flex-vertical-center;
            column-gap: 10px;
            color: var(--ed-color-common-white);
            i{
                color: var(--ed-color-theme-primary);
            }
        }
    }
    .hero-form{
        @include breakpoint(xxl){
            max-width: 600px;
        }
        .form-control{
            padding-left: 30px;
        }
    }
}

// Category CSS

.cat-item-3{
    background-color: var(--ed-color-common-white);
    .icon{
        background-color: #F2F4F7;
        @include transition(all 0.3s ease-in-out)
    }
    &:hover{
        .icon{
            background-color: var(--ed-color-common-white);
        }
    }
}

.cat-card{
    background-color: var(--ed-color-grey-1);
    display: grid;
    align-items: center;
    grid-template-columns: 70px 1fr;
    grid-gap: 20px;
    padding: 20px;
    border: 1px solid var(--ed-color-border-1);
    border-radius: 6px;
    .icon{
        background-color: var(--ed-color-common-white);
        width: 70px;
        height: 70px;
        @include flex-center;
        box-shadow: 0px 4px 32px rgba(9, 51, 47, 0.08);
        border-radius: 6px;
    }
    .content{
        .title{
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        span{
            color: #6C706F;
            font-size: 14px;
            line-height: 1;
        }
    }
}


// About CSS

.about-section-10{
    background-color: var(--ed-color-grey-1);
    position: relative;
    z-index: 1;
    .shape-1{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
}

.about-img-wrap-10{
    position: relative;
    max-width: 592px;
    width: 100%;
    height: 594px;
    .about-img-1{
        position: absolute;
        top: 0;
        left: 0;
        max-width: 490px;
        width: 100%;
        height: 467px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
        }
    }
    .about-img-2{
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 363px;
        width: 100%;
        height: 375px;
        border-radius: 200px 200px 20px 20px;
        border: 5px solid var(--ed-color-common-white);
        overflow: hidden;
        box-shadow: 0px 4px 35px rgba(10, 27, 25, 0.28);
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 200px 200px 20px 20px;
        }
    }
}

.about-content-10{
    position: relative;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    .about-tab{
        .nav-tabs{
            background-color: var(--ed-color-common-white);
            display: inline-flex;
            padding: 10px;
            border-radius: 100px;
            border: 1px solid #E0E5EB;
            @include breakpoint(sm){
                border-radius: 0;
                justify-content: center;
            }
            .nav-item{
                .nav-link{
                    background-color: var(--ed-color-grey-1);
                    color: var(--ed-color-heading-primary);
                    font-size: 16px;
                    font-weight: 600;
                    padding: 10px 20px;
                    border-color: #E0E5EB;
                }
            }
        }
        .tab-content{
            .tab-pane{
                .about-list{
                    li{
                        span{
                            background-color: var(--ed-color-common-white);
                            border: 1px solid #E0E5EB;
                            box-shadow: 0px 8px 19px rgba(13, 40, 38, 0.15);
                        }
                    }
                }
            }
        }
    }
}

// Feature Course

.feature-course-4{
    background-color: var(--ed-color-theme-primary);
    position: relative;
    z-index: 1;
    .shape{
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
}


// Course Carousel

.course-carousel-area-2{
    background-color: var(--ed-color-grey-1);
}

// Appointment CSS

.appointment-wrap{
    background-color: var(--ed-color-grey-1);
    padding: 100px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
    @include breakpoint(lg){
        padding: 100px 50px;
    }
    @include breakpoint(md){
        padding: 60px 40px;
    }
    @include breakpoint(md){
        padding: 40px 20px;
    }
    .shape{
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
    .appointment-top{
        padding-bottom: 70px;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--ed-color-common-white);
        @include breakpoint(sm){
            margin-bottom: 40px;
            padding-bottom: 40px;
        }
        .section-heading{
            p{
                max-width: 560px;
                width: 100%;
            }
        }
        .appointment-list{
            padding-left: 15px;
            li{
                color: var(--ed-color-heading-primary);
                font-size: 16px;
                font-weight: 400;
                &:not(:last-of-type){
                    margin-bottom: 10px;
                }
            }
        }
    }
    .appointment-sponsor-area{
        margin-bottom: 80px;
        @include breakpoint(sm){
            margin-bottom: 40px;
        }
        .sponsor-title{
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .sponsor-item{
            height: 80px;
            @include breakpoint(sm){
                height: 60px;
            }
        }
    }
    .appointment-form{
        background-color: var(--ed-color-common-white);
        padding: 40px;
        border-radius: 15px;
        @include breakpoint(sm){
            padding: 20px 20px;
        }
        .form-item{
            .form-control{
                padding: 12px 20px;
                border: 1px solid var(--ed-color-border-1);
                border-radius: 5px;
                box-shadow: none;
                margin-bottom: 20px;
                color: var(--ed-color-text-body);
                @include tp-placeholder{
                    color: var(--ed-color-text-body);
                }
                &.nice-select{
                    font-size: 16px;
                    color: var(--ed-color-text-body);
                    width: 100%;
                    height: auto;
                    line-height: inherit;
                    padding: 12px 20px;
                }
            }
        }
    }
}

.appointment-btn{
    .ed-primary-btn{
        width: 100%;
        border-radius: 5px;
    }
}


// Faq CSS

.faq-content-10{
    max-width: 545px;
    width: 100%;
    @include breakpoint(md){
        max-width: 100%;
        margin-bottom: 40px;
    }
}

.faq-thumb{
    max-width: 728px;
    width: 100%;
    height: 505px;
    border-radius: 15px;
    position: relative;
    @include breakpoint(sm){
        height: 350px;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
    }
    .video-btn{
        width: 132px;
        height: 132px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(4.5px);
        @include flex-center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        a{
            background: rgba(255, 255, 255, 0.05);
            color: var(--ed-color-common-white);
            font-size: 30px;
            backdrop-filter: blur(30px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 100px;
            width: 100px;
            border-radius: 50%;
            @include flex-center;
        }
    }
}


/* !END: Home 10 CSS */