/*===============================================
Template Name:  - SEO Marketing Agency HTML5 Template
Author:  https://Templatemonstar.net/user/DRtheme
Description: Description
Version: 1.0.0
Text Domain:
Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01.  Header Top Menu Area Css
02.  Nav Menu Area Css 
03.  Slider Area Css
04.  Section Title Css
05.  Service Area css
06.  About Area Css
07.  Counter Area Css
08.  Case Study Area Css
09.  Testimonial Area Css
10.  Process Area Css
11.  Team Area Css
12. Faq Area Css
13.  Brand Section Css
14. Call Do Section Css
15.  Form Box Css
16.  Skill Area Css
17.  Blog Area Css
18.  footer Area Css
19.  Subscribe Area Css
20.  Lines CSS
21.  Prossess Ber Css
22.  Scrollup Section
23.  Bounce Animation Css 
24.  Animation Dance
25.  Breadcumb Area Css
26.  abouts_areas Css
27.  Feture-Area Css
28.  Pricing Section Css
29.  Web Development Section CSS
30.  Contact  US Css
31.  Blog Sidber Widget CSS
32.  Case Study Details Css
33.  Search Box Css
34.  Loader Css
=======================*/


:root {
    --font-sans: 'Elms Sans', sans-serif;
    --font-serif: 'Elms Sans', serif;

  --color-black:#000;
  --color-white:#fff;
  --color-navy-900:#012549;
  --color-navy-950:#030f25;
  --color-charcoal-950:#080a10;
  --color-teal-700:#0d6c68;
  --color-gray-950:#0e0e0e;
  --color-gray-900:#101010;
  --color-gray-925:#101210;
  --color-gray-930:#111111;
  --color-slate-900:#1f212b;
  --color-slate-800:#212529;
  --color-slate-700:#223645;
  --color-sky-700:#267591;
  --color-gray-800:#282828;
  --color-blue-600:#2871ff;
  --color-gray-700:#333;
  --color-gray-600:#616161;
  --color-gray-500:#63636b;
  --color-green-400:#67d295;
  --color-walgwan-green: #4b7a20; 
  --color-gray-450:#878787;
  --color-violet-300:#9990b8;
  --color-gray-300:#ddd;
  --color-gray-250:#e5e5e5;
  --color-gray-220:#e6e6e6;
  --color-gray-210:#e8e8e8;
  --color-gray-150:#f6f5f5;
  --color-amber-500:#ffb500;
  --color-rgb-black-10:rgb(0 0 0 / 10%);
  --color-purple-base-rgb:rgb(0, 56, 49);
  --color-purple-base-rgb:rgb(0, 80, 70);
  --color-rgb-teal-700:rgb(13, 107, 104);
  --color-rgb-gray-300:rgb(217, 217, 217);
  --color-rgb-gray-100:rgb(244, 244, 244);
  --color-yellow-light-30-rgb:rgb(247, 245, 240);
  --color-rgb-white-98:rgb(254, 254, 255);
  --color-rgb-charcoal-900:rgb(35, 35, 35);
  --color-rgb-gray-600:rgb(65, 65, 65);
  --color-rgb-gray-580:rgb(92, 92, 92);
  --color-rgb-gray-570:rgb(97, 97, 97);
  --color-rgba-black-10:rgba(0, 0, 0, 0.1);
  --color-rgba-black-30:rgba(0, 0, 0, 0.3);
  --color-rgba-black-005:rgba(0,0,0,0.05);
  --color-rgba-black-010:rgba(0,0,0,0.10);
  --color-rgba-black-012:rgba(0,0,0,0.12);
  --color-rgba-black-020:rgba(0,0,0,0.20);
  --color-rgba-black-090:rgba(0,0,0,0.90);
  --color-rgba-ink-10:rgba(13,14,20,0.1);
  --color-rgba-lime-20:rgba(187, 247, 55, 0.2);
  --color-rgba-white-902:rgba(255, 255, 255, 0.902);
  --color-rgba-white-20:rgba(255,255,255, 0.20);
  --color-rgba-white-102:rgba(255,255,255,0.10196078431372549);
  --color-rgba-gray-10:rgba(89, 89, 89, 0.1);
  --color-transparent:transparent;
  --color-current:currentColor;
  --color-rgb-blueink-10:rgb(26 46 85 / 10%);

  --color-purple-base-rgb: rgb(46, 35, 90);
  --color-purple-light-30-rgb: rgb(109, 101, 140);
  --color-purple-dark-30-rgb: rgb(32, 25, 63);

  --color-yellow-base-rgb: rgb(242, 178, 51);
  --color-yellow-light-30-rgb: rgb(255, 250, 240);
  --color-yellow-dark-30-rgb: rgb(169, 125, 36);

}
/* Contact form status box */
#status{
  width:50%;
  margin:20px auto;
  padding:20px;
  border:1px dashed #000;
  box-sizing:border-box;
  text-align:center;
  color: black;
}

#status .form-errors{ color:#a94442;  padding:10px; border-radius:6px; }
#status .messageSent{ color:#3c763d; padding:10px; border-radius:6px; }

/* More specific selector for contact page to override conflicts */
.contact-section #status{
  width:50%;
  margin:20px auto;
  padding:20px;
  border:1px dashed #000;
  box-sizing:border-box;
  text-align:center;
  color: black;
}

/* Ensure choose section image fills its column fully */
.choose-section .row.align-items-center {
  align-items: stretch;
}

/* Ensure choose-section columns align content to the top */
.choose-section .row > [class*="col-"] {
  align-self: flex-start;
}

/* Limit images inside choose-thumb to a maximum height */
.choose-thumb img,
.choose-thumb .img-responsive {
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Round corners and remove bottom spacing for choose-thumb */
.choose-thumb {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: block;
}
.choose-thumb img,
.choose-thumb .img-responsive {
  border-radius: 5px;
  display: block;
  overflow: hidden;
}
.choose-section .choose-thumb {
  width: 100%;
  height: auto;
  min-height: auto; /* allow thumb to size to image height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Make the columns equal height and allow content to fill the column */
.choose-section .col-lg-4,
.choose-section .col-lg-8 {
  display: flex;
  flex-direction: column;
  padding: 0; /* keep original spacing handled by inner elements */
}
.choose-section .choose-thumb {
  flex: 1 1 auto;
}
.choose-section {
  overflow: visible;
}
.choose-section .choose-thumb {
  overflow: hidden; /* allow sides to overflow visually within parent */
}

/* Make the whole choose-section span the viewport and columns match that height */
.choose-section {
  min-height: auto;
}
.choose-section .col-lg-4,
.choose-section .col-lg-8 {
  height: auto;
}

/* Remove default container padding for full-width choose-section */
.choose-section .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.choose-section .choose-single-box {
  flex: 1 1 auto; /* allow right column content to fill full column height */
}
.choose-section .choose-single-box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center content in right column */
  padding: 30px; /* keep spacing similar to original layout */
}

.btn, button, input[type="button"], input[type="submit"], a.button, .button a, .main-btn, .service-button a, .section-button a {
  border-radius: 5px;
}

/* Ensure main menu and prominent section buttons have rounded bottom corners too */
.main-btn, .sticky .main-btn {
  border-radius: 5px;
}
/*==============header-main-area-start=====================*/

.Mindfresh_nav_manu {
  transition: .5s;
  z-index: 2;
  position: relative;
  padding: 15px 60px 20px;
  background-color: var(--color-white);
}

.header-menu-area {
  position: relative;
  z-index: 999;
  border-top: 1px solid var(--color-gray-300);
  padding: 5px 0;
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    background-color: var(--color-white);
    -webkit-box-shadow: 0 2px 5px -2px var(--color-rgba-black-10);
    box-shadow: 0 2px 5px -2px var(--color-rgba-black-10);
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

.sticky .Mindfresh_menu>ul>li>a {
    color: var(--color-gray-900);
}

.sticky .main-btn {
    background: var(--color-purple-base-rgb);
}

/* Style-2 */

.style-2 nav.Mindfresh_menu {
  text-align: right;
}

.style-2 .section-button a {
  margin-top: 0 !important;
  padding: 21px 33px !important;
  display: inline-block;
}


/*  Menu Css*/

.header-menu-sticky {
  display: none;
}
.header-menu-sticky.sticky {
  display: block;
}

nav.Mindfresh_menu {
    position: relative;
    z-index: 1;
}

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

/* Values list styling: remove default bullets and align icon with text */
.values-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.values-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.values-list li i {
  color: var(--color-walgwan-green);
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 0.2rem;
}
.values-list li p {
  margin: 0;
}

/* Disable decorative ::before pseudo-elements/animations on image thumbs */
.about-thumb::before,
.about-thumb:before,
.about-thumb:hover::before,
.about-thumb:hover:before,
.about-two-thumb::before,
.about-two-thumb:hover::before,
.team-single-thumb::before,
.team-box-inner:hover .team-single-thumb::before {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}

/* Center and crop oversized images inside about-thumb */
.about-thumb {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-thumb img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: cover;
  display: block;
}

/* When the about section uses a single full-width column, allow the image to fill the container */
.about-section .about-single-box .about-thumb img {
  max-width: 80% !important;
  width: 80% !important;
  margin-left: auto;
  margin-right: auto;
}

.about-thumb-caption {
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-gray-600);
  margin-top: 0.5rem;
}

/* Inner container stacks image and caption vertically */
.about-thumb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.about-thumb-inner img {
  width: 100%;
  height: auto;
}

/* Ensure about section rows align content to the top */
.about-section .row.align-items-center {
  align-items: flex-start !important;
}

/* Use the same lighter background and vertical spacing as other main sections */
.about-section {
  background-color: #ffffff; /* keep white background for about section */
  padding: 20px 0;
}

/* Purple contact button style used in header main button */
.btn-purple {
  background: var(--color-purple-base-rgb) !important;
  color: #fff !important;
  border-color: transparent !important;
  padding: 12px 28px !important;
  border-radius: 5px !important;
  display: inline-block;
}
.btn-purple:hover {
  background: var(--color-purple-dark-30-rgb) !important;
  color: #fff !important;
}
.mb-large { margin-bottom: 30px !important; }

.Mindfresh_menu>ul>li {
  display: inline-block;
  position: relative;
  margin-right: 20px; /* reduced to prevent wrapping when global text-size is larger */
  z-index: 1;
}

.Mindfresh_menu>ul>li.lang-switcher { margin-right: 12px; }


.Mindfresh_menu>ul>li>a {
  text-decoration: none;
  position: relative;
  font-size: 16px; /* slightly smaller to avoid wrapping */
  display: block;
  padding: 0;
  transition: .5s;
  color: var(--color-rgb-gray-580);
  margin: 21px 0 21px;
  font-weight: 600;
  font-family: var(--font-serif);
}


.Mindfresh_menu>ul>li>a:hover{
    color: var(--color-rgb-teal-700);
}


nav.Mindfresh_menu span {
    font-size: 11px;
    font-family: var(--font-serif);
}

.sticky .Mindfresh_menu ul {
  margin-left: 35px;
}


/*menu button*/
 
.header-src-btn {
  display: inline-block;
  position: relative;
  padding-right: 30px;
  top: 10px;
}

.header-src-btn::before {
  position: absolute;
  content: "";
  top: -40px;
  left: -45px;
  height: 50px;
  width: 1px;
  background-color: var(--color-gray-300);
}

.search-box-btn.search-box-outer {
  position: absolute;
  bottom: 4px;
  right: 25px;
}

.header-box {
  margin-left: 60px;
}

/*Style Two Nav Menu*/

.style-two.Mindfresh_nav_manu {
    border-bottom: 1px solid var(--color-rgba-white-102);
}

.style-two .Mindfresh_menu>ul>li>a {
    color: var(--color-white);

}

/*style two btn*/



/*** Sub Menu Style 
==========================***/

.Mindfresh_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 217px;
    text-align: left;
    background: var(--color-white);
    padding: 0;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px var(--color-rgba-black-30);
    box-shadow: 0px 1px 3px var(--color-rgba-black-30);
    transition: .5s;
    visibility: hidden;
    opacity: 0;
}

