/*  CSS INDEX
    ===================
	
    1. Template default css (assets/css/bundle.css)
    2. Header area
    3. Slider area
    4. Service area 
    5. About area
    6. Career area
    7. Testimonials area
    8. Subscribe area 
    9. Pricing area
    10. Counter area
    11. Footer area
    12. Scrollup
    13. Blog details
    
    
-----------------------------------------------------------------------------------*/


/* 2. Header area */

.absolute-bar {
    position: absolute;
    width: 100%;
    z-index: 9999;
    transition: all 0.5s ease 0s;
}
.header-btn {
    border: 2px solid #239ede;
    border-radius: 50px;
    color: #239ede;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin-left: 24px;
    padding: 10px 30px 9px;
    text-transform: uppercase;
}
.header-btn:hover {
    color: #fff;
    background-color: #239ede;
}
.menu-bar {} .menu-bar ul {
    padding-top: 8px;
}
.menu-bar ul li {
    display: inline-block;
}
.menu-bar ul li a {
    color: #464646;
    display: block;
    font-size: 14px;
    padding-left: 42px;
    text-transform: uppercase;
}
.menu-bar ul li:hover a {
    color: #239ede
}
.header-area.stick {
    background-color: #239ede;
    padding: 20px 0;
    position: fixed;
    top: 0;
}
.stick .menu-bar ul li a {
    color: #fff;
}
.stick .menu-bar ul li a:hover,
.stick .menu-bar ul li.active a {
    color: #3a3a3a;
}
.menu-bar ul li.active a {
    color: #239ede;
}
.stick .header-btn {
    border: 2px solid #fff;
    color: #fff;
}
.stick .header-btn:hover {
    border: 2px solid #fff;
    color: #3a3a3a;
    background-color: #fff;
}
.navbar-toggler {
    background-color: #239ede;
    border: medium none;
    border-radius: 0;
    color: #fff;
    height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 40px;
}
.stick .navbar-toggler {
    background-color: #fff;
    color: #239ede;
}
.navbar-toggler i {
    display: block;
    font-size: 26px;
    line-height: 40px;
}
.menu-bar.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}
/* 3. Slider area */

.slider-wrapper {
    overflow: hidden;
}
.slider-wrapper .single-slide {
    background-color: #eff2f5;
    position: relative;
    z-index: 99;
}
.height-100vh {
    height: 100vh;
}
.mouse-bg {
    background-repeat: no-repeat;
    background-size: auto auto;
    position: absolute;
    left: 0;
    top: 0;
}
#background-1 {
    background-image: url("../../assets/img/slider/1.png");
}
#background-2 {
    background-image: url("../../assets/img/slider/2.png");
    background-position: right 37px top 7px;
}
#background-3 {
    background-image: url("../../assets/img/slider/3.png");
    background-position: bottom 25% right 30%;
}
#background-4 {
    background-image: url("../../assets/img/slider/4.png");
    background-position: right 75px bottom 0;
}
#background-5 {
    background-image: url("../../assets/img/slider/5.png");
    background-position: left 9% bottom 13%;
}
#background-6 {
    background-image: url("../../assets/img/slider/6.png");
    background-position: left 59% top 197px;
}
#background-7 {
    background-image: url("../../assets/img/slider/7.png");
    background-position: right 370px bottom 62px;
}
#background-8 {
    background-image: url("../../assets/img/slider/5.png");
    background-position: right 150px bottom 112px;
}
.slide-text {
    padding: 355px 0 0;
}
.slide-text h2 {
    color: #3a3a3a;
    font-size: 50px;
    font-weight: 800;
    line-height: 55px;
}
.slide-text h2 span {
    color: #239ede;
}
.slide-text p {
    color: #333;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin: 21px 0 33px;
    width: 52%;
}
.slider-btn {
    border: 2px solid #239ede;
    border-radius: 50px;
    color: #239ede;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 15px 37px 14px;
    text-transform: uppercase;
    font-weight: 500;
}
.slider-btn:hover {
    color: #fff;
    background-color: #239ede;
}
/* 4. Service area */

