* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { font-size: 16px; font-family: "Nunito", sans-serif; background: #fff; color: #1b3222; }

body { max-width: 1920px; margin: auto; }

a { text-decoration: none; color: unset; }
ul { list-style: none; }
img { vertical-align: middle; }
p { line-height: 1.6; }

h1,h2,h3,h4,h5,h6 {  }

h2 { color: var(--c1); }
section { overflow: hidden; }
button { border: 0; outline: 0; font-weight: 500; font-family: unset; font-size: unset; }

 
.widget_section { display: block; padding: 80px 16px; position: relative; }
.container { max-width: 1140px; margin: auto; }
.visible { overflow: visible; }


:root {

	--c1 : #d03823;
	--c2 : #0023be;


	--bgc1 : #f2eff4;

	--bs  : 0px 0px 35px 0px #00000026;

	--bs1 : 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
	--tY  : translateY(-6px);

	--ts  : all 0.5s ease-in-out;
	--fa  : "Font Awesome 7 Pro";
	--ff1 : "Poppins", sans-serif;
	--ff2 : "Montserrat", Sans-serif;

	--tel : "Noto Sans Telugu", sans-serif;

	--imgFilter : invert(28%) sepia(95%) saturate(2617%) hue-rotate(137deg) brightness(95%) contrast(101%);
	--lgG : linear-gradient(90deg, #00963fe8, #00963fe8);


	--bgG1 : linear-gradient(180deg, #d03823, #0023be);
	--bgG2 : linear-gradient(180deg, #0023be, #d03823);


}


/*  ---------- ----- HEADER ----- ---------- */
.header { display: block; position: fixed; top: 0; width: 100%; background: #fff; transition: var(--ts); z-index: 1000; border-bottom: 1px solid #ddd; }
.header.sticky {  }

.mobile_view { width: 100%; display: none; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding: 8px 16px; }
.mobile_view .btnOnOff { font-size: 22px; }

.btnOnOff { display: none; width: 38px; height: 38px; background: var(--c1); color: #fff; border-radius: 4px; }

/*  */
.navbar { display: flex; justify-content: space-around; align-items: center; padding: 8px 16px;  }

.navLogo { display: block; width: 180px; }
.navLogo img { width: 100%; height: auto; }

.navLinks { display: flex; }
.navLinks li {  }
.navLinks li a { display: block; padding: 8px 16px; font-size: 14px; font-weight: 600; transition: var(--ts); text-transform: uppercase; }
.navLinks li a:hover { color: var(--c1); }
.navLink_Active { color: var(--c1); font-weight: 600!important; }

.navBtn button { display: inline-block; padding: 10px 32px; font-size: 14px; background: var(--bgG1); color: #fff; transition: var(--ts); border-radius: 50px; }
.navBtn button:hover { background: var(--bgG2); }

@media all and (max-width: 992px) {
	.header { border-bottom: unset; }

	.mobile_view { display: flex; }
	.btnOnOff { display: block; }

	.navArea { width: 100%; height: 100%; position: fixed; top: 0; left: -100%; background: #00000080; transition: var(--ts); z-index: 9999; }
	.navbar { width: 80%; height: 100%; display: block; background: #fff; padding: 0px; }
	.logo_area { width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding: 8px 16px; }
	.navLinks { width: 100%; flex-direction: column; padding: 16px 0px; }
	.navBtn { width: 100%; display: block; padding: 0px 16px; }
}


/* ---------- ----- POPUP MODEL ----- ---------- */
.modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0; padding: 16px;
  width: 100%; height: 100%; overflow: auto; background: #00000080; }

.modal-content { background: #fefefe; margin: auto; border: 1px solid #888; width: 380px;  border-radius: 12px; overflow: hidden;  }

.modal-head { display: flex; justify-content: space-between; align-items: center; text-align: center; padding: 16px; background: var(--c1); color: #fff; }
.modal-head h3 { font-size: 24px; color: #fff; }

.close { color: #fff; font-size: 32px; font-weight: 500; }

.modal-body { display: block; width: 100%; }
.modal-body iframe { width: 100%; height: 400px; border: 0; }

.ctc_btn { display: inline-block; padding: 12px 32px; font-size: 16px;
	background: var(--c1); color: #fff; transition: var(--ts); border-radius: 50px; margin-top: 24px; }
.ctc_btn i { margin-left: 4px; }

@media all and (max-width: 498px) {
	.modal-content { width: 100%; }
	.modal-head h3 { font-size: 20px; }
	.ctc_btn { display: inline-block; padding: 12px 16px; }
}

.form__ { display: block; width: 100%; padding: 24px 16px; }
.form_group { display: flex; gap: 16px; margin-top: 16px; }
.form_group input,
.form_group select,
.form_group textarea { width: 100%; padding: 16px; background: #f3f5fd; border: 1px solid #f3f5fd; outline: 0; }
.form_group button { text-transform: uppercase; }



/* ---------- ----- TITLE ----- ---------- */
.section_title { display: block; width: 100%; text-align: center; margin-bottom: 32px; }
.section_title h2 { font-size: 42px; font-weight: 900; }

@media all and (max-width: 498px) {
	.section_title h2 { font-size: 28px; }
}


/* ---------- ----- Banner ----- ---------- */
.banner { width: 100%; display: block; background: var(--bgG1); padding: 130px 16px 0px 16px; }
.banner_row { display: flex; justify-content: space-between; align-items: center; }
.banner_col { display: block; position: relative; }
.banner_col:nth-child(1) { width: 25%; }
.banner_col:nth-child(2) { width: 50%; }
.banner_col:nth-child(3) { width: 25%; }

.banner_img { width: 100%; display: block; }
.banner_img img { width: 100%; height: auto; }

.banner_text { display: block; text-align: center; color: #fff; }
.banner_text span { display: inline-block; padding: 8px 16px; background: var(--c1); color: #fff; border-radius: 50px; margin-bottom: 16px; }
.banner_text h1 { text-align: center; font-size: 42px; font-weight: 800; color: unset; }
.banner_text h1 span { display: inline-block; padding: 0; background: #fff0; color: unset; border-radius: 0; margin: 0; }
.banner_text p { margin-top: 16px; font-size: 16px; }
.banner_text a { display: inline-block; padding: 8px 16px; background: #fff; color:var(--c1); font-weight: 800; border-radius: 50px; margin-top: 16px; transition: var(--ts); }
.banner_text a:hover {  background: var(--c1); color: #fff; }

@media all and (max-width: 498px) {
	.banner_row { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "col2 col2" "col1 col3"; gap: 16px; }
	.banner_col:nth-child(1) { width: 100%; grid-area: col1; }
	.banner_col:nth-child(2) { width: 100%; grid-area: col2; }
	.banner_col:nth-child(3) { width: 100%; grid-area: col3; }

	.banner_text h1 { font-size: 36px; }
	.banner_text h1 span { display: inline; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.banner_text h1 { font-size: 28px; }
}


/* ---------- ----- ABOUT ----- ---------- */
.about_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; }
.about_col { display: block; width: 100%; position: relative; }
.about_img { display: block; width: 100%; }
.about_img img { width: 100%; height: auto; }
.about_txt {  }
.about_txt h2 { font-size: 42px; }
.about_txt p  { margin-top: 16px; }
.about_txt a { display: inline-block; padding: 8px 16px;
	background: var(--bgG1); color: #fff; font-weight: 800; border-radius: 50px; margin-top: 16px; transition: var(--ts); }
.about_txt a:hover { background: var(--bgG2); }

@media all and (max-width: 498px) {
	.about_row { grid-template-columns: repeat(1, 1fr); }
	.about_txt h2 { font-size: 28px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.about_txt h2 { font-size: 28px; }
}

/* ---------- ----- Image Comparison ----- ---------- */
.image_comparison { max-width: 800px; }

#comparison { width: 100%; padding-bottom: 100%; overflow: hidden;  position: relative;  }

figure { position: absolute; background: url(assets/images/before_image.jpg)no-repeat center / cover; font-size: 0; width: 100%; height: 100%; margin: 0; }

#divisor { position: absolute; background-image: url(assets/images/after_image.jpg);
	background-size: cover; width: 50%; height: 100%; bottom: 0; box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  
  &::before,
  &::after {
    content: ''; position: absolute; right: -2px; width: 4px; height: calc(50% - 25px); background: white; z-index: 3; }
  &::before { top: 0; box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3); }
  &::after { bottom: 0; box-shadow: 0 3px 8px 1px rgba(0,0,0,.3); }
}
#handle { position: absolute; height: 50px; width: 50px; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 1;
  
  &::before,
  &::after { content: ''; width: 0; height: 0; border: 6px inset transparent; position: absolute; top: 50%; margin-top: -6px; }
  &::before {
    border-right: 6px solid white; left: 50%; margin-left: -17px; }
  &::after { border-left: 6px solid white; right: 50%; margin-right: -17px; }
}

input[type=range]{ -webkit-appearance:none; -moz-appearance:none; position: absolute; top: 50%; left: -25px; transform: translateY(-50%); background-color: transparent; width: calc(100% + 50px);  z-index: 2;
  &:focus,
  &:active { border: none; outline: none; }
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 50px; width: 50px; border-radius: 50%; background: transparent; border: 4px solid white; box-shadow: 0 0 8px 1px rgba(0,0,0,.3); }
input[type=range]::-moz-range-track { -moz-appearance:none; height:15px; width: 100%; background-color: transparent;  position: relative; outline: none; }

/* ---------- ----- SERVICES ----- ---------- */
.service_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.service_col { display: block; width: 100%; border-radius: 12px; border: 1px solid #ddd; background: #fff; transition: var(--ts); overflow: hidden; }
.service_col:hover { box-shadow: var(--bs1); transform: var(--tY); }


.service_img { display: block; width: 100%; } 
.service_img img { width: 100%; height: auto; }

.service_txt hr { display: block; border: none; height: 1px; margin: 16px 0px; }
.service_txt hr.hr1 { background-color: #ddd0; }
.service_txt hr.hr2 { background-color: #ddd;  }

.service_txt { display: block; padding: 16px; background: #fff; }
.service_txt h3 { color: var(--c1); }
.service_txt p  { margin-top: 9px; font-size: 14px; }
.service_txt h4 {  }
.service_txt ul { display: block; }
.service_txt ul li { display: block; position: relative; padding-left: 24px; margin-top: 9px; font-size: 14px; }
.service_txt ul li:before { font-family: var(--fa); position: absolute; left: 0; top: 2px; font-size: 13px; }
.service_txt ul li:before { content: '\f058'; color: var(--c1); }
.service_txt ul:last-child li:before { content: '\f005'; color: var(--c1); }

@media all and (max-width: 498px) {
	.service_row { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	.service_row { grid-gap: 16px; }
}


/* ---------- ----- Work Process ----- ---------- */
.working_row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; }
.working_col { display: block; text-align: center; }
.working_col span { display: block; width: 72px; height: 72px; line-height: 72px;
	text-align: center; border-radius: 50%; background: var(--bgG1); color: #fff; font-size: 24px; font-weight: 900; margin: auto; }
.working_col h3 { margin-top: 16px; }
.working_col p  { margin-top: 9px; }

@media all and (max-width: 498px) {
	.working_row { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	
}


/* ---------- ----- CHOOSE ----- ---------- */
.choose_row { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 16px; }
.choose_col { display: block; text-align: center; padding: 20px 16px; border: 1px solid #ddd; background: #fff; border-radius: 12px; }
.choose_col span { display: block; font-size: 50px; font-weight: 900; margin: auto; }
.choose_col h3 { margin-top: 16px; font-size: 18px; }
.choose_col p  { margin-top: 9px; }

@media all and (max-width: 498px) {
	.choose_row { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	.choose_row { grid-gap: 8px; }
	.choose_col { padding: 16px 8px; }
}


/* ---------- ----- CARD ----- ---------- */
.card { max-width: 800px; width: 100%; margin: auto; display: block; text-align: center; }
.card span { display: inline-block; padding: 12px 16px; background: var(--c1); color: #fff; border-radius: 50px; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.card h2 { font-size: 42px; font-weight: 900; color: #fff; }
.card h3 { font-size: 32px; color: #fff; margin-top: 16px; }
.card p  { font-size: 18px; color: #fff; margin-top: 16px; }
.card a  { display: inline-block; padding: 12px 16px; background: #fff; border-radius: 50px; font-size: 18px; font-weight: 600; margin-top: 16px; transition: var(--ts); }
.card a:hover { background: var(--c1); color: #fff; }

@media all and (max-width: 498px) {
	.card span { font-size: 16px; }
	.card h2 { font-size: 28px; }
	.card h3 { font-size: 22px; }
	.card p  { font-size: 16px; }
	.card a  { font-size: 16px; }
}


/* ---------- ----- OUR DOCTOR ----- ---------- */
.doctor_row { display: grid; grid-template-columns: 40% 58%; grid-gap: 2%; }
.doctor_col { display: block; position: relative; }
.doctor_col h2 { font-size: 42px; font-weight: 900; }
.doctor_col strong { display: block; }
.doctor_col p { margin-top: 16px; }

.doctor_img { display: block; width: 100%; }
.doctor_img img { width: 100%; height: auto; }

@media all and (max-width: 498px) {
	.doctor_row { grid-template-columns: repeat(1, 1fr); grid-gap: 32px; }
}

.ourDoctor { max-width: 800px; width: 100%; display: block; margin: auto; text-align: center; }
.ourDoctor h2 { font-size: 42px; font-weight: 900; }
.docInfo { display: block; width: 100%; padding: 24px; background: #fff; border-radius: 12px; border: 1px solid #ddd; margin-top: 16px; }
.docInfo p { font-size: 18px; }

@media all and (max-width: 498px) {
	.ourDoctor h2 { font-size: 28px; }
	.docInfo { padding: 24px 16px; }
	.docInfo p { font-size: 14px; }
}


/* ---------- ----- Reviews ----- ---------- */
.review_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; }
.review { display: block; padding: 32px 24px; border: 1px solid #ddd; border-radius: 12px; }
.review span { display: block; margin-bottom: 16px; }
.review p { margin-bottom: 16px; }

@media all and (max-width: 498px) {
	.review_row { grid-template-columns: repeat(1, 1fr); }
}


/* ---------- ----- Contact ----- ---------- */
.section_contact { display: block; width: 100%; padding: 60px 16px; }
.contact_info { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
.contact__info { width: 100%; display: block; padding: 24px 16px; border: 1px solid #ddd; border-radius: 12px; text-align: center; transition: var(--ts); }
.contact__info i { font-size: 42px; color: var(--c1); }
.contact__info p { font-size: 18px; margin-top: 14px; }

.contact__info:hover { box-shadow: var(--bs1); transform: var(--tY); }

.contact_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; }
.contact_col { display: block; }
.contactMap { display: block; }
.contactMap iframe { display: block; width: 100%; height: 50vh; vertical-align: middle; border: 0; }

.contactInfo { display: flex; flex-direction: column; gap: 16px; }
.contactInfo h2 { font-size: 32px; }
.address { display: block; padding: 24px 16px; border: 1px solid #ddd; border-radius: 12px; transition: var(--ts); font-style: normal; }
.address i { font-size: 24px; color: var(--c1); }
.address a { display: block; margin-top: 16px; }

.address:hover { box-shadow: var(--bs1); transform: var(--tY); }

@media all and (max-width: 498px) {
	.contact_info { flex-direction: column; }
	.contact_row { grid-template-columns: repeat(1, 1fr); }
	.contactInfo h3 { font-size: 28px; }
}


/* ---------- ----- Fixed Button ----- ---------- */
.fixed_btns { display: flex; justify-content: flex-end; padding: 0px 60px; position: fixed; bottom: 60px; right: 0; z-index: 99; }
.fixed_btn { display: block; width: 62px; position: relative; }
.fixed_btn img { width: 100%; height: auto; overflow: hidden; }

@media all and (max-width: 480px) {
	.fixed_btns { padding: 0px 24px; bottom: 24px; }
	.fixed_btn { width: 42px; }
}


/* ---------- ----- FOOTER ----- ---------- */
.footer { display: block; padding: 30px 16px; position: relative; background: var(--c1); color: #fff; }
.copyright { text-align: center; }
@media all and (max-width: 498px) {

}