.Mindfresh_menu ul li:hover>.sub-menu {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

.Mindfresh_menu ul .sub-menu li {
    position: relative;
}

.Mindfresh_menu ul .sub-menu li a {
    text-decoration: none;
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px; /* match main menu size to prevent wrapping */
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: .1s;
    transition: .1s;
    visibility: inherit !important;
    color: var(--color-gray-925) !important;
}

.Mindfresh_menu ul li .sub-menu li a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  background-color: var(--color-purple-base-rgb);
  z-index: -1;
  transition: 0.5s;
}

.Mindfresh_menu ul li .sub-menu li a:hover:before {
  height: 100%;
  top: 0;
}

.Mindfresh_menu ul .sub-menu li:hover>a,
.Mindfresh_menu ul .sub-menu .sub-menu li:hover>a,
.Mindfresh_menu ul .sub-menu .sub-menu .sub-menu li:hover>a,
.Mindfresh_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover>a {
    color: var(--color-white) !important;
    transition: .5s;
}

/* sub menu 2 
=================*/

.Mindfresh_menu ul .sub-menu .sub-menu {
    left: 100%;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.Mindfresh_menu ul .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

/* sub menu 3 
==================*/

.Mindfresh_menu ul .sub-menu .sub-menu li {
    position: relative;
}

.Mindfresh_menu ul .sub-menu .sub-menu .sub-menu {
    right: 100%;
    left: auto;
    top: 130%;
    opacity: 0;
    visibility: hidden;
}

.Mindfresh_menu ul .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

ul.sub-menu li a span {
    background-color: var(--color-purple-base-rgb);
    padding: 5px 10px;
    color: var(--color-white);
    opacity: 1;
    font-family: var(--font-serif);
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span{
    background: var(--color-purple-light-30-rgb);
}

/* sub menu 4 
====================*/

.Mindfresh_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}


.Mindfresh_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

.Mindfresh_menu li a:hover:before {
    width: 101%;
}
.logo_img img {
  width: 125px;
}
/* Sticky header: make the logo smaller only inside the sticky/header-menu-sticky */
.header-menu-sticky .logo_img img,
.header-menu-sticky .main_sticky img {
  width: 80px;
  height: auto;
}
.Mindfresh_nav_manu.sticky .logo_img {
    display: none;
}

.main_sticky {
    display: none;
}

.Mindfresh_nav_manu.sticky .main_sticky {
    display: inherit;
}

/* Make sticky header logo half the height of the main logo */
.Mindfresh_nav_manu.sticky .main_sticky img {
  width: 62px;
  height: auto;
}

.mobile-menu.mean-container {
  overflow: hidden;
}

/* Mobile menu header (logo + bilingual name) */
.mobile-menu .mobile-menu-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background-color: var(--color-purple-base-rgb);
  color: var(--color-white);
  flex-wrap: nowrap;
}
.mobile-menu .mobile-menu-header .mobile-logo{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
}
.mobile-menu .mobile-menu-header .mobile-logo img{
  width:44px;
  height:auto;
  display:block;
}
.mobile-menu .mobile-menu-header .mobile-title{
  font-family: var(--font-serif);
  font-weight:700;
  font-size:16px;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make mobile menu links use purple on white background, purple->white on hover */
.mobile-menu-area .mobile-menu nav.Mindfresh_menu a{
  color: var(--color-purple-base-rgb) !important;
}
.mobile-menu-area .mobile-menu .sub-menu a{
  color: var(--color-purple-base-rgb) !important;
}
.mobile-menu-area .mobile-menu nav.Mindfresh_menu a:hover,
.mobile-menu-area .mobile-menu .sub-menu a:hover{
  color: var(--color-white) !important;
}

.header-cart {
  position: relative;
  display: inline-block;
  margin-right: 45px;
}

.header-cart::before {
  position: absolute;
  content: "";
  top: -12px;
  left: -30px;
  height: 50px;
  width: 1px;
  background-color: var(--color-gray-300);
}

span.counters {
  border-radius: 50%;
  text-align: center;
  position: relative;
  top: -15px;
  left: -10px;
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb);
  height: 20px;
  width: 20px;
  line-height: 20px;
  display: inline-block;
}

.header-icon {
 float: left;
 position: relative;
}

.style-head::before {
  position: absolute;
  content: "";
  top: 0;
  left: -70px;
  height: 45px;
  width: 1px;
  background: var(--color-gray-300);
}

.header-icon i {
  font-size: 18px;
  height: 35px;
  width: 35px;
  line-height: 35px;
  display: inline-block;
  text-align: center;
  color: var(--color-purple-base-rgb);
  background-color: var(--color-gray-300);
  border-radius: 100%;
  position: absolute;
}

.header-content p {
  font-size: 13px;
  font-family: var(--font-serif);
  color: var(--color-rgb-gray-600);
  line-height: 1.6;
  margin: 0;
}

.header-content {
  margin-left: 40px;
  padding-top: 2px;
}

.header-content span{
  font-size: 16px;
  font-family: var(--font-serif);
  color: var(--color-rgb-charcoal-900);
  line-height: 1.4;
}

.header-single-box {
  text-align: right;
}

.section-button {
  display: inline-block;
}

.header-button a {
  margin-top: 0 !important;
  padding: 21px 33px !important;
  display: inline-block;
}

/*=============sticky-header-area-end================*/




/*=============start-home-section================*/

.slider-area {
  background-image: url(../images/resource/slide-img.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 195px 0;

  display: block;
  background-color: var(--color-purple-base-rgb);
  transition: .5s;
  width: 100%;
}

/* Ensure slider text is white when background images are used */
.slider-area .section-title h5,
.slider-area .slider-title h5,
.slider-area .section-title h1,
.slider-area .section-title h2,
.slider-area .section-title p,
.slider-area .slider-title h1,
.slider-area .slider-title p {
  color: #ffffff !important;
}

.slider-area .section-button a {
  color: #ffffff !important;
}

/* Make slider buttons use the purple theme like .btn-purple */
.slider-area .section-button a {
  background: var(--color-purple-base-rgb) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 26px !important;
  border-radius: 5px !important;
  display: inline-block !important;
}
.slider-area .section-button a:hover {
  background: var(--color-purple-dark-30-rgb) !important;
  color: #fff !important;
}

/* Larger slider typography */
.slider-area .slider-title h5 { font-size: 20px !important; letter-spacing: 2px; }
.slider-area .slider-subtitle { font-size: 20px !important; letter-spacing: 2px; color: #ffffff !important; margin: 0 0 8px 0; }
.slider-area .slider-title h1 { font-size: 64px !important; line-height: 1.05 !important; }
.slider-area .slider-title p { font-size: 20px !important; }
.slider-area .slider-title h1 { margin-bottom: 18px !important; }
.slider-area .section-button a { font-size: 18px !important; padding: 16px 26px !important; }

.section-title h5 {
  font-size: 18px;
  font-family: var(--font-serif);
  color: var(--color-rgb-charcoal-900);
  line-height: 1.688;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-title h2 {
  font-size: 45px;
  font-family: var(--font-serif);
  color: var(--color-purple-base-rgb);
  font-weight: bold;
  line-height: 1.22;
  margin-top: 18px;
}

.section-title p {
  font-size: 18px;
  font-family: var(--font-serif);
  color: var(--color-rgb-gray-600);
  line-height: 1.75;
  margin-top: 30px;
  font-weight: 400;
}

.section-title span{
  font-size: 17px;
  text-transform: uppercase;
  color: var(--color-purple-base-rgb);
  font-weight: 500;
}

.about-sub-title p {
  font-size: 18px;
  font-weight: 700;
  width: 60%;
  padding: 12px 90px;
  color: var(--color-purple-base-rgb);
  background-color: var(--color-white);
  box-shadow: 6px 5px 30px var(--color-rgba-black-012);
}

.about-sub-title p span {
  height: 40px;
  width: 40px;
  display: inline-block;
  line-height: 40px;
  background: var(--color-gray-300);
  border-radius: 50%;
  text-align: center;
}

.about-sub-title {
  transform: rotate(270deg);
  position: relative;
  top: -430px;
  left: 190px;
}

.social-icon {
  display: inline-block;
  margin-left: 40px;
}

.social-icon ul{
  list-style: none;
}

.social-icon ul li{
  display: inline-block;
}

.social-icon ul li a {
  font-size: 18px;
  display: inline-block;
  color: var(--color-purple-base-rgb);
  height: 40px;
  width: 40px;
  margin-right: 18px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--color-gray-300);
  transition: .5s;
}

.social-icon ul li a:hover{
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb);
}

.about-thumb:hover:before{
  margin: -20px 0px 0 20px;
  transition: .5s;
}

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

.appoinment-single-box {
  background-color: var(--color-white);
  box-shadow: 0px 10px 35px 0px var(--color-rgba-gray-10);
  padding: 40px 55px 50px 50px;
  border-top: 7px solid var(--color-purple-base-rgb);
  position: relative;
  margin: 0px 80px 0 15px;
  z-index: 1;
}

.about-appoinment h2 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  color: var(--color-purple-base-rgb);
  margin-bottom: 50px;
  font-family: var(--font-serif);
}

.about-appoinment h2::before {
  position: absolute;
  content: "";
  top: 70px;
  left: 55px;
  height: 1px;
  width: 95px;
  background-color: var(--color-purple-base-rgb);
}

.about-appoinment h2::after {
  position: absolute;
  content: "";
  top: 70px;
  right: 55px;
  height: 1px;
  width: 95px;
  background-color: var(--color-purple-base-rgb);
}

.appoinment-scedule ul{
  list-style: none;
}

.appoinment-scedule ul li {
  position: relative;
  font-size: 20px;
  color: var(--color-purple-base-rgb);
  padding: 12px 0;
  font-family: var(--font-serif);
}

.appoinment-scedule ul li p{
  display: inline-block;
}

.appoinment-scedule ul li p::before {
  position: absolute;
  content: "";
  top: 26px;
  left: 142px;
  height: 1px;
  width: 150px;
  background-color: var(--color-rgb-teal-700);
  opacity: .8;
}

