/*=========================================================
Template Name:estudy-Real Estate & Property HTML5 Template
https://themeforest.net/user/website_stock/portfolio
Description: Description
Version: 1.0.0
Text Domain: estudy
Tags: 	agency, Business Agency, Business Consultant, business optimization, company website, consultancy, estudyng, estudyng Firm, corporate solutions, digital agency, financial analysis, market trends analysis, Strategic insights
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. estudy Header Top Menu Area Css
02. estudy Nav Menu Area Css 
03. estudy Slider Area Css
04. estudy Section Title Css
05. estudy Service Area css
06. estudy About Area Css
07. estudy Counter Area Css
08. estudy Testimonial Area Css
09. estudy Process Area Css
10. estudy Team Area Css
11. estudy Faq Area Css
12. estudy Call Do Section Css
13. estudy Form Box Css
14. estudy Blog Area Css
15. estudy footer Area Css
16. estudy Subscribe Area Css
17. estudy Prossess Ber Css
18. estudy Scrollup Section
19. estudy Breadcumb Area Css
20. estudy abouts_areas Css
21. estudy Pricing Section Css
22. estudy Contact  US Css
23. estudy Blog Sidber Widget CSS
24. estudy Search Box Css
25. estudy Loader Css
=======================*/



/*==================================================
 <-- estudy Header Area Css-->
===================================================*/

.header-area {
    position: relative;
    z-index: 9;
    /* The negative margin and top positioning have been removed */
}

.header-area::after {
   display: none; /* We don't need the white background effect anymore */
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This moves the items to the right */
}

.header-menu ul {
    list-style: none;
    display: inline-block;
}

.header-menu ul li {
    display: inline-block;
    margin-right: 35px; /* Increased space between items */
}

.header-menu ul li a {
    font-size: 18px; /* Made the font size bigger */
    color: #141615;
    font-weight: 500;
    position: relative;
    transition: .5s;
    padding: 36px 0;
    text-decoration: none;
    display: inline-block;
}

.header-menu ul li a:hover {
    color: #54b153;
}

.header-menu ul li a i {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -6px;
}

a.handbag:before {
    position: absolute;
    content: "0";
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    background: #54b153;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 100%;
    left: 5px;
    top: 36px;
    z-index: 9;
}

a.user {
    color: #54b153;
}


/* sticky menu css */

.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    right: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #FFF !important;
    z-index: 9999 !important;
    animation: fadeInDown 1s both 0.2s;
    padding: 0 30px;
}

.sticky-nav .logo {
    margin-top: 0;
}


/* sub menu */

.header-menu ul .sub-menu {
    background: #fff;
    position: absolute;
    top: 98%;
    border-radius: 5px;
    width: 250px;
    text-align: left;
    margin: 0;
    -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #54b153;
    opacity: 0;
    z-index: 11;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    overflow: hidden;
    padding: 10px 10px;
}

.header-menu ul li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
}

.header-menu ul .sub-menu ul li {
    display: inline-block;
    margin-left: 0;
    width: 100%;
}

.header-menu ul .sub-menu ul li a {
    padding: 8px 12px;
    text-align: left;
    width: 100%;
    display: inline-block;
    visibility: inherit !important;
    color: #003d4d;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    position: relative;
}

.header-menu ul .sub-menu ul li a:hover {
    color: #fff;
    background: #54b153;
}

.header-menu ul .sub-menu ul li a::before {
    position: absolute;
    top: 50%;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
    font-size: 14px;
    color: #FFF;
    transform: translateY(-50%) scale(0);
    -webkit-transition: 500ms;
    transition: 500ms;
}

.header-menu ul .sub-menu ul li a:hover::before{
    transform: translateY(-50%) scale(1);
}

/* header style two */

.header-area.bratcome {
    top: 0;
    margin-bottom: 0;
}


/* mobile menu */

.mobile-menu-area {
    display: none;
}


/*==================================================
 <-- estudy All Btn Css-->
===================================================*/

.nest-btn {
    display: inline-block;
    outline: none !important;
    text-decoration: none;
    color: #ffffff;
    border-radius: 35px;
    background: linear-gradient(90deg, #54b153 33.04%, #238321 246.73%);
    font-size: 18px;
    font-weight: 500;
    padding: 11px 40.5px 14px;
    transition: 500ms;
    overflow: hidden;
    z-index: 2;
    position: relative;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    -webkit-transition-delay: calc((var(--n) - 1) * 0.1s);
    -moz-transition-delay: calc((var(--n) - 1) * 0.1s);
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.nest-btn__text {
    position: relative;
    z-index: 2;
    top: 4px;
}

.nest-btn__shape {
    display: inline-block;
    position: absolute;
    width: 25%;
    height: 100%;
    background: #020d23;
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--b) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--b) - 1) * 0.1s);
    z-index: 1;
}

.nest-btn__shape:nth-child(1) {
    --b: 1;
}

.nest-btn__shape:nth-child(2) {
    --b: 2;
}

.nest-btn__shape:nth-child(3) {
    --b: 3;
}

.nest-btn__shape:nth-child(4) {
    --b: 4;
}

.nest-btn:hover {
    color: #ffff;
}

.nest-btn:hover .nest-btn__shape {
    transform: translateY(0) scale(2);
    -moz-transform: translateY(0) scale(2);
    -moz-transform: translateY(0) scale(2);
}

/* slider btn */

.main-btn.slider1 {
	display: inline-block;
	position: relative;
	overflow: hidden;
}

a.nest-btn.slider1 {
    background: #fff;
    color: #54b153;
    transition: 0.5s;
}

a.nest-btn.slider1:hover {
    color: #fff;
}


/*==================================================
 <-- estudy Banner Area Css-->
===================================================*/
.slider-area {
    background-image: url("../images/slider/bg1.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 940px;
    position: relative;
    z-index: 1;
    overflow: hidden; /* This new line will fix the overflow */
}

/* banner shape */

.baner-shape1 {
    position: absolute;
    bottom: 90px;
    right: 25%;
    z-index: 9;
}

.baner-shape2 {
    position: absolute;
    right: 180px;
}

.baner-shape3 {
    position: absolute;
    bottom: 60px;
    left: 40%;
}

.baner-shape4 {
    position: absolute;
    top: 130px;
}

/* slide content */

.slider-content {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    width: 38%;
    z-index: 9;
}

.slider-sub-title {
	position: relative;
	display: block;
	overflow: hidden;
}
.slider-main-title {
	position: relative;
	display: block;
	overflow: hidden;
}

.slider-main-title h1 {
    color: #FFF;
    font-size: 82px;
    font-weight: 700;
    line-height: 96px;
    margin-bottom: 60px;
}
/* ADD THIS NEW RULE */
.slider-sub-title h4 {
    color: #FFFFFF; /* Sets the text color to white */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* Adds a subtle shadow for readability */
}

.slider-thumb {
    position: absolute;
    bottom: 0;
    right: 5%; /* Positions from the right edge */
    overflow: hidden;
}

.slider-thumb img {
    max-width: 90%; /* Makes the image smaller */
    height: auto;  /* Maintains the aspect ratio */
}

/* video area css */

.video-area {
    height: 1000px;
    position: relative;
}

.video-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.4);
}

