.hero {
 position: relative;
 width: 100%;
 height: 81vh;
 display: flex;
 align-items: center;
 color: white;
 overflow: hidden;
}
.slide {
 position: absolute;
 width: 100%;
 height: 100%;
 background-size: cover;
 background-position: center;
 transition: opacity 1s ease-in-out;
 opacity: 0;
}
.slide.active {
 opacity: 1;
}
.overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
}

.content {
 position: relative;
 z-index: 2;
 max-width: 65%;
 padding: 50px;
}

.content h1 {
 font-size: 48px;
 font-weight: 500;
 color: #b2d235;
 font-family: 'bree serif';
 letter-spacing: 2px;
 margin-top: 60px;
}

.content p {
 margin: 20px 0;
 font-size: 17px;
 font-family: 'jost';
 margin-top: 30px;
}

.btn1 {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, rgb(129,151,14) 0%, rgba(110,148,41,1) 35%, rgba(44,94,51,1) 100%);
color: white;
padding: 15px 20px;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-family: 'Bree Serif';
letter-spacing: 1.50px;
font-weight: 500;
font-size: 15px;
margin-top: 20px;
transition: color 0.4s ease;
}

/* Pseudo-element for sliding effect */
.btn1::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(203,27,32,1) 0%, rgba(102,14,14,1) 100%, rgba(110,15,15,1) 100%);
z-index: -1;
transition: transform 0.4s ease;
}


.btn1:hover::after {
transform: translateX(100%);
}

.btn1:hover {
color: #fff;
}


.doctor {
position: absolute;
right: 8%;
bottom: 0%;
max-height: 95%;
}

.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}

.slider-controls span {
display: inline-block;
width: 30px;
height: 30px;
background: white;
color: #E31E24;
text-align: center;
line-height: 30px;
margin: 0 5px;
cursor: pointer;
}

/* Banner Styling */
.banner {
position: absolute;
top: 19%;
left: 6%; /* Centered horizontally */
transform: translateX(-50%); /* Center adjustment */
text-align: center;
z-index: 2;
}

/* Qualities Styling */
.qualities {
position: absolute;
top: 20%; /* Default top position */
left: 10%;
font-size: 16px;
font-weight: 400;
color: white;
display: flex;
align-items: center;
gap: 15px;
z-index: 2;
}

.qualities::before {
content: "";
width: 40px;
height: 2px;
background: white;
display: inline-block;
}

.qualities span {
position: relative;
}

.qualities span:not(:last-child)::after {
content: "•";
color: white;
margin-left: 20px;
font-size: 25px;
font-weight: bold;
vertical-align: middle;
}

.slider-controls span.active {
background: red;
color: white;
border-radius: 0px;
}

@media (min-width: 1300px) {
    .content1 h2 {
      color: #2d7c2d;
      font-size: 22px; /* Thoda bada kiya */
      margin-bottom: 4px; /* Space diya */
     }
}

@media (min-width: 1800px) {
    .banner {
        position: absolute;
        top: 28%;
        left: 49%;
        transform: translateX(-50%);
        text-align: center;
        width: 90%;
    }
}


/* Responsive Fixes for Large Screens */
@media screen and (min-width: 800px) {
    .content {
        max-width: 65%;
        padding: 100px;
    }

    .content h1 {
        font-size: 40px;
    }

    .content p {
        font-size: 16px;
        line-height: 30px;
    }

    .doctor {
        max-height: 95%;
        right: 5%;
    }
    .qualities {
       left: 35px;
       top: -30px;
       font-size: 16px;
    }
}

@media (max-width: 768px) {
    .hero {
        position: relative;
        height: 57vh;
        overflow: hidden;
    }

    .qualities{
         display: none;
    }

    .slide {
        background-size: cover;
        background-position: center;
        height: 50%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .banner {
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 90%;
    }

    .qualities span {
        display: block;
        font-size: 18px;
        font-weight: bold;
        color: white;
        margin-bottom: 5px;
    }

    .content {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: white;
        width: 90%;
        padding: 5px;
        top: -26px;
    }

    .content p {
        display: none;
    }
    .doctor {
        display: none; /* Hiding doctor image on mobile for better space usage */
    }

    .slider-controls {
        display: none;
    }

    .slider-controls span {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .content h1 {
        font-size: 18px; /* Adjusted size for mobile */
        line-height: 1.2;
    }

    .btn1 {
        display: inline-block; /* Ensures the button is visible */
        font-size: 15px;
        padding: 10px 11px;
    }
}