.appoinment-scedule ul li i {
  display: inline-block;
  margin-right: 15px;
}

.appoinment-scedule ul li span{
  float: right;
}

.appointment-section {
  background-color: var(--color-purple-base-rgb);
  padding: 130px 0;
}


.style-one button{
  text-transform: uppercase !important;
   width: 100%;
}

.bg-up {
  background-color: var(color-gray-150);
  padding: 40px 0px 20px 40px;
  margin-top: 45px;
}

.about-sub-content h4 {
  font-size: 25px;
  font-weight: bold;
  margin: 18px 0 5px;
  font-family: var(--font-serif);
}

.about-sub-content p{
  font-size: 18px;
  font-family: var(--font-serif);
}

.prossess-ber-plugin {
  margin: 35px 0 0px;
}

.prossess-ber-plugin span {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-purple-base-rgb);
  font-family: var(--font-serif);
}

.barfiller {
  width: 100%;
  height: 5px;
  position: relative;
  margin-bottom: 27px;
  margin-top: 12px;
  border-radius: 5px;
  background-color: var(--color-gray-300) !important;
}

.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: var(--color-gray-700);
  z-index: 1;
}

.barfiller .tipWrap { display: none; }

.barfiller .tip {
  font-size: 18px;
  left: 0px;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
  top: -30px;
  font-weight: 700;
  color: var(--color-purple-base-rgb);
}

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

.fill {
  background-color: var(--color-purple-base-rgb) !important;
  border-radius: 5px;
}

.home-play-button {
  font-size: 17px;
  display: inline-block;
  position: relative;
  color: var(--color-white);
  margin-top: 27px;
  padding: 13px 34px;
  transition: .5s;
  border-radius: 5px;
  font-weight: 500;
  z-index: 1;
}

/*=================end-about-area===================*/





/*=================start-service-section===================*/
.service-section {
  background-color: var(--color-gray-100); /* lighter gray used on team choose-section */
  padding: 20px 0;
}

.service-single-box {
  position: relative;
  background-color: var(--color-white);
  text-align: center;
  transition: .5s;
  z-index: 1;
  margin-bottom: 30px;
  height: auto; /* allow content to determine box height so CTAs remain inside */
  cursor: pointer;
  border-radius: 0 0 5px 5px;
  display: flex;
  flex-direction: column;
}

/* Make service cards equal-height in their grid row and push CTA to bottom */
.service-section .row > [class*="col-"] {
  display: flex;
  align-items: stretch;
}
.service-section .row > [class*="col-"] .service-single-box {
  flex: 1 1 auto;
}
.service-single-box .service-button {
  margin-top: auto; /* push button to bottom */
}

/* Reduced height for service boxes when listing team members on the team page */
.service-section.team-listing .service-single-box {
  height: 420px;
}

.service-single-box::before {
  position: absolute;
  content: '';
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--color-rgb-teal-700);
}

.service-single-box::after {
  position: absolute;
  content: '';
  opacity: 0;
  left: 50%;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background-color: var(--color-rgb-teal-700);
  transition: .5s;
  z-index: -1;
}

.upper-1 {
  margin-bottom: 70px;
}

.service-icon {

  padding: 0;
  height: 300px; /* fixed height for visual consistency */
  overflow: hidden; /* crop overflow */
  position: relative;
  border-radius: 5px 5px 0 0;
}

.service-icon img {
  display: block;
  width: 100%;
  height: 100%; /* fill the container but show whole image */
  object-fit: contain; /* show the entire image without cropping */
  object-position: center center; /* center the image */
  padding: 0;
  background: none;
}

.section-sub-title {
  overflow: visible; /* allow content to flow */
  height: auto;
  padding: 18px 0; /* small vertical spacing so buttons remain visible */
  flex: 1 1 auto; /* allow this area to grow while keeping the CTA visible */
}

/* variant without fixed height for full-length text sections */
.section-sub-title.full,
.section-sub-title.no-height {
  overflow: visible;
  height: auto;
}
.section-sub-title.full p,
.section-sub-title.no-height p {
  width: 100%;
}
.section-sub-title h3 a {
  font-size: 23px;
  color: var(--color-purple-base-rgb);
  font-weight: bold;
  line-height: 1.174;
  margin: 15px 0 17px;
  transition: .5s;
  display: inline-block;
  font-family: var(--font-serif);
}

/* Add spacing after main titles on service pages */
.site-pages-header h2,
.section-sub-title.full h2 {
  margin-bottom: 30px;
}

.section-sub-title p {
  font-size: 18px;
  font-weight: 400;
  margin: 0 auto 0;
  width: 82%;
  color: var(--color-rgb-gray-600);
  line-height: 1.688;
  transition: .5s;
  font-family: var(--font-serif);
}

/* Services: keep title centered but align the short description left */
.service-single-box .section-sub-title h3 a {
  text-align: center;
  display: block;
}
.service-single-box .section-sub-title p {
  text-align: left;
  width: 100%;
  margin: 6px 0 0;
  padding: 0 18px; /* horizontal padding so description doesn't touch edges */
}

/* Services images background color */
.service-single-box .service-icon {
  background-color: #fbf8f1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px; /* give some breathing room around images */
}
.service-single-box .service-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}

.service-button a {
  font-size: 15px;
  margin-top: 25px;
  transition: .5s;
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--font-serif);
  margin-bottom: 20px;
}

.service-button span {
  margin-left: 7px;
}

.service-single-box:hover::after {
  left: 0;
  width: 100%;
  opacity: 0.2;
}

.service-button a:hover{
  color: var(--color-rgb-teal-700);
}

/*===============end-service-section===================*/




/*==================start-why-choose-section==============*/

.choose-single-box {
  background-color: var(--color-purple-base-rgb);
  padding: 40px 10px 40px 64px;
  margin: 0; /* allow layout to control positioning */
  height: auto; /* let flexbox manage height so it matches the image column */
}

/* Page-specific override for team.php: use light grey background and black text
   Targets only the choose-section instance with id why-choose-us-placeholder */
#why-choose-us-placeholder .choose-single-box {
  background-color: var(--color-gray-100) !important;
  color: var(--color-gray-925) !important;
}

/* Spacing: add top margin to separate from previous section */
#why-choose-us-placeholder {
  margin-top: 30px;
}
#why-choose-us-placeholder .choose-single-box .text-white h2,
#why-choose-us-placeholder .choose-single-box .text-white p,
#why-choose-us-placeholder .choose-single-box .choose-content p,
#why-choose-us-placeholder .choose-single-box .section-sub-title h3,
#why-choose-us-placeholder .choose-single-box .section-sub-title p,
#why-choose-us-placeholder .choose-single-box ul,
#why-choose-us-placeholder .choose-single-box li {
  color: var(--color-gray-925) !important;
}
#why-choose-us-placeholder .choose-single-box a {
  color: var(--color-gray-925) !important;
}

.text-white h5{
  color: var(--color-white);
}

.text-white h2{
  color: var(--color-white);
}

.text-white p{
  color: var(--color-white);
}

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

.choose-content p {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-white);
  margin: 22px 0 0;
  font-family: var(--font-serif);
}

.style0 p{
  font-family: var(--font-serif);
}

.choose-content span{
  margin-right: 7px;
}

.choose-button a {
  font-size: 15px;
  font-weight: 500;
  margin-top: 10px;
  display: inline-block;
  font-family: var(--font-serif);
  color: var(--color-rgb-charcoal-900);
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  position: relative;
  text-transform: uppercase;
  padding: 15px 10px;
  z-index: 1;
  border-radius: 5px;
}

.choose-button a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	clip-path: polygon(0 1, 0% 100%, 101% 100%);
	transform: scale(0);
	transform-origin: bottom left;
	background-color: var(--color-rgb-charcoal-900);
	pointer-events: none;
	transition: .5s;
	z-index: -1;
	opacity: 0.5;
}

.choose-button a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	clip-path: polygon(0 1, 101% 0%, 100% 100%);
	transform: scale(0);
	transform-origin: top right;
	background-color: var(--color-rgb-charcoal-900);
	pointer-events: none;
	transition: .5s;
	opacity: .5;
	z-index: -1;
	height: 100%;
}

.choose-button a:hover::before {
	opacity: 1;
	transform: scale(1);
}

.choose-button a:hover::after {
	opacity: 1;
	transform: scale(1);
}

.play-button {
  position: absolute;
  top: 200px;
  left: 335px;
}

.video-vemo-icon {
  display: inline-block;
  text-align: center;
  position: relative;
  background: var(--color-white);
  height: 70px;
  width: 70px;
  top: 50%;
  font-size: 22px;
  line-height: 70px;
  color: var(--color-purple-base-rgb) !important;
  border-radius: 100%;
  margin-left: 30px;
  -webkit-animation: ripple-white 1s linear infinite;
  animation: ripple-white 1s linear infinite;
  -webkit-transition: .5s;
  transition: .5s;
}

.choose-button a:hover{
  color: var(--color-white) !important;
}

.choose-button a:hover{
  color: var(--color-white) !important;
}

/*=================end-why-choose-section====================*/




/*=====================start-testimonial-section==================*/

.testimonial-section {
  position: relative;
  padding: 20px 0;
  background-color: var(--color-gray-100);
}

.testimonial-thumb {
  text-align: -webkit-center;
  margin: 55px 0 60px;
}

.testimonial-disc img{
  width: 85%;
  margin: 0px auto;
  padding-top: 30px;
}

.testimonial-disc p {
  font-size: 20px;
  font-weight: 500;
  width: 85%;
  color: var(--color-rgb-gray-600);
  font-style: italic;
  line-height: 1.85;
  text-align: left;
  margin: 0 auto;
  font-family: var(--font-serif);
  padding-top: 30px;
}

.testimonial-content h4 {
  font-size: 20px;
  color: var(--color-purple-base-rgb);
  text-align: center;
  margin: 0;
  font-family: var(--font-serif);
}

.testimonial-content span{
  font-size: 18px;
  color: var(--color-rgb-charcoal-900);
}

.testimonial-section .owl-nav {
  position: absolute;
  top: 260px;
}

.testimonial-section .owl-prev {
  font-size: 18px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: var(--color-gray-300);
  text-align: center;
  border-radius: 50%;
  transition: .5s;
  display: inline-block;
}

.testimonial-section .owl-next {
  font-size: 18px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: var(--color-gray-300);
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  transition: .5s;
  position: absolute;
  left: 1255px;
}

.testimonial-section .owl-prev:hover{
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb);
  transition: .5s;
}

.testimonial-section .owl-next:hover{
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb);
  transition: .5s;
}

/*===================end-testimonial-section=================*/