.video-area {
    height: 1000px;
    position: relative;
}

video.video-background {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

/*==================================================
 <-- estudy Section title Css-->
===================================================*/

.section-title-shape {
    display: inline-block;
    margin-right: 6px;
    position: relative;
    top: -4px;
}

.section-sub-title {
    display: inline-block;
    margin-bottom: 15px;
}

.section-sub-title h4 {
    color: #54b153;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    display: inline-block;
}

.section-main-title h2 {
    color: #002935;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 47px;
}

/*==================================================
 <-- estudy Catagories Area Css-->
===================================================*/

.catagories-area {
    padding: 120px 0 120px;
}

.catagories-single-box {
    text-align: center;
    margin: 15px;
}

.catagories-thumb {
    position: relative;
}

.catagories-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.catagories-single-box:hover .catagories-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.catagories-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.catagories-single-box:hover .catagories-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.catagories-text {
    position: absolute;
    top: 46%;
    left: 37%;
    transform: scale(0);
    transition: 0.5s;
}

.catagories-single-box:hover .catagories-text {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.catagories-text h4 {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
}

.catagories-title {
    margin-top: 30px;
}

.catagories-title h4 a {
    color: #002935;
    font-size: 24px;
    font-weight: 500;
    line-height: 26px;
    text-decoration: none;
    transition: 0.5s;
}

.catagories-title h4 a:hover {
    color: #54b153;
}

/* owl nav css */

.owl-nav {
    position: absolute;
    top: -90px;
    right: 100px;
    display: inline-flex;
}

.owl-prev i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    background: #54b153;
    color: #FFF;
    font-size: 20px;
    border-radius: 50%;
    margin-right: 20px;
}

.owl-next i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    background: #54b153;
    color: #FFF;
    font-size: 20px;
    border-radius: 50%;
}


/*==================================================
 <-- estudy Course Area Css-->
===================================================*/
.course-area {
    padding: 120px 0 92px;
}

/* course menu */

ul.course-menu {
    list-style: none;
    margin-left: 60px;
}

ul.course-menu li {
    margin-right: 46px;
}

ul.course-menu li a {
    color: #747474;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
}

ul.course-menu li a:hover {
    color: #54b153;
}

/* course single box */

.course-single-box {
    margin-bottom: 30px;
}

.course-thumb {
    position: relative;
    overflow: hidden;
}

.course-thumb img {
    width: 100%;
    transition: transform 0.4s ease; /* Animation for the zoom effect */
}

.course-single-box:hover .course-thumb img {
    transform: scale(1.05); /* Gently zooms the image on hover */
}


.course-icon {
    position: absolute;
    top: 20px;
    right: 20px;
}

.course-icon i {
    color: #FFFFFF;
    font-size: 24px;
}

.course-rating {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 41, 53, 0.65);
    width: 100%;
    height: 64px;
    padding: 0 20px 0;
    z-index: 1;
}

.course-rating::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
    left: 0;
    top: 0;
    z-index: -1;
    transition: 0.5s;
}

.course-single-box:hover .course-rating::before {
    width: 100%;
}

.course-admin {
    display: flex;
    align-items: center;
}

.course-shape {
    margin-right: 10px;
}

.course-shape-title h4 {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
}

.course-star i {
    color: #FFC107;
    margin-left: 5px;
}

.course-star span {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
}

.course-content {
    background: #FFF;
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10);
    padding: 18px 22px 15px;
}

.course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px;
}

.course-meta span {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
}

.course-meta i {
    color: #54b153;
    font-size: 17px;
    margin-right: 5px;
}

.course-title {
    border-bottom: 1px solid #E9E9E9;
    padding: 0px 0 30px;
    margin-bottom: 14px;
}

.course-title h4 a {
    color: #002935;
    font-size: 22px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
}

.course-single-box:hover .course-title h4 a {
    color: #54b153;
}