.single-service span {
    color: #239ede;
    font-size: 36px;
}
.single-service h3 {
    color: #5b5b5b;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 16px;
    margin-top: 21px;
    padding-bottom: 14px;
    position: relative;
}
.single-service h3::before {
    background-color: #d7dbde;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 46px;
}
.single-service > p {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
}
.single-service {
    padding: 58px 34px 79px 32px;
    transition: all .3s ease 0s;
}
.single-service:hover {
    background-color: #eff2f5;
}
.coustom-col {
  padding: 0 37px;
}
.coustom-row{
    margin: 0 -37px;
}



/* 5. About area */

.about-content > h2 {
    color: #3a3a3a;
    font-size: 36px;
    font-weight: 800;
    margin: 0;
}
.about-content > h2 span {
    color: #239ede;
}
.about-content {
    padding: 93px 57px 0 0;
}
.about-content > p {
    color: #838383;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin: 26px 0 45px;
}
.about-social {
    margin-top: 33px;
}
.about-social li {
    display: inline-block;
}
.about-social a i {
    background-color: transparent;
    border-radius: 50px;
    color: #239ede;
    display: inline-block;
    font-size: 20px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 35px;
}
.about-social a i:hover {
    background-color: #239ede;
    color: #fff;
}
.about-img {
    padding-right: 138px;
}
.about-img > img {
    width: 100%;
    border-radius: 5%;
}
/* 6. Career Area */
.career-area {
    padding: 60px 0;
    background-color: #f9f9f9; /* Subtle background */
}

.career-area .row {
    display: flex; /* Enables Flexbox for alignment */
    flex-wrap: wrap; /* Ensures content wraps on smaller screens */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Adds space between the image and text */
}

.mockup-img {
    max-width: 100%; /* Ensures responsiveness */
    text-align: center; /* Centers the image within its container */
    margin-bottom: 20px; /* Adds spacing below image on smaller screens */
}

.mockup-img img {
    max-width: 100%; /* Ensures the image is fully responsive */
    height: auto;
    border-radius: 8px; /* Optional: Adds subtle rounding to the image */
}

.career-text {
    flex: 1 1 60%; /* Allows text to take up to 60% of the row */
    padding: 20px; /* Adds padding for better spacing */
    max-width: 600px; /* Optional: Limits width of the text block */
}

.career-area .row > .col-lg-4, 
.career-area .row > .col-lg-8 {
    flex: 1 1 45%; /* Adjusts column sizes for better layout */
}

/* Heading Styling */
.career-text > h2 {
    color: #464646;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 15px; /* Tightened spacing */
}

/* Paragraph Styling */
.career-text > p {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 15px 0 25px; /* Better spacing */
}

/* Discount Price Styling */
.pricing-discount-title h4 {
    color: red;
    text-decoration: line-through;
    font-weight: bold;
    font-size: 2rem; /* Adjusted size */
    margin-bottom: 10px; /* Space between price and discount */
}

/* Final Price Styling */
.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #28a745; /* Green for emphasis */
    text-transform: uppercase;
    margin-bottom: 20px; /* Adds spacing below price */
    display: block; /* Ensures it stacks properly */
}

/* Button Styling */
.buy-button {
    margin-top: 20px; /* Space above the button */
}

.buy-button a {
    display: inline-block;
    background: linear-gradient(to right, #ffd700, #ff9900); /* Gold gradient */
    color: #000; /* Text color */
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 40px; /* Button size */
    border-radius: 30px; /* Rounded button */
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4); /* Subtle shadow */
}