/*==================start-gallery-section==================*/
.gallery-section {
  background-color: #ffffff;
}
.gallery-grid {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.gallery-item {
  overflow: hidden;
  margin-bottom: 15px;
}
.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
/*===================end-gallery-section=================*/




/*==================start-team-section===================*/

.orgchart {
  width: 100%;
  text-align: center;
  padding-top: 30px;
}

.orgchart img{
  width: 90%;
  display: block;
  margin: 0 auto;
}

.team-section {
  background-image: url(../images/resource/tm-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 115px 0;
  z-index: 1;
}

.box-up {
  margin-bottom: 70px;
}

.team-single-box {
  position: relative;
  z-index: 1;
  transition: .5s;
  margin-bottom: 30px;
}

.team-single-box::before {
  position: absolute;
  content: "";
  bottom: 5px;
  right: 5px;
  height: 98%;
  width: 95%;
  background-color: var(--color-purple-base-rgb);
  transform: rotate(-1deg);
  display: inline-block;
  transition: .5s;
  z-index: -1;
}

.team-box-inner {
  background-color: var(--color-white);
  text-align: center;
  padding: 30px 0;
  transition: .5s;
}

.team-single-thumb::before {
  position: absolute;
  content: "";
  top: 30px;
  margin: 0 auto 0px;
  border: 2px solid var(--color-gray-300);
  height: 200px;
  width: 200px;
  transition: .5s;
  border-radius: 100%;
  z-index: 1;
}

.team-sub-title h3 a {
  font-size: 22px;
  margin: 10px 0 5px;
  transition: .5s;
  display: inline-block;
  font-family: var(--font-serif);
}

.team-sub-title p {
  font-size: 18px;
  position: relative;
}

.team-sub-title p::after{
  position: absolute;
  content: "";
  top: 50px;
  left: 0;
  border-top: 1px solid var(--color-gray-300);
  height: 1px;
  width: 100%;
}

.social {
  margin: 40px 0 0 0;
}

.social ul li a{
  margin-right: 7px;
}

.team-sub-title h3 a:hover{
  color: var(--color-purple-base-rgb);
}

.team-box-inner:hover .team-single-thumb::before{
  border: 2px solid var(--color-purple-base-rgb);
}

.team-box-inner:hover:before{
  opacity: 1;
}

.team-single-box:hover:before {
  bottom: -5px;
  right: -5px;
}

/*==============end-team-section===============*/




/*==================start-faq-section===============*/

.faq-section {
  padding: 110px 0;
}

.tab_container {
  overflow: hidden;
}

h2.accordion-title {
  font-size: 30px;
  padding: 0 0 37px;
}

.accordion li {
  list-style: none;
  padding: 5px 50px 10px;
}

.accordion li a {
  font-size: 18px;
  position: relative;
  width: 100%;
  display: block;
  cursor: pointer;
  font-family: var(--font-serif);
  line-height: 1.5;
  color: var(--color-purple-base-rgb) !important;
  background-color: var(color-gray-150);
  padding: 12px 15px;
  z-index: 1;
  transition: .5s;
  border: 1px solid var(--color-gray-300);
}

.accordion li p {
  display: none;
  margin: 0 0 10px 0;
  padding: 20px 20px 26px;
  box-shadow: 0px 20px 30px 0px var(--color-rgb-blueink-10);
  background: var(--color-white);
}

.my-accordion p {
  display: none;
  margin: 0 0 10px 0;
  padding: 20px 20px 26px;
  box-shadow: 0px 20px 30px 0px var(--color-rgb-blueink-10);
  background: var(--color-white);
}

.accordion li a i {
  float: right;
  transform: rotate(0deg);
  transition: .5s;
  font-size: 14px;
}

.accordion a.active:after {
  transform: rotate(0deg);
  background-color: var(--color-purple-base-rgb);
  opacity: 1;
}

a.active i {
  transform: rotate(90deg) !important;
}

.accordion a.active {
  border-bottom: 0;
  padding: 12px 15px;
  color: var(--color-white) !important;
  background-color: var(--color-purple-base-rgb);
}

/*==================end-faq-section===============*/



/*==================start-subscribe-section==============*/
.subscribe-section {
  background-color: var(--color-purple-base-rgb);
  padding: 115px 0 95px;
  position: relative;
}

.counter-two-box {
  margin-bottom: 30px;
}

.counter-two-title h1 {
  font-size: 40px;
  display: inline-block;
  font-weight: 700;
  margin: 0;
  color: var(color-gray-150);
  font-family: var(--font-serif);
}

.counter-text p {
  font-size: 18px;
  color: var(color-gray-150);
  font-weight: 400;
  margin-top: 7px;
  font-family: var(--font-serif);
}

.counter-section {
  padding: 100px 0 80px;
}

.style-2 h1{
  color: var(--color-purple-base-rgb) !important;
}

.style-2 p{
  font-size: 18px;
  font-family: var(--font-serif);
  color: var(--color-rgb-gray-600) !important;
  line-height: 1.556;
}

.single-subscribe-box {
  background-color: var(--color-white);
  padding: 65px 50px 20px;
}

.Subscribe{
  margin-top: -245px;
}

.subscribe-title h2 {
  font-size: 25px;
  color: var(--color-purple-base-rgb);
  margin: 0 0 35px;
  font-family: var(--font-serif);
}

.form-box {
  margin-bottom: 24px;
}

.form-box input {
  font-size: 15px;
  width: 100%;
  height: 55px;
  padding: 6px 20px;
  background-color: var(color-gray-150);
  transition: .5s;
  font-weight: 500;
  border: 1px solid var(--color-gray-300);
  font-family: var(--font-serif);
}

.form-box select {
  width: 100%;
  height: 54px;
  padding: 6px 20px;
  background-color: var(color-gray-150);
  border-radius: 5px;
  transition: .5s;
  color: var(--color-slate-700) !important;
  font-weight: 500;
  font-family: var(--font-serif);
}

.form-box textarea {
  width: 100%;
  padding-left: 20px;
  padding-top: 15px;
  height: 115px; 
  border: 0;
  transition: .5s;
  background-color: var(color-gray-150);
  margin-top: 7px;
  border-radius: 5px;
  font-family: var(--font-serif);
}

.form-button {
  transition: .5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.form-button button {
  display: inline-block;
  color: var(--color-rgb-white-98);
  font-weight: 600;
  padding: 13px 40px;
  background-color: var(--color-purple-base-rgb);
  border: 2px solid var(--color-purple-base-rgb);
  /* text-transform: uppercase; */
  transition: 0.5s;
  font-size: 18px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 30px;
}

.form-button button::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 1, 0% 100%, 101% 100%);
  transform: scale(0);
  transform-origin: bottom left;
  background-color: var(--color-rgb-charcoal-900);
  pointer-events: none;
  transition: .5s;
  z-index: -1;
}
.form-button button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  clip-path: polygon(0 1, 101% 0%, 100% 100%);
  transform: scale(0);
  transform-origin: top right;
  background-color: var(--color-rgb-charcoal-900);
  pointer-events: none;
  transition: .5s;
  z-index: -1;
  height: 100%;
}

.single-appointment-box {
  margin-right: 60px;
}

.form-box input::placeholder{
  color: var(--color-rgb-gray-600);
}


.form-button button:hover::before {
  opacity: 1;
  transform: scale(1);
}

.form-button button:hover::after {
  opacity: 1;
  transform: scale(1);
}

.style-3 input::placeholder{
  color: var(--color-gray-300);
}

.style-3 input{
  background-color: var(--color-purple-base-rgb);
}

.style-3 textarea::placeholder{
  color: var(--color-gray-300);
}

.style-3 textarea{
  background-color: var(--color-purple-base-rgb);
}

/*================end-subscribe-section===================*/



/*================start-google-map-section===================*/

.google-map iframe {
  width: 100%;
  height: 500px;
  line-height: 1;
}

/* Make the map full-bleed by removing horizontal padding from the container */
.google-map-section .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.google-map {
  width: 100%;
  margin: 0;
}

/* For French pages, force menu items to sentence case: lowercase then capitalize first letter */
html[lang="fr"] .Mindfresh_menu, html[lang="fr"] .Mindfresh_menu a, html[lang="fr"] .Mindfresh_menu .sub-menu a {
  text-transform: lowercase !important;
}
html[lang="fr"] .Mindfresh_menu a::first-letter,
html[lang="fr"] .Mindfresh_menu .sub-menu a::first-letter {
  text-transform: uppercase !important;
}

/* keep language switcher fully uppercase even on French pages */
html[lang="fr"] .Mindfresh_menu .lang-switcher a {
  text-transform: uppercase !important;
}

/* Service page: ensure main header elements are not flex and stack normally */
.site-pages-header {
  display: block !important;
  flex: none !important;
}

/* Force page header description text to black (overrides breadcrumb/hero styles) */
.site-pages-header p {
  color: #000 !important;
}

/* Ensure .service-main-pages-header titles stack vertically and are full-width */
.main-pages-header.service-main-pages-header h2,
.main-pages-header.service-main-pages-header p {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
}

.main-pages-header.service-main-pages-header h2 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Ensure the header wrapper is not a flex container so children stack */
.main-pages-header.service-main-pages-header {
  display: block !important;
}

/* Match section-title spacing to remove layout differences */
.main-pages-header.service-main-pages-header {
  margin-bottom: 70px !important; /* same as .upper-1 */
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* Match top spacing used by .section-title on about page */
.main-pages-header.service-main-pages-header {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* Match about page: purple title, black description */
.main-pages-header.service-main-pages-header h2 {
  color: var(--color-purple-base-rgb) !important;
}
.main-pages-header.service-main-pages-header p {
  color: #000 !important;
}

/* Match typography used by .section-title */
.main-pages-header.service-main-pages-header h2 {
  font-family: var(--font-serif) !important;
  font-weight: bold !important;
  font-size: 45px !important;
  line-height: 1.22 !important;
  margin-top: 18px !important;
  margin-bottom: 9px !important;
}
.main-pages-header.service-main-pages-header p {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  margin-top: 0 !important;
  font-weight: 400 !important;
  color: var(--color-rgb-gray-600) !important;
}

/* service info list styling: black text and icon bullets */
.service-info-list {
  list-style: none;
  padding: 20px 0 20px 28px; /* apply padding to the UL itself */
  margin-left: 0;
}

.service-info-list li {
  color: #000 !important;
  margin-bottom: 0.75rem;
  padding-left: 28px;
  position: relative;
  font-size: 1rem;
  padding-left: 40px;
}
.service-info-list li i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-walgwan-green);
  width: 28px;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1;

}


/**=============end-google-map-section ================**/




/*===================start-blog-section================*/

.blog-section {
  position: relative;
  background-color: var(--color-gray-100);
  padding: 20px 0;
}

/* Add spacing between page content and footer on compact blog pages */
.blog-section.blog-section--small {
  margin-bottom: 40px;
}

/* Reduced padding variant for specific pages */
.blog-section.blog-section--small {
  padding: 20px 0;
}

/* Reduced padding variant for service listings (match blog-section--small) */
.service-section.service-section--small {
  padding: 20px 0;
}

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

.blog-content {
  overflow: hidden;
  padding: 25px 27px 32px;
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
}

/* Allow article content to wrap floated thumbnails inside single article boxes */
.blog-single-box .blog-content {
  overflow: visible;
}

