/* about intro area style */

.main-menu.menu-light>ul>li>a {
    color: var(--black);
}

.sticky .main-menu.menu-light>ul>li>a {
    color: var(--white);
}

.header-area.style-2 .open-offcanvas span{
    color:var(--black);
}

.sticky.header-area.style-2 .open-offcanvas span{
    color:var(--white);
}

/* data area style */
.data-area .data-area-inner {
    display: flex;
    gap: 80px;
    justify-content: space-between;
    align-items: flex-start;
}
@media only screen and (max-width: 991px) {
    .data-area .data-area-inner {
        flex-direction: column;
        gap: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .data-area .data-area-inner {
        gap: 30px;
    }
}
.data-area .section-content {
    max-width: 77%;
}
@media only screen and (max-width: 1199px) {
    .data-area .section-content {
        max-width: 715px;
    }
}
.data-area .section-content .section-title {
    max-width: 77%;
}
@media only screen and (max-width: 767px) {
    .data-area .section-content .section-title {
        max-width: 100%;
    }
}
.data-area .section-content .text {
    font-size: 18px;
    line-height: 1.44;
}
.data-area .section-content .title-wrapper {
    margin-bottom: 42px;
}
.data-area .section-content .text-and-graph {
    margin-bottom: 33px;
}

.data-area .data-progress {
    flex-grow: 1;
}
.data-area .data-progress p.title {
    font-size: 18px;
    line-height: 1;
    color: var(--black);
    text-transform: unset;
    font-weight: 600;
    padding-bottom: 9px;
}
.data-area .data-progress .progress-percent {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: var(--white);
    background-color: var(--black);
    padding: 9px 4px;
    border-radius: 4px;
    top: -25px;
}
.data-area .data-progress .progress-percent:after {
    position: absolute;
    content: "";
    width: 9px;
    height: 5px;
    background-color: var(--black);
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.data-area .data-progress .bar-container {
    height: 4px !important;
    background-color: #F0F0F0 !important;
    box-shadow: none !important;
}
.data-area .data-progress .bar {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 100%;
    border-radius: 25px;
    background-color: #FFCD4C !important;
}
.data-area .data-progress .sonny_progressbar {
    margin-bottom: 0;
}
.data-area .data-progress .progress__item:not(:last-child), .data-area .data-progress .progress__item-2:not(:last-child) {
    margin-bottom: 23px;
}
.data-area .data-progress .progress__item.d-analysis .progress-percent, .data-area .data-progress .d-analysis.progress__item-2 .progress-percent {
    inset-inline-start: calc(80% - 16px);
    inset-inline-end: auto;
}
.data-area .data-progress .progress__item.d-achivement .progress-percent, .data-area .data-progress .d-achivement.progress__item-2 .progress-percent {
    inset-inline-start: calc(90% - 16px);
    inset-inline-end: auto;
}
/* funfact area style  */
.funfact-area .section-title {
    max-width: 599px;
    text-align: center;
    margin: 0 auto;
}
.funfact-area .section-header {
    margin-bottom: 44px;
}
@media only screen and (max-width: 991px) {
    .funfact-area .section-header {
        margin-bottom: 34px;
    }
}
.funfact-area .funfact-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 0 -60px;
}
@media only screen and (max-width: 1919px) {
    .funfact-area .funfact-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        margin: 0 -30px;
    }
}
@media only screen and (max-width: 767px) {
    .funfact-area .funfact-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}
