body {
  font-family:"Poppins" !important;
}
.btn-green {
background-color: #00C77F;
color: white;
border: none;
padding: 5px 15px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.arrows{
padding-top: 5%;
padding-left: 5px;
}

.btn-green1{
background-color: #00C77F;
color: white;
border: none;
padding: 9px 18px;
border-radius: 20px;
margin: 5%;

font-size: 14px;
font-weight: 500;
}




                    /*similar blogs*/

                    .similarblogs img {
                      width: 100%; /* Make the image responsive */
                      border-radius: 10px; /* Add rounded corners */
                      object-fit: cover; /* Maintain image aspect ratio */
                      }
                      .similarblogs h6{
                      font-size: 17px;
                      font-weight: 600;
                      }
                      .similar{
                      font-size: 50px;
                      padding-top: 5%;
                      padding-bottom: 3%;
                      }
                      
                      .similarblogs {
                      padding: 10px; /* Add padding inside each card */
                      }
                      .similarblogs p{
                      font-size: 14px;
                      }
                     
                      .row-cols-md-4 > .col {
                      display: flex; /* Flexbox for column content alignment */
                      flex-direction: column; /* Align items vertically inside each column */
                      }
                      .owl-theme .owl-nav {
                        display: none !important;
                    }
                  
/*texh wishpers*/
.playtime{
width: 40%;
}
.episodesection{
background-color: #EEF9F7;
padding: 5%;
border-radius: 5%;
}
.alt-services a{
color: #00B000;

}
.alt-services{
margin-top: 8%;
}
.alt-services{
background-image: url('./image/playlistbg.webp');
background-repeat: no-repeat;
background-size: 5%;
}
.latest-writings p{
font-size: 20px;
font-weight: 500;
}
.latest-writings a{
font-size: 15px;
font-weight:600;
color: black;
}
.playtext{
font-size: 12px;
}
.playmaking{
font-weight: 700;
}
.secondcolumn{
font-size: 14px;
font-weight: 600;
}

/*schedule*/
.schedule h1{
  font-size: 50px;
}
.btn-talk{

background-color: #00B000;
color: white;
border: none;
padding: 14px 27px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.btn-talk:hover{

  background-color: #00B000;
  color: white;
  border: none;
  padding: 14px 27px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  }

.call-schedule{
margin: 7%;
}



/*hero section*/

#header-hero {
display: flex;
flex-direction: column;
background-image: url('./image/herobg.webp'); /* Background image for the entire section */
background-size: cover; /* Ensure the background covers the section */
background-position: center; /* Center the background */
background-repeat: no-repeat; /* Prevent the image from repeating */
min-height: 60vh; /* Make sure the section spans the full viewport height */
color: white;
}
.header-hero h2{
color: white;

}

.header {
height: 80px; /* Fixed height for the header */
z-index: 1000; /* Ensure the header stays above other content */
}

.hero {
flex-grow: 1; /* Ensure the hero takes up the remaining space */
display: flex;
justify-content: center;
align-items: center;
}




/*services*/


/* Ensure all elements include padding and border in the total width and height */
*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
}

.services {
margin: 0;
padding: 0;
}

.row {
margin: 0;
padding: 0;
}

/* Service item setup */
.services .service-item {
position: relative;
padding: 6%;
border-top: 1px solid gray;
width: 100%; /* Ensure full width for responsiveness */
}

.services .service-item:hover {
background-color: #00B000;
}

/* Original content (text and image) */
.services .original-content {
display: flex;
align-items: center;
justify-content: space-between;
transition: opacity 0.3s ease;
flex-wrap: wrap; /* Allow items to wrap in small screens */
}

/* Hover content setup */
.services .hover-content {
display: none !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0;
overflow: hidden;
}

/* On hover, show hover content */
.services .service-item:hover .hover-content {
display: flex !important;
}

.services .service-item:hover .service-image {
opacity: 0;
}

/* Hover image styling */
.services .hover-image {
width: 122%;
}
/* Positioning for the image and overlay */




/* Overlay style */
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00B000; /* Green overlay */
  opacity: 0.6; /* Adjust transparency */
  pointer-events: none; /* Allows interaction with the image */
}




/* Original service image */
.service-image {
width: 12%;
}

/* Hover content text */
.services .hover-content p {
margin-left: 50%;
color: #fff;
font-size: 14px;
flex-shrink: 0;
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
.services .service-item {
padding: 2%; /* Reduce padding on smaller screens */
}

.services .original-content {
flex-direction: column; /* Stack items vertically on smaller screens */
align-items: flex-start;
}

.service-image {
width: 50%; /* Reduce image width on smaller screens */
}

.services .hover-image {
max-height: 50%; /* Limit hover image height */
width: auto; /* Make the hover image responsive */
}

.services .hover-content p {
font-size: 0.9rem; /* Adjust font size for smaller screens */
}
}

@media screen and (max-width: 480px) {
.services .service-item {
padding: 1%; /* Even more padding reduction on mobile */
}

.services .hover-image {
max-height: 40%; /* Further limit hover image height on mobile */
}

.services .hover-content p {
font-size: 0.8rem; /* Further reduce font size for mobile */
}

.service-image {
width: 60%; /* Further reduce the image size for mobile */
}
}
.original-content h6{
  font-size: 25px;
font-weight: 600;
}
.service-item:hover h6{
color: white;
}