/* Uniform listing boxes for news list to match services layout */
.blog-list-item {
  position: relative;
  background-color: var(--color-white);
  text-align: left;
  transition: .35s;
  z-index: 1;
  margin-bottom: 30px;
  height: auto; /* allow content to determine height like service boxes */
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.blog-list-item .blog-thumb {
  height: 300px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.blog-list-item .blog-thumb img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center center;
}

.blog-list-item .blog-content {
  padding: 20px;
}

/* Tighten spacing between title and blurb in blog cards */
.blog-list-item .section-sub-title {
  margin: 0; /* remove margins so title sits tight */
  flex: 0 0 auto; /* prevent title area from stretching */
}
.blog-list-item .section-disc {
  margin-top: 4px;
  flex: 1 1 auto; /* allow blurb to take remaining space */
}
.blog-list-item .section-disc p {
  margin-top: 0;
}

/* Place the action button outside the bottom of the fixed-height card */
.blog-list-item .service-button {
  position: static; /* keep button in flow under content */
  transform: none;
  bottom: auto;
  width: auto;
  text-align: center;
  margin: 20px 0 0;
}
.blog-list-item .service-button a {
  display: inline-block;
}

@media (max-width: 600px) {
  .blog-list-item {
    height: auto;
    padding-bottom: 15px;
  }
  .blog-list-item .service-button {
    position: static;
    transform: none;
    bottom: auto;
    margin-top: 10px;
    text-align: left;
  }
}

/* Make blog cards equal height in the grid */
.blog-section .row > [class*="col-"] {
  display: flex;
  align-items: stretch;
}
.blog-section .row > [class*="col-"] .blog-list-item {
  flex: 1 1 auto;
}
.blog-list-item .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* let content grow to fill card */
}
.blog-list-item .service-button {
  margin-top: auto; /* push button to bottom */
}

@media (max-width: 768px) {
  .blog-list-item {
    height: auto;
  }
  .blog-list-item .blog-thumb {
    height: 200px;
  }
  .blog-list-item .blog-thumb img {
    height: 200px;
  }
}

/* Related links spacing (news & services pages) */
.related-links {
  margin-bottom: 20px !important;
}

/* Reduce header bottom margin for related-links specifically */
.related-links h3.medium-gray {
  margin-bottom: 20px !important;
}

/* Scope description auto-height to blog/news pages only */
.blog-section .section-disc {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure all text in blog-section uses black for readability */
.blog-section,
.blog-section p,
.blog-section .section-disc,
.blog-section .section-disc p,
.blog-section .blog-content {
  color: #000 !important;
}

/* Prevent fixed-height section titles on blog/news pages */
.blog-section .section-sub-title {
  overflow: visible !important;
  height: auto !important;
}

/* Blog thumbnail: float right inside the article box and fixed width */
.blog-single-box {
  position: relative;
}
.blog-single-box::after {
  content: "";
  display: table;
  clear: both;
}
.blog-single-box .blog-thumb {
  float: right;
  width: 500px;
  max-width: 100%;
  margin-left: 20px;
  margin-bottom: 10px;
}
.blog-single-box .blog-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .blog-single-box .blog-thumb {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 15px;
  }
}

/* Ensure list-view thumbnails keep their original non-floating, full-width layout
  /* override meanmenu's container rule so the menu itself can scroll */
  .mobile-menu.mean-container {
    overflow: auto !important;
    max-height: calc(100vh - 56px) !important;
    -webkit-overflow-scrolling: touch !important;
  }
   (separate from the single-article floating thumbnail) */