.buy-button a:hover {
    background: linear-gradient(to right, #239ede, #0056b3); /* Blue gradient */
    color: #fff; /* White text */
    transform: scale(1.05); /* Hover enlargement */
    box-shadow: 0 5px 15px rgba(35, 158, 222, 0.6); /* Glow effect */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .career-area .row {
        flex-direction: column; /* Stacks the image and text vertically */
    }

    .career-text {
        text-align: center; /* Centers the text on smaller screens */
        padding: 10px; /* Reduces padding for smaller screens */
    }

    .mockup-img img {
        margin: 0 auto; /* Centers the image */
    }
}


/* 7. Testimonials area */

.section-title > h2 {
    color: #3a3a3a;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 87px;
}
.slick-slide img {
  border: 1px solid #eeeeee;
  border-radius: 50px;
  display: inline-block;
}
.single-testi-text {
    padding-bottom: 40px;
}
.single-testi-text > p {
    border: 1px solid #e7e7e7;
    color: #999999;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    padding: 36px 37px 39px;
    position: relative;
    margin: 0;
}
.single-testi-text.slick-current > p {
    border: 2px solid #239ede;
    color: #333;
}
.single-testi-text.slick-current > p::after {
    background: #fff none repeat scroll 0 0;
    border-color: #239ede currentcolor currentcolor #239ede;
    border-radius: 3px 0 0;
    border-style: solid none none solid;
    border-width: 2px medium medium 2px;
    bottom: -14px;
    content: "";
    height: 25px;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    transform: rotate(225deg);
    width: 25px;
}
.slick-slide {
    margin: 0 15px;
}
.single-testi-img > h3 {
    color: #464646;
    font-size: 20px;
    font-weight: 600;
    margin: 18px 0 10px;
    text-transform: capitalize;
}
.single-testi-img > h5 {
    color: #8f8f8f;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
}
/* 8. Subscribe area */

.subscribe-content > h2 {
    color: #3a3a3a;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 17px;
}
.subscribe-content > p {
    color: #676767;
    font-size: 15px;
    font-weight: 400;
    margin: 17px auto 32px;
    width: 66%;
}
.subscribe-form .mc-form {
    margin: 0 auto;
    position: relative;
    width: 515px;
}
.subscribe-form .mc-form input {
    background: #f7f7f8 none repeat scroll 0 0;
    border: medium none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    color: #a9a9a9;
    font-weight: 400;
    padding: 0 160px 0 20px;
}
.subscribe-form .mc-form .clear input {
    background-color: #239ede;
    border: medium none;
    border-radius: inherit;
    bottom: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    height: 45px;
    padding: 0 35px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    width: inherit;
}
.subscribe-form .mc-form .clear input:hover {
    background-color: #3a3a3a;
}
.mc-form .mc-news {
    left: -5000px;
    position: absolute;
}
.subscribe-form .mc-form input::-webkit-input-placeholder {
    /* Chrome */
    
    color: #a9a9a9;
    opacity: 1;
}
.subscribe-form .mc-form input::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #a9a9a9;
    opacity: 1;
}
/* 9. Pricing area */

.single-pricing {
    border-radius: 5px;
    margin: 0 25px;
    padding: 49px 0 43px;
}
.pricing-icon i {
    color: #239ede;
    font-size: 40px;
}
.pricing-value-title {
    padding: 31px 0 25px;
}
.pricing-value {
    display: inline-block;
    position: relative;
}
.pricing-value > h3 {
    color: #616161;
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 5px;
}
.pricing-value span {
    font-size: 15px;
    font-weight: normal;
    position: absolute;
    right: -12px;
    top: 8px;
}
.pricing-value-title h4 {
    color: #5b5b5b;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
}
.pricing-value-content ul li {
    color: #333;
    font-weight: 400;
    line-height: 27px;
}
/* Pricing Button */
.pricing-btn > a {
    background: linear-gradient(to right, #ffd700, #ff9900); /* Subtle Gold Gradient */
    border: none; /* Removes the border */
    color: #000; /* Dark text for readability */
    display: inline-block;
    line-height: 1.5;
    margin-top: 20px; /* Adjusts spacing within the box */
    padding: 10px 25px; /* Reduced padding for a smaller size */
    border-radius: 30px; /* Rounded button */
    font-size: 1rem; /* Slightly larger text for emphasis */
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease; /* Smooth transition */
    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4); /* Subtle glow effect */
    text-align: center;
}