.course-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-price span {
    color: #002935;
    font-family: Jost;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.course-cart a {
    display: inline-block;
    text-decoration: none;
    color: #747474;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.course-cart a i {
    color: #54b153;
    font-size: 18px;
    margin-right: 5px;
}


/*==================================================
 <-- estudy Help Area Css-->
===================================================*/

.help-area {
    background: url(../images/resource/help-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0 100px;
    position: relative;
    z-index: 1;
}

.help-area::before {
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    right: 0;
    background: url(../images/resource/help-thumb.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 0;
    z-index: -1;
}

.help-sub-title h4 {
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 24px;
    font-size: 17px;
}

.help-main-title {
    margin-bottom: 32px;
}

.help-main-title h2 {
    color: #FFF;
    font-family: Jost;
    font-size: 45px;
    font-weight: 500;
    line-height: 55px;
}

.help-list span {
    display: block;
    margin-bottom: 15px;
    color: #fff;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.help-list span i {
    background: #54b153;
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    margin-right: 7px;
}

/* help items box */

.help-items-box {
    text-align: center;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
    display: inline-block;
    padding: 38px 88px 44px;
    margin-left: -10px;
    position: relative;
    overflow: hidden;
    perspective: 800px;
    perspective-origin: 0 0;
    z-index: 1;
}

.help-items-box::before {
    position: absolute;
    content: "";
    background: #002935;
    width: 100%;
    height: 100%;
    transform-origin: 0%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    transform: rotateY(90deg)perspective(400px);
    transition: .5s;
    z-index: -1;
}

.help-items-box:hover::before {
    opacity: 1;
    transform: rotateY(0deg)perspective(400px);
}

.help-items-content h6 {
    margin: 17px 0 17px;
    color: #fff;
    font-family: Jost;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    transition: .5s;
}

.help-items-content h4 a {
    color: #FFF;
    font-size: 24px;
    text-decoration: none;
    font-weight: 500;
    transition: .5s;
}


/*==================================================
 <-- estudy Choose Us Area Css-->
===================================================*/

.choose-us-area {
    padding: 120px 0 94px;
}

/* choose btn */

.main-btn.choose {
    text-align: right;
}

a.nest-btn.choose {
    border-radius: 0;
    padding: 17px 50px 18px;
}

/* choose single box */

.choose-single-box {
    border-radius: 2px;
    background: #FFF;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.10);
    padding: 50px 50px 59px;
    margin-bottom: 30px;
}

.choose-thumb {
    float: left;
    margin-right: 30px;
    position: relative;
}

.choose-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.choose-single-box:hover .choose-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.choose-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.choose-single-box:hover .choose-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.choose-content span {
    color: #54b153;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.choose-content h4 {
    color: #002935;
    font-family: Jost;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 11px 0 12px;
    transition: 0.5s;
}

.choose-single-box:hover .choose-content h4 {
    color: #54b153;
}

.choose-content p {
    color: #747474;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/*==================================================
 <-- estudy Team Area Css-->
===================================================*/
.team-area {
    background: #F9F8FF;
    padding: 120px 0 250px;
    margin-bottom: -170px;
}

.team-single-box {
    margin-bottom: 30px;
}

.team-thumb {
    position: relative;
    overflow: hidden;
}

.team-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.team-single-box:hover .team-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.team-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.team-single-box:hover .team-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.team-content {
    border-radius: 2px;
    background: #FFF;
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10);
    text-align: center;
    padding: 20px 0 30px;
}

.team-title h4 a {
    color: #002935;
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.5s;
}

.team-single-box:hover .team-title h4 a{
    color:#54b153;
}

.team-title span {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: 36px;
}

.team-social-icon {
    margin: 14px 0 18px;
}

.team-social-icon ul li {
    list-style: none;
    display: inline-block;
    margin-right: 13px;
}

.team-social-icon ul li a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    display: inline-block;
    line-height: 38px;
    color: #747474;
    transition: .5s;
    position: relative;
}

.team-social-icon a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: scale(0);
    border-radius: 50%;
    transition: 0.5s;
    color: #fff;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
}

.team-social-icon a:hover::before {
    transform: scale(1);
}

.team-social-icon a:hover {
    color: #fff;
}

.team-social-icon a i {
    position: relative;
    z-index: 2;
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes iconTranslateY {
    49% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    51% {
        opacity: 1;
    }
}

.team-social-icon a:hover i {
    animation: iconTranslateY 0.4s forwards;
}

.team-btn a {
    width: 267px;
    height: 47px;
    border-radius: 3px;
    background: rgba(87, 60, 255, 0.15);
    display: inline-block;
    line-height: 47px;
    text-decoration: none;
    color: #002935;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.team-btn a:hover{
    color: #fff;
}

.team-btn a::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    transform: scale(0);
    transition: 0.5s;
    z-index: -1;
}

.team-btn a:hover::before{
    transform: scale(1);
}


/*==================================================
 <-- Estudy Instractor Area Css-->
===================================================*/

.intractor-single-box {
    background: url(../images/resource/instractor-bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 30px 47px;
    position: relative;
}

.intractor-single-box.two {
    background: url(../images/resource/instractor-bg2.png);
    padding: 50px 60px 47px;
}

.intractor-single-box::before {
    background: rgba(255, 255, 255, 0.9);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.intractor-single-box:hover::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}


.instractor-content {
    position: relative;
    width: 63%;
}

.instractor-content h4 {
    color: #002935;
    font-size: 30px;
    font-weight: 500;
    line-height: normal;
}

.instractor-content p {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 16px 0 20px;
}

.instractor-content a {
    width: 256px;
    height: 51px;
    display: inline-block;
    text-decoration: none;
    border-radius: 3px;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
    text-align: center;
    line-height: 51px;
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.instractor-content a::before {
    position: absolute;
    content: "";
    background-color: #002935;
    width: 100%;
    height: 0%;
    left: 50%;
    top: 50%;
    border-radius: 3px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: -1;
    transition: all 500ms ease;
}

.instractor-content a:hover::before {
    height: 104%;
}

/*==================================================
 <-- estudy Video Gallery Area Css-->
===================================================*/

.video-gallery-area {
    padding: 120px 0 120px;
}

/* section title */

.section-main-title.video {
    margin-bottom: 47px;
}

.section-main-title.video h2 {
    margin-bottom: 0;
}

/* video single box */
.video-thumb {
    position: relative;
    overflow: hidden;
}

.video-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.video-single-box:hover .video-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.video-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.video-single-box:hover .video-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.video-content {
    position: absolute;
    bottom: 0;
    text-align: center;
}

.video-price {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 68px;
    height: 30px;
    border-radius: 30px;
    background: #54b153;
    text-align: center;
    padding: 3px 0;
}

.video-price h4 {
    color: #FFF;
    font-size: 16px;
    line-height: normal;
}

.video-content {
    position: absolute;
    bottom: 30px;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
}

.video-icon a {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    color: #fff;
    display: inline-block;
    line-height: 60px;
    font-size: 24px;
    border-radius: 50%;
    margin-bottom: 35px;
    transition: 0.5s;
}

.video-icon a:hover{
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
}

.video-icon a::before {
    content: "";
    border: 4px solid #ffffff;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 20%;
    margin: auto;
    transform: translate(-50%, -50%);
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    -webkit-animation: zoombig 3.25s linear infinite;
    animation: zoombig 3.25s linear infinite;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
  
.video-icon a::after {
    content: "";
    border: 4px solid #ffffff;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    -webkit-animation: zoombig 3.25s linear infinite;
    animation: zoombig 3.25s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.video-title h4 {
    color: #FFF;
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
}

.video-title span {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

/*==================================================
 <-- estudy Subscribe Area Css-->
===================================================*/

.subscribe-area {
    position: relative;
    width: 1036px;
    height: 216px;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
}

.subscribe-title h4 {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
}

/* subscribe form */

.subscribe-box input {
    width: 340px;
    height: 55px;
    border: 0;
    outline: 0;
    border-radius: 2px;
    padding: 0 20px;
}

.subscribe-box input::placeholder {
    padding: 0 20px;
    color: #C1C1C1;
    font-size: 16px;
    font-weight: 400;
}

.subscribe-button button {
    width: 180px;
    height: 55px;
    border: 0;
    outline: 0;
    background: #002935;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    transition: 0.5s;
}

.subscribe-button button:hover{
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
}

.subscribe-button i {
    position: relative;
    top: 3px;
}

/*==================================================
 <-- estudy Registration Area Css-->
===================================================*/

.registration-area {
    background: url(../images/resource/registration-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0 120px; /* Re-establish proper padding */
    position: relative;
    background-attachment: fixed;
}

/* section title */

.section-sub-title.registration h4 {
    color: #FFF;
    margin-bottom: 17px;
}

.section-main-title.registration h2 {
    color: #FFFF;
    margin-bottom: 20px;
}

.registration-discription p {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

/* registration items box css */

.registration-items-box {
    border-radius: 10px;
    background: var(--White, #FFF);
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10);
    position: absolute;
    padding: 60px 55px 60px;
    top: -38%;
    width: 572px;
    height: 679px;
}

.registration-items-title h4 {
    color: #002935;
    font-family: Jost;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: 58px;
    margin-bottom: 33px;
}

.registration-shape {
    position: absolute;
    right: 0;
    top: 28px;
}

.registration-form input {
    width: 457px;
    height: 58px;
    border-radius: 5px;
    background: #F6F6F6;
    border: 0;
    outline: 0;
    margin-bottom: 20px;
    padding: 0 20px;
}

.registration-form input::placeholder {
    color: rgba(112, 112, 112, 0.60);
    font-size: 14px;
    font-weight: 400;
}

.registration-form textarea {
    width: 457px;
    height: 141px;
    border-radius: 5px;
    background: #F6F6F6;
    outline: 0;
    border: 0;
    padding: 20px 20px;
    margin-bottom: 30px;
}

.registration-form textarea::placeholder {
    color: rgba(112, 112, 112, 0.60);
    font-size: 14px;
    font-weight: 400;
}

.registration-button button {
    width: 190px;
    height: 60px;
    outline: 0;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.registration-button button::before {
    position: absolute;
    content: "";
    background-color: #002935;
    width: 100%;
    height: 0%;
    left: 50%;
    top: 50%;
    border-radius: 3px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: -1;
    transition: all 500ms ease;
}

.registration-button button:hover::before{
    height: 100%;
}

/*==================================================
 <-- Estudy Testimonial Area Css-->
===================================================*/

.testimonial-area {
    padding: 120px 0 93px;
}

/* column css */

.column {
    -ms-flex: 25%;
    flex: 25%;
    max-width: 32%;
    /* padding: 0 16px; */
}

/* testi single box css */

.testi-single-box {
    margin-bottom: 30px;
}

.testi-thumb {
    position: relative;
    overflow: hidden;
}

.testi-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.testi-single-box:hover .testi-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.testi-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.testi-single-box:hover .testi-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.testi-content {
    position: absolute;
    bottom: 45px;
    left: 25px;
}

.testi-content h4 {
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 6px;
}

.testi-content span {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.testi-content p {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin: 20px 0 0;
}

/* testi items box */

.testi-items-box {
    background: #FFF;
    filter: drop-shadow(0px 0px 45px rgba(0, 0, 0, 0.10));
    position: relative;
    padding: 0 30px 32px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.testi-items-box.two {
    margin-top: 60px;
}

.testi-shape {
    position: relative;
    top: -37px;
    margin-bottom: -5px;
}

.testi-icon {
    position: absolute;
    right: 30px;
    top: 30px;
}

.testi-icon i {
    color: #FFC107;
}

.testi-item-content h4 {
    color: #002935;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.testi-item-content span {
    color: #54b153;
    font-size: 16px;
}

.testi-item-content p {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin: 20px 0px 0;
}

/*==================================================
 <-- Estudy Blog Area Css-->
===================================================*/

.blog-area{
    padding: 0px 0 120px;
}

.blog-area .container {
    max-width: 1600px;
}

/* blog single box */

.blog-single-box {
    margin-bottom: 30px;
}

.blog-thumb {
    position: relative;
    overflow: hidden;
    height: 300px; /* Set a fixed height for the blog thumbnail */
}

.blog-thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}

.blog-single-box:hover .blog-thumb::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
    opacity: 1;
}

.blog-thumb img {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.blog-single-box:hover .blog-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.blog-content {
    background: #FFF;
    box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10);
    padding: 25px 30px 30px;
}

.blog-shape {
    float: left;
    margin-right: 13px;
}

.blog-shape-title h6 {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.blog-text {
    margin: 17px 0 34px;
}

.blog-text h4 a {
    color: #002935;
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.5s;
}

.blog-single-box:hover .blog-text h4 a{
    color: #54b153;
}

.blog-text p {
    color: #747474;
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-top: 16px;
}

.blog-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Changed from 351px */
    height: 53px;
    background: #F8F8F8;
    padding: 0 25px;
    position: relative;
    z-index: 1;
}

.blog-bottom::before {
    position: absolute;
    content: "";
    width: 131px;
    height: 100%;
    background: url(../images/blog/shape3.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    z-index: -1;
}

.blog-bottom::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    background: url(../images/blog/shape4.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    z-index: -1;
    transition: 0.5s;
}

.blog-single-box:hover .blog-bottom::after{
    width: 131px;
}


.blog-comment h4 {
    color: #747474;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.blog-comment i {
    font-size: 14px;
    margin-right: 5px;
    color: #54b153;
}

.blog-btn a {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
}

.blog-btn i {
    position: relative;
    top: 3px;
}

/*==================================================
 <-- estudy Brand Area Css-->
===================================================*/
.brand-area {
    background: linear-gradient(180deg, #54b153 0%, #238321 100%);
    padding: 60px 0 60px;
}

.brand-itmes {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-thumb img {
    -webkit-transition: 500ms;
    transition: 500ms;
}
  
.brand-thumb img:hover {
    transform: scale(1.1);
  }

/*==================================================
 <-- estudy Footer Area Css-->
===================================================*/

.footer-area {
    padding: 120px 0 0px;
    background: #002935;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(219, 219, 219, 0.25);
    left: 0;
    bottom: 65px;
}

.footer-shape1 {
    position: absolute;
    bottom: 0;
    left: 0;
}

.footer-shape2 {
    position: absolute;
    right: 0;
    bottom: -20px;
}

/* footer widget */

.footer-wiget-text h4 {
    margin: 25px 0 22px;
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    width: 78%;
}

.footer-wiget-title h4 {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    line-height: 34px;
    font-weight: 600;
    padding: 0 0 32px;
    transition: .5s;
}

.footer-socilal-title h4 {
    opacity: 0.800;
    font-size: 22px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 16px;
    position: relative;
}

/* footer social */

.footer-social ul li {
    list-style: none;
    display: inline-block;
    margin-right: 7px;
}

.footer-social ul li a i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.footer-social ul li a i::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 100%;
    content: "";
    bottom: 0;
    background: #54b153;
    border-radius:50%;
    z-index: -1;
    transition: .5s;
    margin: auto;
}

.footer-social ul li a i:hover::after {
    width: 100%;
    left: 0;
}


.footer-wiget-menu ul {
    list-style: none;
}

.footer-wiget-menu ul li {
    list-style: none;
    margin-top: 0px;
}

.footer-wiget-menu ul li a {
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: .5s;
    margin: 0;
    line-height: 35px;
    color: #ffffff;
}

.footer-wiget-menu ul li a:hover {
    color: #54b153;
    margin-left: 10px;
}

.footer-wiget-touch ul li {
    list-style: none;
    display: block;
    margin-bottom: 15px;
}

.icon {
    float: left;
    margin-right: 15px;
}

.icon i {
    color: #fff;
    font-size: 20px;
}

.title h6 {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.adress a {
    display: inline-block;
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    text-decoration: none;
}

.footer-widget-photo ul {
    margin-top: 16px;
}

.footer-widget-photo ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.footer-widget-photo ul li img {
    width: 100%;
    transition: all 2s ease;
}

.footer-widget-photo ul li img:hover {
    transform: scale(1.15);
}

.footer-widget-photo ul li::before {
    position: absolute;
    left: 0;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(87,60,255,0.9);
    z-index: 1;
    opacity: 0.5;
    -webkit-transform: scaleY(0) translateZ(100px);
    -ms-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    visibility: hidden;
}

.footer-widget-photo ul li:hover::before {
    -webkit-transform: scaleY(1) translateZ(0px);
    -ms-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}


.copyright-text {
    margin-top: 15px;
}

.copyright-text p {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 124.5%;
}

.copyright-text p a {
    color: #54b153;
}

/* footer privacy */

.footer-privacy-menu {
    text-align: right;
}

.footer-privacy-menu ul {
    list-style: none;
}

.footer-privacy-menu ul li {
    display: inline-block;
    margin-right: 27px;
}

.footer-privacy-menu ul li a {
    color: #FAFAFA;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    text-decoration: none;
}




/*===============================================================
<-- All Inner Page Css-->
=================================================================*/
/* breatcome area css */


.breatcome-area {
    background: url(../images/resource/bretcome-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 154px 0;
}

.breatcome-content {
    position: relative;
}

.breatcome-discription p {
    text-align: center;
    font-size: 28px;
    line-height: 27px;
    color: #ffffff;
    font-weight: 400;
}

.breatcome-title h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 19px;
    text-align: center;
}

.bratcome-text {
    position: absolute;
    left: 0;
    bottom: -173px;
    background: #54b153;
    padding: 23px 35px;
    border-radius: 5px 5px 0 0;
}

.bratcome-text ul {
    list-style: none;
}

.bratcome-text ul li {
    display: inline-block;
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    line-height: 27px;
}

/* This new rule adds the slash correctly after each item except the last one */
.bratcome-text ul li:not(:last-child)::after {
    content: "/";
    margin: 0 12px;
}

/*==================================================
 <-- Course Inner Page Css-->
===================================================*/

/* Course area */

.course-area.inner-page {
    padding: 60px 0 92px !important; 
}

/*==================================================
 <-- Course Details Inner Page Css-->
===================================================*/

.courses-details-area {
    padding: 120px 0 120px;
}

.sidebar-courses {
    padding: 40px 0 40px;
    background: #f9f7ff;
    margin-bottom: 30px;
}

.courses-info ul li {
    display: block;
    list-style: none;
    border-bottom: 1px solid #ccd2e1;
    margin-bottom: 10px;
    padding: 0 0 10px 30px;
}

.courses-info ul li i {
    display: inline-block;
    padding-right: 5px;
    color: #54b153;
}

.courses-info ul li span {
    float: right;
    padding-right: 30px;
}

.courses-price-content {
    margin-bottom: 10px;
}

.courses-price-content h4 {
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0 5px;
}

.courses-price-single-box {
    text-align: center;
}

/*Letest Course Box*/

.latest-courses-single-box {
    padding: 20px 30px 30px;
    background: #f9f7ff;
}

.latest-courses-title h4 {
    font-size: 24px;
    font-weight: 500;
    padding: 0 0 13px;
}

.latest-courses-item {
    padding: 12px 0 0;
}

.latest-courses-thumb {
    float: left;
    margin-right: 20px;
}

.latest-courses-content {
    overflow: hidden;
    position: relative;
    top: -8px;
}

.latest-courses-content-title h5 a {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0;
    text-decoration: none;
}

a.catagory {
    font-size: 15px;
    color: #54b153;
    text-decoration: none;
}

.latest-courses-rating i {
    font-size: 13px;
    color: #54b153;
    letter-spacing: 1px;
}

/*Course Dtls Right*/

.courses-details-thumb img {
    width: 100%;
}

.courses-details-content h2 {
    font-size: 28px;
    font-weight: 500;
    padding: 18px 0 12px;
}

.row.catagori {
    padding: 25px 0 0;
}

.courses-catagori-content h4 {
    font-size: 22px;
    font-weight: 600;
    padding: 10px 0 5px;
}


/*==================================================
 <-- Team Details Inner Page Css-->
===================================================*/

.team-details-area {
    padding: 122px 0 0;
}

.team-author-thumb img {
    width: 100%;
}

/* progress bar  */

.team-details-area .process-ber-plugin {
    margin: 50px 60px 0;
}

.team-details-area .barfiller {
    margin-bottom: 40px;
}


/* progress bar */


.barfiller {
    width: 368px;
    height: 8px;
    position: relative;
    margin-bottom: 16px;
    margin-top: 21px;
    background-color: #f2f2f2;
}

.barfiller .fill {
    display: block;
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 1;
}

.barfiller .tip {
    font-size: 18px;
    color: #252638;
    font-weight: 500;
    top: -42px;
    padding: 1px 6px;
    left: 0px;
    position: absolute;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
    animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}

span.fill {
    background: #54b153 !important;
    border-radius: 0px 15px 15px 0px;
}


/* author info */

.row.author-info {
    background: #f8f6f1;
    padding: 35px 40px 25px;
    margin-top: -200px;
}

.team-author-exprience ul li {
    list-style: none;
    margin-bottom: 17px;
}

.team-author-exprience ul li span {
    font-size: 20px;
    color: #888888;
    font-weight: 400;
    line-height: 45px;
}

.team-author-exprience ul li h4 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
}

.team-author-socila {
    text-align: center;
    margin-right: -76px;
    margin-top: 24px;
}

.team-author-socila ul li {
    list-style: none;
    margin: 17px 0px 0;
}

.team-author-socila ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background: #ffffff;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.team-author-socila ul li a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #54b153;
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.team-author-socila ul li a:hover::before {
    transform: scale(1);
}

.team-author-socila ul li a {
    transition: .5s;
}

.team-author-socila ul li a:hover i {
    color: #ffffff;
}

/*==================================================
 <-- Project Area Css-->
===================================================*/
.project-grid-area {
    padding: 120px 0 90px;
}

.protfolio-single-box {
    margin-bottom: 30px;
}

.protfolio-thumb img {
    width: 100%;
}

.protfolio-thumb {
    position: relative;
    overflow: hidden;
}

.protfolio-thumb img:nth-child(1) {
    transition: transform 0.8s;
}

.protfolio-thumb img:nth-child(2),
.protfolio-thumb img:nth-child(3) {
    position: absolute;
    top: 0;
    z-index: 3;
    transition: transform 1.6s;
}

.protfolio-thumb img:nth-child(2) {
    left: 0;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.protfolio-thumb img:nth-child(3) {
    right: 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.protfolio-single-box:hover .protfolio-thumb img:nth-child(1) {
    transform: scale(1.3);
}

.protfolio-single-box:hover .protfolio-thumb img:nth-child(2) {
    transform: translateX(-700px) skewX(40deg);
}

.protfolio-single-box:hover .protfolio-thumb img:nth-child(3) {
    transform: translateX(700px) skewX(-40deg);
}

.protfolio-images-link {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(14, 19, 23, 0.8);
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(-20%);
    transition: opacity 500ms ease, transform 500ms ease;
}

.protfolio-single-box:hover .protfolio-images-link {
    opacity: 1;
    transform: translateY(0);
}

.protfolio-images-link a {
    color: #fff;
    font-size: 30px;
}


/*==================================================
 <-- Project Details Inner Page Css-->
===================================================*/

.project-detials-area {
    padding: 120px 0 100px;
}

.project-details-thumb {
    margin-bottom: 55px;
    overflow: hidden;
}

.project-details-thumb img {
    width: 100%;
    transition: all 2s ease;
}

.project-details-thumb img:hover {
    transform: scale(1.15);
}

.project-details-title h4 {
    font-size: 30px;
    color: #3c3531;
    font-weight: 600;
}

.porject-detials-discription {
    margin: 25px 0 57px;
}

.porject-detials-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;
}

.porject-detials-discription.inner {
    margin: -14px 0 0;
}

/*===============================================================
<-- Blog Inner page Css-->
=================================================================*/

.blog-area.inner-page {
    padding: 120px 0 90px;
}

/*===============================================================
<-- Blog Details Inner page Css-->
=================================================================*/

.blog-details-area {
    padding: 122px 0 120px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-meta {
    margin: 29px 0 26px;
}

.blog-details-meta span {
    opacity: 0.902;
    font-size: 16px;
    line-height: 34px;
    color: #4d4e4f;
    font-weight: 400;
    margin-right: 27px;
}

.blog-details-meta span i {
    font-size: 22px;
    position: relative;
    top: 4px;
    margin-right: 12px;
}

.blog-details-content {
    margin-bottom: 42px;
}

.blog-details-content h4 {
    font-size: 40px;
    line-height: 28px;
    color: #3c3531;
    font-weight: 600;
    margin-bottom: 35px;
}

.blog-details-content p {
    font-size: 16px;
    line-height: 28px;
    color: #3c3531;
    font-weight: 400;
}

.blog-details-tag h6 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 500;
    display: inline-block;
    margin-right: 60px;
}

.blog-details-tag {
    border: 1px solid #54b153;
    padding: 24px 38px;
    margin-bottom: 55px;
}

.blog-details-tag h6 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 500;
    display: inline-block;
    margin-right: 32px;
}

.blog-details-tag a {
    font-size: 16px;
    color: #54b153;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #eceae5;
    padding: 4px 22px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.blog-details-tag a:hover {
    color: #FFf;
}

.blog-details-tag a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #54b153;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-tag a:hover::before {
    width: 100%;
}

.blog-team-thumb {
    float: left;
    margin-right: 30px;
}

.blog-team-content h4 a {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
}

.blog-team-content p {
    font-size: 20px;
    line-height: 30px;
    color: #3c3531;
    font-weight: 400;
    margin: 15px 0 9px;
}

.ba-blog-details-social-icons.two h6 {
    font-size: 18px;
    color: #3c3531;
    font-weight: 400;
    display: inline-block;
    margin-right: 14px;
}

.ba-blog-details-social-icons.two a {
    font-size: 16px;
    margin-right: 10px;
}

.blog-team-thumb {
    float: left;
    margin-right: 30px;
    margin-top: -12px;
}

.row.blog-item {
    padding: 20px 68px 20px;
    border-top: 1px solid #54b153;
    border-bottom: 1px solid #54b153;
}

.blog-item-content h4 {
    font-size: 20px;
    color: #54b153;
    font-weight: 500;
}

.blog-details-item.two {
    margin-left: 90px;
}

.blog-details-area .owl-nav {
    display: none;
}

/* blog details comment */

.blog-details-comment {
    margin-top: 36px;
}

.blog-details-comment h5 {
    font-size: 30px;
    line-height: 28px;
    color: #292930;
    font-weight: 500;
    position: relative;
    margin-bottom: 36px;
}

.blog-details-comment h5::after {
    position: absolute;
    bottom: -10px;
    width: 70px;
    height: 3px;
    background: #54b153;
    content: "";
    left: 0;
}

.blog-comment-list ul li {
    list-style: none;
    margin-bottom: 0;
}

.blog-comment-box {
    position: relative;
}

.blog-comment-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #E4E4E4;
    bottom: -30px;
}

.blog-comment-box.inner {
    margin-left: 50px;
}

.blog-comment-box.inner::before {
    display: none;
}

.blog-comment-thumb {
    float: left;
    margin-right: 24px;
    margin-top: 12px;
}

.blog-comment-thumb img {
    border-radius: 4px;
}

.blog-comment-list .title {
    margin-bottom: 5px;
    margin-left: -12px;
}

.blog-comment-list h6.title {
    color: #18191D;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.blog-comment-list span.date {
    margin-left: -13px;
}

.content-main p {
    color: #747474;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin: 10px 0 0;
}

.text-sm-end a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 13px;
    background: #EFEFEF;
    border-radius: 3px;
    color: #102039;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.text-sm-end a:hover {
    color: #fff;
}

.text-sm-end a::before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #54b153;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.text-sm-end a:hover::before {
    width: 100%;
}

/* blog contact box */

.blog-contact-box {
    background: #eff5f4;
    padding: 20px 30px 20px;
}

.blog-contact-title h4 {
    color: #18191D;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 54px;
    position: relative;
}

.blog-contact-title h4::before {
    position: absolute;
    bottom: -10px;
    width: 70px;
    height: 3px;
    background: #54b153;
    content: "";
    left: 0;
}

/* contact form */

.form-box input {
    width: 100%;
    height: 64px;
    background: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 0 17px;
    margin-bottom: 25px;
}

.form-box input::placeholder {
    color: #525459;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.form-box textarea {
    width: 100%;
    height: 145px;
    background: #ffff;
    border: none;
    border-radius: 3px;
    padding: 5px 17px;
    margin-bottom: 25px;
}

.form-box textarea::placeholder {
    color: #525459;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.form-box-button button {
    width: 210px;
    height: 60px;
    border-radius: 3px;
    background-color: #54b153;
    border: 0;
    outline: 0;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.form-box-button button::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    transform: scale(0.0, 1);
    opacity: 0;
    border-radius: 3px;
    z-index: -1;
    transition: .5s;
}

.form-box-button button:hover::before {
    background: #18191D;
    opacity: 1;
    transform: scale(1, 1);
}

.form-box-button.inner {
    text-align: center;
}

/* widget search box */

.widget_search.box {
    margin-bottom: 30px;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #606060;
    font-weight: 400;
    background: #f8f6f1;
    border: none;
    outline: 0;
}

.widget_search input::placeholder {
    font-size: 16px;
    line-height: 28px;
    color: #868686;
    font-weight: 400;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #54b153;
    border-radius: 0 3px 3px 0;
}

/* widget recent box */

.widget-recent-box {
    background: #f8f6f1;
    padding: 50px 35px 55px;
    margin-bottom: 30px;
}

.widget-recent-title h4 {
    font-size: 30px;
    color: #54b153;
    font-weight: 600;
    margin-bottom: 40px;
    border-bottom: 1px solid #ece6e6;
    padding: 0 0 14px;
}

.sidber-widget-recent-post {
    background: #ffffff;
    border-radius: 5px;
    padding: 16px 20px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
}

.recent-widget-thumb img {
    transition: all 2s ease;
}

.sidber-widget-recent-post:hover .recent-widget-thumb img {
    transform: scale(1.15);
}

.recent-widget-meta span {
    font-size: 14px;
    color: #4d4e4f;
    font-weight: 400;
}

.recent-widget-meta span i {
    color: #54b153;
    font-size: 12px;
    margin-right: 8px;
}

.recent-widget-title h4 a {
    font-size: 20px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.sidber-widget-recent-post:hover .recent-widget-title h4 a {
    color: #54b153;
}

/* widget recent menu */
.widget-recent-menu ul li {
    list-style: none;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
    transition: .5s;
    border-bottom: 1px solid #dddddd;
    padding: 0px 0 10px;
}

.widget-recent-menu ul li::before {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    transition: all 0.5s linear 0s;
    background-color: #54b153;
    content: "";
    z-index: -1;
}

.widget-recent-menu ul li:hover::before {
    width: 100%;
    right: auto;
    left: 0;
}

.widget-recent-menu ul li a {
    display: block;
    overflow: hidden;
    font-size: 16px;
    color: #4d4e4f;
    font-weight: 400;
    text-decoration: none;
    transition: .5s;
}

.widget-recent-menu ul li a:hover {
    color: #54b153;
}

.widget-recent-menu ul li a span {
    float: right;
}

/* widget tags */

.widget-tags a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 13px;
    background: #fff;
    border-radius: 3px;
    font-size: 17px;
    color: #4d4e4f;
    font-style: normal;
    margin: 11px 5px;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:hover {
    color: #fff;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #54b153;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover:before {
    width: 104%;
}

/*===============================================================
<-- Contact Area Css-->
=================================================================*/
.contact-area {
    padding: 120px 0 110px;
}

.row.contact {
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: #eff5f4;
    padding: 110px 35px 70px;
}

.contact-single-box {
    background: #54b153;
    padding: 60px 18px 30px;
}

.contact-title h4 {
    font-size: 36px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 1px solid #54b153;
    padding: 0 0 7px;
    margin-bottom: 30px;
}

.contact-items {
    margin-bottom: 30px;
    background: #fff;
    padding: 26px 15px;
}

.contact-icon {
    float: left;
    margin-right: 20px;
    width: 55px;
    height: 59px;
    background-color: #54b153;
    display: inline-block;
    text-align: center;
    line-height: 59px;
}

.contact-icon i {
    color: #fff;
    font-size: 26px;
}

.contact-content h4 {
    font-size: 24px;
    color: #54b153;
    font-weight: 500;
}

.contact-content h6 {
    font-size: 15px;
    line-height: 34px;
    color: #757575;
    font-weight: 400;
}

/* contact box title */

.contact-box-title h4 {
    font-size: 48px;
    line-height: 60px;
    color: #54b153;
    font-weight: 600;
    margin-bottom: 35px;
}

/*===============================================================
<-- Faq Area Css-->
=================================================================*/

.faq-area {
    padding: 120px 0 100px;
}


/* accrodion css */

.accordion li {
    list-style: none;
    position: relative;
    z-index: 1;
    margin-bottom: -7px;
    border-radius: 3px;
}

.accordion li a {
    display: block;
    cursor: pointer;
    padding: 12px 34px 12px;
    text-decoration: none;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f4f9;
}

.accordion li a span {
    font-size: 20px;
    color: #54b153;
    font-weight: 600;
}

.accordion li a i {
    width: 36px;
    height: 36px;
    background: #54b153;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    color: #fff;
}

.accordion a.active {
    background: #f4f4f9;
    border: none;
}

.accordion a.active i {
    color: #fff;
    background: #54b153;
    border: none;
    margin-bottom: 0;
    transform: rotate(90deg);
}

.accordion li p {
    display: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #434141;
    background: #f4f4f9;
    padding: 11px 38px 28px;
    width: 100%;
    margin: 0;
    position: relative;
    top: -24px;
}

.accordion a.active:before {
    display: none;
}

a.active {
    color: #1c1632;
}

ul.accordion ul li a span {
    color: #fff;
}

/*===============================================================
<-- Error Area Css-->
=================================================================*/

.error-area {
    padding: 120px 0 110px;
}

.faq-thumb {
    text-align: center;
}

.estudy-btn.error {
    margin-left: 160px;
}

/*===============================================================
<-- estudy Sidebar Css-->
=================================================================*/

.sidebar-textwidget .contact-info ul {
    padding: 0;
}

.sidebar-group .widget-heading {
    position: absolute;
    top: 55px;
    right: 32px;
}

.sidebar-group .sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #FFF;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

.sidebar-group.isActive .sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color: #54b153;
    font-size: 30px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-logo {
    margin: 0 0 50px;
}

.sidebar-textwidget .sidebar-logo a img {
    width: 50%;
}

.sidebar-group .about-box h2 {
    color: #002935;
    font-size: 26px;
    font-weight: 600;
}

.sidebar-group .about-box p {
    display: inline-block;
    color: #fff;
    padding: 15px 0 0;
}

.sidebar-group .contact-info {
    margin-top: 60px;
}

.sidebar-group .contact-info h2 {
    color: #002935;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 600;
}

.sidebar-group ul.list-style-one li {
    display: block;
    list-style: none;
    color: #002935;
    margin-top: 8px;
    overflow: hidden;
}

.sidebar-group ul.list-style-one li i {
    font-size: 20px;
    font-weight: 600;
    color: #54b153;
    margin: 0 10px 0 0px;
}

.sidebar-group ul.social-box {
    margin: 58px 0 0;
    padding: 0;
}

.sidebar-group ul.social-box li {
    display: inline-block;
    list-style: none;
    margin: 0 6px 0 0;
}

.sidebar-group ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #54b153;
    color: #FFF;
    text-decoration: none;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

.sidebar-group ul.social-box li a:hover {
    background: var(--primary-color);
    color: #54b153;
}


/* sidebar menu */

.sidebar-menu {
    position: absolute;
    right: 27px;
    top: 23px;
    display: none;
}

.sidebar-menu a {
    width: 52px;
    height: 52px;
    line-height: 52px;
    display: inline-block;
    text-align: center;
    color: #54b153;
    font-size: 26px;
}

.sidebar-widget-menu {
    position: relative;
}

.sidebar-widget-menu ul li {
    list-style: none;
    margin-top: 10px;
    padding: 0 0 14px;
}

.sidebar-widget-menu ul li .home-menu-title h4 {
    text-align: center;
    margin-top: 10px;
}

.sidebar-widget-menu ul li .home-menu-title h4 a {
    font-size: 20px;
    padding: 0px 0;
    font-weight: 500;
    color: #171717;
}

.sidebar-widget-menu ul li .home-menu-title h4 a:hover {
    color: #54b153;
}

.sidebar-widget-menu ul li .home-menu-title h4 a::before {
    display: none;
}



/*
<!-- ============================================================== -->
<!-- estudy Scrollup Section -->
<!-- ============================================================== -->*/
.prgoress_scrollup {
    position: fixed;
    right: 55px;
    bottom: 80px;
    height: 48px;
    width: 48px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 119, 249, 0.2);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_scrollup.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important;
}

.prgoress_scrollup::after {
    position: absolute;
    content: "\F286";
    font-family: bootstrap-icons;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    color: #54b153;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_scrollup:hover::after {
    color: #54b153;
}

.prgoress_scrollup svg path {
    fill: none;
}

.prgoress_scrollup svg.progress-circle path {
    stroke: #54b153;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}




@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}


@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/*===========================
<-- estudy Loader Css -->
=============================*/


.loader_bg {
    position: fixed;
    z-index: 999;
    background: #fff;
    width: 100%;
    height: 100%;
    background-image: url(../images/resource/preloader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9991;
}
/* --- Make Logo Bigger on Desktop --- */
@media (min-width: 992px) {
    .logo img {
        width: 200px; /* You can change this value */
    }
}
/* Add top spacing for the Instractor/CTA area */
.instractor-area {
    padding-top: 120px;
    padding-bottom: 120px; /* This adds the space you need */
}
/* --- Styling for Service Sub-Category Headings --- */
.service-sub-heading {
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: #002935;
    margin-top: 50px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}
/* --- Styling for Service Page Info Boxes --- */
.service-info-section {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid #e0e0e0;
}
.service-info-section h3 {
    font-size: 28px;
    font-weight: 600;
    color: #002935;
    margin-bottom: 20px;
}
.service-info-section ul {
    list-style: none;
    padding-left: 0;
}
.service-info-section ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}
.service-info-section ul li::before {
    content: "\f26e"; /* Bootstrap Icon check mark */
    font-family: bootstrap-icons !important;
    position: absolute;
    left: 0;
    top: 0;
    color: #238321; /* Green color */
    font-weight: 900;
}
.service-info-section p {
    margin-bottom: 10px;
    font-size: 18px !important; 
    line-height: 1.7;
}
/* Fix for inner page spacing */
.course-area.inner-page {
    padding-top: 60px;
}

/* Fix for bottom text size on service pages */
.service-info-section p {
    font-size: 18px;
}
/* --- FINAL Service Card Hover Effect (Homepage Only) --- */
.home-page .course-thumb {
    position: relative;
    height: 250px;
    overflow: hidden;
    background-color: #f8f8f8;
}

.home-page .course-thumb-text,
.home-page .course-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
}

.home-page .course-thumb-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    z-index: 2;
    color: #fff;
    background-image: url(../images/resource/help-bg.png);
    background-size: cover;
    background-position: center;
    opacity: 0; 
}

.home-page .course-thumb-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

.home-page .course-thumb img {
    object-fit: cover;
    z-index: 1;
    opacity: 1; 
}

.home-page .course-single-box:hover .course-thumb-text {
    opacity: 1;
}

.home-page .course-single-box:hover .course-thumb img {
    opacity: 0; 
}

/* This adds a dark layer on top of your new background image to make the white text readable */
.course-thumb-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

.course-thumb img {
	object-fit: cover;
	z-index: 1;
	opacity: 1; /* Image is visible by default */
}

.course-single-box:hover .course-thumb-text {
	opacity: 1; /* Show the text overlay on hover */
}

.course-single-box:hover .course-thumb img {
	opacity: 0; /* Hide the main image on hover */
}

/* Remove old conflicting style */
.course-thumb-overlay {
    display: none;
}
/* --- Fix for Homepage Blog Card Hover --- */
.blog-area .course-single-box:hover .course-thumb img {
    opacity: 1; /* This stops the image from disappearing */
}
/* --- Fix for About Us Page Alignment & Icons --- */
.about-us-area .help-list span {
    color: #747474; /* Sets correct text color */
    display: flex; /* Enables flex alignment */
    align-items: center; /* Vertically aligns icon and text */
    margin-bottom: 15px;
}

.about-us-area .help-list span i.fa-check {
    font-family: "Font Awesome 5 Free"; /* Ensures correct icon font */
    font-weight: 900;
    font-style: normal;
    background: #54b153;
    color: #fff;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* Prevents the icon from shrinking */
}
/* --- Fix for About Us Page Image Overlap --- */
.about-us-area .about-us-thumb img {
    width: 100%;
    height: auto;
}
/* --- Adjust About Us Page Spacing --- */
.about-us-area .section-title {
    padding-left: 30px;
}
/* --- Footer Mobile Alignment Fix --- */
@media (max-width: 991px) {
  .copyright-text {
    text-align: center;
    margin-bottom: 10px;
  }
  .footer-privacy-menu p {
    text-align: center !important;
  }
}
/* --- Footer Mobile Alignment Fix --- */
@media (max-width: 991px) {
  .copyright-text {
    text-align: center;
    margin-bottom: 10px;
  }
  .footer-privacy-menu p {
    text-align: center !important;
  }
}

/* --- Fix for Unclickable Footer Link --- */
.footer-area .row.align-items-center {
    position: relative;
    z-index: 2;
}
/* --- Fix for Hero Image Overlap on Laptops --- */
@media (max-width: 1600px) {
  .slider-thumb {
    max-width: 450px;
  }
}

@media (max-width: 1200px) {
  .slider-thumb {
    max-width: 400px;
  }
}
/* ===================================================================
   FINAL TWEAKS: Bigger & Moved Right on Laptops
   =================================================================== */

@media (min-width: 1201px) and (max-width: 1600px) {
  .slider-thumb {
    max-width: 620px !important;              /* Makes the image bigger */
    right: -2% !important;                     /* Moves the image to the right */
    bottom: auto !important;
    transform: translateY(120px) !important;  /* Keep the vertical position value you found */
  }
}
/* ===========================================================
   FIX: Registration Form Overlap on Very Large Screens
   =========================================================== */

@media (min-width: 1601px) {
  .registration-items-box {
    top: -80px;
  }
}
/* ===========================================================
   Mobile Services Icon Grid Styles (HOME PAGE ONLY)
   =========================================================== */

/* Hide the new mobile grid on desktop screens by default */
.home-page .services-mobile-container {
    display: none;
}

/* Styles for the new mobile icon grid */
.home-page .services-mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 icons per row */
    gap: 20px;
    padding-bottom: 60px;
}

.home-page .service-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.home-page .service-icon-item .icon-circle {
    width: 70px;
    height: 70px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.home-page .service-icon-item:hover .icon-circle {
    background-color: #f8f8f8;
    border-color: #ccc;
}

.home-page .service-icon-item .icon-circle i {
    font-size: 30px;
    color: #54b153; /* Your site's primary green color */
}

.home-page .service-icon-item .icon-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

/* --- Fix for Blank Image on Service Pages Hover --- */
.course-area.inner-page .course-single-box .course-thumb img {
    transition: transform 0.4s ease;
}

.course-area.inner-page .course-single-box:hover .course-thumb img {
    opacity: 1 !important; /* Forces the image to stay visible */
    transform: scale(1.05); /* Adds a simple zoom effect instead */
}
/* This media query activates only on mobile screens (767px and below) */
@media (max-width: 767px) {
    /* Hide the original desktop service cards ON THE HOME PAGE ONLY */
    .home-page .course-area {
        display: none !important;
    }

    /* Show the new mobile-friendly icon grid ON THE HOME PAGE ONLY */
    .home-page .services-mobile-container {
        display: block !important;
    }
]