.blog-list-item .blog-thumb {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-bottom: 10px !important;
}
.blog-list-item .blog-thumb img {
  width: 100% !important;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* Ensure blog thumb stacks full-width on narrow devices <= 600px */
@media (max-width: 600px) {
  .blog-single-box .blog-thumb {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 15px !important;
  }
}

/* Make meta full-width on blog/news pages and remove left float */
.blog-section .blog-meta {
  float: none !important;
  width: 100% !important;
  margin-bottom: 10px;
}
.blog-section .blog-meta p {
  margin: 0 0 12px 0;
}

/* Remove small vertical separator after date on blog/news pages */
.blog-section .blog-meta p::before {
  display: none;
  content: none;
}

/* Sidebar should match the white background and padding of content columns */
.sidebar {
  background-color: var(--color-white);
  padding: 25px 27px 32px;
}

/* Prevent equal-height stretching for columns inside blog/service sections */
.blog-section .row,
.service-section .row {
  align-items: flex-start;
}

/* Team related list styling */
.team-related-list .team-related-item {
  overflow: hidden;
  margin-bottom: 12px;
}
.team-related-link {
  display: block;
  overflow: hidden;
}
.team-related-img {
  width: 75px;
  height: 75px;
  object-fit: cover;
  margin-right: 12px;
  float: left;
  border-radius: 37px;
}
.team-related-name {
  font-weight: 600;
  display: inline-block;
}
.team-related-position {
  color: var(--color-gray-700);
  font-size: 14px;
}

/* Make icons in sidebar lists visually lighter */
.section-disc a i {
  color: var(--color-gray-500);
  opacity: 0.85;
}
.section-disc a i.fa-link {
  opacity: 0.65; /* make the link icon appear lighter */
}

/* Team photo in bio */
.team-photo-wrap {
  float: left;
  width: 50%;
  max-width: 50%;
  margin-right: 20px;
  margin-bottom: 10px;
}
.team-photo {
/* Full width on small screens */
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}
.team-photo-caption {
  font-size: 14px;
  color: var(--color-gray-700);
  margin-top: 6px;
  text-align: center;
  display: block;
  width: 100%;
}

@media (max-width: 768px) {
  .team-photo-wrap {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-top: 0;
  }
}

/* Add top spacing to floated team image so section subtitles push it down */
.blog-content .team-photo-wrap,
.team-page .team-photo-wrap {
  margin-top: 20px;
}

/* Team page: add top margin to description */
.team-page .section-disc {
  margin-top: 12px;
  margin-bottom: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Make blog-content on team page more compact when there is no long description */
.team-page .blog-content {
  padding: 16px 18px 18px;
}

/* Main/about image rounding */
.about-thumb img {
  border-radius: 4px;
}

.blog-meta {
  float: left;
}

.blog-meta p {
  position: relative;
  font-size: 18px;
  color: var(--color-rgb-charcoal-900);
  margin: 0 38px 0 0;
}

.blog-name a {
  display: inline-block;
  text-decoration: none;
  text-transform: capitalize;
  color: var(--color-purple-base-rgb);
  position: relative;
  font-weight: 500;
  font-family: var(--font-serif);
}

.blog-meta p::before {
  content: "";
  background: var(--color-gray-600);
  width: 1px;
  height: 11px;
  position: absolute;
  right: -20px;
  top: 8px;
}

.blog-name p {
  margin: 0;
}

.blog-meta p:hover{
  color: var(--color-purple-base-rgb);
}

.blog-info h2 a{
  font-size: 21px;
  margin: 0;
  color: var(--color-purple-base-rgb);
  font-weight: bold;
  line-height: 1.455;
  display: inline-block;
  font-family: var(--font-serif);
}

.blog-info h2 a:hover{
  color: var(--color-purple-base-rgb);
}

.blog-disc p {
  font-size: 18px;
  color: var(--color-rgb-charcoal-900);
  width: 80%;
  margin: 16px 0 15px;
  font-family: var(--font-serif);
}

/*===================end-blog-section================*/



/*==================start-portfolio-section===============*/
.portfolio-section {
  position: relative;
  padding: 115px 0;
}

.portfolio-single-box {
  position: relative;
  transition: .5s;
  margin-bottom: 30px;
  overflow: hidden;
}

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

.portfolio-icon span {
  font-size: 18px;
  position: absolute;
  top: 0px;
  left: 145px;
  color: var(--color-rgb-teal-700);
  background: var(--color-white);
  padding: 20px 25px;
  opacity: .8;
  transition: .5s;
  opacity: 0;
}

.portfolio-content {
  position: absolute;
  bottom: 0;
  left: -45px;
  padding: 15px 40px 20px 25px;
  background: var(--color-rgb-teal-700);
  opacity: 0;
  transition: .5s;
}

.portfolio-content span {
  font-size: 18px;
  color: var(--color-white);
  transition: .5s;
  font-family: var(--font-serif);
}

.portfolio-content h3 {
  font-size: 25px;
  color: var(--color-white);
  transition: .5s;
  font-family: var(--font-serif);
  margin-top: 5px;
}

.portfolio-section .owl-dots {
  text-align: center;
}

.portfolio-section .owl-dot {
  height: 13px;
  width: 13px;
  border: 3px solid var(--color-gray-450);
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}

.portfolio-section .owl-dot.active {
  background: var(--color-rgb-teal-700);
  border: 3px solid var(--color-rgb-teal-700);
}

.portfolio-single-box:hover .portfolio-icon span{
  opacity: 1;
  top: 170px;
  transition: .5s;
}

.portfolio-single-box:hover .portfolio-content{
  opacity: 1;
  left: 0;
  transition: .5s;
}

/* Document box layout: icon left, description always visible, black text; purple hover -> white text */
.document-box{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:12px;
  background:transparent;
  color:var(--color-rgb-charcoal-900);
  transition: background .25s, color .25s;
}
.document-box{
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}
.document-box .portfolio-thumb{
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.document-box .portfolio-thumb .doc-file-icon{
  font-size:36px;
  color:var(--color-purple-base-rgb);
}
.document-box .portfolio-content{
  position:static !important;
  background:transparent !important;
  padding:0 !important;
  color:var(--color-rgb-charcoal-900) !important;
  opacity:1 !important;
}
.document-box .portfolio-content h3 a{ color:inherit; text-decoration:none; }
.document-box:hover{
  background: var(--color-purple-base-rgb);
}
.document-box:hover .portfolio-content,
.document-box:hover .portfolio-content p,
.document-box:hover .portfolio-content h3,
.document-box:hover .doc-file-icon{
  color:var(--color-white) !important;
}
.document-box .doc-meta{ color:var(--color-gray-700); }
.document-box:hover .doc-meta{ color: var(--color-white) !important; }
.document-box .doc-meta i{ margin-right:8px; color:var(--color-gray-700); }
.document-box:hover .doc-meta i{ color:var(--color-white) !important; }
.document-box .portfolio-content h3{ color:var(--color-rgb-charcoal-900); }
.document-box .portfolio-content h3 a{ color:inherit; }
.document-box:hover .portfolio-content h3{ color:var(--color-white); }

/*==================end-portfolio-section===============*/



/*==============start-testimonials-section===============*/
.testimonials-section {
  background-image: url(../images/resource/tm-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0 50px;
}

.single-testimonial {
  background: var(--color-white);
  padding: 20px 20px 35px 30px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.testimonials-thumb{
  position: relative;
  z-index: 1;
}

.testimonials-thumb::after {
  font-size: 100px;
  content: "\f10e";
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  font-weight: 900;
  top: 40px;
  right: 325px;
  text-align: center;
  color: var(--color-rgb-teal-700);
  opacity: 0.1;
}

.single-testimonial::before {
  position: absolute;
  content: '';
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-rgb-teal-700);
}

.single-testimonial::after {
  position: absolute;
  content: '';
  opacity: 0;
  left: 50%;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background-color: var(--color-rgb-teal-700);
  transition: .5s;
}

.testimonials-rating {
  text-align: right;
}

.testimonials-rating ul {
  list-style: none;
}

.testimonials-rating ul li {
  display: inline-block;
  margin-right: 7px;
  transition: .5s;
  color: var(--color-amber-500);
}

.testimonials-disc p {
  font-size: 18px;
  transition: .5s;
  margin: 20px 0 30px;
  color: var(--color-rgb-gray-580);
  font-family: var(--font-serif);
}

.testimonials-thumb {
  float: left;
  margin: 0px 20px 0 0;
}

.testimonial-content h2 {
  font-size: 22px;
  margin-top: 27px;
  transition: .5s;
  font-family: var(--font-serif);
  color: var(--color-rgb-teal-700);
}

.testimonial-content span {
  font-size: 18px;
  display: inline-block;
  transition: .5s;
  margin: 7px 0 0;
  font-family: var(--font-serif);
}

.testimonials-section .owl-prev {
  font-size: 25px;
  height: 50px;
  width: 50px;
  background: var(--color-gray-300);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  transition: .5s;
  margin-right: 10px;
}

.testimonials-section .owl-next {
  font-size: 25px;
  height: 50px;
  width: 50px;
  background: var(--color-gray-300);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  transition: .5s;
  display: inline-block;
}

.owl-nav {
  float: right;
  position: relative;
  bottom: 450px;
}

.testimonials-section .owl-prev:hover{
  color: var(--color-white);
  background-color: var(--color-rgb-teal-700);
  transition: .5s;
}

.testimonials-section .owl-next:hover{
  color: var(--color-white);
  background-color: var(--color-rgb-teal-700);
  transition: .5s;
}

.single-testimonial:hover::after {
  left: 0;
  width: 100%;
  opacity: .09;
}

/*==============end-testimonials-section===============*/



/*===============start-pricing-section===============*/

.pricing-plan-section {
  padding: 110px 0;
}

.pricing-icon{
  float: left;
}

.pricing-title p {
  font-size: 14px;
  width: 40%;
  padding: 5px 53px;
  color: var(color-gray-150);
  background-color: var(--color-purple-base-rgb);
  text-transform: capitalize;
  font-family: var(--font-serif);
  transform: rotate(45deg);
  position: absolute;
  right: -50px;
  top: 15px;
}

.pricing-titles p {
  font-size: 18px;
  color: var(--color-rgb-charcoal-900);
  text-transform: capitalize;
  margin-bottom: 28px;
  font-family: var(--font-serif);
}

.pricing-box {
  transition: all 0.3s ease 0s;
  padding: 47px 40px 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(color-gray-150);
  margin-bottom: 30px;
}

.featur ul{
  list-style: none;
}

.pricing span {
  font-size: 35px;
  font-weight: 700;
  color: var(--color-purple-base-rgb);
  font-family: var(--font-serif);
  margin-bottom: 50px;
  display: inline-block;
}

.featur ul li {
  font-size: 18px;
  color: var(--color-purple-base-rgb);
  padding: 10px 0;
  font-family: var(--font-serif);
  border-top: 1px solid var(--color-gray-300);
}

.featur ul li:nth-child(4) {
  border-bottom: 1px solid var(--color-gray-300);
}

.featur ul li span {
  margin-right: 15px;
}

.button2 a {
  color: var(--color-purple-base-rgb);
  border: 1px solid var(--color-purple-base-rgb);
  background: var(--color-transparent);
  margin-top: 55px;
}

.button2 i{
  margin-left: 7px;
  display: inline-block;
}

.button2 a:hover{
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb) !important;
}

/*===============end-pricing-section===============*/



/*=============start-brand-section=================*/

.brand-section {
  position: relative;
  padding: 115px 0 0;
  margin-bottom: -500px;
}

.subscribes{
  background-color: var(color-gray-150);
}

.forms input{
  background-color: var(--color-white);
  font-style: italic;
}

.forms textarea{
  background-color: var(--color-white);
  font-style: italic;
}

.brand-thumb {
  text-align: -webkit-center;
}

/*=============end-brand-section=================*/



/*=============start-shop-section===============*/

.shop-section {
  position: relative;
  background-color: var(color-gray-150);
  padding: 115px 0;
}

.sections-two {
  padding-bottom: 170px;
}

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

.single-shop {
  position: relative;
  background-color: var(--color-white);
  text-align: center;
  padding: 45px 30px 25px;
  margin-bottom: 30px;
  transition: .5s;
}

.shop-form-box {
  float: right;
}

.cart-button {
  font-size: 13px;
  border: 0;
  cursor: pointer;
  padding: 5px 0;
  position: absolute;
  bottom: 111px;
  left: 30px;
  width: 80%;
  color: var(--color-white);
  opacity: 0;
  transition: .5s;
  text-transform: uppercase;
  background-color: var(--color-purple-base-rgb);
}

.shop-details-title p {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
  color: var(--color-rgb-teal-700);
}

.shop-section .owl-prev {
  font-size: 25px;
  height: 50px;
  width: 50px;
  background: var(--color-gray-300);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  transition: .5s;
  margin-right: 10px;
}

.shop-section .owl-next {
  font-size: 25px;
  height: 50px;
  width: 50px;
  background: var(--color-gray-300);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  transition: .5s;
  display: inline-block;
}

.shop-section .owl-nav {
  float: right;
  position: relative;
  bottom: 625px;
}

.shop-section .owl-prev:hover{
  color: var(--color-white);
  background-color: var(--color-rgb-teal-700);
  transition: .5s;
}

.shop-section .owl-next:hover{
  color: var(--color-white);
  background-color: var(--color-rgb-teal-700);
  transition: .5s;
}

.single-shop:hover .cart-button{
  opacity: 1;
  transition: .5s;
}

/*===============end-shop-section=================*/



/*============start-breadcumb-section==============*/

.breadcumb-area {
  background-image: url(../images/resource/breadcume.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 130px 0px 130px;
}

/* Dark overlay so breadcrumb text reads brighter */
.breadcumb-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.breadcumb-area .container,
.breadcumb-area .breadcumb-title,
.breadcumb-area .breadcrumb,
.breadcumb-area > * {
  position: relative;
  z-index: 2;
}


.breadcumb-title h1 {
  font-size: 60px;
  font-weight: 500;
  color: var(--color-rgb-white-98);
  font-family: var(--font-serif);
}

.breadcumb-content-menu {
    padding-top: 10px;
}

.breadcumb-content-menu ul li {
    display: inline-block;
    list-style: none;
}

.breadcumb-content-menu ul li a {
    color: var(--color-rgb-white-98);
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-serif);
}

.breadcumb-content-menu ul li a i{
    margin-left: 10px;
}

.breadcumb-content-menu ul li span {
    color: var(--color-rgb-white-98);
    font-size: 20px;
    font-weight: 500;
    margin-left: 10px;
}

/*============end-breadcumb-section==============*/



/*==================start-conunsulting-section===============*/

.counsulting-section{
  background-image: url(../images/resource/consulling-thumb.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 120px 0;
}

.counsulting-box {
  text-align: center;
}

/*=============end-conunsulting-section==================*/



/*==================start-blog-section===============*/

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

.section-sub-title h2 a {
  font-size: 35px;
  display: inline-block;
  font-weight: 700;
  color: var(--color-purple-base-rgb);
  margin-bottom: 25px;
  font-family: var(--font-serif);
}

.section-disc p {
  font-size: 18px;
  font-family: var(--font-serif);
}

/* Ensure section-disc text is readable on white backgrounds */
.section-disc, .section-disc p {
  color: #000 !important;
}

/* Make section headers in sidebars match h4 size with smaller bottom margin */
.section-disc h3.medium-gray {
  font-size: 25px; /* match h4 */
  font-weight: 700;
  margin-bottom: 40px;
  font-family: var(--font-serif);
}

/* Add spacing between sidebar sections */
.section-disc {
  margin-bottom: 20px;
}

.paginations {
  text-align: left;
  margin-top: 20px;
  margin-bottom: 30px;
}

.page-numbers li {
  display: inline-block;
  text-align: center;
}

.paginations a:hover, .paginations a.current, .page-numbers span.current {
  background: var(--color-rgb-teal-700);
  border-color: var(--color-rgb-teal-700);
  color: var(--color-white);
}

.paginations a, .page-numbers span.current {
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  margin: 0 5px 0 0;
  color: var(--color-violet-300);
  background: var(--color-white);
  -webkit-box-shadow: 0 0 5px var(--color-rgba-black-020);
  box-shadow: 0 0 5px var(--color-rgba-black-020);
}

.blog-list-left {
  margin-bottom: 40px;
  padding: 45px 30px 28px;
  border-radius: 8px;
  background-color: var(--color-rgb-white-98);
  border: 1px solid var(--color-gray-220);
  box-shadow: 0 0 5px var(--color-rgba-black-010);
}

.blog-form-field {
  display: block;
  position: relative;
  width: 90%;
}

.blog-list-left input[type="email"] {
  padding: 9px;
  border-radius: 8px;
  flex-grow: 1;
  min-width: 3em;
  color: var(--color-rgb-gray-570);
  border: 1px solid var(--color-gray-300);
  font-size: inherit;
  font-family: inherit;
  width: 76% !important;
  line-height: inherit;
}

p.blog-submit-button {
  color: var(--color-rgb-white-98);
  border-radius: 3px;
  border: initial;
  position: absolute;
  padding: 0;
  right: -30px;
  top: 0;
}

.blog-list-left input[type="submit"] {
  color: var(--color-rgb-white-98);
  border-radius: 3px;
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-purple-base-rgb);
  padding: 8px 25px;
}

blockquote {
  background-color: var(color-gray-150);
  padding: 24px 57px 24px 37px;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-black);
  position: relative;
  margin-top: 40px;
  margin-bottom: 34px;
  font-weight: 700;
  border-radius: 5px;
  border-left: 5px solid var(--color-purple-base-rgb);
}

.wp-block-quote p {
  font-size: 20px;
  margin: 30px 0 35px 0;
  padding: 5px 0 5px 30px;
  color: var(--color-rgb-gray-600);
  font-style: italic;
  font-weight: 600;
  font-family: var(--font-serif);
}


.wp-block-quote p span{
  color: var(--color-purple-base-rgb);
  font-weight: 500;
  margin-top: 20px;
  display: inline-block;
}

.single-recent-post {
  margin-bottom: 40px;
  padding: 35px 30px 35px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-220);
  border-radius: 8px;
  box-shadow: 0 0 5px var(--color-rgb-black-10);
}

.recent-post-title h3 {
  font-size: 25px;
  margin-bottom: 20px;
  position: relative;
  font-family: var(--font-serif);
}


.single-recent-catagories h4 {
  font-size: 22px;
  margin-bottom: 30px;
  position: relative;
  font-family: var(--font-serif);
}


.rpost-thumb a img {
  width: 75px;
  height: 75px;
  margin: 15px 12px 15px 0px;
}

.rpost-content h5 a {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy-900);
  font-family: var(--font-serif);
}

span.rcomment {
  font-size: 18px;
  font-family: var(--font-serif);
}