/* Hover Effect */
.pricing-btn > a:hover {
    background: linear-gradient(to right, #239ede, #0056b3); /* Blue Gradient on Hover */
    color: #fff; /* White text for better contrast */
    transform: scale(1.05); /* Slight hover scale effect */
    box-shadow: 0 5px 15px rgba(35, 158, 222, 0.5); /* Glow effect on hover */
}

.section-title.section-title2 > h2 {
    margin-bottom: 72px;
}
.video-area {
    position: relative;
    display: flex;
    justify-content: center; /* Centers the video horizontally */
    align-items: center; /* Centers the video vertically (if needed) */
    margin-top: 20px; /* Adds spacing above the video */
}

.video-area:before {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #000;
    content: "";
    opacity: .8;
    bottom: 0;
    top: 0;
    content: none; /* Removes the overlay */
}
.video-icon {
    display: inline-block;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.video-area > img {
    width: 100%;
}
.mfp-bg {
  z-index: 9999999;
}
.mfp-wrap {
  z-index: 99999999;
}
/* 10. Counter area */

.counter-icon i {
    color: #239ede;
    font-size: 28px;
}
.counter-icon {
    display: inline-block;
    float: left;
}
.counter-text {
    padding-left: 55px;
}
h3.counter {
    color: #239ede;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 3px;
}
.counter-text > p {
    color: #7a7a7a;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-transform: capitalize;
}
.blog-info-all {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    transition: all .3s ease 0s;
}
.blog-img img {
    width: 100%;
}
.blog-info > h2 {
    color: #5e5e5e;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.blog-info > h2 a {
    color: #5e5e5e;
}
.blog-info > h2 a:hover {
    color: #239ede;
}
.admin-date > span,
.admin-date > span a {
    color: #b3b3b3;
    font-size: 13px;
    font-weight: 400;
    position: relative;
    text-transform: capitalize;
}
.admin-date > span.admin {
    padding-right: 27px;
}
.admin-date > span.admin::after {
    background-color: #b3b3b3;
    content: "";
    font-size: 8px;
    height: 10px;
    margin-left: 11px;
    position: absolute;
    right: 10px;
    top: 5px;
    width: 1px;
}
ul.promo li:last-child::after {
    display: none;
}
.blog-info > p {
    color: #333;
    font-weight: 400;
    line-height: 23px;
    margin: 0;
}
.blog-info {
    padding: 45px 30px 36px;
}
.blog-btn {
    border-top: 1px solid #efefef;
    margin: 0 30px;
    padding: 16px 0 15px;
}
.admin-date {
    margin: 6px 0 15px;
}
.blog-btn > a {
    color: #8f8f8f;
    font-weight: 400;
    text-transform: uppercase;
}
.admin-date > span a:hover,
.blog-btn > a:hover {
    color: #239ede;
}
.single-blog {
    transition: all .3s ease 0s;
}
.single-blog:hover .blog-info-all {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
/* 11. Footer area */

.footer-top {
    padding: 58px 0 54px;
}
.footer-menu ul li {
    display: inline-block;
    margin: 0 8px;
}
.footer-menu ul li a {
    color: #949494;
    font-size: 12px;
    text-transform: uppercase;
}
.footer-menu ul li a:hover {
    color: #fff;
}
.contact ul li {
    color: #a4a4a4;
    display: inline-block;
    font-size: 12px;
    margin: 0 8px;
}
.contact ul li a {
    font-size: 12px;
    color: #a4a4a4;
}
.contact ul li a:hover {
    color: #fff;
}
.footer-menu {
    margin: 33px 0 10px;
}
.footer-bottom {
    border-top: 1px solid #373737;
}
.copyright > p {
    color: #9b9b9b;
    font-weight: 400;
    margin: 0;
    padding: 25px 0 22px;
}
.copyright > p a {
    color: #9b9b9b;
}
.copyright > p a:hover {
    text-decoration: underline;
}
/* 12. Scrollup */

#scrollUp {
    background: #239ede none repeat scroll 0 0;
    bottom: 85px;
    color: #ffffff;
    cursor: pointer;
    display: none;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    position: fixed;
    right: 12px;
    text-align: center;
    width: 38px;
    z-index: 9999;
}
#scrollUp:hover {
    background: #000 none repeat scroll 0 0;
}
/* 13. Blog details */

.breadcrumbs-text > h2 {
    color: #464646;
    font-size: 40px;
    font-weight: 800;
    text-transform: uppercase;
}
.breadcrumbs-text ul li {
    color: #666666;
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 11px;
}
.breadcrumbs-text ul li a.active {
    color: #464646;
}
.breadcrumbs-text ul li a.active:hover {
    color: #239ede;
}
.breadcrumbs-text ul li a i {
    padding-left: 14px;
}
.blog-details-content > img {
    margin-bottom: 52px;
    width: 100%;
}
.blog-details-wrapper {
    padding: 0 170px;
}
.blog-details-content > h2 {
    color: #5e5e5e;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}
.blog-details-content > p {
    color: #333;
    font-weight: 400;
    line-height: 25px;
    margin: 0;
}
.admin-date.b-details-admin-date {
    margin: 6px 0 21px;
}
p.blog-details-pera {
    margin-bottom: 26px;
}
h3.blog-details-title {
    color: #626262;
    font-size: 22px;
    font-weight: 500;
    text-transform: capitalize;
}
.comment-img {
    display: inline-block;
    float: left;
}
.comment-text {
    padding-bottom: 18px;
    margin: 0 10px 40px 119px;
}
.comment-text.second-border.blog-border {
    margin: 0 10px 40px 0px;
    padding-left: 119px;
}
.blog-border {
    border-bottom: 1px solid #ddd;
}
.blog-details-content {
    border-bottom: 1px solid #ededed;
    margin-bottom: 76px;
    padding-bottom: 70px;
}
.blog-details-comment h3 {
    margin-bottom: 35px;
}
.comment-text h4 {
    color: #5f5f5f;
    font-size: 14px;
    margin: 0;
    text-transform: uppercase;
}
.comment-text > span {
    color: #a2a2a2;
    display: block;
    font-size: 12px;
    margin: 4px 0 9px;
}
.comment-text > p {
    color: #7a7a7a;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
}
.comment-text > a {
    color: #5f5f5f;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin-top: 11px;
    text-transform: uppercase;
}
.comment-text > a:hover {
    color: #239ede;
}
.leave-form form input,
.leave-form form textarea {
    background-color: transparent;
    border-color: #eeeeee;
    border-style: solid;
    border-width: 0 0 1px;
    color: #969696;
    display: block;
    font-size: 13px;
    font-weight: normal;
    height: 40px;
    line-height: 29px;
    margin-bottom: 44px;
    padding: 0 30px 0 0;
    text-transform: capitalize;
    width: 100%;
    font-weight: 400;
}
.leave-form form textarea {
    height: 57px;
    margin-bottom: 33px;
}
.leave-form form input::-moz-placeholder {
    color: #969696;
    font-size: 13px;
    opacity: 1;
}
.leave-form form input::-webkit-placeholder {
    color: #969696;
    font-size: 13px;
    opacity: 1;
}
button.submit {
    background-color: #239ede;
    border: medium none;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    padding: 14px 38px;
    text-transform: uppercase;
    transition: all .3s ease 0s;
}
button.submit:hover {
    background-color: #333;
}
.blog-details-comment {
    padding-bottom: 12px;
}
.leave-comments h3 {
    margin-bottom: 33px;
}
.single-comment.middle-blog {
    margin-left: 118px;
}

/* 5. blog sidebar */


h3.blog-sidebar-text {
  border-bottom: 1px solid #ddd;
  color: #505050;
  display: block;
  font-size: 18px;
  margin-bottom: 30px;
  padding-bottom: 10px;
  position: relative;
  text-transform: uppercase;
}

h3.blog-sidebar-text::before {
  background: #239ede none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: all 0.4s ease 0s;
  width: 40px;
}

.blog-search > form {
  position: relative;
}
.blog-search input[type="text"] {
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-radius: 0;
  color: #666666;
  height: 40px;
  line-height: 28.8px;
  margin: 0;
  outline: medium none;
  padding: 5px 48px 5px 15px;
  position: relative;
  transition: all 0.4s ease 0s;
  width: 100%;
}
.blog-search button.submit {
  background-color: #239ede;
  border: 1px solid #239ede;
  height: 40px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 45px;
}
.blog-search button.submit:hover {
  background-color: #000;
  border: 1px solid #000;
}
.blog-search button.submit i {
  color: #fff;
  font-size: 15px;
  line-height: 40px;
}

.single-site-video {
  display: block;
  margin-bottom: 15px;
  overflow: hidden;
}

.blog-video-img {
  display: inline-block;
  float: left;
}

.blog-video-text {
  padding-left: 110px;
}
.blog-video-text > h3 {
  color: #666666;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 5px;
  transition: all 0.3s ease 0s;
}
.blog-video-text > h3 a {
  color: #666666;
}
.blog-video-text > h3 a:hover {
  color: #239ede;
}
.blog-video-text > span {
  color: #a3a3a3;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.blog-right-sidebar-top ul li a {
  border-bottom: 1px solid #f1f1f1;
  color: #6e6e6e;
  display: block;
  font-size: 13px;
  font-weight: 400;
  padding: 10px 0;
  text-transform: uppercase;
}

.blog-right-sidebar-top ul li a:hover {
  color: #239ede;
}
.blog-right-sidebar-top ul li a span {
  float: right;
  transition: all 0.3s ease 0s;
}

.blog-right-sidebar-bottom li {
  display: inline-block;
  margin: 0 11px 8px 0;
}
.blog-right-sidebar-bottom a {
  color: #6e6e6e;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
}

.blog-right-sidebar-bottom a:hover {
  color: #239ede;
}
.pages ul li {
  display: inline-block;
}


.pages ul li {
  display: inline-block;
  margin-right: 10px;
}
.pages ul li a {
  border: 1px solid #efefef;
  color: #000;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 35px;
}


.pages ul li a:hover , .pages ul li a.active {
  background-color: #239ede;
    color: #fff;
}

/* My Custom Enhancements */

/* Hero Section Enhancements */
.slider-wrapper .single-slide {
    background: linear-gradient(45deg, #9dd9fa, #eff2f5); /* Gradient colors */
    background-size: 200% 200%; /* Creates a large background for animation */
    animation: gradientAnimation 6s ease infinite; /* Smooth transition */
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hover Effect for Call-to-Action Button */
.slider-btn:hover {
    transform: scale(1.1); /* Slightly enlarges the button */
    box-shadow: 0px 5px 15px rgba(35, 158, 222, 0.4); /* Adds a glowing effect */
}

/* What You'll Learn: Icon Hover Effects */
.single-service span {
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.single-service:hover span {
    transform: scale(1.2); /* Enlarges icon slightly */
    color: #3a3a3a; /* Changes icon color */
}

/* Optional: Add a subtle shadow to the service box on hover */
.single-service:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Enlarged and Enhanced Primary Button */
.btn-primary {
    margin-bottom: 30px; /* Space below pricing */
    background: linear-gradient(to right, #ffdf00, #ff9900); /* Enhanced Gold Gradient */
    border: none; /* Clean design */
    color: #000; /* Text color */
    padding: 1rem 2rem; /* Larger padding for a bigger button */
    font-size: 1.5rem; /* Larger text */
    font-weight: bold; /* Emphasize text */
    border-radius: 50px; /* More rounded corners */
    text-transform: uppercase; /* Make the text bold and capitalized */
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 153, 0, 0.5); /* Soft golden glow */
}

/* Hover Effect */
.btn-primary:hover {
    background: linear-gradient(to right, #239ede, #0056b3); /* Blue Gradient on Hover */
    color: #fff; /* White text for contrast */
    transform: scale(1.1); /* Slight enlargement */
    box-shadow: 0 10px 25px rgba(35, 158, 222, 0.6); /* Glow for hover */
}

/* Pricing Section Enhancements */

/* Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply Animation to Pricing Cards */
.single-pricing {
    animation: fadeIn 1.5s ease-in-out;
    opacity: 0; /* Hidden initially */
    animation-fill-mode: forwards; /* Ensures visibility after animation */
    background: #ffffff; /* Ensure a clean white background */
    border: 1px solid #ddd; /* Add subtle border */
    border-radius: 10px; /* Slightly rounded corners */
    padding: 30px 20px; /* Better padding inside cards */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover */
}

.single-pricing:nth-child(1) {
    animation-delay: 0.2s; /* Staggered animation */
}

.single-pricing:nth-child(2) {
    animation-delay: 0.4s;
}

.single-pricing:nth-child(3) {
    animation-delay: 0.6s;
}

.single-pricing:hover {
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

/* Pricing Icon */
.pricing-icon i {
    font-size: 40px;
    color: #239ede; /* Golden color for icons */
    margin-bottom: 15px;
}

/* Pricing Value */
.pricing-value h3 {
    font-size: 32px;
    color: #333; /* Ensure visibility */
    margin: 0;
    font-weight: bold;
}

/* Discount Pricing */
.pricing-discount-title h4 {
    color: red; /* Red for old price */
    text-decoration: line-through; /* Strikethrough */
    font-weight: bold; /* Emphasize */
    font-size: 2rem; /* Adjusted size */
    margin-bottom: 10px; /* Space between price and discount */
}

/* Prominent Pricing Text */
.pricing-value-title .price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #28a745; /* Green for emphasis */
    text-transform: uppercase;
    margin: 0;
    display: inline-block; /* Inline alignment */
}

/* Features List */
.pricing-value-content ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pricing-value-content ul li {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Add Check Icon for Features */
.pricing-value-content ul li::before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #28a745; /* Green checkmark */
}

/* Pricing Button */
.pricing-btn > a {
    background: linear-gradient(to right, #ffd700, #ff9900); /* Gold gradient */
    color: #000; /* Text color */
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.pricing-btn > a:hover {
    background: linear-gradient(to right, #239ede, #0056b3); /* Blue gradient */
    color: #fff; /* White text */
    transform: scale(1.05); /* Slight hover enlargement */
    box-shadow: 0 4px 10px rgba(35, 158, 222, 0.4); /* Subtle glow effect */
}

/* Testimonials Section Enhancements */

/* Slide-In Animation */
@keyframes slideIn {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply to Testimonial Text */
.single-testi-text {
    animation: slideIn 1s ease-in-out;
    opacity: 0; /* Hidden initially */
}

.single-testi-text.slick-current {
    animation-delay: 0s; /* Immediate animation for current slide */
    animation-fill-mode: forwards; /* Stays visible after animation */
}

/* Counter Area Enhancements */

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Apply Bounce Animation to Numbers */
h3.counter {
    animation: bounce 2s infinite;
    font-size: 36px; /* Enlarged font size */
    color: #239ede; /* Matches theme */
}

/* FAQ Section Styling */
.faq-area {
    padding: 120px 0 90px;
    background-color: #f9f9f9;
}

.faq-area .section-title {
    margin-bottom: 50px;
}

.single-faq {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.single-faq:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.single-faq h4 {
    color: #239ede;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.single-faq p {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Custom Text Colors */
/* Style for spans inside slide-text h2 */
.slide-text h2 .dark-gold {
    color: #b8860b; /* Dark Gold */
    font-weight: bold;
}

.slide-text h2 .blue-text {
    color: #239ede; /* The existing blue */
    font-weight: bold;
}

/* Call-to-Action Banner Styling */
.cta-banner-area {
    background: linear-gradient(to top, #6dc6f7, #d2e8ff); /* Blue gradient background */
    padding: 50px 20px;
    color: #fff; /* White text for contrast */
    text-align: center;
    margin-bottom: 60px;
    border-radius: 8px; /* Optional: Adds soft corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
}

.cta-banner-area h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.cta-banner-area p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.cta-btn {
    display: inline-block;
    background: linear-gradient(to right, #ffd700, #ff9900); /* Gold gradient */
    color: #000; /* Text color */
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 40px;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.5);
}

.cta-btn:hover {
    background: linear-gradient(to right, #ff9900, #ffd700); /* Reverse Gold Gradient */
    color: #fff; /* White text */
    transform: scale(1.05); /* Slight enlargement */
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.7); /* Enhanced shadow */
}


.contact-form iframe {
    width: 100%;
    height: auto;
    max-width: 640px;
}

/* Gradient Background for Contact Page */
body.contact-page {
    background: linear-gradient(to bottom, #6dc6f7, #d2e8ff);
    background-repeat: no-repeat;
    background-attachment: fixed; /* Makes background fixed while scrolling */
    background-size: cover; /* Ensures the gradient covers the viewport */
    color: #fff; /* Adjust text color for readability */
}