/*!
Theme Name: Relos Care
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: relos-care
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Relos Care is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.site-logo img.custom-logo {
    width: 180px;
    height: 65px;
    margin: 0px 0 0px 65px;
}
nav.main-menu.main-header-five__inner.medical-banner-bg-white {
    background-color: #fff;
}

/* .medical-banner-bg {
    background-color: var(--bg-blue-mid);
    background-image:
        radial-gradient(at 0% 0%, hsla(210, 50%, 85%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(205, 40%, 75%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(210, 35%, 65%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(215, 45%, 70%, 1) 0px, transparent 50%),
        linear-gradient(135deg, var(--bg-blue-dark) 0%, var(--bg-blue-mid) 100%);
} */
 .medical-banner-bg {
    /* This shorthand acts like a "background-color" but supports the gradient */
    background: var(--medical-bg-gradient);
}
.about-six {
    background: var(--medical-bg-gradient);
}
.about-six h1{
    color: var(--bg-txt-color);
}
.about-six h2{
    color: var(--bg-txt-color);
}
.about-six h3{
   color: var(--bg-txt-color);
}
.about-six span{
    color: var(--bg-txt-color) !important;
}
.about-six p{
    color: var(--bg-txt-color);
}
.about-six li{
    color: var(--bg-txt-color);
}
.about-six i{
    color: var(--bg-txt-color);
}
.causes-five {
    background: var(--medical-bg-gradient);
}
.causes-five h1{
    color: var(--bg-txt-color);
}
.causes-five h2{
    color: var(--bg-txt-color);
}
.causes-five h3{
   color: var(--bg-txt-color);
}
.causes-five span{
    color: var(--bg-txt-color) !important;
}
.causes-five p{
    color: var(--bg-txt-color);
}
.causes-five li{
    color: var(--bg-txt-color);
}
.causes-five i{
    color: var(--bg-txt-color);
}
.testimonial-five {
    background: var(--medical-bg-gradient);
}

.testimonial-five h1{
    color: var(--bg-txt-color);
}
.testimonial-five h2{
    color: var(--bg-txt-color);
}
.testimonial-five h3{
   color: var(--bg-txt-color);
}
.testimonial-five span{
    color: var(--bg-txt-color) !important;
}
.testimonial-five p{
    color: var(--bg-txt-color);
}
.testimonial-five li{
    color: var(--bg-txt-color);
}
.testimonial-five i{
    color: var(--bg-txt-color);
}
.faq-three {
    background: var(--medical-bg-gradient);
}

.faq-three h1{
    color: var(--bg-txt-color);
}
.faq-three h2{
    color: var(--bg-txt-color);
}
.faq-three h3{
   color: var(--bg-txt-color);
}
.faq-three span{
    color: var(--bg-txt-color) !important;
}
.faq-three p{
    color: var(--bg-txt-color);
}
.faq-three li{
    color: var(--bg-txt-color);
}
.faq-three i{
    color: var(--bg-txt-color);
}

.medical-banner-bg h1{
    color: var(--bg-txt-color);
}
.medical-banner-bg h2{
    color: var(--bg-txt-color);
}
.medical-banner-bg h3{
   color: var(--bg-txt-color);
}
.medical-banner-bg span{
    color: var(--bg-txt-color) !important;
}
.medical-banner-bg p{
    color: var(--bg-txt-color);
}
.medical-banner-bg li{
    color: var(--bg-txt-color);
}
.medical-banner-bg i{
    color: var(--bg-txt-color);
}


/* Sidebar Container */
.sticky-sidebar {
  position: fixed; /* Keeps it on screen while scrolling */
  right: 20px;    /* Distance from the right edge */
  top: 50%;       /* Center vertically */
  transform: translateY(-50%); /* Precise vertical centering */
  
  /*background-color: rgb(213 212 212 / 60%);*/ /* Semi-transparent dark background */
  background-color: #fff;  
  padding: 20px 10px;
  border-radius: 50px; /* Creates the capsule/pill shape */
  
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  gap: 25px;            /* Space between icons */
  z-index: 9999;        /* Ensures it stays on top of other elements */
  backdrop-filter: blur(5px); /* Optional: adds a nice blur effect like modern websites */
}