.single-recent-coment {
  margin-bottom: 40px;
  padding: 35px 30px 35px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-220);
  border-radius: 8px;
  box-shadow: 0 0 5px var(--color-rgb-black-10);
}

.single-recent-coment span {
  font-size: 18px;
  font-family: var(--font-serif);
}

.single-recent-achive {
  margin-bottom: 40px;
  padding: 35px 30px 35px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-220);
  border-radius: 8px;
  box-shadow: 0 0 5px var(--color-rgb-black-10);
}

.single-recent-achive a:hover{
  color: var(--color-purple-base-rgb);
}

.single-recent-catagories {
  margin-bottom: 40px;
  padding: 35px 30px 35px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-220);
  border-radius: 8px;
  box-shadow: 0 0 5px var(--color-rgb-black-10);
}

.single-recent-catagories ul {
  list-style: none;
}

.single-recent-catagories ul li {
  border-top: 1px solid var(--color-gray-210);
  padding: 15px 0;
}

.single-recent-catagories ul li a{
  font-size: 18px;
  display: block;
  font-family: var(--font-serif);
}

.single-recent-catagories ul li a span{
  float: right;
}

.single-recent-catagories ul li a:hover{
  color: var(--color-purple-base-rgb);
}

.forms-button button {
  padding: 12px 40px;
  color: var(--color-white);
  background: var(--color-purple-base-rgb);
  border-radius: 5px;
  transition: .5s;
}

.forms-button button:hover{
  color: var(--color-white);
  background-color: var(--color-navy-950);
}

.rpost-content h5 a:hover{
  color: var(--color-purple-base-rgb);
}

.sec-widget-element.uppers {
  margin: 35px 0px 0px;
}

.sec-widget-element ul {
  list-style: none;
}

.sec-widget-element ul li {
  margin-bottom: 10px;
  color: var(--color-rgb-charcoal-900);
  font-size: 15px;
  font-weight: bold;
  font-family: var(--font-serif);
}

.sec-widget-element ul li span {
  display: inline-block;
  color: var(--color-white);
  font-size: 12px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  background-color: var(--color-purple-base-rgb);
  border-radius: 50%;
  margin-right: 16px;
  font-family: var(--font-serif);
}

.mt-20 p {
  margin: 35px 0;
}

.blog-sub-title p {
  font-size: 18px;
  color: var(--color-rgb-charcoal-900);
  font-family: var(--font-serif);
}

.blog-sub-title span {
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb);
  margin-left: 20px;
  padding: 7px 15px;
}

/*==================end-blog-section===============*/



/*==================start-case-studies-section===============*/

.case-studies-area {
  padding: 10px 0;
}

.case_study_nav {
  margin: 10px 0 35px;
}

.case_study_menu ul {
  text-align: center;
}

.case_study_menu ul li {
  display: inline-block;
  padding: 6px 25px;
  margin: 0 0 30px 3px;
  border-radius: 5px;
  color: var(--color-purple-base-rgb);
  background: var(--color-gray-150);
  font-size: 15px;
  font-weight: 500px;
  cursor: pointer;
  transition: .5s;
  font-family: var(--font-serif);
}

.case_study_menu ul li:hover, .case_study_menu ul li.current_menu_item {
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb);
}

/*==================end-case-studies-section===============*/



/*================start-case-studies-detail-section===============*/

.case-details-thumb img {
  width: 100%;
  margin: 15px 0 15px;
}

.cases-thumb {
  margin-top: 25px;
}

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

.style-btn {
  position: relative;
  top: -435px;
  left: 680px;
}

.single-recent-catagories ul li p {
  float: right;
}

.single-recent-catagories span {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-rgb-charcoal-900);
}

/*================end-case-studies-detail-section===============*/



/*================start-contact-section===============*/

.contact-section {
  padding: 20px 0;
}

.single-contact-box {
  background-color: var(--color-rgb-gray-100);
  padding: 50px 40px 70px;
}

.section-title h3 {
  font-size: 30px;
  text-align: center;
  color: var(--color-purple-base-rgb);
  margin-bottom: 40px;
  font-family: var(--font-serif);
}

.style-bg input{
  border-color: 1px solid var(--color-rgb-gray-300) !important;
  background-color: var(--color-white) !important;
}

.style-bg textarea{
  border-color: 1px solid var(--color-rgb-gray-300) !important;
  background-color: var(--color-white) !important;
}

.contact-box {
  padding: 25px 0 25px 35px;
  background-color: var(--color-rgb-gray-100);
  margin-bottom: 30px;
}

/* Darken paragraph text inside contact boxes for better readability */
.header-content.contact p {
  color: #333333; /* slightly darker than default */
}

/* Slightly larger text for contact paragraphs */
.header-content.contact p {
  font-size: 18px;
}

.contact span {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-purple-base-rgb);
  font-family: var(--font-serif);
}

/*================end-contact-section===============*/



/*================start-service-section===============*/

.about-two-thumb::before {
  position: absolute;
  content: "";
  bottom: -12px;
  left: 0;
  width: 60%;
  height: 80%;
  background-color: var(--color-purple-base-rgb);
  z-index: -1;
  transition: .5s;
}

.service{
  background-image: url(../images/resource/breadcumb-ser.png);
}

.about-two-thumb:hover:before {
   bottom: 0;
   left: 12px;
}

.counter-two-title.style-2 {
  display: inline-block;
}

.counter-up {
  text-align: center;
}

.about-sub-icon {
  height: 55px;
  width: 60px;
  line-height: 50px;
  text-align: center;
  margin-right: 15px;
  margin-bottom: -12px;
  display: inline-block;
  background-color: var(--color-purple-base-rgb);
}

.counter-text span {
  font-size: 17px;
  font-weight: bold;
}

.about-two-thumb img {
  width: 100%;
}

/*================end-service-section===============*/




/*==========start-team-details-section==============*/

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

.team-details-content {
  border: 1px solid var(--color-gray-300);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.team-details-content-text {
  margin-left: 25px;
}

.team-details {
  box-shadow: 6px 5px 30px var(--color-rgba-black-012);
  padding: 50px;
} 

.team-details-thumb img {
  width: 100%;
  margin-bottom: 30px;
}

.team-details-box {
  background-color: var(--color-rgb-gray-100);
  padding: 30px 25px 40px;
  margin-bottom: 30px;
}

.team-details-title h2 {
  font-size: 25px;
  color: var(--color-purple-base-rgb);
  font-family: var(--font-serif);
  font-weight: 700;
  margin-left: 25px;
  margin-bottom: 10px;
}

.team-details-title p {
  font-size: 18px;
  margin: 10px 0 0;
  color: var(--color-purple-base-rgb);
}

.team-details-content-icon {
  padding-top: 10px;
  margin-left: 25px;
}

.team-details-content-text ul li {
  margin-bottom: 10px;
  display: block;
}
.team-details-content-text ul li span {
  font-weight: 800;
  margin-right: 15px;
  font-size:17px;
  font-family: var(--font-serif);
}

.team-details-content-text ul li p {
  display: inline;
  color: var(--color-purple-base-rgb);
}

.team-details-content-icon a {
  margin: 3px;
  background-color: var(--color-purple-base-rgb);
  line-height: 1;
  display: inline-block;
  border-radius: 3px;
  color:var(--color-white);
  height:35px;
  width:35px;
  line-height:35px;
  text-align:center;
  transition:.5s;
  border:1px solid var(--color-purple-base-rgb);
}
.team-details-content-icon a:hover {
  background: var(--color-transparent);
  border:1px solid var(--color-purple-base-rgb);
 color: var(--color-purple-base-rgb);
}
.skill-wrapper h6 {
 margin-bottom: 8px;
 margin-top: 20px;
}

.team-detail-title h2 {
  color: var(--color-gray-950);
  font-family: var(--font-serif);
  font-size: 35px;
  font-weight: 600;
}

.team-detail-title p {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-gray-500);
  margin-top: 40px;
  font-family: var(--font-serif);
}

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

.team-button{
  padding-left: 25px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-size: 20px;
  color: var(--color-purple-base-rgb);
  border: 1px solid var(--color-gray-300);
  text-align: left;
  padding: 12px;
  font-family: var(--font-serif);
}

td {
  border: 1px solid var(--color-gray-300);
  text-align: left;
  padding: 12px;
  font-family: var(--font-serif);
}

tr:nth-child(even) {
  background-color: var(--color-gray-300);
}

/*============end-team-details-section==============*/




/*============start-shop-details-section==============*/

.shop-details-section {
  padding: 130px 0;
}

.single-shop-box {
  text-align: center;
  background-color: var(color-gray-150);
  margin: 0px 85px 0 0;
  padding: 100px 0 100px;
}

.shop-details-content h2 {
  font-size: 23px;
  color: var(--color-purple-base-rgb);
  font-weight: bold;
  line-height: 2.217;
  font-family: var(--font-serif);
}

.shop-details-content span {
  font-size: 18px;
  font-family: var(--font-serif);
  color: var(--color-rgb-gray-600);
  line-height: 1.125;
}

.shop-details-disc p {
  font-size: 18px;
  font-family: var(--font-serif);
  color: var(--color-rgb-gray-600);
  line-height: 1.75;
  margin: 30px 0;
}

.quantity {
  float: left;
  margin-right: 15px;
  background-color: var(color-gray-150) !important;
}

.quantity .cart-plus-minus {
  position: relative;
  width: 175px;
  text-align: left;
  border: 1px solid var(--color-gray-300);
  height: 40px;
  overflow: hidden;
  border-radius: 5px;
}

.quantity .cart-plus-minus > .cart-plus-minus-box {
  height: 40px;
  text-align: center;
  width: 175px;
  font-size: 18px;
  font-weight: 600;
  border: 0;
  background-color: var(color-gray-150) !important;
  background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.quantity .cart-plus-minus > .ctnbutton.dec {
  top: 50%;
  left: 0%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
  padding: 0 27px;
  border-right: 1px solid var(--color-gray-300);
}

.quantity .cart-plus-minus > .ctnbutton {
	cursor: pointer;
	position: absolute;
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	width: 38px;
	-webkit-box-align: center;
	align-items: center;
	vertical-align: middle;
	color: var(--color-rgb-gray-600) !important;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.quantity .cart-plus-minus > .ctnbutton.inc {
  top: 50%;
  right: 0%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100%;
  padding: 0 27px;
  border-left: 1px solid var(--color-gray-300);
}

.add-to-cart-btn a {
	width: 158px;
	height: 40px;
	line-height: 40px;
  background-color: var(--color-purple-base-rgb);
	display: inline-block;
  text-transform: uppercase;
	font-size: 15px;
	color: var(--color-white);
	text-align: center;
	transition: 0.4s;
}

.cart-catagorie p {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-purple-base-rgb);
  font-family: var(--font-serif);
}

.cart-catagorie span{
  color: var(--color-rgb-gray-600);
}

li.nav-item {
  margin-right: 15px;
}

.mission_menu {
  margin: 50px 0 0px;
}

.nav-link {
  font-size: 18px;
  padding: 6px 42px;
  text-align: center;
  font-family: var(--font-serif);
  color: var(--color-purple-base-rgb);
  background-color: var(color-gray-150) !important;
  line-height: 3.333;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: var(--color-white);
  background-color: var(--color-purple-base-rgb) !important;
  position: relative;
  z-index: 1;
}

.nav-link:focus, .nav-link:hover {
  color: var(--color-navy-900);
}

ul#pills-tab {
  border-bottom: 1px solid var(--color-gray-300);
}