.funfact-area .funfact-wrapper .funfact-item {
    border-top: 1px solid #dcdcdc;
    border-inline-start: 1px solid #dcdcdc;
    padding: 60px 60px 0;
}
@media only screen and (max-width: 1919px) {
    .funfact-area .funfact-wrapper .funfact-item {
        padding: 30px 30px 0;
    }
}
@media only screen and (max-width: 991px) {
    .funfact-area .funfact-wrapper .funfact-item {
        border-bottom: 1px solid #dcdcdc;
        padding: 30px 30px 30px;
    }
}
.funfact-item .counts {
    display: flex;
}
.funfact-item .counts .item {
    width: 72px;
    height: 72px;
    border: 1px solid #06aaa8;
    background-color: #06aaa8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .funfact-item .counts .item {
        width: 60px;
        height: 60px;
    }
}
.funfact-item .counts .item:not(:first-child) {
    margin-inline-start: -14px;
}
@media only screen and (max-width: 767px) {
    .funfact-item .counts .item:not(:first-child) {
        margin-inline-start: -7px;
    }
}
.funfact-item .counts .item:first-child {
    background-color: #fecc00;
    border-color: #fecc00;
    font-size: 18px;
}
.funfact-item .title {
    font-size: 24px;
}
.funfact-item .title-wrapper {
    margin-top: 40px;
}
.funfact-item .text {
    font-size: 16px;
    line-height: 1.5;
}
.funfact-item .text-wrapper {
    margin-top: 19px;
}
@media only screen and (max-width: 1400px) {
    .funfact-item .title {
        font-size: 22px;
    }
    .funfact-item .text {
        font-size: 15px;
    }
    .funfact-item .counts .item {
        width: 65px;
        height: 65px;
    }
}
/* plan area style  */
.plan-area {
    background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.747)), url("../img/about/banner_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 117px;
}
.plan-area .wc-btn-group {
    margin: auto;
}
@media only screen and (max-width: 1919px) {
    .plan-area {
        padding-top: 87px;
    }
}
@media only screen and (max-width: 991px) {
    .plan-area {
        padding-top: 67px;
    }
}
@media only screen and (max-width: 767px) {
    .plan-area {
        padding-top: 47px;
    }
}
.plan-area .section-title {
    max-width: 60%;
    font-size: 60px;
    text-align: center;
    color: var(--white);
    margin: 0 auto;
    line-height: 1.1;
}
@media only screen and (max-width: 1400px) {
    .plan-area .section-title {
        max-width: 80%;
        font-size: 50px;
    }
}
.plan-area .title-wrapper {
    margin-top: 30px;
    margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
    .plan-area .title-wrapper {
        margin-bottom: 20px;
    }
    .plan-area .section-title {
        max-width: 100%;
        font-size: 30px;
    }
}
.plan-area .wc-btn-group {
    justify-content: center;
}
.plan-area .wc-btn-primary {
    background-color: var(--white);
    color: var(--primary);
}
.plan-area .wc-btn-primary:hover {
    background-color: var(--primary);
    color: var(--white);
}
.plan-area .wc-btn-play {
    background-color: var(--white);
}
.plan-area .wc-btn-play:hover {
    background-color: var(--primary);
}
.plan-area .wc-btn-play:hover i {
    color: var(--white);
}
.plan-area .wc-btn-play i {
    color: var(--primary);
}
.plan-area .btn-wrapper {
    text-align: center;
}
/* blog area style  */
.blog-area .counts {
    display: flex;
    margin-top: 53px;
}
@media only screen and (max-width: 991px) {
    .blog-area .counts {
        display: none;
    }
}
.blog-area .counts .item {
    width: 90px;
    height: 90px;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .blog-area .counts .item {
        width: 60px;
        height: 60px;
    }
}
.blog-area .counts .item:not(:first-child) {
    margin-inline-start: -20px;
}
@media only screen and (max-width: 767px) {
    .blog-area .counts .item:not(:first-child) {
        margin-inline-start: -10px;
    }
}
.blog-area .counts .item:first-child {
    background-color: #F5F5F5;
    border-color: #F5F5F5;
    font-size: 18px;
}
.blog-area .blog-wrapper>*:last-child .blog {
    padding-bottom: 0;
}
.blog-area .blog-wrapper-area {
    max-width: 60%;
}
@media only screen and (max-width: 1400px) {
    .blog-area .blog-wrapper-area {
        max-width: 70%;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area .blog-wrapper-area {
        max-width: 100%;
    }
}
.blog-area .blog {
    border-top: 1px solid #dcdcdc;
    padding-top: 45px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 1199px) {
    .blog-area .blog {
        padding-top: 35px;
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area .blog {
        padding-top: 25px;
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area .section-heading {
        display: flex;
        gap: 0 50px;
        flex-direction: row;
        align-items: flex-end;
    }
}
.blog-area .section-heading .text {
    font-size: 18px;
    line-height: 1.44;
    min-width: 290px;
    max-width: 315px;
}
.blog-area .section-heading .text-wrapper {
    margin-top: 23px;
}
.blog-area .section-title {
    max-width: 300px;
}
.blog-area .blog-area-inner {
    display: flex;
    gap: 30px 80px;
    justify-content: space-between;
    align-items: flex-start;
}
@media only screen and (max-width: 1400px) {
    .blog-area .blog-area-inner {
        gap: 30px 40px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area .blog-area-inner {
        flex-direction: column;
        align-items: normal;
    }
}
/* blog style */
.blog {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 27px;
    padding-bottom: 20px;
}
@media only screen and (max-width: 991px) {
    .blog {
        gap: 30px;
    }
}
@media (max-width: 575px) {
    .blog {
        flex-direction: column-reverse;
        gap: 20px;
    }
}
.blog:hover .wc-btn-icon i {
    transform: rotate(0);
}
.dir-rtl .blog:hover .wc-btn-icon i {
    transform: rotate(-180deg);
}
.blog .content-wrapper {
    flex-basis: 63%;
}
.blog .content-wrapper .btn-wrapper {
    margin-top: 23px;
}
.blog .content-wrapper .text {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;
}
.blog .author {
    display: flex;
    align-items: center;
    gap: 15px;
}
.blog .author .avatar img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
}
.blog .author .meta-title {
    font-size: 12px;
    display: inline-block;
    margin-top: 4px;
}
.blog .author .name {
    font-size: 22px;
    white-space: nowrap;
}
.blog .has-left-line {
    padding-inline-start: 25px;
}
.blog .has-left-line:before {
    width: 15px;
    color: var(--black);
}
.blog .title {
    font-size: 30px;
    line-height: 1;
}
@media only screen and (max-width: 1399px) {
    .blog .title {
        font-size: 24px;
    }
}
@media only screen and (max-width: 991px) {
    .blog .title {
        font-size: 22px;
    }
}
.blog .title span {
    font-weight: 600;
}
.blog .wc-btn-normal {
    font-size: 16px;
    gap: 12px;
    font-weight: 500;
    color: var(--secondary);
    text-transform: capitalize;
}
.experience_nature_area.style-1 {
    background-color: #1e1e1e;
}
.experience_nature_area.style-1 .specialization-inner {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .experience_nature_area.style-1 .specialization-inner {
        flex-wrap: wrap;
    }
}
.experience_nature_area.style-1 .specialization-thumb {
    flex: 1.2;
}
@media only screen and (max-width: 767px) {
    .experience_nature_area.style-1 .specialization-thumb {
        flex: unset;
    }
}
.experience_nature_area.style-1 .specialization-thumb img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.experience_nature_area.style-1 .specialization-content {
    flex: 1;
}
.experience_nature_area.style-1 .section-title-wrapper {
    max-width: 70%;
    margin-inline-start: 115px;
}
@media only screen and (max-width: 1919px) {
    .experience_nature_area.style-1 .section-title-wrapper {
        margin-inline-start: 50px;
    }
    .experience_nature_area.style-1 .section-title-wrapper {
        max-width: 78%;
    }
}
@media only screen and (max-width: 767px) {
    .experience_nature_area.style-1 .section-title-wrapper {
        margin-inline-start: 15px;
        margin-top: 30px;
        margin-bottom: 60px;
    }
    .experience_nature_area.style-1 .section-title-wrapper {
        max-width: 100%;
    }
}
.experience_nature_area.style-1 .section-subtitle {
    color: var(--white);
}
.experience_nature_area.style-1 .section-title {
    color: var(--white);
}
.experience_nature_area.style-1 .text {
    color: #999999;
}
.experience_nature_area.style-1 .text span {
    color: var(--white);
}
.experience_nature_area.style-1 .list-plus {
    margin-top: 23px;
}
.experience_nature_area.style-1 .list-plus li {
    color: var(--white);
}
.experience_nature_area.style-1 .list-plus li::before {
    top: -5px;
}
/* client area style  */
.client-area .content {
    max-width: 60%;
}
@media only screen and (max-width: 1199px) {
    .client-area .content {
        max-width: 400px;
    }
}
@media only screen and (max-width: 991px) {
    .client-area .content {
        max-width: 100%;
    }
}
.client-area .content .client-logos {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.client-area .content .client-logos img {
    max-height: 75px;
}
.client-area .content .text {
    font-size: 18px;
    line-height: 1.44;
}
.client-area .content .text-wrapper {
    margin-bottom: 53px;
}
.client-area .client-area-inner {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
@media only screen and (max-width: 1399px) {
    .client-area .client-area-inner {
        gap: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .client-area .client-area-inner {
        gap: 20px;
    }
}
@media (max-width: 575px) {
    .client-area .client-area-inner {
        gap: 30px;
        flex-direction: column;
    }
}