/* Individual Icon Style */
.social-link {
  color: #000;
  font-size: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hover Effect */
.social-link:hover {
  color: #cccccc; /* Slightly gray on hover */
  transform: scale(1.2); /* Slight grow effect */
}


.feature-five__item__icon {
    perspective: 1000px;
}

.icon-flip {
    width: 45px;
    height: 45px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.feature-five__item:hover .icon-flip {
    transform: rotateY(180deg);
}

.icon-front,
.icon-back {
    position: absolute;
    width: 45px;
    height: 45px;
    backface-visibility: hidden;
}

.icon-back {
    transform: rotateY(180deg);
}
.service-one__item__normal__title {
    font-size: 26px !important;
}



.why-choose-one__box__icon {
    position: relative;
    display: inline-block;
}

.why-choose-one__box__icon img {
        width: 40px;
    transition: 0.3s;
    display: block;
    margin: 18px;

}
.google-map {
    width: 100%;
    padding: 0;
    margin: 0;
}

.google-map iframe {
    width: 100%;
    height: 500px; /* aap height adjust kar sakte ho */
    border: 0;
    display: block;
}

.counter-three__icon {
    perspective: 1000px;
}

.counter-three__icon img {
    width: 60px; /* adjust */
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* hover par flip */
.counter-three__single:hover .counter-three__icon img {
    transform: rotateY(180deg);
}

/* hover wali image hidden by default */
.icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* hover par change */
.why-choose-one__box:hover .icon-default {
    opacity: 0;
}

.why-choose-one__box:hover .icon-hover {
    opacity: 1;
}

.gallery-four__item {
    min-height: 365px;
    max-height: 365px;
}
.service-one__item__normal__icon {
    font-size: 50px;
    line-height: 22px;
    display: flex;
    color: var(--oxpins-black);
    padding: 15px 30px 0;
    margin: 0 0 24px;
    justify-content: space-between;
    align-items: center;
}

/* Image styling */
.service-one__item__normal__icon img.custom-service-icon {
    width: 50px;   /* Aapki requirement ke hisab se size set karein */
    height: 50px;  /* Size icon ke barabar rakhne ke liye */
    object-fit: contain; /* Image ko box ke andar fit karne ke liye */
    display: block;
}

/* Hover state ke liye bhi agar zaroorat ho */
.service-one__item__hover__icon img.custom-service-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    /*filter: brightness(0) invert(1);*/ /* Agar hover par icon white karna ho */
}
.why-choose-one__image img {
    max-height: 745px;
    min-height: 745px;
}
.site-footer-three__logo img {
    max-width: 20%;
}
.site-footer-three__social i {
    font-size: 22px;
}
.site-footer-three .site-footer-three__social a {
    width: 45px;
    height: 45px;
}
.about-four__border {
    position: absolute;
    top: -4px;
    left: -4px;
    border-width: 5px;
    border-color: rgb(251, 212, 90);
    border-style: solid;
    border-radius: 20px;
    background-color: rgba(40, 55, 52, 0);
    width: 440px;
    height: 582px;
    z-index: -1;
}
.about-four__img-two {
    position: relative;
    bottom: 0px;
    right: 0px;
    z-index: 1;
}
.about-four__img-two img {
    width: 100%;
    border-radius: var(--oxpins-bdr-radius);
}
.become-volunteer-three__image img {
    /* min-height: 301px; */
    width: 100%;
    max-height: 362px;
    height: 100%;
}

.service-one__all-btn {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff; /* Matches your text color */
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 30px;
}

.service-one__all-btn i {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    background-color: #024bc6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.service-one__all-btn:hover {
    color: #024ac7; /* Use your primary brand color here */
}

.service-one__all-btn:hover i {
    background-color: #f7a400;
    color: #fff;
    transform: translateX(5px);
}
.service-one__item__normal__text {
    max-height: 150px !important;
    min-height: 120px;
}

.coming-soon-wrapper {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
}

.badge-coming-soon {
    background-color: #4b166a; /* Purple color from image */
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.5px;
    position: relative;
    text-transform: uppercase;
}

/* Adjustments for Hover State if needed */
.service-one__item__hover .badge-coming-soon.hover-badge {
    margin-top: 10px;
    border: 1px solid white;
}

/* Optional: Gray out the image slightly if Coming Soon */
.is-coming-soon .service-one__item__normal__thumb img {
    filter: grayscale(0.5);
    opacity: 0.8;
}
/* Responsive adjustment for mobile */
@media (max-width: 600px) {
  .sticky-sidebar {
    right: 10px;
    padding: 15px 8px;
    gap: 15px;
  }
  .social-link {
    font-size: 18px;
  }
}

@media (max-width: 1599px) {
    .main-header-five__main-menu {
        padding-left: 20px;
        /*margin-left: auto;*/
    }
}

@media (max-width: 767px) {
    .custom-cursor__cursor {
        display: none;
    }
    .custom-cursor__cursor-two {
        display: none;
    }
    .site-logo img.custom-logo {
        width: 135px;
        height: 55px;
        margin: auto;
    }
}