.tab-content {
  margin-top: 30px;
}

.tab_container {
  overflow: hidden;
  padding: 20px 0 0;
}

.add-review-title h3 {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-gray-800);
  font-weight: 500;
  margin: 0;
}

.your-rate {
  display: flex;
  gap: 26px;
  align-items: center;
}

.rate-right li {
  font-size: 15px;
  letter-spacing: 5px;
  line-height: 28px;
  color: var(--color-purple-base-rgb);
  font-family: "Font Awesome";
  display: inline-block;
}

.rate-left h5 {
  opacity: 0.800;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-gray-800);
  font-weight: 400;
  margin: 0;
}

.review-form-top {
  display: flex;
  gap: 28px;
  margin-bottom: 20px;
  margin-top: 30px;
}

.form-top-left,
.form-top-right {
width: 100%;
}

form.review-form label {
  display: block;
  opacity: 0.902;
  font-size: 14px;
  line-height: 28px;
  color: var(--color-gray-800);
  font-weight: 400;
  margin-bottom: 6px;
}

form.review-form input {
width: 100%;
height: 54px;
background-color: var(--color-white);
border: 1px solid var(--color-rgba-ink-10);
padding: 10px 20px;
}

form.review-form textarea {
  width: 100%;
  height: 156px;
  background-color: var(--color-white);
  border: 1px solid var(--color-rgba-ink-10);
  padding: 10px 20px;
  resize: none;
}

form.review-form input::placeholder,
form.review-form textarea::placeholder{
  opacity: 0.702;
  font-size: 14px;
  line-height: 28px;
  color: var(--color-gray-800);
  font-weight: 400;
}

section.shop-related {
  margin: 0 0 100px;
}

.shop-related-title h2 {
  font-size: 36px;
  line-height: 40px;
  margin-bottom: 30px;
}

/*============end-shop-details-section==============*/



/*<!-- ============================================================== -->
 <!-- Cart Inner Page Start Here -->
<!-- ============================================================== -->*/

.cart-section {
  padding: 120px 0 205px;
  background-color: var(--color-white);
  position: relative;
  margin-bottom: -85px;
}

.darkmode .cart-section {
  background-color: var(--color-charcoal-950);
}

.cart-title {
  color: var(--color-slate-900);
  font-size: 28px;
  font-weight: bold;
  font-family: var(--font-serif);
}

.darkmode .cart-title {
  color: var(--color-white);
} 

.darkmode .table {
  --bs-table-bg:var(--bs-dark);
}

.darkmode .table th{
  color: var(--color-white);
}

.darkmode .table .price,
.darkmode .table .total{
  color: var(--color-white);
}

.darkmode .table .remove-btn{
  color: var(--color-white);
}

.col-auto.cart-btn button {
  background-color: var(--color-purple-base-rgb);
  color: var(--color-white);
  padding: 8px 25px;
}

button.remove-btn:hover i {
  color: var(--color-purple-base-rgb);
}

.cart-totals {
  padding: 20px 15px 20px;
  background-color: var(color-gray-150);
  margin-top: 40px;
}

.cart-totals h4 {
  font-size: 25px;
  font-family: var(--font-serif);
  margin: 0px 0 15px;
}

/* Cart Product Mobile */
.cart-product-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.cart-product-mobile-thumb {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 135px;
  flex: 1 0 135px;
  max-width: 135px;
  border: 1px solid var(--color-gray-250);
}

.cart-product-mobile-remove {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  border: none;
  border-radius: 50%;
  background-color: var(--color-white);
  transition: 0.5s;
}

.cart-product-mobile-remove i {
  display: inline-block;
  border-radius: 50%;
  transition: 0.5s;
}

.cart-product-mobile-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.cart-product-mobile-image img {
  width: 100%;
}

.cart-product-mobile-content {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.cart-product-mobile-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.cart-product-mobile-title a {
  font-weight: 600;
}

.cart-product-mobile-quantity,
.cart-product-mobile-total {
  font-size: 14px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}

.cart-product-mobile-total {
  margin-bottom: 15px;
}

.cart-product-mobile-add-to-cart {
  margin-top: 15px;
}

.cart-product-mobile-quantity,
.cart-product-mobile-total {
  font-size: 15px;
  line-height: 1;
  display: -webkit-box;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--color-slate-800);
}

.cart-product-mobile-quantity .price,
.cart-product-mobile-total .total {
  padding-left: 5px;
}

/*<!-- ============================================================== -->
 <!--Cart Inner Page End Here -->
<!-- ============================================================== -->*/




/*===================start-footer Section Css======================*/

.footer-section {
  background-image: url(../images/resource/footer-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 115px 0 20px;
  margin-top: -8px;
}

.widgets-company-info{
    margin-bottom: 30px;
}

.company-info-desc p {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-rgba-white-902);
  line-height: 1.5;
  padding: 25px 0;
  margin: 0;
  width: 85%;
  font-family: var(--font-serif);
}

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

.footer-icon i {
  font-size: 18px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  background-color: var(--color-purple-base-rgb);
  color: var(color-gray-150);
  border-radius: 100%;
}

/* Ensure footer contact boxes use full width and stack icon above text */
.footer-box{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.footer-box .footer-icon{
  float:none;
  display:flex;
  align-items:center;
  margin:0;
}
.footer-box .footer-icon i{
  position:static;
  display:inline-flex;
  margin:0;
}
.footer-box .footer-content{
  margin:0;
}

.footer-content p {
  font-size: 15px;
  font-family: var(--font-serif);
  color: var(--color-rgba-white-902);
  line-height: 1.929;
  margin: 0;
}

.footer-content span {
  font-size: 15px;
  font-family: var(--font-serif);
  color: var(--color-rgba-white-902);
  line-height: 1.929;
  margin: 0;
}

.menu-quick-link-content {
  margin: 35px 0 0;
}

.footer-social-icon{
  text-align: right;
}

.footer-social-icon ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social-icon ul li {
    display: inline-block;
}

.footer-social-icon ul li a {
    display: inline-block;
    font-size: 18px;
    color: var(--color-white);
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    background-color: var(--color-rgb-teal-700) ;
    margin-right: 10px;
    border-radius: 100%;
    transition: .5s;
}

.widget-nav-menu{
    margin-bottom: 30px;
}

.widget-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--color-rgb-white-98);
    font-family: var(--font-serif);
}

.menu-quick-info-content {
    margin: 35px 0 0;
}

.menu-quick-link-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-quick-link-content ul li a {
  font-size: 18px;
  display: inline-block;
  padding: 7px 0;
  transition: .5s;
  color: var(--color-rgba-white-902);
  font-family: var(--font-serif);
}

.menu-quick-info-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-quick-info-content ul li a{
    font-size: 18px;
    padding: 7px 0;
    display: inline-block;
    color: var(--color-rgba-white-902);
    transition: .5s;
    font-family: var(--font-serif);
}

.form-content p {
  font-size: 18px;
  margin-top: 35px;
  color: var(--color-rgba-white-902);
  font-family: var(--font-serif);
}

.form input {
  font-style: italic;
  background-color: var(--color-transparent);
  color: var(--color-white) !important;
  border: 1px solid var(--color-purple-base-rgb);
}

.form input::placeholder {
  color: var(--color-white);
}

.footer-bottom-content p {
  font-size: 18px;
  color: var(--color-rgba-white-902);
  font-family: var(--font-serif);
} 

.menu-quick-link-content ul li a:hover{
    color: var(--color-rgb-teal-700);
}

.menu-quick-info-content ul li a:hover{
    color: var(--color-rgb-teal-700);
}

.copyright-section {
    background: var(--color-purple-base-rgb);
    margin-top: -4px;
    padding: 20px 0 20px;
}

.footer-social-icon ul li a:hover{
  color: var(--color-rgb-teal-700);
  background-color: var(--color-rgba-white-902);
}

/*
<!-- ============================================================== -->
      <!--end-footer Section Css -->
<!-- ============================================================== -->*/




/*==========================================
     Search Popup Css
=========================================*/

.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: var(--color-rgba-black-090);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color:var(--color-purple-base-rgb);
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px var(--color-rgba-black-005);
    border-bottom: 3px solid var(--color-white);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i{
    position: relative;
    font-size: 30px;
    color: var(--color-white);
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: var(--color-gray-930);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
    overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:var(--color-black);
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: var(--color-white);
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: var(--color-transparent);
    text-align: center;
    font-size: 24px;
    color: var(--color-black);
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: var(--color-black);
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:var(--color-black);
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:var(--color-white);
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-popup .close-search.style-two i{
    font-size:20px;
    color:var(--color-white);
}

.search-box-btn.search-box-outer i {
    font-size: 20px;
    display: inline-block;
    color: var(--color-rgb-charcoal-900);
    cursor: pointer;
}


/*=================== Loader Css================*/

.containers{
  background: var(--color-white);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text{
  color: var(--color-white);
  font-size: 24px;
  font-family: arial;
  letter-spacing: 1px;
}
.loader{
  width: 25%;
}
.loader .load-box{
  width: 100%;
  height: 20px;
  border: 2px solid var(--color-sky-700);
  border-radius: 15px;
  padding: 1px;
}
.loader .load-box .load{
  background: var(--color-green-400);
  width: 100%;
  height: 100%;
  border-radius: 15px;
  animation: animate 2s linear forwards;
}
@keyframes animate{
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

/*==================Scrollup Button Section==================*/

/*------back-to-top------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px var(--color-rgba-lime-20);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

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

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: var(--color-purple-base-rgb);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    font-weight: 900;
    opacity: 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--color-transparent);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: var(--color-blue-600);
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: var(--color-purple-base-rgb);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}


/* Check-list style: replace bullets with Font Awesome check icons */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0;
}
.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}
.check-list li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /* check icon */
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #2ecc71;
  font-size: 16px;
  line-height: 1;
}
/* Service description list with checkmark bullets */
.service-description ul {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0 0 0 1.8rem;
}
.service-description ul li {
  position: relative;
  padding: 0.25rem 0 0.25rem 0;
  padding-left: 1.2rem;
}
.service-description ul li::before {
  content: "\2713"; /* checkmark */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #2ecc71; /* green */
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* Continuum of care image sizing and centering (page-specific) */
.continuum-img {
  width: 70%;
  height: auto;
  display: block;
  margin: 1rem auto; /* center horizontally */
  padding-bottom: 40px;
}

@media (max-width: 767.98px) {
  .continuum-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Make mobile menu scrollable on small screens so page behind doesn't steal scroll */
@media (max-width: 991.98px) {
  .mobile-menu-area .mobile-menu {
    max-height: calc(100vh - 56px); /* leave space for header */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ensure the inner nav doesn't force full page scroll */
  .mobile-menu-area .mobile-menu nav {
    height: auto;
  }
}