/*********************************************************
************ Styling Testimonials ***********************
*********************************************************/
.testimonialheader {
    margin: 60px auto 20px;
    text-align: center;
    font-size: calc(20px + 0.390625vw);
    color: white;
    background: #af1f60;
    width: 90%;
}

.testimonials {
    margin: 40px auto;
    width: 90%;
    position: relative;
    min-height: auto;
}
  .slider-container {
    width: 100%;
    height: fit-content;
    overflow: hidden;   
    position: relative;
}

.slider {
    display: flex;
    transition: transform 1s ease;
    gap:3%;   
     width: 100%;
    margin: auto;
    justify-content: center;
    /* margin-left:10%; */
    /* margin:auto;     */
   }

.slider img {
     width: 75%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border: 10px solid #af1f60;
    box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.5);
    display: none;
    background-color: antiquewhite;
    padding:2% 2%;
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
}

.slider img.active:hover{
    transform: scale(1.15);
}

.slider img.active {
        display: block;
   
}
.arrow {
    position: absolute;
   top:50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.prev {   
    left: 3%;    
}

.next {   
    left: 92%;
}
.end {
    color: gray;
}
.start {
    color: gray;
}
.sectionend{
    border: 1px solid #af1f60;
    /* margin: 10px; */
    width: 95vw;
}
section {
    margin-bottom: 50px;
}
/*****************************************
*** Styling the Other Articles Section****
******************************************/
.article-section {
  margin-top: 60px;
  margin-left: 5%;
  position: relative;
}

/* Style for the article list */
.article-list {
  display: flex; /* Make the article list a flex container */
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Style for the article container */
.article {
  background-color: #f5f5f5; /* Set your desired background color */
  margin: 10px;
  flex-basis: calc(33.33% - 20px); /* Adjust width as needed */
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column; /* Make each article a column */
  transition: background-color 0.3s ease; 
}

/* Style for the article header */
.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: calc(14px + 0.390625vw);
}

/* Style for the article button */
.article-button {
  background-color: transparent;
  color: #007BFF;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Style for the article title */
.article-title {
  margin: 0;
  padding-left: 10px;
  font-size: calc(13px + 0.390625vw);
}
.blogsectionptag{
  font-size: calc(12px + 0.390625vw);
}

/* Style for the section header (H2) */
.section-header {
  background-color: #af1f60;
  color: white; 
  margin-top: 16px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
 
  display: flex;
    align-items: center;
}

/* Style for the section header button */
.section-header-button{
  background-color: transparent;
  color: white;
  border: none;
  font-size: 32px;
  margin-left: auto; /* Align button to the right */
  padding-right:40%;
  cursor: pointer;
  animation: heartbeat 4s infinite;
}
.article-button{ 
  color: blue;
  border: none;  
  cursor: pointer;  
}

/* Style for the section header text */
.section-header-text {
  margin: 0;
  padding-right: 10px; /* Add padding to the right to separate text from button */
  font-size: calc(20px + 0.390625vw);
  
}

/* Style for the article content */
.article-content {
  display: none;
  padding: 10px;
}

/* Style for the read more link */
.article-content a {
  color: #007BFF;
  text-decoration: none;
}

.article-content a:hover {
  text-decoration: underline;
}
.article:hover {
  background-color: hsl(210, 70%, 80%); /* Change background color to HSL */
}

/* Font color change when hovered */
.article:hover .article-title {
  color: white; /* Change font color to white */
}

@keyframes heartbeat {
  0% { font-size: 28px; }
  50% { font-size: 40px; }
  100% { font-size: 28px; }
}

a.hero-btn.secondary-btn{
        background: #8b0428;
}

/*********************************************************
*************Styling Rating Section**********
**********************************************************/

.ratingcontainer{
  position:relative;
  display:flex;
}
.avgratingdoc {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;  
  color: rgba(32, 32, 32, 0.7);

  width: 95%;
  margin: 40px auto;   /* top & bottom spacing + center */

  display: flex;
  flex-direction: column;

  padding: 25px;

  background: #ffffff;
  border-radius: 12px;

  border: 1px solid rgba(0,0,0,0.08);

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  transition: all 0.3s ease;
}
.avgratingdoc:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
/* .tableheader{
  font-size: 16px; 
  font-weight: 700;
} */
img.ratingimg{
  width:8%;  
  height:50px;
  padding-right:1%;
  
}

.ratingimg{
  width:8%;
  padding-left:2%;
  padding-top:1%;
  padding-bottom:1%;
}

.avgratingdoc hr{
  border: 0.5px solid black;
  opacity:0.1;
}
.headerh5 {
  width:30%;
  padding-left:2%;
  padding-top:1%;
  padding-bottom:1%;
}

ul.toptreatorder li{
  /* display:inline; */
  padding-right:1%;
  list-style-type: disc;
  width:25%;
  padding-left:2%;  
  list-style-position: inside;
  text-transform: capitalize;

}

.toptreatorder {
  display:flex;
  flex-wrap: wrap;  
}

.servicesh3{
  margin-top:2%; 
}


@media(max-width:768px) {
    /*****************************************
*** Styling the Other Articles Section****
******************************************/
.article {
  flex-basis: 100%; /* Full width for small screens */
}

.section-header-text {   
  font-size: calc(15px + 0.390625vw);
}

.section-header-button {   
  padding-right:45%;
  font-size: calc(15px + 0.390625vw);
}

h2.testimonialheader{
  font-size: calc(15px + 0.390625vw);
}
/*
Styling the Ratings Section
*/

img.ratingimg{
  width:14%;
  height: 14%;
}

.ratingimg{
  width:14%;
}
  
.headerh5 {
  width:27%;
}

ul.toptreatorder li{    
  width:45%;  
}
}

@media (max-width: 480px) {
 /*
Styling the Ratings Section
*/

.avgratingdoc{    
  font-size: 10px; 
}


img.ratingimg{
  width:15%;
  height: 15%;
}

.ratingimg{
  width:15%;
}

}