.header-area {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100%
}

@media(min-width: 1400px) {
    .header-area .container {
        max-width:1850px
    }
}

.header-area .header-area__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    height: 100px;
    border-bottom: 1px solid var(--border)
}

@media only screen and (max-width: 1919px) {
    .header-area .header-area__inner {
        height:80px
    }
}

.header-area .header-area__inner>*:nth-child(1) {
    margin-inline-end:auto}

@media(max-width: 575px) {
    .header-area .header__meta {
        display:none
    }
}

.dir-rtl .header-area .header__navicon img {
    transform: rotateY(180deg)
}

.hero-area-inner {
    position: relative;
    z-index: 1;
    padding-top: 120px;
    padding-bottom: 80px
}

@media only screen and (max-width: 1919px) {
    .hero-area-inner {
        padding-top:147px;
        padding-bottom: 44px
    }
}

.hero-area-inner .shape-1 {
    position: absolute;
    top: 200px;
    inset-inline-end: calc(100% + 133px);
    width: 132px;
    z-index: -1
}

.hero-area-inner .shape-2 {
    position: absolute;
    bottom: 0;
    inset-inline-start: calc(100% - 180px);
    width: 494px;
    z-index: -1
}

@media only screen and (max-width: 1919px) {
    .hero-area-inner .shape-2 {
        width:314px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-inner .shape-2 {
        display:none
    }
}

.dir-rtl .hero-area-inner .shape-2 img {
    transform: rotateY(180deg)
}

.hero-area .section-subtitle {
    font-size: 20px;
    text-transform: uppercase;
    font-family: var(--font_plusjakartasans);
    color: var(--primary);
    font-weight: 500;
    display: inline-flex;
    gap: 15px;
    align-items: center
}

@media only screen and (max-width: 1199px) {
    .hero-area .section-subtitle {
        font-size:16px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area .section-subtitle img {
        height:10px
    }
}

.hero-area .section-title {
    font-size: 80px;
    line-height: 1.1;
    /* font-weight: 300; */
    margin-top: 30px;
    font-family: var(--font_teko);
}

@media only screen and (max-width: 1919px) {
    .hero-area .section-title {
        font-size:80px
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area .section-title {
        font-size:60px
    }
}

@media only screen and (max-width: 991px) {
    .hero-area .section-title {
        font-size:50px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area .section-title {
        font-size:40px
    }
}

.hero-area .section-content {
    display: grid;
    gap: 30px 60px;
    grid-template-columns: auto 480px
}

@media only screen and (max-width: 991px) {
    .hero-area .section-content {
        grid-template-columns:auto 340px
    }
}

@media only screen and (max-width: 767px) {
    .hero-area .section-content {
        grid-template-columns:auto
    }
}

.hero-area .section-content .title-wrapper {
    margin-top: 33px
}

.hero-area .section-content .customer-box .text {
    line-height: 1.22;
    max-width: 193px;
    margin-top: 15px
}

.hero-area .section-content .customer-box .text span {
    color: var(--primary)
}

.hero-area .section-content .text-wrapper {
    margin-top: 59px
}

@media only screen and (max-width: 1919px) {
    .hero-area .section-content .text-wrapper {
        margin-top:39px
    }
}

.hero-area .section-content .btn-wrapper {
    margin-top: 33px
}

.image-area {
    background-image: linear-gradient(180deg, #fff 0%, #fff 200px, #cbfbef 200px, #f8fef2 100%)
}

.dark .image-area {
    background-image: linear-gradient(180deg, var(--black) 0%, var(--black) 200px, var(--theme) 200px, var(--theme) 100%)
}

@media only screen and (max-width: 1919px) {
    .image-area {
        background-image:linear-gradient(180deg, #fff 0%, #fff 120px, var(--theme) 120px, var(--theme) 100%)
    }

    .dark .image-area {
        background-image: linear-gradient(180deg, var(--black) 0%, var(--black) 200px, var(--theme) 200px, var(--theme) 100%)
    }
}

@media only screen and (max-width: 767px) {
    .image-area {
        background-image:linear-gradient(180deg, #fff 0%, #fff 70px, var(--theme) 70px, var(--theme) 100%)
    }

    .dark .image-area {
        background-image: linear-gradient(180deg, var(--black) 0%, var(--black) 200px, var(--theme) 200px, var(--theme) 100%)
    }
}

.image-area .video-btn {
    width: 200px;
    height: 200px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center
}

.dark .image-area .video-btn {
    color: var(--black)
}

@media only screen and (max-width: 1919px) {
    .image-area .video-btn {
        width:120px;
        height: 120px;
        font-size: 20px
    }
}

@media only screen and (max-width: 767px) {
    .image-area .video-btn {
        width:70px;
        height: 70px;
        font-size: 14px
    }
}

.image-area .image-wrapper-box {
    position: relative;
    margin-inline-end:calc((100vw + 24px - var(--container-max-widths))/-2)}

.image-area .video-button-box {
    position: absolute;
    top: 0;
    inset-inline-start: 0
}

.features-area {
    padding-top: 120px;
    padding-bottom: 115px;
    background: linear-gradient(180deg, #f8fef2 200px, #cbfbef 100%)
}
.features-area.four_day_workshop {
    padding-top: 2px;
    background: #fff;
}

@media only screen and (max-width: 1919px) {
    .features-area {
        padding-top:90px;
        padding-bottom: 83px
    }
}

.features-wrapper {
    display: grid;
    gap: 60px 60px;
    grid-template-columns: repeat(3, 300px);
    justify-content: space-between
}
.four_day_workshop .features-wrapper{
    grid-template-columns: repeat(2, auto);
    gap: 40px 75px;
}

@media only screen and (max-width: 1199px) {
    .features-wrapper {
        grid-template-columns:repeat(3, 240px)
    }
}

@media only screen and (max-width: 991px) {
    .features-wrapper {
        grid-template-columns:repeat(2, 310px)
    }
}

@media only screen and (max-width: 767px) {
    .features-wrapper {
        grid-template-columns:repeat(1, 1fr)
    }
    .four_day_workshop .features-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

.feature-box .title {
    font-size: 26px;
    line-height: 1.1;
    color: var(--black)
}

.feature-box .title span {
    font-weight: 700
}

.feature-box .content {
    margin-top: 44px
}
.four_day_workshop .feature-box .title {
    font-family: var(--font_teko);
}
.four_day_workshop .feature-box .content {
    margin-top: 10px;
    width: calc(100% - 130px);
}

.four_day_workshop .feature-box{
    display: flex;
    gap: 30px;
    padding-bottom: 30px;
    position: relative;
}
.four_day_workshop .feature-box::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, #489d9c, transparent);
}
.four_day_workshop .feature-box .thumb{
    width: 100px;
    background-color: #ffffff;
    padding: 20px;
    height: 100px;
    border-radius: 50%;
    box-shadow: inset 0px 0px 20px #c9cacd;
}

@media only screen and (max-width: 767px) {
    .feature-box .content {
        margin-top:30px
    }
    .four_day_workshop .feature-box{
        display: block;
    }
    .four_day_workshop .feature-box .content {
        width: 100%;
    }
}

.feature-box .text {
    color: var(--black);
    margin-top: 28px
}
.four_day_workshop .feature-box .text {
    margin-top: 10px;
}

@media only screen and (max-width: 1919px) {
    .feature-box .text {
        margin-top:18px
    }
}


.team-details-area-inner {
    padding-top: 217px
}

@media only screen and (max-width: 1919px) {
    .team-details-area-inner {
        padding-top:147px
    }
}

@media only screen and (max-width: 1199px) {
    .team-details-area-inner {
        padding-top:127px
    }
}

@media only screen and (max-width: 991px) {
    .team-details-area-inner {
        padding-top:127px
    }
}

.team-details-area .team-thumb {
    display: inline-block;
    position: relative;
    padding-top: 20px;
    padding-inline-start:150px;z-index: 1;
    max-width: 605px
}

@media only screen and (max-width: 767px) {
    .team-details-area .team-thumb {
        padding-inline-start:130px
    }
}

@media(max-width: 575px) {
    .team-details-area .team-thumb {
        padding-inline-start:0px;
        padding-top: 0
    }
}

.dir-rtl .team-details-area .team-thumb .main-image {
    transform: rotateY(180deg)
}

.team-details-area .team-thumb .shape-1 {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: -1;
    width: 62%
}

.dir-rtl .team-details-area .team-thumb .shape-1 {
    transform: rotateY(180deg)
}

@media(max-width: 575px) {
    .team-details-area .team-thumb .shape-1 {
        display:none
    }
}

.team-details-area .content-last {
    padding-top: 60px
}

@media only screen and (max-width: 991px) {
    .team-details-area .content-last {
        padding-top:0
    }
}

.team-details-area .section-content {
    display: grid;
    gap: 40px 60px;
    grid-template-columns: auto 1fr
}

@media only screen and (max-width: 1199px) {
    .team-details-area .section-content {
        grid-template-columns:500px 1fr
    }
}

@media only screen and (max-width: 991px) {
    .team-details-area .section-content {
        grid-template-columns:1fr
    }
}

.team-details-area .section-content .section-subtitle {
    font-size: 24px;
    line-height: 1;
    display: inline-block
}

.team-details-area .section-content .subtitle-wrapper {
    margin-top: 26px
}

.team-details-area .section-content .text-wrapper {
    margin-top: 36px;
    margin-bottom: 8px
}

.team-details-area .section-content .text-wrapper .text:not(:first-child) {
    margin-top: 25px
}

.team-details-area .section-content .meta-wrapper {
    margin-top: 40px
}

.team-details-area .section-content .meta-wrapper .title {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 22px;
    display: inline-block
}

.team-details-area .section-content .portfolio-list {
    display: flex;
    gap: 10px
}

.team-details-area .section-content .portfolio-list a {
    font-size: 14px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 30px;
    display: inline-block
}

.team-details-area .section-content .social-links {
    display: flex;
    gap: 20px
}

.team-details-area .section-content .social-links a {
    color: var(--secondary)
}

.team-details-area .section-content .social-links a:hover {
    color: var(--primary)
}


/*
.counter-area .section-header {
    display: grid;
    gap: 20px 70px;
    grid-template-columns: auto 770px;
    justify-content: flex-end;
    margin-inline-end:80px;margin-bottom: 89px
}

@media only screen and (max-width: 1919px) {
    .counter-area .section-header {
        margin-inline-end:50px;
        margin-bottom: 59px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area .section-header {
        grid-template-columns:auto 690px
    }
}

@media only screen and (max-width: 991px) {
    .counter-area .section-header {
        grid-template-columns:auto
    }
}

@media only screen and (max-width: 767px) {
    .counter-area .section-header {
        margin-inline-end:0;
        margin-bottom: 39px
    }
}

@media(max-width: 575px) {
    .counter-area .section-header {
        justify-content:center
    }
}

.counter-area .section-header .text {
    max-width: 251px
}

.counter-area .content-last {
    display: flex;
    align-items: center;
    gap: 20px 110px
}

@media(max-width: 575px) {
    .counter-area .content-last {
        flex-direction:column;
        align-items: flex-start
    }
}

.counter-area .section-title {
    font-size: 120px;
    max-width: 416px
}

@media only screen and (max-width: 1919px) {
    .counter-area .section-title {
        font-size:100px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area .section-title {
        font-size:46px
    }
}

@media only screen and (max-width: 991px) {
    .counter-area .section-title {
        font-size:40px
    }
}

@media only screen and (max-width: 767px) {
    .counter-area .section-title {
        font-size:35px
    }
}

.counter-area .section-subtitle {
    font-size: 18px;
    font-family: var(--font_plusjakartasans);
    color: var(--primary)
}

.counter-area .section-subtitle span {
    font-weight: 700
}

.counter-area .subtitle-wrapper {
    margin-top: 20px
}

.counter-area .text-wrapper {
    margin-top: 20px
}

.counter-item {
    width: 380px;
    height: 380px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 30px;
    text-align: center
}

@media only screen and (max-width: 1399px) {
    .counter-item {
        width:340px;
        height: 340px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-item {
        width:260px;
        height: 260px
    }
}

.counter-item .number {
    font-size: 100px
}

@media only screen and (max-width: 1399px) {
    .counter-item .number {
        font-size:80px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-item .number {
        font-size:60px
    }
}

.counter-item .text {
    font-size: 20px;
    font-family: var(--font_plusjakartasans);
    color: var(--primary);
    margin-top: 15px
}

.counter-item .text span {
    font-weight: 700
}

.counter-wrapper {
    display: flex
}

@media only screen and (max-width: 767px) {
    .counter-wrapper {
        display:grid;
        grid-template-columns: auto auto
    }
}

@media(max-width: 575px) {
    .counter-wrapper {
        grid-template-columns:auto;
        justify-content: center
    }
}

.counter-wrapper>*:not(:first-child) {
    margin-inline-start:-70px}

@media only screen and (max-width: 1199px) {
    .counter-wrapper>*:not(:first-child) {
        margin-inline-start:-30px
    }
}

@media only screen and (max-width: 767px) {
    .counter-wrapper>*:not(:first-child) {
        margin-inline-start:0px
    }
} */
























.hero_sec_abt .hero-area-inner {
    padding-top: 210px;
    padding-bottom: 80px
}

@media only screen and (max-width: 1919px) {
    .hero_sec_abt .hero-area-inner {
        padding-top:178px;
        padding-bottom: 83px
    }
}

@media only screen and (max-width: 1399px) {
    .hero_sec_abt .hero-area-inner {
        padding-top:158px;
        padding-bottom: 63px
    }
}

@media only screen and (max-width: 1199px) {
    .hero_sec_abt .hero-area-inner {
        padding-top:128px;
        padding-bottom: 53px
    }
}

.hero_sec_abt .section-title {
    text-align: center;
    font-family: var(--font_teko);
    letter-spacing: 0.5px;
}
.hero_sec_abt .section-title span{
    background: linear-gradient(0deg, #374bac, #58ef8e);
    /* background: linear-gradient(0deg, #5270ff, #58ef8e); */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media only screen and (max-width: 767px) {
    .hero_sec_abt .section-title {
        text-align:start
    }
}

.hero_sec_abt .section-content .text {
    max-width: 500px
}

.hero_sec_abt .section-content .section-subtitle {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    text-transform: uppercase;
    color: var(--primary)
}

.hero_sec_abt .section-content .section-subtitle.has-right-line {
    padding-inline-end:100px}

.hero_sec_abt .section-content .section-subtitle.has-right-line:after {
    width: 80px
}

.hero_sec_abt .section-content .content-last {
    display: grid;
    gap: 20px 40px;
    grid-template-columns: auto auto;
    justify-content: center;
    margin-top: 44px
}

@media only screen and (max-width: 1399px) {
    .hero_sec_abt .section-content .content-last {
        margin-top:34px
    }
}

@media only screen and (max-width: 1199px) {
    .hero_sec_abt .section-content .content-last {
        margin-top:24px
    }
}

@media only screen and (max-width: 991px) {
    .hero_sec_abt .section-content .content-last {
        grid-template-columns:auto
    }
}

@media only screen and (max-width: 767px) {
    .hero_sec_abt .section-content .content-last {
        justify-content:start
    }
}

.hero_sec_abt .section-content .subtitle-wrapper {
    margin-top: 4px
}

.counter-area-inner {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 870px
}

@media only screen and (max-width: 1919px) {
    .counter-area-inner {
        grid-template-columns:1fr 670px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area-inner {
        grid-template-columns:1fr
    }
}

.counter-area-abt .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.counter-area-abt .counter-wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr
}

@media(max-width: 575px) {
    .counter-area-abt .counter-wrapper {
        grid-template-columns:1fr
    }
}

.counter-area-abt .counter-box {
    padding: 46px 50px 32px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fbf9f9;
    position: relative;
    z-index: 1
}

@media only screen and (max-width: 1919px) {
    .counter-area-abt .counter-box {
        padding:36px 40px 22px
    }
}

.dark .counter-area-abt .counter-box {
    background-color: #1b1b1b
}

.counter-area-abt .counter-box:before {
    content: url(../imgs/shape/img-s-46.webp);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

.dir-rtl .counter-area-abt .counter-box:before {
    transform: rotateY(180deg)
}

.dark .counter-area-abt .counter-box:before {
    content: url(../imgs/shape/img-s-46-light.webp)
}

.counter-area-abt .counter-box .text {
    font-size: 24px;
    line-height: 1.26
}

@media only screen and (max-width: 1919px) {
    .counter-area-abt .counter-box .text {
        font-size:20px
    }
}

.counter-area-abt .counter-box .number {
    font-size: 100px;
    line-height: 1;
    margin-top: 60px
}

@media only screen and (max-width: 1919px) {
    .counter-area-abt .counter-box .number {
        font-size:70px
    }
}

.counter-area-abt .counter-box.dark {
    background-color: var(--black)
}

.dark .counter-area-abt .counter-box.dark {
    background-color: #1b1b1b
}

.counter-area-abt .counter-box.dark:before {
    content: url(../imgs/shape/img-s-46-light.webp)
}




/* ------------------ */
.features-area-abt{
    background-color: #f7f7f7;
}
.features-area-abt .section-title {
    max-width: 750px;
    text-indent: 35px;
    margin-top: -10px;
    font-family: var(--font_teko);
}

@media(min-width: 992px) {
    .features-area-abt .section-title {
        /* font-size:36px */
    }
}

@media only screen and (max-width: 767px) {
    .features-area-abt .section-title {
        text-indent:0
    }
}

.features-area-abt .section-content {
    margin-top: 50px;
    display: grid;
    gap: 20px 60px;
    grid-template-columns: auto 1080px;
    justify-content: space-between
}

@media only screen and (max-width: 1919px) {
    .features-area-abt .section-content {
        margin-top:60px
    }
}

@media only screen and (max-width: 1399px) {
    .features-area-abt .section-content {
        grid-template-columns:auto 920px
    }
}

@media only screen and (max-width: 1199px) {
    .features-area-abt .section-content {
        grid-template-columns:1fr;
        margin-top: 30px
    }
}

@media only screen and (max-width: 1199px) {
    .features-area-abt .section-content .shape {
        display:none
    }
}

.dir-rtl .features-area-abt .section-content .shape img {
    transform: rotateY(180deg)
}

.features-area-abt .section-content .thumb {
    position: relative
}

.features-area-abt .section-content .thumb .main-image {
    border-radius: 0 0 300px 0
}

.dir-rtl .features-area-abt .section-content .thumb .main-image {
    border-radius: 0 0 0 300px
}

@media only screen and (max-width: 991px) {
    .features-area-abt .section-content .thumb .main-image {
        border-radius:0
    }
}

.features-area-abt .section-content .thumb .shape-1 {
    position: absolute;
    inset-inline-end: 17px;
    bottom: -20px
}

.dir-rtl .features-area-abt .section-content .thumb .shape-1 img {
    transform: rotateY(180deg)
}

.features-area-abt .section-content .text-wrapper {
    margin-top: 60px;
    display: grid;
    gap: 23px 80px;
    grid-template-columns: 1fr 1fr
}

.features-area-abt .section-content .text-wrapper h4{
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 10px;
}

@media only screen and (max-width: 1399px) {
    .features-area-abt .section-content .text-wrapper {
        margin-top:40px
    }
}

@media only screen and (max-width: 991px) {
    .features-area-abt .section-content .text-wrapper {
        grid-template-columns:1fr
    }
}
/* ------------------ */








.practical-area-inner {
    display: grid;
    grid-template-columns: 1fr 43%
}

@media only screen and (max-width: 1199px) {
    .practical-area-inner {
        grid-template-columns: 1fr 47%
    }
}

@media only screen and (max-width: 991px) {
    .practical-area-inner {
        grid-template-columns: 1fr
    }
}

.practical-area .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.practical-area .section-content {
    padding: 100px 80px;
    position: relative;
    z-index: 1
}

@media only screen and (max-width: 1199px) {
    .practical-area .section-content {
        padding: 60px 50px
    }
}

@media(max-width: 575px) {
    .practical-area .section-content {
        padding: 60px 30px
    }
}

.practical-area .section-content .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1
}

.practical-area .section-content .bg:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, .85);
    top: 0;
    inset-inline-start: 0
}

.practical-area .section-content .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.practical-area .section-content .text-wrapper {
    margin-top: 160px;
    color: #a9a9a9;
    line-height: 1.5;
    font-size: 18px;
}
.practical-area .section-content .text-wrapper b{
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    font-family: var(--font_teko);
}
.practical-area .section-content .text-wrapper ul{
    margin-bottom: 20px;
}
.practical-area .section-content .text-wrapper ul li span{
    color: #fff;
}

@media only screen and (max-width: 1919px) {
    .practical-area .section-content .text-wrapper {
        margin-top: 123px
    }
}

@media only screen and (max-width: 1199px) {
    .practical-area .section-content .text-wrapper {
        margin-top: 43px
    }
}

@media only screen and (max-width: 991px) {
    .practical-area .section-content .text-wrapper {
        margin-top: 33px
    }
}

.practical-area .section-content .text {
    font-size: 40px;
    line-height: 1.1;
    max-width: 515px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 15px;
    font-family: var(--font_teko);
}

@media only screen and (max-width: 1199px) {
    .practical-area .section-content .text {
        font-size: 20px
    }
}

.practical-area .section-content .text span {
    /* color: var(--white) */
    font-weight: 600;
}

.practical-area .section-content .btn-wrapper {
    margin-top: 42px
}

@media only screen and (max-width: 991px) {
    .practical-area .section-content .btn-wrapper {
        margin-top: 32px
    }
}

.practical-area .section-content .section-title {
    color: var(--white);
    font-family: var(--font_teko);
}

.practical-area .section-content .wc-btn-primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black)
}
.h_line_practical{
    font-size: 20px;
    color: #a9a9a9;
}
.h_line_practical span{
    color: #fff;
}